diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index 74e3d86..4aa098a 100644 --- a/src/editor/core/draw/Draw.ts +++ b/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) diff --git a/src/editor/core/draw/particle/date/DateParticle.ts b/src/editor/core/draw/particle/date/DateParticle.ts new file mode 100644 index 0000000..98f0722 --- /dev/null +++ b/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() + } + +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Element.ts b/src/editor/dataset/constant/Element.ts index 0bafd61..b1d59fd 100644 --- a/src/editor/dataset/constant/Element.ts +++ b/src/editor/dataset/constant/Element.ts @@ -47,7 +47,8 @@ export const EDITOR_ELEMENT_ZIP_ATTR: Array = [ '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 ] \ No newline at end of file diff --git a/src/editor/dataset/enum/Element.ts b/src/editor/dataset/enum/Element.ts index f7490dc..972654f 100644 --- a/src/editor/dataset/enum/Element.ts +++ b/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' } \ No newline at end of file diff --git a/src/editor/interface/Element.ts b/src/editor/interface/Element.ts index 0121b6e..8279961 100644 --- a/src/editor/interface/Element.ts +++ b/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; diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index cc53a44..65f771c 100644 --- a/src/editor/utils/element.ts +++ b/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 diff --git a/src/mock.ts b/src/mock.ts index 7958818..0924fcc 100644 --- a/src/mock.ts +++ b/src/mock.ts @@ -279,6 +279,20 @@ elementList.push(...[{ value: '\n' }]) +// 日期选择 +elementList.push(...[{ + value: '签署日期:' +}, +{ + value: '', + valueList: [{ + value: `2022-08-10 17:30:01` + }], + type: ElementType.DATE +}, { + value: '\n' +}]) + // 模拟结尾文本 elementList.push(...[{ value: '',