@terrafirmagreg-team/recipe 0.0.0-stage → 1.2.0

package/src/hooks/alloy/use-fluid-colors.ts

@@ -0,0 +1,125 @@
+'use client';
+import type { DatasetRef } from '@terrafirmagreg-team/sites/location';
+
+import { useEffect, useMemo, useReducer } from 'react';
+import { loadClientModAtlases } from '@terrafirmagreg-team/dump/lib/dump/client/atlases';
+import { lookupSpriteInBundle } from '@terrafirmagreg-team/dump/lib/dump/assets/atlas/lookup';
+import { atlasPagePublicUrl } from '@terrafirmagreg-team/dump/lib/dump/assets/urls';
+import { splitDumpId } from '@terrafirmagreg-team/dump/lib/dump/paths';
+import { createAsyncCache } from '@terrafirmagreg-team/data/lib/async-cache';
+import { createDatasetCache } from '@terrafirmagreg-team/dump/lib/dump/reader';
+import type { RecipeSlotFill } from '@terrafirmagreg-team/recipe/lib/data/dto';
+
+const loadAtlasPage = createAsyncCache(
+  async (url: string): Promise<HTMLImageElement> => {
+    const image = new Image();
+    image.crossOrigin = 'anonymous';
+    const done = new Promise<HTMLImageElement>((resolve, reject) => {
+      image.onload = () => resolve(image);
+      image.onerror = () =>
+        reject(new Error(`atlas page failed to load: ${url}`));
+    });
+    image.src = url;
+    return done;
+  },
+);
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 510;
+  if (max === min) return [0, 0, l];
+  const d = (max - min) / 255;
+  const s = l > 0.5 ? d / (2 - (max + min) / 255) : d / ((max + min) / 255);
+  let h = 0;
+  if (max === r) h = ((g - b) / 255 / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / 255 / d + 2) / 6;
+  else h = ((r - g) / 255 / d + 4) / 6;
+  return [h, s, l];
+}
+
+function displayColor(r: number, g: number, b: number): string {
+  const [h, s, l] = rgbToHsl(r, g, b);
+  const sat = Math.min(0.85, s);
+  const light = Math.min(0.78, Math.max(0.25, l));
+  return `hsl(${Math.round(h * 360)} ${Math.round(sat * 100)}% ${Math.round(light * 100)}%)`;
+}
+
+const loadFluidColor = createDatasetCache(
+  async (dataset: DatasetRef, id: string): Promise<string | null> => {
+    const parts = splitDumpId(id);
+    if (!parts) return null;
+    const bundle = await loadClientModAtlases(dataset, parts.ns);
+    const hit = lookupSpriteInBundle(bundle, { id, kind: 'fluid' });
+    if (!hit) return null;
+    const url = atlasPagePublicUrl(dataset, hit.atlas, hit.page);
+    if (!url) return null;
+    const { sprite } = hit;
+    const image = await loadAtlasPage(url);
+    const canvas = document.createElement('canvas');
+    canvas.width = sprite.w;
+    canvas.height = sprite.h;
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return null;
+    ctx.drawImage(
+      image,
+      sprite.x,
+      sprite.y,
+      sprite.w,
+      sprite.h,
+      0,
+      0,
+      sprite.w,
+      sprite.h,
+    );
+    const { data } = ctx.getImageData(0, 0, sprite.w, sprite.h);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let n = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] < 128) continue;
+      r += data[i];
+      g += data[i + 1];
+      b += data[i + 2];
+      n += 1;
+    }
+    return n ? displayColor(r / n, g / n, b / n) : null;
+  },
+  (dataset, id) => `${dataset.id}/${dataset.version ?? ''}|${id}`,
+);
+
+export function useFluidColors(
+  dataset: DatasetRef,
+  slots: readonly (RecipeSlotFill | { id: string; kind?: string })[],
+): (string | undefined)[] {
+  const ids = useMemo(
+    () =>
+      slots.map((slot) =>
+        slot && (slot.kind === 'fluid' || !slot.kind) ? slot.id : null,
+      ),
+    [slots],
+  );
+  const [bump, force] = useReducer((v: number) => v + 1, 0);
+  useEffect(() => {
+    let live = true;
+    const pending = ids.filter(
+      (id): id is string => !!id && loadFluidColor.peek(dataset, id) === undefined,
+    );
+    if (pending.length) {
+      Promise.allSettled(
+        pending.map((id) => loadFluidColor(dataset, id)),
+      ).then(() => {
+        if (live) force();
+      });
+    }
+    return () => {
+      live = false;
+    };
+  }, [dataset, ids]);
+  void bump;
+  return ids.map((id) =>
+    id ? (loadFluidColor.peek(dataset, id) ?? undefined) : undefined,
+  );
+}
+

