max/nodarium
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 5 Wiki Activity

feat: improve planty ux

Browse Source
This commit is contained in:
max_richter
2026-04-20 21:23:55 +02:00
parent 7ebb1297ac
commit 58d39cd101
12 changed files with 141 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/src/lib/graph-interface/graph-state.svelte.ts
View File

@@ -1,3 +1,4 @@
import { animate, lerp } from '$lib/helpers';
import type { NodeInstance, Socket } from '@nodarium/types';
import { getContext, setContext } from 'svelte';
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
@@ -124,6 +125,9 @@ export class GraphState {
activeNodeId = $state(-1);
selectedNodes = new SvelteSet<number>();
activeSocket = $state<Socket | null>(null);
safePadding = $state<{ left?: number; right?: number; bottom?: number; top?: number } | null>(
null
);
hoveredSocket = $state<Socket | null>(null);
possibleSockets = $state<Socket[]>([]);
possibleSocketIds = $derived(
@@ -236,6 +240,37 @@ export class GraphState {
};
}
centerNode(node?: NodeInstance) {
const average = [0, 0, 4];
if (node) {
average[0] = node.position[0] + (this.safePadding?.right || 0) / 10;
average[1] = node.position[1];
average[2] = 10;
} else {
for (const node of this.graph.nodes.values()) {
average[0] += node.position[0];
average[1] += node.position[1];
}
average[0] = (average[0] / this.graph.nodes.size)
+ (this.safePadding?.right || 0) / (average[2] * 2);
average[1] /= this.graph.nodes.size;
}
const camX = this.cameraPosition[0];
const camY = this.cameraPosition[1];
const camZ = this.cameraPosition[2];
const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
const easeZoom = (t: number) => t * t * (3 - 2 * t);
animate(500, (a: number) => {
this.cameraPosition[0] = lerp(camX, average[0], ease(a));
this.cameraPosition[1] = lerp(camY, average[1], ease(a));
this.cameraPosition[2] = lerp(camZ, average[2], easeZoom(a));
if (this.mouseDown) return false;
});
}
pasteNodes() {
if (!this.clipboard) return;

12
app/src/lib/graph-interface/graph/Graph.svelte
View File

@@ -19,10 +19,10 @@
const {
keymap,
addMenuPadding
safePadding
}: {
keymap: ReturnType<typeof createKeyMap>;
addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
safePadding?: { left?: number; right?: number; bottom?: number; top?: number };
} = $props();
const graph = getGraphManager();
@@ -172,10 +172,10 @@
{#if graphState.addMenuPosition}
<AddMenu
onnode={handleNodeCreation}
paddingTop={addMenuPadding?.top}
paddingRight={addMenuPadding?.right}
paddingBottom={addMenuPadding?.bottom}
paddingLeft={addMenuPadding?.left}
paddingTop={safePadding?.top}
paddingRight={safePadding?.right}
paddingBottom={safePadding?.bottom}
paddingLeft={safePadding?.left}
/>
{/if}

31
app/src/lib/graph-interface/graph/Wrapper.svelte
View File

@@ -18,7 +18,7 @@
showHelp?: boolean;
settingTypes?: Record<string, unknown>;
addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
safePadding?: { left?: number; right?: number; bottom?: number; top?: number };
onsave?: (save: Graph) => void;
onresult?: (result: unknown) => void;
@@ -27,7 +27,7 @@
let {
graph,
registry,
addMenuPadding,
safePadding,
settings = $bindable(),
activeNode = $bindable(),
backgroundType = $bindable('grid'),
@@ -44,29 +44,32 @@
export const manager = new GraphManager(registry);
setGraphManager(manager);
const graphState = new GraphState(manager);
export const state = new GraphState(manager);
$effect(() => {
graphState.backgroundType = backgroundType;
graphState.snapToGrid = snapToGrid;
graphState.showHelp = showHelp;
if (safePadding) {
state.safePadding = safePadding;
}
state.backgroundType = backgroundType;
state.snapToGrid = snapToGrid;
state.showHelp = showHelp;
});
setGraphState(graphState);
setGraphState(state);
setupKeymaps(keymap, manager, graphState);
setupKeymaps(keymap, manager, state);
$effect(() => {
if (graphState.activeNodeId !== -1) {
activeNode = manager.getNode(graphState.activeNodeId);
if (state.activeNodeId !== -1) {
activeNode = manager.getNode(state.activeNodeId);
} else if (activeNode) {
activeNode = undefined;
}
});
$effect(() => {
if (!graphState.addMenuPosition) {
graphState.edgeEndPosition = null;
graphState.activeSocket = null;
if (!state.addMenuPosition) {
state.edgeEndPosition = null;
state.activeSocket = null;
}
});
@@ -86,4 +89,4 @@
});
</script>
<GraphEl {keymap} {addMenuPadding} />
<GraphEl {keymap} {safePadding} />

23
app/src/lib/graph-interface/keymaps.ts
View File

@@ -67,28 +67,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
description: 'Center camera',
callback: () => {
if (!graphState.isBodyFocused()) return;
const average = [0, 0];
for (const node of graph.nodes.values()) {
average[0] += node.position[0];
average[1] += node.position[1];
}
average[0] = (average[0] / graph.nodes.size) + 10;
average[1] /= graph.nodes.size;
const camX = graphState.cameraPosition[0];
const camY = graphState.cameraPosition[1];
const camZ = graphState.cameraPosition[2];
const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t);
const easeZoom = (t: number) => t * t * (3 - 2 * t);
animate(500, (a: number) => {
graphState.cameraPosition[0] = lerp(camX, average[0], ease(a));
graphState.cameraPosition[1] = lerp(camY, average[1], ease(a));
graphState.cameraPosition[2] = lerp(camZ, 4, easeZoom(a));
if (graphState.mouseDown) return false;
});
graphState.centerNode(graph.getNode(graphState.activeNodeId));
}
});

4
app/src/lib/result-viewer/Viewer.svelte
View File

@@ -24,6 +24,10 @@
let geometryPool: ReturnType<typeof createGeometryPool>;
let instancePool: ReturnType<typeof createInstancedGeometryPool>;
export function invalidate() {
sceneComponent?.invalidate();
}
export function updateGeometries(inputs: Int32Array[], group: Group) {
geometryPool = geometryPool || createGeometryPool(group, material);
instancePool = instancePool || createInstancedGeometryPool(group, material);

27
app/src/lib/tutorial/tutorial-config.ts
View File

@@ -24,11 +24,10 @@ export const tutorialConfig: PlantyConfig = {
tour_canvas: {
position: 'bottom-left',
hook: 'setup-default',
action: 'setup-default',
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
'This is the **graph canvas**. Nodes connect together to build a plant — the 3D model updates automatically whenever you make a change.\nEach node does one specific job: grow stems, add noise, produce output.',
waitFor: 'click',
next: 'tour_viewer'
},
@@ -37,7 +36,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.cell:first-child', padding: 8 },
text:
'This is the **3D viewer** — the live preview of your plant.\nLeft-click to rotate · right-click to pan · scroll to zoom.',
waitFor: 'click',
next: 'try_params'
},
@@ -46,16 +44,14 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
'Click a node to select it. Its settings appear **directly on the node** — try changing a value and watch the plant update.\nThe sidebar shows extra hidden settings for the selected node.',
waitFor: 'click',
next: 'start_building'
},
start_building: {
position: 'center',
hook: 'load-tutorial-template',
action: 'load-tutorial-template',
text:
"Now let's build your own plant from scratch!\nI've loaded a blank project — it only has an **Output** node. Your goal: connect nodes to make a plant.",
waitFor: 'click',
next: 'add_stem_node'
},
@@ -64,7 +60,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
"Open the **Add Menu** with **Shift+A** or **right-click** on the canvas.\nAdd a **Stem** node, then connect its output socket to the Output node's input.",
waitFor: 'click',
next: 'add_noise_node'
},
@@ -73,7 +68,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
'Add a **Noise** node the same way.\nConnect: Stem → Noise input, then Noise output → Output.\nThis makes the stems grow in organic, curved shapes.',
waitFor: 'click',
next: 'add_random_node'
},
@@ -82,7 +76,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
"Let's add some randomness! Add a **Random** node and connect its output to the **thickness** or **length** input of the Stem node.\nThe default min/max range is small — **Ctrl+drag** any number field to exceed its normal limits.",
waitFor: 'click',
next: 'prompt_regenerate'
},
@@ -91,7 +84,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
'Now press **R** to regenerate. Each press gives the Random node a new value — your plant changes every run!',
waitFor: 'click',
next: 'tour_sidebar'
},
@@ -100,16 +92,13 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.tabs', padding: 4 },
text:
'The **sidebar** holds all your tools:\n⚙️ Settings · ⌨️ Shortcuts · 📦 Export · 📁 Projects · 📊 Graph Settings\nEnable **Advanced Mode** in Settings to unlock performance and benchmark panels.',
waitFor: 'click',
next: 'save_project'
},
save_project: {
position: 'right',
highlight: { selector: '.tabs', padding: 4 },
text:
'Your work is saved in the **Projects panel** — rename it, create new projects, or switch between them anytime.',
waitFor: 'click',
next: 'congrats'
},
@@ -129,7 +118,7 @@ export const tutorialConfig: PlantyConfig = {
tour_canvas_nerd: {
position: 'bottom-left',
hook: 'setup-default',
action: 'setup-default',
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
"The **graph canvas** renders a directed acyclic graph. Each node is an individual **WASM module** executed in isolation — inputs in, output out. The 3D model updates automatically on every change.\nI've loaded a starter graph so you can see it in action.",
@@ -144,7 +133,6 @@ export const tutorialConfig: PlantyConfig = {
}
}
],
waitFor: 'click',
next: 'tour_viewer_nerd'
},
@@ -153,15 +141,13 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.cell:first-child', padding: 8 },
text:
'The **3D viewer** uses `@threlte/core` (Svelte + Three.js). Mesh data streams from WASM execution results. OrbitControls: left-drag rotate, right-drag pan, scroll zoom.',
waitFor: 'click',
next: 'tour_runtime_nerd'
},
tour_runtime_nerd: {
position: 'right',
position: 'bottom-right',
text:
'By default, nodes execute in a **WebWorker** for better performance. You can switch to main-thread execution by disabling **Debug → Execute in WebWorker** in Settings.\nEnable **Advanced Mode** to unlock the Performance and Benchmark panels.',
waitFor: 'click',
next: 'start_building'
},
@@ -171,7 +157,6 @@ export const tutorialConfig: PlantyConfig = {
position: 'bottom-right',
text:
'Node sockets are **type-checked**. The coloured dots tell you what kind of data flows through:\n🔵 `number` · 🟢 `vec3` · 🟣 `shape` · ⚪ `*` (wildcard)',
waitFor: 'click',
next: 'connections_rules'
},
@@ -191,7 +176,6 @@ export const tutorialConfig: PlantyConfig = {
highlight: { selector: '.graph-wrapper', padding: 12 },
text:
'Click any node to select it. Basic settings are shown **on the node itself**.\nThe sidebar under *Graph Settings → Active Node* shows the full list:\n**Number** — drag or type · **Vec3** — X/Y/Z · **Select** — dropdown · **Color** — picker',
waitFor: 'click',
next: 'params_tip'
},
@@ -210,7 +194,6 @@ export const tutorialConfig: PlantyConfig = {
position: 'bottom-right',
text:
'Add a **Debug node** from the Add Menu (Shift+A or right-click). It accepts `*` wildcard inputs — connect any socket to inspect the data flowing through.\nEnable **Advanced Mode** in Settings to also see Performance and Graph Source panels.',
waitFor: 'click',
next: 'debug_done'
},
@@ -228,7 +211,6 @@ export const tutorialConfig: PlantyConfig = {
position: 'bottom-right',
text:
'**Essential shortcuts:**\n`R` — Regenerate\n`Shift+A` / right-click — Add node\n`f` — Smart-connect selected nodes\n`.` — Center camera\n`Ctrl+Z` / `Ctrl+Y` — Undo / Redo\n`Delete` — Remove selected · `Ctrl+Delete` — Remove and restore edges',
waitFor: 'click',
next: 'shortcuts_done'
},
@@ -247,7 +229,6 @@ export const tutorialConfig: PlantyConfig = {
position: 'right',
text:
'Export your 3D model from the **📦 Export** panel:\n**GLB** — standard for 3D apps (Blender, Three.js)\n**OBJ** — legacy format · **STL** — 3D printing · **PNG** — screenshot',
waitFor: 'click',
next: 'congrats'
},

