@terrafirmagreg-team/recipe 0.1.0 → 1.2.1

package/src/hooks/calc/flow/use-engage.ts

@@ -0,0 +1,129 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type Dispatch,
+  type RefObject,
+  type SetStateAction,
+} from 'react';
+import type { Edge } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import type {
+  AnyCalcFlowNode,
+  cardsToFlow,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { ChevronEdgeHighlight } from '@terrafirmagreg-team/ui/types/canvas';
+import type { MountedNodes } from './use-mount';
+
+const CHAIN_NODE_MARK = 'calc-node--chain';
+const DIM_NODE_MARK = 'calc-node--dim';
+
+function stripMark(cls: string | undefined) {
+  return cls
+    ?.split(' ')
+    .filter((c) => c !== CHAIN_NODE_MARK && c !== DIM_NODE_MARK)
+    .join(' ');
+}
+
+export function useEdgeEngage({
+  computed,
+  setState,
+  rawFlow,
+  focusIdRef,
+}: {
+  computed: { nodes: AnyCalcFlowNode[]; edges: Edge[] };
+  setState: Dispatch<SetStateAction<MountedNodes>>;
+  rawFlow: ReturnType<typeof cardsToFlow>;
+  focusIdRef: RefObject<string | null>;
+}) {
+  const engagedRef = useRef<string | null>(null);
+  const adjacency = useMemo(() => {
+    const downstream = new Map<string, Edge[]>();
+    const upstream = new Map<string, Edge[]>();
+    for (const edge of computed.edges) {
+      downstream.set(edge.source, [
+        ...(downstream.get(edge.source) ?? []),
+        edge,
+      ]);
+      upstream.set(edge.target, [...(upstream.get(edge.target) ?? []), edge]);
+    }
+    return { downstream, upstream };
+  }, [computed]);
+
+  const applyEngaged = useCallback(
+    (id: string | null) => {
+      const prev = engagedRef.current;
+      if (prev === id) return;
+      engagedRef.current = id;
+
+      const chainEdges = new Map<string, ChevronEdgeHighlight>();
+      const chainNodes = new Set<string>();
+      if (id) {
+        chainNodes.add(id);
+        const walk = (
+          start: string,
+          edgesOf: (n: string) => Edge[] | undefined,
+          nextOf: (e: Edge) => string,
+          mark: ChevronEdgeHighlight,
+        ) => {
+          const seen = new Set<string>([start]);
+          const queue = [start];
+          while (queue.length) {
+            const nodeId = queue.shift()!;
+            for (const edge of edgesOf(nodeId) ?? []) {
+              chainEdges.set(edge.id, mark);
+              const next = nextOf(edge);
+              if (!seen.has(next)) {
+                seen.add(next);
+                chainNodes.add(next);
+                queue.push(next);
+              }
+            }
+          }
+        };
+        walk(id, (n) => adjacency.upstream.get(n), (e) => e.source, 'incoming');
+        walk(id, (n) => adjacency.downstream.get(n), (e) => e.target, 'outgoing');
+      }
+      const active = chainEdges.size > 0;
+
+      setState((current) => {
+        let edgesChanged = false;
+        const edges = current.edges.map((edge) => {
+          const mark = active
+            ? (chainEdges.get(edge.id) ?? 'dim')
+            : undefined;
+          if ((edge.data?.highlight ?? undefined) === mark) return edge;
+          edgesChanged = true;
+          return { ...edge, data: { ...edge.data, highlight: mark } };
+        });
+        let nodesChanged = false;
+        const nodes = current.nodes.map((node) => {
+          const base = stripMark(node.className);
+          const cls = active
+            ? chainNodes.has(node.id)
+              ? `${base ?? ''} ${CHAIN_NODE_MARK}`.trim()
+              : `${base ?? ''} ${DIM_NODE_MARK}`.trim()
+            : base;
+          if ((node.className ?? '') === (cls ?? '')) return node;
+          nodesChanged = true;
+          return { ...node, className: cls || undefined };
+        });
+        if (!edgesChanged && !nodesChanged) return current;
+        return {
+          ...current,
+          edges: edgesChanged ? edges : current.edges,
+          nodes: nodesChanged ? nodes : current.nodes,
+        };
+      });
+    },
+    [adjacency, setState],
+  );
+  useEffect(() => {
+    engagedRef.current = null;
+    focusIdRef.current = null;
+  }, [rawFlow, focusIdRef]);
+  return applyEngaged;
+}
+

package/src/hooks/calc/flow/use-handlers.ts

@@ -0,0 +1,192 @@
+'use client';
+
+import {
+  useCallback,
+  type DragEvent,
+  type MouseEvent,
+} from 'react';
+import {
+  useReactFlow,
+  type Connection,
+  type Edge,
+} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import type {
+  AnyCalcFlowNode,
+  CalcFlowData,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type {
+  CalcKind,
+  CalcNode,
+} from '@terrafirmagreg-team/recipe/types/calc';
+
+export function useFlowHandlers({
+  data,
+  applyFocus,
+  applyEngaged,
+  centerOnNode,
+  setPickerNode,
+}: {
+  data: Omit<
+    CalcFlowData,
+    'node' | 'mode' | 'onRequestPicker' | 'onRequestMemberPicker'
+  >;
+  applyFocus: (id: string | null) => void;
+  applyEngaged: (id: string | null) => void;
+  centerOnNode: (node: AnyCalcFlowNode) => void;
+  setPickerNode: (node: CalcNode | null) => void;
+}) {
+  const { screenToFlowPosition, getNode } = useReactFlow();
+
+  const handleNodeEnter = useCallback(
+    (_event: MouseEvent, node: AnyCalcFlowNode) => applyEngaged(node.id),
+    [applyEngaged],
+  );
+  const handleNodeLeave = useCallback(
+    () => applyEngaged(null),
+    [applyEngaged],
+  );
+  const handleNodeClick = useCallback(
+    (_event: MouseEvent, node: AnyCalcFlowNode) => {
+      applyFocus(node.id);
+      centerOnNode(node);
+    },
+    [applyFocus, centerOnNode],
+  );
+
+  const handleNodeDoubleClick = useCallback(
+    (event: MouseEvent, node: AnyCalcFlowNode) => {
+      const el = event.target as HTMLElement | null;
+      if (
+        el?.closest(
+          'button, a, input, [role="button"], .nodrag, .calc-port',
+        )
+      ) {
+        return;
+      }
+      const target = (node.data as CalcFlowData).node;
+      if (!target) return;
+
+      if (target.recipe != null || target.availableRecipes.length > 0)
+        setPickerNode(target);
+    },
+    [setPickerNode],
+  );
+  const handlePaneClick = useCallback(
+    () => applyFocus(null),
+    [applyFocus],
+  );
+  const handleDragOver = useCallback((event: DragEvent) => {
+    if (event.dataTransfer.types.includes('application/x-tfg-calc')) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'copy';
+    }
+  }, []);
+  const handleDrop = useCallback(
+    (event: DragEvent) => {
+      const raw = event.dataTransfer.getData('application/x-tfg-calc');
+      if (!raw) return;
+      event.preventDefault();
+      try {
+        const parsed = JSON.parse(raw) as { id?: string; kind?: CalcKind };
+        if (parsed.id && (parsed.kind === 'item' || parsed.kind === 'fluid')) {
+          const pos = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+          });
+          data.onAddCard(parsed.id, parsed.kind, pos);
+        }
+      } catch {}
+    },
+    [screenToFlowPosition, data],
+  );
+
+  const fitRecipeNodes = useCallback(
+    (node: AnyCalcFlowNode) => node.data.node?.recipe != null,
+    [],
+  );
+
+  const handleConnect = useCallback(
+    (conn: Connection) => {
+      const { source, target, sourceHandle, targetHandle } = conn;
+      if (!source || !target || source === target) return;
+      const input = Number(/^in-(\d+)$/.exec(targetHandle ?? '')?.[1] ?? -1);
+      const outMatch = /^out(?:-(\d+))?$/.exec(sourceHandle ?? '');
+      if (input < 0 || !outMatch) return;
+      const out = Number(outMatch[1] ?? 0);
+      const sNode = (getNode(source)?.data as CalcFlowData | undefined)?.node;
+      const tNode = (getNode(target)?.data as CalcFlowData | undefined)?.node;
+      const slot = tNode?.inputs[input];
+      const srcOut = sNode?.outputs[out];
+      if (!sNode || !tNode || !slot || !srcOut) return;
+      if (slot.id !== srcOut.id || slot.kind !== srcOut.kind) return;
+      data.onWire(source, target, input, out);
+    },
+    [data, getNode],
+  );
+
+  const handleReconnect = useCallback(
+    (oldEdge: Edge, conn: Connection) => {
+      const wire = oldEdge.data?.wire as
+        | { from: string; to: string; input: number; out?: number }
+        | undefined;
+      const input = Number(/^in-(\d+)$/.exec(conn.targetHandle ?? '')?.[1] ?? -1);
+      const outMatch = /^out(?:-(\d+))?$/.exec(conn.sourceHandle ?? '');
+      if (!wire || !conn.source || !conn.target || input < 0 || !outMatch)
+        return;
+      const out = Number(outMatch[1] ?? 0);
+      if (conn.source === conn.target) return;
+      const sNode = (getNode(conn.source)?.data as CalcFlowData | undefined)?.node;
+      const tNode = (getNode(conn.target)?.data as CalcFlowData | undefined)?.node;
+      const slot = tNode?.inputs[input];
+      const srcOut = sNode?.outputs[out];
+      if (!sNode || !tNode || !slot || !srcOut) return;
+      if (slot.id !== srcOut.id || slot.kind !== srcOut.kind) return;
+      data.onRewire(wire.from, wire.to, wire.input, {
+        from: conn.source,
+        to: conn.target,
+        input,
+        out,
+      });
+    },
+    [data, getNode],
+  );
+
+  const handleEdgesDelete = useCallback(
+    (edges: Edge[]) => {
+      for (const edge of edges) {
+        const wire = edge.data?.wire as
+          | { from: string; to: string; input: number; out?: number }
+          | undefined;
+        if (wire) data.onUnwire(wire.from, wire.to, wire.input, wire.out);
+      }
+    },
+    [data],
+  );
+
+  const handleEdgeClick = useCallback(
+    (event: MouseEvent, edge: Edge) => {
+      if (!event.shiftKey) return;
+      const wire = edge.data?.wire as
+        | { from: string; to: string; input: number; out?: number }
+        | undefined;
+      if (wire) data.onUnwire(wire.from, wire.to, wire.input, wire.out);
+    },
+    [data],
+  );
+
+  return {
+    handleNodeEnter,
+    handleNodeLeave,
+    handleNodeClick,
+    handleNodeDoubleClick,
+    handlePaneClick,
+    handleDragOver,
+    handleDrop,
+    handleConnect,
+    handleReconnect,
+    handleEdgesDelete,
+    handleEdgeClick,
+    fitRecipeNodes,
+  };
+}
+

