@fileverse-dev/fortune-react 1.1.62 → 1.1.64

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/es/components/Sheet/index.js +4 -21
  2. package/es/components/Sheet/use-smooth-scroll.d.ts +2 -0
  3. package/es/components/Sheet/use-smooth-scroll.js +90 -0
  4. package/lib/components/Sheet/index.js +2 -19
  5. package/lib/components/Sheet/use-smooth-scroll.d.ts +2 -0
  6. package/lib/components/Sheet/use-smooth-scroll.js +97 -0
  7. package/package.json +2 -2
package/es/components/Sheet/index.js CHANGED
@@ -1,8 +1,9 @@
1
- import React, { useRef, useEffect, useContext, useCallback } from "react";
2
- import { Canvas, updateContextWithCanvas, updateContextWithSheetData, handleGlobalWheel, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
1
+ import React, { useRef, useEffect, useContext } from "react";
2
+ import { Canvas, updateContextWithCanvas, updateContextWithSheetData, initFreeze, cellFadeAnimator } from "@fileverse-dev/fortune-core";
3
3
  import "./index.css";
4
4
  import WorkbookContext from "../../context";
5
5
  import SheetOverlay from "../SheetOverlay";
6
+ import { useSmoothScroll } from "./use-smooth-scroll";
6
7
  var Sheet = function Sheet(_a) {
7
8
  var _b, _c, _d;
8
9
  var sheet = _a.sheet;
@@ -149,25 +150,7 @@ var Sheet = function Sheet(_a) {
149
150
  return cellFadeAnimator.setOnTick(null);
150
151
  };
151
152
  }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
152
- var onWheel = useCallback(function (e) {
153
- var _a, _b;
154
- var functionDetailsEl = document.getElementById("function-details");
155
- var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
156
- var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
157
- var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
158
- 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;
159
- setContext(function (draftCtx) {
160
- handleGlobalWheel(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
161
- });
162
- e.preventDefault();
163
- }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
164
- useEffect(function () {
165
- var container = containerRef.current;
166
- container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
167
- return function () {
168
- container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
169
- };
170
- }, [onWheel]);
153
+ useSmoothScroll(containerRef);
171
154
  return /*#__PURE__*/React.createElement("div", {
172
155
  ref: containerRef,
173
156
  className: "fortune-sheet-container"
package/es/components/Sheet/use-smooth-scroll.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { RefObject } from "react";
2
+ export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;
package/es/components/Sheet/use-smooth-scroll.js ADDED
@@ -0,0 +1,90 @@
1
+ import { useContext, useEffect } from "react";
2
+ import { removeEditingComment } from "@fileverse-dev/fortune-core";
3
+ import WorkbookContext from "../../context";
4
+ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
5
+ var _a = useContext(WorkbookContext),
6
+ context = _a.context,
7
+ refs = _a.refs,
8
+ setContext = _a.setContext;
9
+ function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
10
+ if (getPixelScale === void 0) {
11
+ getPixelScale = function getPixelScale() {
12
+ return window.devicePixelRatio || 1;
13
+ };
14
+ }
15
+ var queuedXPixels = 0;
16
+ var queuedYPixels = 0;
17
+ var animationFrameId = 0;
18
+ var MAX_PIXEL_DELTA_PER_FRAME = 1200;
19
+ function applyQueuedScroll() {
20
+ animationFrameId = 0;
21
+ if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
22
+ queuedXPixels = 0;
23
+ queuedYPixels = 0;
24
+ return;
25
+ }
26
+ var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
27
+ var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
28
+ moveScrollBy(xPixels, yPixels);
29
+ queuedXPixels = 0;
30
+ queuedYPixels = 0;
31
+ }
32
+ function handleWheelEvent(event) {
33
+ var _a, _b;
34
+ event.preventDefault();
35
+ setContext(function (ctx) {
36
+ removeEditingComment(ctx, refs.globalCache);
37
+ });
38
+ var functionDetailsElement = document.getElementById("function-details");
39
+ var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
40
+ var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
41
+ var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
42
+ 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);
43
+ var hasFilterContextMenuOpen = context.filterContextMenu != null;
44
+ if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
45
+ return;
46
+ }
47
+ var scaleFactor = getPixelScale();
48
+ queuedXPixels += event.deltaX * scaleFactor;
49
+ queuedYPixels += event.deltaY * scaleFactor;
50
+ if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
51
+ }
52
+ scrollContainer.addEventListener("wheel", handleWheelEvent, {
53
+ passive: false
54
+ });
55
+ return function () {
56
+ scrollContainer.removeEventListener("wheel", handleWheelEvent);
57
+ if (animationFrameId) cancelAnimationFrame(animationFrameId);
58
+ };
59
+ }
60
+ var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
61
+ return function (xPixels, yPixels) {
62
+ var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
63
+ var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
64
+ var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
65
+ var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
66
+ var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
67
+ var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
68
+ if (didScrollX) {
69
+ horizontalScrollbarEl.scrollLeft = targetScrollLeft;
70
+ }
71
+ if (didScrollY) {
72
+ verticalScrollbarEl.scrollTop = targetScrollTop;
73
+ }
74
+ };
75
+ };
76
+ function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
77
+ var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
78
+ return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
79
+ return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
80
+ });
81
+ }
82
+ useEffect(function () {
83
+ var scrollContainerEl = scrollContainerRef.current;
84
+ var horizontalScrollbarEl = refs.scrollbarX.current;
85
+ var verticalScrollbarEl = refs.scrollbarY.current;
86
+ if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
87
+ var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
88
+ return unmountScrollHandler;
89
+ }, [context.zoomRatio]);
90
+ };
package/lib/components/Sheet/index.js CHANGED
@@ -10,6 +10,7 @@ var _fortuneCore = require("@fileverse-dev/fortune-core");
10
10
  require("./index.css");
