create-project-arch 1.0.0

package/templates/arch-ui/components/graph/use-auto-layout.ts

@@ -0,0 +1,65 @@
+import dagre from "dagre";
+import { useCallback } from "react";
+import type { Edge, Node, ReactFlowInstance } from "reactflow";
+import { ArchNodeData, NODE_HEIGHT, NODE_WIDTH } from "./graph-types";
+
+export function useAutoLayout(
+    setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
+    edges: Edge[],
+    hiddenNodeIds: Set<string>,
+    flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
+) {
+    return useCallback(() => {
+        const currentViewport = flowInstance?.getViewport();
+
+        setNodes((currentNodes) => {
+            const graph = new dagre.graphlib.Graph();
+            graph.setDefaultEdgeLabel(() => ({}));
+            graph.setGraph({
+                rankdir: "LR",
+                nodesep: 40,
+                ranksep: 100,
+                marginx: 20,
+                marginy: 20,
+            });
+
+            const visibleNodeSet = new Set(
+                currentNodes.filter((node) => !hiddenNodeIds.has(node.id)).map((node) => node.id),
+            );
+            currentNodes
+                .filter((node) => visibleNodeSet.has(node.id))
+                .forEach((node) => {
+                    graph.setNode(node.id, { width: NODE_WIDTH, height: NODE_HEIGHT });
+                });
+
+            edges
+                .filter((edge) => visibleNodeSet.has(edge.source) && visibleNodeSet.has(edge.target))
+                .forEach((edge) => {
+                    graph.setEdge(edge.source, edge.target);
+                });
+
+            dagre.layout(graph);
+
+            return currentNodes.map((node) => {
+                if (!visibleNodeSet.has(node.id)) {
+                    return node;
+                }
+                const position = graph.node(node.id) as { x: number; y: number } | undefined;
+                if (!position) {
+                    return node;
+                }
+                return {
+                    ...node,
+                    position: {
+                        x: position.x - NODE_WIDTH / 2,
+                        y: position.y - NODE_HEIGHT / 2,
+                    },
+                };
+            });
+        });
+        if (flowInstance && currentViewport) {
+            // Preserve user zoom/pan while applying new node positions.
+            flowInstance.setViewport(currentViewport, { duration: 0 });
+        }
+    }, [edges, flowInstance, hiddenNodeIds, setNodes]);
+}

package/templates/arch-ui/components/graph/use-connection-validation.ts

@@ -0,0 +1,62 @@
+import { addEdge, Connection, Edge, getOutgoers, Node } from "reactflow";
+import type { ArchNodeData, GraphKind } from "./graph-types";
+
+function nodeAllowsOutgoing(kind: GraphKind): GraphKind[] {
+    switch (kind) {
+        case "decision":
+            return ["domain"];
+        case "phase":
+            return ["milestone"];
+        case "milestone":
+            return ["task"];
+        case "task":
+            return ["file", "decision"];
+        case "domain":
+            return ["file"];
+        case "file":
+        default:
+            return [];
+    }
+}
+
+export function isValidArchitectureConnection(
+    connection: Connection,
+    nodes: Node<ArchNodeData>[],
+    edges: Edge[],
+) {
+    if (!connection.source || !connection.target || connection.source === connection.target) {
+        return false;
+    }
+
+    const sourceNode = nodes.find((node) => node.id === connection.source);
+    const targetNode = nodes.find((node) => node.id === connection.target);
+    if (!sourceNode || !targetNode) {
+        return false;
+    }
+
+    const allowedTargets = nodeAllowsOutgoing(sourceNode.data.kind);
+    if (!allowedTargets.includes(targetNode.data.kind)) {
+        return false;
+    }
+
+    const nextEdges = addEdge({ ...connection, type: "smoothstep" }, edges);
+    const hasCycle = (node: Node<ArchNodeData>, visited = new Set<string>()): boolean => {
+        if (visited.has(node.id)) {
+            return false;
+        }
+        visited.add(node.id);
+
+        const outgoers = getOutgoers(node, nodes, nextEdges);
+        for (const outgoer of outgoers) {
+            if (outgoer.id === connection.source) {
+                return true;
+            }
+            if (hasCycle(outgoer as Node<ArchNodeData>, visited)) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    return !hasCycle(targetNode);
+}

package/templates/arch-ui/components/graph/use-flow-persistence.ts

@@ -0,0 +1,48 @@
+import { useCallback } from "react";
+import type { Edge, Node, ReactFlowInstance } from "reactflow";
+import { ArchNodeData } from "./graph-types";
+
+export function useFlowPersistence(
+    setNodes: React.Dispatch<React.SetStateAction<Node<ArchNodeData>[]>>,
+    setEdges: React.Dispatch<React.SetStateAction<Edge[]>>,
+    setHiddenNodeIds: React.Dispatch<React.SetStateAction<Set<string>>>,
+    flowInstance: ReactFlowInstance<ArchNodeData, Edge> | null,
+    storageKey: string,
+) {
+    const saveFlow = useCallback(() => {
+        if (typeof window === "undefined" || !flowInstance) return;
+        const flow = flowInstance.toObject();
+        window.localStorage.setItem(
+            storageKey,
+            JSON.stringify({
+                nodes: flow.nodes,
+                edges: flow.edges,
+                viewport: flow.viewport,
+            }),
+        );
+    }, [flowInstance, storageKey]);
+
+    const restoreFlow = useCallback(() => {
+        if (typeof window === "undefined") return;
+        const payload = window.localStorage.getItem(storageKey);
+        if (!payload) return;
+
+        try {
+            const parsed = JSON.parse(payload) as {
+                nodes: Node<ArchNodeData>[];
+                edges: Edge[];
+                viewport?: { x: number; y: number; zoom: number };
+            };
+            setNodes(parsed.nodes);
+            setEdges(parsed.edges);
+            if (parsed.viewport && flowInstance) {
+                flowInstance.setViewport(parsed.viewport);
+            }
+            setHiddenNodeIds(new Set());
+        } catch {
+            // Ignore invalid state.
+        }
+    }, [flowInstance, setEdges, setNodes, setHiddenNodeIds, storageKey]);
+
+    return { saveFlow, restoreFlow };
+}