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