11
11
  var _context = _interopRequireDefault(require("../../context"));
12
12
  var _SheetOverlay = _interopRequireDefault(require("../SheetOverlay"));
13
+ var _useSmoothScroll = require("./use-smooth-scroll");
13
14
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
14
15
  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); }
15
16
  var Sheet = function Sheet(_a) {
@@ -158,25 +159,7 @@ var Sheet = function Sheet(_a) {
158
159
  return _fortuneCore.cellFadeAnimator.setOnTick(null);
159
160
  };
160
161
  }, [context, refs.canvas, refs.globalCache.freezen, setContext, sheet.id]);
161
- var onWheel = (0, _react.useCallback)(function (e) {
162
- var _a, _b;
163
- var functionDetailsEl = document.getElementById("function-details");
164
- var formulaSearchEl = document.getElementById("luckysheet-formula-search-c");
165
- var isMouseOverFunctionDetails = functionDetailsEl === null || functionDetailsEl === void 0 ? void 0 : functionDetailsEl.matches(":hover");
166
- var isMouseOverFormulaSearch = formulaSearchEl === null || formulaSearchEl === void 0 ? void 0 : formulaSearchEl.matches(":hover");
167
- 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;
168
- setContext(function (draftCtx) {
169
- (0, _fortuneCore.handleGlobalWheel)(draftCtx, e, refs.globalCache, refs.scrollbarX.current, refs.scrollbarY.current);
170
- });
171
- e.preventDefault();
172
- }, [refs.globalCache, refs.scrollbarX, refs.scrollbarY, setContext]);
173
- (0, _react.useEffect)(function () {
174
- var container = containerRef.current;
175
- container === null || container === void 0 ? void 0 : container.addEventListener("wheel", onWheel);
176
- return function () {
177
- container === null || container === void 0 ? void 0 : container.removeEventListener("wheel", onWheel);
178
- };
179
- }, [onWheel]);
162
+ (0, _useSmoothScroll.useSmoothScroll)(containerRef);
180
163
  return /*#__PURE__*/_react.default.createElement("div", {
181
164
  ref: containerRef,
182
165
  className: "fortune-sheet-container"
package/lib/components/Sheet/use-smooth-scroll.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { RefObject } from "react";
2
+ export declare const useSmoothScroll: (scrollContainerRef: RefObject<HTMLDivElement | null>) => void;
package/lib/components/Sheet/use-smooth-scroll.js ADDED
@@ -0,0 +1,97 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useSmoothScroll = void 0;
7
+ var _react = require("react");
8
+ var _fortuneCore = require("@fileverse-dev/fortune-core");
9
+ var _context = _interopRequireDefault(require("../../context"));
10
+ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
11
+ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
12
+ var _a = (0, _react.useContext)(_context.default),
13
+ context = _a.context,
14
+ refs = _a.refs,
15
+ setContext = _a.setContext;
16
+ function attachSmoothWheelScroll(scrollContainer, moveScrollBy, getPixelScale) {
17
+ if (getPixelScale === void 0) {
18
+ getPixelScale = function getPixelScale() {
19
+ return window.devicePixelRatio || 1;
20
+ };
21
+ }
22
+ var queuedXPixels = 0;
23
+ var queuedYPixels = 0;
24
+ var animationFrameId = 0;
25
+ var MAX_PIXEL_DELTA_PER_FRAME = 1200;
26
+ function applyQueuedScroll() {
27
+ animationFrameId = 0;
28
+ if (Math.abs(queuedXPixels) < 0.5 && Math.abs(queuedYPixels) < 0.5) {
29
+ queuedXPixels = 0;
30
+ queuedYPixels = 0;
31
+ return;
32
+ }
33
+ var xPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedXPixels));
34
+ var yPixels = Math.max(-MAX_PIXEL_DELTA_PER_FRAME, Math.min(MAX_PIXEL_DELTA_PER_FRAME, queuedYPixels));
35
+ moveScrollBy(xPixels, yPixels);
36
+ queuedXPixels = 0;
37
+ queuedYPixels = 0;
38
+ }
39
+ function handleWheelEvent(event) {
40
+ var _a, _b;
41
+ event.preventDefault();
42
+ setContext(function (ctx) {
43
+ (0, _fortuneCore.removeEditingComment)(ctx, refs.globalCache);
44
+ });
45
+ var functionDetailsElement = document.getElementById("function-details");
46
+ var formulaSearchElement = document.getElementById("luckysheet-formula-search-c");
47
+ var isPointerOverFunctionDetails = functionDetailsElement === null || functionDetailsElement === void 0 ? void 0 : functionDetailsElement.matches(":hover");
48
+ var isPointerOverFormulaSearch = formulaSearchElement === null || formulaSearchElement === void 0 ? void 0 : formulaSearchElement.matches(":hover");
49
+ 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);
50
+ var hasFilterContextMenuOpen = context.filterContextMenu != null;
51
+ if (functionDetailsElement && isPointerOverFunctionDetails || formulaSearchElement && isPointerOverFormulaSearch || isPointerInSearchDialog || hasFilterContextMenuOpen) {
52
+ return;
53
+ }
54
+ var scaleFactor = getPixelScale();
55
+ queuedXPixels += event.deltaX * scaleFactor;
56
+ queuedYPixels += event.deltaY * scaleFactor;
57
+ if (!animationFrameId) animationFrameId = requestAnimationFrame(applyQueuedScroll);
58
+ }
59
+ scrollContainer.addEventListener("wheel", handleWheelEvent, {
60
+ passive: false
61
+ });
62
+ return function () {
63
+ scrollContainer.removeEventListener("wheel", handleWheelEvent);
64
+ if (animationFrameId) cancelAnimationFrame(animationFrameId);
65
+ };
66
+ }
67
+ var makeScrollbarsMoveByPixels = function makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl) {
68
+ return function (xPixels, yPixels) {
69
+ var maxScrollLeft = horizontalScrollbarEl.scrollWidth - horizontalScrollbarEl.clientWidth;
70
+ var maxScrollTop = verticalScrollbarEl.scrollHeight - verticalScrollbarEl.clientHeight;
71
+ var targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, horizontalScrollbarEl.scrollLeft + xPixels));
72
+ var targetScrollTop = Math.max(0, Math.min(maxScrollTop, verticalScrollbarEl.scrollTop + yPixels));
73
+ var didScrollX = targetScrollLeft !== horizontalScrollbarEl.scrollLeft;
74
+ var didScrollY = targetScrollTop !== verticalScrollbarEl.scrollTop;
75
+ if (didScrollX) {
76
+ horizontalScrollbarEl.scrollLeft = targetScrollLeft;
77
+ }
78
+ if (didScrollY) {
79
+ verticalScrollbarEl.scrollTop = targetScrollTop;
80
+ }
81
+ };
82
+ };
83
+ function routeWheelScrollToScrollbars(sheetContext, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl) {
84
+ var moveScrollbarsByPixels = makeScrollbarsMoveByPixels(horizontalScrollbarEl, verticalScrollbarEl);
85
+ return attachSmoothWheelScroll(scrollContainerEl, moveScrollbarsByPixels, function () {
86
+ return (window.devicePixelRatio || 1) * sheetContext.zoomRatio;
87
+ });
88
+ }
89
+ (0, _react.useEffect)(function () {
90
+ var scrollContainerEl = scrollContainerRef.current;
91
+ var horizontalScrollbarEl = refs.scrollbarX.current;
92
+ var verticalScrollbarEl = refs.scrollbarY.current;
93
+ if (!scrollContainerEl || !horizontalScrollbarEl || !verticalScrollbarEl) return function () {};
94
+ var unmountScrollHandler = routeWheelScrollToScrollbars(context, scrollContainerEl, horizontalScrollbarEl, verticalScrollbarEl);
95
+ return unmountScrollHandler;
96
+ }, [context.zoomRatio]);
97
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fileverse-dev/fortune-react",
3
- "version": "1.1.62",
3
+ "version": "1.1.64",
4
4
  "main": "lib/index.js",
5
5
  "types": "lib/index.d.ts",
6
6
  "module": "es/index.js",
@@ -16,7 +16,7 @@
16
16
  "tsc": "tsc"
17
17
  },
18
18
  "dependencies": {
19
- "@fileverse-dev/fortune-core": "1.1.62",
19
+ "@fileverse-dev/fortune-core": "1.1.64",
20
20
  "@fileverse/ui": "^4.1.7-patch-21",
21
21
  "@tippyjs/react": "^4.2.6",
22
22
  "@types/regenerator-runtime": "^0.13.6",