@aiready/components 0.1.7 → 0.1.8

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React2 from 'react';
-import React2__default, { forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback } from 'react';
+import React2__default, { forwardRef, useRef, useState, useEffect, useCallback, useImperativeHandle } from 'react';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -1015,7 +1015,6 @@ var ForceDirectedGraph = forwardRef(
     links: initialLinks,
     width,
     height,
-    simulationOptions,
     enableZoom = true,
     enableDrag = true,
     onNodeClick,
@@ -1032,7 +1031,9 @@ var ForceDirectedGraph = forwardRef(
     className,
     manualLayout = false,
     onManualLayoutChange,
-    packageBounds
+    packageBounds,
+    layout: externalLayout,
+    onLayoutChange
   }, ref) => {
     const svgRef = useRef(null);
     const gRef = useRef(null);
@@ -1042,180 +1043,102 @@ var ForceDirectedGraph = forwardRef(
     const dragActiveRef = useRef(false);
     const [pinnedNodes, setPinnedNodes] = useState(/* @__PURE__ */ new Set());
     const internalDragEnabledRef = useRef(enableDrag);
+    const [layout, setLayout] = useState(externalLayout || "force");
+    useEffect(() => {
+      if (externalLayout && externalLayout !== layout) {
+        setLayout(externalLayout);
+      }
+    }, [externalLayout]);
+    const handleLayoutChange = useCallback((newLayout) => {
+      setLayout(newLayout);
+      onLayoutChange?.(newLayout);
+    }, [onLayoutChange]);
     useEffect(() => {
       internalDragEnabledRef.current = enableDrag;
     }, [enableDrag]);
-    const onTick = (_nodesCopy, _linksCopy, _sim) => {
-      try {
-        const boundsToUse = clusterBounds?.bounds ?? packageBounds;
-        const nodeClusterMap = clusterBounds?.nodeToCluster ?? {};
-        if (boundsToUse) {
-          Object.values(nodesById).forEach((n) => {
-            if (!n) return;
-            const group = n.group ?? n.packageGroup;
-            const clusterKey = nodeClusterMap[n.id];
-            const key = clusterKey ?? (group ? `pkg:${group}` : void 0);
-            if (!key) return;
-            const center = boundsToUse[key];
-            if (!center) return;
-            const dx = center.x - (n.x ?? 0);
-            const dy = center.y - (n.y ?? 0);
-            const dist = Math.sqrt(dx * dx + dy * dy);
-            const pullStrength = Math.min(0.5, 0.15 * (dist / (center.r || 200)) + 0.06);
-            if (!isNaN(pullStrength) && isFinite(pullStrength)) {
-              n.vx = (n.vx ?? 0) + dx / (dist || 1) * pullStrength;
-              n.vy = (n.vy ?? 0) + dy / (dist || 1) * pullStrength;
-            }
-            if (center.r && dist > center.r) {
-              const excess = (dist - center.r) / (dist || 1);
-              n.vx = (n.vx ?? 0) - dx * 0.02 * excess;
-              n.vy = (n.vy ?? 0) - dy * 0.02 * excess;
-            }
-          });
-        }
-      } catch (e) {
+    const nodes = React2__default.useMemo(() => {
+      if (!initialNodes || !initialNodes.length) return initialNodes;
+      const cx = width / 2;
+      const cy = height / 2;
+      if (layout === "force") {
+        return initialNodes.map((n) => ({
+          ...n,
+          x: Math.random() * width,
+          y: Math.random() * height
+        }));
       }
-    };
-    const { packageAreas, localPositions } = React2__default.useMemo(() => {
-      try {
-        if (!initialNodes || !initialNodes.length) return { packageAreas: {}, localPositions: {} };
-        const groups = /* @__PURE__ */ new Map();
-        initialNodes.forEach((n) => {
-          const key = n.packageGroup || n.group || "root";
-          if (!groups.has(key)) groups.set(key, []);
-          groups.get(key).push(n);
-        });
-        const groupKeys = Array.from(groups.keys());
-        const children = groupKeys.map((k) => ({ name: k, value: Math.max(1, groups.get(k).length) }));
-        const root = d33.hierarchy({ children });
-        root.sum((d) => d.value);
-        const pack2 = d33.pack().size([width, height]).padding(Math.max(20, Math.min(width, height) * 0.03));
-        const packed = pack2(root);
-        const packageAreas2 = {};
-        if (packed.children) {
-          packed.children.forEach((c) => {
-            const name = c.data.name;
-            packageAreas2[name] = { x: c.x, y: c.y, r: Math.max(40, c.r) };
+      if (layout === "circular") {
+        const radius = Math.min(width, height) * 0.35;
+        return initialNodes.map((n, i) => ({
+          ...n,
+          x: cx + Math.cos(2 * Math.PI * i / initialNodes.length) * radius,
+          y: cy + Math.sin(2 * Math.PI * i / initialNodes.length) * radius
+        }));
+      }
+      if (layout === "hierarchical") {
+        const cols = Math.ceil(Math.sqrt(initialNodes.length));
+        const spacingX = width / (cols + 1);
+        const spacingY = height / (Math.ceil(initialNodes.length / cols) + 1);
+        return initialNodes.map((n, i) => ({
+          ...n,
+          x: spacingX * (i % cols + 1),
+          y: spacingY * (Math.floor(i / cols) + 1)
+        }));
+      }
+      return initialNodes;
+    }, [initialNodes, width, height, layout]);
+    const links = initialLinks;
+    const restart = React2__default.useCallback(() => {
+    }, []);
+    const stop = React2__default.useCallback(() => {
+    }, []);
+    const setForcesEnabled = React2__default.useCallback((_enabled) => {
+    }, []);
+    useEffect(() => {
+      if (!nodes || nodes.length === 0) return;
+      const applyLayout = () => {
+        const cx = width / 2;
+        const cy = height / 2;
+        if (layout === "circular") {
+          const radius = Math.min(width, height) * 0.35;
+          nodes.forEach((node, i) => {
+            const angle = 2 * Math.PI * i / nodes.length;
+            node.fx = cx + Math.cos(angle) * radius;
+            node.fy = cy + Math.sin(angle) * radius;
           });
-        }
-        const localPositions2 = {};
-        groups.forEach((nodesInGroup, _key) => {
-          if (!nodesInGroup || nodesInGroup.length === 0) return;
-          const localNodes = nodesInGroup.map((n) => ({ id: n.id, x: Math.random() * 10 - 5, y: Math.random() * 10 - 5, size: n.size || 10 }));
-          const localLinks = (initialLinks || []).filter((l) => {
-            const s = typeof l.source === "string" ? l.source : l.source && l.source.id;
-            const t = typeof l.target === "string" ? l.target : l.target && l.target.id;
-            return localNodes.some((ln) => ln.id === s) && localNodes.some((ln) => ln.id === t);
-          }).map((l) => ({ source: typeof l.source === "string" ? l.source : l.source.id, target: typeof l.target === "string" ? l.target : l.target.id }));
-          if (localNodes.length === 1) {
-            localPositions2[localNodes[0].id] = { x: 0, y: 0 };
-            return;
-          }
-          const sim = d33.forceSimulation(localNodes).force("link", d33.forceLink(localLinks).id((d) => d.id).distance(30).strength(0.8)).force("charge", d33.forceManyBody().strength(-15)).force("collide", d33.forceCollide((d) => (d.size || 10) + 6).iterations(2)).stop();
-          const ticks = 300;
-          for (let i = 0; i < ticks; i++) sim.tick();
-          localNodes.forEach((ln) => {
-            localPositions2[ln.id] = { x: ln.x ?? 0, y: ln.y ?? 0 };
+        } else if (layout === "hierarchical") {
+          const groups = /* @__PURE__ */ new Map();
+          nodes.forEach((n) => {
+            const key = n.packageGroup || n.group || "root";
+            if (!groups.has(key)) groups.set(key, []);
+            groups.get(key).push(n);
           });
-        });
-        return { packageAreas: packageAreas2, localPositions: localPositions2 };
-      } catch (e) {
-        return { packageAreas: {}, localPositions: {} };
-      }
-    }, [initialNodes, initialLinks, width, height]);
-    const seededNodes = React2__default.useMemo(() => {
-      if (!initialNodes || !Object.keys(packageAreas || {}).length) return initialNodes;
-      return initialNodes.map((n) => {
-        const key = n.packageGroup || n.group || "root";
-        const area = packageAreas[key];
-        const lp = localPositions[n.id];
-        if (!area || !lp) return n;
-        const scale = Math.max(0.5, area.r * 0.6 / (Math.max(1, Math.sqrt(lp.x * lp.x + lp.y * lp.y)) || 1));
-        return { ...n, x: area.x + lp.x * scale, y: area.y + lp.y * scale };
-      });
-    }, [initialNodes, packageAreas, localPositions]);
-    const { nodes, links, restart, stop, setForcesEnabled } = useForceSimulation(seededNodes || initialNodes, initialLinks, {
-      width,
-      height,
-      chargeStrength: manualLayout ? 0 : void 0,
-      onTick,
-      ...simulationOptions
-    });
-    const nodesById = React2__default.useMemo(() => {
-      const m = {};
-      (nodes || []).forEach((n) => {
-        if (n && n.id) m[n.id] = n;
-      });
-      return m;
-    }, [nodes]);
-    const clusterBounds = React2__default.useMemo(() => {
-      try {
-        if (!links || !nodes) return null;
-        const nodeIds = new Set(nodes.map((n) => n.id));
-        const adj = /* @__PURE__ */ new Map();
-        nodes.forEach((n) => adj.set(n.id, /* @__PURE__ */ new Set()));
-        links.forEach((l) => {
-          const type = l.type || "reference";
-          if (type !== "dependency") return;
-          const s = typeof l.source === "string" ? l.source : l.source && l.source.id || null;
-          const t = typeof l.target === "string" ? l.target : l.target && l.target.id || null;
-          if (!s || !t) return;
-          if (!nodeIds.has(s) || !nodeIds.has(t)) return;
-          adj.get(s)?.add(t);
-          adj.get(t)?.add(s);
-        });
-        const visited = /* @__PURE__ */ new Set();
-        const comps = [];
-        for (const nid of nodeIds) {
-          if (visited.has(nid)) continue;
-          const stack = [nid];
-          const comp = [];
-          visited.add(nid);
-          while (stack.length) {
-            const cur = stack.pop();
-            comp.push(cur);
-            const neigh = adj.get(cur);
-            if (!neigh) continue;
-            for (const nb of neigh) {
-              if (!visited.has(nb)) {
-                visited.add(nb);
-                stack.push(nb);
-              }
+          const groupArray = Array.from(groups.entries());
+          const cols = Math.ceil(Math.sqrt(groupArray.length));
+          const groupSpacingX = width * 0.8 / cols;
+          const groupSpacingY = height * 0.8 / Math.ceil(groupArray.length / cols);
+          groupArray.forEach(([groupKey, groupNodes], gi) => {
+            const col = gi % cols;
+            const row = Math.floor(gi / cols);
+            const groupX = (col + 0.5) * groupSpacingX;
+            const groupY = (row + 0.5) * groupSpacingY;
+            if (groupKey.startsWith("pkg:") || groupKey === groupKey) {
+              groupNodes.forEach((n, ni) => {
+                const angle = 2 * Math.PI * ni / groupNodes.length;
+                const r = Math.min(80, 20 + groupNodes.length * 8);
+                n.fx = groupX + Math.cos(angle) * r;
+                n.fy = groupY + Math.sin(angle) * r;
+              });
             }
-          }
-          comps.push(comp);
+          });
         }
-        if (comps.length <= 1) return null;
-        const children = comps.map((c, i) => ({ name: String(i), value: Math.max(1, c.length) }));
-        d33.hierarchy({ children }).sum((d) => d.value).sort((a, b) => b.value - a.value);
-        const num = comps.length;
-        const cx = width / 2;
-        const cy = height / 2;
-        const base = Math.max(width, height);
-        const circleRadius = base * Math.max(30, num * 20, Math.sqrt(num) * 12);
-        const map = {};
-        comps.forEach((c, i) => {
-          const angle = 2 * Math.PI * i / num;
-          const x = cx + Math.cos(angle) * circleRadius;
-          const y = cy + Math.sin(angle) * circleRadius;
-          const sizeBias = Math.sqrt(Math.max(1, c.length));
-          const r = Math.max(200, 100 * sizeBias);
-          map[`cluster:${i}`] = { x, y, r };
-        });
-        const nodeToCluster = {};
-        comps.forEach((c, i) => c.forEach((nid) => nodeToCluster[nid] = `cluster:${i}`));
-        return { bounds: map, nodeToCluster };
-      } catch (e) {
-        return null;
-      }
-    }, [nodes, links, width, height]);
-    useEffect(() => {
-      if (!packageBounds && !clusterBounds && (!packageAreas || Object.keys(packageAreas).length === 0)) return;
-      try {
-        restart();
-      } catch (e) {
-      }
-    }, [packageBounds, clusterBounds, packageAreas, restart]);
+        try {
+          restart();
+        } catch (e) {
+        }
+      };
+      applyLayout();
+    }, [layout, nodes, width, height, restart]);
     useEffect(() => {
       try {
         if (manualLayout || pinnedNodes.size > 0) setForcesEnabled(false);
@@ -1287,9 +1210,13 @@ var ForceDirectedGraph = forwardRef(
         getPinnedNodes: () => Array.from(pinnedNodes),
         setDragMode: (enabled) => {
           internalDragEnabledRef.current = enabled;
-        }
+        },
+        setLayout: (newLayout) => {
+          handleLayoutChange(newLayout);
+        },
+        getLayout: () => layout
       }),
-      [nodes, pinnedNodes, restart, width, height]
+      [nodes, pinnedNodes, restart, width, height, layout, handleLayoutChange]
     );
     useEffect(() => {
       try {