diff --git a/index.html b/index.html
index 63a5888..16f2573 100644
--- a/index.html
+++ b/index.html
@@ -273,6 +273,15 @@
+
diff --git a/src/assets/images/paper-direction.svg b/src/assets/images/paper-direction.svg
new file mode 100644
index 0000000..ee90234
--- /dev/null
+++ b/src/assets/images/paper-direction.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 a35f5e6..062afb8 100644
--- a/src/editor/core/command/Command.ts
+++ b/src/editor/core/command/Command.ts
@@ -1,5 +1,5 @@
import { IElement, ImageDisplay, INavigateInfo } from '../..'
-import { EditorMode, PageMode } from '../../dataset/enum/Editor'
+import { EditorMode, PageMode, PaperDirection } from '../../dataset/enum/Editor'
import { RowFlex } from '../../dataset/enum/Row'
import { IDrawImagePayload, IPainterOptions } from '../../interface/Draw'
import { IEditorResult } from '../../interface/Editor'
@@ -74,6 +74,7 @@ export class Command {
private static pageScaleMinus: CommandAdapt['pageScaleMinus']
private static pageScaleAdd: CommandAdapt['pageScaleAdd']
private static paperSize: CommandAdapt['paperSize']
+ private static paperDirection: CommandAdapt['paperDirection']
private static getPaperMargin: CommandAdapt['getPaperMargin']
private static setPaperMargin: CommandAdapt['setPaperMargin']
private static insertElementList: CommandAdapt['insertElementList']
@@ -146,6 +147,7 @@ export class Command {
Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt)
Command.pageScaleAdd = adapt.pageScaleAdd.bind(adapt)
Command.paperSize = adapt.paperSize.bind(adapt)
+ Command.paperDirection = adapt.paperDirection.bind(adapt)
Command.getPaperMargin = adapt.getPaperMargin.bind(adapt)
Command.setPaperMargin = adapt.setPaperMargin.bind(adapt)
Command.insertElementList = adapt.insertElementList.bind(adapt)
@@ -397,7 +399,7 @@ export class Command {
return Command.getRangeText()
}
- // 页面模式、页面缩放、纸张大小、页边距
+ // 页面模式、页面缩放、纸张大小、纸张方向、页边距
public executePageMode(payload: PageMode) {
return Command.pageMode(payload)
}
@@ -418,6 +420,10 @@ export class Command {
return Command.paperSize(width, height)
}
+ public executePaperDirection(payload: PaperDirection) {
+ return Command.paperDirection(payload)
+ }
+
public getPaperMargin() {
return Command.getPaperMargin()
}
diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts
index a596655..35367c7 100644
--- a/src/editor/core/command/CommandAdapt.ts
+++ b/src/editor/core/command/CommandAdapt.ts
@@ -2,7 +2,7 @@ import { WRAP, ZERO } from '../../dataset/constant/Common'
import { EDITOR_ELEMENT_STYLE_ATTR } from '../../dataset/constant/Element'
import { defaultWatermarkOption } from '../../dataset/constant/Watermark'
import { ControlComponent, ImageDisplay } from '../../dataset/enum/Control'
-import { EditorContext, EditorMode, PageMode } from '../../dataset/enum/Editor'
+import { EditorContext, EditorMode, PageMode, PaperDirection } from '../../dataset/enum/Editor'
import { ElementType } from '../../dataset/enum/Element'
import { ElementStyleKey } from '../../dataset/enum/ElementStyle'
import { RowFlex } from '../../dataset/enum/Row'
@@ -1365,10 +1365,12 @@ export class CommandAdapt {
}
public async print() {
- const { width, height, scale } = this.options
+ const { scale } = this.options
if (scale !== 1) {
this.draw.setPageScale(1)
}
+ const width = this.draw.getOriginalWidth()
+ const height = this.draw.getOriginalHeight()
const base64List = await this.draw.getDataURL()
printImageBase64(base64List, width, height)
if (scale !== 1) {
@@ -1453,6 +1455,10 @@ export class CommandAdapt {
this.draw.setPaperSize(width, height)
}
+ public paperDirection(payload: PaperDirection) {
+ this.draw.setPaperDirection(payload)
+ }
+
public getPaperMargin(): number[] {
return this.draw.getOriginalMargins()
}
diff --git a/src/editor/core/draw/Draw.ts b/src/editor/core/draw/Draw.ts
index 54acb79..744ca91 100644
--- a/src/editor/core/draw/Draw.ts
+++ b/src/editor/core/draw/Draw.ts
@@ -35,7 +35,7 @@ import { SubscriptParticle } from './particle/Subscript'
import { SeparatorParticle } from './particle/Separator'
import { PageBreakParticle } from './particle/PageBreak'
import { Watermark } from './frame/Watermark'
-import { EditorComponent, EditorMode, PageMode } from '../../dataset/enum/Editor'
+import { EditorComponent, EditorMode, PageMode, PaperDirection } from '../../dataset/enum/Editor'
import { Control } from './control/Control'
import { zipElementList } from '../../utils/element'
import { CheckboxParticle } from './particle/CheckboxParticle'
@@ -190,12 +190,22 @@ export class Draw {
return this.mode === EditorMode.READONLY
}
+ public getOriginalWidth(): number {
+ const { paperDirection, width, height } = this.options
+ return paperDirection === PaperDirection.VERTICAL ? width : height
+ }
+
+ public getOriginalHeight(): number {
+ const { paperDirection, width, height } = this.options
+ return paperDirection === PaperDirection.VERTICAL ? height : width
+ }
+
public getWidth(): number {
- return Math.floor(this.options.width * this.options.scale)
+ return Math.floor(this.getOriginalWidth() * this.options.scale)
}
public getHeight(): number {
- return Math.floor(this.options.height * this.options.scale)
+ return Math.floor(this.getOriginalHeight() * this.options.scale)
}
public getCanvasWidth(pageNo = -1): number {
@@ -553,6 +563,25 @@ export class Draw {
})
}
+ public setPaperDirection(payload: PaperDirection) {
+ const dpr = window.devicePixelRatio
+ this.options.paperDirection = payload
+ const width = this.getWidth()
+ const height = this.getHeight()
+ this.container.style.width = `${width}px`
+ this.pageList.forEach((p, i) => {
+ p.width = width * dpr
+ p.height = height * dpr
+ p.style.width = `${width}px`
+ p.style.height = `${height}px`
+ this._initPageContext(this.ctxList[i])
+ })
+ this.render({
+ isSubmitHistory: false,
+ isSetCursor: false
+ })
+ }
+
public setPaperMargin(payload: IMargin) {
this.options.margins = payload
this.render({
diff --git a/src/editor/dataset/enum/Editor.ts b/src/editor/dataset/enum/Editor.ts
index cc49107..c8c08e0 100644
--- a/src/editor/dataset/enum/Editor.ts
+++ b/src/editor/dataset/enum/Editor.ts
@@ -21,4 +21,9 @@ export enum EditorMode {
export enum PageMode {
PAGING = 'paging',
CONTINUITY = 'continuity'
+}
+
+export enum PaperDirection {
+ VERTICAL = 'vertical',
+ HORIZONTAL = 'horizontal'
}
\ No newline at end of file
diff --git a/src/editor/index.ts b/src/editor/index.ts
index 7d03473..194619d 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -11,7 +11,7 @@ import { formatElementList } from './utils/element'
import { Register } from './core/register/Register'
import { ContextMenu } from './core/contextmenu/ContextMenu'
import { IContextMenuContext, IRegisterContextMenu } from './interface/contextmenu/ContextMenu'
-import { EditorComponent, EditorMode, PageMode } from './dataset/enum/Editor'
+import { EditorComponent, EditorMode, PageMode, PaperDirection } from './dataset/enum/Editor'
import { EDITOR_COMPONENT } from './dataset/constant/Editor'
import { IHeader } from './interface/Header'
import { IWatermark } from './interface/Watermark'
@@ -95,6 +95,7 @@ export default class Editor {
defaultTdHeight: 40,
defaultHyperlinkColor: '#0000FF',
headerTop: 50,
+ paperDirection: PaperDirection.VERTICAL,
...options,
header: headerOptions,
watermark: waterMarkOptions,
@@ -144,7 +145,8 @@ export {
ImageDisplay,
Command,
KeyMap,
- BlockType
+ BlockType,
+ PaperDirection
}
// 对外类型
diff --git a/src/editor/interface/Editor.ts b/src/editor/interface/Editor.ts
index 0e60f83..ed7f45e 100644
--- a/src/editor/interface/Editor.ts
+++ b/src/editor/interface/Editor.ts
@@ -1,5 +1,5 @@
import { IElement } from '..'
-import { EditorMode, PageMode } from '../dataset/enum/Editor'
+import { EditorMode, PageMode, PaperDirection } from '../dataset/enum/Editor'
import { ICheckboxOption } from './Checkbox'
import { IControlOption } from './Control'
import { ICursorOption } from './Cursor'
@@ -41,6 +41,7 @@ export interface IEditorOption {
defaultTdHeight?: number;
defaultHyperlinkColor?: string;
headerTop?: number;
+ paperDirection?: PaperDirection;
header?: IHeader;
watermark?: IWatermark;
control?: IControlOption;
diff --git a/src/main.ts b/src/main.ts
index 7eddd37..adc1f4e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,7 +1,7 @@
import { data, options } from './mock'
import './style.css'
import prism from 'prismjs'
-import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, PageMode } from './editor'
+import Editor, { BlockType, Command, ControlType, EditorMode, ElementType, IBlock, IElement, KeyMap, PageMode, PaperDirection } from './editor'
import { Dialog } from './components/dialog/Dialog'
import { formatPrismToken } from './utils/prism'
import { Signature } from './components/signature/Signature'
@@ -778,7 +778,7 @@ window.onload = function () {
instance.command.executePrint()
}
- // 6. 页面模式 | 纸张缩放 | 全屏
+ // 6. 页面模式 | 纸张缩放 | 纸张大小 | 纸张方向 | 页边距 | 全屏
const pageModeDom = document.querySelector('.page-mode')!
const pageModeOptionsDom = pageModeDom.querySelector('.options')!
pageModeDom.onclick = function () {
@@ -821,6 +821,22 @@ window.onload = function () {
li.classList.add('active')
}
+ // 纸张方向
+ const paperDirectionDom = document.querySelector('.paper-direction')!
+ const paperDirectionDomOptionsDom = paperDirectionDom.querySelector('.options')!
+ paperDirectionDom.onclick = function () {
+ paperDirectionDomOptionsDom.classList.toggle('visible')
+ }
+ paperDirectionDomOptionsDom.onclick = function (evt) {
+ const li = evt.target as HTMLLIElement
+ const paperDirection = li.dataset.paperDirection!
+ instance.command.executePaperDirection(paperDirection)
+ // 纸张方向状态回显
+ paperDirectionDomOptionsDom.querySelectorAll('li')
+ .forEach(child => child.classList.remove('active'))
+ li.classList.add('active')
+ }
+
// 页面边距
const paperMarginDom = document.querySelector('.paper-margin')!
paperMarginDom.onclick = function () {
diff --git a/src/style.css b/src/style.css
index 6310c01..0843b68 100644
--- a/src/style.css
+++ b/src/style.css
@@ -758,6 +758,19 @@ ul {
left: unset;
}
+.footer .paper-direction {
+ position: relative;
+}
+
+.footer .paper-direction i {
+ background-image: url('./assets/images/paper-direction.svg');
+}
+
+.footer .paper-direction .options {
+ right: 0;
+ left: unset;
+}
+
.ce-contextmenu-signature {
background-image: url('./assets/images/signature.svg');
}
\ No newline at end of file