fix: data retrieval error when control was destroyed #884

Author: Hufe921

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

@@ -73,6 +73,7 @@ export class Control {
   private options: DeepRequired<IEditorOption>
   private controlOptions: IControlOption
   private activeControl: IControlInstance | null
+  private activeControlValue: IElement[]
 
   constructor(draw: Draw) {
     this.controlBorder = new ControlBorder(draw)
@@ -86,6 +87,7 @@ export class Control {
     this.options = draw.getOptions()
     this.controlOptions = this.options.control
     this.activeControl = null
+    this.activeControlValue = []
   }
 
   // 搜索高亮匹配
@@ -271,6 +273,12 @@ export class Control {
     return this.activeControl
   }
 
+  public updateActiveControlValue() {
+    if (this.activeControl) {
+      this.activeControlValue = this.activeControl.getValue()
+    }
+  }
+
   public initControl() {
     const elementList = this.getElementList()
     const range = this.getRange()
@@ -289,7 +297,11 @@ export class Control {
         }
       }
       const controlElement = this.activeControl.getElement()
-      if (element.controlId === controlElement.controlId) return
+      if (element.controlId === controlElement.controlId) {
+        // 更新缓存控件数据
+        this.updateActiveControlValue()
+        return
+      }
     }
     // 销毁旧激活控件
     this.destroyControl()
@@ -312,15 +324,18 @@ export class Control {
       this.activeControl = dateControl
       dateControl.awake()
     }
+    // 缓存控件数据
+    this.updateActiveControlValue()
     // 激活控件回调
     const isSubscribeControlChange = this.eventBus.isSubscribe('controlChange')
     if (this.listener.controlChange || isSubscribeControlChange) {
       let control: IControl
-      const value = this.activeControl?.getValue()
+      const value = this.activeControlValue
       if (value?.length) {
         control = zipElementList(value)[0].control!
       } else {
         control = pickElementAttr(deepClone(element)).control!
+        control.value = []
       }
       const payload: IControlChangeResult = {
         control,
@@ -349,15 +364,13 @@ export class Control {
         this.eventBus.isSubscribe('controlChange')
       if (this.listener.controlChange || isSubscribeControlChange) {
         let control: IControl
-        const value = this.activeControl.getValue({
-          range: this.activeControl.activeRange,
-          elementList: this.activeControl.activeElementList
-        })
+        const value = this.activeControlValue
         const activeElement = this.activeControl.getElement()
         if (value?.length) {
           control = zipElementList(value)[0].control!
         } else {
           control = pickElementAttr(deepClone(activeElement)).control!
+          control.value = []
         }
         const payload: IControlChangeResult = {
           control,
@@ -372,6 +385,7 @@ export class Control {
     }
     // 清空变量
     this.activeControl = null
+    this.activeControlValue = []
   }
 
   public repaintControl(options: IRepaintControlOption = {}) {

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

@@ -6,20 +6,13 @@ import {
   IControlRuleOption
 } from '../../../../interface/Control'
 import { IElement } from '../../../../interface/Element'
-import { IRange } from '../../../../interface/Range'
-import { deepClone } from '../../../../utils'
 import { Control } from '../Control'
 
 export class CheckboxControl implements IControlInstance {
-  public activeRange: IRange
-  public activeElementList: IElement[]
   protected element: IElement
   protected control: Control
 
   constructor(element: IElement, control: Control) {
-    const draw = control.getDraw()
-    this.activeRange = deepClone(draw.getRange().getRange())
-    this.activeElementList = draw.getElementList()
     this.element = element
     this.control = control
   }

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

@@ -14,17 +14,14 @@ import {
 } from '../../../../interface/Control'
 import { IEditorOption } from '../../../../interface/Editor'
 import { IElement } from '../../../../interface/Element'
-import { IRange } from '../../../../interface/Range'
-import { deepClone, omitObject, pickObject } from '../../../../utils'
+import { omitObject, pickObject } from '../../../../utils'
 import { formatElementContext } from '../../../../utils/element'
 import { Draw } from '../../Draw'
 import { DatePicker } from '../../particle/date/DatePicker'
 import { Control } from '../Control'
 
 export class DateControl implements IControlInstance {
   private draw: Draw
-  public activeRange: IRange
-  public activeElementList: IElement[]
   private element: IElement
   private control: Control
   private isPopup: boolean
@@ -35,8 +32,6 @@ export class DateControl implements IControlInstance {
     const draw = control.getDraw()
     this.draw = draw
     this.options = draw.getOptions()
-    this.activeRange = deepClone(draw.getRange().getRange())
-    this.activeElementList = draw.getElementList()
     this.element = element
     this.control = control
     this.isPopup = false

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

@@ -18,14 +18,11 @@ import {
 } from '../../../../interface/Control'
 import { IEditorOption } from '../../../../interface/Editor'
 import { IElement } from '../../../../interface/Element'
-import { IRange } from '../../../../interface/Range'
-import { deepClone, omitObject, pickObject, splitText } from '../../../../utils'
+import { omitObject, pickObject, splitText } from '../../../../utils'
 import { formatElementContext } from '../../../../utils/element'
 import { Control } from '../Control'
 
 export class SelectControl implements IControlInstance {
-  public activeRange: IRange
-  public activeElementList: IElement[]
   private element: IElement
   private control: Control
   private isPopup: boolean
@@ -35,8 +32,6 @@ export class SelectControl implements IControlInstance {
   constructor(element: IElement, control: Control) {
     const draw = control.getDraw()
     this.options = draw.getOptions()
-    this.activeRange = deepClone(draw.getRange().getRange())
-    this.activeElementList = draw.getElementList()
     this.element = element
     this.control = control
     this.isPopup = false

src/editor/core/draw/control/text/TextControl.ts

@@ -12,23 +12,18 @@ import {
 } from '../../../../interface/Control'
 import { IEditorOption } from '../../../../interface/Editor'
 import { IElement } from '../../../../interface/Element'
-import { IRange } from '../../../../interface/Range'
-import { deepClone, omitObject, pickObject } from '../../../../utils'
+import { omitObject, pickObject } from '../../../../utils'
 import { formatElementContext } from '../../../../utils/element'
 import { Control } from '../Control'
 
 export class TextControl implements IControlInstance {
-  public activeRange: IRange
-  public activeElementList: IElement[]
   private element: IElement
   private control: Control
   private options: DeepRequired<IEditorOption>
 
   constructor(element: IElement, control: Control) {
     const draw = control.getDraw()
     this.options = draw.getOptions()
-    this.activeRange = deepClone(draw.getRange().getRange())
-    this.activeElementList = draw.getElementList()
     this.element = element
     this.control = control
   }

src/editor/interface/Control.ts

@@ -112,8 +112,6 @@ export interface IControlInitResult {
 }
 
 export interface IControlInstance {
-  activeRange: IRange
-  activeElementList: IElement[]
   setElement(element: IElement): void
   getElement(): IElement
   getValue(context?: IControlContext): IElement[]