feat:add paper direction

index.html

@@ -273,6 +273,15 @@
             </ul>
           </div>
         </div>
+        <div class="paper-direction">
+          <i title="纸张方向"></i>
+          <div class="options">
+            <ul>
+              <li data-paper-direction="vertical" class="active">纵向</li>
+              <li data-paper-direction="horizontal">横向</li>
+            </ul>
+          </div>
+        </div>
         <div class="paper-margin" title="页边距">
           <i></i>
         </div>

src/assets/images/paper-direction.svg

@@ -0,0 +1 @@
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 16 16" xml:space="preserve"><style>.st0{fill:#3d4757}</style><g id="_x30_1-文字_x2F_04页面_x2F_纸张方向-16px"><g id="编组" transform="translate(1 1)"><path id="合并形状" class="st0" d="M14 6v7c0 .6-.4 1-1 1H4c-.6 0-1-.4-1-1V6c0-.6.4-1 1-1h9c.6 0 1 .4 1 1zm-1 0H4v7h9V6z"/><path id="路径" class="st0" d="M9 4H8V1H1v9h1v1H1c-.6 0-1-.4-1-1V1c0-.6.4-1 1-1h7c.6 0 1 .4 1 1v3z"/><path id="矩形" class="st0" d="M11 7h1v5h-1z"/><path id="矩形-copy-2" class="st0" d="M2 2h5v1H2z"/></g></g></svg>

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;

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<HTMLDivElement>('.page-mode')!
   const pageModeOptionsDom = pageModeDom.querySelector<HTMLDivElement>('.options')!
   pageModeDom.onclick = function () {
@@ -821,6 +821,22 @@ window.onload = function () {
     li.classList.add('active')
   }
 
+  // 纸张方向
+  const paperDirectionDom = document.querySelector<HTMLDivElement>('.paper-direction')!
+  const paperDirectionDomOptionsDom = paperDirectionDom.querySelector<HTMLDivElement>('.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>paperDirection)
+    // 纸张方向状态回显
+    paperDirectionDomOptionsDom.querySelectorAll('li')
+      .forEach(child => child.classList.remove('active'))
+    li.classList.add('active')
+  }
+
   // 页面边距
   const paperMarginDom = document.querySelector<HTMLDivElement>('.paper-margin')!
   paperMarginDom.onclick = function () {

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