fix: checkbox cannot be selected #382

src/editor/core/draw/Draw.ts

@@ -703,6 +703,10 @@ export class Draw {
     return this.listParticle
   }
 
+  public getCheckboxParticle(): CheckboxParticle {
+    return this.checkboxParticle
+  }
+
   public getControl(): Control {
     return this.control
   }

src/editor/core/draw/particle/CheckboxParticle.ts

@@ -1,15 +1,33 @@
 import { DeepRequired } from '../../../interface/Common'
 import { IEditorOption } from '../../../interface/Editor'
+import { IElement } from '../../../interface/Element'
 import { IRowElement } from '../../../interface/Row'
 import { Draw } from '../Draw'
 
 export class CheckboxParticle {
+  private draw: Draw
   private options: DeepRequired<IEditorOption>
 
   constructor(draw: Draw) {
+    this.draw = draw
     this.options = draw.getOptions()
   }
 
+  public setSelect(element: IElement) {
+    const { checkbox } = element
+    if (checkbox) {
+      checkbox.value = !checkbox.value
+    } else {
+      element.checkbox = {
+        value: true
+      }
+    }
+    this.draw.render({
+      isCompute: false,
+      isSetCursor: false
+    })
+  }
+
   public render(
     ctx: CanvasRenderingContext2D,
     element: IRowElement,

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

@@ -68,18 +68,23 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
     const isSetCheckbox = isDirectHitCheckbox && !isReadonly
     if (isSetCheckbox) {
       const { checkbox, control } = curElement
-      const codes = control?.code?.split(',') || []
+      // 复选框不在控件内独立控制
-      if (checkbox?.value) {
+      if (!control) {
-        const codeIndex = codes.findIndex(c => c === checkbox.code)
+        draw.getCheckboxParticle().setSelect(curElement)
-        codes.splice(codeIndex, 1)
       } else {
-        if (checkbox?.code) {
+        const codes = control?.code?.split(',') || []
-          codes.push(checkbox.code)
+        if (checkbox?.value) {
+          const codeIndex = codes.findIndex(c => c === checkbox.code)
+          codes.splice(codeIndex, 1)
+        } else {
+          if (checkbox?.code) {
+            codes.push(checkbox.code)
+          }
+        }
+        const activeControl = draw.getControl().getActiveControl()
+        if (activeControl instanceof CheckboxControl) {
+          activeControl.setSelect(codes)
         }
-      }
-      const activeControl = draw.getControl().getActiveControl()
-      if (activeControl instanceof CheckboxControl) {
-        activeControl.setSelect(codes)
       }
     } else {
       draw.render({

src/main.ts

@@ -749,6 +749,9 @@ window.onload = function () {
     instance.command.executeInsertElementList([
       {
         type: ElementType.CHECKBOX,
+        checkbox: {
+          value: false
+        },
         value: ''
       }
     ])