@terrafirmagreg-team/recipe 0.1.0 → 1.2.0

package/src/components/views/calc/flow/index.tsx

@@ -1,6 +1,13 @@
 'use client';
 
-import { memo, useCallback, useRef, useState } from 'react';
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   ReactFlowProvider,
   useReactFlow,
@@ -22,55 +29,83 @@ import { CalcEdge } from '@terrafirmagreg-team/recipe/components/views/calc/edge
 import { CalcSessionProvider } from '@terrafirmagreg-team/recipe/hooks/calc/use-session';
 import { CalcFarProvider } from '@terrafirmagreg-team/recipe/hooks/calc/use-far-mode';
 import { CalcTierProvider } from '@terrafirmagreg-team/recipe/hooks/calc/use-tier';
-import { useFlowPickers } from '@terrafirmagreg-team/recipe/hooks/calc/flow/pickers';
-import { useFlowLayout } from '@terrafirmagreg-team/recipe/hooks/calc/flow/layout';
-import { useFlowNodes } from '@terrafirmagreg-team/recipe/hooks/calc/flow/nodes';
-import { useFlowViewport } from '@terrafirmagreg-team/recipe/hooks/calc/flow/viewport';
+import { useFlowPickers } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-pickers';
+import { useFlowLayout } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-layout';
+import { useFlowNodes } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-nodes';
+import { useFlowViewport } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-viewport';
 import { CalcToolbar } from '@terrafirmagreg-team/recipe/components/views/calc/flow/toolbar';
 import { CalcPickers } from '@terrafirmagreg-team/recipe/components/views/calc/flow/picker-dialogs';
-import { useFlowHandlers } from '@terrafirmagreg-team/recipe/hooks/calc/flow/handlers';
-import type { CalcFlowProps } from '@terrafirmagreg-team/recipe/hooks/calc/flow/props';
+import { useFlowHandlers } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-handlers';
+import type { CalcFlowProps } from '@terrafirmagreg-team/recipe/types/calc-flow-props';
 
 const nodeTypes = { calcMaterial: CalcNodeCard };
 const edgeTypes = { calcEdge: CalcEdge };
 const EMPTY_FLOW: AnyCalcFlowNode[] = [];
 const EMPTY_EDGES: Edge[] = [];
 
