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

work on canvas feel

Browse Source
This commit is contained in:
matei jordache
2026-03-27 17:06:54 -07:00
parent 558046e7aa
commit 62d7537555
8 changed files with 405 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
backend/nodes/view_3d.py
View File

@@ -37,19 +37,42 @@ def _grid_triangle_indices(nx: int, ny: int, *, reverse: bool = False) -> list[l
return faces
def _build_mesh_model(z: np.ndarray, colors_u8: np.ndarray, z_scale: float, make_solid: bool) -> MeshModel:
def _surface_extent_scale(xreal: float, yreal: float, nx: int, ny: int) -> tuple[float, float]:
def _resolve_span(value: float, fallback_points: int) -> float:
try:
span = abs(float(value))
except (TypeError, ValueError):
span = 0.0
if not np.isfinite(span) or span <= 0.0:
span = float(max(fallback_points - 1, 1))
return span
x_span = _resolve_span(xreal, nx)
y_span = _resolve_span(yreal, ny)
max_span = max(x_span, y_span, 1.0)
return (x_span / max_span, y_span / max_span)
def _build_mesh_model(
z: np.ndarray,
colors_u8: np.ndarray,
z_scale: float,
make_solid: bool,
lateral_extent: tuple[float, float] = (1.0, 1.0),
) -> MeshModel:
ny, nx = z.shape
zmin = float(z.min())
zmax = float(z.max())
z_range = zmax - zmin if zmax != zmin else 1.0
x_extent, y_extent = lateral_extent
top_vertices = np.empty((nx * ny, 3), dtype=np.float32)
top_colors = colors_u8.reshape(-1, 3).astype(np.uint8)
for iy in range(ny):
py = iy / max(ny - 1, 1) - 0.5
py = (iy / max(ny - 1, 1) - 0.5) * y_extent
for ix in range(nx):
idx = iy * nx + ix
px = ix / max(nx - 1, 1) - 0.5
px = (ix / max(nx - 1, 1) - 0.5) * x_extent
pz = ((float(z[iy, ix]) - zmin) / z_range - 0.5) * z_scale
top_vertices[idx] = (px, pz, py)
@@ -99,6 +122,9 @@ class View3D:
"camera_azimuth": ("FLOAT", {"default": 0.0, "hidden": True}),
"camera_polar": ("FLOAT", {"default": 1.1, "hidden": True}),
"camera_distance": ("FLOAT", {"default": 1.8, "hidden": True}),
"camera_target_x": ("FLOAT", {"default": 0.0, "hidden": True}),
"camera_target_y": ("FLOAT", {"default": 0.0, "hidden": True}),
"camera_target_z": ("FLOAT", {"default": 0.0, "hidden": True}),
"viewport_snapshot": ("STRING", {"default": "", "hidden": True}),
},
"optional": {
@@ -115,7 +141,7 @@ class View3D:
DESCRIPTION = (
"Interactive 3D surface view of a DATA_FIELD. "
"Use the mesh input for geometry and optionally a second map input for coloring. "
"Drag to rotate, scroll to zoom. z_scale exaggerates height."
"Drag to rotate, middle-drag to pan, and right-drag or scroll to zoom. z_scale exaggerates height."
)
_broadcast_mesh_fn = None
@@ -125,6 +151,7 @@ class View3D:
self, field: DataField,
colormap: str, z_scale: float, resolution: int, make_solid: bool = False,
camera_azimuth: float = 0.0, camera_polar: float = 1.1, camera_distance: float = 1.8,
camera_target_x: float = 0.0, camera_target_y: float = 0.0, camera_target_z: float = 0.0,
viewport_snapshot: str = "",
map_field: DataField | None = None, colormap_map=None,
) -> tuple:
@@ -183,7 +210,14 @@ class View3D:
default="gray",
)
colors_u8 = colormap_to_uint8(z_norm, resolved_colormap)
mesh_model = _build_mesh_model(z, colors_u8, float(z_scale * 0.1), bool(make_solid))
surface_extent = _surface_extent_scale(field.xreal, field.yreal, nx, ny)
mesh_model = _build_mesh_model(
z,
colors_u8,
float(z_scale * 0.1),
bool(make_solid),
lateral_extent=surface_extent,
)
z_b64 = base64.b64encode(z.tobytes()).decode()
colors_b64 = base64.b64encode(colors_u8.tobytes()).decode()
@@ -208,8 +242,13 @@ class View3D:
"camera_azimuth": float(camera_azimuth),
"camera_polar": float(camera_polar),
"camera_distance": float(camera_distance),
"camera_target_x": float(camera_target_x),
"camera_target_y": float(camera_target_y),
"camera_target_z": float(camera_target_z),
"x_range": [float(field.xoff), float(field.xoff + field.xreal)],
"y_range": [float(field.yoff), float(field.yoff + field.yreal)],
"surface_extent_x": float(surface_extent[0]),
"surface_extent_y": float(surface_extent[1]),
}
emit_mesh(mesh_data)
@@ -225,6 +264,9 @@ class View3D:
"azimuth": float(camera_azimuth),
"polar": float(camera_polar),
"distance": float(camera_distance),
"target_x": float(camera_target_x),
"target_y": float(camera_target_y),
"target_z": float(camera_target_z),
},
},
)

