@hufe921/canvas-editor 0.9.16 → 0.9.17

package/README.md

@@ -26,17 +26,16 @@ new Editor(document.querySelector(".canvas-editor"), [
   ])
 ```
 
-## snapshot
+## next features
 
-![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.8.png)
+1. improve performance
+2. page header and footer
+3. control rules
+4. table paging
 
-## next features
+## snapshot
 
-1. support mac os
-2. drag text (optimization)
-3. page header and footer
-4. control rules
-5. table paging
+![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.8.png)
 
 ## install
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.16";
+const version = "0.9.17";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -131,6 +131,12 @@ function mergeObject(source, target) {
   return target;
 }
 const CURSOR_AGENT_HEIGHT = 12;
+const defaultCursorOption = {
+  width: 1,
+  color: "#000000",
+  dragWidth: 2,
+  dragColor: "#0000FF"
+};
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
 var ElementType;
@@ -3961,12 +3967,12 @@ class Cursor {
   clearAgentDomValue() {
     return this.getAgentDom().value = "";
   }
-  drawCursor() {
-    const isReadonly = this.draw.isReadonly();
+  drawCursor(payload) {
     const cursorPosition = this.position.getCursorPosition();
     if (!cursorPosition)
       return;
-    const { scale } = this.options;
+    const { scale, cursor } = this.options;
+    const { color, width, isBlink = true } = __spreadValues(__spreadValues({}, cursor), payload);
     const height = this.draw.getHeight();
     const pageGap = this.draw.getPageGap();
     const { metrics, coordinate: { leftTop, rightTop }, ascent, pageNo } = cursorPosition;
@@ -3983,13 +3989,21 @@ class Cursor {
     const cursorLeft = rightTop[0];
     agentCursorDom.style.left = `${cursorLeft}px`;
     agentCursorDom.style.top = `${cursorTop + cursorHeight - CURSOR_AGENT_HEIGHT * scale}px`;
+    const isReadonly = this.draw.isReadonly();
+    this.cursorDom.style.width = `${width}px`;
+    this.cursorDom.style.backgroundColor = color;
     this.cursorDom.style.left = `${cursorLeft}px`;
     this.cursorDom.style.top = `${cursorTop}px`;
     this.cursorDom.style.display = isReadonly ? "none" : "block";
     this.cursorDom.style.height = `${cursorHeight}px`;
-    setTimeout(() => {
-      this.cursorDom.classList.add(`${EDITOR_PREFIX}-cursor--animation`);
-    }, 200);
+    const animationClassName = `${EDITOR_PREFIX}-cursor--animation`;
+    if (isBlink) {
+      setTimeout(() => {
+        this.cursorDom.classList.add(animationClassName);
+      }, 200);
+    } else {
+      this.cursorDom.classList.remove(animationClassName);
+    }
   }
   recoveryCursor() {
     this.cursorDom.style.display = "none";
@@ -4674,7 +4688,8 @@ function input(data2, host) {
   if (control.isPartRangeInControlOutside()) {
     return;
   }
-  if (!host.isComposing) {
+  const isComposing = host.isComposing;
+  if (!isComposing) {
     const cursor = draw.getCursor();
     cursor.clearAgentDomValue();
   } else {
@@ -4707,7 +4722,7 @@ function input(data2, host) {
         }
       });
     }
-    if (host.isComposing) {
+    if (isComposing) {
       newElement.underline = true;
     }
     return newElement;
@@ -4727,9 +4742,10 @@ function input(data2, host) {
   }
   rangeManager.setRange(curIndex, curIndex);
   draw.render({
-    curIndex
+    curIndex,
+    isSubmitHistory: !isComposing
   });
-  if (host.isComposing) {
+  if (isComposing) {
     host.compositionInfo = {
       elementList,
       value: text,
@@ -4952,7 +4968,12 @@ function dragover(evt, host) {
     position.setCursorPosition(positionList[curIndex]);
   }
   const cursor = draw.getCursor();
-  cursor.drawCursor();
+  const { cursor: { dragColor, dragWidth } } = draw.getOptions();
+  cursor.drawCursor({
+    width: dragWidth,
+    color: dragColor,
+    isBlink: false
+  });
 }
 var drag = {
   dragover
@@ -6153,46 +6174,12 @@ class PageNumber {
 class ScrollObserver {
   constructor(draw) {
     __publicField(this, "draw");
-    __publicField(this, "options");
-    __publicField(this, "pageContainer");
-    __publicField(this, "pageHeight");
     __publicField(this, "_observer", debounce(() => {
-      const rect = this.pageContainer.getBoundingClientRect();
-      const top = Math.abs(rect.top);
-      const bottom = top + window.innerHeight;
-      const pageList = this.draw.getPageList();
-      const visiblePageNoList = [];
-      let intersectionPageNo = 0;
-      let intersectionMaxHeight = 0;
-      for (let i = 0; i < pageList.length; i++) {
-        const curTop = i * this.pageHeight;
-        const curBottom = (i + 1) * this.pageHeight;
-        if (curTop > bottom)
-          break;
-        if (curBottom < top)
-          continue;
-        let intersectionHeight = 0;
-        if (curTop < top && curBottom < bottom) {
-          intersectionHeight = curBottom - top;
-        } else if (curTop > top && curBottom > bottom) {
-          intersectionHeight = bottom - curTop;
-        } else {
-          intersectionHeight = rect.height;
-        }
-        if (intersectionHeight > intersectionMaxHeight) {
-          intersectionMaxHeight = intersectionHeight;
-          intersectionPageNo = i;
-        }
-        visiblePageNoList.push(i);
-      }
+      const { intersectionPageNo, visiblePageNoList } = this.getPageVisibleInfo();
       this.draw.setIntersectionPageNo(intersectionPageNo);
       this.draw.setVisiblePageNoList(visiblePageNoList);
     }, 150));
     this.draw = draw;
-    this.options = draw.getOptions();
-    this.pageContainer = draw.getPageContainer();
-    const { height, pageGap } = this.options;
-    this.pageHeight = height + pageGap;
     setTimeout(() => {
       if (!window.scrollY) {
         this._observer();
@@ -6206,6 +6193,37 @@ class ScrollObserver {
   removeEvent() {
     document.removeEventListener("scroll", this._observer);
   }
+  getElementVisibleInfo(element) {
+    const rect = element.getBoundingClientRect();
+    const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
+    const visibleHeight = Math.min(rect.bottom, viewHeight) - Math.max(rect.top, 0);
+    return {
+      intersectionHeight: visibleHeight > 0 ? visibleHeight : 0
+    };
+  }
+  getPageVisibleInfo() {
+    const pageList = this.draw.getPageList();
+    const visiblePageNoList = [];
+    let intersectionPageNo = 0;
+    let intersectionMaxHeight = 0;
+    for (let i = 0; i < pageList.length; i++) {
+      const curPage = pageList[i];
+      const { intersectionHeight } = this.getElementVisibleInfo(curPage);
+      if (intersectionMaxHeight && !intersectionHeight)
+        break;
+      if (intersectionHeight) {
+        visiblePageNoList.push(i);
+      }
+      if (intersectionHeight > intersectionMaxHeight) {
+        intersectionMaxHeight = intersectionHeight;
+        intersectionPageNo = i;
+      }
+    }
+    return {
+      intersectionPageNo,
+      visiblePageNoList
+    };
+  }
 }
 var MoveDirection;
 (function(MoveDirection2) {
@@ -12118,6 +12136,7 @@ class Editor {
     const waterMarkOptions = __spreadValues(__spreadValues({}, defaultWatermarkOption), options.watermark);
     const controlOptions = __spreadValues(__spreadValues({}, defaultControlOption), options.control);
     const checkboxOptions = __spreadValues(__spreadValues({}, defaultCheckboxOption), options.checkbox);
+    const cursorOptions = __spreadValues(__spreadValues({}, defaultCursorOption), options.cursor);
     const editorOptions = __spreadProps(__spreadValues({
       mode: EditorMode.EDIT,
       defaultType: "TEXT",
@@ -12156,7 +12175,8 @@ class Editor {
       header: headerOptions,
       watermark: waterMarkOptions,
       control: controlOptions,
-      checkbox: checkboxOptions
+      checkbox: checkboxOptions,
+      cursor: cursorOptions
     });
     formatElementList(elementList, {
       editorOptions