feat:add tab particle

src/editor/core/draw/Draw.ts

@@ -513,7 +513,7 @@ export class Draw {
   }
 
   private _computeRowList(innerWidth: number, elementList: IElement[]) {
-    const { defaultSize, defaultRowMargin, scale, tdPadding } = this.options
+    const { defaultSize, defaultRowMargin, scale, tdPadding, defaultTabWidth } = this.options
     const defaultBasicRowMarginHeight = this.getDefaultBasicRowMarginHeight()
     const tdGap = tdPadding * 2
     const canvas = document.createElement('canvas')
@@ -668,6 +668,11 @@ export class Draw {
         element.width = elementWidth
         metrics.width = elementWidth
         metrics.height = height * scale
+      } else if (element.type === ElementType.TAB) {
+        metrics.width = defaultTabWidth * scale
+        metrics.height = defaultSize * scale
+        metrics.boundingBoxDescent = 0
+        metrics.boundingBoxAscent = metrics.height
       } else {
         // 设置上下标真实字体尺寸
         const size = element.size || this.options.defaultSize
@@ -814,6 +819,8 @@ export class Draw {
         ) {
           this.textParticle.complete()
           this.checkboxParticle.render(ctx, element, x, y + offsetY)
+        } else if (element.type === ElementType.TAB) {
+          this.textParticle.complete()
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY)
         }

src/editor/core/event/CanvasEvent.ts

@@ -1,5 +1,5 @@
 import { ElementType } from '../..'
-import { NBSP, ZERO } from '../../dataset/constant/Common'
+import { ZERO } from '../../dataset/constant/Common'
 import { EDITOR_ELEMENT_COPY_ATTR } from '../../dataset/constant/Element'
 import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
 import { MouseEventButton } from '../../dataset/enum/Event'
@@ -454,7 +454,10 @@ export class CanvasEvent {
     } else if (evt.key === KeyMap.ESC) {
       this.clearPainterStyle()
     } else if (evt.key === KeyMap.TAB) {
-      this.input(NBSP.repeat(4))
+      this.draw.insertElementList([{
+        type: ElementType.TAB,
+        value: ''
+      }])
       evt.preventDefault()
     }
   }

src/editor/dataset/enum/Element.ts

@@ -9,5 +9,6 @@ export enum ElementType {
   PAGE_BREAK = 'pageBreak',
   CONTROL = 'control',
   CHECKBOX = 'checkbox',
-  LATEX = 'latex'
+  LATEX = 'latex',
+  TAB = 'tab'
 }

src/editor/index.ts

@@ -55,6 +55,7 @@ export default class Editor {
       defaultSize: 16,
       defaultRowMargin: 1,
       defaultBasicRowMarginHeight: 8,
+      defaultTabWidth: 32,
       width: 794,
       height: 1123,
       scale: 1,

src/editor/interface/Editor.ts

@@ -12,6 +12,7 @@ export interface IEditorOption {
   defaultSize?: number;
   defaultBasicRowMarginHeight?: number;
   defaultRowMargin?: number;
+  defaultTabWidth?: number;
   width?: number;
   height?: number;
   scale?: number;

src/mock.ts

@@ -281,6 +281,9 @@ elementList.push(...<IElement[]>[{
 
 // 模拟结尾文本
 elementList.push(...[{
+  value: '',
+  type: ElementType.TAB
+}, {
   value: 'E',
   size: 16
 }, {