@hufe921/canvas-editor 0.9.11 → 0.9.13

package/README.md

@@ -4,8 +4,9 @@
 
 ## tips
 
-1. The render layer by svg is under development, see [feature/svg](https://github.com/Hufe921/canvas-editor/tree/feature/svg)
-2. The export pdf feature is available now, see [feature/pdf](https://github.com/Hufe921/canvas-editor/tree/feature/pdf)
+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
 

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.11";
+const version = "0.9.13";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -187,6 +187,25 @@ const TEXTLIKE_ELEMENT_TYPE = [
   ElementType.CONTROL,
   ElementType.DATE
 ];
+var ControlType;
+(function(ControlType2) {
+  ControlType2["TEXT"] = "text";
+  ControlType2["SELECT"] = "select";
+  ControlType2["CHECKBOX"] = "checkbox";
+})(ControlType || (ControlType = {}));
+var ControlComponent;
+(function(ControlComponent2) {
+  ControlComponent2["PREFIX"] = "prefix";
+  ControlComponent2["POSTFIX"] = "postfix";
+  ControlComponent2["PLACEHOLDER"] = "placeholder";
+  ControlComponent2["VALUE"] = "value";
+  ControlComponent2["CHECKBOX"] = "checkbox";
+})(ControlComponent || (ControlComponent = {}));
+var ImageDisplay;
+(function(ImageDisplay2) {
+  ImageDisplay2["INLINE"] = "inline";
+  ImageDisplay2["BLOCK"] = "block";
+})(ImageDisplay || (ImageDisplay = {}));
 class ImageParticle {
   constructor(draw) {
     __publicField(this, "options");
@@ -3178,25 +3197,6 @@ const defaultControlOption = {
   prefix: "{",
   postfix: "}"
 };
-var ControlType;
-(function(ControlType2) {
-  ControlType2["TEXT"] = "text";
-  ControlType2["SELECT"] = "select";
-  ControlType2["CHECKBOX"] = "checkbox";
-})(ControlType || (ControlType = {}));
-var ControlComponent;
-(function(ControlComponent2) {
-  ControlComponent2["PREFIX"] = "prefix";
-  ControlComponent2["POSTFIX"] = "postfix";
-  ControlComponent2["PLACEHOLDER"] = "placeholder";
-  ControlComponent2["VALUE"] = "value";
-  ControlComponent2["CHECKBOX"] = "checkbox";
-})(ControlComponent || (ControlComponent = {}));
-var ImageDisplay;
-(function(ImageDisplay2) {
-  ImageDisplay2["INLINE"] = "inline";
-  ImageDisplay2["BLOCK"] = "block";
-})(ImageDisplay || (ImageDisplay = {}));
 function formatElementList(elementList, options) {
   var _a;
   const { isHandleFirstElement, editorOptions } = __spreadValues({
@@ -3557,16 +3557,30 @@ function writeClipboardItem(text, html) {
     return;
   const plainText = new Blob([text], { type: "text/plain" });
   const htmlText = new Blob([html], { type: "text/html" });
-  const item = new ClipboardItem({
-    [plainText.type]: plainText,
-    [htmlText.type]: htmlText
-  });
-  window.navigator.clipboard.write([item]);
+  if (window.ClipboardItem) {
+    const item = new ClipboardItem({
+      [plainText.type]: plainText,
+      [htmlText.type]: htmlText
+    });
+    window.navigator.clipboard.write([item]);
+  } else {
+    const fakeElement = document.createElement("div");
+    fakeElement.setAttribute("contenteditable", "true");
+    fakeElement.innerHTML = html;
+    document.body.append(fakeElement);
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(fakeElement);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(range);
+    document.execCommand("copy");
+    fakeElement.remove();
+  }
 }
 function writeElementList(elementList, options) {
   const clipboardDom = document.createElement("div");
   function buildDomFromElementList(payload) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     for (let e = 0; e < payload.length; e++) {
       const element = payload[e];
       if (element.type === ElementType.TABLE) {
@@ -3579,6 +3593,8 @@ function writeElementList(elementList, options) {
             const tdDom = document.createElement("td");
             tdDom.style.border = "1px solid";
             const td = tr.tdList[d];
+            tdDom.colSpan = td.colspan;
+            tdDom.rowSpan = td.rowspan;
             tdDom.innerText = ((_a = td.value[0]) == null ? void 0 : _a.value) || "";
             trDom.append(tdDom);
           }
@@ -3603,12 +3619,19 @@ function writeElementList(elementList, options) {
       } else if (element.type === ElementType.SEPARATOR) {
         const hr = document.createElement("hr");
         clipboardDom.append(hr);
+      } else if (element.type === ElementType.CHECKBOX) {
+        const checkbox = document.createElement("input");
+        checkbox.type = "checkbox";
+        if ((_b = element.checkbox) == null ? void 0 : _b.value) {
+          checkbox.setAttribute("checked", "true");
+        }
+        clipboardDom.append(checkbox);
       } else if (!element.type || element.type === ElementType.LATEX || TEXTLIKE_ELEMENT_TYPE.includes(element.type)) {
         let text2 = "";
         if (element.type === ElementType.CONTROL) {
-          text2 = ((_c = (_b = element.control.value) == null ? void 0 : _b[0]) == null ? void 0 : _c.value) || "";
+          text2 = ((_d = (_c = element.control.value) == null ? void 0 : _c[0]) == null ? void 0 : _d.value) || "";
         } else if (element.type === ElementType.DATE) {
-          text2 = ((_d = element.valueList) == null ? void 0 : _d.map((v) => v.value).join("")) || "";
+          text2 = ((_e = element.valueList) == null ? void 0 : _e.map((v) => v.value).join("")) || "";
         } else {
           text2 = element.value;
         }
@@ -3646,13 +3669,14 @@ function writeElementList(elementList, options) {
     return;
   writeClipboardItem(text, html);
 }
-function getElementListByHTML(htmlText) {
+function getElementListByHTML(htmlText, options) {
   const elementList = [];
   function findTextNode(dom) {
+    var _a;
     if (dom.nodeType === 3) {
       const style = window.getComputedStyle(dom.parentNode);
       const value = dom.textContent;
-      if (value) {
+      if (value && ((_a = dom.parentNode) == null ? void 0 : _a.nodeName) !== "STYLE") {
         elementList.push({
           value,
           color: style.color,
@@ -3682,6 +3706,72 @@ function getElementListByHTML(htmlText) {
               url: aElement.href
             });
           }
+        } else if (node.nodeName === "HR") {
+          elementList.push({
+            value: "\n",
+            type: ElementType.SEPARATOR
+          });
+        } else if (node.nodeName === "IMG") {
+          const { src, width, height } = node;
+          if (src && width && height) {
+            elementList.push({
+              width,
+              height,
+              value: src,
+              type: ElementType.IMAGE
+            });
+          }
+        } else if (node.nodeName === "TABLE") {
+          const tableElement = node;
+          const element = {
+            type: ElementType.TABLE,
+            value: "\n",
+            colgroup: [],
+            trList: []
+          };
+          let tdCount = 0;
+          tableElement.querySelectorAll("tr").forEach((trElement, trIndex) => {
+            const trHeightStr = window.getComputedStyle(trElement).height.replace("px", "");
+            const tr = {
+              height: Number(trHeightStr),
+              tdList: []
+            };
+            trElement.querySelectorAll("td").forEach((tdElement) => {
+              const colspan = tdElement.colSpan;
+              const rowspan = tdElement.rowSpan;
+              if (trIndex === 0) {
+                tdCount += colspan;
+              }
+              const td = {
+                colspan,
+                rowspan,
+                value: [{
+                  value: tdElement.innerText
+                }]
+              };
+              tr.tdList.push(td);
+            });
+            element.trList.push(tr);
+          });
+          if (tdCount) {
+            const width = Math.ceil(options.innerWidth / tdCount);
+            for (let i = 0; i < tdCount; i++) {
+              element.colgroup.push({
+                width
+              });
+            }
+          }
+          if (element.colgroup) {
+            elementList.push(element);
+          }
+        } else if (node.nodeName === "INPUT" && node.type === ControlComponent.CHECKBOX) {
+          elementList.push({
+            type: ElementType.CHECKBOX,
+            value: "",
+            checkbox: {
+              value: node.checked
+            }
+          });
         } else {
           findTextNode(node);
           if (node.nodeType === 1 && n !== childNodes.length - 1) {
@@ -3764,7 +3854,9 @@ class CursorAgent {
         }
         if (item.type === "text/html" && isHTML) {
           item.getAsString((htmlText) => {
-            const elementList = getElementListByHTML(htmlText);
+            const elementList = getElementListByHTML(htmlText, {
+              innerWidth: this.draw.getOriginalInnerWidth()
+            });
             this.draw.insertElementList(elementList);
           });
         }
@@ -4346,32 +4438,84 @@ function keydown(evt, host) {
     if (isReadonly)
       return;
     if (index2 > 0) {
-      const curIndex = index2 - 1;
-      rangeManager.setRange(curIndex, curIndex);
+      const curIndex = startIndex - 1;
+      let anchorStartIndex = curIndex;
+      let anchorEndIndex = curIndex;
+      const cursorPosition2 = position.getCursorPosition();
+      if (evt.shiftKey && cursorPosition2) {
+        if (startIndex !== endIndex) {
+          if (startIndex === cursorPosition2.index) {
+            anchorStartIndex = startIndex;
+            anchorEndIndex = endIndex - 1;
+          } else {
+            anchorStartIndex = curIndex;
+            anchorEndIndex = endIndex;
+          }
+        } else {
+          anchorEndIndex = endIndex;
+        }
+      }
+      if (!~anchorStartIndex || !~anchorEndIndex)
+        return;
+      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
       draw.render({
-        curIndex,
+        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+        isSetCursor: isCollapsed2,
         isSubmitHistory: false,
         isComputeRowList: false
       });
+      evt.preventDefault();
     }
   } else if (evt.key === KeyMap.Right) {
     if (isReadonly)
       return;
-    if (index2 < positionList.length - 1) {
-      const curIndex = index2 + 1;
-      rangeManager.setRange(curIndex, curIndex);
+    if (index2 < positionList.length) {
+      const curIndex = endIndex + 1;
+      let anchorStartIndex = curIndex;
+      let anchorEndIndex = curIndex;
+      const cursorPosition2 = position.getCursorPosition();
+      if (evt.shiftKey && cursorPosition2) {
+        if (startIndex !== endIndex) {
+          if (startIndex === cursorPosition2.index) {
+            anchorStartIndex = startIndex;
+            anchorEndIndex = curIndex;
+          } else {
+            anchorStartIndex = startIndex + 1;
+            anchorEndIndex = endIndex;
+          }
+        } else {
+          anchorStartIndex = startIndex;
+        }
+      }
+      const maxElementListIndex = elementList.length - 1;
+      if (anchorStartIndex > maxElementListIndex || anchorEndIndex > maxElementListIndex)
+        return;
+      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
       draw.render({
-        curIndex,
+        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+        isSetCursor: isCollapsed2,
         isSubmitHistory: false,
         isComputeRowList: false
       });
+      evt.preventDefault();
     }
   } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
     if (isReadonly)
       return;
-    const { rowNo, index: index22, coordinate: { leftTop, rightTop } } = cursorPosition;
-    if (evt.key === KeyMap.Up && rowNo !== 0 || evt.key === KeyMap.Down && rowNo !== draw.getRowCount()) {
-      const probablePosition = evt.key === KeyMap.Up ? positionList.slice(0, index22).filter((p) => p.rowNo === rowNo - 1) : positionList.slice(index22, positionList.length - 1).filter((p) => p.rowNo === rowNo + 1);
+    let anchorPosition = cursorPosition;
+    const isUp = evt.key === KeyMap.Up;
+    if (evt.shiftKey) {
+      if (startIndex === cursorPosition.index) {
+        anchorPosition = positionList[endIndex];
+      } else {
+        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++) {
@@ -4381,12 +4525,14 @@ function keydown(evt, host) {
           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;
           }
         }
         if (p === probablePosition.length - 1 && maxIndex === 0) {
@@ -4394,9 +4540,31 @@ function keydown(evt, host) {
         }
       }
       const curIndex = maxIndex;
-      rangeManager.setRange(curIndex, curIndex);
+      let anchorStartIndex = curIndex;
+      let anchorEndIndex = curIndex;
+      if (evt.shiftKey) {
+        if (startIndex !== endIndex) {
+          if (startIndex === cursorPosition.index) {
+            anchorStartIndex = startIndex;
+          } else {
+            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,
+        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+        isSetCursor: isCollapsed2,
         isSubmitHistory: false,
         isComputeRowList: false
       });
@@ -4526,13 +4694,15 @@ function cut(host) {
   if (startIndex === endIndex) {
     const position = draw.getPosition();
     const positionList = position.getPositionList();
-    const curRowNo = positionList[startIndex].rowNo;
+    const startPosition = positionList[startIndex];
+    const curRowNo = startPosition.rowNo;
+    const curPageNo = startPosition.pageNo;
     const cutElementIndexList = [];
     for (let p = 0; p < positionList.length; p++) {
       const position2 = positionList[p];
-      if (position2.rowNo > curRowNo)
+      if (position2.pageNo > curPageNo)
         break;
-      if (position2.rowNo === curRowNo) {
+      if (position2.pageNo === curPageNo && position2.rowNo === curRowNo) {
         cutElementIndexList.push(p);
       }
     }
@@ -5496,6 +5666,7 @@ class Margin {
     const margins = this.draw.getMargins();
     const marginIndicatorSize = this.draw.getMarginIndicatorSize();
     ctx.save();
+    ctx.translate(0.5, 0.5);
     ctx.strokeStyle = marginIndicatorColor;
     ctx.beginPath();
     const leftTopPoint = [margins[3], margins[0]];
@@ -11282,11 +11453,11 @@ class ContextMenu {
     this._addEvent();
   }
   _addEvent() {
-    document.addEventListener("contextmenu", this._proxyContextMenuEvent);
+    this.container.addEventListener("contextmenu", this._proxyContextMenuEvent);
     document.addEventListener("mousedown", this._handleEffect);
   }
   removeEvent() {
-    document.removeEventListener("contextmenu", this._proxyContextMenuEvent);
+    this.container.removeEventListener("contextmenu", this._proxyContextMenuEvent);
     document.removeEventListener("mousedown", this._handleEffect);
   }
   _getContext() {