From dc54622258872630ff39309f2b1da3baee1f508f Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Fri, 3 Mar 2023 14:20:07 +0800 Subject: [PATCH] improve:control element input --- src/editor/core/draw/Draw.ts | 52 ++++++++++--------- src/editor/core/draw/control/Control.ts | 10 ++++ .../draw/control/checkbox/CheckboxControl.ts | 3 +- .../core/draw/control/select/SelectControl.ts | 3 +- src/editor/core/event/handlers/input.ts | 14 ++--- src/editor/core/event/handlers/keydown.ts | 8 +-- 6 files changed, 53 insertions(+), 37 deletions(-) diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 3e2d31f..f13cf43 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -340,11 +340,6 @@ export class Draw { public insertElementList(payload: IElement[]) { if (!payload.length) return - const activeControl = this.control.getActiveControl() - if (activeControl) { - const element = activeControl.getElement() - if (element.controlComponent !== ControlComponent.POSTFIX) return - } const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside() if (isPartRangeInControlOutside) return const { startIndex, endIndex } = this.range.getRange() @@ -353,27 +348,36 @@ export class Draw { isHandleFirstElement: false, editorOptions: this.options }) - const elementList = this.getElementList() - const isCollapsed = startIndex === endIndex - const start = startIndex + 1 - if (!isCollapsed) { - elementList.splice(start, endIndex - startIndex) - } - const positionContext = this.position.getPositionContext() - for (let i = 0; i < payload.length; i++) { - const element = payload[i] - if (positionContext.isTable) { - element.tdId = positionContext.tdId - element.trId = positionContext.trId - element.tableId = positionContext.tableId + let curIndex = -1 + // 判断是否在控件内 + const activeControl = this.control.getActiveControl() + if (activeControl && !this.control.isRangInPostfix()) { + curIndex = activeControl.setValue(payload) + } else { + const elementList = this.getElementList() + const isCollapsed = startIndex === endIndex + const start = startIndex + 1 + if (!isCollapsed) { + elementList.splice(start, endIndex - startIndex) } - elementList.splice(start + i, 0, element) + const positionContext = this.position.getPositionContext() + for (let i = 0; i < payload.length; i++) { + const element = payload[i] + if (positionContext.isTable) { + element.tdId = positionContext.tdId + element.trId = positionContext.trId + element.tableId = positionContext.tableId + } + elementList.splice(start + i, 0, element) + } + curIndex = startIndex + payload.length + } + if (~curIndex) { + this.range.setRange(curIndex, curIndex) + this.render({ + curIndex + }) } - const curIndex = startIndex + payload.length - this.range.setRange(curIndex, curIndex) - this.render({ - curIndex - }) } public getOriginalElementList() { diff --git a/src/editor/core/draw/control/Control.ts b/src/editor/core/draw/control/Control.ts index cc54459..98bbe74 100644 --- a/src/editor/core/draw/control/Control.ts +++ b/src/editor/core/draw/control/Control.ts @@ -48,6 +48,16 @@ export class Control { return false } + // 判断选区是否在后缀处 + public isRangInPostfix(): boolean { + if (!this.activeControl) return false + const { startIndex, endIndex } = this.getRange() + if (startIndex !== endIndex) return false + const elementList = this.getElementList() + const element = elementList[startIndex] + return element.controlComponent === ControlComponent.POSTFIX + } + public getContainer(): HTMLDivElement { return this.draw.getContainer() } diff --git a/src/editor/core/draw/control/checkbox/CheckboxControl.ts b/src/editor/core/draw/control/checkbox/CheckboxControl.ts index 07855e8..4309036 100644 --- a/src/editor/core/draw/control/checkbox/CheckboxControl.ts +++ b/src/editor/core/draw/control/checkbox/CheckboxControl.ts @@ -61,8 +61,7 @@ export class CheckboxControl implements IControlInstance { } public setValue(): number { - const { endIndex } = this.control.getRange() - return endIndex + return -1 } public setSelect() { diff --git a/src/editor/core/draw/control/select/SelectControl.ts b/src/editor/core/draw/control/select/SelectControl.ts index a9bce28..3e1d934 100644 --- a/src/editor/core/draw/control/select/SelectControl.ts +++ b/src/editor/core/draw/control/select/SelectControl.ts @@ -68,8 +68,7 @@ export class SelectControl implements IControlInstance { } public setValue(): number { - const range = this.control.getRange() - return range.endIndex + return -1 } public keydown(evt: KeyboardEvent): number { diff --git a/src/editor/core/event/handlers/input.ts b/src/editor/core/event/handlers/input.ts index 97c2e1b..e1bee65 100644 --- a/src/editor/core/event/handlers/input.ts +++ b/src/editor/core/event/handlers/input.ts @@ -67,7 +67,7 @@ export function input(data: string, host: CanvasEvent) { }) // 控件-移除placeholder let curIndex: number - if (activeControl && elementList[endIndex + 1]?.controlId === element.controlId) { + if (activeControl && !control.isRangInPostfix()) { curIndex = control.setValue(inputData) } else { const start = startIndex + 1 @@ -80,11 +80,13 @@ export function input(data: string, host: CanvasEvent) { } curIndex = startIndex + inputData.length } - rangeManager.setRange(curIndex, curIndex) - draw.render({ - curIndex, - isSubmitHistory: !isComposing - }) + if (~curIndex) { + rangeManager.setRange(curIndex, curIndex) + draw.render({ + curIndex, + isSubmitHistory: !isComposing + }) + } if (isComposing) { host.compositionInfo = { elementList, diff --git a/src/editor/core/event/handlers/keydown.ts b/src/editor/core/event/handlers/keydown.ts index 17cc8c7..0543c28 100644 --- a/src/editor/core/event/handlers/keydown.ts +++ b/src/editor/core/event/handlers/keydown.ts @@ -74,7 +74,7 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) { ...restArg } let curIndex: number - if (activeControl) { + if (activeControl && !control.isRangInPostfix()) { curIndex = control.setValue([enterText]) } else { if (isCollapsed) { @@ -84,8 +84,10 @@ export function keydown(evt: KeyboardEvent, host: CanvasEvent) { } curIndex = index + 1 } - rangeManager.setRange(curIndex, curIndex) - draw.render({ curIndex }) + if (~curIndex) { + rangeManager.setRange(curIndex, curIndex) + draw.render({ curIndex }) + } evt.preventDefault() } else if (evt.key === KeyMap.Left) { if (isReadonly) return