@hufe921/canvas-editor 0.9.100 → 0.9.101

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [0.9.101](https://github.com/Hufe921/canvas-editor/compare/v0.9.100...v0.9.101) (2025-01-18)
+
+
+### Bug Fixes
+
+* image asynchronous rendering boundary error #959 ([344a6e0](https://github.com/Hufe921/canvas-editor/commit/344a6e038862a290c810ab55b66ae7fcceffecae)), closes [#959](https://github.com/Hufe921/canvas-editor/issues/959)
+* verify the range boundary error of control in the table #959 ([6d55698](https://github.com/Hufe921/canvas-editor/commit/6d55698987d7a4a119b0514560625db09884cd94)), closes [#959](https://github.com/Hufe921/canvas-editor/issues/959)
+
+
+### Features
+
+* add isSubmitHistory option to setControlValue api #960 ([9c0b67f](https://github.com/Hufe921/canvas-editor/commit/9c0b67f184ebb35cc74dcacc10e44efc39c2c95d)), closes [#960](https://github.com/Hufe921/canvas-editor/issues/960)
+* add option to executeReplace api #969 ([3fbaa3b](https://github.com/Hufe921/canvas-editor/commit/3fbaa3b7cc513336b8278221c639ea651e27155f)), closes [#969](https://github.com/Hufe921/canvas-editor/issues/969)
+* add split table cell api #826 ([04c7194](https://github.com/Hufe921/canvas-editor/commit/04c7194a94845d54456798509846fc2f9a86f807)), closes [#826](https://github.com/Hufe921/canvas-editor/issues/826)
+* not update default range style when unchanged #970 ([21a71c0](https://github.com/Hufe921/canvas-editor/commit/21a71c0cfabaf9e6f0a68ca5ddbe1df49d408ee8)), closes [#970](https://github.com/Hufe921/canvas-editor/issues/970)
+
+
+### Performance Improvements
+
+* deep clone performance for control data #971 ([71d52de](https://github.com/Hufe921/canvas-editor/commit/71d52de30c63beca806c0a7af0c82c1244d59429)), closes [#971](https://github.com/Hufe921/canvas-editor/issues/971)
+
+
+
 ## [0.9.100](https://github.com/Hufe921/canvas-editor/compare/v0.9.99...v0.9.100) (2025-01-03)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.100";
+const version = "0.9.101";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -242,6 +242,9 @@ function isObject(type) {
 function isArray(type) {
   return Array.isArray(type);
 }
+function isNumber(type) {
+  return Object.prototype.toString.call(type) === "[object Number]";
+}
 function mergeObject(source, target) {
   if (isObject(source) && isObject(target)) {
     const objectTarget = target;
@@ -659,6 +662,7 @@ class ImageParticle {
       const img = this.imageCache.get(element.value);
       ctx.drawImage(img, x, y, width, height);
     } else {
+      const cacheRenderCount = this.draw.getRenderCount();
       const imageLoadPromise = new Promise((resolve, reject) => {
         const img = new Image();
         img.setAttribute("crossOrigin", "Anonymous");
@@ -666,6 +670,8 @@ class ImageParticle {
         img.onload = () => {
           this.imageCache.set(element.value, img);
           resolve(element);
+          if (cacheRenderCount !== this.draw.getRenderCount())
+            return;
           if (element.imgDisplay === ImageDisplay.FLOAT_BOTTOM) {
             this.draw.render({
               isCompute: false,
@@ -4299,7 +4305,7 @@ function formatElementList(elementList, options) {
         }
       }
       if (value && value.length || type === ControlType.CHECKBOX || type === ControlType.RADIO || type === ControlType.SELECT && code && (!value || !value.length)) {
-        let valueList = value || [];
+        let valueList = value ? deepClone(value) : [];
         if (type === ControlType.CHECKBOX) {
           const codeList = code ? code.split(",") : [];
           if (Array.isArray(valueSets) && valueSets.length) {
@@ -7662,13 +7668,13 @@ function getWordRangeByCursor(host) {
   const LETTER_REG = draw.getLetterReg();
   let upCount = 0;
   let downCount = 0;
-  const isNumber = NUMBER_LIKE_REG.test(value);
-  if (isNumber || LETTER_REG.test(value)) {
+  const isNumber2 = NUMBER_LIKE_REG.test(value);
+  if (isNumber2 || LETTER_REG.test(value)) {
     const elementList = draw.getElementList();
     let upStartIndex = index2 - 1;
     while (upStartIndex > 0) {
       const value2 = elementList[upStartIndex].value;
-      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
+      if (isNumber2 && NUMBER_LIKE_REG.test(value2) || !isNumber2 && LETTER_REG.test(value2)) {
         upCount++;
         upStartIndex--;
       } else {
@@ -7678,7 +7684,7 @@ function getWordRangeByCursor(host) {
     let downStartIndex = index2 + 1;
     while (downStartIndex < elementList.length) {
       const value2 = elementList[downStartIndex].value;
-      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
+      if (isNumber2 && NUMBER_LIKE_REG.test(value2) || !isNumber2 && LETTER_REG.test(value2)) {
         downCount++;
         downStartIndex++;
       } else {
@@ -8799,6 +8805,9 @@ class RangeManager {
       return null;
     return __spreadValues(__spreadValues({}, anchorElement), this.defaultStyle);
   }
+  getIsRangeChange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
+    return this.range.startIndex !== startIndex || this.range.endIndex !== endIndex || this.range.tableId !== tableId || this.range.startTdIndex !== startTdIndex || this.range.endTdIndex !== endTdIndex || this.range.startTrIndex !== startTrIndex || this.range.endTrIndex !== endTrIndex;
+  }
   getIsCollapsed() {
     const { startIndex, endIndex } = this.range;
     return startIndex === endIndex;
@@ -9055,15 +9064,18 @@ class RangeManager {
     return !startElement.controlId && !endElement.controlId || (!startElement.controlId || startElement.controlComponent === ControlComponent.POSTFIX) && (!endElement.controlId || endElement.controlComponent === ControlComponent.POSTFIX) || !!startElement.controlId && endElement.controlId === startElement.controlId && endElement.controlComponent !== ControlComponent.PRE_TEXT && endElement.controlComponent !== ControlComponent.POST_TEXT && endElement.controlComponent !== ControlComponent.POSTFIX;
   }
   setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
-    this.range.startIndex = startIndex;
-    this.range.endIndex = endIndex;
-    this.range.tableId = tableId;
-    this.range.startTdIndex = startTdIndex;
-    this.range.endTdIndex = endTdIndex;
-    this.range.startTrIndex = startTrIndex;
-    this.range.endTrIndex = endTrIndex;
-    this.range.isCrossRowCol = !!(startTdIndex || endTdIndex || startTrIndex || endTrIndex);
-    this.setDefaultStyle(null);
+    const isChange = this.getIsRangeChange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex);
+    if (isChange) {
+      this.range.startIndex = startIndex;
+      this.range.endIndex = endIndex;
+      this.range.tableId = tableId;
+      this.range.startTdIndex = startTdIndex;
+      this.range.endTdIndex = endTdIndex;
+      this.range.startTrIndex = startTrIndex;
+      this.range.endTrIndex = endTrIndex;
+      this.range.isCrossRowCol = !!(startTdIndex || endTdIndex || startTrIndex || endTrIndex);
+      this.setDefaultStyle(null);
+    }
     this.range.zone = this.draw.getZone().getZone();
     const control = this.draw.getControl();
     if (~startIndex && ~endIndex) {
@@ -12734,7 +12746,7 @@ class Control {
     const elementList = this.getElementList();
     const startElement = elementList[startIndex];
     const endElement = elementList[endIndex];
-    if (startElement.controlId && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
+    if ((startElement == null ? void 0 : startElement.controlId) && startElement.controlId === endElement.controlId && endElement.controlComponent !== ControlComponent.POSTFIX) {
       return true;
     }
     return false;
@@ -13228,7 +13240,7 @@ class Control {
   }
   setValueById(payload) {
     let isExistSet = false;
-    const { id, conceptId, areaId, value } = payload;
+    const { id, conceptId, areaId, value, isSubmitHistory = true } = payload;
     if (!id && !conceptId)
       return;
     const setValue = (elementList) => {
@@ -13353,7 +13365,11 @@ class Control {
       setValue(elementList);
     }
     if (isExistSet) {
+      if (!isSubmitHistory) {
+        this.draw.getHistoryManager().recovery();
+      }
       this.draw.render({
+        isSubmitHistory,
         isSetCursor: false
       });
     }
@@ -13406,7 +13422,7 @@ class Control {
     }
   }
   setPropertiesById(payload) {
-    const { id, conceptId, areaId, properties } = payload;
+    const { id, conceptId, areaId, properties, isSubmitHistory = true } = payload;
     if (!id && !conceptId)
       return;
     let isExistUpdate = false;
@@ -13474,7 +13490,11 @@ class Control {
       });
     }
     this.draw.setEditorData(pageComponentData);
+    if (!isSubmitHistory) {
+      this.draw.getHistoryManager().recovery();
+    }
     this.draw.render({
+      isSubmitHistory,
       isSetCursor: false
     });
   }
@@ -16354,6 +16374,115 @@ class TableOperate {
     this.draw.render();
     this.tableTool.render();
   }
+  splitVerticalTableCell() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const range = this.range.getRange();
+    if (range.isCrossRowCol)
+      return;
+    const { index: index2, tdIndex, trIndex } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTr = curTrList[trIndex];
+    const curTd = curTr.tdList[tdIndex];
+    element.colgroup.splice(tdIndex + 1, 0, {
+      width: this.options.table.defaultColMinWidth
+    });
+    for (let t = 0; t < curTrList.length; t++) {
+      const tr = curTrList[t];
+      let d = 0;
+      while (d < tr.tdList.length) {
+        const td = tr.tdList[d];
+        if (td.rowIndex !== curTd.rowIndex) {
+          if (td.colIndex <= curTd.colIndex && td.colIndex + td.colspan > curTd.colIndex) {
+            td.colspan++;
+          }
+        } else {
+          if (td.id === curTd.id) {
+            const tdId = getUUID();
+            curTr.tdList.splice(d + curTd.colspan, 0, {
+              id: tdId,
+              rowspan: curTd.rowspan,
+              colspan: 1,
+              value: [
+                {
+                  value: ZERO,
+                  size: 16,
+                  tableId: element.id,
+                  trId: tr.id,
+                  tdId
+                }
+              ]
+            });
+            d++;
+          }
+        }
+        d++;
+      }
+    }
+    this.draw.render();
+    this.tableTool.render();
+  }
+  splitHorizontalTableCell() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return;
+    const range = this.range.getRange();
+    if (range.isCrossRowCol)
+      return;
+    const { index: index2, tdIndex, trIndex } = positionContext;
+    const originalElementList = this.draw.getOriginalElementList();
+    const element = originalElementList[index2];
+    const curTrList = element.trList;
+    const curTr = curTrList[trIndex];
+    const curTd = curTr.tdList[tdIndex];
+    let appendTrIndex = -1;
+    let t = 0;
+    while (t < curTrList.length) {
+      if (t === appendTrIndex) {
+        t++;
+        continue;
+      }
+      const tr = curTrList[t];
+      let d = 0;
+      while (d < tr.tdList.length) {
+        const td = tr.tdList[d];
+        if (td.id === curTd.id) {
+          const trId = getUUID();
+          const tdId = getUUID();
+          curTrList.splice(t + curTd.rowspan, 0, {
+            id: trId,
+            height: this.options.table.defaultTrMinHeight,
+            tdList: [
+              {
+                id: tdId,
+                rowspan: 1,
+                colspan: curTd.colspan,
+                value: [
+                  {
+                    value: ZERO,
+                    size: 16,
+                    tableId: element.id,
+                    trId,
+                    tdId
+                  }
+                ]
+              }
+            ]
+          });
+          appendTrIndex = t + curTd.rowspan;
+        } else if (td.rowIndex >= curTd.rowIndex && td.rowIndex < curTd.rowIndex + curTd.rowspan && td.rowIndex + td.rowspan >= curTd.rowIndex + curTd.rowspan) {
+          td.rowspan++;
+        }
+        d++;
+      }
+      t++;
+    }
+    this.draw.render();
+    this.tableTool.render();
+  }
   tableTdVerticalAlign(payload) {
     const rowCol = this.tableParticle.getRangeRowCol();
     if (!rowCol)
@@ -16760,6 +16889,7 @@ class Draw {
     __publicField(this, "pageList");
     __publicField(this, "ctxList");
     __publicField(this, "pageNo");
+    __publicField(this, "renderCount");
     __publicField(this, "pagePixelRatio");
     __publicField(this, "mode");
     __publicField(this, "options");
@@ -16828,6 +16958,7 @@ class Draw {
     this.pageList = [];
     this.ctxList = [];
     this.pageNo = 0;
+    this.renderCount = 0;
     this.pagePixelRatio = null;
     this.mode = options.mode;
     this.options = options;
@@ -17095,6 +17226,9 @@ class Draw {
   setPageNo(payload) {
     this.pageNo = payload;
   }
+  getRenderCount() {
+    return this.renderCount;
+  }
   getPage(pageNo = -1) {
     return this.pageList[~pageNo ? pageNo : this.pageNo];
   }
@@ -17772,6 +17906,7 @@ class Draw {
         for (let t = 0; t < trList.length; t++) {
           const tr = trList[t];
           tr.height = tr.minHeight || defaultTrMinHeight;
+          tr.minHeight = tr.height;
         }
         this.tableParticle.computeRowColInfo(element);
         for (let t = 0; t < trList.length; t++) {
@@ -18547,6 +18682,7 @@ class Draw {
     }
   }
   render(payload) {
+    this.renderCount++;
     const { header, footer } = this.options;
     const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false, isSourceHistory = false, isFirstRender = false } = payload || {};
     let { curIndex } = payload || {};
@@ -18758,6 +18894,8 @@ class Command {
     __publicField(this, "executeDeleteTable");
     __publicField(this, "executeMergeTableCell");
     __publicField(this, "executeCancelMergeTableCell");
+    __publicField(this, "executeSplitVerticalTableCell");
+    __publicField(this, "executeSplitHorizontalTableCell");
     __publicField(this, "executeTableTdVerticalAlign");
     __publicField(this, "executeTableBorderType");
     __publicField(this, "executeTableBorderColor");
@@ -18884,6 +19022,8 @@ class Command {
     this.executeDeleteTable = adapt.deleteTable.bind(adapt);
     this.executeMergeTableCell = adapt.mergeTableCell.bind(adapt);
     this.executeCancelMergeTableCell = adapt.cancelMergeTableCell.bind(adapt);
+    this.executeSplitVerticalTableCell = adapt.splitVerticalTableCell.bind(adapt);
+    this.executeSplitHorizontalTableCell = adapt.splitHorizontalTableCell.bind(adapt);
     this.executeTableTdVerticalAlign = adapt.tableTdVerticalAlign.bind(adapt);
     this.executeTableBorderType = adapt.tableBorderType.bind(adapt);
     this.executeTableBorderColor = adapt.tableBorderColor.bind(adapt);
@@ -19810,6 +19950,18 @@ class CommandAdapt {
       return;
     this.tableOperate.cancelMergeTableCell();
   }
+  splitVerticalTableCell() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.splitVerticalTableCell();
+  }
+  splitHorizontalTableCell() {
+    const isReadonly = this.draw.isReadonly();
+    if (isReadonly)
+      return;
+    this.tableOperate.splitHorizontalTableCell();
+  }
   tableTdVerticalAlign(payload) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
@@ -20111,14 +20263,27 @@ class CommandAdapt {
   getSearchNavigateInfo() {
     return this.searchManager.getSearchNavigateInfo();
   }
-  replace(payload) {
+  replace(payload, option) {
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
     if (!payload || new RegExp(`${ZERO}`, "g").test(payload))
       return;
-    const matchList = this.draw.getSearch().getSearchMatchList();
-    if (!matchList.length)
+    let matchList = this.draw.getSearch().getSearchMatchList();
+    const replaceIndex = option == null ? void 0 : option.index;
+    if (isNumber(replaceIndex)) {
+      const matchGroup = [];
+      matchList.forEach((match) => {
+        const last = matchGroup[matchGroup.length - 1];
+        if (!last || last[0].groupId !== match.groupId) {
+          matchGroup.push([match]);
+        } else {
+          last.push(match);
+        }
+      });
+      matchList = matchGroup[replaceIndex];
+    }
+    if (!(matchList == null ? void 0 : matchList.length))
       return;
     let pageDiffCount = 0;
     let tableDiffCount = 0;