@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

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/use-mount.ts

@@ -0,0 +1,97 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import {
+  reconcileCalcEdges,
+  reconcileCalcNodes,
+  type AnyCalcFlowNode,
+  type CalcFlowNode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { Edge } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+
+export type MountedNodes = {
+  raw: { nodes: AnyCalcFlowNode[]; edges: Edge[] };
+  nodes: AnyCalcFlowNode[];
+  edges: Edge[];
+};
+
+export function useMountedNodes(computed: {
+  nodes: AnyCalcFlowNode[];
+  edges: Edge[];
+}) {
+  const [pendingMounts, setPendingMounts] = useState<AnyCalcFlowNode[]>([]);
+  const computedRef = useRef(computed);
+  const [state, setState] = useState<MountedNodes>(() => ({
+    raw: computed,
+
+    nodes: reconcileCalcNodes([], computed.nodes),
+    edges: computed.edges,
+  }));
+  useEffect(() => {
+    computedRef.current = computed;
+  });
+  if (state.raw !== computed) {
+    const prevIds = new Set(state.nodes.map((n) => n.id));
+    const fresh = computed.nodes.filter((n) => !prevIds.has(n.id));
+    const first = new Set(fresh.slice(0, 200).map((n) => n.id));
+    const rest = fresh.slice(200);
+    if (rest.length !== pendingMounts.length || rest.length === 0) {
+      setPendingMounts(rest);
+    }
+    setState({
+      raw: computed,
+      nodes: reconcileCalcNodes(
+        state.nodes,
+        computed.nodes.filter(
+          (n) => prevIds.has(n.id) || first.has(n.id),
+        ),
+      ),
+      edges: reconcileCalcEdges(state.edges, computed.edges),
+    });
+  }
+  useEffect(() => {
+    if (!pendingMounts.length) return;
+    const raf = requestAnimationFrame(() => {
+      const alive = new Set(
+        computedRef.current.nodes.map((n) => n.id),
+      );
+      const slice: AnyCalcFlowNode[] = [];
+      const rest: AnyCalcFlowNode[] = [];
+      const start = performance.now();
+      for (const node of pendingMounts) {
+        if (!alive.has(node.id)) continue;
+        if (slice.length >= 24 && performance.now() - start > 24) {
+          rest.push(node);
+        } else {
+          slice.push(node);
+        }
+      }
+      setPendingMounts(rest);
+      if (!slice.length) return;
+      setState((prev) => {
+        const have = new Set(prev.nodes.map((n) => n.id));
+        const add = slice
+          .filter((n) => !have.has(n.id))
+          .map((node, i) => ({
+            ...node,
+            style: {
+              ...node.style,
+              '--calc-delay': `${Math.min((i + 1) * 14, 300)}ms`,
+            } as CalcFlowNode['style'],
+          }));
+        return add.length
+          ? { ...prev, nodes: [...prev.nodes, ...add] }
+          : prev;
+      });
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [pendingMounts]);
+
+  return {
+    nodes: state.nodes,
+    edges: state.edges,
+    setState,
+    clearMounts: () => setPendingMounts([]),
+  };
+}
+

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

@@ -0,0 +1,260 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type RefObject,
+} from 'react';
+import {
+  applyEdgeChanges,
+  applyNodeChanges,
+  useUpdateNodeInternals,
+  type EdgeChange,
+  type NodeChange,
+} from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import {
+  type AnyCalcFlowNode,
+  type CalcFlowData,
+  type CalcViewMode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import { createCircuitRouter } from '@terrafirmagreg-team/recipe/lib/calc/route';
+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 cardsToFlow>;
+
+export function useFlowNodes({
+  positioned,
+  shift,
+  data,
+  focusId,
+  focusIdRef,
+  rawFlow,
+  mode,
+  canvasId,
+}: {
+  positioned: Positioned;
+  shift: { x: number; y: number } | null;
+  data: Omit<
+    CalcFlowData,
+    'node' | 'mode' | 'onRequestPicker' | 'onRequestMemberPicker'
+  >;
+  focusId: string | null;
+  focusIdRef: RefObject<string | null>;
+  rawFlow: Positioned;
+  mode: CalcViewMode;
+  canvasId?: string;
+}) {
+  const [movedNodes, setMovedNodes] = useState<Map<
+    string,
+    { x: number; y: number }
+  > | null>(null);
+
+  const movedLiveRef = useRef<Map<string, { x: number; y: number }> | null>(
+    null,
+  );
+
+  const pendingChangesRef = useRef<NodeChange<AnyCalcFlowNode>[]>([]);
+  const changesFrameRef = useRef<number | null>(null);
+
+  const dragIdsRef = useRef(new Set<string>());
+
+  const [draggedIds, setDraggedIds] = useState<ReadonlySet<string>>(
+    () => 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 position =
+          liveMoved?.get(node.id) ??
+          movedNodes?.get(node.id) ??
+          node.position;
+        return {
+          ...node,
+          position: shift
+            ? { x: position.x + shift.x, y: position.y + shift.y }
+            : position,
+        };
+      }),
+    [positioned, movedNodes, liveMoved, shift],
+  );
+
+  const routes = useMemo(
+    () =>
+      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) => ({
+      ...node,
+      className: node.id === focusId ? 'calc-node--focus' : undefined,
+      data: { ...node.data, ...data },
+    }));
+    const edges = positioned.edges.map((edge) => {
+      const points = routes?.get(edge.id);
+      return points ? { ...edge, data: { ...edge.data, points } } : edge;
+    });
+    return { nodes, edges };
+  }, [placed, positioned.edges, data, focusId, routes]);
+  const { computed, extraRects } = useFlowWindow({
+    mergedFlow,
+    focusId,
+    draggedIds,
+  });
+  const {
+    nodes,
+    edges,
+    setState,
+    clearMounts,
+  } = useMountedNodes(computed);
+  const applyEngaged = useEdgeEngage({
+    computed,
+    setState,
+    rawFlow,
+    focusIdRef,
+  });
+  const updateNodeInternals = useUpdateNodeInternals();
+  const heightsRef = useRef<ReadonlyMap<string, number>>(new Map());
+  useEffect(() => {
+    heightsRef.current = new Map();
+    movedLiveRef.current = null;
+    dragIdsRef.current.clear();
+    pendingChangesRef.current = [];
+  }, [canvasId]);
+  useEffect(() => {
+    const prev = heightsRef.current;
+    const next = new Map<string, number>();
+    const changed: string[] = [];
+    for (const node of nodes) {
+      const h = node.height ?? 0;
+      next.set(node.id, h);
+      if (prev.has(node.id) && prev.get(node.id) !== h) changed.push(node.id);
+    }
+    heightsRef.current = next;
+    if (changed.length) updateNodeInternals(changed);
+  }, [nodes, updateNodeInternals]);
+
+  const [prevLayout, setPrevLayout] = useState(mode);
+  if (prevLayout !== mode) {
+    setPrevLayout(mode);
+    setMovedNodes(null);
+    setDraggedIds(new Set());
+  }
+  useEffect(() => {
+    movedLiveRef.current = null;
+    dragIdsRef.current.clear();
+    pendingChangesRef.current = [];
+  }, [mode, canvasId]);
+
+  const flushChanges = useCallback(() => {
+    changesFrameRef.current = null;
+    const batch = pendingChangesRef.current;
+    pendingChangesRef.current = [];
+    if (!batch.length) return;
+    setState((prev) => ({
+      ...prev,
+      nodes: applyNodeChanges<AnyCalcFlowNode>(batch, prev.nodes),
+    }));
+    const live = movedLiveRef.current;
+    const dragEnds: { id: string; x: number; y: number }[] = [];
+    for (const change of batch) {
+      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;
+    setMovedNodes((prev) => {
+      const next = new Map(prev);
+      if (live) for (const [pid, pos] of live) next.set(pid, pos);
+      for (const end of dragEnds) next.set(end.id, { x: end.x, y: end.y });
+      return next;
+    });
+  }, [setState, data]);
+  useEffect(
+    () => () => {
+      if (changesFrameRef.current != null)
+        cancelAnimationFrame(changesFrameRef.current);
+    },
+    [],
+  );
+  const onNodesChange = useCallback(
+    (changes: NodeChange<AnyCalcFlowNode>[]) => {
+      for (const change of changes) {
+        if (change.type !== 'position' || !change.position) continue;
+        if (change.dragging) {
+          if (!dragIdsRef.current.has(change.id)) {
+            dragIdsRef.current.add(change.id);
+            setDraggedIds(new Set(dragIdsRef.current));
+          }
+          (movedLiveRef.current ??= new Map()).set(
+            change.id,
+            change.position,
+          );
+        }
+      }
+      pendingChangesRef.current.push(...changes);
+      if (changesFrameRef.current == null) {
+        changesFrameRef.current = requestAnimationFrame(flushChanges);
+      }
+    },
+    [flushChanges],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setState((prev) => ({
+        ...prev,
+        edges: applyEdgeChanges(changes, prev.edges),
+      }));
+    },
+    [setState],
+  );
+
+  const clearMoved = useCallback(() => {
+    movedLiveRef.current = null;
+    setMovedNodes(null);
+  }, []);
+
+  const resetNodes = useCallback(() => {
+    setMovedNodes(null);
+    clearMounts();
+    setDraggedIds(new Set());
+  }, [clearMounts]);
+
+  return {
+    nodes,
+    edges,
+    mergedFlow,
+    extraRects,
+    movedNodes,
+    movedLiveRef,
+    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,
+  };
+}
+

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

