diff --git a/app/src/lib/graph-interface/AddMenu.svelte b/app/src/lib/graph-interface/AddMenu.svelte index 9414eb8..52362b8 100644 --- a/app/src/lib/graph-interface/AddMenu.svelte +++ b/app/src/lib/graph-interface/AddMenu.svelte @@ -1,164 +1,163 @@ -
-
- -
+
+
+ +
-
- {#each nodes as node} -
{ - if (event.key === 'Enter') { - if (position) { - graph.createNode({ type: node.id, position }); - position = null; - } - } - }} - on:mousedown={() => { - if (position) { - graph.createNode({ type: node.id, position }); - position = null; - } - }} - on:focus={() => { - activeNodeId = node.id; - }} - class:selected={node.id === activeNodeId} - on:mouseover={() => { - activeNodeId = node.id; - }} - > - {node.id} -
- {/each} -
-
+
+ {#each nodes as node} +
{ + if (event.key === "Enter") { + if (position) { + graph.createNode({ type: node.id, position, props: {} }); + position = null; + } + } + }} + on:mousedown={() => { + if (position) { + graph.createNode({ type: node.id, position, props: {} }); + position = null; + } + }} + on:focus={() => { + activeNodeId = node.id; + }} + class:selected={node.id === activeNodeId} + on:mouseover={() => { + activeNodeId = node.id; + }} + > + {node.id} +
+ {/each} +
+
diff --git a/app/src/lib/graph-interface/BoxSelection.svelte b/app/src/lib/graph-interface/BoxSelection.svelte index 998c207..bec5359 100644 --- a/app/src/lib/graph-interface/BoxSelection.svelte +++ b/app/src/lib/graph-interface/BoxSelection.svelte @@ -1,28 +1,31 @@ -
+
diff --git a/app/src/lib/graph-interface/graph/Graph.svelte b/app/src/lib/graph-interface/graph/Graph.svelte index 31127a0..c638b8e 100644 --- a/app/src/lib/graph-interface/graph/Graph.svelte +++ b/app/src/lib/graph-interface/graph/Graph.svelte @@ -746,7 +746,7 @@
diff --git a/app/src/lib/graph-interface/graph/Wrapper.svelte b/app/src/lib/graph-interface/graph/Wrapper.svelte index 0a19e56..3808663 100644 --- a/app/src/lib/graph-interface/graph/Wrapper.svelte +++ b/app/src/lib/graph-interface/graph/Wrapper.svelte @@ -12,6 +12,8 @@ const manager = new GraphManager(registry); + export const status = manager.status; + const updateSettings = debounce((s) => { manager.setSettings(s); }, 200); diff --git a/app/src/lib/graph-interface/graph/stores.ts b/app/src/lib/graph-interface/graph/stores.ts index 27ec527..f86f0df 100644 --- a/app/src/lib/graph-interface/graph/stores.ts +++ b/app/src/lib/graph-interface/graph/stores.ts @@ -16,6 +16,8 @@ export const colors = writable({ layer2: new Color().setStyle("#2D2D2D"), layer3: new Color().setStyle("#A6A6A6"), outline: new Color().setStyle("#000000"), + active: new Color().setStyle("#c65a19"), + selected: new Color().setStyle("#ffffff"), }); if ("getComputedStyle" in globalThis) { @@ -30,6 +32,8 @@ if ("getComputedStyle" in globalThis) { const layer2 = style.getPropertyValue("--layer-2"); const layer3 = style.getPropertyValue("--layer-3"); const outline = style.getPropertyValue("--outline"); + const active = style.getPropertyValue("--active"); + const selected = style.getPropertyValue("--selected"); colors.update(col => { col.layer0.setStyle(layer0); @@ -42,6 +46,10 @@ if ("getComputedStyle" in globalThis) { col.layer3.convertLinearToSRGB(); col.outline.setStyle(outline); col.outline.convertLinearToSRGB(); + col.active.setStyle(active); + col.active.convertLinearToSRGB(); + col.selected.setStyle(selected); + col.selected.convertLinearToSRGB(); return col; }); diff --git a/app/src/lib/graph-interface/node/Node.frag b/app/src/lib/graph-interface/node/Node.frag index 22da461..997ace1 100644 --- a/app/src/lib/graph-interface/node/Node.frag +++ b/app/src/lib/graph-interface/node/Node.frag @@ -6,12 +6,8 @@ uniform float uHeight; uniform vec3 uColorDark; uniform vec3 uColorBright; -uniform vec3 uSelectedColor; -uniform vec3 uActiveColor; - -uniform bool uSelected; -uniform bool uActive; +uniform vec3 uStrokeColor; uniform float uStrokeWidth; float msign(in float x) { return (x < 0.0) ? -1.0 : 1.0; } @@ -47,16 +43,9 @@ void main(){ // outside gl_FragColor = vec4(0.0,0.0,0.0, 0.0); }else{ - if (distance.w > -uStrokeWidth || mod(y+5.0, 10.0) < uStrokeWidth/2.0) { // draw the outer stroke - if (uSelected) { - gl_FragColor = vec4(uSelectedColor, 1.0); - } else if (uActive) { - gl_FragColor = vec4(uActiveColor, 1.0); - } else { - gl_FragColor = vec4(uColorBright, 1.0); - } + gl_FragColor = vec4(uStrokeColor, 1.0); }else if (y<5.0){ // draw the header gl_FragColor = vec4(uColorBright, 1.0); diff --git a/app/src/lib/graph-interface/node/Node.svelte b/app/src/lib/graph-interface/node/Node.svelte index 007b68b..dd4f57f 100644 --- a/app/src/lib/graph-interface/node/Node.svelte +++ b/app/src/lib/graph-interface/node/Node.svelte @@ -67,18 +67,18 @@ uniforms={{ uColorBright: { value: new Color("#171717") }, uColorDark: { value: new Color("#151515") }, - uSelectedColor: { value: new Color("#9d5f28") }, - uActiveColor: { value: new Color("white") }, - uSelected: { value: false }, - uActive: { value: false }, + uStrokeColor: { value: new Color("#9d5f28") }, uStrokeWidth: { value: 1.0 }, uWidth: { value: 20 }, uHeight: { value: height }, }} - uniforms.uSelected.value={isSelected} - uniforms.uActive.value={isActive} uniforms.uColorBright.value={$colors.layer2} uniforms.uColorDark.value={$colors.layer1} + uniforms.uStrokeColor.value={isSelected + ? $colors.selected + : isActive + ? $colors.active + : $colors.outline} uniforms.uStrokeWidth.value={(7 - z) / 3} /> @@ -122,12 +122,12 @@ } .node.active { - --stroke: white; - --stroke-width: 1px; + --stroke: var(--active); + --stroke-width: 2px; } .node.selected { - --stroke: #9d5f28; - --stroke-width: 1px; + --stroke: var(--selected); + --stroke-width: 2px; } diff --git a/app/src/lib/settings/Keymap.svelte b/app/src/lib/settings/Keymap.svelte index e69de29..1056919 100644 --- a/app/src/lib/settings/Keymap.svelte +++ b/app/src/lib/settings/Keymap.svelte @@ -0,0 +1,4 @@ + + +duuude diff --git a/app/src/lib/settings/NestedSettings.svelte b/app/src/lib/settings/NestedSettings.svelte index d0b57f3..80b3769 100644 --- a/app/src/lib/settings/NestedSettings.svelte +++ b/app/src/lib/settings/NestedSettings.svelte @@ -11,7 +11,6 @@ export let store: Writable>; export let depth = 0; - console.log(settings); const keys = Object.keys(settings); function isNodeInput(v: NodeInput | Nested): v is NodeInput { return "type" in v; @@ -23,12 +22,18 @@
{#if isNodeInput(value)}
- - + {#if settings[key].type === "button"} + + {:else} + + + {/if}
{:else}
diff --git a/app/src/lib/settings/Panel.svelte b/app/src/lib/settings/Panel.svelte deleted file mode 100644 index f295ec5..0000000 --- a/app/src/lib/settings/Panel.svelte +++ /dev/null @@ -1,49 +0,0 @@ - - -
-

{setting.id}

- -
- - diff --git a/app/src/lib/settings/Settings.svelte b/app/src/lib/settings/Settings.svelte index a09d98f..a740308 100644 --- a/app/src/lib/settings/Settings.svelte +++ b/app/src/lib/settings/Settings.svelte @@ -1,11 +1,11 @@
@@ -42,26 +66,32 @@ > - {#each keys as panel (settings[panel].id)} + {#each keys as panel (panels[panel].id)} {/each}
- {#if $activePanel && settings[$activePanel]} + {#if $activePanel && panels[$activePanel]} +

{panels[$activePanel].id}

{#key $activePanel} - {#if settings[$activePanel].component} + {#if panels[$activePanel]?.component} {:else} - +
+ +
{/if} {/key} {/if} @@ -84,6 +114,10 @@ min-width: 300px; } + h1 { + border-bottom: solid thin var(--outline); + } + .content { background: var(--layer-1); } @@ -97,6 +131,7 @@ .tabs > button { height: 30px; padding: 5px; + border-radius: 0px; background: none; color: var(--outline); border: none; diff --git a/app/src/lib/settings/app-settings.ts b/app/src/lib/settings/app-settings.ts index 081b7c8..4e0b644 100644 --- a/app/src/lib/settings/app-settings.ts +++ b/app/src/lib/settings/app-settings.ts @@ -33,6 +33,19 @@ export const AppSettingTypes = { label: "Show Grid", value: true, }, + stressTest: { + amount: { + type: "integer", + min: 2, + max: 15 + }, + loadGrid: { + type: "button" + }, + loadTree: { + type: "button" + }, + }, debug: { wireframe: { type: "boolean", diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index ed13347..ed73fb5 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -8,7 +8,8 @@ import Viewer from "$lib/viewer/Viewer.svelte"; import Settings from "$lib/settings/Settings.svelte"; import { AppSettings, AppSettingTypes } from "$lib/settings/app-settings"; - import { get, writable } from "svelte/store"; + import { get, writable, type Writable } from "svelte/store"; + import Keymap from "$lib/settings/Keymap.svelte"; const nodeRegistry = new RemoteNodeRegistry("http://localhost:3001"); const runtimeExecutor = new MemoryRuntimeExecutor(nodeRegistry); @@ -19,6 +20,8 @@ ? JSON.parse(localStorage.getItem("graph")!) : templates.grid(3, 3); + let managerStatus: Writable<"loading" | "error" | "idle">; + function handleResult(event: CustomEvent) { res = runtimeExecutor.execute(event.detail, get(settings?.graph?.settings)); } @@ -34,6 +37,12 @@ settings: AppSettings, definition: AppSettingTypes, }, + graph: {}, + shortcuts: { + id: "shortcuts", + icon: "i-tabler-keyboard", + component: Keymap, + }, }; function handleSettings( @@ -42,27 +51,28 @@ types: Record; }>, ) { - settings = { - ...settings, - graph: { - icon: "i-tabler-chart-bar", - id: "graph", - settings: writable(ev.detail.values), - definition: ev.detail.types, - }, + settings.general.definition.stressTest.loadGrid.callback = function () { + const store = get(settings.general.settings); + graph = templates.grid(store.amount, store.amount); }; + + settings.general.definition.stressTest.loadTree.callback = function () { + const store = get(settings.general.settings); + graph = templates.tree(store.amount); + }; + + settings.graph = { + icon: "i-tabler-chart-bar", + id: "graph", + settings: writable(ev.detail.values), + definition: ev.detail.types, + }; + settings = settings; } -
-
- header - -
+
+
@@ -72,12 +82,13 @@ - + {/key} @@ -97,6 +108,17 @@ grid-template-rows: 50px 1fr; } + .wrapper :global(canvas) { + transition: opacity 0.3s ease; + opacity: 1; + } + + .manager-loading :global(.graph-wrapper), + .manager-loading :global(canvas) { + opacity: 0.2; + pointer-events: none; + } + :global(html) { background: rgb(13, 19, 32); background: linear-gradient( diff --git a/packages/ui/src/lib/ShortCut.svelte b/packages/ui/src/lib/ShortCut.svelte new file mode 100644 index 0000000..e69de29 diff --git a/packages/ui/src/lib/app.css b/packages/ui/src/lib/app.css index 3e961f2..2c5dab4 100644 --- a/packages/ui/src/lib/app.css +++ b/packages/ui/src/lib/app.css @@ -57,6 +57,9 @@ body { --layer-2: var(--neutral-400); --layer-3: var(--neutral-200); + --active: #ffffff; + --selected: #c65a19; + --outline: var(--neutral-400); --text-color: var(--neutral-200); @@ -76,6 +79,8 @@ body.theme-light { --layer-1: var(--neutral-100); --layer-2: var(--neutral-100); --layer-3: var(--neutral-500); + --active: #000000; + --selected: #c65a19; } body.theme-solarized { @@ -83,8 +88,10 @@ body.theme-solarized { --outline: #93a1a1; --layer-0: #fdf6e3; --layer-1: #eee8d5; - --layer-2: #93a1a1; + --layer-2: #c4c0b4; --layer-3: #586e75; + --active: #000000; + --selected: #268bd2; } body.theme-catppuccin { @@ -107,17 +114,13 @@ body.theme-high-contrast { body.theme-nord { --text-color: #D8DEE9; - /* Nord snow */ --outline: #4C566A; - /* Nord frost */ --layer-0: #2E3440; - /* Nord polar night */ --layer-1: #3B4252; - /* Nord polar night */ --layer-2: #434C5E; - /* Nord polar night */ --layer-3: #5E81AC; - /* Nord frost */ + --active: #8999bd; + --selected: #b76c3f } body.theme-dracula { @@ -133,6 +136,9 @@ body { margin: 0; } -/* canvas { */ -/* display: none !important; */ -/* } */ +button { + background-color: var(--layer-2); + border: 1px solid var(--outline); + padding: 8px 9px; + border-radius: 4px; +}