@hufe921/canvas-editor 0.9.83 → 0.9.85

package/CHANGELOG.md

@@ -1,3 +1,46 @@
+## [0.9.85](https://github.com/Hufe921/canvas-editor/compare/v0.9.84...v0.9.85) (2024-07-07)
+
+
+### Bug Fixes
+
+* custom override method removes support for asynchronous #672 ([0e705d6](https://github.com/Hufe921/canvas-editor/commit/0e705d6a0bdb0922efd5c47edd8ca9eba9964199)), closes [#672](https://github.com/Hufe921/canvas-editor/issues/672)
+* set control highlight and re render #678 ([24df9d3](https://github.com/Hufe921/canvas-editor/commit/24df9d3b006a8daf795ada677bfd0159e3ccc3f5)), closes [#678](https://github.com/Hufe921/canvas-editor/issues/678)
+
+
+### Chores
+
+* update build.yml ([a40441d](https://github.com/Hufe921/canvas-editor/commit/a40441dc3994a41ae29c341a542be6e0e7dada2e))
+
+
+### Features
+
+* add render mode #667 ([affd191](https://github.com/Hufe921/canvas-editor/commit/affd1911552a73a2b63a13f2c423121637830b99)), closes [#667](https://github.com/Hufe921/canvas-editor/issues/667)
+* add title deletable property #670 ([b3d8413](https://github.com/Hufe921/canvas-editor/commit/b3d8413b35050eac626af1c57beaaf1b8d692a0e)), closes [#670](https://github.com/Hufe921/canvas-editor/issues/670)
+* insert element boundary optimization #669 ([de44bd6](https://github.com/Hufe921/canvas-editor/commit/de44bd68ab01e5ffa8d6a8dc5d566b0cdb8d08e6)), closes [#669](https://github.com/Hufe921/canvas-editor/issues/669)
+
+
+### Tests
+
+* update text test case ([c24da73](https://github.com/Hufe921/canvas-editor/commit/c24da737b15200775a7d4a5edf4e2224f6ec5429))
+
+
+
+## [0.9.84](https://github.com/Hufe921/canvas-editor/compare/v0.9.83...v0.9.84) (2024-06-30)
+
+
+### Bug Fixes
+
+* merge table cell boundary error #661 ([146ac75](https://github.com/Hufe921/canvas-editor/commit/146ac75a002338f13c96900a2849062c29018606)), closes [#661](https://github.com/Hufe921/canvas-editor/issues/661)
+* set default style for control using executeSetControlProperties #658 ([7b5079c](https://github.com/Hufe921/canvas-editor/commit/7b5079c9b638730f7ea609239b3cb91b915d4650)), closes [#658](https://github.com/Hufe921/canvas-editor/issues/658)
+
+
+### Features
+
+* optimization of table operations in form mode #662 ([b740637](https://github.com/Hufe921/canvas-editor/commit/b74063741f413d5bf6f90c748761f64141405ca7)), closes [#662](https://github.com/Hufe921/canvas-editor/issues/662)
+* override method with default interception behavior #663 ([9a4b4f9](https://github.com/Hufe921/canvas-editor/commit/9a4b4f9a4a70a344740212507e250d9bdea5dd32)), closes [#663](https://github.com/Hufe921/canvas-editor/issues/663)
+
+
+
 ## [0.9.83](https://github.com/Hufe921/canvas-editor/compare/v0.9.82...v0.9.83) (2024-06-21)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.83";
+const version = "0.9.85";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4351,7 +4351,7 @@ function formatElementContext(sourceElementList, formatElementList2, anchorIndex
   let isBreakWarped = false;
   for (let e = 0; e < formatElementList2.length; e++) {
     const targetElement = formatElementList2[e];
-    if (isBreakWhenWrap && !copyElement.listId && /^\n/.test(targetElement.value)) {
+    if (isBreakWhenWrap && !copyElement.listId && START_LINE_BREAK_REG.test(targetElement.value)) {
       isBreakWarped = true;
     }
     if (isBreakWarped || !copyElement.listId && targetElement.type === ElementType.LIST) {
@@ -5066,8 +5066,9 @@ function pasteByEvent(host, evt) {
     return;
   const { paste } = draw.getOverride();
   if (paste) {
-    paste(evt);
-    return;
+    const overrideResult = paste(evt);
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
   }
   if (!getIsClipboardContainFile(clipboardData)) {
     const clipboardText = clipboardData.getData("text");
@@ -5118,8 +5119,9 @@ async function pasteByApi(host, options) {
     return;
   const { paste } = draw.getOverride();
   if (paste) {
-    paste();
-    return;
+    const overrideResult = paste();
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
   }
   const clipboardText = await navigator.clipboard.readText();
   const editorClipboardData = getClipboardData();
@@ -5353,6 +5355,56 @@ class Cursor {
     }
   }
 }
+var EditorComponent;
+(function(EditorComponent2) {
+  EditorComponent2["COMPONENT"] = "component";
+  EditorComponent2["MENU"] = "menu";
+  EditorComponent2["MAIN"] = "main";
+  EditorComponent2["FOOTER"] = "footer";
+  EditorComponent2["CONTEXTMENU"] = "contextmenu";
+  EditorComponent2["POPUP"] = "popup";
+  EditorComponent2["CATALOG"] = "catalog";
+  EditorComponent2["COMMENT"] = "comment";
+})(EditorComponent || (EditorComponent = {}));
+var EditorContext;
+(function(EditorContext2) {
+  EditorContext2["PAGE"] = "page";
+  EditorContext2["TABLE"] = "table";
+})(EditorContext || (EditorContext = {}));
+var EditorMode;
+(function(EditorMode2) {
+  EditorMode2["EDIT"] = "edit";
+  EditorMode2["CLEAN"] = "clean";
+  EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
+  EditorMode2["PRINT"] = "print";
+})(EditorMode || (EditorMode = {}));
+var EditorZone;
+(function(EditorZone2) {
+  EditorZone2["HEADER"] = "header";
+  EditorZone2["MAIN"] = "main";
+  EditorZone2["FOOTER"] = "footer";
+})(EditorZone || (EditorZone = {}));
+var PageMode;
+(function(PageMode2) {
+  PageMode2["PAGING"] = "paging";
+  PageMode2["CONTINUITY"] = "continuity";
+})(PageMode || (PageMode = {}));
+var PaperDirection;
+(function(PaperDirection2) {
+  PaperDirection2["VERTICAL"] = "vertical";
+  PaperDirection2["HORIZONTAL"] = "horizontal";
+})(PaperDirection || (PaperDirection = {}));
+var WordBreak;
+(function(WordBreak2) {
+  WordBreak2["BREAK_ALL"] = "break-all";
+  WordBreak2["BREAK_WORD"] = "break-word";
+})(WordBreak || (WordBreak = {}));
+var RenderMode;
+(function(RenderMode2) {
+  RenderMode2["SPEED"] = "speed";
+  RenderMode2["COMPATIBILITY"] = "compatibility";
+})(RenderMode || (RenderMode = {}));
 var MouseEventButton;
 (function(MouseEventButton2) {
   MouseEventButton2[MouseEventButton2["LEFT"] = 0] = "LEFT";
@@ -5690,10 +5742,14 @@ function mousedown(evt, host) {
   const previewer = draw.getPreviewer();
   previewer.clearResizer();
   if (isDirectHitImage) {
-    previewer.drawResizer(curElement, positionList[curIndex], curElement.type === ElementType.LATEX ? {
-      mime: "svg",
-      srcKey: "laTexSVG"
-    } : {});
+    const previewerDrawOption = {
+      dragDisable: isReadonly || !curElement.controlId && draw.getMode() === EditorMode.FORM
+    };
+    if (curElement.type === ElementType.LATEX) {
+      previewerDrawOption.mime = "svg";
+      previewerDrawOption.srcKey = "laTexSVG";
+    }
+    previewer.drawResizer(curElement, positionList[curIndex], previewerDrawOption);
     draw.getCursor().drawCursor({
       isShow: false
     });
@@ -5704,7 +5760,7 @@ function mousedown(evt, host) {
   }
   const tableTool = draw.getTableTool();
   tableTool.dispose();
-  if (isTable && !isReadonly) {
+  if (isTable && !isReadonly && draw.getMode() !== EditorMode.FORM) {
     tableTool.render();
   }
   const hyperlinkParticle = draw.getHyperlinkParticle();
@@ -5991,51 +6047,6 @@ function mousemove(evt, host) {
     isCompute: false
   });
 }
-var EditorComponent;
-(function(EditorComponent2) {
-  EditorComponent2["COMPONENT"] = "component";
-  EditorComponent2["MENU"] = "menu";
-  EditorComponent2["MAIN"] = "main";
-  EditorComponent2["FOOTER"] = "footer";
-  EditorComponent2["CONTEXTMENU"] = "contextmenu";
-  EditorComponent2["POPUP"] = "popup";
-  EditorComponent2["CATALOG"] = "catalog";
-  EditorComponent2["COMMENT"] = "comment";
-})(EditorComponent || (EditorComponent = {}));
-var EditorContext;
-(function(EditorContext2) {
-  EditorContext2["PAGE"] = "page";
-  EditorContext2["TABLE"] = "table";
-})(EditorContext || (EditorContext = {}));
-var EditorMode;
-(function(EditorMode2) {
-  EditorMode2["EDIT"] = "edit";
-  EditorMode2["CLEAN"] = "clean";
-  EditorMode2["READONLY"] = "readonly";
-  EditorMode2["FORM"] = "form";
-  EditorMode2["PRINT"] = "print";
-})(EditorMode || (EditorMode = {}));
-var EditorZone;
-(function(EditorZone2) {
-  EditorZone2["HEADER"] = "header";
-  EditorZone2["MAIN"] = "main";
-  EditorZone2["FOOTER"] = "footer";
-})(EditorZone || (EditorZone = {}));
-var PageMode;
-(function(PageMode2) {
-  PageMode2["PAGING"] = "paging";
-  PageMode2["CONTINUITY"] = "continuity";
-})(PageMode || (PageMode = {}));
-var PaperDirection;
-(function(PaperDirection2) {
-  PaperDirection2["VERTICAL"] = "vertical";
-  PaperDirection2["HORIZONTAL"] = "horizontal";
-})(PaperDirection || (PaperDirection = {}));
-var WordBreak;
-(function(WordBreak2) {
-  WordBreak2["BREAK_ALL"] = "break-all";
-  WordBreak2["BREAK_WORD"] = "break-word";
-})(WordBreak || (WordBreak = {}));
 function backspace(evt, host) {
   const draw = host.getDraw();
   if (draw.isReadonly())
@@ -6156,8 +6167,10 @@ function enter(evt, host) {
   if (evt.shiftKey && startElement.listId) {
     enterText.listWrap = true;
   }
+  formatElementContext(elementList, [enterText], startIndex, {
+    isBreakWhenWrap: true
+  });
   if (!(endElement.titleId && endElement.titleId !== ((_b = elementList[endIndex + 1]) == null ? void 0 : _b.titleId))) {
-    formatElementContext(elementList, [enterText], startIndex);
     const copyElement = getAnchorElement(elementList, endIndex);
     if (copyElement) {
       const copyAttr = [...EDITOR_ROW_ATTR];
@@ -6976,8 +6989,9 @@ function copy(host) {
   const draw = host.getDraw();
   const { copy: copy2 } = draw.getOverride();
   if (copy2) {
-    copy2();
-    return;
+    const overrideResult = copy2();
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
   }
   const rangeManager = draw.getRange();
   let copyElementList = null;
@@ -7028,8 +7042,9 @@ function drop(evt, host) {
   const draw = host.getDraw();
   const { drop: drop2 } = draw.getOverride();
   if (drop2) {
-    drop2(evt);
-    return;
+    const overrideResult = drop2(evt);
+    if ((overrideResult == null ? void 0 : overrideResult.preventDefault) !== false)
+      return;
   }
   evt.preventDefault();
   const data2 = (_a = evt.dataTransfer) == null ? void 0 : _a.getData("text");
@@ -9238,6 +9253,14 @@ class TextParticle {
   }
   record(ctx, element, x, y) {
     this.ctx = ctx;
+    if (this.options.renderMode === RenderMode.COMPATIBILITY) {
+      this._setCurXY(x, y);
+      this.text = element.value;
+      this.curStyle = element.style;
+      this.curColor = element.color;
+      this.complete();
+      return;
+    }
     if (!this.text) {
       this._setCurXY(x, y);
     }
@@ -9768,6 +9791,8 @@ class TableParticle {
         td.height = height;
         td.rowIndex = t;
         td.colIndex = colIndex;
+        td.trIndex = t;
+        td.tdIndex = d;
         preX += width;
         if (isLastRowTd && !isLastTd) {
           preX = 0;
@@ -12327,6 +12352,12 @@ class Control {
         element.control = __spreadProps(__spreadValues(__spreadValues({}, element.control), properties), {
           value: element.control.value
         });
+        CONTROL_STYLE_ATTR.forEach((key) => {
+          const controlStyleProperty = properties[key];
+          if (controlStyleProperty) {
+            Reflect.set(element, key, controlStyleProperty);
+          }
+        });
         let newEndIndex = i;
         while (newEndIndex < elementList.length) {
           const nextElement = elementList[newEndIndex];
@@ -12937,7 +12968,7 @@ class Previewer {
     document.addEventListener("mousemove", mousemoveFn);
     document.addEventListener("mouseup", () => {
       var _a;
-      if (this.curElement) {
+      if (this.curElement && !this.previewerDrawOption.dragDisable) {
         this.curElement.width = this.width;
         this.curElement.height = this.height;
         this.draw.render({
@@ -12955,7 +12986,7 @@ class Previewer {
     evt.preventDefault();
   }
   _mousemove(evt) {
-    if (!this.curElement)
+    if (!this.curElement || this.previewerDrawOption.dragDisable)
       return;
     const { scale } = this.options;
     let dx = 0;
@@ -14630,6 +14661,7 @@ class Draw {
       this.setEditorData(this.printModeData);
       this.printModeData = null;
     }
+    this.clearSideEffect();
     this.range.clearRange();
     this.mode = payload;
     this.render({
@@ -14930,7 +14962,8 @@ class Draw {
       if (!this.control.getActiveControl()) {
         let deleteIndex = endIndex - 1;
         while (deleteIndex >= start) {
-          if (((_c = (_b = elementList[deleteIndex]) == null ? void 0 : _b.control) == null ? void 0 : _c.deletable) !== false) {
+          const deleteElement = elementList[deleteIndex];
+          if (((_b = deleteElement == null ? void 0 : deleteElement.control) == null ? void 0 : _b.deletable) !== false && ((_c = deleteElement == null ? void 0 : deleteElement.title) == null ? void 0 : _c.deletable) !== false) {
             elementList.splice(deleteIndex, 1);
           }
           deleteIndex--;
@@ -16582,6 +16615,7 @@ function mergeOption(options = {}) {
     marginIndicatorColor: "#BABABA",
     margins: [100, 120, 100, 120],
     pageMode: PageMode.PAGING,
+    renderMode: RenderMode.SPEED,
     defaultHyperlinkColor: "#0000FF",
     paperDirection: PaperDirection.VERTICAL,
     inactiveAlpha: 0.6,
@@ -17775,7 +17809,11 @@ class CommandAdapt {
         d++;
       }
     }
-    const curIndex = startTd.value.length - 1;
+    this.position.setPositionContext(__spreadProps(__spreadValues({}, positionContext), {
+      trIndex: anchorTd.trIndex,
+      tdIndex: anchorTd.tdIndex
+    }));
+    const curIndex = anchorTd.value.length - 1;
     this.range.setRange(curIndex, curIndex);
     this.draw.render();
     this.tableTool.render();
@@ -18591,7 +18629,9 @@ class CommandAdapt {
     const cloneElementList = deepClone(payload);
     const { startIndex } = this.range.getRange();
     const elementList = this.draw.getElementList();
-    formatElementContext(elementList, cloneElementList, startIndex);
+    formatElementContext(elementList, cloneElementList, startIndex, {
+      isBreakWhenWrap: true
+    });
     this.draw.insertElementList(cloneElementList);
   }
   appendElementList(elementList, options) {
@@ -18783,6 +18823,9 @@ class CommandAdapt {
   }
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
+    this.draw.render({
+      isSubmitHistory: false
+    });
   }
   updateOptions(payload) {
     const newOption = mergeOption(payload);
@@ -19098,7 +19141,7 @@ const controlMenus = [
     i18nPath: "contextmenu.control.delete",
     when: (payload) => {
       var _a;
-      return !payload.isReadonly && !payload.editorHasSelection && !!((_a = payload.startElement) == null ? void 0 : _a.controlId);
+      return !payload.isReadonly && !payload.editorHasSelection && !!((_a = payload.startElement) == null ? void 0 : _a.controlId) && payload.options.mode !== EditorMode.FORM;
     },
     callback: (command) => {
       command.executeRemoveControl();
@@ -19295,7 +19338,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.border",
     icon: "border-all",
     when: (payload) => {
-      return !payload.isReadonly && payload.isInTable;
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
     },
     childMenus: [
       {
@@ -19394,7 +19437,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.verticalAlign",
     icon: "vertical-align",
     when: (payload) => {
-      return !payload.isReadonly && payload.isInTable;
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
     },
     childMenus: [
       {
@@ -19431,7 +19474,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.insertRowCol",
     icon: "insert-row-col",
     when: (payload) => {
-      return !payload.isReadonly && payload.isInTable;
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
     },
     childMenus: [
       {
@@ -19477,7 +19520,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.deleteRowCol",
     icon: "delete-row-col",
     when: (payload) => {
-      return !payload.isReadonly && payload.isInTable;
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
     },
     childMenus: [
       {
@@ -19514,7 +19557,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.mergeCell",
     icon: "merge-cell",
     when: (payload) => {
-      return !payload.isReadonly && payload.isCrossRowCol;
+      return !payload.isReadonly && payload.isCrossRowCol && payload.options.mode !== EditorMode.FORM;
     },
     callback: (command) => {
       command.executeMergeTableCell();
@@ -19525,7 +19568,7 @@ const tableMenus = [
     i18nPath: "contextmenu.table.mergeCancelCell",
     icon: "merge-cancel-cell",
     when: (payload) => {
-      return !payload.isReadonly && payload.isInTable;
+      return !payload.isReadonly && payload.isInTable && payload.options.mode !== EditorMode.FORM;
     },
     callback: (command) => {
       command.executeCancelMergeTableCell();
@@ -19647,7 +19690,8 @@ class ContextMenu {
       isInTable: isTable,
       trIndex: trIndex != null ? trIndex : null,
       tdIndex: tdIndex != null ? tdIndex : null,
-      tableElement
+      tableElement,
+      options: this.options
     };
   }
   _createContextMenuContainer() {
@@ -20126,5 +20170,5 @@ class Editor {
     this.use = plugin.use.bind(plugin);
   }
 }
-export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
+export { BackgroundRepeat, BackgroundSize, BlockType, Command, ControlIndentation, ControlType, EDITOR_COMPONENT, Editor, EditorComponent, EditorMode, EditorZone, ElementType, INTERNAL_CONTEXT_MENU_KEY, ImageDisplay, KeyMap, LETTER_CLASS, ListStyle, ListType, MaxHeightRatio, NumberType, PageMode, PaperDirection, RenderMode, RowFlex, TableBorder, TdBorder, TdSlash, TextDecorationStyle, TitleLevel, VerticalAlign, WordBreak, Editor as default, splitText };
 //# sourceMappingURL=canvas-editor.es.js.map