@fileverse-dev/fortune-react 1.1.83 → 1.1.85

package/es/components/SheetList/SheetHiddenButton.js

@@ -22,7 +22,7 @@ var SheetHiddenButton = function SheetHiddenButton(_a) {
       showSheet();
     },
     tabIndex: 0,
-    className: "fortune-sheet-hidden-button"
+    className: "fortune-sheet-hidden-button mb-2"
   }, (sheet === null || sheet === void 0 ? void 0 : sheet.hide) === 1 ? (/*#__PURE__*/React.createElement(SVGIcon, {
     name: "hidden",
     width: 16,

package/es/components/SheetList/index.css

@@ -18,7 +18,7 @@
 }
 
 .fortune-sheet-list-item-name {
-  margin-right: 15px;
+  /* margin-right: 15px; */
   position: relative;
 }
 
@@ -34,10 +34,9 @@
 }
 
 .fortune-sheet-hidden-button {
-  margin-right: 15px;
   display: inline-flex;
-  position: absolute;
-  right: 0;
+  /* position: absolute;
+  right: 0; */
   justify-content: flex-end;
 }
 

package/es/components/SheetOverlay/ColumnHeader.js

@@ -3,6 +3,7 @@ import _ from "lodash";
 import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
 import WorkbookContext from "../../context";
 import SVGIcon from "../SVGIcon";
+import { useColumnDragAndDrop } from "./drag_and_drop/column-helpers";
 var ColumnHeader = function ColumnHeader() {
   var _a;
   var _b = useContext(WorkbookContext),
@@ -34,6 +35,14 @@ var ColumnHeader = function ColumnHeader() {
     }
     return context.scrollLeft;
   }, [context.visibledatacolumn, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollLeft]);
