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 {