feat: refactor how frontend was structured
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m16s
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m16s
This commit is contained in:
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { Node, NodeInput } from "@nodes/types";
|
||||
import NestedSettings from "../NestedSettings.svelte";
|
||||
import NestedSettings from "./NestedSettings.svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import type { GraphManager } from "$lib/graph-interface/graph-manager";
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
|
||||
export let manager: GraphManager;
|
||||
|
||||
export let node: Node;
|
||||
export let node: Node | undefined;
|
||||
let nodeDefinition: Record<string, NodeInput> | undefined;
|
||||
$: nodeDefinition = node?.tmp?.type
|
||||
? filterInputs(node.tmp.type.inputs)
|
40
app/src/lib/settings/panels/GraphSettings.svelte
Normal file
40
app/src/lib/settings/panels/GraphSettings.svelte
Normal file
@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
import type { NodeInput } from "@nodes/types";
|
||||
import NestedSettings from "./NestedSettings.svelte";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
interface Nested {
|
||||
[key: string]: NodeInput | Nested;
|
||||
}
|
||||
|
||||
export let type: Record<string, NodeInput>;
|
||||
|
||||
export let store: Writable<Record<string, any>>;
|
||||
|
||||
function constructNested(type: Record<string, NodeInput>) {
|
||||
const nested: Nested = {};
|
||||
|
||||
for (const key in type) {
|
||||
const parts = key.split(".");
|
||||
let current = nested;
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
if (i === parts.length - 1) {
|
||||
current[parts[i]] = type[key];
|
||||
} else {
|
||||
current[parts[i]] = current[parts[i]] || {};
|
||||
current = current[parts[i]] as Nested;
|
||||
}
|
||||
}
|
||||
}
|
||||
return nested;
|
||||
}
|
||||
|
||||
$: settings = constructNested({
|
||||
randomSeed: { type: "boolean", value: false },
|
||||
...type,
|
||||
});
|
||||
</script>
|
||||
|
||||
{#key settings}
|
||||
<NestedSettings id="graph-settings" {settings} {store} />
|
||||
{/key}
|
@ -3,7 +3,7 @@
|
||||
import { ShortCut } from "@nodes/ui";
|
||||
|
||||
export let keymap: ReturnType<typeof createKeyMap>;
|
||||
const keys = keymap.keys;
|
||||
const keys = keymap?.keys;
|
||||
</script>
|
||||
|
||||
<div class="wrapper">
|
||||
@ -13,7 +13,12 @@
|
||||
{#each $keys as key}
|
||||
{#if key.description}
|
||||
<div class="command-wrapper">
|
||||
<ShortCut {...key} />
|
||||
<ShortCut
|
||||
alt={key.alt}
|
||||
ctrl={key.ctrl}
|
||||
shift={key.shift}
|
||||
key={key.key}
|
||||
/>
|
||||
</div>
|
||||
<p>{key.description}</p>
|
||||
{/if}
|
||||
|
114
app/src/lib/settings/panels/NestedSettings.svelte
Normal file
114
app/src/lib/settings/panels/NestedSettings.svelte
Normal file
@ -0,0 +1,114 @@
|
||||
<script lang="ts">
|
||||
import localStore from "$lib/helpers/localStore";
|
||||
import type { NodeInput } from "@nodes/types";
|
||||
import Input from "@nodes/ui";
|
||||
import type { Writable } from "svelte/store";
|
||||
|
||||
type Button = { type: "button"; label?: string; callback: () => void };
|
||||
|
||||
type Input = NodeInput | Button;
|
||||
|
||||
interface Nested {
|
||||
[key: string]: (Nested & { __title?: string }) | Input;
|
||||
}
|
||||
|
||||
export let id: string;
|
||||
|
||||
$: expandedDetails = localStore<Record<string, boolean>>(
|
||||
`nodes.settings.expanded.${id}`,
|
||||
{},
|
||||
);
|
||||
|
||||
export let settings: Nested;
|
||||
export let store: Writable<Record<string, any>>;
|
||||
export let depth = 0;
|
||||
|
||||
const keys = Object.keys(settings).filter((key) => key !== "__title");
|
||||
function isNodeInput(v: Input | Nested): v is Input {
|
||||
return v && "type" in v;
|
||||
}
|
||||
console.log({ settings, store });
|
||||
</script>
|
||||
|
||||
{#if $store}
|
||||
{#each keys as key}
|
||||
{@const value = settings[key]}
|
||||
<div class="wrapper" class:first-level={depth === 0}>
|
||||
{#if value !== undefined && isNodeInput(value)}
|
||||
<div class="input input-{settings[key].type}">
|
||||
{#if value.type === "button"}
|
||||
<button on:click={() => value?.callback?.()}
|
||||
>{value.label || key}</button
|
||||
>
|
||||
{:else if "setting" in value && value.setting !== undefined}
|
||||
<label for={key}>{settings[key].label || key}</label>
|
||||
<Input id={key} input={value} bind:value={$store[value?.setting]} />
|
||||
{:else}
|
||||
<label for={key}>{settings[key].label || key}</label>
|
||||
<Input id={key} input={value} bind:value={$store[key]} />
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
{#if depth > 0}
|
||||
<hr />
|
||||
{/if}
|
||||
|
||||
<details bind:open={$expandedDetails[key]}>
|
||||
<summary>{settings[key]?.__title || key}</summary>
|
||||
<div class="content">
|
||||
<svelte:self settings={settings[key]} {store} depth={depth + 1} />
|
||||
</div>
|
||||
</details>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
summary {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
details {
|
||||
padding: 1em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.input-boolean {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.input-boolean > label {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.first-level > .input {
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.first-level {
|
||||
border-bottom: solid thin var(--outline);
|
||||
}
|
||||
.first-level > details {
|
||||
border: none;
|
||||
}
|
||||
hr {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
border-bottom: solid thin var(--outline);
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user