+  var selectedLocationRef = useRef(selectedLocation);
+  useEffect(function () {
+    selectedLocationRef.current = selectedLocation;
+  }, [selectedLocation]);
+  var _f = useColumnDragAndDrop(containerRef, selectedLocationRef),
+    initiateDrag = _f.initiateDrag,
+    getColIndexClicked = _f.getColIndexClicked,
+    isColDoubleClicked = _f.isColDoubleClicked;
   var onMouseMove = useCallback(function (e) {
     var _a;
     if (context.luckysheet_cols_change_size) {
@@ -64,11 +73,28 @@ var ColumnHeader = function ColumnHeader() {
     }]);
   }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
   var onMouseDown = useCallback(function (e) {
-    var nativeEvent = e.nativeEvent;
-    setContext(function (draftCtx) {
-      handleColumnHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
-    });
-  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
+    if (e.button !== 0) return;
+    var targetEl = e.target;
+    if (targetEl.closest(".fortune-cols-change-size") || targetEl.closest(".fortune-cols-freeze-handle") || targetEl.closest(".header-arrow")) return;
+    var headerEl = containerRef.current;
+    if (!headerEl) return;
+    var clickedColIndex = getColIndexClicked(e.pageX, headerEl);
+    if (clickedColIndex < 0) return;
+    if (isColDoubleClicked(clickedColIndex)) {
+      setContext(function (draft) {
+        draft.luckysheet_scroll_status = true;
+      });
+    } else {
+      var nativeEvent_1 = e.nativeEvent;
+      setContext(function (draft) {
+        handleColumnHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      });
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    initiateDrag(clickedColIndex, e.pageX);
+  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext, getColIndexClicked, isColDoubleClicked, initiateDrag]);
   var onMouseLeave = useCallback(function () {
     if (context.luckysheet_cols_change_size) {
       return;

package/es/components/SheetOverlay/RowHeader.js

@@ -2,6 +2,7 @@ import { rowLocation, rowLocationByIndex, selectTitlesMap, selectTitlesRange, ha
 import _ from "lodash";
 import React, { useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
 import WorkbookContext from "../../context";
+import { useRowDragAndDrop } from "./drag_and_drop/row-helpers";
 var RowHeader = function RowHeader() {
   var _a;
   var _b = useContext(WorkbookContext),
@@ -33,21 +34,25 @@ var RowHeader = function RowHeader() {
     }
     return context.scrollTop;
   }, [context.visibledatarow, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollTop]);
+  var selectedLocationRef = useRef(selectedLocation);
+  useEffect(function () {
+    selectedLocationRef.current = selectedLocation;
+  }, [selectedLocation]);
   var onMouseMove = useCallback(function (e) {
     var _a;
-    if (context.luckysheet_rows_change_size) {
-      return;
-    }
-    var mouseY = e.pageY - containerRef.current.getBoundingClientRect().top - window.scrollY;
-    var _y = mouseY + containerRef.current.scrollTop;
+    if (context.luckysheet_rows_change_size) return;
+    var container = containerRef.current;
+    if (!container) return;
+    var mouseY = e.pageY - container.getBoundingClientRect().top - window.scrollY;
+    var _y = mouseY + container.scrollTop;
     var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId];
     var _b = fixPositionOnFrozenCells(freeze, 0, _y, 0, mouseY),
       y = _b.y,
       inHorizontalFreeze = _b.inHorizontalFreeze;
-    var row_location = rowLocation(y, context.visibledatarow);
-    var row_pre = row_location[0],
-      row = row_location[1],
-      row_index = row_location[2];
+    var _c = rowLocation(y, context.visibledatarow),
+      row_pre = _c[0],
+      row = _c[1],
+      row_index = _c[2];
     if (row_pre !== hoverLocation.row_pre || row !== hoverLocation.row) {
       setHoverLocation({
         row_pre: row_pre,
@@ -57,16 +62,35 @@ var RowHeader = function RowHeader() {
       setHoverInFreeze(inHorizontalFreeze);
     }
   }, [context.luckysheet_rows_change_size, context.visibledatarow, hoverLocation.row, hoverLocation.row_pre, refs.globalCache.freezen, context.currentSheetId]);
+  var _f = useRowDragAndDrop(containerRef, selectedLocationRef),
+    initiateDrag = _f.initiateDrag,
+    getRowIndexClicked = _f.getRowIndexClicked,
+    isRowDoubleClicked = _f.isRowDoubleClicked;
   var onMouseDown = useCallback(function (e) {
-    var nativeEvent = e.nativeEvent;
-    setContext(function (draftCtx) {
-      handleRowHeaderMouseDown(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
-    });
-  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
-  var onMouseLeave = useCallback(function () {
-    if (context.luckysheet_rows_change_size) {
+    if (e.button !== 0) return;
+    var targetEl = e.target;
+    if (targetEl.closest(".fortune-rows-change-size") || targetEl.closest(".fortune-rows-freeze-handle")) return;
+    var headerEl = containerRef.current;
+    if (!headerEl) return;
+    var clickedRowIndex = getRowIndexClicked(e.pageY, headerEl);
+    if (clickedRowIndex < 0) return;
+    if (isRowDoubleClicked(clickedRowIndex)) {
+      setContext(function (draft) {
+        draft.luckysheet_scroll_status = true;
+      });
+    } else {
+      var nativeEvent_1 = e.nativeEvent;
+      setContext(function (draft) {
+        handleRowHeaderMouseDown(draft, refs.globalCache, nativeEvent_1, containerRef.current, refs.cellInput.current, refs.fxInput.current);
+      });
       return;
     }
+    e.preventDefault();
+    e.stopPropagation();
+    initiateDrag(clickedRowIndex, e.pageY);
+  }, [refs.globalCache, context.visibledatarow, context.currentSheetId, setContext]);
+  var onMouseLeave = useCallback(function () {
+    if (context.luckysheet_rows_change_size) return;
     setHoverLocation({
       row: -1,
       row_pre: -1,

package/es/components/SheetOverlay/drag_and_drop/column-helpers.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export declare const useColumnDragAndDrop: (containerRef: RefObject<HTMLDivElement | null>, selectedLocationRef: RefObject<any[]>) => {
+    initiateDrag: (clickedColIndex: number, startX: number) => void;
+    getColIndexClicked: (pageX: number, headerEl: HTMLDivElement) => number;
+    isColDoubleClicked: (clickedColIndex: number) => boolean;
+};

package/es/components/SheetOverlay/drag_and_drop/column-helpers.js

@@ -0,0 +1,235 @@
+import { useContext, useRef } from "react";
+import { fixPositionOnFrozenCells, getSheetIndex, colLocation, colLocationByIndex, updateContextWithSheetData } from "@fileverse-dev/fortune-core";
+import WorkbookContext from "../../../context";
+export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, selectedLocationRef) {
+  var DOUBLE_CLICK_MS = 300;
+  var START_DRAG_THRESHOLD_PX = 6;
+  var clickRef = useRef({
+    lastTime: 0,
+    lastCol: -1
+  });
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
+  var dragRef = useRef({
+    mouseDown: false,
+    startX: 0,
+    source: -1,
+    active: false,
+    lineEl: null,
+    ghostEl: null,
+    onDocMove: null,
+    onDocUp: null,
+    prevUserSelect: "",
+    prevWebkitUserSelect: "",
+    lastNativeEvent: null,
+    ghostWidthPx: 60
+  });
+  var removeDragLine = function removeDragLine() {
+    var _a = dragRef.current,
+      lineEl = _a.lineEl,
+      ghostEl = _a.ghostEl;
+    try {
+      if (lineEl === null || lineEl === void 0 ? void 0 : lineEl.parentElement) lineEl.parentElement.removeChild(lineEl);
+    } catch (_b) {}
+    try {
+      if (ghostEl === null || ghostEl === void 0 ? void 0 : ghostEl.parentElement) ghostEl.parentElement.removeChild(ghostEl);
+    } catch (_c) {}
+    dragRef.current.lineEl = null;
+    dragRef.current.ghostEl = null;
+    dragRef.current.active = false;
+  };
+  var getColIndexClicked = function getColIndexClicked(pageX, headerEl) {
+    var _a;
+    var rect = headerEl.getBoundingClientRect();
+    var mouseXInHeader = pageX - rect.left - window.scrollX;
+    var localXInHeader = mouseXInHeader + headerEl.scrollLeft;
+    var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId];
+    var adjustedX = fixPositionOnFrozenCells(freeze, localXInHeader, 0, mouseXInHeader, 0).x;
+    var _b = colLocation(adjustedX, context.visibledatacolumn),
+      colIndex = _b[2];
+    return colIndex;
+  };
+  var isColDoubleClicked = function isColDoubleClicked(clickedColIndex) {
+    var now = performance.now();
+    var isDoubleClicked = now - clickRef.current.lastTime < DOUBLE_CLICK_MS && clickRef.current.lastCol === clickedColIndex;
+    clickRef.current.lastTime = now;
+    clickRef.current.lastCol = clickedColIndex;
+    return isDoubleClicked;
+  };
+  var computeInsertionFromPageX = function computeInsertionFromPageX(pageX) {
+    var _a, _b, _c, _d, _e, _f;
+    var workbookEl = containerRef.current;
+    if (!workbookEl) return {
+      insertionIndex: -1,
+      lineLeftPx: 0,
+      mouseXInWorkbook: 0
+    };
+    var wbRect = workbookEl.getBoundingClientRect();
+    var mouseXInWorkbook = pageX - wbRect.left - window.scrollX;
+    var localXInWorkbook = mouseXInWorkbook + ((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollLeft) !== null && _b !== void 0 ? _b : context.scrollLeft);
+    var freeze = (_c = refs.globalCache.freezen) === null || _c === void 0 ? void 0 : _c[context.currentSheetId];
+    var xWorkbook = fixPositionOnFrozenCells(freeze, localXInWorkbook, 0, mouseXInWorkbook, 0).x;
+    var _g = colLocation(xWorkbook, context.visibledatacolumn),
+      colLeftPx = _g[0],
+      colRightPx = _g[1],
+      hoveredColIndex = _g[2];
+    var colMidPx = (colLeftPx + colRightPx) / 2;
+    var insertionIndex = hoveredColIndex + (xWorkbook > colMidPx ? 1 : 0);
+    var sheetIdx = getSheetIndex(context, context.currentSheetId);
+    var sheetLocal = sheetIdx == null ? null : context.luckysheetfile[sheetIdx];
+    var maxCols = (_f = (_e = (_d = sheetLocal === null || sheetLocal === void 0 ? void 0 : sheetLocal.data) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : context.visibledatacolumn.length;
+    insertionIndex = Math.max(0, Math.min(maxCols, insertionIndex));
+    var lineLeftPx = xWorkbook > colMidPx ? colRightPx : colLeftPx;
+    return {
+      insertionIndex: insertionIndex,
+      lineLeftPx: lineLeftPx,
+      mouseXInWorkbook: mouseXInWorkbook
+    };
+  };
+  var createInsertionLine = function createInsertionLine(host) {
+    var el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.top = "0px";
+    el.style.bottom = "0px";
+    el.style.width = "2px";
+    el.style.background = "#EFC703";
+    el.style.zIndex = "9999";
+    el.style.pointerEvents = "none";
+    host.appendChild(el);
+    return el;
+  };
+  var createGhost = function createGhost(host) {
+    var el = document.createElement("div");
+    el.style.position = "fixed";
+    el.style.top = "135px";
+    el.style.height = "".concat(window.innerHeight, "px");
+    el.style.boxSizing = "border-box";
+    el.style.padding = "6px 8px";
+    el.style.background = "rgba(239,199,3,0.10)";
+    el.style.border = "1px solid #EFC703";
+    el.style.borderRadius = "6px";
+    el.style.zIndex = "10000";
+    el.style.pointerEvents = "none";
+    el.style.display = "flex";
+    el.style.alignItems = "start";
+    el.style.justifyContent = "center";
+    el.style.fontSize = "12px";
+    el.style.fontWeight = "500";
+    var ghostWidthPx = 60;
+    var ghostLabel = "Col ".concat(String.fromCharCode(65 + dragRef.current.source));
+    var selectedBlock = selectedLocationRef.current.find(function (s) {
+      return s.c1 <= dragRef.current.source && dragRef.current.source <= s.c2;
+    });
+    if (selectedBlock) {
+      ghostWidthPx = Math.max(60, selectedBlock.col - selectedBlock.col_pre - 1);
+      var count = selectedBlock.c2 - selectedBlock.c1 + 1;
+      ghostLabel = count > 1 ? "".concat(count, " cols") : "Col ".concat(String.fromCharCode(65 + selectedBlock.c1));
+    } else {
+      var _a = colLocationByIndex(dragRef.current.source, context.visibledatacolumn),
+        pre = _a[0],
+        end = _a[1];
+      var sourceColWidth = end - pre - 1;
+      ghostWidthPx = Math.max(60, sourceColWidth);
+    }
+    el.style.width = "".concat(ghostWidthPx, "px");
+    el.textContent = ghostLabel;
+    host.appendChild(el);
+    return {
+      el: el,
+      ghostWidthPx: ghostWidthPx
+    };
+  };
+  var isDragActivated = function isDragActivated(host, pixelDeltaX) {
+    if (dragRef.current.active) return true;
+    if (pixelDeltaX < START_DRAG_THRESHOLD_PX) return false;
+    dragRef.current.active = true;
+    dragRef.current.prevUserSelect = document.body.style.userSelect;
+    dragRef.current.prevWebkitUserSelect = document.body.style.webkitUserSelect;
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+    dragRef.current.lineEl = createInsertionLine(host);
+    var _a = createGhost(host),
+      el = _a.el,
+      ghostWidthPx = _a.ghostWidthPx;
+    dragRef.current.ghostEl = el;
+    dragRef.current.ghostWidthPx = ghostWidthPx;
+    return true;
+  };
+  var handleColumnDrag = function handleColumnDrag(ev) {
+    if (!dragRef.current.mouseDown) return;
+    dragRef.current.lastNativeEvent = ev;
+    var host = containerRef.current;
+    if (!host) return;
+    var dragOffset = Math.abs(ev.pageX - dragRef.current.startX);
+    if (!isDragActivated(host, dragOffset)) return;
+    var lineLeftPx = computeInsertionFromPageX(ev.pageX).lineLeftPx;
+    var ghostPosOffset = dragRef.current.startX > ev.pageX ? 0 : 120;
+    if (dragRef.current.lineEl) {
+      dragRef.current.lineEl.style.left = "".concat(lineLeftPx, "px");
+    }
+    if (dragRef.current.ghostEl) {
+      dragRef.current.ghostEl.style.left = "".concat(ev.pageX - ghostPosOffset, "px");
+    }
+  };
+  var handleColumnDragEnd = function handleColumnDragEnd(ev) {
+    if (!dragRef.current.mouseDown) return;
+    dragRef.current.mouseDown = false;
+    try {
+      document.body.style.userSelect = dragRef.current.prevUserSelect || "";
+      document.body.style.webkitUserSelect = dragRef.current.prevWebkitUserSelect || "";
+    } catch (_a) {}
+    if (dragRef.current.active) {
+      var finalInsertionIndex_1 = computeInsertionFromPageX(ev.pageX).insertionIndex;
+      var sourceIndex_1 = dragRef.current.source;
+      var sheetIdx_1 = getSheetIndex(context, context.currentSheetId);
+      if (sheetIdx_1 != null && sourceIndex_1 >= 0 && Number.isFinite(finalInsertionIndex_1) && finalInsertionIndex_1 >= 0) {
+        setContext(function (draft) {
+          var _a, _b;
+          var _sheet = draft.luckysheetfile[sheetIdx_1];
+          if (!(_sheet === null || _sheet === void 0 ? void 0 : _sheet.data)) return;
+          var rows = _sheet.data;
+          if (rows.length === 0) return;
+          var numCols = (_b = (_a = rows[0]) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
+          if (sourceIndex_1 < 0 || sourceIndex_1 >= numCols) return;
+          var targetIndex = finalInsertionIndex_1;
+          if (targetIndex > sourceIndex_1) targetIndex -= 1;
+          for (var i = 0; i < rows.length; i += 1) {
+            var row = rows[i];
+            if (!row || sourceIndex_1 >= row.length) continue;
+            var cellData = row.splice(sourceIndex_1, 1)[0];
+            if (targetIndex < 0) targetIndex = 0;
+            if (targetIndex > row.length) targetIndex = row.length;
+            row.splice(targetIndex, 0, cellData);
+          }
+          _sheet.data = rows;
+          updateContextWithSheetData(draft, _sheet.data);
+        });
+      }
+    }
+    removeDragLine();
+    dragRef.current.active = false;
+    dragRef.current.source = -1;
+    if (dragRef.current.onDocMove) document.removeEventListener("mousemove", dragRef.current.onDocMove);
+    if (dragRef.current.onDocUp) document.removeEventListener("mouseup", dragRef.current.onDocUp);
+    dragRef.current.onDocMove = null;
+    dragRef.current.onDocUp = null;
+  };
+  var initiateDrag = function initiateDrag(clickedColIndex, startX) {
+    dragRef.current.mouseDown = true;
+    dragRef.current.startX = startX;
+    dragRef.current.source = clickedColIndex;
+    dragRef.current.active = false;
+    console.log("initiateDrag", startX);
+    dragRef.current.onDocMove = handleColumnDrag;
+    dragRef.current.onDocUp = handleColumnDragEnd;
+    document.addEventListener("mousemove", handleColumnDrag);
+    document.addEventListener("mouseup", handleColumnDragEnd);
+  };
+  return {
+    initiateDrag: initiateDrag,
+    getColIndexClicked: getColIndexClicked,
+    isColDoubleClicked: isColDoubleClicked
+  };
+};

package/es/components/SheetOverlay/drag_and_drop/row-helpers.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from "react";
+export declare const useRowDragAndDrop: (containerRef: RefObject<HTMLDivElement | null>, selectedLocationRef: RefObject<any[]>) => {
+    initiateDrag: (clickedRowIndex: number, startY: number) => void;
+    getRowIndexClicked: (pageY: number, headerEl: HTMLDivElement) => number;
+    isRowDoubleClicked: (clickedRowIndex: number) => boolean;
+};

package/es/components/SheetOverlay/drag_and_drop/row-helpers.js

@@ -0,0 +1,226 @@
+import { useContext, useRef } from "react";
+import { fixPositionOnFrozenCells, getSheetIndex, rowLocation, rowLocationByIndex, updateContextWithSheetData } from "@fileverse-dev/fortune-core";
+import WorkbookContext from "../../../context";
+export var useRowDragAndDrop = function useRowDragAndDrop(containerRef, selectedLocationRef) {
+  var DOUBLE_MS = 300;
+  var START_DRAG_THRESHOLD_PX = 6;
+  var clickRef = useRef({
+    lastTime: 0,
+    lastRow: -1
+  });
+  var _a = useContext(WorkbookContext),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
+  var dragRef = useRef({
+    mouseDown: false,
+    startY: 0,
+    source: -1,
+    active: false,
+    lineEl: null,
+    ghostEl: null,
+    onDocMove: null,
+    onDocUp: null,
+    prevUserSelect: "",
+    prevWebkitUserSelect: "",
+    lastNativeEvent: null,
+    ghostHeightPx: 24
+  });
+  var removeDragLine = function removeDragLine() {
+    var _a = dragRef.current,
+      lineEl = _a.lineEl,
+      ghostEl = _a.ghostEl;
+    try {
+      if (lineEl === null || lineEl === void 0 ? void 0 : lineEl.parentElement) lineEl.parentElement.removeChild(lineEl);
+    } catch (_b) {}
+    try {
+      if (ghostEl === null || ghostEl === void 0 ? void 0 : ghostEl.parentElement) ghostEl.parentElement.removeChild(ghostEl);
+    } catch (_c) {}
+    dragRef.current.lineEl = null;
+    dragRef.current.ghostEl = null;
+    dragRef.current.active = false;
+  };
+  var getRowIndexClicked = function getRowIndexClicked(pageY, headerEl) {
+    var _a;
+    var rect = headerEl.getBoundingClientRect();
+    var mouseYInHeader = pageY - rect.top - window.scrollY;
+    var localYInHeader = mouseYInHeader + headerEl.scrollTop;
+    var freeze = (_a = refs.globalCache.freezen) === null || _a === void 0 ? void 0 : _a[context.currentSheetId];
+    var adjustedY = fixPositionOnFrozenCells(freeze, 0, localYInHeader, 0, mouseYInHeader).y;
+    var _b = rowLocation(adjustedY, context.visibledatarow),
+      rowIndex = _b[2];
+    return rowIndex;
+  };
+  var isRowDoubleClicked = function isRowDoubleClicked(clickedRowIndex) {
+    var now = performance.now();
+    var isDoubleClicked = now - clickRef.current.lastTime < DOUBLE_MS && clickRef.current.lastRow === clickedRowIndex;
+    clickRef.current.lastTime = now;
+    clickRef.current.lastRow = clickedRowIndex;
+    return isDoubleClicked;
+  };
+  var computeInsertionFromPageY = function computeInsertionFromPageY(pageY) {
+    var _a, _b, _c, _d, _e;
+    var workbookEl = containerRef.current;
+    if (!workbookEl) return {
+      insertionIndex: -1,
+      lineTopPx: 0,
+      mouseYInWorkbook: 0
+    };
+    var wbRect = workbookEl.getBoundingClientRect();
+    var mouseYInWorkbook = pageY - wbRect.top - window.scrollY;
+    var localYInWorkbook = mouseYInWorkbook + ((_b = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : context.scrollTop);
+    var freeze = (_c = refs.globalCache.freezen) === null || _c === void 0 ? void 0 : _c[context.currentSheetId];
+    var yWorkbook = fixPositionOnFrozenCells(freeze, 0, localYInWorkbook, 0, mouseYInWorkbook).y;
+    var _f = rowLocation(yWorkbook, context.visibledatarow),
+      rowTopPx = _f[0],
+      rowBottomPx = _f[1],
+      hoveredRowIndex = _f[2];
+    var rowMidPx = (rowTopPx + rowBottomPx) / 2;
+    var insertionIndex = hoveredRowIndex + (yWorkbook > rowMidPx ? 1 : 0);
+    var sheetIdx = getSheetIndex(context, context.currentSheetId);
+    var sheetLocal = sheetIdx == null ? null : context.luckysheetfile[sheetIdx];
+    var maxRows = (_e = (_d = sheetLocal === null || sheetLocal === void 0 ? void 0 : sheetLocal.data) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : context.visibledatarow.length;
+    insertionIndex = Math.max(0, Math.min(maxRows, insertionIndex));
+    var lineTopPx = yWorkbook > rowMidPx ? rowBottomPx : rowTopPx;
+    return {
+      insertionIndex: insertionIndex,
+      lineTopPx: lineTopPx,
+      mouseYInWorkbook: mouseYInWorkbook
+    };
+  };
+  var createInsertionLine = function createInsertionLine(host) {
+    var el = document.createElement("div");
+    el.style.position = "absolute";
+    el.style.left = "0px";
+    el.style.right = "0px";
+    el.style.height = "2px";
+    el.style.background = "#EFC703";
+    el.style.zIndex = "9999";
+    el.style.pointerEvents = "none";
+    host.appendChild(el);
+    return el;
+  };
+  var createGhost = function createGhost(host) {
+    var el = document.createElement("div");
+    el.style.position = "fixed";
+    el.style.left = "55px";
+    el.style.width = "".concat(window.innerWidth, "px");
+    el.style.boxSizing = "border-box";
+    el.style.padding = "6px 8px";
+    el.style.background = "rgba(239,199,3,0.10)";
+    el.style.border = "1px solid #EFC703";
+    el.style.borderRadius = "6px";
+    el.style.zIndex = "10000";
+    el.style.pointerEvents = "none";
+    el.style.display = "flex";
+    el.style.alignItems = "center";
+    el.style.fontSize = "12px";
+    el.style.fontWeight = "500";
+    var ghostHeightPx = 24;
+    var ghostLabel = "".concat(dragRef.current.source + 1, " row");
+    var selectedBlock = selectedLocationRef.current.find(function (s) {
+      return s.r1 <= dragRef.current.source && dragRef.current.source <= s.r2;
+    });
+    if (selectedBlock) {
+      ghostHeightPx = Math.max(24, selectedBlock.row - selectedBlock.row_pre - 1);
+      var count = selectedBlock.r2 - selectedBlock.r1 + 1;
+      ghostLabel = count > 1 ? "".concat(count, " rows") : "".concat(selectedBlock.r1 + 1, " row");
+    } else {
+      var _a = rowLocationByIndex(dragRef.current.source, context.visibledatarow),
+        pre = _a[0],
+        end = _a[1];
+      var sourceRowHeight = end - pre - 1;
+      ghostHeightPx = Math.max(24, sourceRowHeight);
+    }
+    el.style.height = "".concat(ghostHeightPx, "px");
+    el.textContent = ghostLabel;
+    host.appendChild(el);
+    return {
+      el: el,
+      ghostHeightPx: ghostHeightPx
+    };
+  };
+  var isDragActivated = function isDragActivated(host, pixelDeltaY) {
+    if (dragRef.current.active) return true;
+    if (pixelDeltaY < START_DRAG_THRESHOLD_PX) return false;
+    dragRef.current.active = true;
+    dragRef.current.prevUserSelect = document.body.style.userSelect;
+    dragRef.current.prevWebkitUserSelect = document.body.style.webkitUserSelect;
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+    dragRef.current.lineEl = createInsertionLine(host);
+    var _a = createGhost(host),
+      el = _a.el,
+      ghostHeightPx = _a.ghostHeightPx;
+    dragRef.current.ghostEl = el;
+    dragRef.current.ghostHeightPx = ghostHeightPx;
+    return true;
+  };
+  var handleRowDrag = function handleRowDrag(ev) {
+    if (!dragRef.current.mouseDown) return;
+    dragRef.current.lastNativeEvent = ev;
+    var host = containerRef.current;
+    if (!host) return;
+    var dragOffset = Math.abs(ev.pageY - dragRef.current.startY);
+    if (!isDragActivated(host, dragOffset)) return;
+    var lineTopPx = computeInsertionFromPageY(ev.pageY).lineTopPx;
+    var ghostPosOffset = dragRef.current.startY > ev.pageY ? 0 : 25;
+    if (dragRef.current.lineEl) {
+      dragRef.current.lineEl.style.top = "".concat(lineTopPx, "px");
+    }
+    if (dragRef.current.ghostEl) {
+      dragRef.current.ghostEl.style.top = "".concat(ev.pageY - ghostPosOffset, "px");
+    }
+  };
+  var handleRowDragEnd = function handleRowDragEnd(ev) {
+    if (!dragRef.current.mouseDown) return;
+    dragRef.current.mouseDown = false;
+    try {
+      document.body.style.userSelect = dragRef.current.prevUserSelect || "";
+      document.body.style.webkitUserSelect = dragRef.current.prevWebkitUserSelect || "";
+    } catch (_a) {}
+    if (dragRef.current.active) {
+      var finalInsertionIndex_1 = computeInsertionFromPageY(ev.pageY).insertionIndex;
+      var sourceIndex_1 = dragRef.current.source;
+      var sheetIdx_1 = getSheetIndex(context, context.currentSheetId);
+      if (sheetIdx_1 != null && sourceIndex_1 >= 0 && Number.isFinite(finalInsertionIndex_1) && finalInsertionIndex_1 >= 0) {
+        setContext(function (draft) {
+          var _sheet = draft.luckysheetfile[sheetIdx_1];
+          if (!(_sheet === null || _sheet === void 0 ? void 0 : _sheet.data)) return;
+          var rows = _sheet.data;
+          if (sourceIndex_1 < 0 || sourceIndex_1 >= rows.length) return;
+          var targetIndex = finalInsertionIndex_1;
+          if (targetIndex > sourceIndex_1) targetIndex -= 1;
+          var rowData = rows.splice(sourceIndex_1, 1)[0];
+          if (targetIndex < 0) targetIndex = 0;
+          if (targetIndex > rows.length) targetIndex = rows.length;
+          rows.splice(targetIndex, 0, rowData);
+          _sheet.data = rows;
+          updateContextWithSheetData(draft, _sheet.data);
+        });
+      }
+    }
+    removeDragLine();
+    dragRef.current.active = false;
+    dragRef.current.source = -1;
+    if (dragRef.current.onDocMove) document.removeEventListener("mousemove", dragRef.current.onDocMove);
+    if (dragRef.current.onDocUp) document.removeEventListener("mouseup", dragRef.current.onDocUp);
+    dragRef.current.onDocMove = null;
+    dragRef.current.onDocUp = null;
+  };
+  var initiateDrag = function initiateDrag(clickedRowIndex, startY) {
+    dragRef.current.mouseDown = true;
+    dragRef.current.startY = startY;
+    dragRef.current.source = clickedRowIndex;
+    dragRef.current.active = false;
+    dragRef.current.onDocMove = handleRowDrag;
+    dragRef.current.onDocUp = handleRowDragEnd;
+    document.addEventListener("mousemove", handleRowDrag);
+    document.addEventListener("mouseup", handleRowDragEnd);
+  };
+  return {
+    initiateDrag: initiateDrag,
+    getRowIndexClicked: getRowIndexClicked,
+    isRowDoubleClicked: isRowDoubleClicked
+  };
+};

package/es/components/SheetTab/index.css

@@ -215,6 +215,19 @@
   background-color: hsl(var(--color-button-secondary-hover)) !important;
 }
 
+.fortune-sheettab-button-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  background-color: hsl(var(--color-bg-secondary)) !important;
+}
+
+.fortune-sheettab-button-arrow:hover {
+  background-color: hsl(var(--color-button-secondary-hover)) !important;
+}
+
 .luckysheet-noselected-text {
   -moz-user-select: -moz-test;
   -khtml-user-select: none;