@hufe921/canvas-editor 0.9.14 → 0.9.16

package/LICENSE

@@ -1,21 +1,21 @@
-The MIT License (MIT)
-
-Copyright (c) 2021-present, hufe
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+The MIT License (MIT)
+
+Copyright (c) 2021-present, hufe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.

package/README.md

@@ -1,55 +1,55 @@
-<h1 align="center">canvas-editor</h1>
-
-<p align="center"> a rich text editor by canvas/svg</p>
-
-## tips
-
-1. [docs](https://hufe.club/canvas-editor-docs/)
-2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
-3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
-
-## usage
-
-```bash
-npm i @hufe921/canvas-editor --save
-```
-```html
-<div class="canvas-editor"></div>
-```
-```javascript
-import Editor from "@hufe921/canvas-editor"
-
-new Editor(document.querySelector(".canvas-editor"), [
-    {
-      value: "Hello World"
-    }
-  ])
-```
-
-## snapshot
-
-![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.8.png)
-
-## next features
-
-1. drag text (optimization)
-2. page header and footer
-3. control rules
-4. table paging
-5. docs
-
-## install
-
-`yarn`
-
-## dev
-
-`yarn run dev`
-
-## build
-
-#### app
-`yarn run build`
-
-#### lib
+<h1 align="center">canvas-editor</h1>
+
+<p align="center"> a rich text editor by canvas/svg</p>
+
+## tips
+
+1. [docs](https://hufe.club/canvas-editor-docs/)
+2. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
+3. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
+
+## usage
+
+```bash
+npm i @hufe921/canvas-editor --save
+```
+```html
+<div class="canvas-editor"></div>
+```
+```javascript
+import Editor from "@hufe921/canvas-editor"
+
+new Editor(document.querySelector(".canvas-editor"), [
+    {
+      value: "Hello World"
+    }
+  ])
+```
+
+## snapshot
+
+![image](https://github.com/Hufe921/canvas-editor/blob/main/src/assets/snapshots/main_v0.9.8.png)
+
+## next features
+
+1. support mac os
+2. drag text (optimization)
+3. page header and footer
+4. control rules
+5. table paging
+
+## install
+
+`yarn`
+
+## dev
+
+`yarn run dev`
+
+## build
+
+#### app
+`yarn run build`
+
+#### lib
 `yarn run lib`

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.14";
+const version = "0.9.16";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -109,6 +109,27 @@ function nClickEvent(n, dom, fn) {
   };
   dom.addEventListener("click", handler);
 }
+function isObject(type) {
+  return Object.prototype.toString.call(type) === "[object Object]";
+}
+function isArray(type) {
+  return Array.isArray(type);
+}
+function mergeObject(source, target) {
+  if (isObject(source) && isObject(target)) {
+    const objectTarget = target;
+    for (const [key, val] of Object.entries(source)) {
+      if (!objectTarget[key]) {
+        objectTarget[key] = val;
+      } else {
+        objectTarget[key] = mergeObject(val, objectTarget[key]);
+      }
+    }
+  } else if (isArray(source) && isArray(target)) {
+    target.push(...source);
+  }
+  return target;
+}
 const CURSOR_AGENT_HEIGHT = 12;
 const EDITOR_COMPONENT = "editor-component";
 const EDITOR_PREFIX = "ce";
@@ -3907,8 +3928,8 @@ class CursorAgent {
   _compositionstart() {
     this.canvasEvent.compositionstart();
   }
-  _compositionend() {
-    this.canvasEvent.compositionend();
+  _compositionend(evt) {
+    this.canvasEvent.compositionend(evt);
   }
 }
 class Cursor {
@@ -3934,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();
@@ -3986,6 +4013,7 @@ var KeyMap;
   KeyMap2["Down"] = "ArrowDown";
   KeyMap2["ESC"] = "Escape";
   KeyMap2["TAB"] = "Tab";
+  KeyMap2["META"] = "Meta";
   KeyMap2["LEFT_BRACKET"] = "[";
   KeyMap2["RIGHT_BRACKET"] = "]";
   KeyMap2["COMMA"] = ",";
@@ -4371,8 +4399,14 @@ function mousemove(evt, host) {
     isComputeRowList: false
   });
 }
+const isApple = typeof navigator !== "undefined" && /Mac OS X/.test(navigator.userAgent);
+function isMod(evt) {
+  return isApple ? evt.metaKey : evt.ctrlKey;
+}
 function keydown(evt, host) {
   var _a;
+  if (host.isComposing)
+    return;
   const draw = host.getDraw();
   const position = draw.getPosition();
   const cursorPosition = position.getCursorPosition();
@@ -4588,26 +4622,26 @@ function keydown(evt, host) {
         isComputeRowList: false
       });
     }
-  } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
+  } else if (isMod(evt) && evt.key === KeyMap.Z) {
     if (isReadonly)
       return;
     historyManager.undo();
     evt.preventDefault();
-  } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
+  } else if (isMod(evt) && evt.key === KeyMap.Y) {
     if (isReadonly)
       return;
     historyManager.redo();
     evt.preventDefault();
-  } else if (evt.ctrlKey && evt.key === KeyMap.C) {
+  } else if (isMod(evt) && evt.key === KeyMap.C) {
     host.copy();
     evt.preventDefault();
-  } else if (evt.ctrlKey && evt.key === KeyMap.X) {
+  } else if (isMod(evt) && evt.key === KeyMap.X) {
     host.cut();
     evt.preventDefault();
-  } else if (evt.ctrlKey && evt.key === KeyMap.A) {
+  } else if (isMod(evt) && evt.key === KeyMap.A) {
     host.selectAll();
     evt.preventDefault();
-  } else if (evt.ctrlKey && evt.key === KeyMap.S) {
+  } else if (isMod(evt) && evt.key === KeyMap.S) {
     if (isReadonly)
       return;
     const listener = draw.getListener();
@@ -4634,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) {
@@ -4672,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();
@@ -4845,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,
@@ -4890,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");
@@ -4908,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;
@@ -5007,8 +5079,8 @@ class CanvasEvent {
   compositionstart() {
     composition.compositionstart(this);
   }
-  compositionend() {
-    composition.compositionend(this);
+  compositionend(evt) {
+    composition.compositionend(this, evt);
   }
   drop(evt) {
     drop(evt, this);
@@ -5030,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;
@@ -5083,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();
@@ -5094,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();
@@ -5106,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);
@@ -5114,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 {
@@ -8540,7 +8619,8 @@ class I18n {
     __publicField(this, "currentLocale", "zhCN");
   }
   registerLangMap(locale, lang) {
-    this.langMap.set(locale, lang);
+    const sourceLang = this.langMap.get(locale);
+    this.langMap.set(locale, mergeObject(sourceLang || zhCN, lang));
   }
   setLocale(locale) {
     this.currentLocale = locale;
@@ -8910,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,
@@ -8929,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;
@@ -9320,14 +9418,21 @@ class Draw {
         } else {
           this.textParticle.record(ctx, element, x, y + offsetY);
         }
+        const preElement = curRow.elementList[j - 1];
         if (element.underline) {
           this.underline.recordFillInfo(ctx, x, y + curRow.height, metrics.width, 0, element.color);
+        } else if (preElement && preElement.underline) {
+          this.underline.render(ctx);
         }
         if (element.strikeout) {
           this.strikeout.recordFillInfo(ctx, x, y + curRow.height / 2, metrics.width);
+        } else if (preElement && preElement.strikeout) {
+          this.strikeout.render(ctx);
         }
         if (element.highlight) {
           this.highlight.recordFillInfo(ctx, x, y, metrics.width, curRow.height, element.highlight);
+        } else if (preElement && preElement.highlight) {
+          this.highlight.render(ctx);
         }
         const { startIndex: startIndex2, endIndex } = this.range.getRange();
         if (startIndex2 !== endIndex && startIndex2 <= index2 && index2 <= endIndex) {
@@ -11386,7 +11491,7 @@ const controlMenus = [
 const globalMenus = [
   {
     i18nPath: "contextmenu.global.cut",
-    shortCut: "Ctrl + X",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + X`,
     when: (payload) => {
       return !payload.isReadonly;
     },
@@ -11396,7 +11501,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.copy",
-    shortCut: "Ctrl + C",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + C`,
     when: (payload) => {
       return payload.editorHasSelection;
     },
@@ -11406,7 +11511,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.paste",
-    shortCut: "Ctrl + V",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + V`,
     when: (payload) => {
       return !payload.isReadonly && payload.editorTextFocus;
     },
@@ -11416,7 +11521,7 @@ const globalMenus = [
   },
   {
     i18nPath: "contextmenu.global.selectAll",
-    shortCut: "Ctrl + A",
+    shortCut: `${isApple ? "\u2318" : "Ctrl"} + A`,
     when: (payload) => {
       return payload.editorTextFocus;
     },
@@ -11870,50 +11975,50 @@ const richtextKeys = [
   },
   {
     key: KeyMap.LEFT_BRACKET,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeSizeAdd();
     }
   },
   {
     key: KeyMap.RIGHT_BRACKET,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeSizeMinus();
     }
   },
   {
     key: KeyMap.B,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeBold();
     }
   },
   {
     key: KeyMap.I,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeItalic();
     }
   },
   {
     key: KeyMap.U,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeUnderline();
     }
   },
   {
-    key: KeyMap.RIGHT_ANGLE_BRACKET,
-    ctrl: true,
+    key: isApple ? KeyMap.COMMA : KeyMap.RIGHT_ANGLE_BRACKET,
+    mod: true,
     shift: true,
     callback: (command) => {
       command.executeSuperscript();
     }
   },
   {
-    key: KeyMap.LEFT_ANGLE_BRACKET,
-    ctrl: true,
+    key: isApple ? KeyMap.PERIOD : KeyMap.LEFT_ANGLE_BRACKET,
+    mod: true,
     shift: true,
     callback: (command) => {
       command.executeSubscript();
@@ -11921,28 +12026,28 @@ const richtextKeys = [
   },
   {
     key: KeyMap.L,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeLeft();
     }
   },
   {
     key: KeyMap.E,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeCenter();
     }
   },
   {
     key: KeyMap.R,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeRight();
     }
   },
   {
     key: KeyMap.J,
-    ctrl: true,
+    mod: true,
     callback: (command) => {
       command.executeAlignment();
     }
@@ -11995,7 +12100,7 @@ class Shortcut {
   _execute(evt, shortCutList) {
     for (let s = 0; s < shortCutList.length; s++) {
       const shortCut = shortCutList[s];
-      if (evt.ctrlKey === !!shortCut.ctrl && evt.shiftKey === !!shortCut.shift && evt.altKey === !!shortCut.alt && evt.key === shortCut.key) {
+      if ((shortCut.mod ? isMod(evt) === !!shortCut.mod : evt.ctrlKey === !!shortCut.ctrl && evt.metaKey === !!shortCut.meta) && evt.shiftKey === !!shortCut.shift && evt.altKey === !!shortCut.alt && evt.key === shortCut.key) {
         shortCut.callback(this.command);
         evt.preventDefault();
         break;