@sentropic/design-system-svelte 0.12.0 → 0.13.0

package/dist/ForceGraph.svelte

@@ -237,6 +237,18 @@
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
   };
 
@@ -256,6 +268,8 @@
     onEdgeHover,
     legend,
     edgeCurve = 0.15,
+    repulsion = 1,
+    onNodeHover,
     class: className
   }: ForceGraphProps = $props();
 
@@ -311,7 +325,8 @@
     es: ForceGraphEdge[],
     w: number,
     h: number,
-    ticks: number
+    ticks: number,
+    repulsionFactor: number
   ): Map<string, { x: number; y: number }> {
     const cx = w / 2;
     const cy = h / 2;
@@ -339,7 +354,11 @@
 
     const area = w * h;
     const k = Math.sqrt(area / Math.max(ns.length, 1)); // ideal node distance
-    const repulsion = k * k * 0.9;
+    // Clamp the caller-supplied factor so extreme values can't explode or
+    // collapse the layout. >1 spreads nodes out, <1 packs them tighter; the
+    // fit-to-content viewBox is recomputed afterwards so spacing just fills space.
+    const clampedRepulsion = Math.min(Math.max(repulsionFactor, 0.1), 10);
+    const repulsion = k * k * 0.9 * clampedRepulsion;
     const restLength = k * 0.8;
     const springK = 0.04;
     const gravity = 0.012;
@@ -426,7 +445,7 @@
   // honouring the motion preference (no rAF loop, no jitter).
   const layout = $derived.by(() => {
     const ticks = Math.max(1, Math.round(iterations));
-    return runSimulation(nodes, edges, width, height, ticks);
+    return runSimulation(nodes, edges, width, height, ticks, repulsion);
   });
 
   const positionedNodes = $derived.by(() =>
@@ -584,6 +603,38 @@
     return !(srcActive || tgtActive);
   }
 
+  // ---------------------------------------------------------------------------
+  // Hover-connexe (demand 7): hovering a node fades the rest of the graph the
+  // same way selection does — the hovered node and its direct neighbours stay
+  // full, every other node dims, and only edges incident to the hovered node
+  // keep their opacity. Composes with selection (predicates OR'd together).
+  // ---------------------------------------------------------------------------
+  const hoveredNodeId = $derived(
+    hoveredNodeIndex != null ? (positionedNodes[hoveredNodeIndex]?.node.id ?? null) : null
+  );
+  const hoverActiveSet = $derived.by(() => {
+    const set = new Set<string>();
+    if (hoveredNodeId == null) return set;
+    set.add(hoveredNodeId);
+    const nb = adjacency.get(hoveredNodeId);
+    if (nb) for (const n of nb) set.add(n);
+    return set;
+  });
+
+  // A node is dimmed by hover when a node is hovered and this one is neither
+  // the hovered node nor one of its direct neighbours.
+  function isHoverDimmedNode(id: string): boolean {
+    if (hoveredNodeId == null) return false;
+    return !hoverActiveSet.has(id);
+  }
+
+  // An edge is dimmed by hover when a node is hovered and the edge is not
+  // incident to it (keep only the hovered node's own edges full).
+  function isHoverDimmedEdge(e: ForceGraphEdge): boolean {
+    if (hoveredNodeId == null) return false;
+    return e.source !== hoveredNodeId && e.target !== hoveredNodeId;
+  }
+
   // Keyboard handler for a node circle: Space/Enter → onSelect, Enter → onOpenEntity.
   function handleNodeKeydown(id: string, e: KeyboardEvent) {
     if (e.key === "Enter" || e.key === " ") {
@@ -734,7 +785,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             d={e.path}
             fill="none"
             stroke-dasharray={e.dashArray}
@@ -747,7 +798,7 @@
             class:st-forceGraph__edge--weak={e.edge.weak}
             class:st-forceGraph__edge--emphasis={e.edge.emphasis}
             class:st-forceGraph__edge--hovered={hoveredEdgeIndex === e.i}
-            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge)}
+            class:st-forceGraph__edge--dim={isEdgeSelectionDimmed(e.edge) || isHoverDimmedEdge(e.edge)}
             x1={e.x1}
             y1={e.y1}
             x2={e.x2}
@@ -764,7 +815,7 @@
       {#each positionedNodes as p (p.node.id)}
         <g
           class="st-forceGraph__node st-forceGraph__node--{p.tone}"
-          class:st-forceGraph__node--dim={(hoveredNodeIndex !== null && hoveredNodeIndex !== p.i) || isSelectionDimmed(p.node.id)}
+          class:st-forceGraph__node--dim={isHoverDimmedNode(p.node.id) || isSelectionDimmed(p.node.id)}
           class:st-forceGraph__node--selected={selectedSet.has(p.node.id)}
           class:st-forceGraph__node--focus={focusId === p.node.id}
           transform="translate({p.x} {p.y})"
@@ -777,10 +828,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}
@@ -793,10 +844,10 @@
               role="button"
               aria-label="{p.title}{p.node.group !== undefined ? `: ${p.node.group}` : ''}"
               aria-pressed={selectedSet.has(p.node.id)}
-              onmouseenter={() => (hoveredNodeIndex = p.i)}
-              onmouseleave={() => (hoveredNodeIndex = null)}
-              onfocus={() => (hoveredNodeIndex = p.i)}
-              onblur={() => (hoveredNodeIndex = null)}
+              onmouseenter={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onmouseleave={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
+              onfocus={() => { hoveredNodeIndex = p.i; onNodeHover?.(p.node); }}
+              onblur={() => { hoveredNodeIndex = null; onNodeHover?.(null); }}
               onclick={() => onSelect?.(p.node.id)}
               ondblclick={() => onOpenEntity?.(p.node.id)}
               onkeydown={(e) => handleNodeKeydown(p.node.id, e)}

package/dist/ForceGraph.svelte.d.ts

@@ -126,6 +126,18 @@ type ForceGraphProps = {
      * by `edgeCurve * dist * factor`. Defaults to a light 0.15.
      */
     edgeCurve?: number;
+    /**
+     * Repulsion multiplier controlling how spread out the layout is.
+     * >1 = graphe plus aéré, <1 = plus compact ; multiplie la force de
+     * répulsion sans toucher au fit-to-content. Defaults to 1. Clamped to
+     * [0.1, 10] internally to avoid layout explosions/collapses.
+     */
+    repulsion?: number;
+    /**
+     * Called when the user hovers (or keyboard-focuses) a node, and again with
+     * null when the hover/focus ends. Intended for syncing an external panel.
+     */
+    onNodeHover?: (node: ForceGraphNode | null) => void;
     class?: string;
 };
 declare const ForceGraph: import("svelte").Component<ForceGraphProps, {}, "">;

package/dist/ForceGraph.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ForceGraph.svelte.d.ts","sourceRoot":"","sources":["../src/lib/ForceGraph.svelte.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sentropic/design-system-svelte",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"