feat:add paper size select

index.html

@@ -231,6 +231,23 @@
         <div class="page-scale-add">
           <i></i>
         </div>
+        <div class="paper-size">
+          <i></i>
+          <div class="options">
+            <ul>
+              <li data-paper-size="794*1123" class="active">A4</li>
+              <li data-paper-size="1593*2251">A2</li>
+              <li data-paper-size="1125*1593">A3</li>
+              <li data-paper-size="565*796">A5</li>
+              <li data-paper-size="412*488">5号信封</li>
+              <li data-paper-size="450*866">6号信封</li>
+              <li data-paper-size="609*862">7号信封</li>
+              <li data-paper-size="862*1221">9号信封</li>
+              <li data-paper-size="813*1266">法律用纸</li>
+              <li data-paper-size="813*1054">信纸</li>
+            </ul>
+          </div>
+        </div>
         <i class="fullscreen"></i>
       </div>
     </div>

src/assets/images/paper-size.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M10.793 1.5L13.5 4.207V14L3 14.5 2.5 2l8.293-.5z" stroke="#3D4757"/><path fill="#3D4757" d="M10 2h1v3h-1z"/><path fill="#3D4757" d="M10 4h3v1h-3z"/></g><path d="M7 3v1H5v2H4V3h3z" fill="#3D4757"/><path fill="#3D4757" d="M5.169 3.43l6.62 8.784-.799.602-6.62-8.785z"/><path d="M9 13v-1h2v-2h1v3H9z" fill="#3D4757"/></g></svg>

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)

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()

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

src/main.ts

@@ -676,6 +676,23 @@ window.onload = function () {
     instance.command.executePageScaleAdd()
   }
 
+  // 纸张大小
+  const paperSizeDom = document.querySelector<HTMLDivElement>('.paper-size')!
+  const paperSizeDomOptionsDom = paperSizeDom.querySelector<HTMLDivElement>('.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<HTMLDivElement>('.fullscreen')!
   fullscreenDom.onclick = toggleFullscreen

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;
 }