feat: add control content change event #940

Author: Hufe921

docs/en/guide/eventbus.md

@@ -90,6 +90,16 @@ Usage:
 instance.eventBus.on('controlChange', (payload: IControlChangeResult) => void)
 ```
 
+## controlContentChange
+
+Feature: The control content changes
+
+Usage:
+
+```javascript
+instance.eventBus.on('controlContentChange', (payload: IControlContentChangeResult) => void)
+```
+
 ## pageModeChange
 
 Feature: The page mode changes

docs/en/guide/listener.md

@@ -83,6 +83,18 @@ Usage:
 instance.listener.controlChange = (payload: IControlChangeResult) => {}
 ```
 
+## controlContentChange
+
+Feature: The control content changes
+
+Usage:
+
+```javascript
+instance.listener.controlContentChange = (
+  payload: IControlContentChangeResult
+) => {}
+```
+
 ## pageModeChange
 
 Feature: The page mode changes

docs/guide/eventbus.md

@@ -90,6 +90,16 @@ instance.eventBus.on('contentChange', () => void)
 instance.eventBus.on('controlChange', (payload: IControlChangeResult) => void)
 ```
 
+## controlContentChange
+
+功能：控件内容发生改变
+
+用法：
+
+```javascript
+instance.eventBus.on('controlContentChange', (payload: IControlContentChangeResult) => void)
+```
+
 ## pageModeChange
 
 功能：页面模式发生改变

docs/guide/listener.md

@@ -83,6 +83,18 @@ instance.listener.contentChange = () => {}
 instance.listener.controlChange = (payload: IControlChangeResult) => {}
 ```
 
+## controlContentChange
+
+功能：控件内容发生改变
+
+用法：
+
+```javascript
+instance.listener.controlContentChange = (
+  payload: IControlContentChangeResult
+) => {}
+```
+
 ## pageModeChange
 
 功能：页面模式发生改变

src/editor/core/draw/Draw.ts

@@ -688,6 +688,7 @@ export class Draw {
       curIndex = activeControl.setValue(payload, undefined, {
         isIgnoreDisabledRule: true
       })
+      this.control.emitControlContentChange()
     } else {
       const elementList = this.getElementList()
       const isCollapsed = startIndex === endIndex

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

@@ -8,7 +8,9 @@ import { ElementType } from '../../../dataset/enum/Element'
 import { DeepRequired } from '../../../interface/Common'
 import {
   IControl,
+  IControlChangeOption,
   IControlChangeResult,
+  IControlContentChangeResult,
   IControlContext,
   IControlHighlight,
   IControlInitOption,
@@ -477,6 +479,39 @@ export class Control {
     }
   }
 
+  public emitControlContentChange(options?: IControlChangeOption) {
+    const isSubscribeControlContentChange = this.eventBus.isSubscribe(
+      'controlContentChange'
+    )
+    if (
+      !isSubscribeControlContentChange &&
+      !this.listener.controlContentChange
+    ) {
+      return
+    }
+    const controlElement =
+      options?.controlElement || this.activeControl?.getElement()
+    if (!controlElement) return
+    const controlValue =
+      options?.controlValue || this.getControlElementList(options?.context)
+    let control: IControl
+    if (controlValue?.length) {
+      control = zipElementList(controlValue)[0].control!
+    } else {
+      control = controlElement.control!
+      control.value = []
+    }
+    if (!control) return
+    const payload: IControlContentChangeResult = {
+      control,
+      controlId: controlElement.controlId!
+    }
+    this.listener.controlContentChange?.(payload)
+    if (isSubscribeControlContentChange) {
+      this.eventBus.emit('controlContentChange', payload)
+    }
+  }
+
   public reAwakeControl() {
     if (!this.activeControl) return
     const elementList = this.getElementList()
@@ -940,6 +975,10 @@ export class Control {
             text.clearValue(controlContext, controlRule)
           }
         }
+        // 控件值变更事件
+        this.emitControlContentChange({
+          context: controlContext
+        })
         // 模拟控件激活后销毁
         this.activeControl = null
         // 修改后控件结束索引

src/editor/core/draw/control/checkbox/CheckboxControl.ts

@@ -128,6 +128,9 @@ export class CheckboxControl implements IControlInstance {
       curIndex: startIndex,
       isSetCursor: false
     })
+    this.control.emitControlContentChange({
+      context
+    })
   }
 
   public keydown(evt: KeyboardEvent): number | null {

src/editor/core/draw/control/date/DateControl.ts

@@ -227,6 +227,9 @@ export class DateControl implements IControlInstance {
       this.control.repaintControl({
         curIndex: newIndex
       })
+      this.control.emitControlContentChange({
+        context
+      })
       this.destroy()
     }
   }

src/editor/core/draw/control/radio/RadioControl.ts

@@ -61,5 +61,8 @@ export class RadioControl extends CheckboxControl {
       curIndex: startIndex,
       isSetCursor: false
     })
+    this.control.emitControlContentChange({
+      context
+    })
   }
 }

src/editor/core/draw/control/select/SelectControl.ts

@@ -354,6 +354,9 @@ export class SelectControl implements IControlInstance {
           this.control.repaintControl({
             curIndex: prefixIndex
           })
+          this.control.emitControlContentChange({
+            controlValue: []
+          })
         }
       }
       return
