From f58060bd7f93986e892d96c6d087ba6fb89e25c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Wed, 31 Aug 2022 17:08:54 +0800 Subject: [PATCH] feat:add paper size select --- index.html | 17 ++++++++++++++++ src/assets/images/paper-size.svg | 1 + src/editor/core/command/Command.ts | 8 +++++++- src/editor/core/command/CommandAdapt.ts | 4 ++++ src/editor/core/draw/Draw.ts | 26 +++++++++++++++++++++++-- src/main.ts | 17 ++++++++++++++++ src/style.css | 24 ++++++++++++++++++----- 7 files changed, 89 insertions(+), 8 deletions(-) create mode 100644 src/assets/images/paper-size.svg diff --git a/index.html b/index.html index 3e5d89c..82280aa 100644 --- a/index.html +++ b/index.html @@ -231,6 +231,23 @@
+
+ +
+
    +
  • A4
    • +
  • A2
    • +
  • A3
    • +
  • A5
    • +
  • 5号信封
    • +
  • 6号信封
    • +
  • 7号信封
    • +
  • 9号信封
    • +
  • 法律用纸
    • +
  • 信纸
    • +
+
+
diff --git a/src/assets/images/paper-size.svg b/src/assets/images/paper-size.svg new file mode 100644 index 0000000..205a6aa --- /dev/null +++ b/src/assets/images/paper-size.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 33e4ec2..c73577e 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -66,6 +66,7 @@ export class Command { private static pageScaleRecovery: CommandAdapt['pageScaleRecovery'] private static pageScaleMinus: CommandAdapt['pageScaleMinus'] private static pageScaleAdd: CommandAdapt['pageScaleAdd'] + private static paperSize: CommandAdapt['paperSize'] private static insertElementList: CommandAdapt['insertElementList'] private static removeControl: CommandAdapt['removeControl'] @@ -128,6 +129,7 @@ export class Command { Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt) Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt) Command.pageScaleAdd = adapt.pageScaleAdd.bind(adapt) + Command.paperSize = adapt.paperSize.bind(adapt) Command.insertElementList = adapt.insertElementList.bind(adapt) Command.removeControl = adapt.removeControl.bind(adapt) } @@ -352,7 +354,7 @@ export class Command { return Command.getWordCount() } - // 页面模式、页面缩放 + // 页面模式、页面缩放、纸张大小 public executePageMode(payload: PageMode) { return Command.pageMode(payload) } @@ -369,6 +371,10 @@ export class Command { return Command.pageScaleAdd() } + public executePaperSize(width: number, height: number) { + return Command.paperSize(width, height) + } + // 通用 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 a77e2df..28b963f 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1394,6 +1394,10 @@ export class CommandAdapt { } } + public paperSize(width: number, height: number) { + this.draw.setPaperSize(width, height) + } + 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 44613b1..b93a62c 100644 --- a/src/editor/core/draw/Draw.ts +++ b/src/editor/core/draw/Draw.ts @@ -440,7 +440,10 @@ export class Draw { canvas.style.height = `${height}px` canvas.height = height * dpr } - this.render({ isSubmitHistory: false, isSetCursor: false }) + this.render({ + isSubmitHistory: false, + isSetCursor: false + }) // 回调 setTimeout(() => { if (this.listener.pageModeChange) { @@ -461,12 +464,31 @@ export class Draw { p.style.height = `${height}px` p.style.marginBottom = `${this.getPageGap()}px` }) - this.render({ isSubmitHistory: false, isSetCursor: false }) + this.render({ + isSubmitHistory: false, + isSetCursor: false + }) if (this.listener.pageScaleChange) { this.listener.pageScaleChange(payload) } } + public setPaperSize(width: number, height: number) { + this.options.width = width + this.options.height = height + this.container.style.width = `${width}px` + this.pageList.forEach(p => { + p.width = width + p.height = height + p.style.width = `${width}px` + p.style.height = `${height}px` + }) + this.render({ + isSubmitHistory: false, + isSetCursor: false + }) + } + public getValue(): IEditorResult { // 配置 const { width, height, margins, watermark } = this.options diff --git a/src/main.ts b/src/main.ts index f556d43..0d12c2f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -676,6 +676,23 @@ window.onload = function () { instance.command.executePageScaleAdd() } + // 纸张大小 + const paperSizeDom = document.querySelector('.paper-size')! + const paperSizeDomOptionsDom = paperSizeDom.querySelector('.options')! + paperSizeDom.onclick = function () { + paperSizeDomOptionsDom.classList.toggle('visible') + } + paperSizeDomOptionsDom.onclick = function (evt) { + const li = evt.target as HTMLLIElement + const paperType = li.dataset.paperSize! + const [width, height] = paperType.split('*').map(Number) + instance.command.executePaperSize(width, height) + // 纸张状态回显 + paperSizeDomOptionsDom.querySelectorAll('li') + .forEach(child => child.classList.remove('active')) + li.classList.add('active') + } + // 全屏 const fullscreenDom = document.querySelector('.fullscreen')! fullscreenDom.onclick = toggleFullscreen diff --git a/src/style.css b/src/style.css index cab690b..ac0ed6f 100644 --- a/src/style.css +++ b/src/style.css @@ -594,7 +594,7 @@ ul { background-image: url('./assets/images/page-mode.svg'); } -.footer .page-mode .options { +.footer .options { width: 70px; position: absolute; left: 0; @@ -608,11 +608,11 @@ ul { display: none; } -.footer .page-mode .options.visible { +.footer .options.visible { display: block; } -.footer .page-mode .options li { +.footer .options li { padding: 5px; margin: 5px 0; user-select: none; @@ -621,11 +621,11 @@ ul { cursor: pointer; } -.footer .page-mode .options li:hover { +.footer .options li:hover { background-color: #ebecef; } -.footer .page-mode .options li.active { +.footer .options li.active { background-color: #e2e6ed; } @@ -685,4 +685,18 @@ ul { .footer .editor-mode { cursor: pointer; user-select: none; +} + +.footer .paper-size { + position: relative; + margin-right: 3px; +} + +.footer .paper-size i { + background-image: url('./assets/images/paper-size.svg'); +} + +.footer .paper-size .options { + right: 0; + left: unset; } \ No newline at end of file