@hufe921/canvas-editor 0.9.68 → 0.9.69

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [0.9.69](https://github.com/Hufe921/canvas-editor/compare/v0.9.68...v0.9.69) (2024-03-15)
+
+
+### Bug Fixes
+
+* adjust the style of converting table element to html #458 ([0003686](https://github.com/Hufe921/canvas-editor/commit/000368636cba3547e3b280e1960e72198b41cb01)), closes [#458](https://github.com/Hufe921/canvas-editor/issues/458)
+* copy html boundary error #470 ([4e46afa](https://github.com/Hufe921/canvas-editor/commit/4e46afab687c696360a96f45dd3cd97551f951ec)), closes [#470](https://github.com/Hufe921/canvas-editor/issues/470)
+
+
+### Features
+
+* add getControlList api #455 ([0523fc2](https://github.com/Hufe921/canvas-editor/commit/0523fc257ae6f2c9b2511e912a4272c6b962d41e)), closes [#455](https://github.com/Hufe921/canvas-editor/issues/455)
+* add parameter for clearing font color and highlight color #461 ([73f9cfd](https://github.com/Hufe921/canvas-editor/commit/73f9cfdf88afcfab4376bf3c4011b171c0669d2f)), closes [#461](https://github.com/Hufe921/canvas-editor/issues/461)
+* cancel painter style setting #453 ([51427c7](https://github.com/Hufe921/canvas-editor/commit/51427c7dc462ea5a33ae6a92836d1e7ded7cf43d)), closes [#453](https://github.com/Hufe921/canvas-editor/issues/453)
+* table element can be merged after paging #41 ([33a2dd8](https://github.com/Hufe921/canvas-editor/commit/33a2dd8faa7a46bc9290b744dad93a761ed6e1cf)), closes [#41](https://github.com/Hufe921/canvas-editor/issues/41)
+
+
+### Refactor
+
+* date element renderer #460 ([788f96a](https://github.com/Hufe921/canvas-editor/commit/788f96aa89766cecf0e835fd0ffe64140bb94e87)), closes [#460](https://github.com/Hufe921/canvas-editor/issues/460)
+
+
+### Tests
+
+* update painter test case (#459) ([a058c59](https://github.com/Hufe921/canvas-editor/commit/a058c5956cc2c26b347e5528d8164e2e1eff1225)), closes [#459](https://github.com/Hufe921/canvas-editor/issues/459)
+
+
+
 ## [0.9.68](https://github.com/Hufe921/canvas-editor/compare/v0.9.67...v0.9.68) (2024-03-10)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.68";
+const version = "0.9.69";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -4074,6 +4074,22 @@ function zipElementList(payload) {
       listElement.valueList = zipElementList(valueList);
       element = listElement;
     } else if (element.type === ElementType.TABLE) {
+      if (element.pagingId) {
+        let tableIndex = e + 1;
+        let combineCount = 0;
+        while (tableIndex < elementList.length) {
+          const nextElement = elementList[tableIndex];
+          if (nextElement.pagingId === element.pagingId) {
+            element.height += nextElement.height;
+            element.trList.push(...nextElement.trList);
+            tableIndex++;
+            combineCount++;
+          } else {
+            break;
+          }
+        }
+        e += combineCount;
+      }
       if (element.trList) {
         for (let t = 0; t < element.trList.length; t++) {
           const tr = element.trList[t];
@@ -4301,16 +4317,31 @@ function createDomFromElementList(elementList, options) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
         const tableDom = document.createElement("table");
+        tableDom.setAttribute("cellSpacing", "0");
+        tableDom.setAttribute("cellpadding", "0");
+        tableDom.setAttribute("border", "0");
+        tableDom.style.borderTop = tableDom.style.borderLeft = "1px solid";
+        tableDom.style.width = `${element.width}px`;
+        const colgroupDom = document.createElement("colgroup");
+        for (let c = 0; c < element.colgroup.length; c++) {
+          const colgroup = element.colgroup[c];
+          const colDom = document.createElement("col");
+          colDom.setAttribute("width", `${colgroup.width}`);
+          colgroupDom.append(colDom);
+        }
+        tableDom.append(colgroupDom);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
           const trDom = document.createElement("tr");
           const tr = trList[t];
+          trDom.style.height = `${tr.height}px`;
           for (let d = 0; d < tr.tdList.length; d++) {
             const tdDom = document.createElement("td");
-            tdDom.style.border = "1px solid";
+            tdDom.style.borderBottom = tdDom.style.borderRight = "1px solid";
             const td = tr.tdList[d];
             tdDom.colSpan = td.colspan;
             tdDom.rowSpan = td.rowspan;
+            tdDom.style.verticalAlign = td.verticalAlign || "top";
             const childDom = buildDom(zipElementList(td.value));
             tdDom.innerHTML = childDom.innerHTML;
             if (td.backgroundColor) {
@@ -4684,6 +4715,9 @@ function writeClipboardItem(text, html, elementList) {
     document.body.append(fakeElement);
     const selection = window.getSelection();
     const range = document.createRange();
+    const br = document.createElement("span");
+    br.innerText = "\n";
+    fakeElement.append(br);
     range.selectNodeContents(fakeElement);
     selection == null ? void 0 : selection.removeAllRanges();
     selection == null ? void 0 : selection.addRange(range);
@@ -10493,6 +10527,23 @@ class Control {
       isSetCursor: false
     });
   }
+  getList() {
+    const data2 = [
+      this.draw.getHeader().getElementList(),
+      this.draw.getOriginalMainElementList(),
+      this.draw.getFooter().getElementList()
+    ];
+    const controlElementList = [];
+    for (const elementList of data2) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.controlId) {
+          controlElementList.push(element);
+        }
+      }
+    }
+    return zipElementList(controlElementList);
+  }
 }
 class CheckboxParticle {
   constructor(draw) {
@@ -11620,15 +11671,6 @@ class DateParticle {
       startTop
     });
   }
-  render(ctx, element, x, y) {
-    ctx.save();
-    ctx.font = element.style;
-    if (element.color) {
-      ctx.fillStyle = element.color;
-    }
-    ctx.fillText(element.value, x, y);
-    ctx.restore();
-  }
 }
 var BlockType;
 (function(BlockType2) {
@@ -13490,6 +13532,23 @@ class Draw {
       } else if (element.type === ElementType.TABLE) {
         const tdPaddingWidth = tdPadding[1] + tdPadding[3];
         const tdPaddingHeight = tdPadding[0] + tdPadding[2];
+        if (element.pagingId) {
+          let tableIndex = i + 1;
+          let combineCount = 0;
+          while (tableIndex < elementList.length) {
+            const nextElement2 = elementList[tableIndex];
+            if (nextElement2.pagingId === element.pagingId) {
+              element.trList.push(...nextElement2.trList);
+              tableIndex++;
+              combineCount++;
+            } else {
+              break;
+            }
+          }
+          if (combineCount) {
+            elementList.splice(i + 1, combineCount);
+          }
+        }
         this.tableParticle.computeRowColInfo(element);
         const trList = element.trList;
         for (let t = 0; t < trList.length; t++) {
@@ -13591,18 +13650,38 @@ class Draw {
           if (deleteCount) {
             const cloneTrList = trList2.splice(deleteStart, deleteCount);
             const cloneTrHeight = cloneTrList.reduce((pre, cur) => pre + cur.height, 0);
+            const pagingId = getUUID();
+            element.pagingId = pagingId;
             element.height -= cloneTrHeight;
             metrics.height -= cloneTrHeight;
             metrics.boundingBoxDescent -= cloneTrHeight;
             const cloneElement = deepClone(element);
+            cloneElement.pagingId = pagingId;
             cloneElement.trList = cloneTrList;
             cloneElement.id = getUUID();
             this.spliceElementList(elementList, i + 1, 0, cloneElement);
             const positionContext = this.position.getPositionContext();
-            if (positionContext.isTable && positionContext.trIndex === deleteStart) {
-              positionContext.index += 1;
-              positionContext.trIndex = 0;
-              this.position.setPositionContext(positionContext);
+            if (positionContext.isTable) {
+              let newPositionContextIndex = -1;
+              let newPositionContextTrIndex = -1;
+              let tableIndex = i;
+              while (tableIndex < elementList.length) {
+                const curElement = elementList[tableIndex];
+                if (curElement.pagingId !== pagingId)
+                  break;
+                const trIndex = curElement.trList.findIndex((r) => r.id === positionContext.trId);
+                if (~trIndex) {
+                  newPositionContextIndex = tableIndex;
+                  newPositionContextTrIndex = trIndex;
+                  break;
+                }
+                tableIndex++;
+              }
+              if (~newPositionContextIndex) {
+                positionContext.index = newPositionContextIndex;
+                positionContext.trIndex = newPositionContextTrIndex;
+                this.position.setPositionContext(positionContext);
+              }
             }
           }
         }
@@ -13845,8 +13924,14 @@ class Draw {
           this._drawRichText(ctx);
           this.hyperlinkParticle.render(ctx, element, x, y + offsetY);
         } else if (element.type === ElementType.DATE) {
-          this._drawRichText(ctx);
-          this.dateParticle.render(ctx, element, x, y + offsetY);
+          const nextElement = curRow.elementList[j + 1];
+          if (!preElement || preElement.dateId !== element.dateId) {
+            this._drawRichText(ctx);
+          }
+          this.textParticle.record(ctx, element, x, y + offsetY);
+          if (!nextElement || nextElement.dateId !== element.dateId) {
+            this._drawRichText(ctx);
+          }
         } else if (element.type === ElementType.SUPERSCRIPT) {
           this._drawRichText(ctx);
           this.superscriptParticle.render(ctx, element, x, y + offsetY);
@@ -14302,6 +14387,7 @@ class Command {
     __publicField(this, "getLocale");
     __publicField(this, "getGroupIds");
     __publicField(this, "getControlValue");
+    __publicField(this, "getControlList");
     __publicField(this, "getContainer");
     this.executeMode = adapt.mode.bind(adapt);
     this.executeCut = adapt.cut.bind(adapt);
@@ -14410,6 +14496,7 @@ class Command {
     this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
     this.executeSetControlHighlight = adapt.setControlHighlight.bind(adapt);
     this.getControlValue = adapt.getControlValue.bind(adapt);
+    this.getControlList = adapt.getControlList.bind(adapt);
   }
 }
 const defaultWatermarkOption = {
@@ -14599,6 +14686,10 @@ class CommandAdapt {
     this.historyManager.redo();
   }
   painter(options) {
+    if (!options.isDblclick && this.draw.getPainterStyle()) {
+      this.canvasEvent.clearPainterStyle();
+      return;
+    }
     const selection = this.range.getSelection();
     if (!selection)
       return;
@@ -14934,7 +15025,11 @@ class CommandAdapt {
     const selection = this.range.getSelectionElementList();
     if (selection == null ? void 0 : selection.length) {
       selection.forEach((el) => {
-        el.color = payload;
+        if (payload) {
+          el.color = payload;
+        } else {
+          delete el.color;
+        }
       });
       this.draw.render({
         isSetCursor: false,
@@ -14945,7 +15040,11 @@ class CommandAdapt {
       const elementList = this.draw.getElementList();
       const enterElement = elementList[endIndex];
       if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
-        enterElement.color = payload;
+        if (payload) {
+          enterElement.color = payload;
+        } else {
+          delete enterElement.color;
+        }
         this.draw.render({ curIndex: endIndex, isCompute: false });
       }
     }
@@ -14957,7 +15056,11 @@ class CommandAdapt {
     const selection = this.range.getSelectionElementList();
     if (selection == null ? void 0 : selection.length) {
       selection.forEach((el) => {
-        el.highlight = payload;
+        if (payload) {
+          el.highlight = payload;
+        } else {
+          delete el.highlight;
+        }
       });
       this.draw.render({
         isSetCursor: false,
@@ -14968,7 +15071,11 @@ class CommandAdapt {
       const elementList = this.draw.getElementList();
       const enterElement = elementList[endIndex];
       if ((enterElement == null ? void 0 : enterElement.value) === ZERO) {
-        enterElement.highlight = payload;
+        if (payload) {
+          enterElement.highlight = payload;
+        } else {
+          delete enterElement.highlight;
+        }
         this.draw.render({ curIndex: endIndex, isCompute: false });
       }
     }
@@ -16523,6 +16630,9 @@ class CommandAdapt {
   setControlHighlight(payload) {
     this.draw.getControl().setHighlightList(payload);
   }
+  getControlList() {
+    return this.draw.getControl().getList();
+  }
   getContainer() {
     return this.draw.getContainer();
   }