max/nodes
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add snapToGrid and showGrid settings

Browse Source
This commit is contained in:
max_richter
2024-04-22 16:52:52 +02:00
parent ad197db873
commit 1de0094c85
25 changed files with 290 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/src/lib/graph-interface/background/Background.frag
View File

@ -67,27 +67,27 @@ void main(void) {
//extra small grid
float m1 = grid(ux, uy, divisions*4.0, thickness*4.0) * 0.1;
float m2 = grid(ux, uy, divisions*16.0, thickness*16.0) * 0.03;
float m1 = grid(ux, uy, divisions*4.0, thickness*4.0) * 0.9;
float m2 = grid(ux, uy, divisions*16.0, thickness*16.0) * 0.5;
float xsmall = max(m1, m2);
float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.2;
float s3 = circle_grid(ux, uy, cz/1.6, 1.0) * 0.5;
xsmall = max(xsmall, s3);
// small grid
float c1 = grid(ux, uy, divisions, thickness) * 0.2;
float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.1;
float c1 = grid(ux, uy, divisions, thickness) * 0.6;
float c2 = grid(ux, uy, divisions*2.0, thickness) * 0.5;
float small = max(c1, c2);
float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.2;
float s1 = circle_grid(ux, uy, cz*10.0, 2.0) * 0.5;
small = max(small, s1);
// large grid
float c3 = grid(ux, uy, divisions/8.0, thickness/8.0) * 0.1;
float c4 = grid(ux, uy, divisions/2.0, thickness/4.0) * 0.05;
float c3 = grid(ux, uy, divisions/8.0, thickness/8.0) * 0.5;
float c4 = grid(ux, uy, divisions/2.0, thickness/4.0) * 0.4;
float large = max(c3, c4);
float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.2;
float s2 = circle_grid(ux, uy, cz*20.0, 1.0) * 0.4;
large = max(large, s2);
float c = mix(large, small, min(nz*2.0+0.05, 1.0));

2
app/src/lib/graph-interface/background/Background.svelte
View File

@ -53,7 +53,7 @@
}}
uniforms.camPos.value={cameraPosition}
uniforms.backgroundColor.value={$colors.layer0}
uniforms.lineColor.value={$colors.layer2}
uniforms.lineColor.value={$colors.outline}
uniforms.zoomLimits.value={[minZoom, maxZoom]}
uniforms.dimensions.value={[width, height]}
/>

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

