feat:add paper direction

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

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

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

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

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
 }
 
 // 对外类型

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;