feat:add page margin

index.html

@@ -248,7 +248,12 @@
             </ul>
           </div>
         </div>
-        <i class="fullscreen"></i>
+        <div class="paper-margin">
+          <i></i>
+        </div>
+        <div class="fullscreen">
+          <i></i>
+        </div>
       </div>
     </div>
   </div>

src/assets/images/paper-margin.svg

@@ -0,0 +1 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect stroke="#3D4757" x="2.5" y="1.5" width="11" height="13" rx="1"/><path fill="#3D4757" fill-rule="nonzero" d="M3 4h10v1H3zm0 7h10v1H3z"/><path fill="#3D4757" fill-rule="nonzero" d="M5 14V2h1v12zm5 0V2h1v12z"/></g></svg>

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)

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

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 <IMargin>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

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

src/editor/interface/Margin.ts

@@ -0,0 +1 @@
+export type IMargin = [top: number, right: number, bottom: number, left: number]

src/main.ts

@@ -694,6 +694,56 @@ window.onload = function () {
     li.classList.add('active')
   }
 
+  // 页面边距
+  const paperMarginDom = document.querySelector<HTMLDivElement>('.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<HTMLDivElement>('.fullscreen')!
   fullscreenDom.onclick = toggleFullscreen

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 {