@hufe921/canvas-editor 0.9.42 → 0.9.43

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [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)
 
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.42";
+const version = "0.9.43";
 var MaxHeightRatio;
 (function(MaxHeightRatio2) {
   MaxHeightRatio2["HALF"] = "half";
@@ -244,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,
@@ -253,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";
@@ -4619,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) {
@@ -4925,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();
@@ -5275,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];
@@ -5283,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;
@@ -6056,6 +6131,7 @@ var EditorMode;
   EditorMode2["EDIT"] = "edit";
   EditorMode2["CLEAN"] = "clean";
   EditorMode2["READONLY"] = "readonly";
+  EditorMode2["FORM"] = "form";
 })(EditorMode || (EditorMode = {}));
 var EditorZone;
 (function(EditorZone2) {
@@ -6419,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({
@@ -7409,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);
@@ -8683,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();
   }
@@ -10738,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;
@@ -14808,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,