127
frontend/src/App.jsx
View File

@@ -43,6 +43,10 @@ const GROUP_HEADER_HEIGHT = 36;
const GROUP_WORKSPACE_INSET = 12;
const GROUP_MIN_WIDTH = 260;
const GROUP_MIN_HEIGHT = 180;
const CANVAS_MIN_ZOOM = 0.2;
const CANVAS_MAX_ZOOM = 4;
const CANVAS_RIGHT_DRAG_ZOOM_SENSITIVITY = 0.0065;
const CANVAS_RIGHT_DRAG_ZOOM_THRESHOLD = 5;
// ── Handle ID helpers ─────────────────────────────────────────────────
@@ -380,6 +384,19 @@ function isEditableTarget(target) {
return target.closest('[contenteditable="true"]') !== null;
}
function clampNumber(value, min, max) {
return Math.min(max, Math.max(min, value));
}
function canStartCanvasRightDragZoom(target) {
if (!target || !(target instanceof Element)) return false;
if (isEditableTarget(target)) return false;
if (target.closest('.context-menu, .react-flow__node, .react-flow__edge, .react-flow__controls, .react-flow__minimap, .surface-view-container')) {
return false;
}
return target.closest('.react-flow__pane, .react-flow__background') !== 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;
@@ -791,7 +808,9 @@ function Flow() {
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const [status, setStatus] = useState({ text: 'Connecting…', level: 'info' });
const [contextMenu, setContextMenu] = useState(null);
const [isCanvasRightZooming, setIsCanvasRightZooming] = useState(false);
const flowContainerRef = useRef(null);
const nodeDefsRef = useRef({});
const nextIdRef = useRef(1);
const autoRunTimer = useRef(null);
@@ -802,6 +821,8 @@ function Flow() {
const duplicateDragRef = useRef(null);
const dragStateRef = useRef(null);
const activeDragNodeIdRef = useRef(null);
const canvasRightZoomRef = useRef(null);
const suppressPaneContextMenuUntilRef = useRef(0);
const reactFlow = useReactFlow();
// ── WebSocket ───────────────────────────────────────────────────────
@@ -2597,9 +2618,106 @@ function Flow() {
const onPaneContextMenu = useCallback((event) => {
event.preventDefault();
if (performance.now() < suppressPaneContextMenuUntilRef.current) {
suppressPaneContextMenuUntilRef.current = 0;
return;
}
setContextMenu({ x: event.clientX, y: event.clientY });
}, []);
const onFlowContainerPointerDown = useCallback((event) => {
if (event.button !== 2) return;
if (!canStartCanvasRightDragZoom(event.target)) return;
event.preventDefault();
event.stopPropagation();
setContextMenu(null);
const viewport = reactFlow.getViewport();
canvasRightZoomRef.current = {
pointerId: event.pointerId,
startY: event.clientY,
startZoom: Number(viewport.zoom) || 1,
moved: false,
};
setIsCanvasRightZooming(true);
try {
event.currentTarget.setPointerCapture?.(event.pointerId);
} catch {
// Ignore capture failures; global listeners still complete the interaction.
}
}, [reactFlow]);
const onFlowContainerContextMenuCapture = useCallback((event) => {
if (canvasRightZoomRef.current?.moved || performance.now() < suppressPaneContextMenuUntilRef.current) {
event.preventDefault();
event.stopPropagation();
}
}, []);
useEffect(() => {
const handlePointerMove = (event) => {
const zoomState = canvasRightZoomRef.current;
if (!zoomState || event.pointerId !== zoomState.pointerId) return;
const deltaY = event.clientY - zoomState.startY;
if (Math.abs(deltaY) < CANVAS_RIGHT_DRAG_ZOOM_THRESHOLD) return;
event.preventDefault();
zoomState.moved = true;
const container = flowContainerRef.current;
if (!container) return;
const bounds = container.getBoundingClientRect();
const localX = event.clientX - bounds.left;
const localY = event.clientY - bounds.top;
const currentViewport = reactFlow.getViewport();
const flowX = (localX - currentViewport.x) / currentViewport.zoom;
const flowY = (localY - currentViewport.y) / currentViewport.zoom;
const nextZoom = clampNumber(
zoomState.startZoom * Math.exp(-deltaY * CANVAS_RIGHT_DRAG_ZOOM_SENSITIVITY),
CANVAS_MIN_ZOOM,
CANVAS_MAX_ZOOM,
);
reactFlow.setViewport({
x: localX - (flowX * nextZoom),
y: localY - (flowY * nextZoom),
zoom: nextZoom,
}, { duration: 0 });
};
const finishPointerInteraction = (event) => {
const zoomState = canvasRightZoomRef.current;
if (!zoomState || event.pointerId !== zoomState.pointerId) return;
if (zoomState.moved) {
suppressPaneContextMenuUntilRef.current = performance.now() + 250;
}
canvasRightZoomRef.current = null;
setIsCanvasRightZooming(false);
const container = flowContainerRef.current;
if (container?.hasPointerCapture?.(event.pointerId)) {
try {
container.releasePointerCapture(event.pointerId);
} catch {
// Ignore capture release errors.
}
}
};
window.addEventListener('pointermove', handlePointerMove, true);
window.addEventListener('pointerup', finishPointerInteraction, true);
window.addEventListener('pointercancel', finishPointerInteraction, true);
return () => {
window.removeEventListener('pointermove', handlePointerMove, true);
window.removeEventListener('pointerup', finishPointerInteraction, true);
window.removeEventListener('pointercancel', finishPointerInteraction, true);
};
}, [reactFlow]);
useEffect(() => {
if (!contextMenu) return undefined;
@@ -2648,7 +2766,14 @@ function Flow() {
</div>
{/* React Flow canvas */}
<div className="flow-container" onDrop={onDropFile} onDragOver={onDragOver}>
<div
ref={flowContainerRef}
className={`flow-container${isCanvasRightZooming ? ' canvas-right-zooming' : ''}`}
onDrop={onDropFile}
onDragOver={onDragOver}
onPointerDownCapture={onFlowContainerPointerDown}
onContextMenuCapture={onFlowContainerContextMenuCapture}
>
<ReactFlow
nodes={nodes}
edges={edges}

72
frontend/src/CustomNode.jsx
View File

@@ -66,6 +66,7 @@ function GroupNode({ id, data }) {
),
);
const displayLabel = String(data.label || 'group');
const labelFieldSize = Math.max(2, Math.min(40, String(draftLabel || displayLabel || 'group').length));
useEffect(() => {
if (!isEditingLabel) {
@@ -114,40 +115,43 @@ function GroupNode({ id, data }) {
>
{collapsed ? '▸' : '▾'}
</button>
{isEditingLabel ? (
<input
ref={labelInputRef}
className="group-title-input nodrag"
type="text"
value={draftLabel}
onChange={(event) => setDraftLabel(event.target.value)}
onBlur={commitLabel}
onClick={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
commitLabel();
} else if (event.key === 'Escape') {
event.preventDefault();
cancelLabelEdit();
}
}}
/>
) : (
<button
type="button"
className="group-title-button nodrag"
title="rename group"
onClick={(event) => {
event.stopPropagation();
setDraftLabel(displayLabel);
setIsEditingLabel(true);
}}
>
{displayLabel}
</button>
)}
<div className="group-title-slot">
{isEditingLabel ? (
<input
ref={labelInputRef}
className="group-title-input nodrag"
type="text"
value={draftLabel}
size={labelFieldSize}
onChange={(event) => setDraftLabel(event.target.value)}
onBlur={commitLabel}
onClick={(event) => event.stopPropagation()}
onPointerDown={(event) => event.stopPropagation()}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
commitLabel();
} else if (event.key === 'Escape') {
event.preventDefault();
cancelLabelEdit();
}
}}
/>
) : (
<button
type="button"
className="group-title-button nodrag"
title="rename group"
onClick={(event) => {
event.stopPropagation();
setDraftLabel(displayLabel);
setIsEditingLabel(true);
}}
>
{displayLabel}
</button>
)}
</div>
<div className="group-node-actions">
<button
type="button"

1
frontend/src/LinePlotOverlay.jsx
View File

@@ -249,7 +249,6 @@ export default function LinePlotOverlay({
<>
<line x1={cursorA.x} y1={plotTop} x2={cursorA.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
<line x1={cursorB.x} y1={plotTop} x2={cursorB.x} y2={plotTop + plotHeight} stroke="var(--marker)" strokeWidth={cursorStroke} strokeDasharray="10 6" opacity="0.95" />
<line x1={cursorA.x} y1={cursorA.y} x2={cursorB.x} y2={cursorB.y} stroke="var(--accent-light)" strokeWidth={measureStroke} opacity="0.95" />
<circle
cx={cursorA.x}

177
frontend/src/SurfaceView.jsx
View File

@@ -2,6 +2,69 @@ import React, { useRef, useEffect, useCallback } from 'react';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const DEFAULT_CAMERA_STATE = {
azimuth: 0.0,
polar: 1.1,
distance: 1.8,
targetX: 0.0,
targetY: 0.0,
targetZ: 0.0,
};
function getFiniteNumber(...values) {
for (const value of values) {
const numeric = Number(value);
if (Number.isFinite(numeric)) {
return numeric;
}
}
return null;
}
function getCameraState(meshData, widgetValues, runtimeValues, fallbackTarget = null) {
return {
azimuth: getFiniteNumber(
runtimeValues?.camera_azimuth,
widgetValues?.camera_azimuth,
meshData?.camera_azimuth,
DEFAULT_CAMERA_STATE.azimuth,
),
polar: getFiniteNumber(
runtimeValues?.camera_polar,
widgetValues?.camera_polar,
meshData?.camera_polar,
DEFAULT_CAMERA_STATE.polar,
),
distance: getFiniteNumber(
runtimeValues?.camera_distance,
widgetValues?.camera_distance,
meshData?.camera_distance,
DEFAULT_CAMERA_STATE.distance,
),
targetX: getFiniteNumber(
runtimeValues?.camera_target_x,
widgetValues?.camera_target_x,
meshData?.camera_target_x,
fallbackTarget?.x,
DEFAULT_CAMERA_STATE.targetX,
),
targetY: getFiniteNumber(
runtimeValues?.camera_target_y,
widgetValues?.camera_target_y,
meshData?.camera_target_y,
fallbackTarget?.y,
DEFAULT_CAMERA_STATE.targetY,
),
targetZ: getFiniteNumber(
runtimeValues?.camera_target_z,
widgetValues?.camera_target_z,
meshData?.camera_target_z,
fallbackTarget?.z,
DEFAULT_CAMERA_STATE.targetZ,
),
};
}
/**
* Interactive 3D surface viewer using Three.js.
* Props:
@@ -13,8 +76,14 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
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);
const lastCameraStateRef = useRef({
azimuth: null,
polar: null,
distance: null,
targetX: null,
targetY: null,
targetZ: null,
});
// Decode base64 to typed arrays
const decode = useCallback((b64, ArrayType) => {
@@ -28,19 +97,27 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
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 cameraState = {
azimuth: Number(controls.getAzimuthalAngle().toFixed(4)),
polar: Number(controls.getPolarAngle().toFixed(4)),
distance: Number(controls.getDistance().toFixed(4)),
targetX: Number(controls.target.x.toFixed(4)),
targetY: Number(controls.target.y.toFixed(4)),
targetZ: Number(controls.target.z.toFixed(4)),
};
const snapshot = renderer.domElement.toDataURL('image/png');
const previous = lastAnglesRef.current;
const previous = lastCameraStateRef.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 (previous.azimuth !== cameraState.azimuth) patch.camera_azimuth = cameraState.azimuth;
if (previous.polar !== cameraState.polar) patch.camera_polar = cameraState.polar;
if (previous.distance !== cameraState.distance) patch.camera_distance = cameraState.distance;
if (previous.targetX !== cameraState.targetX) patch.camera_target_x = cameraState.targetX;
if (previous.targetY !== cameraState.targetY) patch.camera_target_y = cameraState.targetY;
if (previous.targetZ !== cameraState.targetZ) patch.camera_target_z = cameraState.targetZ;
if (snapshot !== lastSnapshotRef.current) patch.viewport_snapshot = snapshot;
if (Object.keys(patch).length > 0) {
onRuntimeValuesChange(nodeId, patch, { scheduleRun });
lastAnglesRef.current = { azimuth, polar, distance };
lastCameraStateRef.current = cameraState;
lastSnapshotRef.current = snapshot;
}
}, [nodeId, onRuntimeValuesChange]);
@@ -55,17 +132,26 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
}, delay);
}, [syncViewportState]);
const applyCameraState = useCallback((azimuth, polar, distance) => {
const applyCameraState = useCallback((cameraState = {}) => {
const state = threeRef.current;
if (!state) return;
const { camera, controls } = state;
const target = controls.target.clone();
const target = new THREE.Vector3(
getFiniteNumber(cameraState.targetX, controls.target.x, DEFAULT_CAMERA_STATE.targetX),
getFiniteNumber(cameraState.targetY, controls.target.y, DEFAULT_CAMERA_STATE.targetY),
getFiniteNumber(cameraState.targetZ, controls.target.z, DEFAULT_CAMERA_STATE.targetZ),
);
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,
Math.max(0.3, getFiniteNumber(cameraState.distance, DEFAULT_CAMERA_STATE.distance)),
THREE.MathUtils.clamp(
getFiniteNumber(cameraState.polar, DEFAULT_CAMERA_STATE.polar),
0.01,
Math.PI - 0.01,
),
getFiniteNumber(cameraState.azimuth, DEFAULT_CAMERA_STATE.azimuth),
);
const offset = new THREE.Vector3().setFromSpherical(spherical);
controls.target.copy(target);
camera.position.copy(target).add(offset);
controls.update();
}, []);
@@ -96,8 +182,26 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.1;
controls.enablePan = true;
controls.enableZoom = true;
controls.screenSpacePanning = true;
controls.panSpeed = 1.0;
controls.zoomSpeed = 2.2;
controls.minDistance = 0.3;
controls.maxDistance = 10;
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.PAN,
RIGHT: THREE.MOUSE.DOLLY,
};
controls.touches = {
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN,
};
if ('zoomToCursor' in controls) {
controls.zoomToCursor = true;
}
renderer.domElement.style.touchAction = 'none';
const handleControlsEnd = () => scheduleViewportSync(0, true);
controls.addEventListener('end', handleControlsEnd);
@@ -121,11 +225,7 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
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),
);
applyCameraState(getCameraState(meshData, widgetValues, runtimeValues));
// Resize observer to maintain 1:1 aspect when node width changes
const ro = new ResizeObserver((entries) => {
@@ -152,16 +252,17 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
}
threeRef.current = null;
};
}, [applyCameraState, scheduleViewportSync]);
}, [applyCameraState, meshData, runtimeValues, scheduleViewportSync, widgetValues]);
// Update mesh when data changes
useEffect(() => {
if (!threeRef.current || !meshData) return;
const { scene, camera, controls } = threeRef.current;
const { scene, controls } = threeRef.current;
const {
width: nx, height: ny, z_data, colors, z_min, z_max, z_scale,
positions, indices, vertex_colors, camera_azimuth, camera_polar, camera_distance,
positions, indices, vertex_colors,
surface_extent_x, surface_extent_y,
} = meshData;
// Decode arrays
@@ -182,14 +283,16 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
const geom = new THREE.BufferGeometry();
const positionsArray = posArr ?? new Float32Array(nx * ny * 3);
const colorAttr = new Float32Array((vertexColorArr ? vertexColorArr.length : (nx * ny * 3)));
const surfaceExtentX = getFiniteNumber(surface_extent_x, 1.0);
const surfaceExtentY = getFiniteNumber(surface_extent_y, 1.0);
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 px = (ix / Math.max(nx - 1, 1) - 0.5) * surfaceExtentX;
const py = (iy / Math.max(ny - 1, 1) - 0.5) * surfaceExtentY;
const pz = ((zArr[idx] - z_min) / zRange - 0.5) * z_scale;
positionsArray[idx * 3] = px;
@@ -238,21 +341,24 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
scene.add(mesh);
threeRef.current.mesh = mesh;
// Reset camera target to center of mesh
controls.target.set(0, 0, 0);
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;
}
const bounds = new THREE.Box3().setFromObject(mesh);
const center = bounds.isEmpty() ? new THREE.Vector3() : bounds.getCenter(new THREE.Vector3());
const size = bounds.isEmpty() ? new THREE.Vector3(1, 1, 1) : bounds.getSize(new THREE.Vector3());
const maxDimension = Math.max(size.x, size.y, size.z, 0.25);
controls.minDistance = Math.max(0.1, maxDimension * 0.35);
controls.maxDistance = Math.max(10, maxDimension * 14);
applyCameraState(getCameraState(meshData, widgetValues, runtimeValues, center));
scheduleViewportSync(0, false);
}, [meshData, decode, applyCameraState, runtimeValues, scheduleViewportSync, widgetValues]);
// Prevent scroll events from propagating to React Flow
const onWheel = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
}, []);
const onContextMenu = useCallback((e) => {
e.preventDefault();
e.stopPropagation();
}, []);
@@ -261,6 +367,7 @@ export default function SurfaceView({ meshData, nodeId, widgetValues, runtimeVal
ref={containerRef}
className="nodrag nowheel surface-view-container"
onWheelCapture={onWheel}
onContextMenu={onContextMenu}
/>
);
}

22
frontend/src/styles.css
View File

@@ -217,6 +217,11 @@ html, body, #root {
flex: 1;
position: relative;
}
.flow-container.canvas-right-zooming,
.flow-container.canvas-right-zooming .react-flow__pane,
.flow-container.canvas-right-zooming .react-flow__background {
cursor: ns-resize !important;
}
/* ── React Flow dark overrides ─────────────────────────────────────── */
.react-flow {
@@ -259,9 +264,18 @@ html, body, #root {
flex: 1;
}
.group-title-button {
flex: 1;
.group-title-slot {
display: flex;
align-items: center;
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
}
.group-title-button {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
padding: 0;
border: 0;
background: transparent;
@@ -276,8 +290,10 @@ html, body, #root {
}
.group-title-input {
flex: 1;
flex: 0 1 auto;
min-width: 0;
max-width: min(40ch, 100%);
width: auto;
height: 22px;
padding: 2px 6px;
border: 1px solid rgba(148, 163, 184, 0.45);

BIN
sessions/session-1m6nkxb93s9-mn9iuheh/input/APL_Figure4.ibw Normal file
View File

Binary file not shown.

49
tests/test_nodes.py
View File

@@ -2110,6 +2110,7 @@ def test_view3d():
print("=== Test: View3D ===")
from backend.nodes.view_3d import View3D
from backend.data_types import ImageData, MeshModel
from backend.execution_context import active_node, execution_callbacks
import base64
import io
from PIL import Image
@@ -2118,28 +2119,34 @@ def test_view3d():
field = make_field()
captured = []
View3D._broadcast_mesh_fn = lambda nid, mesh: captured.append(mesh)
View3D._current_node_id = "test"
mesh_callback = lambda nid, mesh: captured.append(mesh)
preview_image = Image.new("RGB", (12, 10), (255, 0, 0))
preview_buffer = io.BytesIO()
preview_image.save(preview_buffer, format="PNG")
viewport_snapshot = "data:image/png;base64," + base64.b64encode(preview_buffer.getvalue()).decode()
result = node.render(
field,
colormap="viridis",
z_scale=2.0,
resolution=64,
make_solid=False,
viewport_snapshot=viewport_snapshot,
)
with execution_callbacks(mesh=mesh_callback), active_node("test"):
result = node.render(
field,
colormap="viridis",
z_scale=2.0,
resolution=64,
make_solid=False,
camera_target_x=0.1,
camera_target_y=-0.2,
camera_target_z=0.3,
viewport_snapshot=viewport_snapshot,
)
assert len(result) == 2
assert isinstance(result[0], MeshModel)
assert isinstance(result[1], ImageData)
assert result[1].shape == (10, 12, 3)
assert np.all(result[1][0, 0] == np.array([255, 0, 0], dtype=np.uint8))
assert result[1].metadata["annotation_context"]["si_unit_xy"] == field.si_unit_xy
assert result[1].metadata["viewport_camera"]["target_x"] == 0.1
assert result[1].metadata["viewport_camera"]["target_y"] == -0.2
assert result[1].metadata["viewport_camera"]["target_z"] == 0.3
assert len(captured) == 1
mesh = captured[0]
@@ -2150,6 +2157,9 @@ def test_view3d():
assert mesh["z_scale"] == 0.2
assert mesh["width"] <= 64
assert mesh["height"] <= 64
assert mesh["camera_target_x"] == 0.1
assert mesh["camera_target_y"] == -0.2
assert mesh["camera_target_z"] == 0.3
# z_min < z_max for non-constant data
assert mesh["z_min"] < mesh["z_max"]
@@ -2163,7 +2173,8 @@ def test_view3d():
# High-res input should be downsampled
big_field = make_field(shape=(256, 256))
captured.clear()
node.render(big_field, colormap="hot", z_scale=1.0, resolution=64, make_solid=False)
with execution_callbacks(mesh=mesh_callback), active_node("test"):
node.render(big_field, colormap="hot", z_scale=1.0, resolution=64, make_solid=False)
assert captured[0]["width"] <= 64
assert captured[0]["height"] <= 64
@@ -2171,16 +2182,23 @@ def test_view3d():
mesh_field = make_field(data=np.zeros((64, 64), dtype=np.float64), xreal=2.0, yreal=3.0)
map_field = make_field(data=np.tile(np.linspace(0.0, 1.0, 64, dtype=np.float64), (64, 1)), xreal=2.0, yreal=3.0)
captured.clear()
mapped_result = node.render(mesh_field, map_field=map_field, colormap="viridis", z_scale=1.0, resolution=32, make_solid=False)
with execution_callbacks(mesh=mesh_callback), active_node("test"):
mapped_result = node.render(mesh_field, map_field=map_field, colormap="viridis", z_scale=1.0, resolution=32, make_solid=False)
mapped_mesh = captured[0]
assert mapped_mesh["x_range"] == [float(mesh_field.xoff), float(mesh_field.xoff + mesh_field.xreal)]
assert mapped_mesh["y_range"] == [float(mesh_field.yoff), float(mesh_field.yoff + mesh_field.yreal)]
assert np.isclose(mapped_mesh["surface_extent_x"] / mapped_mesh["surface_extent_y"], mesh_field.xreal / mesh_field.yreal)
mapped_z = np.frombuffer(base64.b64decode(mapped_mesh["z_data"]), dtype=np.float32)
assert np.allclose(mapped_z, 0.0)
mapped_colors = np.frombuffer(base64.b64decode(mapped_mesh["colors"]), dtype=np.uint8)
top_vertices = np.asarray(mapped_result[0].vertices, dtype=np.float32)
x_span = float(top_vertices[:, 0].max() - top_vertices[:, 0].min())
y_span = float(top_vertices[:, 2].max() - top_vertices[:, 2].min())
assert np.isclose(x_span / y_span, mesh_field.xreal / mesh_field.yreal)
captured.clear()
node.render(mesh_field, colormap="viridis", z_scale=1.0, resolution=32, make_solid=False)
with execution_callbacks(mesh=mesh_callback), active_node("test"):
node.render(mesh_field, colormap="viridis", z_scale=1.0, resolution=32, make_solid=False)
mesh_only = captured[0]
mesh_only_colors = np.frombuffer(base64.b64decode(mesh_only["colors"]), dtype=np.uint8)
assert not np.array_equal(mapped_colors, mesh_only_colors)
@@ -2189,7 +2207,8 @@ def test_view3d():
solid_mesh = mapped_result[0]
assert isinstance(solid_mesh, MeshModel)
captured.clear()
solid_result = node.render(mesh_field, colormap="viridis", z_scale=1.0, resolution=16, make_solid=True)
with execution_callbacks(mesh=mesh_callback), active_node("test"):
solid_result = node.render(mesh_field, colormap="viridis", z_scale=1.0, resolution=16, make_solid=True)
assert len(solid_result[0].vertices) > 16 * 16
assert len(solid_result[0].faces) > (15 * 15 * 2)
solid_payload = captured[0]
@@ -2197,8 +2216,6 @@ def test_view3d():
assert "positions" in solid_payload
assert "indices" in solid_payload
assert "vertex_colors" in solid_payload
View3D._broadcast_mesh_fn = None
print(" PASS\n")