@hufe921/canvas-editor 0.9.41 → 0.9.43

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [0.9.43](https://github.com/Hufe921/canvas-editor/compare/v0.9.42...v0.9.43) (2023-08-04)
+
+
+### Bug Fixes
+
+* cursor navigation across pages #229 ([a96a77a](https://github.com/Hufe921/canvas-editor/commit/a96a77a237a62f0881a2b106b040f29c840fff58)), closes [#229](https://github.com/Hufe921/canvas-editor/issues/229)
+
+
+### Features
+
+* add form mode #221 ([94247c3](https://github.com/Hufe921/canvas-editor/commit/94247c324be8bd3688f4098ab9520fc563d20ded)), closes [#221](https://github.com/Hufe921/canvas-editor/issues/221)
+* cursor following page scrolling #229 ([3db28cc](https://github.com/Hufe921/canvas-editor/commit/3db28cc04f84af502901da51a14e3f63c8a36964)), closes [#229](https://github.com/Hufe921/canvas-editor/issues/229)
+
+
+
+## [0.9.42](https://github.com/Hufe921/canvas-editor/compare/v0.9.41...v0.9.42) (2023-07-31)
+
+
+### Bug Fixes
+
+* contentChange call error during initialization #224 ([1b25afb](https://github.com/Hufe921/canvas-editor/commit/1b25afb664b6feff8a0e96dda53a0a3b252663c7)), closes [#224](https://github.com/Hufe921/canvas-editor/issues/224)
+* control value style not affected by prefix #227 ([cf5dd35](https://github.com/Hufe921/canvas-editor/commit/cf5dd356869ac272dd8d3a1948ff5f4c6536b23d)), closes [#227](https://github.com/Hufe921/canvas-editor/issues/227)
+* limit word break element type ([73014dc](https://github.com/Hufe921/canvas-editor/commit/73014dc87be5360ab8f09e211a12b06dfcbb77e2))
+* set header and footer data error #224 ([b22f0b4](https://github.com/Hufe921/canvas-editor/commit/b22f0b45418b76ba008a2f6200bf8210f3c6f0dd)), closes [#224](https://github.com/Hufe921/canvas-editor/issues/224)
+
+
+### Features
+
+* add SetHTML api ([52f7500](https://github.com/Hufe921/canvas-editor/commit/52f7500ae3e27b1746af423dcbf1faffc9134948))
+
+
+
 ## [0.9.41](https://github.com/Hufe921/canvas-editor/compare/v0.9.40...v0.9.41) (2023-07-27)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.41";
+const version = "0.9.43";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -228,6 +228,15 @@ function cloneProperty(properties, sourceElement, targetElement) {
     }
   }
 }
+function omitObject(object, keys) {
+  const cloneObject = deepClone(object);
+  for (const key in object) {
+    if (keys.includes(key)) {
+      delete cloneObject[key];
+    }
+  }
+  return cloneObject;
+}
 function convertStringToBase64(input2) {
   const encoder = new TextEncoder();
   const data2 = encoder.encode(input2);
@@ -235,6 +244,18 @@ function convertStringToBase64(input2) {
   const base64 = window.btoa(charArray.join(""));
   return base64;
 }
+function findScrollContainer(element) {
+  let parent = element.parentElement;
+  while (parent) {
+    const style = window.getComputedStyle(parent);
+    const overflowY = style.getPropertyValue("overflow-y");
+    if (parent.scrollHeight > parent.clientHeight && (overflowY === "auto" || overflowY === "scroll")) {
+      return parent;
+    }
+    parent = parent.parentElement;
+  }
+  return document.documentElement;
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const defaultCursorOption = {
   width: 1,
@@ -244,6 +265,13 @@ const defaultCursorOption = {
 };
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
+var MoveDirection;
+(function(MoveDirection2) {
+  MoveDirection2["UP"] = "top";
+  MoveDirection2["DOWN"] = "down";
+  MoveDirection2["LEFT"] = "left";
+  MoveDirection2["RIGHT"] = "right";
+})(MoveDirection || (MoveDirection = {}));
 var ElementType;
 (function(ElementType2) {
   ElementType2["TEXT"] = "text";
@@ -4610,6 +4638,40 @@ class Cursor {
     this.cursorDom.style.display = "none";
     this._clearBlinkTimeout();
   }
+  moveCursorToVisible(payload) {
+    const { cursorPosition, direction } = payload;
+    if (!cursorPosition || !direction)
+      return;
+    const { pageNo, coordinate: { leftTop, leftBottom } } = cursorPosition;
+    const prePageY = pageNo * (this.draw.getHeight() + this.draw.getPageGap()) + this.container.getBoundingClientRect().top;
+    const isUp = direction === MoveDirection.UP;
+    const x = leftBottom[0];
+    const y = isUp ? leftTop[1] + prePageY : leftBottom[1] + prePageY;
+    const scrollContainer = findScrollContainer(this.container);
+    const rect = {
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0
+    };
+    if (scrollContainer === document.documentElement) {
+      rect.right = window.innerWidth;
+      rect.bottom = window.innerHeight;
+    } else {
+      const { left, right, top, bottom } = scrollContainer.getBoundingClientRect();
+      rect.left = left;
+      rect.right = right;
+      rect.top = top;
+      rect.bottom = bottom;
+    }
+    const { maskMargin } = this.options;
+    rect.top += maskMargin[0];
+    rect.bottom -= maskMargin[2];
+    if (!(x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom)) {
+      const { scrollLeft, scrollTop } = scrollContainer;
+      isUp ? scrollContainer.scroll(scrollLeft, scrollTop - (rect.top - y)) : scrollContainer.scroll(scrollLeft, scrollTop + y - rect.bottom);
+    }
+  }
 }
 var MouseEventButton;
 (function(MouseEventButton2) {
@@ -4916,6 +4978,8 @@ function mouseup(evt, host) {
   var _a, _b, _c;
   if (host.isAllowDrop) {
     const draw = host.getDraw();
+    if (draw.isReadonly())
+      return;
     const position = draw.getPosition();
     const positionList = position.getPositionList();
     const rangeManager = draw.getRange();
@@ -5266,7 +5330,6 @@ function keydown(evt, host) {
     if (isReadonly)
       return;
     let anchorPosition = cursorPosition;
-    const isUp = evt.key === KeyMap.Up;
     if (evt.shiftKey) {
       if (startIndex === cursorPosition.index) {
         anchorPosition = positionList[endIndex];
@@ -5274,62 +5337,83 @@ function keydown(evt, host) {
         anchorPosition = positionList[startIndex];
       }
     }
-    const { rowNo, index: index22, pageNo, coordinate: { leftTop, rightTop } } = anchorPosition;
-    if (isUp && rowNo !== 0 || !isUp && rowNo !== draw.getRowCount()) {
-      const probablePosition = isUp ? positionList.slice(0, index22).filter((p) => p.rowNo === rowNo - 1 && pageNo === p.pageNo) : positionList.slice(index22, positionList.length - 1).filter((p) => p.rowNo === rowNo + 1 && pageNo === p.pageNo);
-      let maxIndex = 0;
-      let maxDistance = 0;
-      for (let p = 0; p < probablePosition.length; p++) {
-        const position2 = probablePosition[p];
-        if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
-          const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
-          if (curDistance > maxDistance) {
-            maxIndex = position2.index;
-            maxDistance = curDistance;
-            break;
-          }
-        } else if (position2.coordinate.leftTop[0] <= leftTop[0] && position2.coordinate.rightTop[0] >= leftTop[0]) {
-          const curDistance = position2.coordinate.rightTop[0] - leftTop[0];
-          if (curDistance > maxDistance) {
-            maxIndex = position2.index;
-            maxDistance = curDistance;
-            break;
-          }
+    const { index: index22, rowNo, rowIndex, coordinate: { leftTop: [curLeftX], rightTop: [curRightX] } } = anchorPosition;
+    const isUp = evt.key === KeyMap.Up;
+    if (isUp && rowIndex === 0 || !isUp && rowIndex === draw.getRowCount() - 1) {
+      return;
+    }
+    const probablePosition = [];
+    if (isUp) {
+      let p = index22 - 1;
+      while (p > 0) {
+        const position2 = positionList[p];
+        p--;
+        if (position2.rowNo === rowNo)
+          continue;
+        if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
+          break;
         }
-        if (p === probablePosition.length - 1 && maxIndex === 0) {
-          maxIndex = position2.index;
+        probablePosition.unshift(position2);
+      }
+    } else {
+      let p = index22 + 1;
+      while (p < positionList.length) {
+        const position2 = positionList[p];
+        p++;
+        if (position2.rowNo === rowNo)
+          continue;
+        if (probablePosition[0] && probablePosition[0].rowNo !== position2.rowNo) {
+          break;
         }
+        probablePosition.push(position2);
       }
-      const curIndex = maxIndex;
-      let anchorStartIndex = curIndex;
-      let anchorEndIndex = curIndex;
-      if (evt.shiftKey) {
-        if (startIndex !== endIndex) {
-          if (startIndex === cursorPosition.index) {
-            anchorStartIndex = startIndex;
-          } else {
-            anchorEndIndex = endIndex;
-          }
+    }
+    let nextIndex = 0;
+    for (let p = 0; p < probablePosition.length; p++) {
+      const nextPosition = probablePosition[p];
+      const { coordinate: { leftTop: [nextLeftX], rightTop: [nextRightX] } } = nextPosition;
+      if (p === probablePosition.length - 1) {
+        nextIndex = nextPosition.index;
+      }
+      if (curRightX <= nextLeftX || curLeftX >= nextRightX)
+        continue;
+      nextIndex = nextPosition.index;
+      break;
+    }
+    if (!nextIndex)
+      return;
+    let anchorStartIndex = nextIndex;
+    let anchorEndIndex = nextIndex;
+    if (evt.shiftKey) {
+      if (startIndex !== endIndex) {
+        if (startIndex === cursorPosition.index) {
+          anchorStartIndex = startIndex;
         } else {
-          if (isUp) {
-            anchorEndIndex = endIndex;
-          } else {
-            anchorStartIndex = startIndex;
-          }
+          anchorEndIndex = endIndex;
+        }
+      } else {
+        if (isUp) {
+          anchorEndIndex = endIndex;
+        } else {
+          anchorStartIndex = startIndex;
         }
       }
-      if (anchorStartIndex > anchorEndIndex) {
-        [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
-      }
-      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
-      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
-      draw.render({
-        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
-        isSetCursor: isCollapsed2,
-        isSubmitHistory: false,
-        isCompute: false
-      });
     }
+    if (anchorStartIndex > anchorEndIndex) {
+      [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
+    }
+    rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+    const isCollapsed2 = anchorStartIndex === anchorEndIndex;
+    draw.render({
+      curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+      isSetCursor: isCollapsed2,
+      isSubmitHistory: false,
+      isCompute: false
+    });
+    draw.getCursor().moveCursorToVisible({
+      cursorPosition: positionList[isUp ? anchorStartIndex : anchorEndIndex],
+      direction: isUp ? MoveDirection.UP : MoveDirection.DOWN
+    });
   } else if (isMod(evt) && evt.key === KeyMap.Z) {
     if (isReadonly)
       return;
@@ -6047,6 +6131,7 @@ var EditorMode;
   EditorMode2["EDIT"] = "edit";
   EditorMode2["CLEAN"] = "clean";
   EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
 })(EditorMode || (EditorMode = {}));
 var EditorZone;
 (function(EditorZone2) {
@@ -6410,11 +6495,10 @@ class Position {
     };
   }
   adjustPositionContext(payload) {
-    const isReadonly = this.draw.isReadonly();
     const positionResult = this.getPositionByXY(payload);
     if (!~positionResult.index)
       return null;
-    if (positionResult.isControl && !isReadonly) {
+    if (positionResult.isControl && this.draw.getMode() !== EditorMode.READONLY) {
       const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex } = positionResult;
       const control = this.draw.getControl();
       const { newIndex } = control.moveCursor({
@@ -7225,7 +7309,7 @@ class TextParticle {
     let i = curIndex;
     while (i < elementList.length) {
       const element = elementList[i];
-      if (!LETTER_REG.test(element.value)) {
+      if (element.type && element.type !== ElementType.TEXT || !LETTER_REG.test(element.value)) {
         endElement = element;
         break;
       }
@@ -7400,13 +7484,6 @@ class ScrollObserver {
     };
   }
 }
-var MoveDirection;
-(function(MoveDirection2) {
-  MoveDirection2["UP"] = "top";
-  MoveDirection2["DOWN"] = "down";
-  MoveDirection2["LEFT"] = "left";
-  MoveDirection2["RIGHT"] = "right";
-})(MoveDirection || (MoveDirection = {}));
 class SelectionObserver {
   constructor(draw) {
     __publicField(this, "step", 5);
@@ -8096,7 +8173,7 @@ class HyperlinkParticle {
   }
 }
 class Header {
-  constructor(draw) {
+  constructor(draw, data2) {
     __publicField(this, "draw");
     __publicField(this, "position");
     __publicField(this, "options");
@@ -8106,7 +8183,7 @@ class Header {
     this.draw = draw;
     this.position = draw.getPosition();
     this.options = draw.getOptions();
-    this.elementList = draw.getHeaderElementList();
+    this.elementList = data2 || [];
     this.rowList = [];
     this.positionList = [];
   }
@@ -8433,11 +8510,12 @@ class SelectControl {
     this.control.removePlaceholder(startIndex);
     const elementList = this.control.getElementList();
     const startElement = elementList[startIndex];
+    const anchorElement = startElement.controlComponent === ControlComponent.PREFIX ? omitObject(startElement, EDITOR_ELEMENT_STYLE_ATTR) : startElement;
     const start = startIndex + 1;
     const data2 = splitText(valueSet.value);
     const draw = this.control.getDraw();
     for (let i = 0; i < data2.length; i++) {
-      const newElement = __spreadProps(__spreadValues({}, startElement), {
+      const newElement = __spreadProps(__spreadValues({}, anchorElement), {
         value: data2[i],
         controlComponent: ControlComponent.VALUE
       });
@@ -8554,9 +8632,10 @@ class TextControl {
       this.control.removePlaceholder(startIndex);
     }
     const startElement = elementList[startIndex];
+    const anchorElement = startElement.controlComponent === ControlComponent.PREFIX ? omitObject(startElement, EDITOR_ELEMENT_STYLE_ATTR) : startElement;
     const start = range.startIndex + 1;
     for (let i = 0; i < data2.length; i++) {
-      const newElement = __spreadProps(__spreadValues(__spreadValues({}, startElement), data2[i]), {
+      const newElement = __spreadProps(__spreadValues(__spreadValues({}, anchorElement), data2[i]), {
         controlComponent: ControlComponent.VALUE
       });
       formatElementContext(elementList, [newElement], startIndex);
@@ -8672,6 +8751,18 @@ class Control {
     const element = elementList[startIndex];
     return element.controlComponent === ControlComponent.POSTFIX;
   }
+  isRangeWithinControl() {
+    const { startIndex, endIndex } = this.getRange();
+    if (!~startIndex && !~endIndex)
+      return false;
+    const elementList = this.getElementList();
+    const startElement = elementList[startIndex];
+    const endElement = elementList[endIndex];
+    if ((startElement.type === ElementType.CONTROL || endElement.type === ElementType.CONTROL) && endElement.controlComponent !== ControlComponent.POSTFIX && startElement.controlId === endElement.controlId) {
+      return true;
+    }
+    return false;
+  }
   getContainer() {
     return this.draw.getContainer();
   }
@@ -10333,7 +10424,7 @@ class Zone {
   }
 }
 class Footer {
-  constructor(draw) {
+  constructor(draw, data2) {
     __publicField(this, "draw");
     __publicField(this, "position");
     __publicField(this, "options");
@@ -10343,7 +10434,7 @@ class Footer {
     this.draw = draw;
     this.position = draw.getPosition();
     this.options = draw.getOptions();
-    this.elementList = draw.getFooterElementList();
+    this.elementList = data2 || [];
     this.rowList = [];
     this.positionList = [];
   }
@@ -10607,9 +10698,7 @@ class Draw {
     __publicField(this, "options");
     __publicField(this, "position");
     __publicField(this, "zone");
-    __publicField(this, "headerElementList");
     __publicField(this, "elementList");
-    __publicField(this, "footerElementList");
     __publicField(this, "listener");
     __publicField(this, "eventBus");
     __publicField(this, "i18n");
@@ -10663,9 +10752,7 @@ class Draw {
     this.pagePixelRatio = null;
     this.mode = options.mode;
     this.options = options;
-    this.headerElementList = data2.header || [];
     this.elementList = data2.main;
-    this.footerElementList = data2.footer || [];
     this.listener = listener;
     this.eventBus = eventBus;
     this._formatContainer();
@@ -10691,8 +10778,8 @@ class Draw {
     this.pageNumber = new PageNumber(this);
     this.waterMark = new Watermark(this);
     this.placeholder = new Placeholder(this);
-    this.header = new Header(this);
-    this.footer = new Footer(this);
+    this.header = new Header(this, data2.header);
+    this.footer = new Footer(this, data2.footer);
     this.hyperlinkParticle = new HyperlinkParticle(this);
     this.dateParticle = new DateParticle(this);
     this.separatorParticle = new SeparatorParticle();
@@ -10719,7 +10806,10 @@ class Draw {
     this.visiblePageNoList = [];
     this.intersectionPageNo = 0;
     this.lazyRenderIntersectionObserver = null;
-    this.render({ isSetCursor: false });
+    this.render({
+      isInit: true,
+      isSetCursor: false
+    });
   }
   getMode() {
     return this.mode;
@@ -10728,7 +10818,14 @@ class Draw {
     this.mode = payload;
   }
   isReadonly() {
-    return this.mode === EditorMode.READONLY;
+    switch (this.mode) {
+      case EditorMode.READONLY:
+        return true;
+      case EditorMode.FORM:
+        return !this.control.isRangeWithinControl();
+      default:
+        return false;
+    }
   }
   getOriginalWidth() {
     const { paperDirection, width, height } = this.options;
@@ -10884,7 +10981,7 @@ class Draw {
     return this.range;
   }
   getHeaderElementList() {
-    return this.headerElementList;
+    return this.header.getElementList();
   }
   getTableElementList(sourceElementList) {
     const positionContext = this.position.getPositionContext();
@@ -10903,10 +11000,10 @@ class Draw {
   getOriginalElementList() {
     const zoneManager = this.getZone();
     if (zoneManager.isHeaderActive()) {
-      return this.header.getElementList();
+      return this.getHeaderElementList();
     }
     if (zoneManager.isFooterActive()) {
-      return this.footer.getElementList();
+      return this.getFooterElementList();
     }
     return this.elementList;
   }
@@ -10914,7 +11011,7 @@ class Draw {
     return this.elementList;
   }
   getFooterElementList() {
-    return this.footerElementList;
+    return this.footer.getElementList();
   }
   insertElementList(payload) {
     if (!payload.length)
@@ -11217,9 +11314,9 @@ class Draw {
       mainElementList = this.pageRowList[pageNo].flatMap((row) => row.elementList);
     }
     const data2 = {
-      header: zipElementList(this.headerElementList),
+      header: zipElementList(this.getHeaderElementList()),
       main: zipElementList(mainElementList),
-      footer: zipElementList(this.footerElementList)
+      footer: zipElementList(this.getFooterElementList())
     };
     return {
       version,
@@ -11863,7 +11960,7 @@ class Draw {
   render(payload) {
     var _a;
     const { header, footer } = this.options;
-    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true } = payload || {};
+    const { isSubmitHistory = true, isSetCursor = true, isCompute = true, isLazy = true, isInit = false } = payload || {};
     let { curIndex } = payload || {};
     const innerWidth = this.getInnerWidth();
     const isPagingMode = this.getIsPagingMode();
@@ -11953,7 +12050,7 @@ class Draw {
       if (this.eventBus.isSubscribe("pageSizeChange")) {
         this.eventBus.emit("pageSizeChange", this.pageRowList.length);
       }
-      if (isSubmitHistory) {
+      if (isSubmitHistory && !isInit) {
         if (this.listener.contentChange) {
           this.listener.contentChange();
         }
@@ -12044,6 +12141,7 @@ class Command {
     __publicField(this, "executeSetLocale");
     __publicField(this, "executeLocationCatalog");
     __publicField(this, "executeWordTool");
+    __publicField(this, "executeSetHTML");
     __publicField(this, "getCatalog");
     __publicField(this, "getImage");
     __publicField(this, "getValue");
@@ -12125,6 +12223,7 @@ class Command {
     this.executeSetLocale = adapt.setLocale.bind(adapt);
     this.executeLocationCatalog = adapt.locationCatalog.bind(adapt);
     this.executeWordTool = adapt.wordTool.bind(adapt);
+    this.executeSetHTML = adapt.setHTML.bind(adapt);
     this.getImage = adapt.getImage.bind(adapt);
     this.getValue = adapt.getValue.bind(adapt);
     this.getHTML = adapt.getHTML.bind(adapt);
@@ -13861,6 +13960,18 @@ class CommandAdapt {
       });
     }
   }
+  setHTML(payload) {
+    const { header, main, footer } = payload;
+    const innerWidth = this.draw.getOriginalInnerWidth();
+    const getElementList = (htmlText) => htmlText !== void 0 ? getElementListByHTML(htmlText, {
+      innerWidth
+    }) : void 0;
+    this.setValue({
+      header: getElementList(header),
+      main: getElementList(main),
+      footer: getElementList(footer)
+    });
+  }
 }
 class Listener {
   constructor() {
@@ -14784,7 +14895,8 @@ class Editor {
       inactiveAlpha: 0.6,
       historyMaxRecordCount: 100,
       wordBreak: WordBreak.BREAK_WORD,
-      printPixelRatio: 3
+      printPixelRatio: 3,
+      maskMargin: [0, 0, 0, 0]
     }, options), {
       header: headerOptions,
       footer: footerOptions,