@fileverse-dev/fortune-react 1.2.49 → 1.2.50-patch-2

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

@@ -12,6 +12,7 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
         return window.devicePixelRatio || 1;
       };
     }
+    console.log("handleScroll called 6.2");
     var queuedXPixels = 0;
     var queuedYPixels = 0;
     var animationFrameId = 0;
@@ -69,38 +70,104 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
     var gestureStartClientY = 0;
     var lastPointerClientX = 0;
     var lastPointerClientY = 0;
+    var lastMoveTime = 0;
+    var velocityX = 0;
+    var velocityY = 0;
+    var momentumAnimationId = 0;
+    var scrollDirection = "none";
     var PAN_DISTANCE_THRESHOLD_PX = 8;
+    var FRICTION = 0.95;
+    var MIN_VELOCITY = 0.5;
+    var VELOCITY_MULTIPLIER = 2.6;
+    var DIRECTION_LOCK_THRESHOLD = 1.5;
+    function stopMomentum() {
+      if (momentumAnimationId) {
+        cancelAnimationFrame(momentumAnimationId);
+        momentumAnimationId = 0;
+      }
+      velocityX = 0;
+      velocityY = 0;
+    }
+    function applyMomentum() {
+      if (Math.abs(velocityX) < MIN_VELOCITY && Math.abs(velocityY) < MIN_VELOCITY) {
+        stopMomentum();
+        return;
+      }
+      var scale = getPixelScale();
+      var momentumX = -velocityX * scale;
+      var momentumY = -velocityY * scale;
+      if (scrollDirection === "vertical") {
+        momentumX = 0;
+      } else if (scrollDirection === "horizontal") {
+        momentumY = 0;
+      }
+      scrollHandler(momentumX, momentumY);
+      velocityX *= FRICTION;
+      velocityY *= FRICTION;
+      momentumAnimationId = requestAnimationFrame(applyMomentum);
+    }
     function onPointerDown(pointerEvent) {
       if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
+      stopMomentum();
       isScrolling = false;
+      scrollDirection = "none";
       gestureStartClientX = pointerEvent.clientX;
       lastPointerClientX = pointerEvent.clientX;
       gestureStartClientY = pointerEvent.clientY;
       lastPointerClientY = pointerEvent.clientY;
+      lastMoveTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
       containerEl.setPointerCapture(pointerEvent.pointerId);
     }
     function onPointerMove(pointerEvent) {
       if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
+      var currentTime = performance.now();
+      var deltaTime = Math.max(1, currentTime - lastMoveTime);
       var deltaXSinceLastMove = pointerEvent.clientX - lastPointerClientX;
       var deltaYSinceLastMove = pointerEvent.clientY - lastPointerClientY;
+      velocityX = deltaXSinceLastMove / deltaTime * 16;
+      velocityY = deltaYSinceLastMove / deltaTime * 16;
       lastPointerClientX = pointerEvent.clientX;
       lastPointerClientY = pointerEvent.clientY;
+      lastMoveTime = currentTime;
       if (!isScrolling) {
         var totalXFromGestureStart = lastPointerClientX - gestureStartClientX;
         var totalYFromGestureStart = lastPointerClientY - gestureStartClientY;
         if (totalXFromGestureStart * totalXFromGestureStart + totalYFromGestureStart * totalYFromGestureStart < PAN_DISTANCE_THRESHOLD_PX * PAN_DISTANCE_THRESHOLD_PX) {
           return;
         }
+        var absX = Math.abs(totalXFromGestureStart);
+        var absY = Math.abs(totalYFromGestureStart);
+        if (absX > absY * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "horizontal";
+        } else if (absY > absX * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "vertical";
+        } else {
+          scrollDirection = "none";
+        }
         isScrolling = true;
       }
       pointerEvent.preventDefault();
       var scale = getPixelScale();
-      scrollHandler(-deltaXSinceLastMove * scale, -deltaYSinceLastMove * scale);
+      var scrollX = -deltaXSinceLastMove * scale * VELOCITY_MULTIPLIER;
+      var scrollY = -deltaYSinceLastMove * scale * VELOCITY_MULTIPLIER;
+      if (scrollDirection === "vertical") {
+        scrollX = 0;
+      } else if (scrollDirection === "horizontal") {
+        scrollY = 0;
+      }
+      scrollHandler(scrollX, scrollY);
     }
     function onPointerUp(e) {
       try {
         containerEl.releasePointerCapture(e.pointerId);
       } catch (_a) {}
+      if (isScrolling) {
+        if (Math.abs(velocityX) > MIN_VELOCITY || Math.abs(velocityY) > MIN_VELOCITY) {
+          momentumAnimationId = requestAnimationFrame(applyMomentum);
+        }
+      }
       isScrolling = false;
     }
     containerEl.addEventListener("pointerdown", onPointerDown, {
@@ -112,6 +179,7 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
     containerEl.addEventListener("pointerup", onPointerUp);
     containerEl.addEventListener("pointercancel", onPointerUp);
     return function () {
+      stopMomentum();
       containerEl.removeEventListener("pointerdown", onPointerDown);
       containerEl.removeEventListener("pointermove", onPointerMove);
       containerEl.removeEventListener("pointerup", onPointerUp);

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

@@ -238,7 +238,6 @@ export var useColumnDragAndDrop = function useColumnDragAndDrop(containerRef, se
           });
           selectedSourceColRef.current = selectedSourceCol;
           selectedTargetColRef.current = selectedTargetCol;
-          console.log("selectedSourceCol", selectedTargetCol);
           selectedSourceCol.forEach(function () {
             var adjustedSourceIndex = sourceIndex_1;
             if (targetIndex < sourceIndex_1) {

package/es/components/Toolbar/dataVerificationPortal.js

@@ -4,6 +4,7 @@ import DataVerification from "../DataVerification";
 var DataVerificationPortal = function DataVerificationPortal(_a) {
   var visible = _a.visible;
   var container = document.getElementById("placeholder-data-verification");
+  console.log(container, !visible, !container);
   if (!visible || !container) return null;
   return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DataVerification, null), container);
 };

package/es/components/Toolbar/index.js

@@ -995,15 +995,13 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "dataVerification") {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DataVerificationPortal, {
-        visible: showDataValidation
-      }), /*#__PURE__*/React.createElement(Button, {
+      return /*#__PURE__*/React.createElement(Button, {
         id: "dataVerification",
         iconId: name,
         tooltip: tooltip,
         key: name,
         onClick: dataVerificationClick
-      }));
+      });
     }
     if (name === "locationCondition") {
       var items_3 = [{
@@ -1136,34 +1134,7 @@ var Toolbar = function Toolbar(_a) {
           if (context.allowEdit === false) return;
           showImgChooser();
         }
-      }, /*#__PURE__*/React.createElement("input", {
-        id: "fortune-img-upload",
-        type: "file",
-        accept: "image/*",
-        style: {
-          display: "none"
-        },
-        onChange: function onChange(e) {
-          var _a;
-          var file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
-          if (!file) return;
-          var render = new FileReader();
-          render.readAsDataURL(file);
-          render.onload = function (event) {
-            var _a;
-            if (event.target == null) return;
-            var src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-            var image = new Image();
-            image.onload = function () {
-              setContext(function (draftCtx) {
-                insertImage(draftCtx, image);
-              });
-            };
-            image.src = src;
-          };
-          e.currentTarget.value = "";
-        }
-      }));
+      });
     }
     if (name === "comment") {
       var last = (_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d[context.luckysheet_select_save.length - 1];
@@ -1692,7 +1663,36 @@ var Toolbar = function Toolbar(_a) {
     ref: containerRef,
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(DataVerificationPortal, {
+    visible: showDataValidation
+  }), /*#__PURE__*/React.createElement("input", {
+    id: "fortune-img-upload",
+    type: "file",
+    accept: "image/*",
+    style: {
+      display: "none"
+    },
+    onChange: function onChange(e) {
+      var _a;
+      var file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+      if (!file) return;
+      var render = new FileReader();
+      render.readAsDataURL(file);
+      render.onload = function (event) {
+        var _a;
+        if (event.target == null) return;
+        var src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        var image = new Image();
+        image.onload = function () {
+          setContext(function (draftCtx) {
+            insertImage(draftCtx, image);
+          });
+        };
+        image.src = src;
+      };
+      e.currentTarget.value = "";
+    }
+  }), /*#__PURE__*/React.createElement("div", {
     className: "fortune-toolbar-left"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "import-export";

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

@@ -19,6 +19,7 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
         return window.devicePixelRatio || 1;
       };
     }
+    console.log("handleScroll called 6.2");
     var queuedXPixels = 0;
     var queuedYPixels = 0;
     var animationFrameId = 0;
@@ -76,38 +77,104 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
     var gestureStartClientY = 0;
     var lastPointerClientX = 0;
     var lastPointerClientY = 0;
+    var lastMoveTime = 0;
+    var velocityX = 0;
+    var velocityY = 0;
+    var momentumAnimationId = 0;
+    var scrollDirection = "none";
     var PAN_DISTANCE_THRESHOLD_PX = 8;
+    var FRICTION = 0.95;
+    var MIN_VELOCITY = 0.5;
+    var VELOCITY_MULTIPLIER = 2.6;
+    var DIRECTION_LOCK_THRESHOLD = 1.5;
+    function stopMomentum() {
+      if (momentumAnimationId) {
+        cancelAnimationFrame(momentumAnimationId);
+        momentumAnimationId = 0;
+      }
+      velocityX = 0;
+      velocityY = 0;
+    }
+    function applyMomentum() {
+      if (Math.abs(velocityX) < MIN_VELOCITY && Math.abs(velocityY) < MIN_VELOCITY) {
+        stopMomentum();
+        return;
+      }
+      var scale = getPixelScale();
+      var momentumX = -velocityX * scale;
+      var momentumY = -velocityY * scale;
+      if (scrollDirection === "vertical") {
+        momentumX = 0;
+      } else if (scrollDirection === "horizontal") {
+        momentumY = 0;
+      }
+      scrollHandler(momentumX, momentumY);
+      velocityX *= FRICTION;
+      velocityY *= FRICTION;
+      momentumAnimationId = requestAnimationFrame(applyMomentum);
+    }
     function onPointerDown(pointerEvent) {
       if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
+      stopMomentum();
       isScrolling = false;
+      scrollDirection = "none";
       gestureStartClientX = pointerEvent.clientX;
       lastPointerClientX = pointerEvent.clientX;
       gestureStartClientY = pointerEvent.clientY;
       lastPointerClientY = pointerEvent.clientY;
+      lastMoveTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
       containerEl.setPointerCapture(pointerEvent.pointerId);
     }
     function onPointerMove(pointerEvent) {
       if (pointerEvent.pointerType !== "touch" && pointerEvent.pointerType !== "pen") return;
+      var currentTime = performance.now();
+      var deltaTime = Math.max(1, currentTime - lastMoveTime);
       var deltaXSinceLastMove = pointerEvent.clientX - lastPointerClientX;
       var deltaYSinceLastMove = pointerEvent.clientY - lastPointerClientY;
+      velocityX = deltaXSinceLastMove / deltaTime * 16;
+      velocityY = deltaYSinceLastMove / deltaTime * 16;
       lastPointerClientX = pointerEvent.clientX;
       lastPointerClientY = pointerEvent.clientY;
+      lastMoveTime = currentTime;
       if (!isScrolling) {
         var totalXFromGestureStart = lastPointerClientX - gestureStartClientX;
         var totalYFromGestureStart = lastPointerClientY - gestureStartClientY;
         if (totalXFromGestureStart * totalXFromGestureStart + totalYFromGestureStart * totalYFromGestureStart < PAN_DISTANCE_THRESHOLD_PX * PAN_DISTANCE_THRESHOLD_PX) {
           return;
         }
+        var absX = Math.abs(totalXFromGestureStart);
+        var absY = Math.abs(totalYFromGestureStart);
+        if (absX > absY * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "horizontal";
+        } else if (absY > absX * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "vertical";
+        } else {
+          scrollDirection = "none";
+        }
         isScrolling = true;
       }
       pointerEvent.preventDefault();
       var scale = getPixelScale();
-      scrollHandler(-deltaXSinceLastMove * scale, -deltaYSinceLastMove * scale);
+      var scrollX = -deltaXSinceLastMove * scale * VELOCITY_MULTIPLIER;
+      var scrollY = -deltaYSinceLastMove * scale * VELOCITY_MULTIPLIER;
+      if (scrollDirection === "vertical") {
+        scrollX = 0;
+      } else if (scrollDirection === "horizontal") {
+        scrollY = 0;
+      }
+      scrollHandler(scrollX, scrollY);
     }
     function onPointerUp(e) {
       try {
         containerEl.releasePointerCapture(e.pointerId);
       } catch (_a) {}
+      if (isScrolling) {
+        if (Math.abs(velocityX) > MIN_VELOCITY || Math.abs(velocityY) > MIN_VELOCITY) {
+          momentumAnimationId = requestAnimationFrame(applyMomentum);
+        }
+      }
       isScrolling = false;
     }
     containerEl.addEventListener("pointerdown", onPointerDown, {
@@ -119,6 +186,7 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
     containerEl.addEventListener("pointerup", onPointerUp);
     containerEl.addEventListener("pointercancel", onPointerUp);
     return function () {
+      stopMomentum();
       containerEl.removeEventListener("pointerdown", onPointerDown);
       containerEl.removeEventListener("pointermove", onPointerMove);
       containerEl.removeEventListener("pointerup", onPointerUp);

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

@@ -246,7 +246,6 @@ var useColumnDragAndDrop = exports.useColumnDragAndDrop = function useColumnDrag
           });
           selectedSourceColRef.current = selectedSourceCol;
           selectedTargetColRef.current = selectedTargetCol;
-          console.log("selectedSourceCol", selectedTargetCol);
           selectedSourceCol.forEach(function () {
             var adjustedSourceIndex = sourceIndex_1;
             if (targetIndex < sourceIndex_1) {

package/lib/components/Toolbar/dataVerificationPortal.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 var DataVerificationPortal = function DataVerificationPortal(_a) {
   var visible = _a.visible;
   var container = document.getElementById("placeholder-data-verification");
+  console.log(container, !visible, !container);
   if (!visible || !container) return null;
   return /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_DataVerification.default, null), container);
 };

package/lib/components/Toolbar/index.js

@@ -1004,15 +1004,13 @@ var Toolbar = function Toolbar(_a) {
       });
     }
     if (name === "dataVerification") {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_dataVerificationPortal.default, {
-        visible: showDataValidation
-      }), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      return /*#__PURE__*/_react.default.createElement(_Button.default, {
         id: "dataVerification",
         iconId: name,
         tooltip: tooltip,
         key: name,
         onClick: dataVerificationClick
-      }));
+      });
     }
     if (name === "locationCondition") {
       var items_3 = [{
@@ -1145,34 +1143,7 @@ var Toolbar = function Toolbar(_a) {
           if (context.allowEdit === false) return;
           (0, _fortuneCore.showImgChooser)();
         }
-      }, /*#__PURE__*/_react.default.createElement("input", {
-        id: "fortune-img-upload",
-        type: "file",
-        accept: "image/*",
-        style: {
-          display: "none"
-        },
-        onChange: function onChange(e) {
-          var _a;
-          var file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
-          if (!file) return;
-          var render = new FileReader();
-          render.readAsDataURL(file);
-          render.onload = function (event) {
-            var _a;
-            if (event.target == null) return;
-            var src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
-            var image = new Image();
-            image.onload = function () {
-              setContext(function (draftCtx) {
-                (0, _fortuneCore.insertImage)(draftCtx, image);
-              });
-            };
-            image.src = src;
-          };
-          e.currentTarget.value = "";
-        }
-      }));
+      });
     }
     if (name === "comment") {
       var last = (_d = context.luckysheet_select_save) === null || _d === void 0 ? void 0 : _d[context.luckysheet_select_save.length - 1];
@@ -1701,7 +1672,36 @@ var Toolbar = function Toolbar(_a) {
     ref: containerRef,
     className: "fortune-toolbar",
     "aria-label": toolbar.toolbar
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_dataVerificationPortal.default, {
+    visible: showDataValidation
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    id: "fortune-img-upload",
+    type: "file",
+    accept: "image/*",
+    style: {
+      display: "none"
+    },
+    onChange: function onChange(e) {
+      var _a;
+      var file = (_a = e.currentTarget.files) === null || _a === void 0 ? void 0 : _a[0];
+      if (!file) return;
+      var render = new FileReader();
+      render.readAsDataURL(file);
+      render.onload = function (event) {
+        var _a;
+        if (event.target == null) return;
+        var src = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+        var image = new Image();
+        image.onload = function () {
+          setContext(function (draftCtx) {
+            (0, _fortuneCore.insertImage)(draftCtx, image);
+          });
+        };
+        image.src = src;
+      };
+      e.currentTarget.value = "";
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: "fortune-toolbar-left"
   }, settings.customToolbarItems.filter(function (n) {
     return n.key === "import-export";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.2.49",
+  "version": "1.2.50-patch-2",
   "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.2.49",
+    "@fileverse-dev/fortune-core": "1.2.50-patch-2",
     "@fileverse/ui": "^4.1.7-patch-40",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",