+ {/* Palette. Compact: an overlay over the canvas, opened from the
+ toolbar, so three columns never have to share a narrow row. */}
+ {(!compact || compactPane === "palette") && (
+
handleSideResizeStart(event, "palette")}
+ onKeyDown={(event) => handleSideResizeKey(event, "palette")}
+ className="w-1 shrink-0 cursor-col-resize bg-border/60 hover:bg-primary/60 focus-visible:bg-primary focus-visible:outline-none"
+ />
+ )}
+
+ {/* Canvas */}
+
{
+ if (event.dataTransfer.types.includes(TOOL_DRAG_TYPE)) {
+ event.preventDefault();
+ event.dataTransfer.dropEffect = "copy";
+ }
+ }}
+ onDrop={handleCanvasDrop}
+ onClick={(event) => {
+ if (event.target === event.currentTarget) setSelectedNodeId(null);
+ }}
+ >
+
+ setGraph((current) => removeEdge(current, edgeId))}
+ />
+ {graph.nodes.map((node) => (
+
+ ))}
+
+ {/* Centred on the visible canvas rather than the scroll extent, which
+ is wider than the viewport and would push the hint out of sight. */}
+ {graph.nodes.length === 0 && (
+
+ {t("processing.modelBuilder.canvasEmpty")}
+
+ )}
+
+
+ {!compact && (
+
handleSideResizeStart(event, "inspector")}
+ onKeyDown={(event) => handleSideResizeKey(event, "inspector")}
+ className="w-1 shrink-0 cursor-col-resize bg-border/60 hover:bg-primary/60 focus-visible:bg-primary focus-visible:outline-none"
+ />
+ )}
+
+ {/* Inspector */}
+ {(!compact || compactPane === "inspector") && (
+
+
+ portFeedsOutput(graph, selectedNode.id, port.id))
+ .map((port) => port.id),
+ )
+ : new Set()
+ }
+ onKeepResult={(portId, name) =>
+ selectedNode && handleKeepResult(selectedNode.id, portId, name)
+ }
+ onFieldChange={(field, value) =>
+ selectedNode &&
+ setGraph((current) => setNodeField(current, selectedNode.id, field, value))
+ }
+ onParamChange={(paramId, value) =>
+ selectedNode &&
+ setGraph((current) =>
+ setNodeParameter(current, selectedNode.id, paramId, value),
+ )
+ }
+ onRemove={() => {
+ if (!selectedNode) return;
+ setGraph((current) => removeNode(current, selectedNode.id));
+ // An armed port on the node being deleted would otherwise stay
+ // armed and wire the next activation to a node that is gone.
+ setArmedPort((current) =>
+ current?.nodeId === selectedNode.id ? null : current,
+ );
+ setSelectedNodeId(null);
+ }}
+ />
+
+ {savedModels.length > 0 && (
+
+
+
+
+
+
+
+ )}
+
+ )}
+
+ )}
+
+ {/* Issues + log */}
+ {!minimized && (
+ <>
+
+
+
+ {catalogFailed && (
+
+ {t("processing.modelBuilder.catalogUnavailable")}
+
+
+ )}
+ {issues.map((issue, index) => (
+
+ {translateIssue(t, issue)}
+
+ ))}
+ {log.map((line, index) => (
+
+ {line}
+
+ ))}
+ {issues.length === 0 && log.length === 0 && !catalogFailed && (
+
+ {t("processing.modelBuilder.outputPlaceholder")}
+
+ )}
+
+
+
+ )}
+
+ {/* Resize grip */}
+ {!minimized && (
+
+ )}
+
+ );
+}
+
+/**
+ * Resolve a validation issue to the user's language.
+ *
+ * `ModelGraphIssue` carries a machine-readable `code` precisely so the UI can
+ * translate rather than print the engine's English `message`; rendering the
+ * message verbatim left every validation problem English-only in all 19
+ * locales. Port names and tool ids inside a message are data, so they are
+ * interpolated rather than translated.
+ */
+function translateIssue(t: TFunction, issue: ModelGraphIssue): string {
+ switch (issue.code) {
+ case "missing-layer":
+ return t("processing.modelBuilder.issueMissingLayer");
+ case "unknown-tool":
+ return t("processing.modelBuilder.issueUnknownTool", { tool: issue.detail ?? "" });
+ case "missing-input":
+ return t("processing.modelBuilder.issueMissingInput", { port: issue.detail ?? "" });
+ case "unknown-port":
+ return t("processing.modelBuilder.issueUnknownPort");
+ case "duplicate-input":
+ return t("processing.modelBuilder.issueDuplicateInput", { port: issue.detail ?? "" });
+ case "type-mismatch":
+ return t("processing.modelBuilder.issueTypeMismatch");
+ case "cycle":
+ return t("processing.modelBuilder.issueCycle");
+ case "no-output":
+ return t("processing.modelBuilder.issueNoOutput");
+ case "duplicate-node":
+ return t("processing.modelBuilder.issueDuplicateNode");
+ case "dangling-edge":
+ return t("processing.modelBuilder.issueDanglingEdge");
+ default:
+ return issue.message;
+ }
+}
+
+/** Display name for a port, translating the two synthetic node ports. */
+function portLabel(t: TFunction, label: string): string {
+ if (label === INPUT_NODE_PORT) return t("processing.modelBuilder.outputNode");
+ if (label === OUTPUT_NODE_PORT) return t("processing.modelBuilder.inputNode");
+ return label;
+}
+
+/** SVG layer drawing every connection, plus the in-progress link. */
+function GraphEdges({
+ graph,
+ resolveDescriptor,
+ linking,
+ onRemoveEdge,
+}: {
+ graph: ProcessingModelGraph;
+ resolveDescriptor: (provider?: string, toolId?: string) => ModelToolDescriptor | undefined;
+ linking: { nodeId: string; portId: string; x: number; y: number } | null;
+ onRemoveEdge: (edgeId: string) => void;
+}): ReactElement {
+ const { t } = useTranslation();
+ const byId = new Map(graph.nodes.map((node) => [node.id, node]));
+
+ const anchor = (nodeId: string, portId: string, side: "in" | "out") => {
+ const node = byId.get(nodeId);
+ if (!node) return null;
+ const ports = portsOf(node, resolveDescriptor(node.provider, node.toolId));
+ const list = side === "in" ? ports.inputs : ports.outputs;
+ const index = list.findIndex((port) => port.id === portId);
+ if (index < 0) return null;
+ // Same geometry the card uses, or a labelled multi-port node would draw its
+ // curves to where the dots used to be.
+ const layout = cardLayout(ports);
+ return portPosition(
+ node,
+ index,
+ list.length,
+ side,
+ layout.height,
+ side === "in" ? layout.labelIn : layout.labelOut,
+ );
+ };
+
+ return (
+
+ );
+}
+
+/** The ports a node exposes, mirroring the graph engine's own rule. */
+function portsOf(
+ node: ModelGraphNode,
+ descriptor: ModelToolDescriptor | undefined,
+): { inputs: { id: string; label: string }[]; outputs: { id: string; label: string }[] } {
+ // Stable ids, matching the engine's own portsFor: portLabel() resolves these
+ // for display, and a hardcoded English word here would slip past it.
+ if (node.kind === "input") {
+ return { inputs: [], outputs: [{ id: INPUT_NODE_PORT, label: INPUT_NODE_PORT }] };
+ }
+ if (node.kind === "output") {
+ return { inputs: [{ id: OUTPUT_NODE_PORT, label: OUTPUT_NODE_PORT }], outputs: [] };
+ }
+ return { inputs: descriptor?.inputs ?? [], outputs: descriptor?.outputs ?? [] };
+}
+
+/**
+ * One draggable card on the canvas.
+ *
+ * Memoized because a node drag commits a new graph object on every animation
+ * frame: without this, every card on the canvas re-renders for a move that
+ * only changed one of them. Its handler props are all `useCallback`-stable, so
+ * only the moved card's `node` identity actually changes.
+ */
+const GraphNodeCard = memo(function GraphNodeCard({
+ node,
+ descriptor,
+ layers,
+ selected,
+ status,
+ hasIssue,
+ armedPortId,
+ onSelect,
+ onPointerDown,
+ onPortPointerDown,
+ onPortActivate,
+}: {
+ node: ModelGraphNode;
+ descriptor: ModelToolDescriptor | undefined;
+ layers: GeoLibreLayer[];
+ selected: boolean;
+ status?: "running" | "done" | "error";
+ hasIssue: boolean;
+ /** The output port on this node armed for a keyboard connection, if any. */
+ armedPortId?: string;
+ onSelect: (nodeId: string) => void;
+ onPointerDown: (event: ReactPointerEvent
, node: ModelGraphNode) => void;
+ onPortPointerDown: (
+ event: ReactPointerEvent,
+ nodeId: string,
+ portId: string,
+ ) => void;
+ onPortActivate: (side: "in" | "out", nodeId: string, portId: string) => void;
+}): ReactElement {
+ const { t } = useTranslation();
+ const ports = portsOf(node, descriptor);
+ const layout = cardLayout(ports);
+ const title =
+ node.kind === "input"
+ ? (layers.find((layer) => layer.id === node.layerId)?.name ??
+ t("processing.modelBuilder.inputNode"))
+ : node.kind === "output"
+ ? node.name?.trim() || t("processing.modelBuilder.outputNode")
+ : (descriptor?.name ?? node.toolId ?? "");
+
+ return (
+ // Focusable with a role, so the card can be reached and selected from the
+ // keyboard; without it selecting a node (and so editing its parameters in
+ // the inspector) needed a pointer. Dragging stays pointer-only — a card's
+ // position is presentation, not part of the model.
+ onPointerDown(event, node)}
+ onKeyDown={(event) => {
+ // Only the card's own activation. A keydown on one of the port buttons
+ // bubbles up here, and preventDefault() on that would stop the browser
+ // synthesizing the port's `click` — which is the whole keyboard wiring
+ // path.
+ if (event.target !== event.currentTarget) return;
+ if (event.key !== "Enter" && event.key !== " ") return;
+ event.preventDefault();
+ onSelect(node.id);
+ }}
+ style={{ left: node.x, top: node.y, width: NODE_WIDTH, height: layout.height }}
+ className={cn(
+ "absolute cursor-grab select-none rounded-md border bg-card p-2 shadow-sm active:cursor-grabbing",
+ selected && "border-primary ring-2 ring-primary/30",
+ hasIssue && !selected && "border-destructive",
+ status === "running" && "ring-2 ring-primary",
+ status === "done" && "border-primary/60",
+ status === "error" && "border-destructive ring-2 ring-destructive/40",
+ )}
+ >
+
+ {node.kind === "tool"
+ ? (node.provider ?? "")
+ : node.kind === "input"
+ ? t("processing.modelBuilder.inputNode")
+ : t("processing.modelBuilder.outputNode")}
+
+
+ {title}
+
+
+ {ports.inputs.map((port, index) => {
+ const at = portPosition(
+ node,
+ index,
+ ports.inputs.length,
+ "in",
+ layout.height,
+ layout.labelIn,
+ );
+ return (
+
+
+ );
+ })}
+ {ports.outputs.map((port, index) => {
+ const at = portPosition(
+ node,
+ index,
+ ports.outputs.length,
+ "out",
+ layout.height,
+ layout.labelOut,
+ );
+ return (
+
+
+ );
+ })}
+
+ {t("processing.modelBuilder.selectNodeHint")}
+
+ );
+ }
+
+ return (
+
+
+
+ {node.kind === "tool"
+ ? (descriptor?.name ?? node.toolId)
+ : node.kind === "input"
+ ? t("processing.modelBuilder.inputNode")
+ : t("processing.modelBuilder.outputNode")}
+
+
+
+
+ {issues.map((issue, index) => (
+
+ {translateIssue(t, issue)}
+
+ ))}
+
+ {node.kind === "input" && (
+
+
+
+
+ )}
+
+ {node.kind === "output" && (
+
+
+ onFieldChange("name", event.target.value)}
+ placeholder={t("processing.modelBuilder.resultNamePlaceholder")}
+ />
+
+ )}
+
+ {node.kind === "tool" && descriptor && (
+
+ {descriptor.description && (
+
{descriptor.description}
+ )}
+ {descriptor.parameters.length === 0 ? (
+
+ {t("processing.modelBuilder.noParameters")}
+
+ ) : (
+ descriptor.parameters.map((param) => (
+
({ id: layer.id, name: layer.name }))}
+ onChange={(value) => onParamChange(param.id, value)}
+ />
+ ))
+ )}
+ {/* A model keeps only what an output node is wired to, so a mid-chain
+ tool's result is computed and discarded unless the user knows to
+ add a second output node and fan the port out to it. This makes
+ that one click, per output port. */}
+ {descriptor.outputs.length > 0 && (
+
+
+ {t("processing.modelBuilder.keepResultHint")}
+
+ {descriptor.outputs.map((port) => (
+
+ ))}
+
+ )}
+