{searchResults.length === 0 ? (
-
No matches
+
No matches
) : (
searchResults.map(({ className, def }) => (
{
const type = getHandleType(params.sourceHandle);
- const color = TYPE_COLORS[type] || '#999';
+ const color = TYPE_COLORS[type] || 'var(--fallback-type)';
setEdges((eds) => {
// Enforce single connection per input handle
@@ -864,7 +831,7 @@ function Flow() {
return type;
})();
const targetHandle = `input::${inputName}::${targetType}`;
- const color = TYPE_COLORS[filterType] || '#999';
+ const color = TYPE_COLORS[filterType] || 'var(--fallback-type)';
setEdges((eds) => addEdge({
source: contextMenu.pendingNodeId,
sourceHandle: contextMenu.pendingHandleId,
@@ -879,7 +846,7 @@ function Flow() {
if (outputIdx !== -1) {
const outputType = def.output[outputIdx];
const sourceHandle = `output::${outputIdx}::${outputType}`;
- const color = TYPE_COLORS[outputType] || '#999';
+ const color = TYPE_COLORS[outputType] || 'var(--fallback-type)';
setEdges((eds) => addEdge({
source: newNodeId,
sourceHandle,
@@ -1021,7 +988,7 @@ function Flow() {
const vp = getViewportForBounds(bounds, imageWidth, imageHeight, 0.5, 1, pad);
const blob = await captureWorkflowViewportBlob(viewportEl, {
- backgroundColor: '#1a1a1a',
+ backgroundColor: CANVAS_COLORS.bgDeep,
width: imageWidth,
height: imageHeight,
style: {
@@ -1274,11 +1241,7 @@ function Flow() {
{
const cat = n.data?.definition?.category;
- const colors = {
- io: '#37474f', filters: '#1a237e', level: '#1b5e20',
- analysis: '#4a148c', particles: '#bf360c', display: '#212121',
- };
- return colors[cat] || '#333';
+ return CAT_COLORS[cat] || 'var(--fallback-cat)';
}}
/>
diff --git a/frontend/src/CrossSectionOverlay.jsx b/frontend/src/CrossSectionOverlay.jsx
index d061add..85f0e0f 100644
--- a/frontend/src/CrossSectionOverlay.jsx
+++ b/frontend/src/CrossSectionOverlay.jsx
@@ -68,7 +68,7 @@ export default function CrossSectionOverlay({
)}
@@ -78,12 +78,12 @@ export default function CrossSectionOverlay({
className={`cs-marker ${aLocked ? 'cs-marker-locked' : ''}`}
style={{ left: `${x1 * 100}%`, top: `${y1 * 100}%` }}
onPointerDown={onPointerDown('p1')}
- />
+ >A
+ >B
+
Preview unavailable.
);
@@ -440,6 +406,58 @@ function getConnectedOutputInfo(store, nodeId, inputName) {
};
}
+/**
+ * Resolve live COORDPAIR values by walking edges back to upstream Coordinate
+ * nodes' widget values. Returns [x1, y1, x2, y2] (a flat array for stable
+ * equality comparison) or null if the chain can't be fully resolved.
+ *
+ * Uses store.nodes (the reactive array) rather than nodeLookup so that
+ * upstream widgetValues changes trigger re-renders.
+ */
+function resolveLiveCoordPair(store, nodeId, coordPairInputName) {
+ const nodes = store.nodes;
+ const edges = store.edges;
+ if (!nodes || !edges) return null;
+
+ const findNode = (nid) => nodes.find((n) => n.id === nid);
+
+ // 1. Find the edge feeding this node's COORDPAIR input
+ const cpEdge = edges.find(
+ (e) => e.target === nodeId && e.targetHandle?.startsWith(`input::${coordPairInputName}::`)
+ );
+ if (!cpEdge) return null;
+
+ const cpNode = findNode(cpEdge.source);
+ if (!cpNode) return null;
+
+ // If the source node is a CoordinatePair, walk one more level to Coordinate nodes
+ if (cpNode.data?.className === 'CoordinatePair') {
+ const resolveCoord = (inputName) => {
+ const edge = edges.find(
+ (e) => e.target === cpNode.id && e.targetHandle?.startsWith(`input::${inputName}::`)
+ );
+ if (!edge) return null;
+ const srcNode = findNode(edge.source);
+ if (!srcNode?.data?.widgetValues) return null;
+ const x = srcNode.data.widgetValues.x;
+ const y = srcNode.data.widgetValues.y;
+ return (x != null && y != null) ? [x, y] : null;
+ };
+ const a = resolveCoord('a');
+ const b = resolveCoord('b');
+ if (!a || !b) return null;
+ return [a[0], a[1], b[0], b[1]];
+ }
+
+ // If the source is a node with x1/y1/x2/y2 widgets (e.g. another CrossSection output)
+ const wv = cpNode.data?.widgetValues;
+ if (wv && wv.x1 != null && wv.y1 != null && wv.x2 != null && wv.y2 != null) {
+ return [wv.x1, wv.y1, wv.x2, wv.y2];
+ }
+
+ return null;
+}
+
function getBasename(value) {
if (typeof value !== 'string') return '';
const trimmed = value.trim();
@@ -732,6 +750,29 @@ function CustomNode({ id, data }) {
useCallback((s) => getConnectedOutputInfo(s, id, 'path'), [id]),
);
+ // Find the COORDPAIR input name (if any) so we can resolve live upstream positions
+ const coordPairInputName = React.useMemo(() => {
+ const allInputs = { ...def.input.required, ...def.input.optional };
+ for (const [name, spec] of Object.entries(allInputs)) {
+ const type = Array.isArray(spec) ? spec[0] : spec;
+ if (type === 'COORDPAIR') return name;
+ }
+ return null;
+ }, [def]);
+
+ // Returns [x1, y1, x2, y2] or null — flat array for cheap equality check
+ const liveCoordPair = useStore(
+ useCallback(
+ (s) => coordPairInputName ? resolveLiveCoordPair(s, id, coordPairInputName) : null,
+ [id, coordPairInputName],
+ ),
+ (a, b) => {
+ if (a === b) return true;
+ if (!a || !b) return false;
+ return a[0] === b[0] && a[1] === b[1] && a[2] === b[2] && a[3] === b[3];
+ },
+ );
+
// Parse inputs into data handles and widgets
const required = def.input.required || {};
const optional = def.input.optional || {};
@@ -846,7 +887,7 @@ function CustomNode({ id, data }) {
slot: i,
}));
- const catColor = CAT_COLORS[def.category] || '#333';
+ const catColor = CAT_COLORS[def.category] || 'var(--fallback-cat)';
const maxIORows = Math.max(renderedDataInputs.length, outputs.length);
const hasInteractiveLineOverlay = data.overlay?.kind === 'line_plot' && hiddenWidgets.has('x1');
const hasInteractiveOverlay = !!data.overlay && (
@@ -904,7 +945,7 @@ function CustomNode({ id, data }) {
position={Position.Left}
id={`input::${socketName}::${socketType}`}
className="typed-handle"
- style={{ background: TYPE_COLORS[socketType] || '#999' }}
+ style={{ background: TYPE_COLORS[socketType] || 'var(--fallback-type)' }}
/>
);
})()}
@@ -939,7 +980,7 @@ function CustomNode({ id, data }) {
position={Position.Left}
id={`input::${inp.name}::${inp.type}`}
className="typed-handle"
- style={{ background: TYPE_COLORS[inp.type] || '#999' }}
+ style={{ background: TYPE_COLORS[inp.type] || 'var(--fallback-type)' }}
/>
{inp.label || inp.name}
{inlineWidgetsByInput.has(inp.name) && (
@@ -967,7 +1008,7 @@ function CustomNode({ id, data }) {
position={Position.Right}
id={`output::${out.slot}::${out.type}`}
className="typed-handle"
- style={{ background: TYPE_COLORS[out.type] || '#999' }}
+ style={{ background: TYPE_COLORS[out.type] || 'var(--fallback-type)' }}
/>
)}
@@ -1002,7 +1043,7 @@ function CustomNode({ id, data }) {
position={Position.Left}
id={`input::${w.name}::${w.socketType}`}
className="typed-handle"
- style={{ background: TYPE_COLORS[w.socketType] || '#999' }}
+ style={{ background: TYPE_COLORS[w.socketType] || 'var(--fallback-type)' }}
/>
)}
- Loading 3D...