diff --git a/Cargo.lock b/Cargo.lock index 170f91c..e018115 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -36,6 +36,12 @@ version = "3.16.0" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "79296716171880943b8470b5f8d03aa55eb2e645a4874bdbb28adb49162e012c" +[[package]] +name = "cfg-if" +version = "0.1.10" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "4785bdd1c96b2a846b2bd7cc02e86b6b3dbf14e7e53446c4f54c92a361040822" + [[package]] name = "cfg-if" version = "1.0.0" @@ -48,7 +54,7 @@ version = "0.1.7" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc" dependencies = [ - "cfg-if", + "cfg-if 1.0.0", "wasm-bindgen", ] @@ -86,6 +92,12 @@ dependencies = [ "wasm-bindgen", ] +[[package]] +name = "libc" +version = "0.2.153" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "9c198f91728a82281a64e1f4f9eeb25d82cb32a5de251c6bd1b5154d63a8e7bd" + [[package]] name = "log" version = "0.4.21" @@ -159,6 +171,12 @@ dependencies = [ "web-sys", ] +[[package]] +name = "memory_units" +version = "0.4.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "8452105ba047068f40ff7093dd1d9da90898e63dd61736462e9cdda6a90ad3c3" + [[package]] name = "once_cell" version = "1.19.0" @@ -173,12 +191,12 @@ dependencies = [ "glam", "macros", "serde", - "serde-wasm-bindgen", "serde_json", "utils", "wasm-bindgen", "wasm-bindgen-test", "web-sys", + "wee_alloc", ] [[package]] @@ -348,7 +366,7 @@ version = "0.2.92" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "4be2531df63900aeb2bca0daaaddec08491ee64ceecbee5076636a3b026795a8" dependencies = [ - "cfg-if", + "cfg-if 1.0.0", "wasm-bindgen-macro", ] @@ -373,7 +391,7 @@ version = "0.4.42" source = "registry+https://github.com/rust-lang/crates.io-index" checksum = "76bc14366121efc8dbb487ab05bcc9d346b3b5ec0eaa76e46594cabbe51762c0" dependencies = [ - "cfg-if", + "cfg-if 1.0.0", "js-sys", "wasm-bindgen", "web-sys", @@ -442,3 +460,37 @@ dependencies = [ "js-sys", "wasm-bindgen", ] + +[[package]] +name = "wee_alloc" +version = "0.4.5" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "dbb3b5a6b2bb17cb6ad44a2e68a43e8d2722c997da10e928665c72ec6c0a0b8e" +dependencies = [ + "cfg-if 0.1.10", + "libc", + "memory_units", + "winapi", +] + +[[package]] +name = "winapi" +version = "0.3.9" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "5c839a674fcd7a98952e593242ea400abe93992746761e38641405d28b00f419" +dependencies = [ + "winapi-i686-pc-windows-gnu", + "winapi-x86_64-pc-windows-gnu", +] + +[[package]] +name = "winapi-i686-pc-windows-gnu" +version = "0.4.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "ac3b87c63620426dd9b991e5ce0329eff545bccbbb34f3be09ff6fb6ab51b7b6" + +[[package]] +name = "winapi-x86_64-pc-windows-gnu" +version = "0.4.0" +source = "registry+https://github.com/rust-lang/crates.io-index" +checksum = "712e227841d057c1ee1cd2fb22fa7e5a5461ae8e48fa2ca79ec42cfc1931183f" diff --git a/app/src/app.html b/app/src/app.html index e106581..b2cc029 100644 --- a/app/src/app.html +++ b/app/src/app.html @@ -6,6 +6,18 @@ %sveltekit.head% + diff --git a/app/src/lib/graph-interface/background/Background.frag b/app/src/lib/graph-interface/background/Background.frag index c00ed9a..d7f621c 100644 --- a/app/src/lib/graph-interface/background/Background.frag +++ b/app/src/lib/graph-interface/background/Background.frag @@ -8,6 +8,7 @@ uniform vec2 dimensions; uniform vec3 camPos; uniform vec2 zoomLimits; uniform vec3 backgroundColor; +uniform vec3 lineColor; float grid(float x, float y, float divisions, float thickness) { x = fract(x * divisions); @@ -92,7 +93,7 @@ void main(void) { float c = mix(large, small, min(nz*2.0+0.05, 1.0)); c = mix(c, xsmall, max(min((nz-0.3)/0.7, 1.0), 0.0)); - vec3 color = mix(backgroundColor, vec3(1.0), c*0.5); + vec3 color = mix(backgroundColor, lineColor, c); gl_FragColor = vec4(color, 1.0); } diff --git a/app/src/lib/graph-interface/background/Background.svelte b/app/src/lib/graph-interface/background/Background.svelte index ddbe198..d7899d3 100644 --- a/app/src/lib/graph-interface/background/Background.svelte +++ b/app/src/lib/graph-interface/background/Background.svelte @@ -1,52 +1,61 @@ - - - - - + + + + + diff --git a/app/src/lib/graph-interface/edges/Edge.svelte b/app/src/lib/graph-interface/edges/Edge.svelte index 33f28f0..b804885 100644 --- a/app/src/lib/graph-interface/edges/Edge.svelte +++ b/app/src/lib/graph-interface/edges/Edge.svelte @@ -1,12 +1,9 @@ @@ -122,7 +117,7 @@ z-index: 1; opacity: calc((var(--cz) - 2.5) / 3.5); font-weight: 300; - --stroke: var(--background-color-lighter); + --stroke: var(--outline); --stroke-width: 2px; } diff --git a/app/src/lib/graph-interface/node/NodeHeader.svelte b/app/src/lib/graph-interface/node/NodeHeader.svelte index 61eb031..4d33471 100644 --- a/app/src/lib/graph-interface/node/NodeHeader.svelte +++ b/app/src/lib/graph-interface/node/NodeHeader.svelte @@ -1,129 +1,137 @@
-
- {node.type.split('/').pop()} -
-
- + {node.type.split("/").pop()} +
+
+ - - + > + +
diff --git a/app/src/lib/graph-interface/node/NodeParameter.svelte b/app/src/lib/graph-interface/node/NodeParameter.svelte index c92466a..95aea40 100644 --- a/app/src/lib/graph-interface/node/NodeParameter.svelte +++ b/app/src/lib/graph-interface/node/NodeParameter.svelte @@ -175,7 +175,7 @@ transition: d 0.3s ease, fill 0.3s ease; - fill: var(--background-color); + fill: var(--layer-1); stroke: var(--stroke); stroke-width: var(--stroke-width); d: var(--path); diff --git a/app/src/lib/grid/Cell.svelte b/app/src/lib/grid/Cell.svelte index 2aa66ac..7d91919 100644 --- a/app/src/lib/grid/Cell.svelte +++ b/app/src/lib/grid/Cell.svelte @@ -57,9 +57,20 @@ overflow: hidden; } .seperator { - background: white; + position: relative; cursor: ew-resize; height: 100%; - width: 5px; + width: 1px; + background: var(--outline); + } + .seperator::before { + content: ""; + cursor: ew-resize; + position: absolute; + pointer-events: all; + height: 100%; + width: 14px; + z-index: 2; + left: -7px; } diff --git a/app/src/lib/grid/Row.svelte b/app/src/lib/grid/Row.svelte index 07bc270..b4fbbbb 100644 --- a/app/src/lib/grid/Row.svelte +++ b/app/src/lib/grid/Row.svelte @@ -17,7 +17,7 @@ setContext("sizes", sizes); - $: cols = $sizes.map((size, i) => `${i > 0 ? "5px " : ""}` + size).join(" "); + $: cols = $sizes.map((size, i) => `${i > 0 ? "1px " : ""}` + size).join(" ");
diff --git a/app/src/lib/settings/Keymap.svelte b/app/src/lib/settings/Keymap.svelte new file mode 100644 index 0000000..e69de29 diff --git a/app/src/lib/settings/NestedSettings.svelte b/app/src/lib/settings/NestedSettings.svelte new file mode 100644 index 0000000..d0b57f3 --- /dev/null +++ b/app/src/lib/settings/NestedSettings.svelte @@ -0,0 +1,81 @@ + + +{#each keys as key} + {@const value = settings[key]} +
+ {#if isNodeInput(value)} +
+ + +
+ {:else} +
+ {key} +
+ +
+
+ {/if} +
+{/each} + + diff --git a/app/src/lib/settings/Panel.svelte b/app/src/lib/settings/Panel.svelte index 3935552..f295ec5 100644 --- a/app/src/lib/settings/Panel.svelte +++ b/app/src/lib/settings/Panel.svelte @@ -1,7 +1,7 @@ -
-

{setting.id}

- {#each keys as key} -
- {#if setting.definition && key in setting.definition} - - {/if} - -
- {/each} +
+

{setting.id}

+
+ + diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte index 53e3732..a09d98f 100644 --- a/app/src/lib/settings/Settings.svelte +++ b/app/src/lib/settings/Settings.svelte @@ -3,12 +3,14 @@ import type { Writable } from "svelte/store"; import SettingsComponent from "./Panel.svelte"; import localStore from "$lib/helpers/localStore"; + import type { SvelteComponent } from "svelte"; export let settings: Record< string, { icon: string; id: string; + component?: typeof SvelteComponent<{}, {}, {}>; definition: Record; settings: Writable>; } @@ -50,10 +52,17 @@ {/each}
-
+
{#if $activePanel && settings[$activePanel]} {#key $activePanel} - + {#if settings[$activePanel].component} + + {:else} + + {/if} {/key} {/if}
@@ -66,7 +75,6 @@ display: grid; grid-template-columns: 30px 1fr; height: 100%; - background: transparent; right: 0px; transform: translateX(calc(100% - 30px)); transition: @@ -76,27 +84,31 @@ min-width: 300px; } + .content { + background: var(--layer-1); + } + .tabs { display: flex; flex-direction: column; - border-right: solid thin white; + border-right: solid thin var(--outline); } .tabs > button { height: 30px; + padding: 5px; background: none; - background: blue; - color: white; + color: var(--outline); border: none; display: flex; align-items: center; - border-bottom: solid thin white; - border-left: solid thin white; + border-bottom: solid thin var(--outline); + border-left: solid thin var(--outline); } .tabs > button.active { - color: black; - background: white; + color: var(--layer-3); + background: var(--layer-1); } .visible .tabs > button { @@ -105,7 +117,7 @@ .visible .tabs { margin-left: -1px; - border-left: solid thin white; + border-left: solid thin var(--outline); } .visible > .tabs button:first-child { @@ -114,7 +126,7 @@ .visible { transform: translateX(0); - border-left: solid thin white; - background: black; + border-left: solid thin var(--outline); + background: var(--layer-0); } diff --git a/app/src/lib/settings/app-settings.ts b/app/src/lib/settings/app-settings.ts index 8266cc5..081b7c8 100644 --- a/app/src/lib/settings/app-settings.ts +++ b/app/src/lib/settings/app-settings.ts @@ -1,4 +1,5 @@ import localStore from "$lib/helpers/localStore"; +import { label } from "three/examples/jsm/nodes/Nodes.js"; export const AppSettings = localStore("node-settings", { theme: 0, @@ -7,31 +8,42 @@ export const AppSettings = localStore("node-settings", { showIndices: false, }); +const themes = ["dark", "light", "catppuccin", "solarized", "high-contrast", "nord", "dracula"]; + AppSettings.subscribe((value) => { - if (value.theme === 0) { - document.body.classList.remove("theme-catppuccin"); - } else { - document.body.classList.add("theme-catppuccin"); + const classes = document.body.classList; + const newClassName = `theme-${themes[value.theme]}`; + for (const className of classes) { + if (className.startsWith("theme-") && className !== newClassName) { + classes.remove(className); + } } + document.body.classList.add(newClassName); }); export const AppSettingTypes = { theme: { type: "select", - options: ["dark", "cat"], - value: "dark", + options: themes, + label: "Theme", + value: themes[0], }, showGrid: { type: "boolean", + label: "Show Grid", value: true, }, - wireframe: { - type: "boolean", - value: false, - }, - showIndices: { - type: "boolean", - value: false, - }, + debug: { + wireframe: { + type: "boolean", + label: "Wireframe", + value: false, + }, + showIndices: { + type: "boolean", + label: "Show Indices", + value: false, + }, + } } diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index b880e08..ed13347 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -14,17 +14,13 @@ const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry); let res: Int32Array; - let time = 0; let graph = localStorage.getItem("graph") ? JSON.parse(localStorage.getItem("graph")!) : templates.grid(3, 3); function handleResult(event: CustomEvent) { - let a = performance.now(); res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings)); - time = performance.now() - a; - console.log({ res, time }); } function handleSave(event: CustomEvent) { @@ -89,7 +85,8 @@ diff --git a/packages/ui/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte index 572933d..4986c15 100644 --- a/packages/ui/src/lib/Input.svelte +++ b/packages/ui/src/lib/Input.svelte @@ -1,8 +1,8 @@