npm - @almadar/ui - Versions diffs - 4.41.2 → 4.42.0 - Mend

@almadar/ui 4.41.2 → 4.42.0

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 (3) hide show

package/dist/avl/index.cjs CHANGED Viewed

@@ -46750,13 +46750,14 @@ var AvlSwimLane = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             "text",
             {
-              x: rightX + 8,
+              x: totalWidth - 18,
               y: ey + 4,
               fontSize: 11,
               fontWeight: 500,
               fill: color,
               opacity: 0.6,
               fontFamily: "inherit",
+              textAnchor: "end",
               children: evt
             }
           ),
@@ -52647,15 +52648,21 @@ function layoutOrbitals(count, containerW, containerH) {
   const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
   const rows = Math.ceil(count / cols);
   const edgePad = 24;
-  const minCx = UNIT_DISPLAY_W / 2 + edgePad;
-  const minCy = UNIT_DISPLAY_H / 2 + edgePad;
-  const maxCx = Math.max(minCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
-  const maxCy = Math.max(minCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
-  const stepX = cols > 1 ? (maxCx - minCx) / (cols - 1) : 0;
-  const stepY = rows > 1 ? (maxCy - minCy) / (rows - 1) : 0;
+  const fitMinCx = UNIT_DISPLAY_W / 2 + edgePad;
+  const fitMinCy = UNIT_DISPLAY_H / 2 + edgePad;
+  const fitMaxCx = Math.max(fitMinCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
+  const fitMaxCy = Math.max(fitMinCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
+  const fitStepX = cols > 1 ? (fitMaxCx - fitMinCx) / (cols - 1) : 0;
+  const fitStepY = rows > 1 ? (fitMaxCy - fitMinCy) / (rows - 1) : 0;
+  const stepX = Math.min(fitStepX, UNIT_DISPLAY_W * 3.5);
+  const stepY = Math.min(fitStepY, UNIT_DISPLAY_H * 3.5);
+  const gridW = (cols - 1) * stepX;
+  const gridH = (rows - 1) * stepY;
+  const originX = (containerW - gridW) / 2;
+  const originY = (containerH - gridH) / 2;
   return Array.from({ length: count }, (_, i) => ({
-    cx: minCx + i % cols * stepX,
-    cy: minCy + Math.floor(i / cols) * stepY
+    cx: originX + i % cols * stepX,
+    cy: originY + Math.floor(i / cols) * stepY
   }));
 }
 var avlOczWireId = 0;
@@ -52935,6 +52942,10 @@ var AvlOrbitalsCosmicZoom = ({
   const [pan, setPan] = React119.useState({ x: 0, y: 0 });
   const dragStateRef = React119.useRef(null);
   const transformWrapperRef = React119.useRef(null);
+  React119.useEffect(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [state.level]);
   const clampZoom = React119.useCallback(
     (z) => Math.max(minZoom, Math.min(maxZoom, z)),
     [minZoom, maxZoom]
@@ -52994,7 +53005,7 @@ var AvlOrbitalsCosmicZoom = ({
     };
     wrapper.addEventListener("wheel", wheelListener, { passive: false });
     return () => wrapper.removeEventListener("wheel", wheelListener);
-  }, [clampZoom]);
+  }, [clampZoom, state.level]);
   const zoomIn = React119.useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
   const zoomOut = React119.useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
   const resetZoom = React119.useCallback(() => {
@@ -53249,14 +53260,42 @@ var AvlOrbitalsCosmicZoom = ({
               paddingLeft: 24,
               paddingRight: 24
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              AvlTraitScene,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                data: traitLevelData,
-                color,
-                onTransitionClick: (idx) => handleTransitionSelect(idx)
+                ref: transformWrapperRef,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp,
+                style: {
+                  position: "relative",
+                  width: "100%",
+                  height: "100%",
+                  cursor: dragStateRef.current ? "grabbing" : "grab",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                      transformOrigin: "0 0"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      AvlTraitScene,
+                      {
+                        data: traitLevelData,
+                        color,
+                        onTransitionClick: (idx) => handleTransitionSelect(idx)
+                      }
+                    ) })
+                  }
+                )
               }
-            ) })
+            )
           }
         ),
         state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsxRuntime.jsx(
@@ -53270,13 +53309,60 @@ var AvlOrbitalsCosmicZoom = ({
               paddingLeft: 24,
               paddingRight: 24
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
-              AvlTransitionScene,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
               {
-                data: transitionLevelData,
-                color
+                ref: transformWrapperRef,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp,
+                style: {
+                  position: "relative",
+                  width: "100%",
+                  height: "100%",
+                  cursor: dragStateRef.current ? "grabbing" : "grab",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                      transformOrigin: "0 0"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      AvlTransitionScene,
+                      {
+                        data: transitionLevelData,
+                        color
+                      }
+                    ) })
+                  }
+                )
               }
-            ) })
+            )
+          }
+        ),
+        (state.level === "trait" || state.level === "transition") && /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              top: 12,
+              right: 12,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              zIndex: 30
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "plus", size: "sm" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "minus", size: "sm" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "maximize", size: "sm" }) })
+            ]
           }
         )
       ]

package/dist/avl/index.js CHANGED Viewed

