Skip to content

Commit cadc530

Browse files
Hufe921Hufe921
committed
feat: highlight when control value exists or not #1140 
1 parent facf277 commit cadc530

File tree

7 files changed

+140
-26
lines changed

7 files changed

+140
-26
lines changed

‎docs/en/guide/option.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ interface IEditorOption {
6060
pageOuterSelectionDisable?: boolean // Disable selection when the mouse moves out of the page. default: false
6161
wordBreak?: WordBreak // Word and punctuation breaks: No punctuation in the first line of the BREAK_WORD &The word is not split, and the line is folded after BREAK_ALL full according to the width of the character. default: BREAK_WORD
6262
watermark?: IWatermark // Watermark{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
63-
control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string;}
63+
control?: IControlOption // Control {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string; existValueBackgroundColor?: string; noValueBackgroundColor?: string;}
6464
checkbox?: ICheckboxOption // Checkbox {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
6565
radio?: IRadioOption // Radio {width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
6666
cursor?: ICursorOption // Cursor style. {width?: number; color?: string; dragWidth?: number; dragColor?: string; dragFloatImageDisabled?: boolean;}

‎docs/guide/option.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ interface IEditorOption {
6060
pageOuterSelectionDisable?: boolean // 鼠标移出页面时选区禁用。默认：false
6161
wordBreak?: WordBreak // 单词与标点断行：BREAK_WORD首行不出现标点&单词不拆分、BREAK_ALL按字符宽度撑满后折行。默认：BREAK_WORD
6262
watermark?: IWatermark // 水印信息。{data:string; color?:string; opacity?:number; size?:number; font?:string; numberType:NumberType;}
63-
control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string;}
63+
control?: IControlOption // 控件信息。 {placeholderColor?:string; bracketColor?:string; prefix?:string; postfix?:string; borderWidth?: number; borderColor?: string; activeBackgroundColor?: string; disabledBackgroundColor?: string; existValueBackgroundColor?: string; noValueBackgroundColor?: string;}
6464
checkbox?: ICheckboxOption // 复选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
6565
radio?: IRadioOption // 单选框信息。{width?:number; height?:number; gap?:number; lineWidth?:number; fillStyle?:string; strokeStyle?: string; verticalAlign?: VerticalAlign;}
6666
cursor?: ICursorOption // 光标样式。{width?: number; color?: string; dragWidth?: number; dragColor?: string; dragFloatImageDisabled?: boolean;}

‎src/editor/core/draw/Draw.ts‎

