@fileverse-dev/fortune-react 1.2.96 → 1.2.98

package/es/components/NotationBoxes/index.js

@@ -74,7 +74,7 @@ var NotationBoxes = function NotationBoxes() {
         position: "absolute",
         left: size.left,
         top: size.top,
-        zIndex: 100,
+        zIndex: 400,
         pointerEvents: "none"
       }
     }), /*#__PURE__*/React.createElement("div", {
@@ -83,7 +83,7 @@ var NotationBoxes = function NotationBoxes() {
         position: "absolute",
         left: left,
         top: top,
-        zIndex: isEditing ? 200 : 100,
+        zIndex: isEditing ? 500 : 400,
         boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
       },
       onMouseDown: function onMouseDown(e) {

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

@@ -62,6 +62,147 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
       }
     };
   }
+  function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
+    var isDragging = false;
+    var startX = 0;
+    var startY = 0;
+    var lastX = 0;
+    var lastY = 0;
+    var velocityX = 0;
+    var velocityY = 0;
+    var autoScrollAnimationId = 0;
+    var lastMoveTime = 0;
+    var scrollDirection = "none";
+    var VELOCITY_SMOOTHING = 0.3;
+    var MIN_DRAG_THRESHOLD = 5;
+    var ACCELERATION_FACTOR = 1.02;
+    var MAX_VELOCITY = 50;
+    var DIRECTION_LOCK_THRESHOLD = 1.5;
+    var EDGE_SCROLL_ZONE = 10;
+    function stopAutoScroll() {
+      if (autoScrollAnimationId) {
+        cancelAnimationFrame(autoScrollAnimationId);
+        autoScrollAnimationId = 0;
+      }
+      velocityX = 0;
+      velocityY = 0;
+    }
+    function autoScroll() {
+      if (!isDragging) {
+        stopAutoScroll();
+        return;
+      }
+      if (Math.abs(velocityX) > 0.1) {
+        velocityX *= ACCELERATION_FACTOR;
+        velocityX = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityX));
+      }
+      if (Math.abs(velocityY) > 0.1) {
+        velocityY *= ACCELERATION_FACTOR;
+        velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
+      }
+      var scale = getPixelScale();
+      scrollHandler(velocityX * scale, velocityY * scale);
+      autoScrollAnimationId = requestAnimationFrame(autoScroll);
+    }
+    function onMouseDown(e) {
+      if (e.button !== 0) return;
+      var target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input")) {
+        return;
+      }
+      isDragging = true;
+      scrollDirection = "none";
+      startX = e.clientX;
+      startY = e.clientY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
+      containerEl.style.cursor = "grabbing";
+      e.preventDefault();
+    }
+    function onMouseMove(e) {
+      if (!isDragging) return;
+      var currentTime = performance.now();
+      var deltaTime = Math.max(1, currentTime - lastMoveTime);
+      var deltaX = e.clientX - lastX;
+      var deltaY = e.clientY - lastY;
+      var totalMovedX = e.clientX - startX;
+      var totalMovedY = e.clientY - startY;
+      var absMovedX = Math.abs(totalMovedX);
+      var absMovedY = Math.abs(totalMovedY);
+      var containerRect = containerEl.getBoundingClientRect();
+      var mouseX = e.clientX - containerRect.left;
+      var mouseY = e.clientY - containerRect.top;
+      var isNearLeftEdge = mouseX < EDGE_SCROLL_ZONE;
+      var isNearRightEdge = mouseX > containerRect.width - EDGE_SCROLL_ZONE;
+      var isNearTopEdge = mouseY < EDGE_SCROLL_ZONE;
+      var isNearBottomEdge = mouseY > containerRect.height - EDGE_SCROLL_ZONE;
+      if (scrollDirection === "none" && (absMovedX > MIN_DRAG_THRESHOLD || absMovedY > MIN_DRAG_THRESHOLD)) {
+        if (absMovedX > absMovedY * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "horizontal";
+        } else if (absMovedY > absMovedX * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "vertical";
+        } else {
+          scrollDirection = "none";
+        }
+      }
+      if (scrollDirection === "horizontal" || scrollDirection === "none") {
+        if (absMovedX > MIN_DRAG_THRESHOLD) {
+          if (isNearLeftEdge || isNearRightEdge) {
+            if (Math.abs(deltaX) > 0.1) {
+              var instantVelocityX = deltaX / deltaTime * 16;
+              velocityX = velocityX * (1 - VELOCITY_SMOOTHING) + instantVelocityX * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityX = 0;
+          }
+        }
+      } else {
+        velocityX = 0;
+      }
+      if (scrollDirection === "vertical" || scrollDirection === "none") {
+        if (absMovedY > MIN_DRAG_THRESHOLD) {
+          if (isNearTopEdge || isNearBottomEdge) {
+            if (Math.abs(deltaY) > 0.1) {
+              var instantVelocityY = deltaY / deltaTime * 16;
+              velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityY = 0;
+          }
+        }
+      } else {
+        velocityY = 0;
+      }
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = currentTime;
+      e.preventDefault();
+    }
+    function onMouseUp() {
+      if (!isDragging) return;
+      isDragging = false;
+      stopAutoScroll();
+      containerEl.style.cursor = "";
+    }
+    containerEl.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return function () {
+      stopAutoScroll();
+      containerEl.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }
   function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
     var isScrolling = false;
     var gestureStartClientX = 0;
@@ -210,9 +351,13 @@ export var useSmoothScroll = function useSmoothScroll(scrollContainerRef) {
     var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
       return (window.devicePixelRatio || 1) * context.zoomRatio;
     });
+    var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
+      return (window.devicePixelRatio || 1) * context.zoomRatio;
+    });
     return function () {
       unmountScrollHandler();
       unmountMobileScrollHandler();
+      unmountMouseDragHandler();
     };
   }
   useEffect(function () {

package/es/components/Toolbar/index.css

@@ -4,7 +4,7 @@
   /* background: #fafafc; */
   position: relative;
   padding: 4px 8px;
-  border-bottom: 1px solid #E8EBEC;
+  border-bottom: 1px solid #e8ebec;
   white-space: nowrap;
   align-items: center;
   gap: 4px;
@@ -12,13 +12,13 @@
 }
 
 .scrollbar-hidden {
-  overflow: auto;              /* enables scrolling */
-  -ms-overflow-style: none;    /* IE and Edge */
-  scrollbar-width: none;       /* Firefox */
+  overflow: auto; /* enables scrolling */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .scrollbar-hidden::-webkit-scrollbar {
-  display: none;               /* Chrome, Safari, Opera */
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .fortune-toolbar-divider {
@@ -164,7 +164,6 @@
   height: 32px;
   display: flex;
   align-items: center;
-  
 }
 
 .fortune-toolbar-select-option:hover {
@@ -237,7 +236,7 @@
   align-items: center;
   align-self: flex-end;
   top: 40px;
-  right: 32px;
+  right: 80px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
@@ -438,4 +437,4 @@
   border: 1px solid hsl(var(--color-border-default));
   border-radius: 8px;
   margin: 8px 8px 0px 8px;
-}
+}

package/es/components/Toolbar/index.js

@@ -475,7 +475,7 @@ var Toolbar = function Toolbar(_a) {
   var _j = useState(false),
     showDuneModal = _j[0],
     setShowDuneModal = _j[1];
-  var _k = useState(window.innerWidth >= 1280),
+  var _k = useState(window.innerWidth >= 1480),
     isDesktop = _k[0],
     setIsDesktop = _k[1];
   var _l = useDialog(),
@@ -543,7 +543,7 @@ var Toolbar = function Toolbar(_a) {
   }, []);
   useEffect(function () {
     var handleResize = function handleResize() {
-      setIsDesktop(window.innerWidth >= 1280);
+      setIsDesktop(window.innerWidth >= 1480);
     };
     window.addEventListener("resize", handleResize);
     return function () {

package/lib/components/NotationBoxes/index.js

@@ -83,7 +83,7 @@ var NotationBoxes = function NotationBoxes() {
         position: "absolute",
         left: size.left,
         top: size.top,
-        zIndex: 100,
+        zIndex: 400,
         pointerEvents: "none"
       }
     }), /*#__PURE__*/_react.default.createElement("div", {
@@ -92,7 +92,7 @@ var NotationBoxes = function NotationBoxes() {
         position: "absolute",
         left: left,
         top: top,
-        zIndex: isEditing ? 200 : 100,
+        zIndex: isEditing ? 500 : 400,
         boxShadow: "0 1px 1px #0000002e,0 4px 8px #0000001a"
       },
       onMouseDown: function onMouseDown(e) {

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

@@ -69,6 +69,147 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
       }
     };
   }
+  function handleMouseDragScroll(containerEl, scrollHandler, getPixelScale) {
+    var isDragging = false;
+    var startX = 0;
+    var startY = 0;
+    var lastX = 0;
+    var lastY = 0;
+    var velocityX = 0;
+    var velocityY = 0;
+    var autoScrollAnimationId = 0;
+    var lastMoveTime = 0;
+    var scrollDirection = "none";
+    var VELOCITY_SMOOTHING = 0.3;
+    var MIN_DRAG_THRESHOLD = 5;
+    var ACCELERATION_FACTOR = 1.02;
+    var MAX_VELOCITY = 50;
+    var DIRECTION_LOCK_THRESHOLD = 1.5;
+    var EDGE_SCROLL_ZONE = 10;
+    function stopAutoScroll() {
+      if (autoScrollAnimationId) {
+        cancelAnimationFrame(autoScrollAnimationId);
+        autoScrollAnimationId = 0;
+      }
+      velocityX = 0;
+      velocityY = 0;
+    }
+    function autoScroll() {
+      if (!isDragging) {
+        stopAutoScroll();
+        return;
+      }
+      if (Math.abs(velocityX) > 0.1) {
+        velocityX *= ACCELERATION_FACTOR;
+        velocityX = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityX));
+      }
+      if (Math.abs(velocityY) > 0.1) {
+        velocityY *= ACCELERATION_FACTOR;
+        velocityY = Math.max(-MAX_VELOCITY, Math.min(MAX_VELOCITY, velocityY));
+      }
+      var scale = getPixelScale();
+      scrollHandler(velocityX * scale, velocityY * scale);
+      autoScrollAnimationId = requestAnimationFrame(autoScroll);
+    }
+    function onMouseDown(e) {
+      if (e.button !== 0) return;
+      var target = e.target;
+      if (target.tagName === "INPUT" || target.tagName === "BUTTON" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.closest("button") || target.closest("input")) {
+        return;
+      }
+      isDragging = true;
+      scrollDirection = "none";
+      startX = e.clientX;
+      startY = e.clientY;
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = performance.now();
+      velocityX = 0;
+      velocityY = 0;
+      containerEl.style.cursor = "grabbing";
+      e.preventDefault();
+    }
+    function onMouseMove(e) {
+      if (!isDragging) return;
+      var currentTime = performance.now();
+      var deltaTime = Math.max(1, currentTime - lastMoveTime);
+      var deltaX = e.clientX - lastX;
+      var deltaY = e.clientY - lastY;
+      var totalMovedX = e.clientX - startX;
+      var totalMovedY = e.clientY - startY;
+      var absMovedX = Math.abs(totalMovedX);
+      var absMovedY = Math.abs(totalMovedY);
+      var containerRect = containerEl.getBoundingClientRect();
+      var mouseX = e.clientX - containerRect.left;
+      var mouseY = e.clientY - containerRect.top;
+      var isNearLeftEdge = mouseX < EDGE_SCROLL_ZONE;
+      var isNearRightEdge = mouseX > containerRect.width - EDGE_SCROLL_ZONE;
+      var isNearTopEdge = mouseY < EDGE_SCROLL_ZONE;
+      var isNearBottomEdge = mouseY > containerRect.height - EDGE_SCROLL_ZONE;
+      if (scrollDirection === "none" && (absMovedX > MIN_DRAG_THRESHOLD || absMovedY > MIN_DRAG_THRESHOLD)) {
+        if (absMovedX > absMovedY * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "horizontal";
+        } else if (absMovedY > absMovedX * DIRECTION_LOCK_THRESHOLD) {
+          scrollDirection = "vertical";
+        } else {
+          scrollDirection = "none";
+        }
+      }
+      if (scrollDirection === "horizontal" || scrollDirection === "none") {
+        if (absMovedX > MIN_DRAG_THRESHOLD) {
+          if (isNearLeftEdge || isNearRightEdge) {
+            if (Math.abs(deltaX) > 0.1) {
+              var instantVelocityX = deltaX / deltaTime * 16;
+              velocityX = velocityX * (1 - VELOCITY_SMOOTHING) + instantVelocityX * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityX = 0;
+          }
+        }
+      } else {
+        velocityX = 0;
+      }
+      if (scrollDirection === "vertical" || scrollDirection === "none") {
+        if (absMovedY > MIN_DRAG_THRESHOLD) {
+          if (isNearTopEdge || isNearBottomEdge) {
+            if (Math.abs(deltaY) > 0.1) {
+              var instantVelocityY = deltaY / deltaTime * 16;
+              velocityY = velocityY * (1 - VELOCITY_SMOOTHING) + instantVelocityY * VELOCITY_SMOOTHING;
+            }
+            if (!autoScrollAnimationId) {
+              autoScrollAnimationId = requestAnimationFrame(autoScroll);
+            }
+          } else {
+            velocityY = 0;
+          }
+        }
+      } else {
+        velocityY = 0;
+      }
+      lastX = e.clientX;
+      lastY = e.clientY;
+      lastMoveTime = currentTime;
+      e.preventDefault();
+    }
+    function onMouseUp() {
+      if (!isDragging) return;
+      isDragging = false;
+      stopAutoScroll();
+      containerEl.style.cursor = "";
+    }
+    containerEl.addEventListener("mousedown", onMouseDown);
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return function () {
+      stopAutoScroll();
+      containerEl.removeEventListener("mousedown", onMouseDown);
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }
   function handleMobileScroll(containerEl, scrollHandler, getPixelScale) {
     var isScrolling = false;
     var gestureStartClientX = 0;
@@ -217,9 +358,13 @@ var useSmoothScroll = exports.useSmoothScroll = function useSmoothScroll(scrollC
     var unmountMobileScrollHandler = handleMobileScroll(scrollContainerEl, scrollHandler, function () {
       return (window.devicePixelRatio || 1) * context.zoomRatio;
     });
+    var unmountMouseDragHandler = handleMouseDragScroll(scrollContainerEl, scrollHandler, function () {
+      return (window.devicePixelRatio || 1) * context.zoomRatio;
+    });
     return function () {
       unmountScrollHandler();
       unmountMobileScrollHandler();
+      unmountMouseDragHandler();
     };
   }
   (0, _react.useEffect)(function () {

package/lib/components/Toolbar/index.css

@@ -4,7 +4,7 @@
   /* background: #fafafc; */
   position: relative;
   padding: 4px 8px;
-  border-bottom: 1px solid #E8EBEC;
+  border-bottom: 1px solid #e8ebec;
   white-space: nowrap;
   align-items: center;
   gap: 4px;
@@ -12,13 +12,13 @@
 }
 
 .scrollbar-hidden {
-  overflow: auto;              /* enables scrolling */
-  -ms-overflow-style: none;    /* IE and Edge */
-  scrollbar-width: none;       /* Firefox */
+  overflow: auto; /* enables scrolling */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 .scrollbar-hidden::-webkit-scrollbar {
-  display: none;               /* Chrome, Safari, Opera */
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .fortune-toolbar-divider {
@@ -164,7 +164,6 @@
   height: 32px;
   display: flex;
   align-items: center;
-  
 }
 
 .fortune-toolbar-select-option:hover {
@@ -237,7 +236,7 @@
   align-items: center;
   align-self: flex-end;
   top: 40px;
-  right: 32px;
+  right: 80px;
   max-width: 348px;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
   background: white;
@@ -438,4 +437,4 @@
   border: 1px solid hsl(var(--color-border-default));
   border-radius: 8px;
   margin: 8px 8px 0px 8px;
-}
+}

package/lib/components/Toolbar/index.js

@@ -484,7 +484,7 @@ var Toolbar = function Toolbar(_a) {
   var _j = (0, _react.useState)(false),
     showDuneModal = _j[0],
     setShowDuneModal = _j[1];
-  var _k = (0, _react.useState)(window.innerWidth >= 1280),
+  var _k = (0, _react.useState)(window.innerWidth >= 1480),
     isDesktop = _k[0],
     setIsDesktop = _k[1];
   var _l = (0, _useDialog.useDialog)(),
@@ -552,7 +552,7 @@ var Toolbar = function Toolbar(_a) {
   }, []);
   (0, _react.useEffect)(function () {
     var handleResize = function handleResize() {
-      setIsDesktop(window.innerWidth >= 1280);
+      setIsDesktop(window.innerWidth >= 1480);
     };
     window.addEventListener("resize", handleResize);
     return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fileverse-dev/fortune-react",
-  "version": "1.2.96",
+  "version": "1.2.98",
   "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.96",
+    "@fileverse-dev/fortune-core": "1.2.98",
     "@fileverse/ui": "5.0.0",
     "@tippyjs/react": "^4.2.6",
     "@types/regenerator-runtime": "^0.13.6",