@hufe921/canvas-editor 0.9.10 → 0.9.12

package/dist/canvas-editor.es.js

@@ -23,7 +23,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 var index = "";
-const version = "0.9.10";
+const version = "0.9.12";
 const ZERO = "\u200B";
 const WRAP = "\n";
 var RowFlex;
@@ -92,7 +92,7 @@ function downloadFile(href, fileName) {
   a.download = fileName;
   a.click();
 }
-function threeClick(dom, fn) {
+function threeClick$1(dom, fn) {
   nClickEvent(3, dom, fn);
 }
 function nClickEvent(n, dom, fn) {
@@ -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");
@@ -3947,8 +3961,6 @@ var KeyMap;
   KeyMap2["EIGHT"] = "8";
   KeyMap2["NINE"] = "9";
 })(KeyMap || (KeyMap = {}));
-const LETTER_REG = /[a-zA-Z]/;
-const NUMBER_LIKE_REG = /[0-9.]/;
 class CheckboxControl {
   constructor(element, control) {
     __publicField(this, "element");
@@ -4046,442 +4058,628 @@ class CheckboxControl {
     return endIndex;
   }
 }
-class CanvasEvent {
-  constructor(draw) {
-    __publicField(this, "isAllowDrag");
-    __publicField(this, "isCompositing");
-    __publicField(this, "mouseDownStartPosition");
-    __publicField(this, "draw");
-    __publicField(this, "options");
-    __publicField(this, "pageContainer");
-    __publicField(this, "pageList");
-    __publicField(this, "position");
-    __publicField(this, "range");
-    __publicField(this, "cursor");
-    __publicField(this, "historyManager");
-    __publicField(this, "previewer");
-    __publicField(this, "tableTool");
-    __publicField(this, "hyperlinkParticle");
-    __publicField(this, "dateParticle");
-    __publicField(this, "listener");
-    __publicField(this, "control");
-    this.isAllowDrag = false;
-    this.isCompositing = false;
-    this.mouseDownStartPosition = null;
-    this.pageContainer = draw.getPageContainer();
-    this.pageList = draw.getPageList();
-    this.draw = draw;
-    this.options = draw.getOptions();
-    this.cursor = null;
-    this.position = this.draw.getPosition();
-    this.range = this.draw.getRange();
-    this.historyManager = this.draw.getHistoryManager();
-    this.previewer = this.draw.getPreviewer();
-    this.tableTool = this.draw.getTableTool();
-    this.hyperlinkParticle = this.draw.getHyperlinkParticle();
-    this.dateParticle = this.draw.getDateParticle();
-    this.listener = this.draw.getListener();
-    this.control = this.draw.getControl();
+function mousedown(evt, host) {
+  if (evt.button === MouseEventButton.RIGHT)
+    return;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  const rangeManager = draw.getRange();
+  const position = draw.getPosition();
+  if (!host.isAllowDrag) {
+    const range = rangeManager.getRange();
+    if (!isReadonly && range.startIndex !== range.endIndex) {
+      const isPointInRange = rangeManager.getIsPointInRange(evt.offsetX, evt.offsetY);
+      if (isPointInRange) {
+        host.isAllowDrag = true;
+        host.cacheRange = deepClone(range);
+        host.cacheElementList = draw.getElementList();
+        host.cachePositionList = position.getPositionList();
+        return;
+      }
+    }
   }
-  register() {
-    this.cursor = this.draw.getCursor();
-    this.pageContainer.addEventListener("mousedown", this.mousedown.bind(this));
-    this.pageContainer.addEventListener("mouseleave", this.mouseleave.bind(this));
-    this.pageContainer.addEventListener("mousemove", this.mousemove.bind(this));
-    this.pageContainer.addEventListener("dblclick", this.dblclick.bind(this));
-    threeClick(this.pageContainer, this.threeClick.bind(this));
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
   }
-  setIsAllowDrag(payload) {
-    this.isAllowDrag = payload;
-    if (!payload) {
-      this.applyPainterStyle();
+  host.isAllowSelection = true;
+  const positionResult = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const { index: index2, isDirectHit, isCheckbox, isImage, isTable, tdValueIndex } = positionResult;
+  host.mouseDownStartPosition = __spreadProps(__spreadValues({}, positionResult), {
+    index: isTable ? tdValueIndex : index2
+  });
+  const elementList = draw.getElementList();
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  const curElement = elementList[curIndex];
+  const isDirectHitImage = !!(isDirectHit && isImage);
+  const isDirectHitCheckbox = !!(isDirectHit && isCheckbox);
+  if (~index2) {
+    rangeManager.setRange(curIndex, curIndex);
+    position.setCursorPosition(positionList[curIndex]);
+    const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
+    if (isSetCheckbox) {
+      const { checkbox } = curElement;
+      if (checkbox) {
+        checkbox.value = !checkbox.value;
+      } else {
+        curElement.checkbox = {
+          value: true
+        };
+      }
+      const control = draw.getControl();
+      const activeControl = control.getActiveControl();
+      if (activeControl instanceof CheckboxControl) {
+        activeControl.setSelect();
+      }
     }
-  }
-  clearPainterStyle() {
-    this.pageList.forEach((p) => {
-      p.style.cursor = "text";
+    draw.render({
+      curIndex,
+      isSubmitHistory: isSetCheckbox,
+      isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
+      isComputeRowList: false
     });
-    this.draw.setPainterStyle(null);
   }
-  applyPainterStyle() {
-    const painterStyle = this.draw.getPainterStyle();
-    if (!painterStyle)
-      return;
-    const selection = this.range.getSelection();
-    if (!selection)
-      return;
-    const painterStyleKeys = Object.keys(painterStyle);
-    selection.forEach((s) => {
-      painterStyleKeys.forEach((pKey) => {
-        const key = pKey;
-        s[key] = painterStyle[key];
+  const previewer = draw.getPreviewer();
+  previewer.clearResizer();
+  if (isDirectHitImage && !isReadonly) {
+    previewer.drawResizer(curElement, positionList[curIndex], curElement.type === ElementType.LATEX ? {
+      mime: "svg",
+      srcKey: "laTexSVG"
+    } : {});
+  }
+  const tableTool = draw.getTableTool();
+  tableTool.dispose();
+  if (isTable && !isReadonly) {
+    const originalElementList = draw.getOriginalElementList();
+    const originalPositionList = position.getOriginalPositionList();
+    tableTool.render(originalElementList[index2], originalPositionList[index2]);
+  }
+  const hyperlinkParticle = draw.getHyperlinkParticle();
+  hyperlinkParticle.clearHyperlinkPopup();
+  if (curElement.type === ElementType.HYPERLINK) {
+    hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+  }
+  const dateParticle = draw.getDateParticle();
+  dateParticle.clearDatePicker();
+  if (curElement.type === ElementType.DATE && !isReadonly) {
+    dateParticle.renderDatePicker(curElement, positionList[curIndex]);
+  }
+}
+function mouseup(evt, host) {
+  if (host.isAllowDrop) {
+    const draw = host.getDraw();
+    const position = draw.getPosition();
+    const rangeManager = draw.getRange();
+    const cacheRange = host.cacheRange;
+    const cacheElementList = host.cacheElementList;
+    const cachePositionList = host.cachePositionList;
+    const range = rangeManager.getRange();
+    const elementList = draw.getElementList();
+    const positionList = position.getPositionList();
+    const startPosition = positionList[range.startIndex];
+    const cacheStartElement = cacheElementList[cacheRange.startIndex];
+    const startElement = elementList[range.startIndex];
+    let curIndex = range.startIndex;
+    if (cacheStartElement.tdId === startElement.tdId && range.startIndex > cacheRange.endIndex) {
+      curIndex -= cacheRange.endIndex - cacheRange.startIndex;
+    }
+    const deleteElementList = cacheElementList.splice(cacheRange.startIndex + 1, cacheRange.endIndex - cacheRange.startIndex);
+    let restArg = {};
+    if (startElement.tableId) {
+      const { tdId, trId, tableId } = startElement;
+      restArg = { tdId, trId, tableId };
+    }
+    const replaceElementList = deleteElementList.map((el) => {
+      const newElement = __spreadValues({
+        value: el.value
+      }, restArg);
+      EDITOR_ELEMENT_STYLE_ATTR.forEach((attr) => {
+        const value = el[attr];
+        if (value !== void 0) {
+          newElement[attr] = value;
+        }
       });
+      return newElement;
     });
-    this.draw.render({ isSetCursor: false });
-    const painterOptions = this.draw.getPainterOptions();
-    if (!painterOptions || !painterOptions.isDblclick) {
-      this.clearPainterStyle();
-    }
-  }
-  mousemove(evt) {
-    if (!this.isAllowDrag || !this.mouseDownStartPosition)
-      return;
-    const target = evt.target;
-    const pageIndex = target.dataset.index;
-    if (pageIndex) {
-      this.draw.setPageNo(Number(pageIndex));
+    elementList.splice(curIndex + 1, 0, ...replaceElementList);
+    const cacheStartPosition = cachePositionList[cacheRange.startIndex];
+    const positionContext = position.getPositionContext();
+    let positionContextIndex = positionContext.index;
+    if (positionContextIndex) {
+      if (startElement.tableId && !cacheStartElement.tableId) {
+        if (cacheStartPosition.index < positionContextIndex) {
+          positionContextIndex -= deleteElementList.length;
+        }
+      } else if (!startElement.tableId && cacheStartElement.tableId) {
+        if (startPosition.index < positionContextIndex) {
+          positionContextIndex += deleteElementList.length;
+        }
+      }
+      position.setPositionContext(__spreadProps(__spreadValues({}, positionContext), {
+        index: positionContextIndex
+      }));
     }
-    const positionResult = this.position.getPositionByXY({
-      x: evt.offsetX,
-      y: evt.offsetY
+    rangeManager.setRange(curIndex, curIndex + deleteElementList.length, range.tableId, range.startTdIndex, range.endTdIndex, range.startTrIndex, range.endTrIndex);
+    draw.render({
+      isSetCursor: false
     });
-    const { index: index2, isTable, tdValueIndex, tdIndex, trIndex, tableId } = positionResult;
-    const { index: startIndex, isTable: startIsTable, tdIndex: startTdIndex, trIndex: startTrIndex } = this.mouseDownStartPosition;
-    const endIndex = isTable ? tdValueIndex : index2;
-    if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
-      this.range.setRange(endIndex, endIndex, tableId, startTdIndex, tdIndex, startTrIndex, trIndex);
-    } else {
-      let end = ~endIndex ? endIndex : 0;
-      let start = startIndex;
-      if (start > end) {
-        [start, end] = [end, start];
-      }
-      if (start === end)
+    host.isAllowDrag = false;
+    host.isAllowDrop = false;
+  } else if (host.isAllowDrag) {
+    host.mousedown(evt);
+    host.isAllowDrag = false;
+  }
+}
+function mouseleave(evt, host) {
+  const draw = host.getDraw();
+  const pageContainer = draw.getPageContainer();
+  const { x, y, width, height } = pageContainer.getBoundingClientRect();
+  if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height)
+    return;
+  host.setIsAllowSelection(false);
+}
+function mousemove(evt, host) {
+  const draw = host.getDraw();
+  if (host.isAllowDrag) {
+    const x = evt.offsetX;
+    const y = evt.offsetY;
+    const { startIndex: startIndex2, endIndex: endIndex2 } = host.cacheRange;
+    const positionList = host.cachePositionList;
+    for (let p = startIndex2 + 1; p <= endIndex2; p++) {
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
         return;
-      this.range.setRange(start, end);
+      }
     }
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
-      isComputeRowList: false
-    });
+    host.dragover(evt);
+    host.isAllowDrop = true;
+    return;
   }
-  mousedown(evt) {
-    if (evt.button === MouseEventButton.RIGHT)
+  if (!host.isAllowSelection || !host.mouseDownStartPosition)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const positionResult = position.getPositionByXY({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const { index: index2, isTable, tdValueIndex, tdIndex, trIndex, tableId } = positionResult;
+  const { index: startIndex, isTable: startIsTable, tdIndex: startTdIndex, trIndex: startTrIndex } = host.mouseDownStartPosition;
+  const endIndex = isTable ? tdValueIndex : index2;
+  const rangeManager = draw.getRange();
+  if (isTable && startIsTable && (tdIndex !== startTdIndex || trIndex !== startTrIndex)) {
+    rangeManager.setRange(endIndex, endIndex, tableId, startTdIndex, tdIndex, startTrIndex, trIndex);
+  } else {
+    let end = ~endIndex ? endIndex : 0;
+    let start = startIndex;
+    if (start > end) {
+      [start, end] = [end, start];
+    }
+    if (start === end)
       return;
-    const isReadonly = this.draw.isReadonly();
-    const target = evt.target;
-    const pageIndex = target.dataset.index;
-    if (pageIndex) {
-      this.draw.setPageNo(Number(pageIndex));
-    }
-    this.isAllowDrag = true;
-    const positionResult = this.position.getPositionByXY({
-      x: evt.offsetX,
-      y: evt.offsetY
-    });
-    if (positionResult.isControl && !isReadonly) {
-      const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex: tdValueIndex2 } = positionResult;
-      const { newIndex } = this.control.moveCursor({
-        index: index22,
-        isTable: isTable2,
-        trIndex: trIndex2,
-        tdIndex: tdIndex2,
-        tdValueIndex: tdValueIndex2
-      });
-      if (isTable2) {
-        positionResult.tdValueIndex = newIndex;
+    rangeManager.setRange(start, end);
+  }
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+function keydown(evt, host) {
+  var _a;
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const isReadonly = draw.isReadonly();
+  const historyManager = draw.getHistoryManager();
+  const elementList = draw.getElementList();
+  const positionList = position.getPositionList();
+  const { index: index2 } = cursorPosition;
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  const isCollapsed = startIndex === endIndex;
+  const control = draw.getControl();
+  const isPartRangeInControlOutside = control.isPartRangeInControlOutside();
+  const activeControl = control.getActiveControl();
+  if (evt.key === KeyMap.Backspace) {
+    if (isReadonly || isPartRangeInControlOutside)
+      return;
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.keydown(evt);
+    } else {
+      if (isCollapsed && elementList[index2].value === ZERO && index2 === 0) {
+        evt.preventDefault();
+        return;
+      }
+      if (!isCollapsed) {
+        elementList.splice(startIndex + 1, endIndex - startIndex);
       } else {
-        positionResult.index = newIndex;
+        elementList.splice(index2, 1);
       }
+      curIndex = isCollapsed ? index2 - 1 : startIndex;
     }
-    const { index: index2, isDirectHit, isCheckbox, isControl, isImage, isTable, trIndex, tdIndex, tdValueIndex, tdId, trId, tableId } = positionResult;
-    this.position.setPositionContext({
-      isTable: isTable || false,
-      isCheckbox: isCheckbox || false,
-      isControl: isControl || false,
-      index: index2,
-      trIndex,
-      tdIndex,
-      tdId,
-      trId,
-      tableId
-    });
-    this.mouseDownStartPosition = __spreadProps(__spreadValues({}, positionResult), {
-      index: isTable ? tdValueIndex : index2
-    });
-    const elementList = this.draw.getElementList();
-    const positionList = this.position.getPositionList();
-    const curIndex = isTable ? tdValueIndex : index2;
-    const curElement = elementList[curIndex];
-    const isDirectHitImage = !!(isDirectHit && isImage);
-    const isDirectHitCheckbox = !!(isDirectHit && isCheckbox);
-    if (~index2) {
-      this.range.setRange(curIndex, curIndex);
-      this.position.setCursorPosition(positionList[curIndex]);
-      const isSetCheckbox = isDirectHitCheckbox && !isReadonly;
-      if (isSetCheckbox) {
-        const { checkbox } = curElement;
-        if (checkbox) {
-          checkbox.value = !checkbox.value;
-        } else {
-          curElement.checkbox = {
-            value: true
-          };
-        }
-        const activeControl = this.control.getActiveControl();
-        if (activeControl instanceof CheckboxControl) {
-          activeControl.setSelect();
-        }
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  } else if (evt.key === KeyMap.Delete) {
+    if (isReadonly || isPartRangeInControlOutside)
+      return;
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.keydown(evt);
+    } else if (((_a = elementList[endIndex + 1]) == null ? void 0 : _a.type) === ElementType.CONTROL) {
+      curIndex = control.removeControl(endIndex + 1);
+    } else {
+      if (!isCollapsed) {
+        elementList.splice(startIndex + 1, endIndex - startIndex);
+      } else {
+        elementList.splice(index2 + 1, 1);
       }
-      this.draw.render({
-        curIndex,
-        isSubmitHistory: isSetCheckbox,
-        isSetCursor: !isDirectHitImage && !isDirectHitCheckbox,
-        isComputeRowList: false
-      });
-    }
-    this.previewer.clearResizer();
-    if (isDirectHitImage && !isReadonly) {
-      this.previewer.drawResizer(curElement, positionList[curIndex], curElement.type === ElementType.LATEX ? {
-        mime: "svg",
-        srcKey: "laTexSVG"
-      } : {});
-    }
-    this.tableTool.dispose();
-    if (isTable && !isReadonly) {
-      const originalElementList = this.draw.getOriginalElementList();
-      const originalPositionList = this.position.getOriginalPositionList();
-      this.tableTool.render(originalElementList[index2], originalPositionList[index2]);
+      curIndex = isCollapsed ? index2 : startIndex;
     }
-    this.hyperlinkParticle.clearHyperlinkPopup();
-    if (curElement.type === ElementType.HYPERLINK) {
-      this.hyperlinkParticle.drawHyperlinkPopup(curElement, positionList[curIndex]);
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+  } else if (evt.key === KeyMap.Enter) {
+    if (isReadonly || isPartRangeInControlOutside)
+      return;
+    const positionContext = position.getPositionContext();
+    let restArg = {};
+    if (positionContext.isTable) {
+      const { tdId, trId, tableId } = positionContext;
+      restArg = { tdId, trId, tableId };
     }
-    this.dateParticle.clearDatePicker();
-    if (curElement.type === ElementType.DATE && !isReadonly) {
-      this.dateParticle.renderDatePicker(curElement, positionList[curIndex]);
+    const enterText = __spreadValues({
+      value: ZERO
+    }, restArg);
+    let curIndex;
+    if (activeControl) {
+      curIndex = control.setValue([enterText]);
+    } else {
+      if (isCollapsed) {
+        elementList.splice(index2 + 1, 0, enterText);
+      } else {
+        elementList.splice(startIndex + 1, endIndex - startIndex, enterText);
+      }
+      curIndex = index2 + 1;
     }
-  }
-  mouseleave(evt) {
-    const { x, y, width, height } = this.pageContainer.getBoundingClientRect();
-    if (evt.x >= x && evt.x <= x + width && evt.y >= y && evt.y <= y + height)
-      return;
-    this.setIsAllowDrag(false);
-  }
-  keydown(evt) {
-    var _a;
-    const isReadonly = this.draw.isReadonly();
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
+    rangeManager.setRange(curIndex, curIndex);
+    draw.render({ curIndex });
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.Left) {
+    if (isReadonly)
       return;
-    const elementList = this.draw.getElementList();
-    const position = this.position.getPositionList();
-    const { index: index2 } = cursorPosition;
-    const { startIndex, endIndex } = this.range.getRange();
-    const isCollapsed = startIndex === endIndex;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    const activeControl = this.control.getActiveControl();
-    if (evt.key === KeyMap.Backspace) {
-      if (isReadonly || isPartRangeInControlOutside)
-        return;
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.keydown(evt);
-      } else {
-        if (isCollapsed && elementList[index2].value === ZERO && index2 === 0) {
-          evt.preventDefault();
-          return;
-        }
-        if (!isCollapsed) {
-          elementList.splice(startIndex + 1, endIndex - startIndex);
+    if (index2 > 0) {
+      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 {
-          elementList.splice(index2, 1);
+          anchorEndIndex = endIndex;
         }
-        curIndex = isCollapsed ? index2 - 1 : startIndex;
       }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-    } else if (evt.key === KeyMap.Delete) {
-      if (isReadonly || isPartRangeInControlOutside)
+      if (!~anchorStartIndex || !~anchorEndIndex)
         return;
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.keydown(evt);
-      } else if (((_a = elementList[endIndex + 1]) == null ? void 0 : _a.type) === ElementType.CONTROL) {
-        curIndex = this.control.removeControl(endIndex + 1);
-      } else {
-        if (!isCollapsed) {
-          elementList.splice(startIndex + 1, endIndex - startIndex);
+      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
+      draw.render({
+        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 = 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 {
-          elementList.splice(index2 + 1, 1);
+          anchorStartIndex = startIndex;
         }
-        curIndex = isCollapsed ? index2 : startIndex;
       }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
-    } else if (evt.key === KeyMap.Enter) {
-      if (isReadonly || isPartRangeInControlOutside)
+      const maxElementListIndex = elementList.length - 1;
+      if (anchorStartIndex > maxElementListIndex || anchorEndIndex > maxElementListIndex)
         return;
-      const positionContext = this.position.getPositionContext();
-      let restArg = {};
-      if (positionContext.isTable) {
-        const { tdId, trId, tableId } = positionContext;
-        restArg = { tdId, trId, tableId };
-      }
-      const enterText = __spreadValues({
-        value: ZERO
-      }, restArg);
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.setValue([enterText]);
-      } else {
-        if (isCollapsed) {
-          elementList.splice(index2 + 1, 0, enterText);
-        } else {
-          elementList.splice(startIndex + 1, endIndex - startIndex, enterText);
-        }
-        curIndex = index2 + 1;
-      }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
+      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
+      draw.render({
+        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+        isSetCursor: isCollapsed2,
+        isSubmitHistory: false,
+        isComputeRowList: false
+      });
       evt.preventDefault();
-    } else if (evt.key === KeyMap.Left) {
-      if (isReadonly)
-        return;
-      if (index2 > 0) {
-        const curIndex = index2 - 1;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
-      }
-    } else if (evt.key === KeyMap.Right) {
-      if (isReadonly)
-        return;
-      if (index2 < position.length - 1) {
-        const curIndex = index2 + 1;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
-      }
-    } 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 !== this.draw.getRowCount()) {
-        const probablePosition = evt.key === KeyMap.Up ? position.slice(0, index22).filter((p) => p.rowNo === rowNo - 1) : position.slice(index22, position.length - 1).filter((p) => p.rowNo === rowNo + 1);
-        let maxIndex = 0;
-        let maxDistance = 0;
-        for (let p = 0; p < probablePosition.length; p++) {
-          const position2 = probablePosition[p];
-          if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
-            const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
-            if (curDistance > maxDistance) {
-              maxIndex = position2.index;
-              maxDistance = curDistance;
-            }
-          } 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;
-            }
+    }
+  } else if (evt.key === KeyMap.Up || evt.key === KeyMap.Down) {
+    if (isReadonly)
+      return;
+    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++) {
+        const position2 = probablePosition[p];
+        if (position2.coordinate.leftTop[0] >= leftTop[0] && position2.coordinate.leftTop[0] <= rightTop[0]) {
+          const curDistance = rightTop[0] - position2.coordinate.leftTop[0];
+          if (curDistance > maxDistance) {
+            maxIndex = position2.index;
+            maxDistance = curDistance;
+            break;
           }
-          if (p === probablePosition.length - 1 && maxIndex === 0) {
+        } 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;
           }
         }
-        const curIndex = maxIndex;
-        this.range.setRange(curIndex, curIndex);
-        this.draw.render({
-          curIndex,
-          isSubmitHistory: false,
-          isComputeRowList: false
-        });
-      }
-    } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
-      if (isReadonly)
-        return;
-      this.historyManager.undo();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
-      if (isReadonly)
-        return;
-      this.historyManager.redo();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.C) {
-      this.copy();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.X) {
-      this.cut();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.A) {
-      this.selectAll();
-      evt.preventDefault();
-    } else if (evt.ctrlKey && evt.key === KeyMap.S) {
-      if (isReadonly)
-        return;
-      if (this.listener.saved) {
-        this.listener.saved(this.draw.getValue());
+        if (p === probablePosition.length - 1 && maxIndex === 0) {
+          maxIndex = position2.index;
+        }
       }
-      evt.preventDefault();
-    } else if (evt.key === KeyMap.ESC) {
-      this.clearPainterStyle();
-      evt.preventDefault();
-    } else if (evt.key === KeyMap.TAB) {
-      this.draw.insertElementList([{
-        type: ElementType.TAB,
-        value: ""
-      }]);
-      evt.preventDefault();
-    }
-  }
-  dblclick() {
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
-      return;
-    const { value, index: index2 } = cursorPosition;
-    const elementList = this.draw.getElementList();
-    let upCount = 0;
-    let downCount = 0;
-    const isNumber = NUMBER_LIKE_REG.test(value);
-    if (isNumber || LETTER_REG.test(value)) {
-      let upStartIndex = index2 - 1;
-      while (upStartIndex > 0) {
-        const value2 = elementList[upStartIndex].value;
-        if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
-          upCount++;
-          upStartIndex--;
+      const curIndex = maxIndex;
+      let anchorStartIndex = curIndex;
+      let anchorEndIndex = curIndex;
+      if (evt.shiftKey) {
+        if (startIndex !== endIndex) {
+          if (startIndex === cursorPosition.index) {
+            anchorStartIndex = startIndex;
+          } else {
+            anchorEndIndex = endIndex;
+          }
         } else {
-          break;
+          if (isUp) {
+            anchorEndIndex = endIndex;
+          } else {
+            anchorStartIndex = startIndex;
+          }
         }
       }
-      let downStartIndex = index2 + 1;
-      while (downStartIndex < elementList.length) {
-        const value2 = elementList[downStartIndex].value;
-        if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
-          downCount++;
-          downStartIndex++;
-        } else {
-          break;
+      if (anchorStartIndex > anchorEndIndex) {
+        [anchorStartIndex, anchorEndIndex] = [anchorEndIndex, anchorStartIndex];
+      }
+      rangeManager.setRange(anchorStartIndex, anchorEndIndex);
+      const isCollapsed2 = anchorStartIndex === anchorEndIndex;
+      draw.render({
+        curIndex: isCollapsed2 ? anchorStartIndex : void 0,
+        isSetCursor: isCollapsed2,
+        isSubmitHistory: false,
+        isComputeRowList: false
+      });
+    }
+  } else if (evt.ctrlKey && evt.key === KeyMap.Z) {
+    if (isReadonly)
+      return;
+    historyManager.undo();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.Y) {
+    if (isReadonly)
+      return;
+    historyManager.redo();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.C) {
+    host.copy();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.X) {
+    host.cut();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.A) {
+    host.selectAll();
+    evt.preventDefault();
+  } else if (evt.ctrlKey && evt.key === KeyMap.S) {
+    if (isReadonly)
+      return;
+    const listener = draw.getListener();
+    if (listener.saved) {
+      listener.saved(draw.getValue());
+    }
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.ESC) {
+    host.clearPainterStyle();
+    evt.preventDefault();
+  } else if (evt.key === KeyMap.TAB) {
+    draw.insertElementList([{
+      type: ElementType.TAB,
+      value: ""
+    }]);
+    evt.preventDefault();
+  }
+}
+function input(data2, host) {
+  var _a;
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!data2 || !cursorPosition || host.isCompositing)
+    return;
+  const control = draw.getControl();
+  if (control.isPartRangeInControlOutside()) {
+    return;
+  }
+  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) {
+    const { tdId, trId, tableId } = positionContext;
+    restArg = { tdId, trId, tableId };
+  }
+  const elementList = draw.getElementList();
+  const element = elementList[endIndex];
+  const inputData = splitText(text).map((value) => {
+    const newElement = __spreadValues({
+      value
+    }, restArg);
+    const nextElement = elementList[endIndex + 1];
+    if (element.type === TEXT || !element.type && element.value !== ZERO || element.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || element.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || element.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || element.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
+      EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
+        const value2 = element[attr];
+        if (value2 !== void 0) {
+          newElement[attr] = value2;
         }
+      });
+    }
+    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);
+    }
+    for (let i = 0; i < inputData.length; i++) {
+      elementList.splice(start + i, 0, inputData[i]);
+    }
+    curIndex = (isCollapsed ? index2 : startIndex) + inputData.length;
+  }
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function cut(host) {
+  const draw = host.getDraw();
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  if (!~startIndex && !~startIndex)
+    return;
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  const control = draw.getControl();
+  const isPartRangeInControlOutside = control.isPartRangeInControlOutside();
+  if (isPartRangeInControlOutside)
+    return;
+  const activeControl = control.getActiveControl();
+  const elementList = draw.getElementList();
+  let start = startIndex;
+  let end = endIndex;
+  if (startIndex === endIndex) {
+    const position = draw.getPosition();
+    const positionList = position.getPositionList();
+    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.pageNo > curPageNo)
+        break;
+      if (position2.pageNo === curPageNo && position2.rowNo === curRowNo) {
+        cutElementIndexList.push(p);
       }
     }
-    this.range.setRange(index2 - upCount - 1, index2 + downCount);
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
-      isComputeRowList: false
-    });
+    const firstElementIndex = cutElementIndexList[0] - 1;
+    start = firstElementIndex < 0 ? 0 : firstElementIndex;
+    end = cutElementIndexList[cutElementIndexList.length - 1];
   }
-  threeClick() {
-    const cursorPosition = this.position.getCursorPosition();
-    if (!cursorPosition)
-      return;
-    const { index: index2 } = cursorPosition;
-    const elementList = this.draw.getElementList();
-    let upCount = 0;
-    let downCount = 0;
+  const options = draw.getOptions();
+  writeElementList(elementList.slice(start + 1, end + 1), options);
+  let curIndex;
+  if (activeControl) {
+    curIndex = control.cut();
+  } else {
+    elementList.splice(start + 1, end - start);
+    curIndex = start;
+  }
+  rangeManager.setRange(curIndex, curIndex);
+  draw.render({ curIndex });
+}
+function copy(host) {
+  const draw = host.getDraw();
+  const rangeManager = draw.getRange();
+  const { startIndex, endIndex } = rangeManager.getRange();
+  if (startIndex !== endIndex) {
+    const options = draw.getOptions();
+    const elementList = draw.getElementList();
+    writeElementList(elementList.slice(startIndex + 1, endIndex + 1), options);
+  }
+}
+function drop(evt, host) {
+  var _a;
+  evt.preventDefault();
+  const data2 = (_a = evt.dataTransfer) == null ? void 0 : _a.getData("text");
+  if (data2) {
+    host.input(data2);
+  }
+}
+const LETTER_REG = /[a-zA-Z]/;
+const NUMBER_LIKE_REG = /[0-9.]/;
+function dblclick(host) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { value, index: index2 } = cursorPosition;
+  let upCount = 0;
+  let downCount = 0;
+  const isNumber = NUMBER_LIKE_REG.test(value);
+  if (isNumber || LETTER_REG.test(value)) {
+    const elementList = draw.getElementList();
     let upStartIndex = index2 - 1;
     while (upStartIndex > 0) {
-      const value = elementList[upStartIndex].value;
-      if (value !== ZERO) {
+      const value2 = elementList[upStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
         upCount++;
         upStartIndex--;
       } else {
@@ -4490,113 +4688,184 @@ class CanvasEvent {
     }
     let downStartIndex = index2 + 1;
     while (downStartIndex < elementList.length) {
-      const value = elementList[downStartIndex].value;
-      if (value !== ZERO) {
+      const value2 = elementList[downStartIndex].value;
+      if (isNumber && NUMBER_LIKE_REG.test(value2) || !isNumber && LETTER_REG.test(value2)) {
         downCount++;
         downStartIndex++;
       } else {
         break;
       }
     }
-    this.range.setRange(index2 - upCount - 1, index2 + downCount);
-    this.draw.render({
-      isSubmitHistory: false,
-      isSetCursor: false,
-      isComputeRowList: false
-    });
   }
-  input(data2) {
-    var _a;
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    if (!this.cursor)
-      return;
-    const cursorPosition = this.position.getCursorPosition();
-    if (!data2 || !cursorPosition || this.isCompositing)
-      return;
-    if (this.control.isPartRangeInControlOutside()) {
-      return;
-    }
-    const activeControl = this.control.getActiveControl();
-    const { TEXT, HYPERLINK, SUBSCRIPT, SUPERSCRIPT, DATE } = ElementType;
-    const text = data2.replaceAll(`
-`, ZERO);
-    const elementList = this.draw.getElementList();
-    const agentDom = this.cursor.getAgentDom();
-    agentDom.value = "";
-    const { index: index2 } = cursorPosition;
-    const { startIndex, endIndex } = this.range.getRange();
-    const isCollapsed = startIndex === endIndex;
-    const positionContext = this.position.getPositionContext();
-    let restArg = {};
-    if (positionContext.isTable) {
-      const { tdId, trId, tableId } = positionContext;
-      restArg = { tdId, trId, tableId };
+  const rangeManager = draw.getRange();
+  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+function threeClick(host) {
+  const draw = host.getDraw();
+  const position = draw.getPosition();
+  const cursorPosition = position.getCursorPosition();
+  if (!cursorPosition)
+    return;
+  const { index: index2 } = cursorPosition;
+  const elementList = draw.getElementList();
+  let upCount = 0;
+  let downCount = 0;
+  let upStartIndex = index2 - 1;
+  while (upStartIndex > 0) {
+    const value = elementList[upStartIndex].value;
+    if (value !== ZERO) {
+      upCount++;
+      upStartIndex--;
+    } else {
+      break;
     }
-    const element = elementList[endIndex];
-    const inputData = splitText(text).map((value) => {
-      const newElement = __spreadValues({
-        value
-      }, restArg);
-      const nextElement = elementList[endIndex + 1];
-      if (element.type === TEXT || !element.type && element.value !== ZERO || element.type === HYPERLINK && (nextElement == null ? void 0 : nextElement.type) === HYPERLINK || element.type === DATE && (nextElement == null ? void 0 : nextElement.type) === DATE || element.type === SUBSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUBSCRIPT || element.type === SUPERSCRIPT && (nextElement == null ? void 0 : nextElement.type) === SUPERSCRIPT) {
-        EDITOR_ELEMENT_COPY_ATTR.forEach((attr) => {
-          const value2 = element[attr];
-          if (value2 !== void 0) {
-            newElement[attr] = value2;
-          }
-        });
-      }
-      return newElement;
-    });
-    let curIndex;
-    if (activeControl && ((_a = elementList[endIndex + 1]) == null ? void 0 : _a.controlId) === element.controlId) {
-      curIndex = this.control.setValue(inputData);
+  }
+  let downStartIndex = index2 + 1;
+  while (downStartIndex < elementList.length) {
+    const value = elementList[downStartIndex].value;
+    if (value !== ZERO) {
+      downCount++;
+      downStartIndex++;
     } else {
-      let start = 0;
-      if (isCollapsed) {
-        start = index2 + 1;
-      } else {
-        start = startIndex + 1;
-        elementList.splice(startIndex + 1, endIndex - startIndex);
-      }
-      for (let i = 0; i < inputData.length; i++) {
-        elementList.splice(start + i, 0, inputData[i]);
-      }
-      curIndex = (isCollapsed ? index2 : startIndex) + inputData.length;
+      break;
     }
-    this.range.setRange(curIndex, curIndex);
-    this.draw.render({ curIndex });
   }
-  cut() {
-    const isReadonly = this.draw.isReadonly();
-    if (isReadonly)
-      return;
-    const isPartRangeInControlOutside = this.control.isPartRangeInControlOutside();
-    if (isPartRangeInControlOutside)
-      return;
-    const activeControl = this.control.getActiveControl();
-    const { startIndex, endIndex } = this.range.getRange();
-    const elementList = this.draw.getElementList();
-    if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options);
-      let curIndex;
-      if (activeControl) {
-        curIndex = this.control.cut();
-      } else {
-        elementList.splice(startIndex + 1, endIndex - startIndex);
-        curIndex = startIndex;
-      }
-      this.range.setRange(curIndex, curIndex);
-      this.draw.render({ curIndex });
+  const rangeManager = draw.getRange();
+  rangeManager.setRange(index2 - upCount - 1, index2 + downCount);
+  draw.render({
+    isSubmitHistory: false,
+    isSetCursor: false,
+    isComputeRowList: false
+  });
+}
+var click = {
+  dblclick,
+  threeClick
+};
+function compositionstart(host) {
+  host.isCompositing = true;
+}
+function compositionend(host) {
+  host.isCompositing = false;
+}
+var composition = {
+  compositionstart,
+  compositionend
+};
+function dragover(evt, host) {
+  const draw = host.getDraw();
+  const isReadonly = draw.isReadonly();
+  if (isReadonly)
+    return;
+  evt.preventDefault();
+  const pageContainer = draw.getPageContainer();
+  const editorRegion = findParent(evt.target, (node) => node === pageContainer, true);
+  if (!editorRegion)
+    return;
+  const target = evt.target;
+  const pageIndex = target.dataset.index;
+  if (pageIndex) {
+    draw.setPageNo(Number(pageIndex));
+  }
+  const position = draw.getPosition();
+  const { isTable, tdValueIndex, index: index2 } = position.adjustPositionContext({
+    x: evt.offsetX,
+    y: evt.offsetY
+  });
+  const positionList = position.getPositionList();
+  const curIndex = isTable ? tdValueIndex : index2;
+  if (~index2) {
+    const rangeManager = draw.getRange();
+    rangeManager.setRange(curIndex, curIndex);
+    position.setCursorPosition(positionList[curIndex]);
+  }
+  const cursor = draw.getCursor();
+  cursor.drawCursor();
+}
+var drag = {
+  dragover
+};
+class CanvasEvent {
+  constructor(draw) {
+    __publicField(this, "isAllowSelection");
+    __publicField(this, "isCompositing");
+    __publicField(this, "isAllowDrag");
+    __publicField(this, "isAllowDrop");
+    __publicField(this, "cacheRange");
+    __publicField(this, "cacheElementList");
+    __publicField(this, "cachePositionList");
+    __publicField(this, "mouseDownStartPosition");
+    __publicField(this, "draw");
+    __publicField(this, "pageContainer");
+    __publicField(this, "pageList");
+    __publicField(this, "range");
+    __publicField(this, "position");
+    this.draw = draw;
+    this.pageContainer = draw.getPageContainer();
+    this.pageList = draw.getPageList();
+    this.range = this.draw.getRange();
+    this.position = this.draw.getPosition();
+    this.isAllowSelection = false;
+    this.isCompositing = false;
+    this.isAllowDrag = false;
+    this.isAllowDrop = false;
+    this.cacheRange = null;
+    this.cacheElementList = null;
+    this.cachePositionList = null;
+    this.mouseDownStartPosition = null;
+  }
+  getDraw() {
+    return this.draw;
+  }
+  register() {
+    this.pageContainer.addEventListener("mousedown", this.mousedown.bind(this));
+    this.pageContainer.addEventListener("mouseup", this.mouseup.bind(this));
+    this.pageContainer.addEventListener("mouseleave", this.mouseleave.bind(this));
+    this.pageContainer.addEventListener("mousemove", this.mousemove.bind(this));
+    this.pageContainer.addEventListener("dblclick", this.dblclick.bind(this));
+    this.pageContainer.addEventListener("dragover", this.dragover.bind(this));
+    this.pageContainer.addEventListener("drop", this.drop.bind(this));
+    threeClick$1(this.pageContainer, this.threeClick.bind(this));
+  }
+  setIsAllowSelection(payload) {
+    this.isAllowSelection = payload;
+    if (!payload) {
+      this.applyPainterStyle();
     }
   }
-  copy() {
-    const { startIndex, endIndex } = this.range.getRange();
-    const elementList = this.draw.getElementList();
-    if (startIndex !== endIndex) {
-      writeElementList(elementList.slice(startIndex + 1, endIndex + 1), this.options);
+  setIsAllowDrag(payload) {
+    this.isAllowDrag = payload;
+    this.isAllowDrop = payload;
+  }
+  clearPainterStyle() {
+    this.pageList.forEach((p) => {
+      p.style.cursor = "text";
+    });
+    this.draw.setPainterStyle(null);
+  }
+  applyPainterStyle() {
+    const painterStyle = this.draw.getPainterStyle();
+    if (!painterStyle)
+      return;
+    const selection = this.range.getSelection();
+    if (!selection)
+      return;
+    const painterStyleKeys = Object.keys(painterStyle);
+    selection.forEach((s) => {
+      painterStyleKeys.forEach((pKey) => {
+        const key = pKey;
+        s[key] = painterStyle[key];
+      });
+    });
+    this.draw.render({ isSetCursor: false });
+    const painterOptions = this.draw.getPainterOptions();
+    if (!painterOptions || !painterOptions.isDblclick) {
+      this.clearPainterStyle();
     }
   }
   selectAll() {
@@ -4608,11 +4877,47 @@ class CanvasEvent {
       isComputeRowList: false
     });
   }
+  mousemove(evt) {
+    mousemove(evt, this);
+  }
+  mousedown(evt) {
+    mousedown(evt, this);
+  }
+  mouseup(evt) {
+    mouseup(evt, this);
+  }
+  mouseleave(evt) {
+    mouseleave(evt, this);
+  }
+  keydown(evt) {
+    keydown(evt, this);
+  }
+  dblclick() {
+    click.dblclick(this);
+  }
+  threeClick() {
+    click.threeClick(this);
+  }
+  input(data2) {
+    input(data2, this);
+  }
+  cut() {
+    cut(this);
+  }
+  copy() {
+    copy(this);
+  }
   compositionstart() {
-    this.isCompositing = true;
+    composition.compositionstart(this);
   }
   compositionend() {
-    this.isCompositing = false;
+    composition.compositionend(this);
+  }
+  drop(evt) {
+    drop(evt, this);
+  }
+  dragover(evt) {
+    drag.dragover(evt, this);
   }
 }
 class GlobalEvent {
@@ -4651,8 +4956,9 @@ class GlobalEvent {
       this.control.destroyControl();
       this.dateParticle.clearDatePicker();
     });
-    __publicField(this, "setDragState", () => {
+    __publicField(this, "setCanvasEventAbility", () => {
       this.canvasEvent.setIsAllowDrag(false);
+      this.canvasEvent.setIsAllowSelection(false);
     });
     __publicField(this, "setRangeStyle", () => {
       this.range.setRangeStyle();
@@ -4700,7 +5006,7 @@ class GlobalEvent {
     window.addEventListener("blur", this.recoverEffect);
     document.addEventListener("keyup", this.setRangeStyle);
     document.addEventListener("click", this.recoverEffect);
-    document.addEventListener("mouseup", this.setDragState);
+    document.addEventListener("mouseup", this.setCanvasEventAbility);
     document.addEventListener("wheel", this.setPageScale, { passive: false });
     document.addEventListener("visibilitychange", this._handleVisibilityChange);
   }
@@ -4708,7 +5014,7 @@ class GlobalEvent {
     window.removeEventListener("blur", this.recoverEffect);
     document.removeEventListener("keyup", this.setRangeStyle);
     document.removeEventListener("click", this.recoverEffect);
-    document.removeEventListener("mouseup", this.setDragState);
+    document.removeEventListener("mouseup", this.setCanvasEventAbility);
     document.removeEventListener("wheel", this.setPageScale);
     document.removeEventListener("visibilitychange", this._handleVisibilityChange);
   }
@@ -4915,6 +5221,43 @@ class Position {
       isControl: ((_b = elementList[curPositionIndex]) == null ? void 0 : _b.type) === ElementType.CONTROL
     };
   }
+  adjustPositionContext(payload) {
+    const isReadonly = this.draw.isReadonly();
+    const { x, y } = payload;
+    const positionResult = this.getPositionByXY({
+      x,
+      y
+    });
+    if (positionResult.isControl && !isReadonly) {
+      const { index: index22, isTable: isTable2, trIndex: trIndex2, tdIndex: tdIndex2, tdValueIndex } = positionResult;
+      const control = this.draw.getControl();
+      const { newIndex } = control.moveCursor({
+        index: index22,
+        isTable: isTable2,
+        trIndex: trIndex2,
+        tdIndex: tdIndex2,
+        tdValueIndex
+      });
+      if (isTable2) {
+        positionResult.tdValueIndex = newIndex;
+      } else {
+        positionResult.index = newIndex;
+      }
+    }
+    const { index: index2, isCheckbox, isControl, isTable, trIndex, tdIndex, tdId, trId, tableId } = positionResult;
+    this.setPositionContext({
+      isTable: isTable || false,
+      isCheckbox: isCheckbox || false,
+      isControl: isControl || false,
+      index: index2,
+      trIndex,
+      tdIndex,
+      tdId,
+      trId,
+      tableId
+    });
+    return positionResult;
+  }
 }
 class RangeManager {
   constructor(draw) {
@@ -4963,6 +5306,17 @@ class RangeManager {
     }
     return rangeRow;
   }
+  getIsPointInRange(x, y) {
+    const { startIndex, endIndex } = this.range;
+    const positionList = this.position.getPositionList();
+    for (let p = startIndex + 1; p <= endIndex; p++) {
+      const { coordinate: { leftTop, rightBottom } } = positionList[p];
+      if (x >= leftTop[0] && x <= rightBottom[0] && y >= leftTop[1] && y <= rightBottom[1]) {
+        return true;
+      }
+    }
+    return false;
+  }
   setRange(startIndex, endIndex, tableId, startTdIndex, endTdIndex, startTrIndex, endTrIndex) {
     this.range.startIndex = startIndex;
     this.range.endIndex = endIndex;
@@ -5234,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]];
@@ -10714,7 +11069,7 @@ const globalMenus = [
     name: "\u526A\u5207",
     shortCut: "Ctrl + X",
     when: (payload) => {
-      return !payload.isReadonly && payload.editorHasSelection;
+      return !payload.isReadonly;
     },
     callback: (command) => {
       command.executeCut();