Lines changed: 6 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2031,32 +2031,17 @@ export class Draw {
20312031
ctx: CanvasRenderingContext2D,
20322032
payload: IDrawRowPayload
20332033
) {
2034-
const {
2035-
control: { activeBackgroundColor, disabledBackgroundColor }
2036-
} = this.options
2037-
const { rowList, positionList } = payload
2038-
const isPrintMode = this.isPrintMode()
2039-
const activeControlElement = this.control.getActiveControl()?.getElement()
2034+
const { rowList, positionList, elementList } = payload
20402035
for (let i = 0; i < rowList.length; i++) {
20412036
const curRow = rowList[i]
20422037
for (let j = 0; j < curRow.elementList.length; j++) {
20432038
const element = curRow.elementList[j]
20442039
const preElement = curRow.elementList[j - 1]
2045-
// 控件激活时高亮色
2046-
const isActiveControlHighlight =
2047-
!isPrintMode &&
2048-
activeBackgroundColor &&
2049-
activeControlElement &&
2050-
element.controlId === activeControlElement.controlId &&
2051-
!this.control.getIsRangeInPostfix()
2052-
// 控件禁用时高亮色
2053-
const isDisabledControlHighlight =
2054-
!isPrintMode && disabledBackgroundColor && element.control?.disabled
2055-
if (
2040+
// 高亮配置：元素 > 控件配置
2041+
const highlight =
20562042
element.highlight ||
2057-
isActiveControlHighlight ||
2058-
isDisabledControlHighlight
2059-
) {
2043+
this.control.getControlHighlight(elementList, curRow.startIndex + j)
2044+
if (highlight) {
20602045
// 高亮元素相连需立即绘制，并记录下一元素坐标
20612046
if (
20622047
preElement &&
@@ -2079,9 +2064,7 @@ export class Draw {
20792064
y,
20802065
element.metrics.width + offsetX,
20812066
curRow.height,
2082-
element.highlight ||
2083-
(isActiveControlHighlight ? activeBackgroundColor : '') ||
2084-
(isDisabledControlHighlight ? disabledBackgroundColor : '')
2067+
highlight
20852068
)
20862069
} else if (preElement?.highlight) {
20872070
// 之前是高亮元素，当前不是需立即绘制

‎src/editor/core/draw/control/Control.ts‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -287,6 +287,75 @@ export class Control {
287287
return !!this.activeControl.getElement()?.control?.pasteDisabled
288288
}
289289

290+
// 通过索引找到控件并判断控件是否存在值
291+
public getIsExistValueByElementListIndex(
292+
elementList: IElement[],
293+
index: number
294+
): boolean {
295+
const element = elementList[index]
296+
// 是否是控件
297+
if (!element.controlId) return false
298+
// 单选框、复选框仅需验证控件值
299+
if (
300+
element.control?.type === ControlType.CHECKBOX ||
301+
element.control?.type === ControlType.RADIO
302+
) {
303+
return !!element.control?.code
304+
}
305+
// 其他控件需校验文本
306+
if (element.controlComponent === ControlComponent.VALUE) {
307+
return true
308+
}
309+
if (element.controlComponent === ControlComponent.PLACEHOLDER) {
310+
return false
311+
}
312+
// 向后查找值元素
313+
if (
314+
element.controlComponent === ControlComponent.PREFIX ||
315+
element.controlComponent === ControlComponent.PRE_TEXT
316+
) {
317+
let i = index + 1
318+
while (i < elementList.length) {
319+
const nextElement = elementList[i]
320+
if (nextElement.controlId !== element.controlId) {
321+
return false
322+
}
323+
if (nextElement.controlComponent === ControlComponent.VALUE) {
324+
return true
325+
}
326+
if (nextElement.controlComponent === ControlComponent.PLACEHOLDER) {
327+
return false
328+
}
329+
i++
330+
}
331+
}
332+
// 向前查找值元素
333+
if (
334+
element.controlComponent === ControlComponent.POSTFIX ||
335+
element.controlComponent === ControlComponent.POST_TEXT
336+
) {
337+
let i = index - 1
338+
while (i >= 0) {
339+
const preElement = elementList[i]
340+
if (preElement.controlId !== element.controlId) {
341+
return false
342+
}
343+
if (preElement.controlComponent === ControlComponent.VALUE) {
344+
return true
345+
}
346+
if (preElement.controlComponent === ControlComponent.PLACEHOLDER) {
347+
return false
348+
}
349+
i--
350+
}
351+
}
352+
return false
353+
}
354+
355+
public getControlHighlight(elementList: IElement[], index: number) {
356+
return this.controlSearch.getControlHighlight(elementList, index)
357+
}
358+
290359
public getContainer(): HTMLDivElement {
291360
return this.draw.getContainer()
292361
}

‎src/editor/core/draw/control/interactive/ControlSearch.ts‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,18 +19,76 @@ type IHighlightMatchResult = (ISearchResult & IControlHighlightRule)[]
1919

2020
export class ControlSearch {
2121
private draw: Draw
22+
private control: Control
2223
private options: DeepRequired<IEditorOption>
2324
private highlightList: IControlHighlight[]
2425
private highlightMatchResult: IHighlightMatchResult
2526

2627
constructor(control: Control) {
2728
this.draw = control.getDraw()
29+
this.control = control
2830
this.options = this.draw.getOptions()
2931

3032
this.highlightList = []
3133
this.highlightMatchResult = []
3234
}
3335

36+
// 获取控件设置高亮信息
37+
public getControlHighlight(elementList: IElement[], index: number) {
38+
const {
39+
control: {
40+
activeBackgroundColor,
41+
disabledBackgroundColor,
42+
existValueBackgroundColor,
43+
noValueBackgroundColor
44+
}
45+
} = this.options
46+
const element = elementList[index]
47+
const isPrintMode = this.draw.isPrintMode()
48+
const activeControlElement = this.control.getActiveControl()?.getElement()
49+
// 颜色配置：元素 > 控件激活 > 控件禁用 > 控件存在值 > 控件不存在值
50+
let isActiveControlHighlight = false
51+
let isDisabledControlHighlight = false
52+
let isExitsValueControlHighlight = false
53+
let isNoValueControlHighlight = false
54+
if (!element.highlight) {
55+
// 控件激活时高亮色
56+
isActiveControlHighlight =
57+
!isPrintMode &&
58+
!!activeBackgroundColor &&
59+
!!activeControlElement &&
60+
element.controlId === activeControlElement.controlId &&
61+
!this.control.getIsRangeInPostfix()
62+
}
63+
if (!isActiveControlHighlight) {
64+
// 控件禁用时高亮色
65+
isDisabledControlHighlight =
66+
!isPrintMode && !!disabledBackgroundColor && !!element.control?.disabled
67+
}
68+
if (!isDisabledControlHighlight) {
69+
// 控件存在值时高亮色
70+
isExitsValueControlHighlight =
71+
!isPrintMode &&
72+
!!existValueBackgroundColor &&
73+
!!element.controlId &&
74+
this.control.getIsExistValueByElementListIndex(elementList, index)
75+
}
76+
if (!isExitsValueControlHighlight) {
77+
// 控件不存在值时高亮色
78+
isNoValueControlHighlight =
79+
!isPrintMode &&
80+
!!noValueBackgroundColor &&
81+
!!element.controlId &&
82+
!this.control.getIsExistValueByElementListIndex(elementList, index)
83+
}
84+
return (
85+
(isActiveControlHighlight ? activeBackgroundColor : '') ||
86+
(isDisabledControlHighlight ? disabledBackgroundColor : '') ||
87+
(isExitsValueControlHighlight ? existValueBackgroundColor : '') ||
88+
(isNoValueControlHighlight ? noValueBackgroundColor : '')
89+
)
90+
}
91+
3492
public getHighlightMatchResult(): IHighlightMatchResult {
3593
return this.highlightMatchResult
3694
}

‎src/editor/dataset/constant/Control.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,7 @@ export const defaultControlOption: Readonly<Required<IControlOption>> = {
88
borderWidth: 1,
99
borderColor: '#000000',
1010
activeBackgroundColor: '',
11-
disabledBackgroundColor: ''
11+
disabledBackgroundColor: '',
12+
existValueBackgroundColor: '',
13+
noValueBackgroundColor: ''
1214
}

‎src/editor/interface/Control.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@ export interface IControlOption {
108108
borderColor?: string
109109
activeBackgroundColor?: string
110110
disabledBackgroundColor?: string
111+
existValueBackgroundColor?: string
112+
noValueBackgroundColor?: string
111113
}
112114

113115
export interface IControlInitOption {

0 commit comments

Comments
 (0)