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,6 +68,10 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
     const isSetCheckbox = isDirectHitCheckbox && !isReadonly
     if (isSetCheckbox) {
       const { checkbox, control } = curElement
+      // 复选框不在控件内独立控制
+      if (!control) {
+        draw.getCheckboxParticle().setSelect(curElement)
+      } else {
         const codes = control?.code?.split(',') || []
         if (checkbox?.value) {
           const codeIndex = codes.findIndex(c => c === checkbox.code)
@@ -81,6 +85,7 @@ export function mousedown(evt: MouseEvent, host: CanvasEvent) {
         if (activeControl instanceof CheckboxControl) {
           activeControl.setSelect(codes)
         }
+      }
     } else {
       draw.render({
         curIndex,

src/main.ts

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