@@ -46704,13 +46704,14 @@ var AvlSwimLane = ({
           /* @__PURE__ */ jsx(
             "text",
             {
-              x: rightX + 8,
+              x: totalWidth - 18,
               y: ey + 4,
               fontSize: 11,
               fontWeight: 500,
               fill: color,
               opacity: 0.6,
               fontFamily: "inherit",
+              textAnchor: "end",
               children: evt
             }
           ),
@@ -52601,15 +52602,21 @@ function layoutOrbitals(count, containerW, containerH) {
   const cols = Math.min(count, Math.ceil(Math.sqrt(count)));
   const rows = Math.ceil(count / cols);
   const edgePad = 24;
-  const minCx = UNIT_DISPLAY_W / 2 + edgePad;
-  const minCy = UNIT_DISPLAY_H / 2 + edgePad;
-  const maxCx = Math.max(minCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
-  const maxCy = Math.max(minCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
-  const stepX = cols > 1 ? (maxCx - minCx) / (cols - 1) : 0;
-  const stepY = rows > 1 ? (maxCy - minCy) / (rows - 1) : 0;
+  const fitMinCx = UNIT_DISPLAY_W / 2 + edgePad;
+  const fitMinCy = UNIT_DISPLAY_H / 2 + edgePad;
+  const fitMaxCx = Math.max(fitMinCx, containerW - UNIT_DISPLAY_W / 2 - edgePad);
+  const fitMaxCy = Math.max(fitMinCy, containerH - UNIT_DISPLAY_H / 2 - edgePad);
+  const fitStepX = cols > 1 ? (fitMaxCx - fitMinCx) / (cols - 1) : 0;
+  const fitStepY = rows > 1 ? (fitMaxCy - fitMinCy) / (rows - 1) : 0;
+  const stepX = Math.min(fitStepX, UNIT_DISPLAY_W * 3.5);
+  const stepY = Math.min(fitStepY, UNIT_DISPLAY_H * 3.5);
+  const gridW = (cols - 1) * stepX;
+  const gridH = (rows - 1) * stepY;
+  const originX = (containerW - gridW) / 2;
+  const originY = (containerH - gridH) / 2;
   return Array.from({ length: count }, (_, i) => ({
-    cx: minCx + i % cols * stepX,
-    cy: minCy + Math.floor(i / cols) * stepY
+    cx: originX + i % cols * stepX,
+    cy: originY + Math.floor(i / cols) * stepY
   }));
 }
 var avlOczWireId = 0;
@@ -52889,6 +52896,10 @@ var AvlOrbitalsCosmicZoom = ({
   const [pan, setPan] = useState({ x: 0, y: 0 });
   const dragStateRef = useRef(null);
   const transformWrapperRef = useRef(null);
+  useEffect(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, [state.level]);
   const clampZoom = useCallback(
     (z) => Math.max(minZoom, Math.min(maxZoom, z)),
     [minZoom, maxZoom]
@@ -52948,7 +52959,7 @@ var AvlOrbitalsCosmicZoom = ({
     };
     wrapper.addEventListener("wheel", wheelListener, { passive: false });
     return () => wrapper.removeEventListener("wheel", wheelListener);
-  }, [clampZoom]);
+  }, [clampZoom, state.level]);
   const zoomIn = useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
   const zoomOut = useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
   const resetZoom = useCallback(() => {
@@ -53203,14 +53214,42 @@ var AvlOrbitalsCosmicZoom = ({
               paddingLeft: 24,
               paddingRight: 24
             },
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-              AvlTraitScene,
+            children: /* @__PURE__ */ jsx(
+              "div",
               {
-                data: traitLevelData,
-                color,
-                onTransitionClick: (idx) => handleTransitionSelect(idx)
+                ref: transformWrapperRef,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp,
+                style: {
+                  position: "relative",
+                  width: "100%",
+                  height: "100%",
+                  cursor: dragStateRef.current ? "grabbing" : "grab",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                      transformOrigin: "0 0"
+                    },
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+                      AvlTraitScene,
+                      {
+                        data: traitLevelData,
+                        color,
+                        onTransitionClick: (idx) => handleTransitionSelect(idx)
+                      }
+                    ) })
+                  }
+                )
               }
-            ) })
+            )
           }
         ),
         state.level === "transition" && transitionLevelData && /* @__PURE__ */ jsx(
@@ -53224,13 +53263,60 @@ var AvlOrbitalsCosmicZoom = ({
               paddingLeft: 24,
               paddingRight: 24
             },
-            children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
-              AvlTransitionScene,
+            children: /* @__PURE__ */ jsx(
+              "div",
               {
-                data: transitionLevelData,
-                color
+                ref: transformWrapperRef,
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                onPointerCancel: handlePointerUp,
+                style: {
+                  position: "relative",
+                  width: "100%",
+                  height: "100%",
+                  cursor: dragStateRef.current ? "grabbing" : "grab",
+                  overflow: "hidden"
+                },
+                children: /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      position: "absolute",
+                      inset: 0,
+                      transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                      transformOrigin: "0 0"
+                    },
+                    children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 600 400", style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ jsx(
+                      AvlTransitionScene,
+                      {
+                        data: transitionLevelData,
+                        color
+                      }
+                    ) })
+                  }
+                )
               }
-            ) })
+            )
+          }
+        ),
+        (state.level === "trait" || state.level === "transition") && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            position: "absolute",
+            style: {
+              top: 12,
+              right: 12,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              zIndex: 30
+            },
+            children: [
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
+            ]
           }
         )
       ]

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.41.2",
+  "version": "4.42.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [