@hufe921/canvas-editor 0.9.15 → 0.9.16

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.16";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -3928,8 +3928,8 @@ class CursorAgent {
   _compositionstart() {
     this.canvasEvent.compositionstart();
   }
-  _compositionend() {
-    this.canvasEvent.compositionend();
+  _compositionend(evt) {
+    this.canvasEvent.compositionend(evt);
   }
 }
 class Cursor {
@@ -3955,6 +3955,12 @@ class Cursor {
   getAgentDom() {
     return this.cursorAgent.getAgentCursorDom();
   }
+  getAgentDomValue() {
+    return this.getAgentDom().value;
+  }
+  clearAgentDomValue() {
+    return this.getAgentDom().value = "";
+  }
   drawCursor() {
     const isReadonly = this.draw.isReadonly();
     const cursorPosition = this.position.getCursorPosition();
@@ -4399,6 +4405,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 +4668,24 @@ 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;
   }
+  if (!host.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 +4707,45 @@ function input(data2, host) {
         }
       });
     }
+    if (host.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
+  });
+  if (host.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 +4899,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,
@@ -4916,7 +4960,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 +4979,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 +5079,8 @@ class CanvasEvent {
   compositionstart() {
     composition.compositionstart(this);
   }
-  compositionend() {
-    composition.compositionend(this);
+  compositionend(evt) {
+    composition.compositionend(this, evt);
   }
   drop(evt) {
     drop(evt, this);
@@ -5056,6 +5102,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 +5156,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 +5170,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 +5183,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 +5192,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 {
@@ -8937,16 +8990,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 +9013,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 +11491,7 @@ const controlMenus = [
 const globalMenus = [
   {
     i18nPath: "contextmenu.global.cut",
-    shortCut: "Ctrl + X",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + X`,
     when: (payload) => {
       return !payload.isReadonly;
     },
@@ -11430,7 +11501,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.copy",
-    shortCut: "Ctrl + C",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + C`,
     when: (payload) => {
       return payload.editorHasSelection;
     },
@@ -11440,7 +11511,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.paste",
-    shortCut: "Ctrl + V",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + V`,
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus;
     },
@@ -11450,7 +11521,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.selectAll",
-    shortCut: "Ctrl + A",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + A`,
     when: (payload) => {
       return payload.editorTextFocus;
     },