@almadar/ui 5.58.0 → 5.60.0

package/dist/avl/index.cjs

@@ -40169,6 +40169,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -40199,6 +40205,9 @@ var init_GraphCanvas = __esm({
       actions,
       onNodeClick,
       nodeClickEvent,
+      selectedNodeId,
+      repulsion = 800,
+      linkDistance = 100,
       layout = "force",
       entity,
       isLoading = false,
@@ -40214,6 +40223,37 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = React90.useState(null);
       const nodesRef = React90.useRef([]);
       const [, forceUpdate] = React90.useState(0);
+      const interactionRef = React90.useRef({
+        mode: "none",
+        dragNodeId: null,
+        startMouse: { x: 0, y: 0 },
+        startOffset: { x: 0, y: 0 },
+        downPos: { x: 0, y: 0 }
+      });
+      const toCoords = React90.useCallback(
+        (e) => {
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          const rect = canvas.getBoundingClientRect();
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
+          return {
+            screenX,
+            screenY,
+            graphX: (screenX - offset.x) / zoom,
+            graphY: (screenY - offset.y) / zoom
+          };
+        },
+        [offset, zoom]
+      );
+      const nodeAt = React90.useCallback((graphX, graphY) => {
+        return nodesRef.current.find((n) => {
+          const dist = Math.sqrt((n.x - graphX) ** 2 + (n.y - graphY) ** 2);
+          return dist < (n.size || 8) + 4;
+        });
+      }, []);
       const handleAction = React90.useCallback(
         (action) => {
           if (action.event) {
@@ -40279,7 +40319,7 @@ var init_GraphCanvas = __esm({
                 const dx = nodes[j].x - nodes[i].x;
                 const dy = nodes[j].y - nodes[i].y;
                 const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const force = 800 / (dist * dist);
+                const force = repulsion / (dist * dist);
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -40295,7 +40335,7 @@ var init_GraphCanvas = __esm({
               const dx = target.x - source.x;
               const dy = target.y - source.y;
               const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-              const force = (dist - 100) * 0.05;
+              const force = (dist - linkDistance) * 0.05;
               const fx = dx / dist * force;
               const fy = dy / dist * force;
               source.fx += fx;
@@ -40329,7 +40369,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
       React90.useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -40338,6 +40378,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -40363,20 +40404,27 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
+          const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
+          const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
-          ctx.arc(node.x, node.y, isHovered ? size + 2 : size, 0, Math.PI * 2);
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
-          ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
-          ctx.lineWidth = isHovered ? 2 : 1;
+          if (isSelected) {
+            ctx.strokeStyle = accentColor;
+            ctx.lineWidth = 3;
+          } else {
+            ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
+            ctx.lineWidth = isHovered ? 2 : 1;
+          }
           ctx.stroke();
           if (showLabels && node.label) {
             ctx.fillStyle = "#666666";
-            ctx.font = `${isHovered ? "bold " : ""}10px system-ui`;
+            ctx.font = `${isSelected || isHovered ? "bold " : ""}10px system-ui`;
             ctx.textAlign = "center";
-            ctx.fillText(node.label, node.x, node.y + size + 12);
+            ctx.fillText(node.label, node.x, node.y + radius + 12);
           }
         }
         ctx.restore();
@@ -40387,6 +40435,97 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
+      const handleWheel = React90.useCallback(
+        (e) => {
+          if (!interactive) return;
+          e.preventDefault();
+          const coords = toCoords(e);
+          if (!coords) return;
+          const oldZoom = zoom;
+          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+          if (newZoom === oldZoom) return;
+          setOffset((o) => ({
+            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
+            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
+          }));
+          setZoom(newZoom);
+        },
+        [interactive, toCoords, zoom]
+      );
+      const handleMouseDown = React90.useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          const state = interactionRef.current;
+          state.downPos = { x: e.clientX, y: e.clientY };
+          state.startMouse = { x: e.clientX, y: e.clientY };
+          state.startOffset = { ...offset };
+          if (draggable && node) {
+            state.mode = "dragging";
+            state.dragNodeId = node.id;
+          } else if (interactive) {
+            state.mode = "panning";
+            state.dragNodeId = null;
+          } else {
+            state.mode = "none";
+            state.dragNodeId = null;
+          }
+        },
+        [toCoords, nodeAt, draggable, interactive, offset]
+      );
+      const handleMouseMove = React90.useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          if (state.mode === "panning") {
+            const dx = e.clientX - state.startMouse.x;
+            const dy = e.clientY - state.startMouse.y;
+            setOffset({ x: state.startOffset.x + dx, y: state.startOffset.y + dy });
+            return;
+          }
+          if (state.mode === "dragging" && state.dragNodeId) {
+            const coords2 = toCoords(e);
+            if (!coords2) return;
+            const node2 = nodesRef.current.find((n) => n.id === state.dragNodeId);
+            if (node2) {
+              node2.x = coords2.graphX;
+              node2.y = coords2.graphY;
+              node2.vx = 0;
+              node2.vy = 0;
+              forceUpdate((n) => n + 1);
+            }
+            return;
+          }
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          setHoveredNode(node?.id ?? null);
+        },
+        [toCoords, nodeAt]
+      );
+      const handleMouseUp = React90.useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
+          state.mode = "none";
+          state.dragNodeId = null;
+          if (moved < 4) {
+            const coords = toCoords(e);
+            if (!coords) return;
+            const node = nodeAt(coords.graphX, coords.graphY);
+            if (node) {
+              handleNodeClick(node);
+            }
+          }
+        },
+        [toCoords, nodeAt, handleNodeClick]
+      );
+      const handleMouseLeave = React90.useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+        setHoveredNode(null);
+      }, []);
       if (isLoading) {
         return /* @__PURE__ */ jsxRuntime.jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -40448,20 +40587,11 @@ var init_GraphCanvas = __esm({
             height,
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
-            onClick: (e) => {
-              const canvas = canvasRef.current;
-              if (!canvas) return;
-              const rect = canvas.getBoundingClientRect();
-              const x = (e.clientX - rect.left - offset.x) / zoom;
-              const y = (e.clientY - rect.top - offset.y) / zoom;
-              const clickedNode = nodesRef.current.find((n) => {
-                const dist = Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2);
-                return dist < (n.size || 8) + 4;
-              });
-              if (clickedNode) {
-                handleNodeClick(clickedNode);
-              }
-            }
+            onWheel: handleWheel,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "xs", align: "center", children: [

package/dist/avl/index.js

@@ -40122,6 +40122,12 @@ function getGroupColor(group, groups) {
   const idx = groups.indexOf(group);
   return GROUP_COLORS2[idx % GROUP_COLORS2.length];
 }
+function resolveColor2(color, el) {
+  const m = /^var\((--[^,)]+)(?:,\s*([^)]+))?\)$/.exec(color.trim());
+  if (!m) return color;
+  const resolved = getComputedStyle(el).getPropertyValue(m[1]).trim();
+  return resolved || (m[2]?.trim() ?? "#888888");
+}
 var GROUP_COLORS2, GraphCanvas;
 var init_GraphCanvas = __esm({
   "components/core/molecules/GraphCanvas.tsx"() {
@@ -40152,6 +40158,9 @@ var init_GraphCanvas = __esm({
       actions,
       onNodeClick,
       nodeClickEvent,
+      selectedNodeId,
+      repulsion = 800,
+      linkDistance = 100,
       layout = "force",
       entity,
       isLoading = false,
@@ -40167,6 +40176,37 @@ var init_GraphCanvas = __esm({
       const [hoveredNode, setHoveredNode] = useState(null);
       const nodesRef = useRef([]);
       const [, forceUpdate] = useState(0);
+      const interactionRef = useRef({
+        mode: "none",
+        dragNodeId: null,
+        startMouse: { x: 0, y: 0 },
+        startOffset: { x: 0, y: 0 },
+        downPos: { x: 0, y: 0 }
+      });
+      const toCoords = useCallback(
+        (e) => {
+          const canvas = canvasRef.current;
+          if (!canvas) return null;
+          const rect = canvas.getBoundingClientRect();
+          const scaleX = rect.width > 0 ? canvas.width / rect.width : 1;
+          const scaleY = rect.height > 0 ? canvas.height / rect.height : 1;
+          const screenX = (e.clientX - rect.left) * scaleX;
+          const screenY = (e.clientY - rect.top) * scaleY;
+          return {
+            screenX,
+            screenY,
+            graphX: (screenX - offset.x) / zoom,
+            graphY: (screenY - offset.y) / zoom
+          };
+        },
+        [offset, zoom]
+      );
+      const nodeAt = useCallback((graphX, graphY) => {
+        return nodesRef.current.find((n) => {
+          const dist = Math.sqrt((n.x - graphX) ** 2 + (n.y - graphY) ** 2);
+          return dist < (n.size || 8) + 4;
+        });
+      }, []);
       const handleAction = useCallback(
         (action) => {
           if (action.event) {
@@ -40232,7 +40272,7 @@ var init_GraphCanvas = __esm({
                 const dx = nodes[j].x - nodes[i].x;
                 const dy = nodes[j].y - nodes[i].y;
                 const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const force = 800 / (dist * dist);
+                const force = repulsion / (dist * dist);
                 const fx = dx / dist * force;
                 const fy = dy / dist * force;
                 nodes[i].fx -= fx;
@@ -40248,7 +40288,7 @@ var init_GraphCanvas = __esm({
               const dx = target.x - source.x;
               const dy = target.y - source.y;
               const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-              const force = (dist - 100) * 0.05;
+              const force = (dist - linkDistance) * 0.05;
               const fx = dx / dist * force;
               const fy = dy / dist * force;
               source.fx += fx;
@@ -40282,7 +40322,7 @@ var init_GraphCanvas = __esm({
         return () => {
           cancelAnimationFrame(animRef.current);
         };
-      }, [propNodes, propEdges, layout]);
+      }, [propNodes, propEdges, layout, repulsion, linkDistance]);
       useEffect(() => {
         const canvas = canvasRef.current;
         if (!canvas) return;
@@ -40291,6 +40331,7 @@ var init_GraphCanvas = __esm({
         const w = canvas.width;
         const h = canvas.height;
         const nodes = nodesRef.current;
+        const accentColor = resolveColor2("var(--color-accent)", canvas);
         ctx.clearRect(0, 0, w, h);
         ctx.save();
         ctx.translate(offset.x, offset.y);
@@ -40316,20 +40357,27 @@ var init_GraphCanvas = __esm({
         }
         for (const node of nodes) {
           const size = node.size || 8;
-          const color = node.color || getGroupColor(node.group, groups);
+          const color = resolveColor2(node.color || getGroupColor(node.group, groups), canvas);
           const isHovered = hoveredNode === node.id;
+          const isSelected = selectedNodeId !== void 0 && node.id === selectedNodeId;
+          const radius = isSelected ? size + 4 : isHovered ? size + 2 : size;
           ctx.beginPath();
-          ctx.arc(node.x, node.y, isHovered ? size + 2 : size, 0, Math.PI * 2);
+          ctx.arc(node.x, node.y, radius, 0, Math.PI * 2);
           ctx.fillStyle = color;
           ctx.fill();
-          ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
-          ctx.lineWidth = isHovered ? 2 : 1;
+          if (isSelected) {
+            ctx.strokeStyle = accentColor;
+            ctx.lineWidth = 3;
+          } else {
+            ctx.strokeStyle = isHovered ? "#ffffff" : "#00000020";
+            ctx.lineWidth = isHovered ? 2 : 1;
+          }
           ctx.stroke();
           if (showLabels && node.label) {
             ctx.fillStyle = "#666666";
-            ctx.font = `${isHovered ? "bold " : ""}10px system-ui`;
+            ctx.font = `${isSelected || isHovered ? "bold " : ""}10px system-ui`;
             ctx.textAlign = "center";
-            ctx.fillText(node.label, node.x, node.y + size + 12);
+            ctx.fillText(node.label, node.x, node.y + radius + 12);
           }
         }
         ctx.restore();
@@ -40340,6 +40388,97 @@ var init_GraphCanvas = __esm({
         setZoom(1);
         setOffset({ x: 0, y: 0 });
       }, []);
+      const handleWheel = useCallback(
+        (e) => {
+          if (!interactive) return;
+          e.preventDefault();
+          const coords = toCoords(e);
+          if (!coords) return;
+          const oldZoom = zoom;
+          const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+          const newZoom = Math.max(0.3, Math.min(3, oldZoom * factor));
+          if (newZoom === oldZoom) return;
+          setOffset((o) => ({
+            x: coords.screenX - (coords.screenX - o.x) * (newZoom / oldZoom),
+            y: coords.screenY - (coords.screenY - o.y) * (newZoom / oldZoom)
+          }));
+          setZoom(newZoom);
+        },
+        [interactive, toCoords, zoom]
+      );
+      const handleMouseDown = useCallback(
+        (e) => {
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          const state = interactionRef.current;
+          state.downPos = { x: e.clientX, y: e.clientY };
+          state.startMouse = { x: e.clientX, y: e.clientY };
+          state.startOffset = { ...offset };
+          if (draggable && node) {
+            state.mode = "dragging";
+            state.dragNodeId = node.id;
+          } else if (interactive) {
+            state.mode = "panning";
+            state.dragNodeId = null;
+          } else {
+            state.mode = "none";
+            state.dragNodeId = null;
+          }
+        },
+        [toCoords, nodeAt, draggable, interactive, offset]
+      );
+      const handleMouseMove = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          if (state.mode === "panning") {
+            const dx = e.clientX - state.startMouse.x;
+            const dy = e.clientY - state.startMouse.y;
+            setOffset({ x: state.startOffset.x + dx, y: state.startOffset.y + dy });
+            return;
+          }
+          if (state.mode === "dragging" && state.dragNodeId) {
+            const coords2 = toCoords(e);
+            if (!coords2) return;
+            const node2 = nodesRef.current.find((n) => n.id === state.dragNodeId);
+            if (node2) {
+              node2.x = coords2.graphX;
+              node2.y = coords2.graphY;
+              node2.vx = 0;
+              node2.vy = 0;
+              forceUpdate((n) => n + 1);
+            }
+            return;
+          }
+          const coords = toCoords(e);
+          if (!coords) return;
+          const node = nodeAt(coords.graphX, coords.graphY);
+          setHoveredNode(node?.id ?? null);
+        },
+        [toCoords, nodeAt]
+      );
+      const handleMouseUp = useCallback(
+        (e) => {
+          const state = interactionRef.current;
+          const moved = Math.abs(e.clientX - state.downPos.x) + Math.abs(e.clientY - state.downPos.y);
+          state.mode = "none";
+          state.dragNodeId = null;
+          if (moved < 4) {
+            const coords = toCoords(e);
+            if (!coords) return;
+            const node = nodeAt(coords.graphX, coords.graphY);
+            if (node) {
+              handleNodeClick(node);
+            }
+          }
+        },
+        [toCoords, nodeAt, handleNodeClick]
+      );
+      const handleMouseLeave = useCallback(() => {
+        interactionRef.current.mode = "none";
+        interactionRef.current.dragNodeId = null;
+        setHoveredNode(null);
+      }, []);
       if (isLoading) {
         return /* @__PURE__ */ jsx(LoadingState, { message: t("common.loading"), className });
       }
@@ -40401,20 +40540,11 @@ var init_GraphCanvas = __esm({
             height,
             className: "w-full cursor-grab active:cursor-grabbing",
             style: { height },
-            onClick: (e) => {
-              const canvas = canvasRef.current;
-              if (!canvas) return;
-              const rect = canvas.getBoundingClientRect();
-              const x = (e.clientX - rect.left - offset.x) / zoom;
-              const y = (e.clientY - rect.top - offset.y) / zoom;
-              const clickedNode = nodesRef.current.find((n) => {
-                const dist = Math.sqrt((n.x - x) ** 2 + (n.y - y) ** 2);
-                return dist < (n.size || 8) + 4;
-              });
-              if (clickedNode) {
-                handleNodeClick(clickedNode);
-              }
-            }
+            onWheel: handleWheel,
+            onMouseDown: handleMouseDown,
+            onMouseMove: handleMouseMove,
+            onMouseUp: handleMouseUp,
+            onMouseLeave: handleMouseLeave
           }
         ) }),
         groups.length > 1 && /* @__PURE__ */ jsx(HStack, { gap: "md", className: "px-4 py-2 border-t border-border", wrap: true, children: groups.map((group, idx) => /* @__PURE__ */ jsxs(HStack, { gap: "xs", align: "center", children: [

package/dist/components/core/molecules/GraphCanvas.d.ts

@@ -59,6 +59,12 @@ export interface GraphCanvasProps {
     nodeClickEvent?: EventEmit<{
         id: string;
     }>;
+    /** Currently selected node id (rendered emphasized) */
+    selectedNodeId?: string;
+    /** Force-sim repulsion strength between nodes (larger ⇒ more spread out) */
+    repulsion?: number;
+    /** Force-sim target edge length (larger ⇒ more spread out) */
+    linkDistance?: number;
     /** Layout algorithm */
     layout?: "force" | "circular" | "grid";
     /** Entity name for schema-driven auto-fetch */