feat:add watermark

src/editor/core/command/Command.ts

@@ -1,6 +1,7 @@
 import { IElement } from "../.."
 import { RowFlex } from "../../dataset/enum/Row"
 import { IDrawImagePayload } from "../../interface/Draw"
+import { IWatermark } from "../../interface/Watermark"
 import { CommandAdapt } from "./CommandAdapt"
 
 export class Command {
@@ -41,6 +42,8 @@ export class Command {
   private static image: Function
   private static hyperlink: Function
   private static separator: Function
+  private static addWatermark: Function
+  private static deleteWatermark: Function
   private static search: Function
   private static print: Function
   private static pageScaleRecovery: Function
@@ -84,6 +87,8 @@ export class Command {
     Command.image = adapt.image.bind(adapt)
     Command.hyperlink = adapt.hyperlink.bind(adapt)
     Command.separator = adapt.separator.bind(adapt)
+    Command.addWatermark = adapt.addWatermark.bind(adapt)
+    Command.deleteWatermark = adapt.deleteWatermark.bind(adapt)
     Command.search = adapt.search.bind(adapt)
     Command.print = adapt.print.bind(adapt)
     Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt)
@@ -239,6 +244,14 @@ export class Command {
     return Command.separator(payload)
   }
 
+  public executeAddWatermark(payload: IWatermark) {
+    return Command.addWatermark(payload)
+  }
+
+  public executeDeleteWatermark() {
+    return Command.deleteWatermark()
+  }
+
   public executeSearch(payload: string | null) {
     return Command.search(payload)
   }

src/editor/core/command/CommandAdapt.ts

@@ -1,5 +1,6 @@
 import { ZERO } from "../../dataset/constant/Common"
 import { EDITOR_ELEMENT_STYLE_ATTR, TEXTLIKE_ELEMENT_TYPE } from "../../dataset/constant/Element"
+import { defaultWatermarkOption } from "../../dataset/constant/Watermark"
 import { EditorContext } from "../../dataset/enum/Editor"
 import { ElementType } from "../../dataset/enum/Element"
 import { ElementStyleKey } from "../../dataset/enum/ElementStyle"
@@ -11,6 +12,7 @@ import { ISearchResult, ISearchResultRestArgs } from "../../interface/Search"
 import { IColgroup } from "../../interface/table/Colgroup"
 import { ITd } from "../../interface/table/Td"
 import { ITr } from "../../interface/table/Tr"
+import { IWatermark } from "../../interface/Watermark"
 import { getUUID } from "../../utils"
 import { formatElementList } from "../../utils/element"
 import { printImageBase64 } from "../../utils/print"
@@ -920,6 +922,31 @@ export class CommandAdapt {
     this.draw.render({ curIndex })
   }
 
+  public addWatermark(payload: IWatermark) {
+    const options = this.draw.getOptions()
+    const { color, size, opacity, font } = defaultWatermarkOption
+    options.watermark.data = payload.data
+    options.watermark.color = payload.color || color
+    options.watermark.size = payload.size || size
+    options.watermark.opacity = payload.opacity || opacity
+    options.watermark.font = payload.font || font
+    this.draw.render({
+      isSetCursor: false,
+      isSubmitHistory: false
+    })
+  }
+
+  public deleteWatermark() {
+    const options = this.draw.getOptions()
+    if (options.watermark && options.watermark.data) {
+      options.watermark = { ...defaultWatermarkOption }
+      this.draw.render({
+        isSetCursor: false,
+        isSubmitHistory: false
+      })
+    }
+  }
+
   public image(payload: IDrawImagePayload) {
     const { startIndex, endIndex } = this.range.getRange()
     if (!~startIndex && !~endIndex) return

src/editor/core/event/CanvasEvent.ts

@@ -462,7 +462,7 @@ export class CanvasEvent {
 
   public save(): IEditorResult {
     // 配置
-    const { width, height, margins } = this.draw.getOptions()
+    const { width, height, margins, watermark } = this.draw.getOptions()
     // 数据
     const elementList = this.draw.getOriginalElementList()
     const data = zipElementList(elementList)
@@ -471,6 +471,7 @@ export class CanvasEvent {
       width,
       height,
       margins,
+      watermark: watermark.data ? watermark : undefined,
       data
     }
   }

src/editor/dataset/constant/Header.ts

@@ -0,0 +1,8 @@
+import { IHeader } from "../../interface/Header"
+
+export const defaultHeaderOption: Readonly<Required<IHeader>> = {
+  data: '',
+  color: '#AAAAAA',
+  size: 14,
+  font: 'Yahei'
+}

src/editor/dataset/constant/Watermark.ts

@@ -0,0 +1,9 @@
+import { IWatermark } from "../../interface/Watermark"
+
+export const defaultWatermarkOption: Readonly<Required<IWatermark>> = {
+  data: '',
+  color: '#AEB5C0',
+  opacity: 0.3,
+  size: 200,
+  font: 'Yahei'
+}

src/editor/index.ts

@@ -17,6 +17,8 @@ import { EditorComponent } from './dataset/enum/Editor'
 import { EDITOR_COMPONENT } from './dataset/constant/Editor'
 import { IHeader } from './interface/Header'
 import { IWatermark } from './interface/Watermark'
+import { defaultHeaderOption } from './dataset/constant/Header'
+import { defaultWatermarkOption } from './dataset/constant/Watermark'
 
 export default class Editor {
 
@@ -26,18 +28,11 @@ export default class Editor {
 
   constructor(container: HTMLDivElement, elementList: IElement[], options: IEditorOption = {}) {
     const headerOptions: Required<IHeader> = {
-      data: '',
-      color: '#AAAAAA',
-      size: 14,
-      font: 'Yahei',
+      ...defaultHeaderOption,
       ...options.header
     }
     const waterMarkOptions: Required<IWatermark> = {
-      data: '',
-      color: '#AEB5C0',
-      opacity: 0.3,
-      size: 200,
-      font: 'Yahei',
+      ...defaultWatermarkOption,
       ...options.watermark
     }
     const editorOptions: Required<IEditorOption> = {

src/editor/interface/Editor.ts

@@ -41,5 +41,6 @@ export interface IEditorResult {
   width: number;
   height: number;
   margins: [top: number, right: number, bottom: number, left: number];
+  watermark?: IWatermark;
   data: IElement[];
 }