@leankylin-sheet/react 3.1.13 → 3.1.15

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, drawArrow, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
+import { defaultContext, defaultSettings, getSheetIndex, colLocationByIndex, fixPositionOnFrozenCells, colLocation, getFlowdata, isAllowEdit, handleColumnHeaderMouseDown, handleColSizeHandleMouseDown, handleColFreezeHandleMouseDown, handleContextMenu, selectTitlesMap, selectTitlesRange, fixColumnStyleOverflowInFreeze, rowLocationByIndex, rowLocation, handleRowHeaderMouseDown, handleRowSizeHandleMouseDown, handleRowFreezeHandleMouseDown, fixRowStyleOverflowInFreeze, functionHTMLGenerate, locale, getStyleByCell, getCellValue, createRangeHightlight, isInlineStringCell, getInlineStringHTML, valueShowEs, escapeHTMLTag, escapeScriptTag, moveToEnd, isShowHidenCR, cancelNormalSelected, moveHighlightCell, updateCell, israngeseleciton, handleFormulaInput, onSearchDialogMoveStart, replaceAll, replace, searchAll, searchNext, normalizeSelection, scrollToHighlightCell, isLinkValid, getRangetxt, goToLink, replaceHtml, removeHyperlink, onRangeSelectionModalMoveStart, saveHyperlink, createFilterOptions, onImageMoveStart, onImageResizeStart, showComments, setEditingComment, onCommentBoxMoveStart, onCommentBoxResizeStart, confirmMessage, getRangeByTxt, getDropdownList, setCellValue, setConditionRules, mergeBorder, setDropcownValue, handleCellAreaMouseDown, handleCellAreaMouseMove, handleCellAreaDragOver, handleCellDrop, handleCellAreaDoubleClick, selectAll, showLinkCard, getCellRowColumn, getCellHyperlink, handleOverlayMouseMove, handleOverlayMouseUp, handleKeydownForZoom, handleOverlayTouchStart, handleOverlayTouchMove, handleOverlayTouchEnd, onCellsMoveStart, createDropCellRange, updateContextWithSheetData, updateContextWithCanvas, initFreeze, Canvas, handleGlobalWheel, setCaretPosition, getDataArr, updateMoreCell, getRegStr, getOptionValue, getSelectRange, applyLocation, updateItem, update, normalizedCellAttr, updateFormat, handleTextSize, handleHorizontalAlign, handleVerticalAlign, handleScreenShot, showImgChooser, insertImage, editComment, deleteComment, showHideComment, showHideAllComments, newComment, handleSum, autoSelectionFormula, handleMerge, handleBorder, handleFreeze, handleSort, createFilter, clearFilter, toolbarItemSelectedFunc, toolbarItemClickHandler, handleTextColor, handleTextBackground, getDataBySelectionNoCopy, getInlineStringNoStyle, rangeHightlightselected, editSheetName, cancelActiveImgItem, MAX_ZOOM_RATIO, MIN_ZOOM_RATIO, addSheet, indexToColumnChar, sortSelection, handleCopy, insertRowCol, deleteRowCol, hideSelected, showSelected, api, removeActiveImage, deleteSelectedCellText, jfrefreshgrid, handleLink, deleteSheet, opToPatch, orderbydatafiler, getFilterColumnValues, getFilterColumnColors, saveFilter, patchToOp, filterPatch, inverseRowColOptions, ensureSheetIndex, initSheetIndex, handleGlobalKeyDown, handlePasteByLeanklin, groupValuesRefresh } from '@leankylin-sheet/core';
 import React, { useContext, useRef, useState, useMemo, useCallback, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import produce, { applyPatches, enablePatches, produceWithPatches } from 'immer';
 import _ from 'lodash';
@@ -2056,12 +2056,13 @@ var ImgBoxs = function ImgBoxs() {
 };
 
 var NotationBoxes = function NotationBoxes() {
-  var _context$commentBoxes;
+  var _context$visibledatac, _context$commentBoxes;
   var _useContext = useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
     refs = _useContext.refs;
   var flowdata = getFlowdata(context);
+  var length = (_context$visibledatac = context.visibledatacolumn) === null || _context$visibledatac === void 0 ? void 0 : _context$visibledatac.length;
   useEffect(function () {
     if (flowdata) {
       var psShownCells = [];
@@ -2082,7 +2083,7 @@ var NotationBoxes = function NotationBoxes() {
         return showComments(ctx, psShownCells);
       });
     }
-  }, [flowdata, setContext]);
+  }, [flowdata, setContext, length]);
   return /*#__PURE__*/React.createElement("div", {
     id: "luckysheet-postil-showBoxs"
   }, _.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
@@ -2105,19 +2106,36 @@ var NotationBoxes = function NotationBoxes() {
     var commentId = "comment-box-".concat(rc);
     return /*#__PURE__*/React.createElement("div", {
       key: rc
-    }, /*#__PURE__*/React.createElement("canvas", {
-      id: "arrowCanvas-".concat(rc),
-      className: "arrowCanvas",
-      width: size.width,
-      height: size.height,
+    }, /*#__PURE__*/React.createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       style: {
         position: "absolute",
         left: size.left,
         top: size.top,
+        width: size.width,
+        height: size.height,
         zIndex: 100,
         pointerEvents: "none"
       }
-    }), /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("marker", {
+      id: "arrowhead",
+      markerWidth: "10",
+      markerHeight: "7",
+      refX: "9",
+      refY: "3.5",
+      orient: "auto"
+    }, /*#__PURE__*/React.createElement("polygon", {
+      points: "0 0, 10 3.5, 0 7",
+      fill: "#333"
+    }))), /*#__PURE__*/React.createElement("line", {
+      x1: size.fromX,
+      y1: size.fromY,
+      x2: size.toX,
+      y2: size.toY,
+      stroke: "#333",
+      strokeWidth: "1",
+      markerEnd: "url(#arrowhead)"
+    })), /*#__PURE__*/React.createElement("div", {
       id: commentId,
       className: "luckysheet-postil-show-main",
       style: {
@@ -3399,19 +3417,6 @@ var SheetOverlay = function SheetOverlay() {
     refs.cellArea.current.scrollLeft = context.scrollLeft;
     refs.cellArea.current.scrollTop = context.scrollTop;
   }, [context.scrollLeft, context.scrollTop, refs.cellArea, (_refs$cellArea$curren = refs.cellArea.current) === null || _refs$cellArea$curren === void 0 ? void 0 : _refs$cellArea$curren.scrollLeft, (_refs$cellArea$curren2 = refs.cellArea.current) === null || _refs$cellArea$curren2 === void 0 ? void 0 : _refs$cellArea$curren2.scrollTop]);
-  useLayoutEffect(function () {
-    if (context.commentBoxes || context.hoveredCommentBox || context.editingCommentBox) {
-      var _context$commentBoxes;
-      _.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
-        var _context$editingComme;
-        return v.rc !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
-      }), [context.hoveredCommentBox, context.editingCommentBox]).forEach(function (box) {
-        if (box) {
-          drawArrow(box.rc, box.size);
-        }
-      });
-    }
-  }, [context.commentBoxes, context.hoveredCommentBox, context.editingCommentBox]);
   useEffect(function () {
     document.addEventListener("mousemove", onMouseMove);
     return function () {

package/dist/index.js

@@ -2066,12 +2066,13 @@ var ImgBoxs = function ImgBoxs() {
 };
 
 var NotationBoxes = function NotationBoxes() {
-  var _context$commentBoxes;
+  var _context$visibledatac, _context$commentBoxes;
   var _useContext = React.useContext(WorkbookContext),
     context = _useContext.context,
     setContext = _useContext.setContext,
     refs = _useContext.refs;
   var flowdata = core.getFlowdata(context);
+  var length = (_context$visibledatac = context.visibledatacolumn) === null || _context$visibledatac === void 0 ? void 0 : _context$visibledatac.length;
   React.useEffect(function () {
     if (flowdata) {
       var psShownCells = [];
@@ -2092,7 +2093,7 @@ var NotationBoxes = function NotationBoxes() {
         return core.showComments(ctx, psShownCells);
       });
     }
-  }, [flowdata, setContext]);
+  }, [flowdata, setContext, length]);
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "luckysheet-postil-showBoxs"
   }, ___default['default'].concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
