@hufe921/canvas-editor 0.9.21 → 0.9.22

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [0.9.22](https://github.com/Hufe921/canvas-editor/compare/v0.9.21...v0.9.22) (2023-03-15)
+
+
+### Bug Fixes
+
+* init page context when paper change ([bb63eeb](https://github.com/Hufe921/canvas-editor/commit/bb63eeb335e45899cf5b6906f26fc1bb7599356e))
+
+
+### Documentation
+
+* set paper direction api ([0963fc1](https://github.com/Hufe921/canvas-editor/commit/0963fc1adfeda7e3938bf7fbe2bfab1433f401d5))
+* update command execute api ([82b5256](https://github.com/Hufe921/canvas-editor/commit/82b525649fea0793fc54897e9befba1b91efe782))
+* next features roadmap ([dd7a768](https://github.com/Hufe921/canvas-editor/commit/dd7a7686af40b0a99f388961ff302ea41de4c905))
+
+
+### Features
+
+* adjust background when paper direction change ([f076f2b](https://github.com/Hufe921/canvas-editor/commit/f076f2bd00eae6f3adf56559e40807898a8de229))
+* adjust margins when paper direction change ([1eefa57](https://github.com/Hufe921/canvas-editor/commit/1eefa570b23a3330971c595dde8cef0e6ec2f530))
+* add paper direction ([9aeb928](https://github.com/Hufe921/canvas-editor/commit/9aeb928b35c90c0a5a6040b34b77e2d6b91343d5))
+* drag and drop date element ([780a40c](https://github.com/Hufe921/canvas-editor/commit/780a40caae3cabd9ceea347ae796ccfda9e9b3ef))
+
+
+
 ## [0.9.21](https://github.com/Hufe921/canvas-editor/compare/v0.9.20...v0.9.21) (2023-03-11)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.21";
+const version = "0.9.22";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -4350,11 +4350,11 @@ function mouseup(evt, host) {
     const cachePositionList = host.cachePositionList;
     const range = rangeManager.getRange();
     const dragElementList = cacheElementList.slice(cacheRange.startIndex + 1, cacheRange.endIndex + 1);
-    const isContainControl = dragElementList.find((element) => element.type === ElementType.CONTROL || element.type === ElementType.DATE);
+    const isContainControl = dragElementList.find((element) => element.type === ElementType.CONTROL);
     if (isContainControl) {
       const cacheStartElement2 = cacheElementList[cacheRange.startIndex + 1];
       const cacheEndElement2 = cacheElementList[cacheRange.endIndex];
-      const isAllowDragControl = (cacheStartElement2.type !== ElementType.CONTROL || cacheStartElement2.controlComponent === ControlComponent.PREFIX) && (cacheEndElement2.type !== ElementType.CONTROL || cacheEndElement2.controlComponent === ControlComponent.POSTFIX) && cacheStartElement2.type !== ElementType.DATE && cacheEndElement2.type !== ElementType.DATE || cacheStartElement2.controlId === cacheEndElement2.controlId && cacheStartElement2.controlComponent === ControlComponent.PREFIX && cacheEndElement2.controlComponent === ControlComponent.POSTFIX || ((_a = cacheStartElement2.control) == null ? void 0 : _a.type) === ControlType.TEXT && cacheStartElement2.controlComponent === ControlComponent.VALUE && ((_b = cacheEndElement2.control) == null ? void 0 : _b.type) === ControlType.TEXT && cacheEndElement2.controlComponent === ControlComponent.VALUE;
+      const isAllowDragControl = (cacheStartElement2.type !== ElementType.CONTROL || cacheStartElement2.controlComponent === ControlComponent.PREFIX) && (cacheEndElement2.type !== ElementType.CONTROL || cacheEndElement2.controlComponent === ControlComponent.POSTFIX) || cacheStartElement2.controlId === cacheEndElement2.controlId && cacheStartElement2.controlComponent === ControlComponent.PREFIX && cacheEndElement2.controlComponent === ControlComponent.POSTFIX || ((_a = cacheStartElement2.control) == null ? void 0 : _a.type) === ControlType.TEXT && cacheStartElement2.controlComponent === ControlComponent.VALUE && ((_b = cacheEndElement2.control) == null ? void 0 : _b.type) === ControlType.TEXT && cacheEndElement2.controlComponent === ControlComponent.VALUE;
       if (!isAllowDragControl) {
         draw.render({
           curIndex: range.startIndex,
@@ -5876,11 +5876,12 @@ class RangeManager {
 }
 class Background {
   constructor(draw) {
-    __publicField(this, "options");
-    this.options = draw.getOptions();
+    __publicField(this, "draw");
+    this.draw = draw;
   }
   render(ctx) {
-    const { width, height } = this.options;
+    const width = this.draw.getOriginalWidth();
+    const height = this.draw.getOriginalHeight();
     ctx.save();
     ctx.fillStyle = "#ffffff";
     ctx.fillRect(0, 0, width, height);
@@ -5964,6 +5965,11 @@ var PageMode;
   PageMode2["PAGING"] = "paging";
   PageMode2["CONTINUITY"] = "continuity";
 })(PageMode || (PageMode = {}));
+var PaperDirection;
+(function(PaperDirection2) {
+  PaperDirection2["VERTICAL"] = "vertical";
+  PaperDirection2["HORIZONTAL"] = "horizontal";
+})(PaperDirection || (PaperDirection = {}));
 class Margin {
   constructor(draw) {
     __publicField(this, "draw");
@@ -9003,11 +9009,19 @@ class Draw {
   isReadonly() {
     return this.mode === EditorMode.READONLY;
   }
+  getOriginalWidth() {
+    const { paperDirection, width, height } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? width : height;
+  }
+  getOriginalHeight() {
+    const { paperDirection, width, height } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? height : width;
+  }
   getWidth() {
-    return Math.floor(this.options.width * this.options.scale);
+    return Math.floor(this.getOriginalWidth() * this.options.scale);
   }
   getHeight() {
-    return Math.floor(this.options.height * this.options.scale);
+    return Math.floor(this.getOriginalHeight() * this.options.scale);
   }
   getCanvasWidth(pageNo = -1) {
     const page = this.getPage(pageNo);
@@ -9023,14 +9037,16 @@ class Draw {
     return width - margins[1] - margins[3];
   }
   getOriginalInnerWidth() {
-    const { width, margins } = this.options;
+    const width = this.getOriginalWidth();
+    const margins = this.getOriginalMargins();
     return width - margins[1] - margins[3];
   }
   getMargins() {
-    return this.options.margins.map((m) => m * this.options.scale);
+    return this.getOriginalMargins().map((m) => m * this.options.scale);
   }
   getOriginalMargins() {
-    return this.options.margins;
+    const { margins, paperDirection } = this.options;
+    return paperDirection === PaperDirection.VERTICAL ? margins : [margins[1], margins[2], margins[3], margins[0]];
   }
   getPageGap() {
     return this.options.pageGap * this.options.scale;
@@ -9264,14 +9280,12 @@ class Draw {
     const height = this.getHeight();
     this.container.style.width = `${width}px`;
     this.pageList.forEach((p, i) => {
-      p.width = width;
-      p.height = height;
+      p.width = width * dpr;
+      p.height = height * dpr;
       p.style.width = `${width}px`;
       p.style.height = `${height}px`;
       p.style.marginBottom = `${this.getPageGap()}px`;
-      p.width = width * dpr;
-      p.height = height * dpr;
-      this.ctxList[i].scale(dpr, dpr);
+      this._initPageContext(this.ctxList[i]);
     });
     this.render({
       isSubmitHistory: false,
@@ -9288,7 +9302,7 @@ class Draw {
     this.pageList.forEach((p, i) => {
       p.width = width * dpr;
       p.height = height * dpr;
-      this.ctxList[i].scale(dpr, dpr);
+      this._initPageContext(this.ctxList[i]);
     });
     this.render({
       isSubmitHistory: false,
@@ -9296,14 +9310,34 @@ class Draw {
     });
   }
   setPaperSize(width, height) {
+    const dpr = window.devicePixelRatio;
     this.options.width = width;
     this.options.height = height;
     this.container.style.width = `${width}px`;
-    this.pageList.forEach((p) => {
-      p.width = width;
-      p.height = height;
+    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
+    });
+  }
+  setPaperDirection(payload) {
+    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,
@@ -9983,6 +10017,7 @@ const _Command = class {
     _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);
@@ -10184,6 +10219,9 @@ const _Command = class {
   executePaperSize(width, height) {
     return _Command.paperSize(width, height);
   }
+  executePaperDirection(payload) {
+    return _Command.paperDirection(payload);
+  }
   getPaperMargin() {
     return _Command.getPaperMargin();
   }
@@ -10266,6 +10304,7 @@ __publicField(Command, "pageScaleRecovery");
 __publicField(Command, "pageScaleMinus");
 __publicField(Command, "pageScaleAdd");
 __publicField(Command, "paperSize");
+__publicField(Command, "paperDirection");
 __publicField(Command, "getPaperMargin");
 __publicField(Command, "setPaperMargin");
 __publicField(Command, "insertElementList");
@@ -10699,8 +10738,7 @@ class CommandAdapt {
     if (!~startIndex && !~endIndex)
       return;
     const elementList = this.draw.getElementList();
-    const { width, margins } = this.options;
-    const innerWidth = width - margins[1] - margins[3];
+    const innerWidth = this.draw.getInnerWidth();
     const colgroup = [];
     const colWidth = innerWidth / col;
     for (let c = 0; c < col; c++) {
@@ -11609,10 +11647,12 @@ class CommandAdapt {
     });
   }
   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) {
@@ -11686,8 +11726,11 @@ class CommandAdapt {
   paperSize(width, height) {
     this.draw.setPaperSize(width, height);
   }
+  paperDirection(payload) {
+    this.draw.setPaperDirection(payload);
+  }
   getPaperMargin() {
-    return this.draw.getOriginalMargins();
+    return this.options.margins;
   }
   setPaperMargin(payload) {
     return this.draw.setPaperMargin(payload);
@@ -12431,7 +12474,8 @@ class Editor {
       tdPadding: 5,
       defaultTdHeight: 40,
       defaultHyperlinkColor: "#0000FF",
-      headerTop: 50
+      headerTop: 50,
+      paperDirection: PaperDirection.VERTICAL
     }, options), {
       header: headerOptions,
       watermark: waterMarkOptions,
@@ -12459,5 +12503,5 @@ class Editor {
     };
   }
 }
-export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, ElementType, ImageDisplay, KeyMap, PageMode, RowFlex, Editor as default };
+export { BlockType, Command, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, ElementType, ImageDisplay, KeyMap, PageMode, PaperDirection, RowFlex, Editor as default };
 //# sourceMappingURL=canvas-editor.es.js.map