@hufe921/canvas-editor 0.9.81 → 0.9.83

package/CHANGELOG.md

@@ -1,3 +1,36 @@
+## [0.9.83](https://github.com/Hufe921/canvas-editor/compare/v0.9.82...v0.9.83) (2024-06-21)
+
+
+### Bug Fixes
+
+* executeSetControlProperties api invalid in table #653 ([fdcf639](https://github.com/Hufe921/canvas-editor/commit/fdcf6397e1ce62ef1ed18a526a0642c3f120df3b)), closes [#653](https://github.com/Hufe921/canvas-editor/issues/653)
+
+
+### Features
+
+* add clear format attributes ([e21533a](https://github.com/Hufe921/canvas-editor/commit/e21533a3d1cfeecde562aaa6c52ee306e5063a01))
+* add conceptId attribute to table td #654 ([959a062](https://github.com/Hufe921/canvas-editor/commit/959a062f830042b78af498e2d6cbc4e5f82fa3d4)), closes [#654](https://github.com/Hufe921/canvas-editor/issues/654)
+* add mouse event listener #603 ([a2978bd](https://github.com/Hufe921/canvas-editor/commit/a2978bd1f507e9417b995bbb0b7ff756dbe5d2c4)), closes [#603](https://github.com/Hufe921/canvas-editor/issues/603)
+* copy table structure and data #516 ([76c20a6](https://github.com/Hufe921/canvas-editor/commit/76c20a6b44914396ae7dd69a7c97db1b179937c2)), closes [#516](https://github.com/Hufe921/canvas-editor/issues/516)
+
+
+
+## [0.9.82](https://github.com/Hufe921/canvas-editor/compare/v0.9.81...v0.9.82) (2024-06-14)
+
+
+### Bug Fixes
+
+* table cell merge boundary error #645 ([f7da332](https://github.com/Hufe921/canvas-editor/commit/f7da33235419aadb2aea024d3cba4444d6d719fd)), closes [#645](https://github.com/Hufe921/canvas-editor/issues/645)
+
+
+### Features
+
+* add executeUpdateElementById api #648 ([5c896bf](https://github.com/Hufe921/canvas-editor/commit/5c896bf95814c6ef2956221763e7df560b3fe98a)), closes [#648](https://github.com/Hufe921/canvas-editor/issues/648)
+* add override internal drop function api #643 ([ec7e076](https://github.com/Hufe921/canvas-editor/commit/ec7e0760c113711fdafc13374ea521605308f867)), closes [#643](https://github.com/Hufe921/canvas-editor/issues/643)
+* move control position by dragging #456 ([cdb0788](https://github.com/Hufe921/canvas-editor/commit/cdb0788dfcecadb70e680eb40a31551e0e096401)), closes [#456](https://github.com/Hufe921/canvas-editor/issues/456)
+
+
+
 ## [0.9.81](https://github.com/Hufe921/canvas-editor/compare/v0.9.80...v0.9.81) (2024-06-07)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.81";
+const version = "0.9.83";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -471,6 +471,7 @@ const EDITOR_ELEMENT_ZIP_ATTR = [
   "externalId"
 ];
 const TABLE_TD_ZIP_ATTR = [
+  "conceptId",
   "verticalAlign",
   "backgroundColor",
   "borderTypes",
@@ -4779,9 +4780,7 @@ function getElementListByHTML(htmlText, options) {
               }
               tr.tdList.push(td);
             });
-            if (tr.tdList.length) {
-              element.trList.push(tr);
-            }
+            element.trList.push(tr);
           });
           if (element.trList.length) {
             const tdCount = element.trList[0].tdList.reduce((pre, cur) => pre + cur.colspan, 0);
@@ -5191,9 +5190,10 @@ class CursorAgent {
     this.canvasEvent.keydown(evt);
   }
   _input(evt) {
-    if (!evt.data)
+    const data2 = evt.data;
+    if (!data2)
       return;
-    this.canvasEvent.input(evt.data);
+    this.canvasEvent.input(data2);
   }
   _paste(evt) {
     const isReadonly = this.draw.isReadonly();
@@ -5799,14 +5799,20 @@ function mouseup(evt, host) {
         return;
       }
     }
-    const editorOptions = draw.getOptions();
+    const control = draw.getControl();
     const elementList = draw.getElementList();
+    const isOmitControlAttr = !isContainControl || !!elementList[range.startIndex].controlId || !control.getIsElementListContainFullControl(dragElementList);
+    const editorOptions = draw.getOptions();
     const replaceElementList = dragElementList.map((el) => {
       if (!el.type || el.type === ElementType.TEXT) {
         const newElement = {
           value: el.value
         };
-        EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+        const copyAttr = EDITOR_ELEMENT_STYLE_ATTR;
+        if (!isOmitControlAttr) {
+          copyAttr.push(...CONTROL_CONTEXT_ATTR);
+        }
+        copyAttr.forEach((attr) => {
           const value = el[attr];
           if (value !== void 0) {
             newElement[attr] = value;
@@ -5814,7 +5820,10 @@ function mouseup(evt, host) {
         });
         return newElement;
       } else {
-        const newElement = omitObject(deepClone(el), CONTROL_CONTEXT_ATTR);
+        let newElement = deepClone(el);
+        if (isOmitControlAttr) {
+          newElement = omitObject(newElement, CONTROL_CONTEXT_ATTR);
+        }
         formatElementList([newElement], {
           isHandleFirstElement: false,
           editorOptions
@@ -5830,7 +5839,6 @@ function mouseup(evt, host) {
     const replaceLength = replaceElementList.length;
     let rangeStart = range.startIndex;
     let rangeEnd = rangeStart + replaceLength;
-    const control = draw.getControl();
     const activeControl = control.getActiveControl();
     if (activeControl && cacheElementList[rangeStart].controlComponent !== ControlComponent.POSTFIX) {
       rangeEnd = activeControl.setValue(replaceElementList);
@@ -6972,13 +6980,57 @@ function copy(host) {
     return;
   }
   const rangeManager = draw.getRange();
-  const copyElementList = rangeManager.getIsCollapsed() ? rangeManager.getRangeRowElementList() : rangeManager.getSelectionElementList();
+  let copyElementList = null;
+  const range = rangeManager.getRange();
+  if (range.isCrossRowCol) {
+    const tableElement = rangeManager.getRangeTableElement();
+    if (!tableElement)
+      return;
+    const rowCol = draw.getTableParticle().getRangeRowCol();
+    if (!rowCol)
+      return;
+    const copyTableElement = {
+      type: ElementType.TABLE,
+      value: "",
+      colgroup: [],
+      trList: []
+    };
+    const firstRow = rowCol[0];
+    const colStartIndex = firstRow[0].colIndex;
+    const lastCol = firstRow[firstRow.length - 1];
+    const colEndIndex = lastCol.colIndex + lastCol.colspan - 1;
+    for (let c = colStartIndex; c <= colEndIndex; c++) {
+      copyTableElement.colgroup.push(tableElement.colgroup[c]);
+    }
+    for (let r = 0; r < rowCol.length; r++) {
+      const row = rowCol[r];
+      const tr = tableElement.trList[row[0].rowIndex];
+      const coptTr = {
+        tdList: [],
+        height: tr.height,
+        minHeight: tr.minHeight
+      };
+      for (let c = 0; c < row.length; c++) {
+        coptTr.tdList.push(row[c]);
+      }
+      copyTableElement.trList.push(coptTr);
+    }
+    copyElementList = zipElementList([copyTableElement]);
+  } else {
+    copyElementList = rangeManager.getIsCollapsed() ? rangeManager.getRangeRowElementList() : rangeManager.getSelectionElementList();
+  }
   if (!(copyElementList == null ? void 0 : copyElementList.length))
     return;
   writeElementList(copyElementList, draw.getOptions());
 }
 function drop(evt, host) {
   var _a, _b;
+  const draw = host.getDraw();
+  const { drop: drop2 } = draw.getOverride();
+  if (drop2) {
+    drop2(evt);
+    return;
+  }
   evt.preventDefault();
   const data2 = (_a = evt.dataTransfer) == null ? void 0 : _a.getData("text");
   if (data2) {
@@ -7812,6 +7864,7 @@ class Position {
                 x,
                 y,
                 td,
+                pageNo: curPageNo,
                 tablePosition: positionList[j],
                 isTable: true,
                 elementList: td.value,
@@ -7872,6 +7925,7 @@ class Position {
           }
         }
         return {
+          isDirectHit: true,
           hitLineStartIndex: hitLineStartIndex2,
           index: curPositionIndex2,
           isControl: !!element.controlId
@@ -8275,6 +8329,13 @@ class RangeManager {
     var _a;
     return ((_a = this.getRangeParagraphInfo()) == null ? void 0 : _a.elementList) || null;
   }
+  getRangeTableElement() {
+    const positionContext = this.position.getPositionContext();
+    if (!positionContext.isTable)
+      return null;
+    const originalElementList = this.draw.getOriginalElementList();
+    return originalElementList[positionContext.index];
+  }
   getIsSelectAll() {
     const elementList = this.draw.getElementList();
     const { startIndex, endIndex } = this.range;
@@ -9641,12 +9702,10 @@ class TableParticle {
     const { colgroup, trList } = element;
     if (!colgroup || !trList)
       return;
-    let x = 0;
-    let y = 0;
+    let preX = 0;
     for (let t = 0; t < trList.length; t++) {
       const tr = trList[t];
       const isLastTr = trList.length - 1 === t;
-      let rowMinHeight = 0;
       for (let d = 0; d < tr.tdList.length; d++) {
         const td = tr.tdList[d];
         let colIndex = 0;
@@ -9661,7 +9720,7 @@ class TableParticle {
               for (let preC = 0; preC < c; preC++) {
                 preColWidth += colgroup[preC].width;
               }
-              x = preColWidth;
+              preX = preColWidth;
               break;
             }
           }
@@ -9680,9 +9739,6 @@ class TableParticle {
           const curTr = trList[row + t] || trList[t];
           height += curTr.height;
         }
-        if (rowMinHeight === 0 || rowMinHeight > height) {
-          rowMinHeight = height;
-        }
         const isLastRowTd = tr.tdList.length - 1 === d;
         let isLastColTd = isLastTr;
         if (!isLastColTd) {
@@ -9695,16 +9751,26 @@ class TableParticle {
         td.isLastRowTd = isLastRowTd;
         td.isLastColTd = isLastColTd;
         td.isLastTd = isLastTd;
-        td.x = x;
-        td.y = y;
+        td.x = preX;
+        let preY = 0;
+        for (let preR = 0; preR < t; preR++) {
+          const preTdList = trList[preR].tdList;
+          for (let preD = 0; preD < preTdList.length; preD++) {
+            const td2 = preTdList[preD];
+            if (colIndex >= td2.colIndex && colIndex < td2.colIndex + td2.colspan) {
+              preY += td2.height;
+              break;
+            }
+          }
+        }
+        td.y = preY;
         td.width = width;
         td.height = height;
         td.rowIndex = t;
         td.colIndex = colIndex;
-        x += width;
+        preX += width;
         if (isLastRowTd && !isLastTd) {
-          x = 0;
-          y += rowMinHeight;
+          preX = 0;
         }
       }
     }
@@ -11697,6 +11763,23 @@ class Control {
     }
     return false;
   }
+  getIsElementListContainFullControl(elementList) {
+    if (!elementList.some((element) => element.controlId))
+      return false;
+    let prefixCount = 0;
+    let postfixCount = 0;
+    for (let e = 0; e < elementList.length; e++) {
+      const element = elementList[e];
+      if (element.controlComponent === ControlComponent.PREFIX) {
+        prefixCount++;
+      } else if (element.controlComponent === ControlComponent.POSTFIX) {
+        postfixCount++;
+      }
+    }
+    if (!prefixCount || !postfixCount)
+      return false;
+    return prefixCount === postfixCount;
+  }
   getIsDisabledControl() {
     var _a, _b;
     return !!((_b = (_a = this.activeControl) == null ? void 0 : _a.getElement().control) == null ? void 0 : _b.disabled);
@@ -12217,23 +12300,27 @@ class Control {
     }
   }
   setPropertiesByConceptId(payload) {
-    var _a;
     const isReadonly = this.draw.isReadonly();
     if (isReadonly)
       return;
     const { conceptId, properties } = payload;
     let isExistUpdate = false;
-    const pageComponentData = {
-      header: this.draw.getHeaderElementList(),
-      main: this.draw.getOriginalMainElementList(),
-      footer: this.draw.getFooterElementList()
-    };
-    for (const key in pageComponentData) {
-      const elementList = pageComponentData[key];
+    function setProperties(elementList) {
+      var _a;
       let i = 0;
       while (i < elementList.length) {
         const element = elementList[i];
         i++;
+        if (element.type === ElementType.TABLE) {
+          const trList = element.trList;
+          for (let r = 0; r < trList.length; r++) {
+            const tr = trList[r];
+            for (let d = 0; d < tr.tdList.length; d++) {
+              const td = tr.tdList[d];
+              setProperties(td.value);
+            }
+          }
+        }
         if (((_a = element == null ? void 0 : element.control) == null ? void 0 : _a.conceptId) !== conceptId)
           continue;
         isExistUpdate = true;
@@ -12250,6 +12337,15 @@ class Control {
         i = newEndIndex;
       }
     }
+    const pageComponentData = {
+      header: this.draw.getHeaderElementList(),
+      main: this.draw.getOriginalMainElementList(),
+      footer: this.draw.getFooterElementList()
+    };
+    for (const key in pageComponentData) {
+      const elementList = pageComponentData[key];
+      setProperties(elementList);
+    }
     if (!isExistUpdate)
       return;
     for (const key in pageComponentData) {
@@ -14338,6 +14434,34 @@ class Group {
     this.clearFillInfo();
   }
 }
+class MouseObserver {
+  constructor(draw) {
+    __publicField(this, "draw");
+    __publicField(this, "eventBus");
+    __publicField(this, "pageContainer");
+    this.draw = draw;
+    this.eventBus = this.draw.getEventBus();
+    this.pageContainer = this.draw.getPageContainer();
+    this.pageContainer.addEventListener("mousemove", this._mousemove.bind(this));
+    this.pageContainer.addEventListener("mouseenter", this._mouseenter.bind(this));
+    this.pageContainer.addEventListener("mouseleave", this._mouseleave.bind(this));
+  }
+  _mousemove(evt) {
+    if (!this.eventBus.isSubscribe("mousemove"))
+      return;
+    this.eventBus.emit("mousemove", evt);
+  }
+  _mouseenter(evt) {
+    if (!this.eventBus.isSubscribe("mouseenter"))
+      return;
+    this.eventBus.emit("mouseenter", evt);
+  }
+  _mouseleave(evt) {
+    if (!this.eventBus.isSubscribe("mouseleave"))
+      return;
+    this.eventBus.emit("mouseleave", evt);
+  }
+}
 class Draw {
   constructor(rootContainer, options, data2, listener, eventBus, override) {
     __publicField(this, "container");
@@ -14456,6 +14580,7 @@ class Draw {
     this.scrollObserver = new ScrollObserver(this);
     this.selectionObserver = new SelectionObserver(this);
     this.imageObserver = new ImageObserver();
+    new MouseObserver(this);
     this.canvasEvent = new CanvasEvent(this);
     this.cursor = new Cursor(this, this.canvasEvent);
     this.canvasEvent.register();
@@ -16164,6 +16289,7 @@ class Command {
     __publicField(this, "executeSetPaperMargin");
     __publicField(this, "executeInsertElementList");
     __publicField(this, "executeAppendElementList");
+    __publicField(this, "executeUpdateElementById");
     __publicField(this, "executeSetValue");
     __publicField(this, "executeRemoveControl");
     __publicField(this, "executeSetLocale");
@@ -16202,6 +16328,7 @@ class Command {
     __publicField(this, "getControlList");
     __publicField(this, "getContainer");
     __publicField(this, "getTitleValue");
+    __publicField(this, "getPositionContextByEvent");
     this.executeMode = adapt.mode.bind(adapt);
     this.executeCut = adapt.cut.bind(adapt);
     this.executeCopy = adapt.copy.bind(adapt);
@@ -16276,6 +16403,7 @@ class Command {
     this.executeSetPaperMargin = adapt.setPaperMargin.bind(adapt);
     this.executeInsertElementList = adapt.insertElementList.bind(adapt);
     this.executeAppendElementList = adapt.appendElementList.bind(adapt);
+    this.executeUpdateElementById = adapt.updateElementById.bind(adapt);
     this.executeSetValue = adapt.setValue.bind(adapt);
     this.executeRemoveControl = adapt.removeControl.bind(adapt);
     this.executeSetLocale = adapt.setLocale.bind(adapt);
@@ -16307,6 +16435,7 @@ class Command {
     this.getGroupIds = adapt.getGroupIds.bind(adapt);
     this.getContainer = adapt.getContainer.bind(adapt);
     this.getTitleValue = adapt.getTitleValue.bind(adapt);
+    this.getPositionContextByEvent = adapt.getPositionContextByEvent.bind(adapt);
     this.executeSetControlValue = adapt.setControlValue.bind(adapt);
     this.executeSetControlExtension = adapt.setControlExtension.bind(adapt);
     this.executeSetControlProperties = adapt.setControlProperties.bind(adapt);
@@ -16540,6 +16669,7 @@ class CommandAdapt {
     __publicField(this, "workerManager");
     __publicField(this, "searchManager");
     __publicField(this, "i18n");
+    __publicField(this, "zone");
     this.draw = draw;
     this.range = draw.getRange();
     this.position = draw.getPosition();
@@ -16551,6 +16681,7 @@ class CommandAdapt {
     this.workerManager = draw.getWorkerManager();
     this.searchManager = draw.getSearch();
     this.i18n = draw.getI18n();
+    this.zone = draw.getZone();
   }
   mode(payload) {
     this.draw.setMode(payload);
@@ -16704,13 +16835,9 @@ class CommandAdapt {
     if (!changeElementList.length)
       return;
     changeElementList.forEach((el) => {
-      delete el.size;
-      delete el.font;
-      delete el.color;
-      delete el.bold;
-      delete el.italic;
-      delete el.underline;
-      delete el.strikeout;
+      EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+        delete el[attr];
+      });
     });
     this.draw.render(renderOption);
   }
@@ -18334,8 +18461,12 @@ class CommandAdapt {
     const selectionText = this.range.toString();
     const selectionElementList = zipElementList(this.range.getSelectionElementList() || []);
     const elementList = this.draw.getElementList();
-    const startElement = pickElementAttr(elementList[isCollapsed ? startIndex : startIndex + 1]);
-    const endElement = pickElementAttr(elementList[endIndex]);
+    const startElement = pickElementAttr(elementList[isCollapsed ? startIndex : startIndex + 1], {
+      extraPickAttrs: ["id"]
+    });
+    const endElement = pickElementAttr(elementList[endIndex], {
+      extraPickAttrs: ["id"]
+    });
     const positionList = this.position.getPositionList();
     const startPageNo = positionList[startIndex].pageNo;
     const endPageNo = positionList[endIndex].pageNo;
@@ -18471,6 +18602,37 @@ class CommandAdapt {
       return;
     this.draw.appendElementList(deepClone(elementList), options);
   }
+  updateElementById(payload) {
+    function getElementIndexById(elementList) {
+      for (let e = 0; e < elementList.length; e++) {
+        const element = elementList[e];
+        if (element.id === payload.id) {
+          return e;
+        }
+      }
+      return -1;
+    }
+    const getElementListFnList = [
+      this.draw.getOriginalMainElementList,
+      this.draw.getHeaderElementList,
+      this.draw.getFooterElementList
+    ];
+    for (const getElementList of getElementListFnList) {
+      const elementList = getElementList.call(this.draw);
+      const elementIndex = getElementIndexById(elementList);
+      if (~elementIndex) {
+        elementList[elementIndex] = __spreadValues(__spreadValues({}, elementList[elementIndex]), payload.properties);
+        formatElementList([elementList[elementIndex]], {
+          isHandleFirstElement: false,
+          editorOptions: this.options
+        });
+        this.draw.render({
+          isSetCursor: false
+        });
+        break;
+      }
+    }
+  }
   setValue(payload) {
     this.draw.setValue(payload);
   }
@@ -18769,6 +18931,50 @@ class CommandAdapt {
     }
     return result;
   }
+  getPositionContextByEvent(evt) {
+    var _a, _b, _c;
+    const pageIndex = (_a = evt.target) == null ? void 0 : _a.dataset.index;
+    if (!pageIndex)
+      return null;
+    const pageNo = Number(pageIndex);
+    const positionContext = this.position.getPositionByXY({
+      x: evt.offsetX,
+      y: evt.offsetY,
+      pageNo
+    });
+    const { isDirectHit, isTable, index: index2, trIndex, tdIndex, tdValueIndex, zone: zone2 } = positionContext;
+    if (!isDirectHit || zone2 && zone2 !== this.zone.getZone())
+      return null;
+    let element = null;
+    const elementList = this.draw.getOriginalElementList();
+    let position = null;
+    const positionList = this.position.getOriginalPositionList();
+    if (isTable) {
+      const td = (_b = elementList[index2].trList) == null ? void 0 : _b[trIndex].tdList[tdIndex];
+      element = (td == null ? void 0 : td.value[tdValueIndex]) || null;
+      position = ((_c = td == null ? void 0 : td.positionList) == null ? void 0 : _c[tdValueIndex]) || null;
+    } else {
+      element = elementList[index2] || null;
+      position = positionList[index2] || null;
+    }
+    let rangeRect = null;
+    if (position) {
+      const { pageNo: pageNo2, coordinate: { leftTop, rightTop }, lineHeight } = position;
+      const height = this.draw.getOriginalHeight();
+      const pageGap = this.draw.getOriginalPageGap();
+      rangeRect = {
+        x: leftTop[0],
+        y: leftTop[1] + pageNo2 * (height + pageGap),
+        width: rightTop[0] - leftTop[0],
+        height: lineHeight
+      };
+    }
+    return {
+      pageNo,
+      element,
+      rangeRect
+    };
+  }
   insertTitle(payload) {
     var _a;
     const isReadonly = this.draw.isReadonly();
@@ -19861,6 +20067,7 @@ class Override {
   constructor() {
     __publicField(this, "paste");
     __publicField(this, "copy");
+    __publicField(this, "drop");
   }
 }
 class Editor {