@@ -0,0 +1,141 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type RefObject,
+} from 'react';
+import { useReactFlow } from '@terrafirmagreg-team/ui/lib/canvas/xyflow';
+import type {
+  AnyCalcFlowNode,
+  CalcFlowNode,
+  CalcViewMode,
+} from '@terrafirmagreg-team/recipe/lib/calc/flow';
+
+export function useFlowViewport({
+  mergedNodes,
+  dataset,
+  resetGen,
+  treeReady,
+  mode,
+  applyFocus,
+  focusSeqRef,
+  focusRef,
+  focusNodeId,
+  onFocusedNode,
+  focusId,
+}: {
+  mergedNodes: AnyCalcFlowNode[];
+  dataset: DatasetRef;
+  resetGen: number;
+  treeReady: boolean;
+  mode: CalcViewMode;
+  applyFocus: (id: string | null) => void;
+  focusSeqRef: RefObject<{ id: string; index: number } | null>;
+  focusRef?: RefObject<((materialId: string) => void) | null>;
+  focusNodeId?: string | null;
+  onFocusedNode?: (id: string) => void;
+  focusId: string | null;
+}) {
+  const { setCenter, getZoom } = useReactFlow();
+  const userMovedRef = useRef(false);
+  const storageKey = `calc:${dataset.id}/${dataset.version ?? ''}`;
+
+  const ready = treeReady;
+
+  const centerOnNode = useCallback(
+    (node: AnyCalcFlowNode) => {
+      void setCenter(node.position.x, node.position.y, {
+        zoom: Math.max(getZoom(), 1),
+        duration: 300,
+      });
+    },
+    [setCenter, getZoom],
+  );
+
+  useEffect(() => {
+    const ref = focusRef;
+    if (!ref) return;
+
+    ref.current = (materialId: string) => {
+      const wanted = materialId.replace(/\{.*$/, '');
+      const matches = mergedNodes.filter(
+        (entry) =>
+          (entry.data as CalcFlowNode['data']).node?.materialId?.replace(
+            /\{.*$/,
+            '',
+          ) === wanted,
+      );
+      if (!matches.length) return;
+      const seq = focusSeqRef.current;
+      const index =
+        seq?.id === materialId ? (seq.index + 1) % matches.length : 0;
+      focusSeqRef.current = { id: materialId, index };
+      const node = matches[index]! as AnyCalcFlowNode;
+      applyFocus(node.id);
+      centerOnNode(node);
+    };
+    return () => {
+      ref.current = null;
+    };
+  }, [focusRef, mergedNodes, applyFocus, centerOnNode, focusSeqRef]);
+
+  useEffect(() => {
+    if (!focusNodeId) return;
+    const node = mergedNodes.find((entry) => entry.id === focusNodeId);
+    if (!node) return;
+    applyFocus(node.id);
+    centerOnNode(node);
+    onFocusedNode?.(focusNodeId);
+  }, [mergedNodes, focusNodeId, applyFocus, centerOnNode, onFocusedNode]);
+
+  const recenterRef = useRef(false);
+  const viewSigRef = useRef(mode);
+  useEffect(() => {
+    if (viewSigRef.current === mode) return;
+    viewSigRef.current = mode;
+    recenterRef.current = true;
+  }, [mode]);
+  useEffect(() => {
+    if (!ready || !recenterRef.current) return;
+    const root = mergedNodes[0];
+    if (root) centerOnNode(root as AnyCalcFlowNode);
+    recenterRef.current = false;
+  }, [ready, mergedNodes, centerOnNode]);
+
+  const handleMoveStart = useCallback((event: unknown) => {
+    if (event) userMovedRef.current = true;
+  }, []);
+
+  const viewportConfig = useMemo(
+    () => ({
+      storageKey,
+      resetKey: `${storageKey}:${resetGen}`,
+      selectedId: focusId,
+      userMovedRef,
+      initFocusId: null,
+      focusZoom: 1,
+      minZoom: 0.02,
+      restoreViewport: false,
+      ready,
+    }),
+    [storageKey, resetGen, focusId, ready],
+  );
+  const shellProps = useMemo(
+    () => ({ 'data-ready': ready ? ('true' as const) : ('false' as const) }),
+    [ready],
+  );
+
+  return {
+    ready,
+    centerOnNode,
+    userMovedRef,
+    handleMoveStart,
+    viewportConfig,
+    shellProps,
+  };
+}
+