@fileverse-dev/fortune-react 1.1.83 → 1.1.85

package/es/components/SheetTab/index.js

@@ -217,7 +217,7 @@ var SheetTab = function SheetTab() {
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(IconButton, {
     name: "arrow-doubleleft",
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab-button-arrow border-none shadow-none",
     onClick: function onClick() {
       scrollBy(-scrollDelta);
     },
@@ -235,7 +235,7 @@ var SheetTab = function SheetTab() {
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(IconButton, {
     name: "arrow-doubleright",
-    className: "fortune-sheettab-button border-none shadow-none",
+    className: "fortune-sheettab-button-arrow border-none shadow-none",
     onClick: function onClick() {
       scrollBy(scrollDelta);
     },

package/es/components/Workbook/index.d.ts

@@ -12,21 +12,21 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
     applyOp: (ops: Op[]) => void;
     getCryptoPrice: typeof getCryptoPrice;
     getCellValue: (row: number, column: number, options?: api.CommonOptions & {
-        type?: "rt" | "m" | "error" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle | undefined;
+        type?: "error" | "rt" | "m" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle | undefined;
     }) => any;
     onboardingActiveCell: (functionName: string) => void;
     initializeComment: (row: number, column: number) => void;
     updateSheetLiveQueryList: (subsheetIndex: number, _data: import("@fileverse-dev/fortune-core").LiveQueryData) => void;
     removeFromLiveQueryList: (subSheetIndex: number, id: string) => void;
     setCellValue: (row: number, column: number, value: any, options?: api.CommonOptions & {
-        type?: "rt" | "m" | "error" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle | undefined;
+        type?: "error" | "rt" | "m" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle | undefined;
     }) => void;
     setCellError: (row: number, column: number, errorMessage: {
         title: string;
         message: string;
     }) => void;
     clearCell: (row: number, column: number, options?: api.CommonOptions) => void;
-    setCellFormat: (row: number, column: number, attr: "rt" | "m" | "error" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, options?: api.CommonOptions) => void;
+    setCellFormat: (row: number, column: number, attr: "error" | "rt" | "m" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, options?: api.CommonOptions) => void;
     autoFillCell: (copyRange: import("@fileverse-dev/fortune-core").SingleRange, applyRange: import("@fileverse-dev/fortune-core").SingleRange, direction: "left" | "right" | "down" | "up") => void;
     freeze: (type: "column" | "both" | "row", range: {
         row: number;
@@ -57,7 +57,7 @@ declare const Workbook: React.ForwardRefExoticComponent<Settings & AdditionalPro
     getHtmlByRange: (range: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => string | null;
     setSelection: (range: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
     setCellValuesByRange: (data: any[][], range: import("@fileverse-dev/fortune-core").SingleRange, options?: api.CommonOptions) => void;
-    setCellFormatByRange: (attr: "rt" | "m" | "error" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, range: import("@fileverse-dev/fortune-core").SingleRange | import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
+    setCellFormatByRange: (attr: "error" | "rt" | "m" | "v" | "mc" | "f" | "ct" | "qp" | "spl" | "bg" | "lo" | "baseValue" | "baseCurrency" | "baseCurrencyPrice" | "isDataBlockFormula" | "ps" | "hl" | keyof import("@fileverse-dev/fortune-core").CellStyle, value: any, range: import("@fileverse-dev/fortune-core").SingleRange | import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
     mergeCells: (ranges: import("@fileverse-dev/fortune-core").Range, type: string, options?: api.CommonOptions) => void;
     cancelMerge: (ranges: import("@fileverse-dev/fortune-core").Range, options?: api.CommonOptions) => void;
     getAllSheets: () => SheetType[];

package/lib/components/SheetList/SheetHiddenButton.js

@@ -31,7 +31,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.default.createElement(_SVGIcon.default, {
     name: "hidden",
     width: 16,

package/lib/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/lib/components/SheetOverlay/ColumnHeader.js

@@ -10,6 +10,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../../context"));
 var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _columnHelpers = require("./drag_and_drop/column-helpers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var ColumnHeader = function ColumnHeader() {
@@ -43,6 +44,14 @@ var ColumnHeader = function ColumnHeader() {
     }
     return context.scrollLeft;
   }, [context.visibledatacolumn, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollLeft]);
+  var selectedLocationRef = (0, _react.useRef)(selectedLocation);
+  (0, _react.useEffect)(function () {
+    selectedLocationRef.current = selectedLocation;
+  }, [selectedLocation]);
+  var _f = (0, _columnHelpers.useColumnDragAndDrop)(containerRef, selectedLocationRef),
+    initiateDrag = _f.initiateDrag,
+    getColIndexClicked = _f.getColIndexClicked,
+    isColDoubleClicked = _f.isColDoubleClicked;
   var onMouseMove = (0, _react.useCallback)(function (e) {
     var _a;
     if (context.luckysheet_cols_change_size) {
@@ -73,11 +82,28 @@ var ColumnHeader = function ColumnHeader() {
     }]);
   }, [context, hoverLocation.col_index, refs.globalCache.freezen]);
   var onMouseDown = (0, _react.useCallback)(function (e) {
-    var nativeEvent = e.nativeEvent;
-    setContext(function (draftCtx) {
-      (0, _fortuneCore.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) {
+        (0, _fortuneCore.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 = (0, _react.useCallback)(function () {
     if (context.luckysheet_cols_change_size) {
       return;

package/lib/components/SheetOverlay/RowHeader.js

@@ -9,6 +9,7 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
 var _lodash = _interopRequireDefault(require("lodash"));
 var _react = _interopRequireWildcard(require("react"));
 var _context = _interopRequireDefault(require("../../context"));
+var _rowHelpers = require("./drag_and_drop/row-helpers");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var RowHeader = function RowHeader() {
@@ -42,21 +43,25 @@ var RowHeader = function RowHeader() {
     }
     return context.scrollTop;
   }, [context.visibledatarow, sheet === null || sheet === void 0 ? void 0 : sheet.frozen, context.scrollTop]);
+  var selectedLocationRef = (0, _react.useRef)(selectedLocation);
+  (0, _react.useEffect)(function () {
+    selectedLocationRef.current = selectedLocation;
+  }, [selectedLocation]);
   var onMouseMove = (0, _react.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 = (0, _fortuneCore.fixPositionOnFrozenCells)(freeze, 0, _y, 0, mouseY),
       y = _b.y,
       inHorizontalFreeze = _b.inHorizontalFreeze;
-    var row_location = (0, _fortuneCore.rowLocation)(y, context.visibledatarow);
-    var row_pre = row_location[0],
-      row = row_location[1],
-      row_index = row_location[2];
+    var _c = (0, _fortuneCore.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,
@@ -66,16 +71,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 = (0, _rowHelpers.useRowDragAndDrop)(containerRef, selectedLocationRef),
+    initiateDrag = _f.initiateDrag,
+    getRowIndexClicked = _f.getRowIndexClicked,
+    isRowDoubleClicked = _f.isRowDoubleClicked;
   var onMouseDown = (0, _react.useCallback)(function (e) {
-    var nativeEvent = e.nativeEvent;
-    setContext(function (draftCtx) {
-      (0, _fortuneCore.handleRowHeaderMouseDown)(draftCtx, refs.globalCache, nativeEvent, containerRef.current, refs.cellInput.current, refs.fxInput.current);
-    });
-  }, [refs.globalCache, refs.cellInput, refs.fxInput, setContext]);
-  var onMouseLeave = (0, _react.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) {
+        (0, _fortuneCore.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 = (0, _react.useCallback)(function () {
+    if (context.luckysheet_rows_change_size) return;
     setHoverLocation({
       row: -1,
       row_pre: -1,

package/lib/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/lib/components/SheetOverlay/drag_and_drop/column-helpers.js

@@ -0,0 +1,242 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColumnDragAndDrop = void 0;
+var _react = require("react");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _context = _interopRequireDefault(require("../../../context"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var useColumnDragAndDrop = exports.useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, selectedLocationRef) {
+  var DOUBLE_CLICK_MS = 300;
+  var START_DRAG_THRESHOLD_PX = 6;
+  var clickRef = (0, _react.useRef)({
+    lastTime: 0,
+    lastCol: -1
+  });
+  var _a = (0, _react.useContext)(_context.default),
+    context = _a.context,
+    setContext = _a.setContext,
+    refs = _a.refs;
+  var dragRef = (0, _react.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 = (0, _fortuneCore.fixPositionOnFrozenCells)(freeze, localXInHeader, 0, mouseXInHeader, 0).x;
+    var _b = (0, _fortuneCore.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 = (0, _fortuneCore.fixPositionOnFrozenCells)(freeze, localXInWorkbook, 0, mouseXInWorkbook, 0).x;
+    var _g = (0, _fortuneCore.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 = (0, _fortuneCore.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 = (0, _fortuneCore.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 = (0, _fortuneCore.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;
+          (0, _fortuneCore.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/lib/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;
+};