matei/tono
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature focus on 3d viewer, add copy/paste

Browse Source
This commit is contained in:
matei jordache
2026-03-26 21:25:35 -07:00
parent de0b49acc5
commit 30671a5362
24 changed files with 1680 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
frontend/src/App.jsx
View File

@@ -16,6 +16,12 @@ import { embedWorkflow, extractWorkflow } from './pngMetadata';
import { captureViewportBlob as captureWorkflowViewportBlob } from './workflowCapture';
import { hydrateWorkflowState } from './workflowHydration';
import { serializeWorkflowState } from './workflowSerialization';
import {
buildNodeClipboardPayload,
instantiateNodeClipboardPayload,
NODE_CLIPBOARD_MIME,
parseNodeClipboardPayload,
} from './nodeClipboard';
import { loadDefaultWorkflowAsset } from './defaultWorkflow';
import {
serializeExecutionGraph,
@@ -49,6 +55,12 @@ function sameStringArray(a = [], b = []) {
return a.every((item, index) => item === b[index]);
}
function isEditableTarget(target) {
if (!target || !(target instanceof Element)) return false;
if (target.closest('input, textarea, select')) return true;
return target.closest('[contenteditable="true"]') !== null;
}
function compareMenuNodes(a, b) {
const orderA = Number.isFinite(a?.def?.menu_order) ? a.def.menu_order : Number.MAX_SAFE_INTEGER;
const orderB = Number.isFinite(b?.def?.menu_order) ? b.def.menu_order : Number.MAX_SAFE_INTEGER;
@@ -254,7 +266,11 @@ function ContextMenu({ x, y, nodeDefs, onAdd, onClose, filterType, filterDirecti
});
if (!hasMatch) continue;
} else {
if (!def.output.some((type) => socketTypesCompatible(type, filterType))) continue;
const hasMatch = def.output.some((type) =>
socketTypesCompatible(type, filterType)
|| (type === 'ANNOTATION_SOURCE' && (filterType === 'DATA_FIELD' || filterType === 'IMAGE'))
);
if (!hasMatch) continue;
}
}
const cat = def.category || 'uncategorized';
@@ -454,6 +470,8 @@ function Flow() {
const autoRunTimer = useRef(null);
const autoRunRef = useRef(null);
const defaultWorkflowLoadAttemptedRef = useRef(false);
const lastPastedClipboardTextRef = useRef('');
const pasteRepeatCountRef = useRef(0);
const reactFlow = useReactFlow();
// ── WebSocket ───────────────────────────────────────────────────────
@@ -554,6 +572,24 @@ function Flow() {
}
}, [reactFlow, refreshLoadNodeOutputs, setNodeOutputs]);
const refreshAnnotationNodeOutputs = useCallback((nodeId) => {
const node = reactFlow.getNode(nodeId);
if (!node) return;
const inputEdge = reactFlow.getEdges().find(
(edge) => edge.target === nodeId && getInputName(edge.targetHandle) === 'input'
);
const outputType = inputEdge ? getHandleType(inputEdge.sourceHandle) : 'ANNOTATION_SOURCE';
setNodeOutputs(nodeId, [outputType], ['Output']);
if (!inputEdge || outputType === 'ANNOTATION_SOURCE') return;
setEdges((prev) => prev.filter((edge) => {
if (edge.source !== nodeId) return true;
return socketTypesCompatible(outputType, getHandleType(edge.targetHandle));
}));
}, [reactFlow, setEdges, setNodeOutputs]);
useEffect(() => {
api.setMessageHandler((msg) => {
console.log('[argonode] WS:', msg.type, msg.data?.node_id || msg.data?.node || '');
@@ -639,14 +675,21 @@ function Flow() {
refreshLoadNodeOutputs(params.target);
}, 0);
}
const targetNode = reactFlow.getNode(params.target);
if (targetNode && (targetNode.data.className === 'Annotations' || targetNode.data.className === 'Markup')) {
setTimeout(() => {
refreshAnnotationNodeOutputs(params.target);
}, 0);
}
scheduleAutoRun();
}, [refreshLoadNodeOutputs, setEdges]); // scheduleAutoRun is stable (no deps)
}, [reactFlow, refreshAnnotationNodeOutputs, refreshLoadNodeOutputs, setEdges]); // scheduleAutoRun is stable (no deps)
const handleEdgesChange = useCallback((changes) => {
const currentEdges = reactFlow.getEdges();
onEdgesChange(changes);
const affectedPathTargets = new Set();
const affectedAnnotationTargets = new Set();
for (const change of changes) {
if (change.type !== 'remove') continue;
const removedEdge = currentEdges.find((edge) => edge.id === change.id);
@@ -654,6 +697,12 @@ function Flow() {
if (getInputName(removedEdge.targetHandle) === 'path') {
affectedPathTargets.add(removedEdge.target);
}
if (getInputName(removedEdge.targetHandle) === 'input') {
const targetNode = reactFlow.getNode(removedEdge.target);
if (targetNode && (targetNode.data.className === 'Annotations' || targetNode.data.className === 'Markup')) {
affectedAnnotationTargets.add(removedEdge.target);
}
}
}
if (affectedPathTargets.size > 0) {
@@ -663,7 +712,14 @@ function Flow() {
});
}, 0);
}
}, [onEdgesChange, reactFlow, refreshLoadNodeOutputs]);
if (affectedAnnotationTargets.size > 0) {
setTimeout(() => {
affectedAnnotationTargets.forEach((nodeId) => {
refreshAnnotationNodeOutputs(nodeId);
});
}, 0);
}
}, [onEdgesChange, reactFlow, refreshAnnotationNodeOutputs, refreshLoadNodeOutputs]);
// ── Drop-on-blank: open filtered context menu ──────────────────────
@@ -749,12 +805,6 @@ function Flow() {
});
}, [reactFlow]);
const contextValue = useMemo(() => ({
onWidgetChange,
openFileBrowser,
onManualTrigger,
}), [onWidgetChange, openFileBrowser, onManualTrigger]);
// ── Add node from context menu ──────────────────────────────────────
const addNode = useCallback((className, def) => {
@@ -789,6 +839,7 @@ function Flow() {
className,
definition: def,
widgetValues,
runtimeValues: {},
previewImage: null,
tableRows: null,
meshData: null,
@@ -842,9 +893,12 @@ function Flow() {
}
} else {
// Dragged from an input → connect from the first matching output on the new node
const outputIdx = def.output.findIndex((type) => socketTypesCompatible(type, filterType));
const outputIdx = def.output.findIndex((type) =>
socketTypesCompatible(type, filterType)
|| (type === 'ANNOTATION_SOURCE' && (filterType === 'DATA_FIELD' || filterType === 'IMAGE'))
);
if (outputIdx !== -1) {
const outputType = def.output[outputIdx];
const outputType = def.output[outputIdx] === 'ANNOTATION_SOURCE' ? filterType : def.output[outputIdx];
const sourceHandle = `output::${outputIdx}::${outputType}`;
const color = TYPE_COLORS[outputType] || 'var(--fallback-type)';
setEdges((eds) => addEdge({
@@ -907,6 +961,101 @@ function Flow() {
autoRunTimer.current = setTimeout(() => autoRunRef.current?.(), 300);
}, []);
const onRuntimeValuesChange = useCallback((nodeId, patch, { scheduleRun = false } = {}) => {
if (!patch || typeof patch !== 'object') return;
setNodes((ns) => ns.map((n) => {
if (n.id !== nodeId) return n;
return {
...n,
data: {
...n.data,
runtimeValues: { ...(n.data.runtimeValues || {}), ...patch },
},
};
}));
if (scheduleRun) {
scheduleAutoRun();
}
}, [setNodes, scheduleAutoRun]);
const pasteClipboardSelection = useCallback((clipboardText) => {
const payload = parseNodeClipboardPayload(clipboardText);
if (!payload) return false;
if (clipboardText === lastPastedClipboardTextRef.current) {
pasteRepeatCountRef.current += 1;
} else {
lastPastedClipboardTextRef.current = clipboardText;
pasteRepeatCountRef.current = 1;
}
const offsetAmount = 36 * pasteRepeatCountRef.current;
const pasted = instantiateNodeClipboardPayload(
payload,
nodeDefsRef.current,
nextIdRef.current,
{ x: offsetAmount, y: offsetAmount },
);
if (pasted.nodes.length === 0) return false;
nextIdRef.current = pasted.nextNodeId;
setNodes((existing) => [
...existing.map((node) => ({ ...node, selected: false })),
...pasted.nodes,
]);
setEdges((existing) => [
...existing.map((edge) => ({ ...edge, selected: false })),
...pasted.edges,
]);
setTimeout(() => {
pasted.nodes.forEach((node) => {
if (node.data.className === 'Folder' && node.data.widgetValues?.folder) {
refreshFolderNodeOutputs(node.id, node.data.widgetValues.folder);
}
});
pasted.nodes.forEach((node) => {
if (node.data.className === 'Image' || node.data.className === 'ImageDemo') {
refreshLoadNodeOutputs(node.id);
}
});
pasted.nodes.forEach((node) => {
if (node.data.className === 'Annotations' || node.data.className === 'Markup') {
refreshAnnotationNodeOutputs(node.id);
}
});
pasted.nodes.forEach((node) => {
reactFlow.updateNodeInternals(node.id);
});
}, 0);
setStatus({
text: `Pasted ${pasted.nodes.length} node${pasted.nodes.length === 1 ? '' : 's'}.`,
level: 'info',
});
scheduleAutoRun();
return true;
}, [
reactFlow,
refreshAnnotationNodeOutputs,
refreshFolderNodeOutputs,
refreshLoadNodeOutputs,
scheduleAutoRun,
setEdges,
setNodes,
]);
const contextValue = useMemo(() => ({
onWidgetChange,
onRuntimeValuesChange,
openFileBrowser,
onManualTrigger,
}), [onRuntimeValuesChange, onWidgetChange, openFileBrowser, onManualTrigger]);
const clearGraph = useCallback(() => {
setNodes([]);
setEdges([]);
@@ -930,8 +1079,13 @@ function Flow() {
refreshLoadNodeOutputs(node.id);
}
});
hydrated.nodes.forEach((node) => {
if (node.data.className === 'Annotations' || node.data.className === 'Markup') {
refreshAnnotationNodeOutputs(node.id);
}
});
}, 0);
}, [refreshFolderNodeOutputs, refreshLoadNodeOutputs, setNodes, setEdges]);
}, [refreshAnnotationNodeOutputs, refreshFolderNodeOutputs, refreshLoadNodeOutputs, setNodes, setEdges]);
const loadDefaultWorkflow = useCallback(async () => {
if (defaultWorkflowLoadAttemptedRef.current) return;
@@ -1168,6 +1322,45 @@ function Flow() {
return () => window.removeEventListener('keydown', handler);
}, [runWorkflow]);
useEffect(() => {
const handleCopy = (event) => {
if (isEditableTarget(event.target)) return;
const payload = buildNodeClipboardPayload(reactFlow.getNodes(), reactFlow.getEdges());
if (!payload) return;
const serialized = JSON.stringify(payload);
event.preventDefault();
event.clipboardData?.setData(NODE_CLIPBOARD_MIME, serialized);
event.clipboardData?.setData('text/plain', serialized);
setStatus({
text: `Copied ${payload.nodes.length} node${payload.nodes.length === 1 ? '' : 's'}.`,
level: 'info',
});
};
const handlePaste = (event) => {
if (isEditableTarget(event.target)) return;
const clipboardText = event.clipboardData?.getData(NODE_CLIPBOARD_MIME)
|| event.clipboardData?.getData('text/plain')
|| '';
if (!clipboardText) return;
const pasted = pasteClipboardSelection(clipboardText);
if (pasted) {
event.preventDefault();
}
};
window.addEventListener('copy', handleCopy);
window.addEventListener('paste', handlePaste);
return () => {
window.removeEventListener('copy', handleCopy);
window.removeEventListener('paste', handlePaste);
};
}, [pasteClipboardSelection, reactFlow]);
// ── Context menu ────────────────────────────────────────────────────
const onPaneContextMenu = useCallback((event) => {

8
frontend/src/CustomNode.jsx
View File

@@ -1075,7 +1075,13 @@ function CustomNode({ id, data }) {
{data.meshData && (
<CollapsibleSection title="3D View" defaultOpen={true}>
<Suspense fallback={<div className="node-preview" style={{color:'var(--text-muted)',padding:4}}>Loading 3D...</div>}>
<SurfaceView meshData={data.meshData} />
<SurfaceView
meshData={data.meshData}
nodeId={id}
widgetValues={data.widgetValues}
runtimeValues={data.runtimeValues}
onRuntimeValuesChange={ctx.onRuntimeValuesChange}
/>
</Suspense>
</CollapsibleSection>
)}

153
frontend/src/SurfaceView.jsx
View File

@@ -8,9 +8,13 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
* meshData: { width, height, z_data (b64 float32), colors (b64 uint8 RGB),
* z_min, z_max, z_scale, x_range, y_range }
*/
export default function SurfaceView({ meshData }) {
export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeValues, onRuntimeValuesChange }) {
const containerRef = useRef(null);
const threeRef = useRef(null); // { renderer, scene, camera, controls, mesh }
const syncTimerRef = useRef(null);
const lastSnapshotRef = useRef('');
const lastAnglesRef = useRef({ azimuth: null, polar: null, distance: null });
const hasSyncedInitialSnapshotRef = useRef(false);
// Decode base64 to typed arrays
const decode = useCallback((b64, ArrayType) => {
@@ -20,6 +24,52 @@ export default function SurfaceView({ meshData }) {
return new ArrayType(bytes.buffer);
}, []);
const syncViewportState = useCallback((scheduleRun = false) => {
const state = threeRef.current;
if (!state || !nodeId || !onRuntimeValuesChange) return;
const { renderer, controls } = state;
const azimuth = Number(controls.getAzimuthalAngle().toFixed(4));
const polar = Number(controls.getPolarAngle().toFixed(4));
const distance = Number(controls.getDistance().toFixed(4));
const snapshot = renderer.domElement.toDataURL('image/png');
const previous = lastAnglesRef.current;
const patch = {};
if (previous.azimuth !== azimuth) patch.camera_azimuth = azimuth;
if (previous.polar !== polar) patch.camera_polar = polar;
if (previous.distance !== distance) patch.camera_distance = distance;
if (snapshot !== lastSnapshotRef.current) patch.viewport_snapshot = snapshot;
if (Object.keys(patch).length > 0) {
onRuntimeValuesChange(nodeId, patch, { scheduleRun });
lastAnglesRef.current = { azimuth, polar, distance };
lastSnapshotRef.current = snapshot;
}
}, [nodeId, onRuntimeValuesChange]);
const scheduleViewportSync = useCallback((delay = 120, scheduleRun = false) => {
if (syncTimerRef.current) {
clearTimeout(syncTimerRef.current);
}
syncTimerRef.current = setTimeout(() => {
syncTimerRef.current = null;
syncViewportState(scheduleRun);
}, delay);
}, [syncViewportState]);
const applyCameraState = useCallback((azimuth, polar, distance) => {
const state = threeRef.current;
if (!state) return;
const { camera, controls } = state;
const target = controls.target.clone();
const spherical = new THREE.Spherical(
Math.max(0.3, Number.isFinite(distance) ? distance : 1.8),
THREE.MathUtils.clamp(Number.isFinite(polar) ? polar : 1.1, 0.01, Math.PI - 0.01),
Number.isFinite(azimuth) ? azimuth : 0.0,
);
const offset = new THREE.Vector3().setFromSpherical(spherical);
camera.position.copy(target).add(offset);
controls.update();
}, []);
// Initialize Three.js scene once
useEffect(() => {
const container = containerRef.current;
@@ -48,6 +98,8 @@ export default function SurfaceView({ meshData }) {
controls.dampingFactor = 0.1;
controls.minDistance = 0.3;
controls.maxDistance = 10;
const handleControlsEnd = () => scheduleViewportSync(0, true);
controls.addEventListener('end', handleControlsEnd);
// Lighting
const ambient = new THREE.AmbientLight(0xffffff, 0.4);
@@ -69,6 +121,11 @@ export default function SurfaceView({ meshData }) {
animate();
threeRef.current = { renderer, scene, camera, controls, mesh: null, animId };
applyCameraState(
Number(runtimeValues?.camera_azimuth ?? widgetValues?.camera_azimuth),
Number(runtimeValues?.camera_polar ?? widgetValues?.camera_polar),
Number(runtimeValues?.camera_distance ?? widgetValues?.camera_distance),
);
// Resize observer to maintain 1:1 aspect when node width changes
const ro = new ResizeObserver((entries) => {
@@ -86,6 +143,8 @@ export default function SurfaceView({ meshData }) {
return () => {
ro.disconnect();
cancelAnimationFrame(animId);
if (syncTimerRef.current) clearTimeout(syncTimerRef.current);
controls.removeEventListener('end', handleControlsEnd);
controls.dispose();
renderer.dispose();
if (container.contains(renderer.domElement)) {
@@ -93,18 +152,24 @@ export default function SurfaceView({ meshData }) {
}
threeRef.current = null;
};
}, []);
}, [applyCameraState, scheduleViewportSync]);
// Update mesh when data changes
useEffect(() => {
if (!threeRef.current || !meshData) return;
const { scene, camera, controls } = threeRef.current;
const { width: nx, height: ny, z_data, colors, z_min, z_max, z_scale, x_range, y_range } = meshData;
const {
width: nx, height: ny, z_data, colors, z_min, z_max, z_scale,
positions, indices, vertex_colors, camera_azimuth, camera_polar, camera_distance,
} = meshData;
// Decode arrays
const zArr = decode(z_data, Float32Array);
const colArr = decode(colors, Uint8Array);
const zArr = z_data ? decode(z_data, Float32Array) : null;
const colArr = colors ? decode(colors, Uint8Array) : null;
const posArr = positions ? decode(positions, Float32Array) : null;
const indexArr = indices ? decode(indices, Uint32Array) : null;
const vertexColorArr = vertex_colors ? decode(vertex_colors, Uint8Array) : null;
// Remove old mesh
if (threeRef.current.mesh) {
@@ -115,45 +180,51 @@ export default function SurfaceView({ meshData }) {
// Build geometry
const geom = new THREE.BufferGeometry();
const positions = new Float32Array(nx * ny * 3);
const colorAttr = new Float32Array(nx * ny * 3);
const positionsArray = posArr ?? new Float32Array(nx * ny * 3);
const colorAttr = new Float32Array((vertexColorArr ? vertexColorArr.length : (nx * ny * 3)));
// Normalize coordinates to roughly [-0.5, 0.5] for good camera framing
const zRange = z_max - z_min || 1;
if (!posArr) {
const zRange = z_max - z_min || 1;
for (let iy = 0; iy < ny; iy++) {
for (let ix = 0; ix < nx; ix++) {
const idx = iy * nx + ix;
const px = ix / (nx - 1) - 0.5;
const py = iy / (ny - 1) - 0.5;
const pz = ((zArr[idx] - z_min) / zRange - 0.5) * z_scale;
for (let iy = 0; iy < ny; iy++) {
for (let ix = 0; ix < nx; ix++) {
const idx = iy * nx + ix;
const px = ix / (nx - 1) - 0.5; // [-0.5, 0.5]
const py = iy / (ny - 1) - 0.5;
const pz = ((zArr[idx] - z_min) / zRange - 0.5) * z_scale;
positions[idx * 3] = px;
positions[idx * 3 + 1] = pz; // height on Y axis
positions[idx * 3 + 2] = py;
colorAttr[idx * 3] = colArr[idx * 3] / 255;
colorAttr[idx * 3 + 1] = colArr[idx * 3 + 1] / 255;
colorAttr[idx * 3 + 2] = colArr[idx * 3 + 2] / 255;
positionsArray[idx * 3] = px;
positionsArray[idx * 3 + 1] = pz;
positionsArray[idx * 3 + 2] = py;
}
}
}
geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));
const sourceColors = vertexColorArr ?? colArr;
if (sourceColors) {
for (let i = 0; i < sourceColors.length; i += 1) {
colorAttr[i] = sourceColors[i] / 255;
}
}
geom.setAttribute('position', new THREE.BufferAttribute(positionsArray, 3));
geom.setAttribute('color', new THREE.BufferAttribute(colorAttr, 3));
// Build index (triangles from grid)
const indices = [];
for (let iy = 0; iy < ny - 1; iy++) {
for (let ix = 0; ix < nx - 1; ix++) {
const a = iy * nx + ix;
const b = a + 1;
const c = a + nx;
const d = c + 1;
indices.push(a, c, b);
indices.push(b, c, d);
if (indexArr) {
geom.setIndex(Array.from(indexArr));
} else {
const gridIndices = [];
for (let iy = 0; iy < ny - 1; iy++) {
for (let ix = 0; ix < nx - 1; ix++) {
const a = iy * nx + ix;
const b = a + 1;
const c = a + nx;
const d = c + 1;
gridIndices.push(a, c, b);
gridIndices.push(b, c, d);
}
}
geom.setIndex(gridIndices);
}
geom.setIndex(indices);
geom.computeVertexNormals();
const mat = new THREE.MeshPhongMaterial({
@@ -169,8 +240,16 @@ export default function SurfaceView({ meshData }) {
// Reset camera target to center of mesh
controls.target.set(0, 0, 0);
controls.update();
}, [meshData, decode]);
if (!hasSyncedInitialSnapshotRef.current) {
applyCameraState(
Number.isFinite(camera_azimuth) ? camera_azimuth : Number(runtimeValues?.camera_azimuth ?? widgetValues?.camera_azimuth),
Number.isFinite(camera_polar) ? camera_polar : Number(runtimeValues?.camera_polar ?? widgetValues?.camera_polar),
Number.isFinite(camera_distance) ? camera_distance : Number(runtimeValues?.camera_distance ?? widgetValues?.camera_distance),
);
hasSyncedInitialSnapshotRef.current = true;
}
scheduleViewportSync(0, false);
}, [meshData, decode, applyCameraState, runtimeValues, scheduleViewportSync, widgetValues]);
// Prevent scroll events from propagating to React Flow
const onWheel = useCallback((e) => {

9
frontend/src/constants.js
View File

@@ -2,8 +2,8 @@
export const DATA_TYPES = new Set([
'DATA_FIELD', 'IMAGE', 'LINE', 'MEASURE_TABLE', 'RECORD_TABLE', 'ANY_TABLE',
'COORD', 'STATS_SOURCE', 'CURSOR_SOURCE', 'VALUE_SOURCE', 'COLORMAP',
'SAVE_LAYER', 'FONT', 'FILE_PATH', 'DIRECTORY', 'COORDPAIR',
'COORD', 'STATS_SOURCE', 'CURSOR_SOURCE', 'VALUE_SOURCE', 'ANNOTATION_SOURCE', 'COLORMAP',
'SAVE_LAYER', 'SAVE_VALUE', 'MESH_MODEL', 'FONT', 'FILE_PATH', 'DIRECTORY', 'COORDPAIR',
]);
export const SOCKET_WIDGET_TYPES = new Set(['FLOAT', 'INT']);
@@ -22,8 +22,11 @@ export const TYPE_COLORS = {
STATS_SOURCE: '#c084fc',
CURSOR_SOURCE: '#a78bfa',
VALUE_SOURCE: '#60a5fa',
ANNOTATION_SOURCE: '#06b6d4',
COLORMAP: '#f472b6',
SAVE_LAYER: '#22c55e',
SAVE_VALUE: '#4ade80',
MESH_MODEL: '#14b8a6',
FONT: '#fb7185',
FILE_PATH: '#f59e0b',
DIRECTORY: '#f97316',
@@ -44,7 +47,9 @@ export const SOCKET_COMPATIBILITY = {
CURSOR_SOURCE: new Set(['DATA_FIELD', 'LINE']),
ANY_TABLE: new Set(['MEASURE_TABLE', 'RECORD_TABLE']),
VALUE_SOURCE: new Set(['FLOAT', 'MEASURE_TABLE']),
ANNOTATION_SOURCE: new Set(['DATA_FIELD', 'IMAGE']),
SAVE_LAYER: new Set(['DATA_FIELD', 'IMAGE']),
SAVE_VALUE: new Set(['DATA_FIELD', 'IMAGE', 'LINE', 'MEASURE_TABLE', 'RECORD_TABLE', 'MESH_MODEL', 'FLOAT']),
FLOAT: new Set(['INT']),
INT: new Set(['FLOAT']),
LINE: new Set(['COORDPAIR']),

7
frontend/src/executionGraph.js
View File

@@ -52,11 +52,12 @@ export function serializeExecutionGraph(nodes, edges, { excludeManualTrigger = f
for (const node of nodes) {
if (!runnableNodeIds.has(node.id)) continue;
const { className, definition, widgetValues } = node.data;
const { className, definition, widgetValues, runtimeValues } = node.data;
if (!definition) continue;
if (excludeManualTrigger && definition.manual_trigger) continue;
const inputs = {};
const valueBag = { ...(widgetValues || {}), ...(runtimeValues || {}) };
const allWidgets = {
...(definition.input.required || {}),
@@ -66,8 +67,8 @@ export function serializeExecutionGraph(nodes, edges, { excludeManualTrigger = f
const [type] = Array.isArray(spec) ? spec : [spec];
if (DATA_TYPES.has(type)) continue;
if (type === 'BUTTON') continue;
if (widgetValues[name] !== undefined) {
inputs[name] = widgetValues[name];
if (valueBag[name] !== undefined) {
inputs[name] = valueBag[name];
}
}

128
frontend/src/nodeClipboard.js Normal file
View File

@@ -0,0 +1,128 @@
export const NODE_CLIPBOARD_KIND = 'argonode/node-selection';
export const NODE_CLIPBOARD_MIME = 'application/x-argonode-node-selection';
function cloneValue(value) {
if (value == null) return value;
if (typeof structuredClone === 'function') {
try {
return structuredClone(value);
} catch {
// Fall through to JSON clone for simple plain data.
}
}
return JSON.parse(JSON.stringify(value));
}
function clonePlainObject(value) {
if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
return cloneValue(value) || {};
}
export function buildNodeClipboardPayload(nodes, edges) {
const selectedNodes = Array.isArray(nodes) ? nodes.filter((node) => node?.selected) : [];
if (selectedNodes.length === 0) return null;
const selectedIds = new Set(selectedNodes.map((node) => String(node.id)));
const internalEdges = Array.isArray(edges)
? edges.filter((edge) => selectedIds.has(String(edge.source)) && selectedIds.has(String(edge.target)))
: [];
return {
kind: NODE_CLIPBOARD_KIND,
version: 1,
nodes: selectedNodes.map((node) => ({
id: String(node.id),
type: node.type || 'custom',
position: {
x: Number(node.position?.x) || 0,
y: Number(node.position?.y) || 0,
},
dragHandle: node.dragHandle || '.drag-handle',
data: {
label: node.data?.label || node.data?.className || 'Node',
className: node.data?.className || '',
widgetValues: clonePlainObject(node.data?.widgetValues),
runtimeValues: clonePlainObject(node.data?.runtimeValues),
},
})),
edges: internalEdges.map((edge) => ({
source: String(edge.source),
sourceHandle: edge.sourceHandle,
target: String(edge.target),
targetHandle: edge.targetHandle,
...(edge.style ? { style: { ...edge.style } } : {}),
})),
};
}
export function parseNodeClipboardPayload(text) {
if (typeof text !== 'string' || !text.trim()) return null;
try {
const parsed = JSON.parse(text);
if (parsed?.kind !== NODE_CLIPBOARD_KIND) return null;
if (!Array.isArray(parsed.nodes) || !Array.isArray(parsed.edges)) return null;
return parsed;
} catch {
return null;
}
}
export function instantiateNodeClipboardPayload(payload, defs = {}, nextNodeId = 1, offset = { x: 40, y: 40 }) {
if (!payload || !Array.isArray(payload.nodes) || payload.nodes.length === 0) {
return { nodes: [], edges: [], nextNodeId };
}
const idMap = new Map();
let currentId = Number(nextNodeId) || 1;
const nodes = payload.nodes.map((node) => {
const newId = String(currentId++);
idMap.set(String(node.id), newId);
const className = node.data?.className || '';
const definition = className ? defs[className] || null : null;
return {
id: newId,
type: node.type || 'custom',
position: {
x: (Number(node.position?.x) || 0) + (Number(offset?.x) || 0),
y: (Number(node.position?.y) || 0) + (Number(offset?.y) || 0),
},
dragHandle: node.dragHandle || '.drag-handle',
selected: true,
data: {
label: node.data?.label || className || 'Node',
className,
widgetValues: clonePlainObject(node.data?.widgetValues),
runtimeValues: clonePlainObject(node.data?.runtimeValues),
definition,
previewImage: null,
tableRows: null,
meshData: null,
overlay: null,
scalarValue: null,
processingTimeMs: null,
warning: null,
},
};
});
const edges = payload.edges
.filter((edge) => idMap.has(String(edge.source)) && idMap.has(String(edge.target)))
.map((edge, index) => ({
id: `e${idMap.get(String(edge.source))}-${idMap.get(String(edge.target))}-${index}`,
source: idMap.get(String(edge.source)),
sourceHandle: edge.sourceHandle,
target: idMap.get(String(edge.target)),
targetHandle: edge.targetHandle,
selected: false,
...(edge.style ? { style: { ...edge.style } } : {}),
}));
return {
nodes,
edges,
nextNodeId: currentId,
};
}

10
frontend/src/pngMetadata.js
View File

@@ -3,7 +3,7 @@
*
* PNG files are composed of chunks: [4-byte length][4-byte type][data][4-byte CRC].
* We add an iTXt chunk with key "workflow" containing the JSON-serialised graph,
* inserted just before the IEND chunk. We still read legacy tEXt chunks.
* inserted just before the IEND chunk.
*/
// ── CRC32 (PNG uses CRC-32/ISO 3309) ────────────────────────────────
@@ -71,10 +71,6 @@ function parseTextChunk(type, chunkData) {
const keyword = decoder.decode(chunkData.subarray(0, keywordEnd));
if (keyword !== 'workflow') return null;
if (type === 'tEXt') {
return JSON.parse(decoder.decode(chunkData.subarray(keywordEnd + 1)));
}
if (type !== 'iTXt') return null;
const compressionFlagIdx = keywordEnd + 1;
@@ -139,7 +135,7 @@ export async function embedWorkflow(pngBlob, workflow) {
}
/**
* Extract the workflow object from a PNG blob's iTXt/tEXt chunks.
* Extract the workflow object from a PNG blob's iTXt chunks.
* Returns the parsed object, or null if no "workflow" key is found.
*/
export async function extractWorkflow(pngBlob) {
@@ -154,7 +150,7 @@ export async function extractWorkflow(pngBlob) {
if (pos + 12 + len > data.length) break;
const type = chunkType(data, pos);
if (type === 'tEXt' || type === 'iTXt') {
if (type === 'iTXt') {
const chunkData = data.subarray(pos + 8, pos + 8 + len);
const parsed = parseTextChunk(type, chunkData);
if (parsed) found = parsed;

60
frontend/src/workflowHydration.js
View File

@@ -1,25 +1,7 @@
function mergeDefinition(nodeData, defs) {
const savedData = nodeData || {};
const savedDefinition = savedData.definition && typeof savedData.definition === 'object'
? savedData.definition
: null;
const registryDefinition = savedData.className ? defs[savedData.className] : null;
const definition = registryDefinition || savedDefinition;
if (!definition) return null;
const output = Array.isArray(savedData.output)
? savedData.output
: (Array.isArray(savedDefinition?.output) ? savedDefinition.output : null);
const outputName = Array.isArray(savedData.output_name)
? savedData.output_name
: (Array.isArray(savedDefinition?.output_name) ? savedDefinition.output_name : null);
return {
...definition,
...(output ? { output } : {}),
...(outputName ? { output_name: outputName } : {}),
};
return registryDefinition || null;
}
function getSocketType(inputDef) {
@@ -28,12 +10,6 @@ function getSocketType(inputDef) {
return Array.isArray(type) ? type[0] : type;
}
function getInputType(definition, inputName) {
const required = definition?.input?.required || {};
const optional = definition?.input?.optional || {};
return getSocketType(required[inputName] ?? optional[inputName]);
}
function getInputEntries(definition) {
return [
...Object.entries(definition?.input?.required || {}),
@@ -54,31 +30,6 @@ function sanitizeWidgetValues(widgetValues, definition) {
return nextValues;
}
function remapLegacyHandle(handleId, kind, nodeData) {
if (typeof handleId !== 'string') return handleId;
const parts = handleId.split('::');
if (parts.length !== 3 || parts[2] !== 'TABLE') return handleId;
if (kind === 'source' && parts[0] === 'output') {
const outputSlot = Number.parseInt(parts[1], 10);
const outputType = nodeData?.definition?.output?.[outputSlot];
if (typeof outputType === 'string' && outputType !== 'TABLE') {
return `output::${outputSlot}::${outputType}`;
}
return handleId;
}
if (kind === 'target' && parts[0] === 'input') {
const inputType = getInputType(nodeData?.definition, parts[1]);
if (typeof inputType === 'string' && inputType !== 'TABLE') {
return `input::${parts[1]}::${inputType}`;
}
}
return handleId;
}
export function hydrateWorkflowState(data, defs = {}) {
const loadedNodes = Array.isArray(data?.nodes) ? data.nodes : [];
const loadedEdges = Array.isArray(data?.edges) ? data.edges : [];
@@ -94,6 +45,7 @@ export function hydrateWorkflowState(data, defs = {}) {
...node.data,
label: node.data?.label || node.data?.className || 'Node',
widgetValues: sanitizeWidgetValues(node.data?.widgetValues, definition),
runtimeValues: {},
definition,
previewImage: null,
tableRows: null,
@@ -104,13 +56,7 @@ export function hydrateWorkflowState(data, defs = {}) {
};
});
const nodeById = new Map(nodes.map((node) => [String(node.id), node.data]));
const edges = loadedEdges.map((edge) => ({
...edge,
sourceHandle: remapLegacyHandle(edge.sourceHandle, 'source', nodeById.get(String(edge.source))),
targetHandle: remapLegacyHandle(edge.targetHandle, 'target', nodeById.get(String(edge.target))),
}));
const edges = loadedEdges.map((edge) => ({ ...edge }));
const nextNodeId = Math.max(0, ...loadedNodes.map((node) => parseInt(node.id, 10) || 0)) + 1;