@hufe921/canvas-editor 0.9.104 → 0.9.105

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [0.9.105](https://github.com/Hufe921/canvas-editor/compare/v0.9.104...v0.9.105) (2025-03-15)
+
+
+### Bug Fixes
+
+* delete hidden control boundary error #1036 ([960e918](https://github.com/Hufe921/canvas-editor/commit/960e91841f4b8a6c8a176f3f09f8cb2d3f1fccee)), closes [#1036](https://github.com/Hufe921/canvas-editor/issues/1036)
+* initial print mode settings invalid #1034 ([6d95284](https://github.com/Hufe921/canvas-editor/commit/6d95284609edf855b8bd049fff15816cb2710cd1)), closes [#1034](https://github.com/Hufe921/canvas-editor/issues/1034)
+
+
+### Features
+
+* add border width to table option #897 ([17550b9](https://github.com/Hufe921/canvas-editor/commit/17550b98b4798e6887c7320d7125d54287b92bcf)), closes [#897](https://github.com/Hufe921/canvas-editor/issues/897)
+* add imageSizeChange event #1035 ([f93f3a7](https://github.com/Hufe921/canvas-editor/commit/f93f3a73be31aaf8c569869928970a4787ca7244)), closes [#1035](https://github.com/Hufe921/canvas-editor/issues/1035)
+* add isReplace option to executeInsertElementList api #1031 ([076302a](https://github.com/Hufe921/canvas-editor/commit/076302a9192cff9990a8d5f76672d16e32151f33)), closes [#1031](https://github.com/Hufe921/canvas-editor/issues/1031)
+* add table external border width option #897 ([9df856f](https://github.com/Hufe921/canvas-editor/commit/9df856f61272098d5a004bb2df7eb07d1f34d078)), closes [#897](https://github.com/Hufe921/canvas-editor/issues/897)
+* update cursor on right-click #1022 ([edd5df3](https://github.com/Hufe921/canvas-editor/commit/edd5df3029c3aaa6763bcbe1dc9152c70cf3b330)), closes [#1022](https://github.com/Hufe921/canvas-editor/issues/1022)
+
+
+
 ## [0.9.104](https://github.com/Hufe921/canvas-editor/compare/v0.9.103...v0.9.104) (2025-02-22)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.104";
+const version = "0.9.105";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -6265,14 +6265,15 @@ function hitRadio(element, draw) {
 }
 function mousedown(evt, host) {
   var _a, _b;
-  if (evt.button === MouseEventButton.RIGHT)
-    return;
   const draw = host.getDraw();
   const isReadonly = draw.isReadonly();
   const rangeManager = draw.getRange();
   const position = draw.getPosition();
+  const range = rangeManager.getRange();
+  if (evt.button === MouseEventButton.RIGHT && (range.isCrossRowCol || !rangeManager.getIsCollapsed())) {
+    return;
+  }
   if (!host.isAllowDrag) {
-    const range = rangeManager.getRange();
     if (!isReadonly && range.startIndex !== range.endIndex) {
       const isPointInRange = rangeManager.getIsPointInRange(evt.offsetX, evt.offsetY);
       if (isPointInRange) {
@@ -9275,6 +9276,14 @@ class RangeManager {
   replaceRange(range) {
     this.setRange(range.startIndex, range.endIndex, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
   }
+  shrinkRange() {
+    const { startIndex, endIndex } = this.range;
+    if (startIndex === endIndex || !~startIndex && !~endIndex)
+      return;
+    this.replaceRange(__spreadProps(__spreadValues({}, this.range), {
+      startIndex: endIndex
+    }));
+  }
   setRangeStyle() {
     var _a, _b;
     const rangeStyleChangeListener = this.listener.rangeStyleChange;
@@ -10530,7 +10539,12 @@ class TableParticle {
     return rowCol.length ? rowCol : null;
   }
   _drawOuterBorder(payload) {
-    const { ctx, startX, startY, width, height, isDrawFullBorder } = payload;
+    const { ctx, startX, startY, width, height, isDrawFullBorder, borderExternalWidth } = payload;
+    const { scale } = this.options;
+    const lineWidth = ctx.lineWidth;
+    if (borderExternalWidth) {
+      ctx.lineWidth = borderExternalWidth * scale;
+    }
     ctx.beginPath();
     const x = Math.round(startX);
     const y = Math.round(startY);
@@ -10543,6 +10557,9 @@ class TableParticle {
       ctx.lineTo(x + width, y);
     }
     ctx.stroke();
+    if (borderExternalWidth) {
+      ctx.lineWidth = lineWidth;
+    }
     ctx.translate(-0.5, -0.5);
   }
   _drawSlash(ctx, td, startX, startY) {
@@ -10566,7 +10583,7 @@ class TableParticle {
   }
   _drawBorder(ctx, element, startX, startY) {
     var _a, _b, _c, _d, _e, _f;
-    const { colgroup, trList, borderType, borderColor } = element;
+    const { colgroup, trList, borderType, borderColor, borderWidth = 1, borderExternalWidth } = element;
     if (!colgroup || !trList)
       return;
     const { scale, table: { defaultBorderColor } } = this.options;
@@ -10579,7 +10596,7 @@ class TableParticle {
     if (borderType === TableBorder.DASH) {
       ctx.setLineDash([3, 3]);
     }
-    ctx.lineWidth = scale;
+    ctx.lineWidth = borderWidth * scale;
     ctx.strokeStyle = borderColor || defaultBorderColor;
     if (!isEmptyBorderType && !isInternalBorderType) {
       this._drawOuterBorder({
@@ -10588,6 +10605,7 @@ class TableParticle {
         startY,
         width: tableWidth,
         height: tableHeight,
+        borderExternalWidth,
         isDrawFullBorder: isExternalBorderType
       });
     }
@@ -10631,10 +10649,29 @@ class TableParticle {
           if (!isInternalBorderType || td.colIndex + td.colspan < colgroup.length) {
             ctx.moveTo(x, y);
             ctx.lineTo(x, y + height);
+            if (borderExternalWidth && borderExternalWidth !== borderWidth && td.colIndex + td.colspan === colgroup.length) {
+              const lineWidth = ctx.lineWidth;
+              ctx.lineWidth = borderExternalWidth * scale;
+              ctx.stroke();
+              ctx.beginPath();
+              ctx.lineWidth = lineWidth;
+            }
           }
           if (!isInternalBorderType || td.rowIndex + td.rowspan < trList.length) {
+            const isSetExternalBottomBorder = borderExternalWidth && borderExternalWidth !== borderWidth && td.rowIndex + td.rowspan === trList.length;
+            if (isSetExternalBottomBorder) {
+              ctx.stroke();
+              ctx.beginPath();
+            }
             ctx.moveTo(x, y + height);
             ctx.lineTo(x - width, y + height);
+            if (isSetExternalBottomBorder) {
+              const lineWidth = ctx.lineWidth;
+              ctx.lineWidth = borderExternalWidth * scale;
+              ctx.stroke();
+              ctx.beginPath();
+              ctx.lineWidth = lineWidth;
+            }
           }
           ctx.stroke();
         }
@@ -13407,9 +13444,10 @@ class Control {
     };
   }
   removeControl(startIndex, context = {}) {
+    var _a;
     const elementList = context.elementList || this.getElementList();
     const startElement = elementList[startIndex];
-    if (!this.draw.isDesignMode()) {
+    if (!this.draw.isDesignMode() && !((_a = startElement == null ? void 0 : startElement.control) == null ? void 0 : _a.hide)) {
       const { deletable = true } = startElement.control;
       if (!deletable)
         return null;
@@ -14430,6 +14468,7 @@ class Previewer {
     __publicField(this, "curElementSrc");
     __publicField(this, "previewerDrawOption");
     __publicField(this, "curPosition");
+    __publicField(this, "eventBus");
     __publicField(this, "resizerSelection");
     __publicField(this, "resizerHandleList");
     __publicField(this, "resizerImageContainer");
@@ -14456,6 +14495,7 @@ class Previewer {
     this.curElementSrc = "";
     this.previewerDrawOption = {};
     this.curPosition = null;
+    this.eventBus = draw.getEventBus();
     const { resizerSelection, resizerHandleList, resizerImageContainer, resizerImage, resizerSize } = this._createResizerDom();
     this.resizerSelection = resizerSelection;
     this.resizerHandleList = resizerHandleList;
@@ -14631,6 +14671,11 @@ class Previewer {
     this._updateResizerRect(elementWidth, elementHeight);
     this._updateResizerSizeView(elementWidth, elementHeight);
     evt.preventDefault();
+    if (this.eventBus.isSubscribe("imageSizeChange")) {
+      this.eventBus.emit("imageSizeChange", {
+        element: this.curElement
+      });
+    }
   }
   _drawPreviewer() {
     const previewerContainer = document.createElement("div");
@@ -17416,12 +17461,34 @@ class Draw {
     this.intersectionPageNo = 0;
     this.lazyRenderIntersectionObserver = null;
     this.printModeData = null;
+    if (this.mode === EditorMode.PRINT) {
+      this.setPrintData();
+    }
     this.render({
       isInit: true,
       isSetCursor: false,
       isFirstRender: true
     });
   }
+  setPrintData() {
+    this.printModeData = {
+      header: this.header.getElementList(),
+      main: this.elementList,
+      footer: this.footer.getElementList()
+    };
+    const clonePrintModeData = deepClone(this.printModeData);
+    const editorDataKeys = ["header", "main", "footer"];
+    editorDataKeys.forEach((key) => {
+      clonePrintModeData[key] = this.control.filterAssistElement(clonePrintModeData[key]);
+    });
+    this.setEditorData(clonePrintModeData);
+  }
+  clearPrintData() {
+    if (this.printModeData) {
+      this.setEditorData(this.printModeData);
+      this.printModeData = null;
+    }
+  }
   getLetterReg() {
     return this.LETTER_REG;
   }
@@ -17432,21 +17499,10 @@ class Draw {
     if (this.mode === payload)
       return;
     if (payload === EditorMode.PRINT) {
-      this.printModeData = {
-        header: this.header.getElementList(),
-        main: this.elementList,
-        footer: this.footer.getElementList()
-      };
-      const clonePrintModeData = deepClone(this.printModeData);
-      const editorDataKeys = ["header", "main", "footer"];
-      editorDataKeys.forEach((key) => {
-        clonePrintModeData[key] = this.control.filterAssistElement(clonePrintModeData[key]);
-      });
-      this.setEditorData(clonePrintModeData);
+      this.setPrintData();
     }
-    if (this.mode === EditorMode.PRINT && this.printModeData) {
-      this.setEditorData(this.printModeData);
-      this.printModeData = null;
+    if (this.mode === EditorMode.PRINT) {
+      this.clearPrintData();
     }
     this.clearSideEffect();
     this.range.clearRange();
@@ -20963,12 +21019,16 @@ class CommandAdapt {
       isSubmitHistory: false
     });
   }
-  insertElementList(payload) {
+  insertElementList(payload, options = {}) {
     if (!payload.length)
       return;
     const isDisabled = this.draw.isReadonly() || this.draw.isDisabled();
     if (isDisabled)
       return;
+    const { isReplace = true } = options;
+    if (!isReplace) {
+      this.range.shrinkRange();
+    }
     const cloneElementList = deepClone(payload);
     const { startIndex } = this.range.getRange();
     const elementList = this.draw.getElementList();