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