feat:add checkbox particle

src/editor/core/draw/Draw.ts

@@ -37,6 +37,8 @@ import { Watermark } from './frame/Watermark'
 import { EditorMode } from '../../dataset/enum/Editor'
 import { Control } from './control/Control'
 import { zipElementList } from '../../utils/element'
+import { CheckboxParticle } from './particle/CheckboxParticle'
+import { DeepRequired } from '../../interface/Common'
 
 export class Draw {
 
@@ -46,7 +48,7 @@ export class Draw {
   private ctxList: CanvasRenderingContext2D[]
   private pageNo: number
   private mode: EditorMode
-  private options: Required<IEditorOption>
+  private options: DeepRequired<IEditorOption>
   private position: Position
   private elementList: IElement[]
   private listener: Listener
@@ -73,6 +75,7 @@ export class Draw {
   private pageBreakParticle: PageBreakParticle
   private superscriptParticle: SuperscriptParticle
   private subscriptParticle: SubscriptParticle
+  private checkboxParticle: CheckboxParticle
   private control: Control
 
   private rowList: IRow[]
@@ -83,7 +86,7 @@ export class Draw {
 
   constructor(
     container: HTMLDivElement,
-    options: Required<IEditorOption>,
+    options: DeepRequired<IEditorOption>,
     elementList: IElement[],
     listener: Listener
   ) {
@@ -120,6 +123,7 @@ export class Draw {
     this.pageBreakParticle = new PageBreakParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
     this.subscriptParticle = new SubscriptParticle()
+    this.checkboxParticle = new CheckboxParticle(this)
     this.control = new Control(this)
 
     new ScrollObserver(this)
@@ -249,7 +253,7 @@ export class Draw {
     return this.ctxList[this.pageNo]
   }
 
-  public getOptions(): Required<IEditorOption> {
+  public getOptions(): DeepRequired<IEditorOption> {
     return this.options
   }
 
@@ -563,6 +567,12 @@ export class Draw {
         element.width = innerWidth
         metrics.width = innerWidth
         metrics.height = this.options.defaultSize
+      } else if (element.type === ElementType.CHECKBOX) {
+        const { width, height, gap } = this.options.checkbox
+        const elementWidth = width + gap * 2
+        element.width = elementWidth
+        metrics.width = elementWidth
+        metrics.height = height
       } else {
         // 设置上下标真实字体尺寸
         const size = element.size || this.options.defaultSize
@@ -697,6 +707,9 @@ export class Draw {
           if (this.mode !== EditorMode.CLEAN) {
             this.pageBreakParticle.render(ctx, element, x, y)
           }
+        } else if (element.type === ElementType.CHECKBOX) {
+          this.textParticle.complete()
+          this.checkboxParticle.render(ctx, element, x, y + offsetY)
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
         }

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

@@ -0,0 +1,21 @@
+import { DeepRequired } from '../../../interface/Common'
+import { IEditorOption } from '../../../interface/Editor'
+import { IRowElement } from '../../../interface/Row'
+import { Draw } from '../Draw'
+
+export class CheckboxParticle {
+
+  private options: DeepRequired<IEditorOption>
+
+  constructor(draw: Draw) {
+    this.options = draw.getOptions()
+  }
+
+  public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) {
+    const { checkbox: { gap } } = this.options
+    const { metrics } = element
+    ctx.rect(x + gap, y - metrics.height, metrics.width - gap * 2, metrics.height)
+    ctx.stroke()
+  }
+
+}

src/editor/dataset/constant/Checkbox.ts

@@ -0,0 +1,7 @@
+import { ICheckboxOption } from '../../interface/Checkbox'
+
+export const defaultCheckboxOption: Readonly<Required<ICheckboxOption>> = {
+  width: 14,
+  height: 14,
+  gap: 5
+}

src/editor/dataset/enum/Element.ts

@@ -7,5 +7,6 @@ export enum ElementType {
   SUBSCRIPT = 'subscript',
   SEPARATOR = 'separator',
   PAGE_BREAK = 'pageBreak',
-  CONTROL = 'control'
+  CONTROL = 'control',
+  CHECKBOX = 'checkbox'
 }

src/editor/index.ts

@@ -22,6 +22,9 @@ import { defaultWatermarkOption } from './dataset/constant/Watermark'
 import { ControlType } from './dataset/enum/Control'
 import { defaultControlOption } from './dataset/constant/Control'
 import { IControlOption } from './interface/Control'
+import { ICheckboxOption } from './interface/Checkbox'
+import { defaultCheckboxOption } from './dataset/constant/Checkbox'
+import { DeepRequired } from './interface/Common'
 
 export default class Editor {
 
@@ -42,7 +45,12 @@ export default class Editor {
       ...defaultControlOption,
       ...options.control
     }
-    const editorOptions: Required<IEditorOption> = {
+    const checkboxOptions: Required<ICheckboxOption> = {
+      ...defaultCheckboxOption,
+      ...options.checkbox
+    }
+
+    const editorOptions: DeepRequired<IEditorOption> = {
       defaultMode: EditorMode.EDIT,
       defaultType: 'TEXT',
       defaultFont: 'Yahei',
@@ -76,7 +84,8 @@ export default class Editor {
       ...options,
       header: headerOptions,
       watermark: waterMarkOptions,
-      control: controlOptions
+      control: controlOptions,
+      checkbox: checkboxOptions
     }
     formatElementList(elementList, {
       editorOptions

src/editor/interface/Checkbox.ts

@@ -0,0 +1,10 @@
+export interface ICheckbox {
+  disabled?: boolean;
+  value: boolean | null;
+}
+
+export interface ICheckboxOption {
+  width?: number;
+  height?: number;
+  gap?: number;
+}

src/editor/interface/Editor.ts

@@ -1,5 +1,6 @@
 import { IElement } from '..'
 import { EditorMode } from '../dataset/enum/Editor'
+import { ICheckboxOption } from './Checkbox'
 import { IControlOption } from './Control'
 import { IHeader } from './Header'
 import { IWatermark } from './Watermark'
@@ -38,6 +39,7 @@ export interface IEditorOption {
   header?: IHeader;
   watermark?: IWatermark;
   control?: IControlOption;
+  checkbox?: ICheckboxOption;
 }
 
 export interface IEditorResult {

src/editor/interface/Element.ts

@@ -1,6 +1,7 @@
 import { ControlComponent } from '../dataset/enum/Control'
 import { ElementType } from '../dataset/enum/Element'
 import { RowFlex } from '../dataset/enum/Row'
+import { ICheckbox } from './Checkbox'
 import { IControl } from './Control'
 import { IColgroup } from './table/Colgroup'
 import { ITr } from './table/Tr'
@@ -59,6 +60,10 @@ export interface IControlElement {
   controlComponent?: ControlComponent;
 }
 
+export interface ICheckboxElement {
+  checkbox?: ICheckbox;
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
@@ -66,6 +71,7 @@ export type IElement = IElementBasic
   & ISuperscriptSubscript
   & ISeparator
   & IControlElement
+  & ICheckboxElement
 
 export interface IElementMetrics {
   width: number;

src/mock.ts

@@ -246,6 +246,26 @@ elementList.push({
   }]
 })
 
+// 模拟checkbox
+elementList.push(...<IElement[]>[{
+  value: '是否同意以上内容：'
+}, {
+  type: ElementType.CHECKBOX,
+  checkbox: {
+    value: true
+  },
+  value: ''
+}, {
+  value: '同意'
+}, {
+  type: ElementType.CHECKBOX,
+  value: ''
+}, {
+  value: '否定'
+}, {
+  value: '\n'
+}])
+
 // 模拟结尾文本
 elementList.push(...[{
   value: 'E',