From f5402615006d9f86e6807c5bfe3f525b584eee88 Mon Sep 17 00:00:00 2001 From: Hufe921 Date: Sat, 17 Sep 2022 19:11:35 +0800 Subject: [PATCH] feat:add page margin --- index.html | 7 +++- src/assets/images/paper-margin.svg | 1 + src/editor/core/command/Command.ts | 15 +++++++- src/editor/core/command/CommandAdapt.ts | 9 +++++ src/editor/core/draw/Draw.ts | 17 ++++++++- src/editor/interface/Editor.ts | 5 ++- src/editor/interface/Margin.ts | 1 + src/main.ts | 50 +++++++++++++++++++++++++ src/style.css | 10 +++-- 9 files changed, 105 insertions(+), 10 deletions(-) create mode 100644 src/assets/images/paper-margin.svg create mode 100644 src/editor/interface/Margin.ts diff --git a/index.html b/index.html index 82280aa..2503cfe 100644 --- a/index.html +++ b/index.html @@ -248,7 +248,12 @@ - +
+ +
+
+ +
diff --git a/src/assets/images/paper-margin.svg b/src/assets/images/paper-margin.svg new file mode 100644 index 0000000..6188f36 --- /dev/null +++ b/src/assets/images/paper-margin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index 62c18cc..53a8ed9 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -3,6 +3,7 @@ import { EditorMode, PageMode } from '../../dataset/enum/Editor' import { RowFlex } from '../../dataset/enum/Row' import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw' import { IEditorResult } from '../../interface/Editor' +import { IMargin } from '../../interface/Margin' import { IWatermark } from '../../interface/Watermark' import { CommandAdapt } from './CommandAdapt' @@ -68,6 +69,8 @@ export class Command { private static pageScaleMinus: CommandAdapt['pageScaleMinus'] private static pageScaleAdd: CommandAdapt['pageScaleAdd'] private static paperSize: CommandAdapt['paperSize'] + private static getPaperMargin: CommandAdapt['getPaperMargin'] + private static setPaperMargin: CommandAdapt['setPaperMargin'] private static insertElementList: CommandAdapt['insertElementList'] private static removeControl: CommandAdapt['removeControl'] @@ -132,6 +135,8 @@ export class Command { Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt) Command.pageScaleAdd = adapt.pageScaleAdd.bind(adapt) Command.paperSize = adapt.paperSize.bind(adapt) + Command.getPaperMargin = adapt.getPaperMargin.bind(adapt) + Command.setPaperMargin = adapt.setPaperMargin.bind(adapt) Command.insertElementList = adapt.insertElementList.bind(adapt) Command.removeControl = adapt.removeControl.bind(adapt) } @@ -360,7 +365,7 @@ export class Command { return Command.getWordCount() } - // 页面模式、页面缩放、纸张大小 + // 页面模式、页面缩放、纸张大小、页边距 public executePageMode(payload: PageMode) { return Command.pageMode(payload) } @@ -381,6 +386,14 @@ export class Command { return Command.paperSize(width, height) } + public getPaperMargin() { + return Command.getPaperMargin() + } + + public executeSetPaperMargin(payload: IMargin) { + return Command.setPaperMargin(payload) + } + // 通用 public executeInsertElementList(payload: IElement[]) { return Command.insertElementList(payload) diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index 49c0de5..c3e1b38 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -9,6 +9,7 @@ import { RowFlex } from '../../dataset/enum/Row' import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw' import { IEditorOption, IEditorResult } from '../../interface/Editor' import { IElement, IElementStyle } from '../../interface/Element' +import { IMargin } from '../../interface/Margin' import { IColgroup } from '../../interface/table/Colgroup' import { ITd } from '../../interface/table/Td' import { ITr } from '../../interface/table/Tr' @@ -1407,6 +1408,14 @@ export class CommandAdapt { this.draw.setPaperSize(width, height) } + public getPaperMargin(): number[] { + return this.draw.getOriginalMargins() + } + + public setPaperMargin(payload: IMargin) { + return this.draw.setPaperMargin(payload) + } + public insertElementList(payload: IElement[]) { if (!payload.length) return const isReadonly = this.draw.isReadonly() diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts index de26977..99502fe 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -45,6 +45,7 @@ import { formatElementList } from '../../utils/element' import { WorkerManager } from '../worker/WorkerManager' import { Previewer } from './particle/previewer/Previewer' import { DateParticle } from './particle/date/DateParticle' +import { IMargin } from '../../interface/Margin' export class Draw { @@ -202,8 +203,12 @@ export class Draw { return width - margins[1] - margins[3] } - public getMargins(): number[] { - return this.options.margins.map(m => m * this.options.scale) + public getMargins(): IMargin { + return this.options.margins.map(m => m * this.options.scale) + } + + public getOriginalMargins(): number[] { + return this.options.margins } public getPageGap(): number { @@ -489,6 +494,14 @@ export class Draw { }) } + public setPaperMargin(payload: IMargin) { + this.options.margins = payload + this.render({ + isSubmitHistory: false, + isSetCursor: false + }) + } + public getValue(): IEditorResult { // 配置 const { width, height, margins, watermark } = this.options diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts index d603717..138559e 100644 --- a/src/editor/interface/Editor.ts +++ b/src/editor/interface/Editor.ts @@ -3,6 +3,7 @@ import { EditorMode, PageMode } from '../dataset/enum/Editor' import { ICheckboxOption } from './Checkbox' import { IControlOption } from './Control' import { IHeader } from './Header' +import { IMargin } from './Margin' import { IWatermark } from './Watermark' export interface IEditorOption { @@ -32,7 +33,7 @@ export interface IEditorOption { resizerSize?: number; marginIndicatorSize?: number; marginIndicatorColor?: string, - margins?: [top: number, right: number, bottom: number, left: number], + margins?: IMargin, pageMode?: PageMode; tdPadding?: number; defaultTdHeight?: number; @@ -48,7 +49,7 @@ export interface IEditorResult { version: string; width: number; height: number; - margins: [top: number, right: number, bottom: number, left: number]; + margins: IMargin; watermark?: IWatermark; data: IElement[]; } \ No newline at end of file diff --git a/src/editor/interface/Margin.ts b/src/editor/interface/Margin.ts new file mode 100644 index 0000000..64ad02b --- /dev/null +++ b/src/editor/interface/Margin.ts @@ -0,0 +1 @@ +export type IMargin = [top: number, right: number, bottom: number, left: number] \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 4da627e..ea3cf48 100644 --- a/src/main.ts +++ b/src/main.ts @@ -694,6 +694,56 @@ window.onload = function () { li.classList.add('active') } + // 页面边距 + const paperMarginDom = document.querySelector('.paper-margin')! + paperMarginDom.onclick = function () { + const [topMargin, rightMargin, bottomMargin, leftMargin] = instance.command.getPaperMargin() + new Dialog({ + title: '页边距', + data: [{ + type: 'text', + label: '上边距', + name: 'top', + value: `${topMargin}`, + placeholder: '请输入上边距' + }, { + type: 'text', + label: '下边距', + name: 'bottom', + value: `${bottomMargin}`, + placeholder: '请输入下边距' + }, { + type: 'text', + label: '左边距', + name: 'left', + value: `${leftMargin}`, + placeholder: '请输入左边距' + }, { + type: 'text', + label: '右边距', + name: 'right', + value: `${rightMargin}`, + placeholder: '请输入右边距' + }], + onConfirm: (payload) => { + const top = payload.find(p => p.name === 'top')?.value + if (!top) return + const bottom = payload.find(p => p.name === 'bottom')?.value + if (!bottom) return + const left = payload.find(p => p.name === 'left')?.value + if (!left) return + const right = payload.find(p => p.name === 'right')?.value + if (!right) return + instance.command.executeSetPaperMargin([ + Number(top), + Number(right), + Number(bottom), + Number(left) + ]) + } + }) + } + // 全屏 const fullscreenDom = document.querySelector('.fullscreen')! fullscreenDom.onclick = toggleFullscreen diff --git a/src/style.css b/src/style.css index 5b83959..fd6b073 100644 --- a/src/style.css +++ b/src/style.css @@ -636,7 +636,6 @@ ul { } .footer>div:last-child { - width: 120px; display: flex; align-items: center; justify-content: space-between; @@ -674,14 +673,18 @@ ul { user-select: none; } -.footer .fullscreen { +.footer .fullscreen i { background-image: url('./assets/images/request-fullscreen.svg'); } -.footer .fullscreen.exist { +.footer .fullscreen.exist i { background-image: url('./assets/images/exit-fullscreen.svg'); } +.footer .paper-margin i { + background-image: url('./assets/images/paper-margin.svg'); +} + .footer .editor-mode { cursor: pointer; user-select: none; @@ -689,7 +692,6 @@ ul { .footer .paper-size { position: relative; - margin-right: 3px; } .footer .paper-size i {