feat: refactor how frontend was structured
Some checks failed
Deploy to GitHub Pages / build_site (push) Failing after 1m16s

This commit is contained in:
2024-04-25 01:53:20 +02:00
parent f51f61df17
commit c28ef550a9
18 changed files with 264 additions and 225 deletions

View File

@ -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)

View 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}

View File

@ -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}

View 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>