+function useShiftHeld() {
+  const [held, setHeld] = useState(false);
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') setHeld(true);
+    };
+    const up = (e: KeyboardEvent) => {
+      if (e.key === 'Shift') setHeld(false);
+    };
+    const blur = () => setHeld(false);
+    window.addEventListener('keydown', down);
+    window.addEventListener('keyup', up);
+    window.addEventListener('blur', blur);
+    return () => {
+      window.removeEventListener('keydown', down);
+      window.removeEventListener('keyup', up);
+      window.removeEventListener('blur', blur);
+    };
+  }, []);
+  return held;
+}
+
 function CalcFlowInner({
-  goals,
+  nodes: schemeNodes,
+  wires,
+  flows,
+  cards,
   dataset,
   session,
   data,
   mode,
   onModeChange,
-  direction,
-  onDirectionChange,
-  edgeStyle,
-  onEdgeStyleChange,
   farCards,
   onFarCardsChange,
-  density,
-  onDensityChange,
   treeReady = true,
   resetGen = 0,
   canvasId,
   actions,
-  panel,
   empty,
   focusRef,
   focusNodeId,
   onFocusedNode,
+  onRelayout,
 }: CalcFlowProps) {
   const t = useTranslations();
   const { zoomIn, zoomOut } = useReactFlow();
+  const shiftHeld = useShiftHeld();
   const {
     pickerNode,
     setPickerNode,
     memberNode,
     setMemberNode,
+    supply,
+    setSupply,
     onRequestPicker,
     onRequestMemberPicker,
-  } = useFlowPickers(goals);
+    onRequestSupply,
+  } = useFlowPickers(schemeNodes);
+
+  const flowData = useMemo(
+    () => ({ ...data, onRequestSupply }),
+    [data, onRequestSupply],
+  );
 
   const tier = useStore((s) =>
     s.transform[2] < CALC_LOD_DOT
@@ -79,18 +114,17 @@ function CalcFlowInner({
         ? ('far' as const)
         : ('near' as const),
   );
-  const { rawFlow, layout, layoutKey, positioned, shift, resetLayout } =
-    useFlowLayout({
-      goals,
-      data,
-      mode,
-      direction,
-      density,
-      edgeStyle,
-      treeReady,
-      onRequestPicker,
-      onRequestMemberPicker,
-    });
+  const { rawFlow, positioned, relayout } = useFlowLayout({
+    nodes: schemeNodes,
+    wires,
+    flows,
+    cards,
+    data,
+    mode,
+    onRequestPicker,
+    onRequestMemberPicker,
+    onRequestSupply,
+  });
   const focusIdRef = useRef<string | null>(null);
   const [focusId, setFocusId] = useState<string | null>(null);
   const applyFocus = useCallback((id: string | null) => {
@@ -104,22 +138,18 @@ function CalcFlowInner({
     edges,
     mergedFlow,
     extraRects,
-    movedNodes,
-    clearMoved,
-    setMovedNodes,
     onNodesChange,
+    onEdgesChange,
     applyEngaged,
     resetNodes,
   } = useFlowNodes({
     positioned,
-    shift,
-    data,
+    shift: null,
+    data: flowData,
     focusId,
     focusIdRef,
     rawFlow,
     mode,
-    direction,
-    edgeStyle,
     canvasId,
   });
   const {
@@ -129,16 +159,11 @@ function CalcFlowInner({
     viewportConfig,
     shellProps,
   } = useFlowViewport({
-    goals,
     mergedNodes: mergedFlow.nodes,
     dataset,
-    direction,
     resetGen,
     treeReady,
-    layoutKey,
-    layout,
     mode,
-    density,
     applyFocus,
     focusSeqRef,
     focusRef,
@@ -150,10 +175,10 @@ function CalcFlowInner({
   const [prevCanvasId, setPrevCanvasId] = useState(canvasId);
   if (prevCanvasId !== canvasId) {
     setPrevCanvasId(canvasId);
-    resetLayout();
     resetNodes();
     setPickerNode(null);
     setMemberNode(null);
+    setSupply(null);
   }
 
   const {
@@ -164,17 +189,24 @@ function CalcFlowInner({
     handlePaneClick,
     handleDragOver,
     handleDrop,
+    handleConnect,
+    handleReconnect,
+    handleEdgesDelete,
+    handleEdgeClick,
     fitRecipeNodes,
   } = useFlowHandlers({
-    data,
+    data: flowData,
     applyFocus,
     applyEngaged,
     centerOnNode,
     setPickerNode,
-    setMovedNodes,
   });
   const closePicker = useCallback(() => setPickerNode(null), [setPickerNode]);
   const closeMember = useCallback(() => setMemberNode(null), [setMemberNode]);
+  const closeSupply = useCallback(() => setSupply(null), [setSupply]);
+  const runRelayout = useCallback(() => {
+    onRelayout?.(relayout());
+  }, [onRelayout, relayout]);
 
   return (
     <CalcSessionProvider value={session}>
@@ -185,6 +217,7 @@ function CalcFlowInner({
         className={cn(
           'calc-flow h-full min-h-0 flex-1',
           tier === 'dot' && 'calc-flow--dots',
+          shiftHeld && 'calc-flow--shift',
         )}
 
         nodes={tier === 'dot' ? EMPTY_FLOW : nodes}
@@ -199,10 +232,20 @@ function CalcFlowInner({
         onNodeDoubleClick={handleNodeDoubleClick}
         onPaneClick={handlePaneClick}
         onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
         onMoveStart={handleMoveStart}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
+        onConnect={handleConnect}
+        onReconnect={handleReconnect}
+        edgesReconnectable={tier === 'near'}
+        onEdgeClick={handleEdgeClick}
+        onEdgesDelete={handleEdgesDelete}
+        deleteKeyCode={['Backspace', 'Delete']}
         nodesDraggable={tier !== 'dot'}
+        nodesConnectable={tier === 'near'}
+        selectionKeyCode="Shift"
+        multiSelectionKeyCode={['Meta', 'Control']}
         onlyRenderVisibleElements
         minZoom={0.02}
         viewportConfig={viewportConfig}
@@ -214,27 +257,19 @@ function CalcFlowInner({
         ) : null}
         <CalcToolbar
           onFit={onFit}
-          moved={Boolean(movedNodes?.size)}
-          onRelayout={clearMoved}
+          onRelayout={runRelayout}
           onZoomIn={() => void zoomIn({ duration: 150 })}
           onZoomOut={() => void zoomOut({ duration: 150 })}
           actions={actions}
           mode={mode}
           onModeChange={onModeChange}
-          direction={direction}
-          onDirectionChange={onDirectionChange}
-          edgeStyle={edgeStyle}
-          onEdgeStyleChange={onEdgeStyleChange}
           farCards={farCards}
           onFarCardsChange={onFarCardsChange}
-          density={density}
-          onDensityChange={onDensityChange}
         />
-        {panel}
-        {goals.length ? (
+        {schemeNodes.length ? (
           ready ? null : (
             <div className="pointer-events-none absolute inset-x-0 bottom-4 z-10 flex justify-center">
-              <EmptyState variant="loading">{t('recipe.loading')}</EmptyState>
+              <EmptyState variant="loading">{t('Loading recipe…', { note: 'recipe.loading' })}</EmptyState>
             </div>
           )
         ) : (
@@ -246,11 +281,13 @@ function CalcFlowInner({
       <CalcPickers
         pickerNode={pickerNode}
         memberNode={memberNode}
+        supply={supply}
         session={session}
         dataset={dataset}
         data={data}
         onClosePicker={closePicker}
         onCloseMember={closeMember}
+        onCloseSupply={closeSupply}
       />
       </CalcTierProvider>
       </CalcFarProvider>
@@ -265,3 +302,4 @@ export const CalcFlow = memo(function CalcFlow(props: CalcFlowProps) {
     </ReactFlowProvider>
   );
 });
+

package/src/components/views/calc/flow/picker-dialogs.tsx

@@ -1,30 +1,102 @@
 'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
 
+import { Mountain } from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { Button } from '@terrafirmagreg-team/ui/components/ui/button';
 import { CalcRecipePicker } from '@terrafirmagreg-team/recipe/components/views/calc/recipe-picker';
 import { CalcMemberPicker } from '@terrafirmagreg-team/recipe/components/views/calc/member-picker';
 import type { CalcFlowData } from '@terrafirmagreg-team/recipe/lib/calc/flow';
+import type { SupplyRequest } from '@terrafirmagreg-team/recipe/hooks/calc/flow/use-pickers';
 import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
 import type { CalcNode } from '@terrafirmagreg-team/recipe/types/calc';
 
+function SupplyPicker({
+  supply,
+  session,
+  data,
+  onClose,
+}: {
+  supply: SupplyRequest;
+  session: RecipeSession;
+  data: Omit<
+    CalcFlowData,
+    'node' | 'mode' | 'onRequestPicker' | 'onRequestMemberPicker' | 'onRequestSupply'
+  >;
+  onClose: () => void;
+}) {
+  const t = useTranslations();
+  const { node, input } = supply;
+  const slot = node.inputs[input];
+  if (!slot?.id) return null;
+  const materialId = slot.id;
+  const recipes = data.getRecipesForItem(materialId, slot.kind);
+  const supplyNode: CalcNode = {
+    ...node,
+    materialId,
+    kind: slot.kind,
+    recipe: null,
+    availableRecipes: recipes,
+    tagId: undefined,
+    members: undefined,
+    inputs: [],
+  };
+  return (
+    <CalcRecipePicker
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      node={supplyNode}
+      session={session}
+      onSelectRecipe={(_cardId, recipeId) => {
+        const row = recipes.find((r) => r.recipeId === recipeId);
+        data.onSupplyInput(node.id, input, recipeId, row?.outputAmount);
+      }}
+      onSelectTagMember={data.onSelectTagMember}
+      recipeDefaults={data.recipeDefaults}
+      onSetRecipeDefault={data.onSetRecipeDefault}
+      actions={
+        <Button
+          size="xs"
+          variant="outline"
+          className={supplyNode.availableRecipes.length ? 'shrink-0' : 'ms-auto shrink-0'}
+          onClick={() => {
+            data.onSupplyInput(node.id, input, null);
+            onClose();
+          }}
+        >
+          <Mountain className="size-3.5" />
+          {t('Keep as external source', { note: 'recipe.calc.supply.source' })}
+        </Button>
+      }
+    />
+  );
+}
+
 export function CalcPickers({
   pickerNode,
   memberNode,
+  supply,
   session,
   dataset,
   data,
   onClosePicker,
   onCloseMember,
+  onCloseSupply,
 }: {
   pickerNode: CalcNode | null;
   memberNode: CalcNode | null;
+  supply: SupplyRequest | null;
   session: RecipeSession;
-  dataset: string;
+  dataset: DatasetRef;
   data: Omit<
     CalcFlowData,
-    'node' | 'mode' | 'direction' | 'onRequestPicker' | 'onRequestMemberPicker'
+    'node' | 'mode' | 'onRequestPicker' | 'onRequestMemberPicker' | 'onRequestSupply'
   >;
   onClosePicker: () => void;
   onCloseMember: () => void;
+  onCloseSupply: () => void;
 }) {
   return (
     <>
@@ -37,10 +109,7 @@ export function CalcPickers({
           node={pickerNode}
           session={session}
           onSelectRecipe={(_materialId, recipeId) =>
-            data.onSelectRecipe(
-              pickerNode.path ?? pickerNode.materialId,
-              recipeId,
-            )
+            data.onSelectRecipe(pickerNode.id, recipeId)
           }
           onSelectTagMember={data.onSelectTagMember}
           recipeDefaults={data.recipeDefaults}
@@ -63,6 +132,15 @@ export function CalcPickers({
           onSelect={data.onSelectTagMember}
         />
       ) : null}
+      {supply ? (
+        <SupplyPicker
+          supply={supply}
+          session={session}
+          data={data}
+          onClose={onCloseSupply}
+        />
+      ) : null}
     </>
   );
 }
+

package/src/components/views/calc/flow/toolbar.tsx

@@ -10,16 +10,12 @@ import {
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
 import { CalcViewMenu } from './view-menu';
 import type {
-  CalcDensity,
-  CalcDirection,
-  CalcEdgeStyle,
   CalcFarMode,
   CalcViewMode,
 } from '@terrafirmagreg-team/recipe/lib/calc/flow';
 
 export function CalcToolbar({
   onFit,
-  moved,
   onRelayout,
   onZoomIn,
   onZoomOut,
@@ -27,21 +23,14 @@ export function CalcToolbar({
   ...view
 }: {
   onFit: () => void;
-  moved: boolean;
   onRelayout: () => void;
   onZoomIn: () => void;
   onZoomOut: () => void;
   actions?: ReactNode;
   mode: CalcViewMode;
   onModeChange: (mode: CalcViewMode) => void;
-  direction: CalcDirection;
-  onDirectionChange: (direction: CalcDirection) => void;
-  edgeStyle: CalcEdgeStyle;
-  onEdgeStyleChange: (style: CalcEdgeStyle) => void;
   farCards: CalcFarMode;
   onFarCardsChange: (mode: CalcFarMode) => void;
-  density: CalcDensity;
-  onDensityChange: (density: CalcDensity) => void;
 }) {
   const t = useTranslations();
   return (
@@ -49,16 +38,14 @@ export function CalcToolbar({
       <ViewerControls
         start={[
           <CalcViewMenu key="view" {...view} />,
-          moved ? (
-            <IconButton
-              key="relayout"
-              overlay
-              label={t('recipe.calc.relayout')}
-              onClick={onRelayout}
-            >
-              <RotateCcw className="size-3.5" />
-            </IconButton>
-          ) : null,
+          <IconButton
+            key="relayout"
+            overlay
+            label={t('Auto layout', { note: 'recipe.calc.relayout' })}
+            onClick={onRelayout}
+          >
+            <RotateCcw className="size-3.5" />
+          </IconButton>,
         ]}
         zoom={{
           onZoomIn,
@@ -70,3 +57,4 @@ export function CalcToolbar({
     </ViewerToolbar>
   );
 }
+