@@ -409,6 +412,9 @@ export class SelectControl implements IControlInstance {
       this.control.repaintControl({
         curIndex: newIndex
       })
+      this.control.emitControlContentChange({
+        context
+      })
       if (!isMultiSelect) {
         this.destroy()
       }

src/editor/core/event/handlers/cut.ts

@@ -37,6 +37,7 @@ export function cut(host: CanvasEvent) {
   let curIndex: number
   if (control.getActiveControl() && control.getIsRangeWithinControl()) {
     curIndex = control.cut()
+    control.emitControlContentChange()
   } else {
     draw.spliceElementList(elementList, start + 1, end - start)
     curIndex = start

src/editor/core/event/handlers/input.ts

@@ -87,6 +87,9 @@ export function input(data: string, host: CanvasEvent) {
   let curIndex: number
   if (control.getActiveControl() && control.getIsRangeWithinControl()) {
     curIndex = control.setValue(inputData)
+    if (!isComposing) {
+      control.emitControlContentChange()
+    }
   } else {
     const start = startIndex + 1
     if (startIndex !== endIndex) {

src/editor/core/event/handlers/keydown/backspace.ts

@@ -33,6 +33,9 @@ export function backspace(evt: KeyboardEvent, host: CanvasEvent) {
   ) {
     // 光标在控件内
     curIndex = control.keydown(evt)
+    if (curIndex) {
+      control.emitControlContentChange()
+    }
   } else {
     // 普通元素删除
     const position = draw.getPosition()

src/editor/core/event/handlers/keydown/delete.ts

@@ -30,6 +30,9 @@ export function del(evt: KeyboardEvent, host: CanvasEvent) {
   } else if (control.getActiveControl() && control.getIsRangeWithinControl()) {
     // 光标在控件内
     curIndex = control.keydown(evt)
+    if (curIndex) {
+      control.emitControlContentChange()
+    }
   } else if (elementList[endIndex + 1]?.controlId) {
     // 光标在控件前
     curIndex = control.removeControl(endIndex + 1)

src/editor/core/event/handlers/keydown/enter.ts

@@ -79,6 +79,7 @@ export function enter(evt: KeyboardEvent, host: CanvasEvent) {
   let curIndex: number
   if (activeControl && control.getIsRangeWithinControl()) {
     curIndex = control.setValue([enterText])
+    control.emitControlContentChange()
   } else {
     const position = draw.getPosition()
     const cursorPosition = position.getCursorPosition()

src/editor/core/event/handlers/mouseup.ts

@@ -297,6 +297,18 @@ export function mouseup(evt: MouseEvent, host: CanvasEvent) {
     draw.render({
       isSetCursor: false
     })
+    // 控件值变更回调
+    if (activeControl) {
+      control.emitControlContentChange()
+    } else if (cacheStartElement.controlId) {
+      control.emitControlContentChange({
+        context: {
+          range: cacheRange,
+          elementList: cacheElementList
+        },
+        controlElement: cacheStartElement
+      })
+    }
     // 拖拽后渲染图片工具
     if (imgElement) {
       if (

src/editor/core/listener/Listener.ts

@@ -1,6 +1,7 @@
 import {
   IContentChange,
   IControlChange,
+  IControlContentChange,
   IIntersectionPageNoChange,
   IPageModeChange,
   IPageScaleChange,
@@ -20,6 +21,7 @@ export class Listener {
   public saved: ISaved | null
   public contentChange: IContentChange | null
   public controlChange: IControlChange | null
+  public controlContentChange: IControlContentChange | null
   public pageModeChange: IPageModeChange | null
   public zoneChange: IZoneChange | null
 
@@ -32,6 +34,7 @@ export class Listener {
     this.saved = null
     this.contentChange = null
     this.controlChange = null
+    this.controlContentChange = null
     this.pageModeChange = null
     this.zoneChange = null
   }

src/editor/interface/Control.ts

@@ -186,6 +186,12 @@ export type IRepaintControlOption = Pick<
   'curIndex' | 'isCompute' | 'isSubmitHistory' | 'isSetCursor'
 >
 
+export interface IControlChangeOption {
+  context?: IControlContext
+  controlElement?: IElement
+  controlValue?: IElement[]
+}
+
 export interface INextControlContext {
   positionContext: IPositionContext
   nextIndex: number
@@ -212,6 +218,11 @@ export interface IControlChangeResult {
   controlId: string
 }
 
+export interface IControlContentChangeResult {
+  control: IControl
+  controlId: string
+}
+
 export interface IDestroyControlOption {
   isEmitEvent?: boolean
 }

src/editor/interface/EventBus.ts

@@ -1,6 +1,7 @@
 import {
   IContentChange,
   IControlChange,
+  IControlContentChange,
   IIntersectionPageNoChange,
   IMouseEventChange,
   IPageModeChange,
@@ -22,6 +23,7 @@ export interface EventBusMap {
   saved: ISaved
   contentChange: IContentChange
   controlChange: IControlChange
+  controlContentChange: IControlContentChange
   pageModeChange: IPageModeChange
   zoneChange: IZoneChange
   mousemove: IMouseEventChange

src/editor/interface/Listener.ts

@@ -7,7 +7,7 @@ import {
   TitleLevel
 } from '..'
 import { RowFlex } from '../dataset/enum/Row'
-import { IControlChangeResult } from './Control'
+import { IControlChangeResult, IControlContentChangeResult } from './Control'
 import { IEditorResult } from './Editor'
 import { IPositionContext } from './Position'
 import { ITextDecoration } from './Text'
@@ -52,6 +52,10 @@ export type IContentChange = () => void
 
 export type IControlChange = (payload: IControlChangeResult) => void
 
+export type IControlContentChange = (
+  payload: IControlContentChangeResult
+) => void
+
 export type IPageModeChange = (payload: PageMode) => void
 
 export type IZoneChange = (payload: EditorZone) => void