48
app/src/routes/+page.svelte
View File

@@ -168,7 +168,7 @@
<Planty
bind:this={planty}
config={tutorialConfig}
hooks={{
actions={{
'setup-default': () => {
const ts = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
pm.handleCreateProject(
@@ -183,6 +183,48 @@
g.meta = { ...pm.graph.meta };
pm.graph = g;
pm.saveGraph(g);
graphInterface.state.centerNode(graphInterface.manager.getAllNodes()[0]);
}
}}
hooks={{
'action:add_stem_node': (cb) => {
const unsub = manager.on('save', () => {
const allNodes = graphInterface.manager.getAllNodes();
const stemNode = allNodes.find(n => n.type === 'max/plantarium/stem');
if (stemNode && graphInterface.manager.edges.length) {
unsub();
(cb as () => void)();
}
});
},
'action:add_noise_node': (cb) => {
const unsub = manager.on('save', () => {
const allNodes = graphInterface.manager.getAllNodes();
const noiseNode = allNodes.find(n => n.type === 'max/plantarium/noise');
if (noiseNode && graphInterface.manager.edges.length > 1) {
unsub();
(cb as () => void)();
}
});
},
'action:add_random_node': (cb) => {
const unsub = manager.on('save', () => {
const allNodes = graphInterface.manager.getAllNodes();
const noiseNode = allNodes.find(n => n.type === 'max/plantarium/random');
if (noiseNode && graphInterface.manager.edges.length > 2) {
unsub();
(cb as () => void)();
}
});
},
'action:prompt_regenerate': (cb) => {
function handleKeydown(e: KeyboardEvent) {
if (e.key === 'r') {
window.removeEventListener('keydown', handleKeydown);
(cb as () => void)();
}
}
window.addEventListener('keydown', handleKeydown);
},
'before:save_project': () => panelState.setActivePanel('projects'),
'before:export_tour': () => panelState.setActivePanel('exports'),
@@ -210,7 +252,7 @@
graph={pm.graph}
bind:this={graphInterface}
registry={nodeRegistry}
addMenuPadding={{ right: sidebarOpen ? 330 : undefined }}
safePadding={{ right: sidebarOpen ? 330 : undefined }}
backgroundType={appSettings.value.nodeInterface.backgroundType}
snapToGrid={appSettings.value.nodeInterface.snapToGrid}
bind:activeNode
@@ -245,7 +287,7 @@
<Panel id="exports" title="Exporter" icon="i-[tabler--package-export]">
<ExportSettings {scene} />
</Panel>
{#if false}
{#if 0 > 1}
<Panel
id="node-store"
title="Node Store"