canvu-react 0.3.23 → 0.3.24

package/dist/react.cjs

@@ -1611,6 +1611,21 @@ function reorderManagedImages(items, orderedManagedIds) {
   });
   return restackManagedImages(next);
 }
+var OPEN_KEYFRAME_ID = "canvu-images-menu-open-keyframe";
+var OPEN_KEYFRAME_CSS = `
+@keyframes canvu-images-menu-open {
+	from { opacity: 0; transform: scale(0.6); }
+	to { opacity: 1; transform: scale(1); }
+}
+`;
+function ensureOpenKeyframe() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(OPEN_KEYFRAME_ID)) return;
+  const style = document.createElement("style");
+  style.id = OPEN_KEYFRAME_ID;
+  style.textContent = OPEN_KEYFRAME_CSS;
+  document.head.appendChild(style);
+}
 var panelStyle = {
   width: "fit-content",
   maxHeight: "min(85dvh, 820px)",
@@ -1621,7 +1636,9 @@ var panelStyle = {
   boxShadow: "0 10px 40px rgba(15, 23, 42, 0.12)",
   fontFamily: "system-ui, sans-serif",
   fontSize: 14,
-  color: "#0f172a"
+  color: "#0f172a",
+  transformOrigin: "top right",
+  animation: "canvu-images-menu-open 180ms cubic-bezier(0.2, 0.8, 0.2, 1)"
 };
 var headerStyle = {
   display: "flex",
@@ -1743,33 +1760,16 @@ var collapsedButtonStyle = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: 6,
+  width: 44,
   height: 44,
-  minWidth: 44,
-  padding: "0 12px",
+  padding: 0,
   border: "1px solid #e2e8f0",
-  borderRadius: 22,
+  borderRadius: 10,
   background: "#ffffff",
   color: "#0f172a",
   cursor: "pointer",
-  fontFamily: "system-ui, sans-serif",
-  fontSize: 13,
-  fontWeight: 600,
   boxShadow: "0 8px 24px rgba(15, 23, 42, 0.12)"
 };
-var collapsedCountStyle = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  minWidth: 20,
-  height: 20,
-  padding: "0 6px",
-  borderRadius: 10,
-  backgroundColor: "#0f172a",
-  color: "#ffffff",
-  fontSize: 11,
-  fontWeight: 600
-};
 var defaultLabels = {
   title: "Images",
   dragHandle: "Drag to reorder",
@@ -1793,12 +1793,15 @@ function ImagesMenu({
     })
   );
   const [collapsed, setCollapsed] = react.useState(false);
+  react.useEffect(() => {
+    ensureOpenKeyframe();
+  }, []);
   if (managed.length === 0) {
     return null;
   }
   const resolvedLabels = { ...defaultLabels, ...labels };
   if (collapsed) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1807,10 +1810,7 @@ function ImagesMenu({
         "aria-label": resolvedLabels.expand,
         title: resolvedLabels.expand,
         onClick: () => setCollapsed(false),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: collapsedCountStyle, children: managed.length })
-        ]
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Images, { size: 20 })
       }
     );
   }
@@ -1879,11 +1879,20 @@ function ImagesMenuRow({
   onRotate,
   onDelete
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = sortable.useSortable({ id: item.id });
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: item.id });
+  const feedbackTransition = "background-color 140ms ease, opacity 140ms ease";
   const wrapperStyle = {
     ...rowStyle,
     transform: utilities.CSS.Transform.toString(transform),
-    transition,
+    transition: transition ? `${transition}, ${feedbackTransition}` : feedbackTransition,
     background: isDragging ? "#eef2f7" : "transparent",
     opacity: isDragging ? 0.85 : 1
   };
@@ -1892,6 +1901,7 @@ function ImagesMenuRow({
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
+        ref: setActivatorNodeRef,
         type: "button",
         style: handleStyle,
         "aria-label": labels.dragHandle,
@@ -4786,16 +4796,23 @@ function distanceBetween(a, b) {
 function midpoint(a, b) {
   return { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
 }
-function wheelDeltaYPixels(e) {
-  switch (e.deltaMode) {
+function wheelDeltaPixels(delta, deltaMode) {
+  switch (deltaMode) {
     case WheelEvent.DOM_DELTA_LINE:
-      return e.deltaY * 16;
+      return delta * 16;
     case WheelEvent.DOM_DELTA_PAGE:
-      return e.deltaY * 400;
+      return delta * 400;
     default:
-      return e.deltaY;
+      return delta;
   }
 }
+var TRACKPAD_MAX_DELTA = 20;
+var MOUSE_WHEEL_DAMPING = 0.4;
+function softenWheelDelta(d) {
+  const a = Math.abs(d);
+  if (a <= TRACKPAD_MAX_DELTA) return d;
+  return Math.sign(d) * (TRACKPAD_MAX_DELTA + (a - TRACKPAD_MAX_DELTA) * MOUSE_WHEEL_DAMPING);
+}
 function attachViewportInput(options) {
   const {
     element,
@@ -4818,8 +4835,8 @@ function attachViewportInput(options) {
   const onWheel = (e) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
-      const dy = wheelDeltaYPixels(e);
-      const normDy = Math.abs(dy) < 20 ? dy * 12 : dy;
+      const dy = wheelDeltaPixels(e.deltaY, e.deltaMode);
+      const normDy = Math.abs(dy) < TRACKPAD_MAX_DELTA ? dy * 12 : dy;
       const factor = Math.exp(-normDy * wheelZoomSensitivity);
       const rect = element.getBoundingClientRect();
       camera.setZoom(camera.zoom * factor, {
@@ -4830,8 +4847,10 @@ function attachViewportInput(options) {
       return;
     }
     e.preventDefault();
-    camera.x -= e.deltaX * wheelPanSensitivity / camera.zoom;
-    camera.y -= e.deltaY * wheelPanSensitivity / camera.zoom;
+    const panDx = softenWheelDelta(wheelDeltaPixels(e.deltaX, e.deltaMode));
+    const panDy = softenWheelDelta(wheelDeltaPixels(e.deltaY, e.deltaMode));
+    camera.x -= panDx * wheelPanSensitivity / camera.zoom;
+    camera.y -= panDy * wheelPanSensitivity / camera.zoom;
     onUpdate();
   };
   const onPointerDown = (e) => {
@@ -7658,15 +7677,22 @@ var VectorViewport = react.forwardRef(
     react.useEffect(() => {
       rememberImageBlobHrefs(items, rememberedImageBlobHrefsRef.current);
     }, [items]);
-    react.useEffect(
-      () => () => {
-        releaseRememberedBlobHrefs(
-          rememberedImageBlobHrefsRef.current,
-          (href) => URL.revokeObjectURL(href)
-        );
-      },
-      []
-    );
+    const blobRevokeTimerRef = react.useRef(null);
+    react.useEffect(() => {
+      if (blobRevokeTimerRef.current !== null) {
+        clearTimeout(blobRevokeTimerRef.current);
+        blobRevokeTimerRef.current = null;
+      }
+      return () => {
+        blobRevokeTimerRef.current = setTimeout(() => {
+          releaseRememberedBlobHrefs(
+            rememberedImageBlobHrefsRef.current,
+            (href) => URL.revokeObjectURL(href)
+          );
+          blobRevokeTimerRef.current = null;
+        }, 100);
+      };
+    }, []);
     const PASTE_OFFSET_WORLD = 24;
     const copyIdsToInternalClipboard = react.useCallback((ids) => {
       if (ids.length === 0) return;