package/src/hooks/calc/flow/use-layout.ts

@@ -0,0 +1,105 @@
+'use client';
+
+import { useCallback, useMemo } from 'react';
+import {
+  cardsToFlow,
+  GRID_GAPS,
+  CALC_NODE_H,
+  CALC_NODE_W,
+  type CalcFlowData,
+  type CalcViewMode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import { layoutCards } from '@terrafirmagreg-team/recipe/lib/calc/pack';
+import type {
+  CalcCard,
+  CalcNode,
+  CalcWire,
+} from '@terrafirmagreg-team/recipe/types/calc';
+
+export function useFlowLayout({
+  nodes,
+  wires,
+  flows,
+  cards,
+  data,
+  mode,
+  onRequestPicker,
+  onRequestMemberPicker,
+  onRequestSupply,
+}: {
+  nodes: CalcNode[];
+  wires: CalcWire[];
+  flows?: readonly (number | undefined)[];
+  cards: CalcCard[];
+  data: Omit<
+    CalcFlowData,
+    | 'node'
+    | 'mode'
+    | 'onRequestPicker'
+    | 'onRequestMemberPicker'
+    | 'onRequestSupply'
+    | 'onCrafts'
+  >;
+  mode: CalcViewMode;
+  onRequestPicker: (node: CalcNode) => void;
+  onRequestMemberPicker: (node: CalcNode) => void;
+  onRequestSupply: (node: CalcNode, input: number) => void;
+}) {
+  const flowData = useMemo(
+    () =>
+      ({
+        ...data,
+        mode,
+        onRequestPicker,
+        onRequestMemberPicker,
+        onRequestSupply,
+      }) as Omit<CalcFlowData, 'node'>,
+    [
+      data,
+      mode,
+      onRequestPicker,
+      onRequestMemberPicker,
+      onRequestSupply,
+    ],
+  );
+  const rawFlow = useMemo(
+    () => cardsToFlow(nodes, wires, flowData, flows),
+    [nodes, wires, flowData, flows],
+  );
+
+  const storedPos = useMemo(() => {
+    const map = new Map<string, { x: number; y: number }>();
+    for (const card of cards) {
+      if (card.pos) map.set(card.id, card.pos);
+    }
+    return map;
+  }, [cards]);
+
+  const positioned = useMemo(() => {
+    const flowNodes = rawFlow.nodes.map((node, index) => {
+      const stored = storedPos.get(node.id);
+      const position = stored ?? {
+        x: 40 + (index % 4) * (CALC_NODE_W + GRID_GAPS.x + 20),
+        y: 40 + Math.floor(index / 4) * (CALC_NODE_H + GRID_GAPS.y + 40),
+      };
+      return { ...node, position };
+    });
+    const present = new Set(flowNodes.map((node) => node.id));
+    const edges = rawFlow.edges.filter(
+      (edge) => present.has(edge.source) && present.has(edge.target),
+    );
+    return { nodes: flowNodes, edges };
+  }, [rawFlow, storedPos]);
+
+  const relayout = useCallback(
+    () => layoutCards(nodes, wires, {
+      mode,
+      gaps: GRID_GAPS,
+      recipeBody: data.recipeBody,
+    }),
+    [nodes, wires, mode, data.recipeBody],
+  );
+
+  return { rawFlow, positioned, relayout };
+}
+

package/src/hooks/calc/flow/{mount.ts → use-mount.ts}

@@ -94,3 +94,4 @@ export function useMountedNodes(computed: {
     clearMounts: () => setPendingMounts([]),
   };
 }
+

package/src/hooks/calc/flow/{nodes.ts → use-nodes.ts}

@@ -9,24 +9,24 @@ import {
   type RefObject,
 } from 'react';
 import {
+  applyEdgeChanges,
   applyNodeChanges,
   useUpdateNodeInternals,
+  type EdgeChange,
   type NodeChange,
 } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
 import {
   type AnyCalcFlowNode,
-  type CalcDirection,
-  type CalcEdgeStyle,
   type CalcFlowData,
   type CalcViewMode,
 } from '@terrafirmagreg-team/recipe/lib/calc/flow';
 import { createCircuitRouter } from '@terrafirmagreg-team/recipe/lib/calc/route';
-import { useFlowWindow } from './window';
-import { useMountedNodes } from './mount';
-import { useEdgeEngage } from './engage';
-import type { goalsToFlow } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import { useFlowWindow } from './use-window';
+import { useMountedNodes } from './use-mount';
+import { useEdgeEngage } from './use-engage';
+import type { cardsToFlow } from '@terrafirmagreg-team/recipe/lib/calc/flow';
 
-type Positioned = ReturnType<typeof goalsToFlow>;
+type Positioned = ReturnType<typeof cardsToFlow>;
 
 export function useFlowNodes({
   positioned,
@@ -36,22 +36,18 @@ export function useFlowNodes({
   focusIdRef,
   rawFlow,
   mode,
-  direction,
-  edgeStyle,
   canvasId,
 }: {
   positioned: Positioned;
   shift: { x: number; y: number } | null;
   data: Omit<
     CalcFlowData,
-    'node' | 'mode' | 'direction' | 'onRequestPicker' | 'onRequestMemberPicker'
+    'node' | 'mode' | 'onRequestPicker' | 'onRequestMemberPicker'
   >;
   focusId: string | null;
   focusIdRef: RefObject<string | null>;
   rawFlow: Positioned;
   mode: CalcViewMode;
-  direction: CalcDirection;
-  edgeStyle: CalcEdgeStyle;
   canvasId?: string;
 }) {
   const [movedNodes, setMovedNodes] = useState<Map<
@@ -72,11 +68,17 @@ export function useFlowNodes({
     () => new Set(),
   );
   const [routeCircuit] = useState(createCircuitRouter);
+  const [liveMoved, setLiveMoved] = useState<Map<
+    string,
+    { x: number; y: number }
+  > | null>(null);
   const placed = useMemo(
     () =>
       positioned.nodes.map((node) => {
-        const moved = movedNodes?.get(node.id);
-        const position = moved ?? node.position;
+        const position =
+          liveMoved?.get(node.id) ??
+          movedNodes?.get(node.id) ??
+          node.position;
         return {
           ...node,
           position: shift
@@ -84,15 +86,20 @@ export function useFlowNodes({
             : position,
         };
       }),
-    [positioned, movedNodes, shift],
+    [positioned, movedNodes, liveMoved, shift],
   );
 
   const routes = useMemo(
     () =>
-      edgeStyle === 'circuit'
-        ? routeCircuit(placed, positioned.edges, direction)
-        : null,
-    [placed, positioned.edges, direction, edgeStyle, routeCircuit],
+      routeCircuit(
+        placed.map((node) => ({
+          ...node,
+          inputs: node.data?.node?.inputs?.length ?? 0,
+          outputs: node.data?.node?.outputs?.length ?? 1,
+        })),
+        positioned.edges,
+      ),
+    [placed, positioned.edges, routeCircuit],
   );
   const mergedFlow = useMemo(() => {
     const nodes = placed.map((node) => ({
@@ -101,15 +108,11 @@ export function useFlowNodes({
       data: { ...node.data, ...data },
     }));
     const edges = positioned.edges.map((edge) => {
-
-      if (draggedIds.has(edge.source) || draggedIds.has(edge.target)) {
-        return edge;
-      }
       const points = routes?.get(edge.id);
       return points ? { ...edge, data: { ...edge.data, points } } : edge;
     });
     return { nodes, edges };
-  }, [placed, positioned.edges, data, focusId, routes, draggedIds]);
+  }, [placed, positioned.edges, data, focusId, routes]);
   const { computed, extraRects } = useFlowWindow({
     mergedFlow,
     focusId,
@@ -148,16 +151,9 @@ export function useFlowNodes({
     if (changed.length) updateNodeInternals(changed);
   }, [nodes, updateNodeInternals]);
 
-  const directionRef = useRef(direction);
-  useEffect(() => {
-    if (directionRef.current === direction) return;
-    directionRef.current = direction;
-    updateNodeInternals(nodes.map((node) => node.id));
-  }, [direction, nodes, updateNodeInternals]);
-
-  const [prevLayout, setPrevLayout] = useState({ mode, direction });
-  if (prevLayout.mode !== mode || prevLayout.direction !== direction) {
-    setPrevLayout({ mode, direction });
+  const [prevLayout, setPrevLayout] = useState(mode);
+  if (prevLayout !== mode) {
+    setPrevLayout(mode);
     setMovedNodes(null);
     setDraggedIds(new Set());
   }
@@ -165,7 +161,7 @@ export function useFlowNodes({
     movedLiveRef.current = null;
     dragIdsRef.current.clear();
     pendingChangesRef.current = [];
-  }, [mode, direction, canvasId]);
+  }, [mode, canvasId]);
 
   const flushChanges = useCallback(() => {
     changesFrameRef.current = null;
@@ -182,8 +178,9 @@ export function useFlowNodes({
       if (change.type !== 'position' || change.dragging) continue;
       if (!change.position || !dragIdsRef.current.delete(change.id)) continue;
       dragEnds.push({ id: change.id, ...change.position });
+      data.onMoveCard(change.id, change.position);
     }
-
+    setLiveMoved(live?.size ? new Map(live) : null);
     if (!dragEnds.length) return;
     setDraggedIds(new Set(dragIdsRef.current));
     movedLiveRef.current = null;
@@ -193,7 +190,7 @@ export function useFlowNodes({
       for (const end of dragEnds) next.set(end.id, { x: end.x, y: end.y });
       return next;
     });
-  }, [setState]);
+  }, [setState, data]);
   useEffect(
     () => () => {
       if (changesFrameRef.current != null)
@@ -224,6 +221,16 @@ export function useFlowNodes({
     [flushChanges],
   );
 
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setState((prev) => ({
+        ...prev,
+        edges: applyEdgeChanges(changes, prev.edges),
+      }));
+    },
+    [setState],
+  );
+
   const clearMoved = useCallback(() => {
     movedLiveRef.current = null;
     setMovedNodes(null);
@@ -245,7 +252,9 @@ export function useFlowNodes({
     clearMoved,
     setMovedNodes,
     onNodesChange,
+    onEdgesChange,
     applyEngaged,
     resetNodes,
   };
 }
+

package/src/hooks/calc/flow/use-pickers.ts

@@ -0,0 +1,57 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import type { CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
+
+export type SupplyRequest = { node: CalcNode; input: number };
+
+export function useFlowPickers(nodes: CalcNode[]) {
+  const [pickerNode, setPickerNode] = useState<CalcNode | null>(null);
+  const [memberNode, setMemberNode] = useState<CalcNode | null>(null);
+  const [supply, setSupply] = useState<SupplyRequest | null>(null);
+  const onRequestPicker = useCallback(
+    (node: CalcNode) => setPickerNode(node),
+    [],
+  );
+  const onRequestMemberPicker = useCallback(
+    (node: CalcNode) => setMemberNode(node),
+    [],
+  );
+  const onRequestSupply = useCallback(
+    (node: CalcNode, input: number) => setSupply({ node, input }),
+    [],
+  );
+
+  const [prevNodes, setPrevNodes] = useState(nodes);
+  if (prevNodes !== nodes) {
+    setPrevNodes(nodes);
+    for (const [node, set] of [
+      [pickerNode, setPickerNode],
+      [memberNode, setMemberNode],
+    ] as const) {
+      if (!node) continue;
+      const live = nodes.find((n) => n.id === node.id);
+      if (live && live !== node) set(live);
+      else if (!live) set(null);
+    }
+    if (supply) {
+      const live = nodes.find((n) => n.id === supply.node.id);
+      if (!live) setSupply(null);
+      else if (live !== supply.node)
+        setSupply({ node: live, input: supply.input });
+    }
+  }
+
+  return {
+    pickerNode,
+    setPickerNode,
+    memberNode,
+    setMemberNode,
+    supply,
+    setSupply,
+    onRequestPicker,
+    onRequestMemberPicker,
+    onRequestSupply,
+  };
+}
+