@hufe921/canvas-editor 0.9.11 → 0.9.12

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.12";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -3557,11 +3557,25 @@ 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");
@@ -4346,32 +4360,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);
+      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 +4447,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 +4462,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 +4616,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 +5588,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]];