From 0731d39c1fc882616712d08b5eae99e6a2458d1e Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Wed, 19 Jan 2022 15:03:51 +0800 Subject: [PATCH] feat:add watermark --- index.html | 9 +++++ src/assets/images/watermark.svg | 1 + src/components/dialog/dialog.css | 1 + src/editor/core/command/Command.ts | 13 ++++++ src/editor/core/command/CommandAdapt.ts | 27 +++++++++++++ src/editor/core/event/CanvasEvent.ts | 3 +- src/editor/dataset/constant/Header.ts | 8 ++++ src/editor/dataset/constant/Watermark.ts | 9 +++++ src/editor/index.ts | 13 ++---- src/editor/interface/Editor.ts | 1 + src/main.ts | 50 +++++++++++++++++++++++- src/style.css | 8 ++++ 12 files changed, 132 insertions(+), 11 deletions(-) create mode 100644 src/assets/images/watermark.svg create mode 100644 src/editor/dataset/constant/Header.ts create mode 100644 src/editor/dataset/constant/Watermark.ts diff --git a/index.html b/index.html index 72c5e9e..e687f0a 100644 --- a/index.html +++ b/index.html @@ -145,6 +145,15 @@ +
+ +
+
    +
  • 添加水印
    • +
  • 删除水印
    • +
+
+
diff --git a/src/assets/images/watermark.svg b/src/assets/images/watermark.svg new file mode 100644 index 0000000..68de565 --- /dev/null +++ b/src/assets/images/watermark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index a4b08d2..ec7d546 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -55,6 +55,7 @@ height: 30px; display: flex; align-items: center; + justify-content: space-between; } .dialog-option__item span { diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 53415e2..e65d609 100644 --- a/src/editor/core/command/Command.ts +++ b/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) } diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 6fae94f..cc61934 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/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 diff --git a/src/editor/core/event/CanvasEvent.ts b/src/editor/core/event/CanvasEvent.ts index 7f487fa..f0003a8 100644 --- a/src/editor/core/event/CanvasEvent.ts +++ b/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 } } diff --git a/src/editor/dataset/constant/Header.ts b/src/editor/dataset/constant/Header.ts new file mode 100644 index 0000000..c946dc8 --- /dev/null +++ b/src/editor/dataset/constant/Header.ts @@ -0,0 +1,8 @@ +import { IHeader } from "../../interface/Header" + +export const defaultHeaderOption: Readonly> = { + data: '', + color: '#AAAAAA', + size: 14, + font: 'Yahei' +} \ No newline at end of file diff --git a/src/editor/dataset/constant/Watermark.ts b/src/editor/dataset/constant/Watermark.ts new file mode 100644 index 0000000..a905c15 --- /dev/null +++ b/src/editor/dataset/constant/Watermark.ts @@ -0,0 +1,9 @@ +import { IWatermark } from "../../interface/Watermark" + +export const defaultWatermarkOption: Readonly> = { + data: '', + color: '#AEB5C0', + opacity: 0.3, + size: 200, + font: 'Yahei' +} \ No newline at end of file diff --git a/src/editor/index.ts b/src/editor/index.ts index a81a7e8..41189d6 100644 --- a/src/editor/index.ts +++ b/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 = { - data: '', - color: '#AAAAAA', - size: 14, - font: 'Yahei', + ...defaultHeaderOption, ...options.header } const waterMarkOptions: Required = { - data: '', - color: '#AEB5C0', - opacity: 0.3, - size: 200, - font: 'Yahei', + ...defaultWatermarkOption, ...options.watermark } const editorOptions: Required = { diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index e52f76b..9c9aef1 100644 --- a/src/editor/interface/Editor.ts +++ b/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[]; } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 5d6eb76..9297fc5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -213,7 +213,8 @@ window.onload = function () { data: '人民医院门诊' }, watermark: { - data: '严禁复制' + data: 'CANVAS-EDITOR', + size: 120 } }) console.log('实例: ', instance) @@ -485,6 +486,53 @@ window.onload = function () { } instance.command.executeSeparator(payload) } + const watermarkDom = document.querySelector('.menu-item__watermark')! + const watermarkOptionDom = watermarkDom.querySelector('.options')! + watermarkDom.onclick = function () { + console.log('watermark') + watermarkOptionDom.classList.toggle('visible') + } + watermarkOptionDom.onmousedown = function (evt) { + const li = evt.target as HTMLLIElement + const menu = li.dataset.menu! + watermarkOptionDom.classList.toggle('visible') + if (menu === 'add') { + new Dialog({ + title: '水印', + data: [{ + type: 'text', + label: '内容', + name: 'data', + placeholder: '请输入内容' + }, { + type: 'color', + label: '颜色', + name: 'color', + value: '#AEB5C0' + }, { + type: 'number', + label: '字体大小', + name: 'size', + value: '120' + }], + onConfirm: (payload) => { + const nullableIndex = payload.findIndex(p => !p.value) + if (~nullableIndex) return + const watermark = payload.reduce((pre, cur) => { + pre[cur.name] = cur.value + return pre + }, {}) + instance.command.executeAddWatermark({ + data: watermark.data, + color: watermark.color, + size: Number(watermark.size) + }) + } + }) + } else { + instance.command.executeDeleteWatermark() + } + } const searchCollapseDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') document.querySelector('.menu-item__search')!.onclick = function () { diff --git a/src/style.css b/src/style.css index 548f585..9d0b76e 100644 --- a/src/style.css +++ b/src/style.css @@ -413,6 +413,14 @@ ul { background-image: url('./assets/images/line-dash-dot-dot.svg'); } +.menu-item__watermark>i { + background-image: url('./assets/images/watermark.svg'); +} + +.menu-item__watermark { + position: relative; +} + .menu-item__search { position: relative; }