feat:add date particle

src/editor/core/draw/Draw.ts

@@ -44,6 +44,7 @@ import { ControlComponent } from '../../dataset/enum/Control'
 import { formatElementList } from '../../utils/element'
 import { WorkerManager } from '../worker/WorkerManager'
 import { Previewer } from './particle/previewer/Previewer'
+import { DateParticle } from './particle/date/DateParticle'
 
 export class Draw {
 
@@ -78,6 +79,7 @@ export class Draw {
   private waterMark: Watermark
   private header: Header
   private hyperlinkParticle: HyperlinkParticle
+  private dateParticle: DateParticle
   private separatorParticle: SeparatorParticle
   private pageBreakParticle: PageBreakParticle
   private superscriptParticle: SuperscriptParticle
@@ -130,6 +132,7 @@ export class Draw {
     this.waterMark = new Watermark(this)
     this.header = new Header(this)
     this.hyperlinkParticle = new HyperlinkParticle(this)
+    this.dateParticle = new DateParticle()
     this.separatorParticle = new SeparatorParticle()
     this.pageBreakParticle = new PageBreakParticle(this)
     this.superscriptParticle = new SuperscriptParticle()
@@ -801,6 +804,9 @@ export class Draw {
         } else if (element.type === ElementType.HYPERLINK) {
           this.textParticle.complete()
           this.hyperlinkParticle.render(ctx, element, x, y + offsetY)
+        } else if (element.type === ElementType.DATE) {
+          this.textParticle.complete()
+          this.dateParticle.render(ctx, element, x, y + offsetY)
         } else if (element.type === ElementType.SUPERSCRIPT) {
           this.textParticle.complete()
           this.superscriptParticle.render(ctx, element, x, y + offsetY)

src/editor/core/draw/particle/date/DateParticle.ts

@@ -0,0 +1,15 @@
+import { IRowElement } from '../../../../interface/Row'
+
+export class DateParticle {
+
+  public render(ctx: CanvasRenderingContext2D, element: IRowElement, x: number, y: number) {
+    ctx.save()
+    ctx.font = element.style
+    if (element.color) {
+      ctx.fillStyle = element.color
+    }
+    ctx.fillText(element.value, x, y)
+    ctx.restore()
+  }
+
+}

src/editor/dataset/constant/Element.ts

@@ -47,7 +47,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array<keyof IElement> = [
   'colgroup',
   'valueList',
   'control',
-  'checkbox'
+  'checkbox',
+  'dateFormat'
 ]
 
 export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
@@ -55,5 +56,6 @@ export const TEXTLIKE_ELEMENT_TYPE: ElementType[] = [
   ElementType.HYPERLINK,
   ElementType.SUBSCRIPT,
   ElementType.SUPERSCRIPT,
-  ElementType.CONTROL
+  ElementType.CONTROL,
+  ElementType.DATE
 ]

src/editor/dataset/enum/Element.ts

@@ -10,5 +10,6 @@ export enum ElementType {
   CONTROL = 'control',
   CHECKBOX = 'checkbox',
   LATEX = 'latex',
-  TAB = 'tab'
+  TAB = 'tab',
+  DATE = 'date'
 }

src/editor/interface/Element.ts

@@ -69,6 +69,11 @@ export interface ILaTexElement {
   laTexSVG?: string;
 }
 
+export interface IDateElement {
+  dateFormat?: string;
+  dateId?: string;
+}
+
 export type IElement = IElementBasic
   & IElementStyle
   & ITable
@@ -78,6 +83,7 @@ export type IElement = IElementBasic
   & IControlElement
   & ICheckboxElement
   & ILaTexElement
+  & IDateElement
 
 export interface IElementMetrics {
   width: number;

src/editor/utils/element.ts

@@ -72,6 +72,31 @@ export function formatElementList(elementList: IElement[], options: IFormatEleme
         }
       }
       i--
+    } else if (el.type === ElementType.DATE) {
+      const valueList = el.valueList || []
+      // 移除父节点
+      elementList.splice(i, 1)
+      // 追加字节点
+      if (valueList.length) {
+        // 元素展开
+        if (valueList[0].value.length > 1) {
+          const deleteValue = valueList.splice(0, 1)[0]
+          const deleteTextList = splitText(deleteValue.value)
+          for (let d = 0; d < deleteTextList.length; d++) {
+            valueList.splice(d, 0, { ...deleteValue, value: deleteTextList[d] })
+          }
+        }
+        const dateId = getUUID()
+        for (let v = 0; v < valueList.length; v++) {
+          const value = valueList[v]
+          value.type = el.type
+          value.dateFormat = el.dateFormat
+          value.dateId = dateId
+          elementList.splice(i, 0, value)
+          i++
+        }
+      }
+      i--
     } else if (el.type === ElementType.CONTROL) {
       const { prefix, postfix, value, placeholder, code, type, valueSets } = el.control!
       const controlId = getUUID()
@@ -302,6 +327,27 @@ export function zipElementList(payload: IElement[]): IElement[] {
       }
       hyperlinkElement.valueList = zipElementList(valueList)
       element = hyperlinkElement
+    } else if (element.type === ElementType.DATE) {
+      const dateId = element.dateId
+      const dateElement: IElement = {
+        type: ElementType.DATE,
+        value: '',
+        dateFormat: element.dateFormat
+      }
+      const valueList: IElement[] = []
+      while (e < elementList.length) {
+        const dateE = elementList[e]
+        if (dateId !== dateE.dateId) {
+          e--
+          break
+        }
+        delete dateE.type
+        delete dateE.dateFormat
+        valueList.push(dateE)
+        e++
+      }
+      dateElement.valueList = zipElementList(valueList)
+      element = dateElement
     } else if (element.type === ElementType.CONTROL) {
       // 控件处理
       const controlId = element.controlId

src/mock.ts

@@ -279,6 +279,20 @@ elementList.push(...<IElement[]>[{
   value: '\n'
 }])
 
+// 日期选择
+elementList.push(...<IElement[]>[{
+  value: '签署日期：'
+},
+{
+  value: '',
+  valueList: [{
+    value: `2022-08-10 17:30:01`
+  }],
+  type: ElementType.DATE
+}, {
+  value: '\n'
+}])
+
 // 模拟结尾文本
 elementList.push(...[{
   value: '',