@hufe921/canvas-editor 0.9.15 → 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.15";
+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;
@@ -3928,8 +3934,8 @@ class CursorAgent {
   _compositionstart() {
     this.canvasEvent.compositionstart();
   }
-  _compositionend() {
-    this.canvasEvent.compositionend();
+  _compositionend(evt) {
+    this.canvasEvent.compositionend(evt);
   }
 }
 class Cursor {
@@ -3955,12 +3961,18 @@ class Cursor {
   getAgentDom() {
     return this.cursorAgent.getAgentCursorDom();
   }
-  drawCursor() {
-    const isReadonly = this.draw.isReadonly();
+  getAgentDomValue() {
+    return this.getAgentDom().value;
+  }
+  clearAgentDomValue() {
+    return this.getAgentDom().value = "";
+  }
+  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;
@@ -3977,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";
@@ -4399,6 +4419,8 @@ function isMod(evt) {
 }
 function keydown(evt, host) {
   var _a;
+  if (host.isComposing)
+    return;
   const draw = host.getDraw();
   const position = draw.getPosition();
   const cursorPosition = position.getCursorPosition();
@@ -4660,23 +4682,25 @@ function input(data2, host) {
     return;
   const position = draw.getPosition();
   const cursorPosition = position.getCursorPosition();
-  if (!data2 || !cursorPosition || host.isCompositing)
+  if (!data2 || !cursorPosition)
     return;
   const control = draw.getControl();
   if (control.isPartRangeInControlOutside()) {
     return;
   }
+  const isComposing = host.isComposing;
+  if (!isComposing) {
+    const cursor = draw.getCursor();
+    cursor.clearAgentDomValue();
+  } else {
+    removeComposingInput(host);
+  }
   const activeControl = control.getActiveControl();
   const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
   const text = data2.replaceAll(`
 `, ZERO);
-  const cursor = draw.getCursor();
-  const agentDom = cursor.getAgentDom();
-  agentDom.value = "";
-  const { index: index2 } = cursorPosition;
   const rangeManager = draw.getRange();
   const { startIndex, endIndex } = rangeManager.getRange();
-  const isCollapsed = startIndex === endIndex;
   const positionContext = position.getPositionContext();
   let restArg = {};
   if (positionContext.isTable) {
@@ -4698,26 +4722,46 @@ function input(data2, host) {
         }
       });
     }
+    if (isComposing) {
+      newElement.underline = true;
+    }
     return newElement;
   });
   let curIndex;
   if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
     curIndex = control.setValue(inputData);
   } else {
-    let start = 0;
-    if (isCollapsed) {
-      start = index2 + 1;
-    } else {
-      start = startIndex + 1;
-      elementList.splice(startIndex + 1, endIndex - startIndex);
+    const start = startIndex + 1;
+    if (startIndex !== endIndex) {
+      elementList.splice(start, endIndex - startIndex);
     }
     for (let i = 0; i < inputData.length; i++) {
       elementList.splice(start + i, 0, inputData[i]);
     }
-    curIndex = (isCollapsed ? index2 : startIndex) + inputData.length;
+    curIndex = startIndex + inputData.length;
   }
   rangeManager.setRange(curIndex, curIndex);
-  draw.render({ curIndex });
+  draw.render({
+    curIndex,
+    isSubmitHistory: !isComposing
+  });
+  if (isComposing) {
+    host.compositionInfo = {
+      elementList,
+      value: text,
+      startIndex: curIndex - inputData.length,
+      endIndex: curIndex
+    };
+  }
+}
+function removeComposingInput(host) {
+  if (!host.compositionInfo)
+    return;
+  const { elementList, startIndex, endIndex } = host.compositionInfo;
+  elementList.splice(startIndex + 1, endIndex - startIndex);
+  const rangeManager = host.getDraw().getRange();
+  rangeManager.setRange(startIndex, startIndex);
+  host.compositionInfo = null;
 }
 function cut(host) {
   const draw = host.getDraw();
@@ -4871,10 +4915,26 @@ var click = {
   threeClick
 };
 function compositionstart(host) {
-  host.isCompositing = true;
+  host.isComposing = true;
 }
-function compositionend(host) {
-  host.isCompositing = false;
+function compositionend(host, evt) {
+  host.isComposing = false;
+  removeComposingInput(host);
+  const draw = host.getDraw();
+  const cursor = draw.getCursor();
+  if (!evt.data) {
+    const agentText = cursor.getAgentDomValue();
+    if (agentText) {
+      input(agentText, host);
+    } else {
+      const rangeManager = draw.getRange();
+      const { endIndex: curIndex } = rangeManager.getRange();
+      draw.render({
+        curIndex
+      });
+    }
+  }
+  cursor.clearAgentDomValue();
 }
 var composition = {
   compositionstart,
@@ -4908,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
@@ -4916,7 +4981,8 @@ var drag = {
 class CanvasEvent {
   constructor(draw) {
     __publicField(this, "isAllowSelection");
-    __publicField(this, "isCompositing");
+    __publicField(this, "isComposing");
+    __publicField(this, "compositionInfo");
     __publicField(this, "isAllowDrag");
     __publicField(this, "isAllowDrop");
     __publicField(this, "cacheRange");
@@ -4934,7 +5000,8 @@ class CanvasEvent {
     this.range = this.draw.getRange();
     this.position = this.draw.getPosition();
     this.isAllowSelection = false;
-    this.isCompositing = false;
+    this.isComposing = false;
+    this.compositionInfo = null;
     this.isAllowDrag = false;
     this.isAllowDrop = false;
     this.cacheRange = null;
@@ -5033,8 +5100,8 @@ class CanvasEvent {
   compositionstart() {
     composition.compositionstart(this);
   }
-  compositionend() {
-    composition.compositionend(this);
+  compositionend(evt) {
+    composition.compositionend(this, evt);
   }
   drop(evt) {
     drop(evt, this);
@@ -5056,6 +5123,7 @@ class GlobalEvent {
     __publicField(this, "hyperlinkParticle");
     __publicField(this, "control");
     __publicField(this, "dateParticle");
+    __publicField(this, "dprMediaQueryList");
     __publicField(this, "recoverEffect", (evt) => {
       if (!this.cursor)
         return;
@@ -5109,6 +5177,9 @@ class GlobalEvent {
         (_a = this.cursor) == null ? void 0 : _a.drawCursor();
       }
     });
+    __publicField(this, "_handleDprChange", () => {
+      this.draw.setPageDevicePixel();
+    });
     this.draw = draw;
     this.canvas = draw.getPage();
     this.options = draw.getOptions();
@@ -5120,6 +5191,7 @@ class GlobalEvent {
     this.hyperlinkParticle = draw.getHyperlinkParticle();
     this.dateParticle = draw.getDateParticle();
     this.control = draw.getControl();
+    this.dprMediaQueryList = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
   }
   register() {
     this.cursor = this.draw.getCursor();
@@ -5132,6 +5204,7 @@ class GlobalEvent {
     document.addEventListener("mouseup", this.setCanvasEventAbility);
     document.addEventListener("wheel", this.setPageScale, { passive: false });
     document.addEventListener("visibilitychange", this._handleVisibilityChange);
+    this.dprMediaQueryList.addEventListener("change", this._handleDprChange);
   }
   removeEvent() {
     window.removeEventListener("blur", this.recoverEffect);
@@ -5140,6 +5213,7 @@ class GlobalEvent {
     document.removeEventListener("mouseup", this.setCanvasEventAbility);
     document.removeEventListener("wheel", this.setPageScale);
     document.removeEventListener("visibilitychange", this._handleVisibilityChange);
+    this.dprMediaQueryList.removeEventListener("change", this._handleDprChange);
   }
 }
 class HistoryManager {
@@ -6100,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();
@@ -6153,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) {
@@ -8937,16 +9008,20 @@ class Draw {
     });
   }
   setPageScale(payload) {
+    const dpr = window.devicePixelRatio;
     this.options.scale = payload;
     const width = this.getWidth();
     const height = this.getHeight();
     this.container.style.width = `${width}px`;
-    this.pageList.forEach((p) => {
+    this.pageList.forEach((p, i) => {
       p.width = width;
       p.height = height;
       p.style.width = `${width}px`;
       p.style.height = `${height}px`;
       p.style.marginBottom = `${this.getPageGap()}px`;
+      p.width = width * dpr;
+      p.height = height * dpr;
+      this.ctxList[i].scale(dpr, dpr);
     });
     this.render({
       isSubmitHistory: false,
@@ -8956,6 +9031,20 @@ class Draw {
       this.listener.pageScaleChange(payload);
     }
   }
+  setPageDevicePixel() {
+    const dpr = window.devicePixelRatio;
+    const width = this.getWidth();
+    const height = this.getHeight();
+    this.pageList.forEach((p, i) => {
+      p.width = width * dpr;
+      p.height = height * dpr;
+      this.ctxList[i].scale(dpr, dpr);
+    });
+    this.render({
+      isSubmitHistory: false,
+      isSetCursor: false
+    });
+  }
   setPaperSize(width, height) {
     this.options.width = width;
     this.options.height = height;
@@ -11420,7 +11509,7 @@ const controlMenus = [
 const globalMenus = [
   {
     i18nPath: "contextmenu.global.cut",
-    shortCut: "Ctrl + X",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + X`,
     when: (payload) => {
       return !payload.isReadonly;
     },
@@ -11430,7 +11519,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.copy",
-    shortCut: "Ctrl + C",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + C`,
     when: (payload) => {
       return payload.editorHasSelection;
     },
@@ -11440,7 +11529,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.paste",
-    shortCut: "Ctrl + V",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + V`,
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus;
     },
@@ -11450,7 +11539,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.selectAll",
-    shortCut: "Ctrl + A",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + A`,
     when: (payload) => {
       return payload.editorTextFocus;
     },
@@ -12047,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",
@@ -12085,7 +12175,8 @@ class Editor {
       header: headerOptions,
       watermark: waterMarkOptions,
       control: controlOptions,
-      checkbox: checkboxOptions
+      checkbox: checkboxOptions,
+      cursor: cursorOptions
     });
     formatElementList(elementList, {
       editorOptions