likec4 0.42.2 → 0.43.1

package/dist/@likec4/diagrams/diagram/Edges.js

@@ -53,10 +53,11 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
     }),
     initial: (edge) => edgeSprings(edge),
     update: (edge) => {
-      const isHovered = hoveredEdgeId === edge.id;
+      const isInactive = animate && hoveredEdgeId !== null && hoveredEdgeId !== edge.id;
+      const isHovered = animate && hoveredEdgeId === edge.id;
       return {
         ...edgeSprings(edge, isHovered),
-        opacity: 1,
+        opacity: isInactive ? 0.4 : 1,
         lineWidth: isHovered ? 3 : 2
       };
     },
@@ -85,25 +86,23 @@ export function Edges({ animate, theme, diagram, onEdgeClick }) {
   return edgeTransitions((springs, edge, { key }) => /* @__PURE__ */ jsx(
     Group,
     {
-      ...onEdgeClick && {
-        onPointerClick: (e) => {
-          if (DiagramGesture.isDragging || e.evt.button !== 0) {
-            return;
-          }
-          e.cancelBubble = true;
-          onEdgeClick(edge, e);
-        },
-        onPointerEnter: (e) => {
-          if (animate) {
-            setHoveredEdge(edge);
-            mousePointer(e);
-          }
-        },
-        onPointerLeave: (e) => {
-          setHoveredEdge(null);
-          mouseDefault(e);
+      onPointerClick: (e) => {
+        if (!onEdgeClick || DiagramGesture.isDragging || e.evt.button !== 0) {
+          return;
+        }
+        e.cancelBubble = true;
+        onEdgeClick(edge, e);
+      },
+      onPointerEnter: (e) => {
+        if (animate) {
+          setHoveredEdge(edge);
+          mousePointer(e);
         }
       },
+      onPointerLeave: (e) => {
+        setHoveredEdge(null);
+        mouseDefault(e);
+      },
       children: /* @__PURE__ */ jsx(
         EdgeShape,
         {

package/dist/@likec4/diagrams/diagram/Nodes.js

@@ -9,7 +9,7 @@ import { BrowserShape } from "./shapes/Browser.js";
 import { CompoundShape } from "./shapes/Compound.js";
 import { mouseDefault, mousePointer } from "./shapes/utils.js";
 import { isCompound, useNodeSpringsFn } from "./springs.js";
-import { DiagramGesture, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
+import { DiagramGesture, useHoveredEdge, useHoveredNodeId, useSetHoveredNode } from "./state/index.js";
 function nodeShape({ shape }) {
   switch (shape) {
     case "cylinder":
@@ -52,6 +52,7 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
   _last.current = diagram;
   const prevNodes = _prev.current;
   const hoveredNodeId = useHoveredNodeId();
+  const [hoveredEdge] = useHoveredEdge();
   const nodeSprings = useNodeSpringsFn(theme);
   const nodeTransitions = useTransition(diagram.nodes, {
     initial: nodeSprings,
@@ -76,9 +77,11 @@ export function Nodes({ animate, theme, diagram, onNodeClick }) {
     },
     // update: nodeSprings(),
     update: (node) => {
+      const isInactive = animate && hoveredEdge && hoveredEdge.source !== node.id && hoveredEdge.target !== node.id;
       const scale = animate && !isCompound(node) && hoveredNodeId === node.id ? 1.08 : 1;
       return {
         ...nodeSprings(node),
+        opacity: isInactive ? 0.3 : 1,
         scaleX: scale,
         scaleY: scale
       };

package/dist/@likec4/diagrams/diagram/state/atoms.js

@@ -7,6 +7,7 @@ export const hoveredNodeAtom = atom(
   (get) => get(currentHoveredNodeAtom),
   (get, set, update) => {
     clearTimeout(get(nodeTimeoutAtom));
+    clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredNodeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
     if (equals(_prev, _next)) {
@@ -17,7 +18,18 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, _next);
-        }, 100)
+          set(currentHoveredEdgeAtom, null);
+        }, 200)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        nodeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredNodeAtom, _next);
+          set(currentHoveredEdgeAtom, null);
+        }, 150)
       );
       return true;
     }
@@ -40,6 +52,7 @@ const edgeTimeoutAtom = atom(void 0);
 export const hoveredEdgeAtom = atom(
   (get) => get(currentHoveredEdgeAtom),
   (get, set, update) => {
+    clearTimeout(get(nodeTimeoutAtom));
     clearTimeout(get(edgeTimeoutAtom));
     const _prev = get(currentHoveredEdgeAtom);
     const _next = typeof update === "function" ? update(_prev) : update;
@@ -51,7 +64,18 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, _next);
-        }, 100)
+          set(currentHoveredNodeAtom, null);
+        }, 400)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        edgeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredEdgeAtom, _next);
+          set(currentHoveredNodeAtom, null);
+        }, 150)
       );
       return true;
     }
@@ -64,7 +88,7 @@ export const hoveredEdgeAtom = atom(
       );
       return true;
     }
-    set(currentHoveredEdgeAtom, _next);
+    set(currentHoveredEdgeAtom, null);
     return true;
   }
 );

package/dist/@likec4/diagrams/diagram/state/hooks.js

@@ -9,6 +9,9 @@ export function useHoveredNodeId() {
 export function useSetHoveredNode() {
   return useSetAtom(hoveredNodeAtom);
 }
+export function useHoveredEdge() {
+  return useAtom(hoveredEdgeAtom);
+}
 export function useHoveredEdgeId() {
   return useAtomValue(hoveredEdgeIdAtom);
 }