package/src/hooks/alloy/use-mix-state.ts

@@ -0,0 +1,240 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { replaceUrlState } from '@terrafirmagreg-team/ui/lib/utils/history';
+import { recipeItemName } from '@terrafirmagreg-team/recipe/lib/client-index';
+import { useFluidColors } from '@terrafirmagreg-team/recipe/hooks/alloy/use-fluid-colors';
+import { recipeHref } from '@terrafirmagreg-team/recipe/lib/links';
+import {
+  INGOT_MB,
+  checkMix,
+  ingotRatioMix,
+  minimalAdditions,
+  scaleAmounts,
+  snapToIngots,
+  suggestAmounts,
+} from '@terrafirmagreg-team/recipe/lib/alloy/mix';
+import type { AlloyComponent, AlloyRecipe } from '@terrafirmagreg-team/recipe/types/alloy';
+import type { RecipeSession } from '@terrafirmagreg-team/recipe/types';
+
+function seedMix(
+  components: readonly AlloyComponent[],
+  unit: 'mb' | 'ingot',
+  mixParam: string | undefined,
+): { inputs: string[]; total: string } {
+  const parts = mixParam?.split(';').map((value) => value.trim());
+  if (
+    parts &&
+    parts.length === components.length &&
+    parts.every((value) => value !== '' && Number.isFinite(Number(value)))
+  ) {
+    return {
+      inputs: parts,
+      total: String(
+        Number(parts.reduce((sum, value) => sum + Number(value), 0).toFixed(3)),
+      ),
+    };
+  }
+  const ratio = ingotRatioMix(components);
+  if (unit === 'ingot' && ratio) {
+    return { inputs: ratio.counts.map(String), total: String(ratio.total) };
+  }
+  return {
+    inputs: (suggestAmounts(components, 144) ?? []).map(String),
+    total: '144',
+  };
+}
+
+export function useMixState(recipe: AlloyRecipe, session: RecipeSession) {
+  const t = useTranslations();
+  const name = (id: string) =>
+    recipeItemName(session.names, session.lang, id);
+  const slots = useMemo(
+    () => recipe.components.map(({ slot }) => slot),
+    [recipe.components],
+  );
+  const colors = useFluidColors(session.dataset, slots);
+  const [unit, setUnit] = useState<'mb' | 'ingot'>(() =>
+    session.alloyUnit === 'ingot' ? 'ingot' : 'mb',
+  );
+  const factor = unit === 'ingot' ? INGOT_MB : 1;
+
+  const [seed] = useState(() =>
+    seedMix(recipe.components, unit, session.alloyMix),
+  );
+  const [total, setTotal] = useState(seed.total);
+  const [inputs, setInputs] = useState(seed.inputs);
+  const [seen, setSeen] = useState({
+    unit: session.alloyUnit,
+    mix: session.alloyMix,
+  });
+
+  const num = (value: string) => Number(value.replace(',', '.'));
+  const trim = (value: number) => String(Number(value.toFixed(3)));
+  const totalNumber = num(total);
+  const amounts = useMemo(
+    () => inputs.map((value) => num(value) || 0),
+    [inputs],
+  );
+
+  if (session.alloyUnit !== seen.unit || session.alloyMix !== seen.mix) {
+    setSeen({ unit: session.alloyUnit, mix: session.alloyMix });
+    if (
+      session.alloyUnit !== (unit === 'ingot' ? 'ingot' : undefined) ||
+      session.alloyMix !== amounts.map((value) => trim(value)).join(';')
+    ) {
+      const nextUnit = session.alloyUnit === 'ingot' ? 'ingot' : 'mb';
+      const next = seedMix(recipe.components, nextUnit, session.alloyMix);
+      setUnit(nextUnit);
+      setInputs(next.inputs);
+      setTotal(next.total);
+    }
+  }
+
+  useEffect(() => {
+    const mix = amounts.map((value) => trim(value)).join(';');
+    replaceUrlState(
+      recipeHref(session.dataset, session.lang, {
+        tool: 'alloy',
+        id: recipe.recipe.id,
+        tab: session.tab,
+        unit: unit === 'ingot' ? 'ingot' : undefined,
+        mix,
+      }),
+    );
+  }, [
+    unit,
+    amounts,
+    recipe.recipe.id,
+    session.dataset,
+    session.lang,
+    session.tab,
+  ]);
+  const mix = useMemo(
+    () => checkMix(recipe.components, amounts),
+    [recipe.components, amounts],
+  );
+  const fix = useMemo(
+    () => minimalAdditions(recipe.components, amounts),
+    [recipe.components, amounts],
+  );
+  const ratioMix = useMemo(
+    () => ingotRatioMix(recipe.components),
+    [recipe.components],
+  );
+  const step = unit === 'ingot' ? 1 : INGOT_MB;
+  const presets =
+    unit === 'ingot' ? [1, 4, 10, 32, 64] : [144, 576, 1440, 4608, 9216];
+  const econTotal =
+    Number.isFinite(totalNumber) && totalNumber > 0 ? totalNumber : mix.total;
+  const needsSnap = amounts.some(
+    (value) => Math.abs((value * factor) % INGOT_MB) > 1e-6,
+  );
+  const snapped = useMemo(
+    () =>
+      needsSnap
+        ? snapToIngots(
+            recipe.components,
+            amounts.map((value) => value * factor),
+          )
+        : null,
+    [needsSnap, recipe.components, amounts, factor],
+  );
+  const output = recipe.recipe.outputs[0];
+  const unitLabel =
+    unit === 'ingot' ? t('ing.', { note: 'recipe.alloy.unit.ingot' }) : t('mB', { note: 'recipe.alloy.unit.mb' });
+  const format = (value: number) =>
+    value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+  const formatPercent = (value: number) =>
+    value.toLocaleString(undefined, { maximumFractionDigits: 1 });
+  const totalInvalid =
+    total.trim() !== '' && (!Number.isFinite(totalNumber) || totalNumber <= 0);
+  const mixLabel = recipe.components
+    .map(
+      ({ slot }, i) =>
+        `${formatPercent(mix.rows[i]?.percent ?? 0)}% ${name(slot.id)}`,
+    )
+    .join(', ');
+  const copyText = `${recipe.components
+    .map(({ slot }, i) => `${name(slot.id)} ${format(amounts[i] || 0)}`)
+    .join(' + ')} → ${output ? name(output.id) : t('Alloy', { note: 'recipe.alloy.result' })} ${format(
+    mix.output,
+  )} ${unitLabel}`;
+  const fill = (target: number) => {
+    const next = suggestAmounts(recipe.components, target);
+    if (next) {
+      setInputs(next.map((value) => trim(value)));
+    }
+  };
+
+  const applyTotal = (raw: string) => {
+    setTotal(raw);
+    const value = num(raw);
+    if (!Number.isFinite(value) || value <= 0) return;
+    const next =
+      scaleAmounts(amounts, value) ?? suggestAmounts(recipe.components, value);
+    if (next) {
+      setInputs(next.map((v) => trim(v)));
+    }
+  };
+  const stepInput = (index: number, dir: 1 | -1) => {
+    setInputs((prev) =>
+      prev.map((value, j) =>
+        j === index ? trim(Math.max(0, (num(value) || 0) + dir * step)) : value,
+      ),
+    );
+  };
+  const switchUnit = (next: 'mb' | 'ingot') => {
+    if (next === unit) return;
+    const k = next === 'ingot' ? 1 / INGOT_MB : INGOT_MB;
+    const convert = (value: string) =>
+      value.trim() !== '' && Number.isFinite(num(value))
+        ? trim(num(value) * k)
+        : value;
+    setInputs((prev) => prev.map(convert));
+    setTotal(convert);
+    setUnit(next);
+  };
+  const applyRatioMix = (mult = 1) => {
+    if (!ratioMix) return;
+
+    const perIngot = INGOT_MB / factor;
+    setInputs(ratioMix.counts.map((count) => trim(count * mult * perIngot)));
+    setTotal(trim(ratioMix.total * mult * perIngot));
+  };
+
+  return {
+    unit,
+    total,
+    inputs,
+    totalNumber,
+    factor,
+    presets,
+    mix,
+    fix,
+    ratioMix,
+    econTotal,
+    needsSnap,
+    snapped,
+    output,
+    colors,
+    name,
+    format,
+    formatPercent,
+    unitLabel,
+    totalInvalid,
+    mixLabel,
+    copyText,
+    trim,
+    setInputs,
+    fill,
+    applyTotal,
+    stepInput,
+    switchUnit,
+    applyRatioMix,
+  };
+}
+
+export type MixState = ReturnType<typeof useMixState>;
+

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,
+  };
+}
+