@ -25,6 +25,11 @@
export let graph: GraphManager;
export let settings = {
snapToGrid: true,
showGrid: true,
};
let keymap =
getContext<ReturnType<typeof createKeyMap>>("keymap") || createKeyMap([]);
@ -320,8 +325,10 @@
if (event.ctrlKey) {
const snapLevel = getSnapLevel();
newX = snapToGrid(newX, 5 / snapLevel);
newY = snapToGrid(newY, 5 / snapLevel);
if (settings.snapToGrid) {
newX = snapToGrid(newX, 5 / snapLevel);
newY = snapToGrid(newY, 5 / snapLevel);
}
}
if (!node.tmp.isMoving) {
@ -667,15 +674,20 @@
if (activeNode?.tmp?.isMoving) {
activeNode.tmp = activeNode.tmp || {};
activeNode.tmp.isMoving = false;
const snapLevel = getSnapLevel();
activeNode.position[0] = snapToGrid(
activeNode?.tmp?.x ?? activeNode.position[0],
5 / snapLevel,
);
activeNode.position[1] = snapToGrid(
activeNode?.tmp?.y ?? activeNode.position[1],
5 / snapLevel,
);
if (settings.snapToGrid) {
const snapLevel = getSnapLevel();
activeNode.position[0] = snapToGrid(
activeNode?.tmp?.x ?? activeNode.position[0],
5 / snapLevel,
);
activeNode.position[1] = snapToGrid(
activeNode?.tmp?.y ?? activeNode.position[1],
5 / snapLevel,
);
} else {
activeNode.position[0] = activeNode?.tmp?.x ?? activeNode.position[0];
activeNode.position[1] = activeNode?.tmp?.y ?? activeNode.position[1];
}
const nodes = [
...[...($selectedNodes?.values() || [])].map((id) => graph.getNode(id)),
] as NodeType[];
@ -796,11 +808,9 @@
const wrapper = createWasmWrapper(buffer);
const definition = wrapper.get_definition();
const res = NodeDefinitionSchema.parse(definition);
console.log(wrapper, res);
}
};
reader.readAsArrayBuffer(files[0]);
console.log({ files });
}
}
@ -858,7 +868,9 @@
<Canvas shadows={false} renderMode="on-demand" colorManagementEnabled={false}>
<Camera bind:camera position={cameraPosition} />
<Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
{#if settings?.showGrid !== false}
<Background {cameraPosition} {maxZoom} {minZoom} {width} {height} />
{/if}
{#if boxSelection && mouseDown}
<BoxSelection

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

@ -18,6 +18,9 @@
export const keymap = createKeyMap([]);
setContext("keymap", keymap);
export let showGrid = false;
export let snapToGrid = false;
const updateSettings = debounce((s) => {
manager.setSettings(s);
}, 200);
@ -43,4 +46,4 @@
const dispatch = createEventDispatcher();
</script>
<GraphEl graph={manager} />
<GraphEl graph={manager} settings={{ showGrid, snapToGrid }} />

17
app/src/lib/runtime-executor.ts
View File

@ -1,5 +1,5 @@
import type { Graph, NodeRegistry, NodeDefinition, RuntimeExecutor } from "@nodes/types";
import { fastHash, concat_encoded, encodeFloat, encode } from "@nodes/utils"
import { fastHash, concatEncodedArrays, encodeFloat, encodeNestedArray, decodeNestedArray } from "@nodes/utils"
export class MemoryRuntimeExecutor implements RuntimeExecutor {
@ -109,7 +109,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
const sortedNodes = nodes.sort((a, b) => (b.tmp?.depth || 0) - (a.tmp?.depth || 0));
// here we store the intermediate results of the nodes
const results: Record<string, string | boolean | number> = {};
const results: Record<string, Int32Array> = {};
const runSeed = settings["randomSeed"] === true ? Math.floor(Math.random() * 100000000) : 5120983;
@ -192,7 +192,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
}
if (Array.isArray(value)) {
return encode(value);
return encodeNestedArray(value);
}
return value;
@ -204,10 +204,14 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
// console.log(`${a2 - a1}ms TRANSFORMED_INPUTS`);
const _inputs = concat_encoded(transformed_inputs);
const encoded_inputs = concatEncodedArrays(transformed_inputs);
const a3 = performance.now();
// console.log(`executing ${node_type.id || node.id}`, _inputs);
results[node.id] = node_type.execute(_inputs) as number;
console.groupCollapsed(`executing ${node_type.id || node.id}`);
console.log(`Inputs:`, transformed_inputs);
console.log(`Encoded Inputs:`, encoded_inputs);
results[node.id] = node_type.execute(encoded_inputs);
console.log("Result:", decodeNestedArray(results[node.id]));
console.groupEnd();
const duration = performance.now() - a3;
if (duration > 5) {
this.cache[cacheKey] = { eol: Date.now() + 10_000, value: results[node.id] };
@ -217,6 +221,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
const a4 = performance.now();
// console.log(`${a4 - a0}ms e2e duration`);
} catch (e) {
console.groupEnd();
console.error(`Error executing node ${node_type.id || node.id}`, e);
}

13
app/src/lib/settings/app-settings.ts
View File

@ -1,9 +1,10 @@
import localStore from "$lib/helpers/localStore";
import { label } from "three/examples/jsm/nodes/Nodes.js";
export const AppSettings = localStore("node-settings", {
theme: 0,
showGrid: true,
showNodeGrid: true,
snapToGrid: true,
wireframes: false,
showIndices: false,
});
@ -33,6 +34,16 @@ export const AppSettingTypes = {
label: "Show Grid",
value: true,
},
nodeInterface: {
showNodeGrid: {
type: "boolean",
value: true
},
snapToGrid: {
type: "boolean",
value: true
}
},
stressTest: {
amount: {
type: "integer",