@@ -2115,19 +2116,36 @@ var NotationBoxes = function NotationBoxes() {
     var commentId = "comment-box-".concat(rc);
     return /*#__PURE__*/React__default['default'].createElement("div", {
       key: rc
-    }, /*#__PURE__*/React__default['default'].createElement("canvas", {
-      id: "arrowCanvas-".concat(rc),
-      className: "arrowCanvas",
-      width: size.width,
-      height: size.height,
+    }, /*#__PURE__*/React__default['default'].createElement("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
       style: {
         position: "absolute",
         left: size.left,
         top: size.top,
+        width: size.width,
+        height: size.height,
         zIndex: 100,
         pointerEvents: "none"
       }
-    }), /*#__PURE__*/React__default['default'].createElement("div", {
+    }, /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("marker", {
+      id: "arrowhead",
+      markerWidth: "10",
+      markerHeight: "7",
+      refX: "9",
+      refY: "3.5",
+      orient: "auto"
+    }, /*#__PURE__*/React__default['default'].createElement("polygon", {
+      points: "0 0, 10 3.5, 0 7",
+      fill: "#333"
+    }))), /*#__PURE__*/React__default['default'].createElement("line", {
+      x1: size.fromX,
+      y1: size.fromY,
+      x2: size.toX,
+      y2: size.toY,
+      stroke: "#333",
+      strokeWidth: "1",
+      markerEnd: "url(#arrowhead)"
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
       id: commentId,
       className: "luckysheet-postil-show-main",
       style: {
@@ -3409,19 +3427,6 @@ var SheetOverlay = function SheetOverlay() {
     refs.cellArea.current.scrollLeft = context.scrollLeft;
     refs.cellArea.current.scrollTop = context.scrollTop;
   }, [context.scrollLeft, context.scrollTop, refs.cellArea, (_refs$cellArea$curren = refs.cellArea.current) === null || _refs$cellArea$curren === void 0 ? void 0 : _refs$cellArea$curren.scrollLeft, (_refs$cellArea$curren2 = refs.cellArea.current) === null || _refs$cellArea$curren2 === void 0 ? void 0 : _refs$cellArea$curren2.scrollTop]);
-  React.useLayoutEffect(function () {
-    if (context.commentBoxes || context.hoveredCommentBox || context.editingCommentBox) {
-      var _context$commentBoxes;
-      ___default['default'].concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
-        var _context$editingComme;
-        return v.rc !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
-      }), [context.hoveredCommentBox, context.editingCommentBox]).forEach(function (box) {
-        if (box) {
-          core.drawArrow(box.rc, box.size);
-        }
-      });
-    }
-  }, [context.commentBoxes, context.hoveredCommentBox, context.editingCommentBox]);
   React.useEffect(function () {
     document.addEventListener("mousemove", onMouseMove);
     return function () {

package/dist/index.umd.js

@@ -92908,60 +92908,6 @@
       toY: y2
     };
   }
-  function drawArrow(rc, _ref, color, theta, headlen) {
-    var left = _ref.left,
-      top = _ref.top,
-      width = _ref.width,
-      height = _ref.height,
-      fromX = _ref.fromX,
-      fromY = _ref.fromY,
-      toX = _ref.toX,
-      toY = _ref.toY;
-    var canvas = document.getElementById("arrowCanvas-".concat(rc));
-    var ctx = canvas.getContext("2d");
-    if (!canvas || !ctx) return;
-    canvas.style.width = "".concat(width, "px");
-    canvas.style.height = "".concat(height, "px");
-    canvas.width = width;
-    canvas.height = height;
-    canvas.style.left = "".concat(left, "px");
-    canvas.style.top = "".concat(top, "px");
-    var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
-      canvasWidth = _canvas$getBoundingCl.width,
-      canvasHeight = _canvas$getBoundingCl.height;
-    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-    theta = theta || 30;
-    headlen = headlen || 6;
-    var arrowWidth = 1;
-    color = color || "#000";
-    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI;
-    var angle1 = (angle + theta) * Math.PI / 180;
-    var angle2 = (angle - theta) * Math.PI / 180;
-    var topX = headlen * Math.cos(angle1);
-    var topY = headlen * Math.sin(angle1);
-    var botX = headlen * Math.cos(angle2);
-    var botY = headlen * Math.sin(angle2);
-    ctx.save();
-    ctx.beginPath();
-    var arrowX = fromX - topX;
-    var arrowY = fromY - topY;
-    ctx.moveTo(arrowX, arrowY);
-    ctx.moveTo(fromX, fromY);
-    ctx.lineTo(toX, toY);
-    ctx.lineWidth = arrowWidth;
-    ctx.strokeStyle = color;
-    ctx.stroke();
-    arrowX = toX + topX;
-    arrowY = toY + topY;
-    ctx.moveTo(arrowX, arrowY);
-    ctx.lineTo(toX, toY);
-    arrowX = toX + botX;
-    arrowY = toY + botY;
-    ctx.lineTo(arrowX, arrowY);
-    ctx.fillStyle = color;
-    ctx.fill();
-    ctx.restore();
-  }
   var commentBoxProps = {
     defaultWidth: 144,
     defaultHeight: 84,
@@ -105156,12 +105102,13 @@
   };
 
   var NotationBoxes = function NotationBoxes() {
-    var _context$commentBoxes;
+    var _context$visibledatac, _context$commentBoxes;
     var _useContext = React.useContext(WorkbookContext),
       context = _useContext.context,
       setContext = _useContext.setContext,
       refs = _useContext.refs;
     var flowdata = getFlowdata(context);
+    var length = (_context$visibledatac = context.visibledatacolumn) === null || _context$visibledatac === void 0 ? void 0 : _context$visibledatac.length;
     React.useEffect(function () {
       if (flowdata) {
         var psShownCells = [];
@@ -105182,7 +105129,7 @@
           return showComments(ctx, psShownCells);
         });
       }
-    }, [flowdata, setContext]);
+    }, [flowdata, setContext, length]);
     return /*#__PURE__*/React__default['default'].createElement("div", {
       id: "luckysheet-postil-showBoxs"
     }, lodash.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
@@ -105205,19 +105152,36 @@
       var commentId = "comment-box-".concat(rc);
       return /*#__PURE__*/React__default['default'].createElement("div", {
         key: rc
-      }, /*#__PURE__*/React__default['default'].createElement("canvas", {
-        id: "arrowCanvas-".concat(rc),
-        className: "arrowCanvas",
-        width: size.width,
-        height: size.height,
+      }, /*#__PURE__*/React__default['default'].createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
         style: {
           position: "absolute",
           left: size.left,
           top: size.top,
+          width: size.width,
+          height: size.height,
           zIndex: 100,
           pointerEvents: "none"
         }
-      }), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, /*#__PURE__*/React__default['default'].createElement("defs", null, /*#__PURE__*/React__default['default'].createElement("marker", {
+        id: "arrowhead",
+        markerWidth: "10",
+        markerHeight: "7",
+        refX: "9",
+        refY: "3.5",
+        orient: "auto"
+      }, /*#__PURE__*/React__default['default'].createElement("polygon", {
+        points: "0 0, 10 3.5, 0 7",
+        fill: "#333"
+      }))), /*#__PURE__*/React__default['default'].createElement("line", {
+        x1: size.fromX,
+        y1: size.fromY,
+        x2: size.toX,
+        y2: size.toY,
+        stroke: "#333",
+        strokeWidth: "1",
+        markerEnd: "url(#arrowhead)"
+      })), /*#__PURE__*/React__default['default'].createElement("div", {
         id: commentId,
         className: "luckysheet-postil-show-main",
         style: {
@@ -106499,19 +106463,6 @@
       refs.cellArea.current.scrollLeft = context.scrollLeft;
       refs.cellArea.current.scrollTop = context.scrollTop;
     }, [context.scrollLeft, context.scrollTop, refs.cellArea, (_refs$cellArea$curren = refs.cellArea.current) === null || _refs$cellArea$curren === void 0 ? void 0 : _refs$cellArea$curren.scrollLeft, (_refs$cellArea$curren2 = refs.cellArea.current) === null || _refs$cellArea$curren2 === void 0 ? void 0 : _refs$cellArea$curren2.scrollTop]);
-    React.useLayoutEffect(function () {
-      if (context.commentBoxes || context.hoveredCommentBox || context.editingCommentBox) {
-        var _context$commentBoxes;
-        lodash.concat((_context$commentBoxes = context.commentBoxes) === null || _context$commentBoxes === void 0 ? void 0 : _context$commentBoxes.filter(function (v) {
-          var _context$editingComme;
-          return v.rc !== ((_context$editingComme = context.editingCommentBox) === null || _context$editingComme === void 0 ? void 0 : _context$editingComme.rc);
-        }), [context.hoveredCommentBox, context.editingCommentBox]).forEach(function (box) {
-          if (box) {
-            drawArrow(box.rc, box.size);
-          }
-        });
-      }
-    }, [context.commentBoxes, context.hoveredCommentBox, context.editingCommentBox]);
     React.useEffect(function () {
       document.addEventListener("mousemove", onMouseMove);
       return function () {