likec4 0.42.2 → 0.43.0

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
       };
     },

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

@@ -17,7 +17,18 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, _next);
-        }, 100)
+          clearTimeout(get(edgeTimeoutAtom));
+          set(currentHoveredEdgeAtom, null);
+        }, 200)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        nodeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredNodeAtom, _next);
+        }, 150)
       );
       return true;
     }
@@ -26,7 +37,7 @@ export const hoveredNodeAtom = atom(
         nodeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredNodeAtom, null);
-        }, 150)
+        }, 200)
       );
       return true;
     }
@@ -51,7 +62,18 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, _next);
-        }, 100)
+          clearTimeout(get(nodeTimeoutAtom));
+          set(currentHoveredNodeAtom, null);
+        }, 600)
+      );
+      return true;
+    }
+    if (_next != null && _prev != null) {
+      set(
+        edgeTimeoutAtom,
+        setTimeout(() => {
+          set(currentHoveredEdgeAtom, _next);
+        }, 200)
       );
       return true;
     }
@@ -60,11 +82,11 @@ export const hoveredEdgeAtom = atom(
         edgeTimeoutAtom,
         setTimeout(() => {
           set(currentHoveredEdgeAtom, null);
-        }, 150)
+        }, 300)
       );
       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);
 }