@fileverse-dev/fortune-react 1.1.55-smooth-scroll-1 → 1.1.55

package/es/components/Sheet/index.js

@@ -1,9 +1,8 @@
-import React, { useRef, useEffect, useContext } from "react";
-import { Canvas, updateContextWithCanvas, updateContextWithSheetData, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
+import React, { useRef, useEffect, useContext, useCallback } from "react";
+import { Canvas, updateContextWithCanvas, updateContextWithSheetData, handleGlobalWheel, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
 import "./index.css";
 import WorkbookContext from "../../context";
 import SheetOverlay from "../SheetOverlay";
-import { useSmoothScroll } from "./use-smooth-scroll";
 var Sheet = function Sheet(_a) {
   var _b, _c, _d;
   var sheet = _a.sheet;
@@ -150,7 +149,25 @@ var Sheet = function Sheet(_a) {
       return cellFadeAnimator.setOnTick(null);
     };
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
-  useSmoothScroll(containerRef);
+  var onWheel = useCallback(function (e) {
+    var _a, _b;
+    var functionDetailsEl = document.getElementById("function-details");
+    var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
+    var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
+    var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
+    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
+    setContext(function (draftCtx) {
+      handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
+    });
+    e.preventDefault();
+  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  useEffect(function () {
+    var container = containerRef.current;
+    container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
+    return function () {
+      container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
+    };
+  }, [onWheel]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,
     className: "fortune-sheet-container"

package/lib/components/Sheet/index.js

@@ -10,7 +10,6 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
 require("./index.css");
 var _context = _interopRequireDefault(require("../../context"));
 var _SheetOverlay = _interopRequireDefault(require("../SheetOverlay"));
-var _useSmoothScroll = require("./use-smooth-scroll");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
 var Sheet = function Sheet(_a) {
@@ -159,7 +158,25 @@ var Sheet = function Sheet(_a) {
       return _fortuneCore.cellFadeAnimator.setOnTick(null);
     };
   }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
-  (0, _useSmoothScroll.useSmoothScroll)(containerRef);
+  var onWheel = (0, _react.useCallback)(function (e) {
+    var _a, _b;
+    var functionDetailsEl = document.getElementById("function-details");
+    var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
+    var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
+    var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
+    if (functionDetailsEl && isMouseOverFunctionDetails || formulaSearchEl && isMouseOverFormulaSearch || ((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter)) return;
+    setContext(function (draftCtx) {
+      (0, _fortuneCore.handleGlobalWheel)(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
+    });
+    e.preventDefault();
+  }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
+  (0, _react.useEffect)(function () {
+    var container = containerRef.current;
+    container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
+    return function () {
+      container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
+    };
+  }, [onWheel]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,
     className: "fortune-sheet-container"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.1.55-smooth-scroll-1",
+  "version": "1.1.55",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "module": "es/index.js",
@@ -16,7 +16,7 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@fileverse-dev/fortune-core": "1.1.55-smooth-scroll-1",
+    "@fileverse-dev/fortune-core": "1.1.55",
     "@fileverse/ui": "^4.1.7-patch-21",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",

package/es/components/Sheet/use-smooth-scroll.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;

package/es/components/Sheet/use-smooth-scroll.js

@@ -1,85 +0,0 @@
-import { useContext, useEffect } from "react";
-import WorkbookContext from "../../context";
-export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
-  var _a = useContext(WorkbookContext),
-    context = _a.context,
-    refs = _a.refs;
-  function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
-    if (getPixelScale === void 0) {
-      getPixelScale = function getPixelScale() {
-        return window.devicePixelRatio || 1;
-      };
-    }
-    var queuedXPixels = 0;
-    var queuedYPixels = 0;
-    var animationFrameId = 0;
-    var MAX_PIXEL_DELTA_PER_FRAME = 1200;
-    function applyQueuedScroll() {
-      animationFrameId = 0;
-      if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
-        queuedXPixels = 0;
-        queuedYPixels = 0;
-        return;
-      }
-      var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
-      var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
-      moveScrollBy(xPixels, yPixels);
-      queuedXPixels = 0;
-      queuedYPixels = 0;
-    }
-    function handleWheelEvent(event) {
-      var _a, _b;
-      event.preventDefault();
-      var functionDetailsElement = document.getElementById("function-details");
-      var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
-      var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
-      var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
-      var isPointerInSearchDialog = !!((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter);
-      var hasFilterContextMenuOpen = context.filterContextMenu != null;
-      if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
-        return;
-      }
-      var scaleFactor = getPixelScale();
-      queuedXPixels += event.deltaX * scaleFactor;
-      queuedYPixels += event.deltaY * scaleFactor;
-      if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
-    }
-    scrollContainer.addEventListener("wheel", handleWheelEvent, {
-      passive: false
-    });
-    return function () {
-      scrollContainer.removeEventListener("wheel", handleWheelEvent);
-      if (animationFrameId) cancelAnimationFrame(animationFrameId);
-    };
-  }
-  var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
-    return function (xPixels, yPixels) {
-      var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
-      var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
-      var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
-      var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
-      var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
-      var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
-      if (didScrollX) {
-        horizontalScrollbarEl.scrollLeft = targetScrollLeft;
-      }
-      if (didScrollY) {
-        verticalScrollbarEl.scrollTop = targetScrollTop;
-      }
-    };
-  };
-  function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
-    var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
-    return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
-      return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
-    });
-  }
-  useEffect(function () {
-    var scrollContainerEl = scrollContainerRef.current;
-    var horizontalScrollbarEl = refs.scrollbarX.current;
-    var verticalScrollbarEl = refs.scrollbarY.current;
-    if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
-    var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
-    return unmountScrollHandler;
-  }, [context.zoomRatio]);
-};

package/lib/components/Sheet/use-smooth-scroll.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;

package/lib/components/Sheet/use-smooth-scroll.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useSmoothScroll = void 0;
-var _react = require("react");
-var _context = _interopRequireDefault(require("../../context"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
-  var _a = (0, _react.useContext)(_context.default),
-    context = _a.context,
-    refs = _a.refs;
-  function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
-    if (getPixelScale === void 0) {
-      getPixelScale = function getPixelScale() {
-        return window.devicePixelRatio || 1;
-      };
-    }
-    var queuedXPixels = 0;
-    var queuedYPixels = 0;
-    var animationFrameId = 0;
-    var MAX_PIXEL_DELTA_PER_FRAME = 1200;
-    function applyQueuedScroll() {
-      animationFrameId = 0;
-      if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
-        queuedXPixels = 0;
-        queuedYPixels = 0;
-        return;
-      }
-      var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
-      var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
-      moveScrollBy(xPixels, yPixels);
-      queuedXPixels = 0;
-      queuedYPixels = 0;
-    }
-    function handleWheelEvent(event) {
-      var _a, _b;
-      event.preventDefault();
-      var functionDetailsElement = document.getElementById("function-details");
-      var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
-      var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
-      var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
-      var isPointerInSearchDialog = !!((_b = (_a = refs === null || refs === void 0 ? void 0 : refs.globalCache) === null || _a === void 0 ? void 0 : _a.searchDialog) === null || _b === void 0 ? void 0 : _b.mouseEnter);
-      var hasFilterContextMenuOpen = context.filterContextMenu != null;
-      if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
-        return;
-      }
-      var scaleFactor = getPixelScale();
-      queuedXPixels += event.deltaX * scaleFactor;
-      queuedYPixels += event.deltaY * scaleFactor;
-      if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
-    }
-    scrollContainer.addEventListener("wheel", handleWheelEvent, {
-      passive: false
-    });
-    return function () {
-      scrollContainer.removeEventListener("wheel", handleWheelEvent);
-      if (animationFrameId) cancelAnimationFrame(animationFrameId);
-    };
-  }
-  var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
-    return function (xPixels, yPixels) {
-      var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
-      var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
-      var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
-      var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
-      var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
-      var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
-      if (didScrollX) {
-        horizontalScrollbarEl.scrollLeft = targetScrollLeft;
-      }
-      if (didScrollY) {
-        verticalScrollbarEl.scrollTop = targetScrollTop;
-      }
-    };
-  };
-  function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
-    var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
-    return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
-      return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
-    });
-  }
-  (0, _react.useEffect)(function () {
-    var scrollContainerEl = scrollContainerRef.current;
-    var horizontalScrollbarEl = refs.scrollbarX.current;
-    var verticalScrollbarEl = refs.scrollbarY.current;
-    if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
-    var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
-    return unmountScrollHandler;
-  }, [context.zoomRatio]);
-};