Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 max
|
36f02cabd3
|
||
|
max
|
3a78ad5ee3
|
||
|
max
|
9a7a7166b7
|
||
|
max
|
4aff3874d3
|
||
|
max
|
f415edab57
|
||
|
max
|
743959639f
|
||
|
max
|
d9b8b36686
|
||
|
max
|
ebf13967a4
|
||
|
max
|
a4f51efead
|
||
|
max
|
308626bcdc
|
||
|
max
|
73155dcb46
|
||
|
max
|
84afd15746
|
||
|
max
|
af40db3386
|
||
 nodarium-bot
|
091c0f0a83
|
||
|
max
|
82c2f08a56
|
||
|
max
|
a00db400bb
|
||
|
max
|
2d9eb0c087
|
||
|
nodarium-bot
|
1e28ded99b
|
||
|
nodarium-bot
|
5fae518392
|
||
|
max
|
954f5726c3 |
+131
@@ -1,3 +1,134 @@
|
||||
# v0.0.6 (2026-05-05)
|
||||
|
||||
## Features
|
||||
|
||||
- Upgrade graph source panel and JSON viewer with click-to-copy and improved select handling.
|
||||
- Capture system stats in benchmark runs.
|
||||
- Split CI into unit and end-to-end pipelines.
|
||||
- Add `LLM.md` documentation.
|
||||
- Add 🍀 Planty Tutorial Helper
|
||||
- Add a way to group nodes
|
||||
|
||||
## Node Groups
|
||||
|
||||
Node Groups introduce a way to structure graphs into nested, navigable subgraphs for better organization and reuse.
|
||||
|
||||
- Nested graph workflows with full runtime support
|
||||
- Group input and output nodes defining clear boundaries
|
||||
- Named groups for organization and identification
|
||||
- Breadcrumb navigation for navigating nested levels
|
||||
- Context-aware UI when editing inside groups
|
||||
- Reliable enter/exit transitions with state restoration
|
||||
- Ability to ungroup nodes back into the main graph
|
||||
|
||||
## Planty
|
||||
|
||||
Planty is a Clippy-inspired in-app tutorial and guidance system that helps users understand and use the graph editor through contextual assistance.
|
||||
|
||||
- Context-aware hints based on user actions in the graph
|
||||
- Step-by-step onboarding flows for core features
|
||||
- Inline guidance tied to nodes, sockets, and interactions
|
||||
- Lightweight runtime integration without external build requirements
|
||||
|
||||
## Fixes
|
||||
|
||||
- Fix benchmark execution and CI integration issues
|
||||
- Resolve debug node ID mismatch
|
||||
- Fix ESLint, TypeScript, Playwright, and test synchronization issues
|
||||
- Fix packaging issues in `@nodarium/planty` and UI library
|
||||
- Restore correct graph references after exiting node groups
|
||||
|
||||
## Refactors
|
||||
|
||||
- Remove graph element handling from `graphManager`
|
||||
- Restrict panel rendering to selected nodes only
|
||||
- Move JSON viewer into shared UI package
|
||||
- Clean up CI workflows
|
||||
|
||||
## Chores
|
||||
|
||||
- Upgrade dependencies via `pnpm upgrade`
|
||||
- Add SvelteKit sync before E2E tests
|
||||
- Remove flaky screenshot artifacts
|
||||
- General formatting, linting, and test maintenance
|
||||
|
||||
---
|
||||
|
||||
- [82c2f08](https://git.max-richter.dev/max/nodarium/commit/82c2f08a5653ccd596c6982a1d9efa4b20a0b624) chore: cleanup changelog
|
||||
- [a00db40](https://git.max-richter.dev/max/nodarium/commit/a00db400bba909db5da499e8484d6ed5541c4ad7) fix: dont crash when no groups exist
|
||||
- [2d9eb0c](https://git.max-richter.dev/max/nodarium/commit/2d9eb0c0879611c2355e52100b150dd39b924684) fix: make planty work
|
||||
- [954f572](https://git.max-richter.dev/max/nodarium/commit/954f5726c305508329856b6707a41b77f297c4bf) Merge pull request 'feat: initial node groups' (#44) from feat/group-node-own into main
|
||||
- [63d5b80](https://git.max-richter.dev/max/nodarium/commit/63d5b8079d785b4fe1e689611cd38e5dd4d3ecb6) chore: pnpm format
|
||||
- [3e32ca4](https://git.max-richter.dev/max/nodarium/commit/3e32ca419a1b914cbe64d98d887a89f4f5abb0e2) feat: ungroup nodes
|
||||
- [f0cb12a](https://git.max-richter.dev/max/nodarium/commit/f0cb12a088609f5bd56096f7c1f244af0a1f91d8) chore: fix some type issues
|
||||
- [1d60090](https://git.max-richter.dev/max/nodarium/commit/1d60090ffe1a93af4c0df6f36741957ac13b1a73) chore: fixup graph manager tests
|
||||
- [5b55056](https://git.max-richter.dev/max/nodarium/commit/5b55056fc12271b87393cf9ef3b61cdf518a9857) chore: remove graph element in graphManager
|
||||
- [e2c2b1a](https://git.max-richter.dev/max/nodarium/commit/e2c2b1a4d73e0953ddd0125cabe83649b58c8996) chore: remove e2e test screenshots (too flaky)
|
||||
- [7f082ad](https://git.max-richter.dev/max/nodarium/commit/7f082ad8f6f144b92947000b91ceddce3c52704b) feat: implement node sockets ui
|
||||
- [ed11195](https://git.max-richter.dev/max/nodarium/commit/ed1119532750d47a1395ced92fe310a6aa5e070e) chore: refactor graphStack to be simpler
|
||||
- [8ad62cf](https://git.max-richter.dev/max/nodarium/commit/8ad62cfc8e8c60e4e72fdaa3d8caca75a7472da6) feat: add node group breadcrumbs
|
||||
- [bff140a](https://git.max-richter.dev/max/nodarium/commit/bff140a764ff0b6ed2c6e42814a088ca9e2ef1ee) feat: show different ui when inside group
|
||||
- [85e2fd1](https://git.max-richter.dev/max/nodarium/commit/85e2fd1a7126aab4a544eea3d185cfc63754cb73) fix: use correct id for debug node
|
||||
- [5beb031](https://git.max-richter.dev/max/nodarium/commit/5beb03196d46434f617442cc55d721c7d3eebe33) fix: broken format command for @nodarium/planty
|
||||
- [83e0e47](https://git.max-richter.dev/max/nodarium/commit/83e0e47082ed0d9fbd60e67a6d6c9ed65a9f4f24) refactor: only show group/node panel when selected
|
||||
- [106797d](https://git.max-richter.dev/max/nodarium/commit/106797de32f0d57059c481770e734b555900421d) feat: make group input/output node work
|
||||
- [1a56ba9](https://git.max-richter.dev/max/nodarium/commit/1a56ba986d761be545c2cf0236f9c374222da6b1) damn dude
|
||||
- [703f531](https://git.max-richter.dev/max/nodarium/commit/703f531cd370c2d440a696a68413ea6d5f54019f) chore: make eslint and playwright happy
|
||||
- [0ed22f2](https://git.max-richter.dev/max/nodarium/commit/0ed22f20b913837b8e90d45aa1a4ada1a90a9313) chore: pnpm upgrade
|
||||
- [733b0a2](https://git.max-richter.dev/max/nodarium/commit/733b0a2ceb3be6fac1eda5bbf856a4bd1f724e36) chore: sync sveltekit app before e2e
|
||||
- [8f60816](https://git.max-richter.dev/max/nodarium/commit/8f60816c7841c845120e71590e1c4672d218703e) chore: sync sveltekit app before e2e
|
||||
- [cd7b51d](https://git.max-richter.dev/max/nodarium/commit/cd7b51d86a1243e0714d9be73588db56c844086c) chore: sync sveltekit app before e2e
|
||||
- [6c9cd15](https://git.max-richter.dev/max/nodarium/commit/6c9cd1505d72c1c0600910f56ee158d07b7e4811) chore: sync sveltekit app before e2e
|
||||
- [db5ee8b](https://git.max-richter.dev/max/nodarium/commit/db5ee8ba29812e6865706966ff690ef335ff5e4f) fix: make eslint happy
|
||||
- [a6b9ca4](https://git.max-richter.dev/max/nodarium/commit/a6b9ca43155b5e9357570705b6f45ba4fc3490a8) feat: capture system stats in benchmark
|
||||
- [d4910ab](https://git.max-richter.dev/max/nodarium/commit/d4910aba8c5408fb9321b1a22d4c35eae8142309) chore: pnpm format
|
||||
- [e695c76](https://git.max-richter.dev/max/nodarium/commit/e695c7649015b88d8ca6662bfee5dc0329dd89ac) chore: make eslint happy
|
||||
- [2a54fa7](https://git.max-richter.dev/max/nodarium/commit/2a54fa7590c1834904a45fb0fc1fd0aa371f0120) feat: add name to groups
|
||||
- [6d5cac6](https://git.max-richter.dev/max/nodarium/commit/6d5cac65e8acf013ac0a4a61baf3bbc423252d53) feat(ui): click-to-copy on node values in jsonviewer
|
||||
- [3ee074b](https://git.max-richter.dev/max/nodarium/commit/3ee074b11c9bc216ce7221f5611c8177cef9b313) feat(ui): make inputselect also handle value+label options
|
||||
- [59a1e63](https://git.max-richter.dev/max/nodarium/commit/59a1e63396635d05543fa4636de5800ce4899a2a) feat: add unit tests for graph state
|
||||
- [317d155](https://git.max-richter.dev/max/nodarium/commit/317d1552cea5a234ab1ab87684be9a3724b1976f) fix: graph correctly restore html refs after exiting node group
|
||||
- [78439b1](https://git.max-richter.dev/max/nodarium/commit/78439b19e96e6dbdfb31cc794f5b6e1ff005e26e) fix: make benchmark work
|
||||
- [ef217b1](https://git.max-richter.dev/max/nodarium/commit/ef217b1c409c25d6054515e1f705831ddbf5a24b) feat: some updates
|
||||
- [7499b80](https://git.max-richter.dev/max/nodarium/commit/7499b80789e99b87df54d6891597fac7edb56b0f) fix: make the runtime work with groups
|
||||
- [a5b663f](https://git.max-richter.dev/max/nodarium/commit/a5b663f6fc5e67d5ef67b128c22cdc7363232de5) feat(ci): split e2e and unit tests
|
||||
- [0550670](https://git.max-richter.dev/max/nodarium/commit/05506704bf68dfd289a1c5130d5d86ddd98954b1) feat: let claude fix ci
|
||||
- [63188e5](https://git.max-richter.dev/max/nodarium/commit/63188e57fd2cf055161508ee88cbef0cd941e662) feat: let claude fix ci
|
||||
- [4572d30](https://git.max-richter.dev/max/nodarium/commit/4572d30005d3538f357d4e9f1fb637c1a6559fb1) feat: let claude refactor ci
|
||||
- [ccc376d](https://git.max-richter.dev/max/nodarium/commit/ccc376d158f209b85a62d98919ac716e46e3e253) feat: store total vertices/faces in benchmarkl
|
||||
- [7e432e9](https://git.max-richter.dev/max/nodarium/commit/7e432e9033f7fdc73c21bb363cf502c1d8085407) chore: update ci workflow
|
||||
- [01f5837](https://git.max-richter.dev/max/nodarium/commit/01f58377c21048f95c839504a3e8c46c27ba12ae) feat: make more node group features work
|
||||
- [6ef5dc2](https://git.max-richter.dev/max/nodarium/commit/6ef5dc28ed9a4874a7b5fb2a9dca73efd1632519) chore: move jsonviewer into ui package
|
||||
- [3450d70](https://git.max-richter.dev/max/nodarium/commit/3450d7004781ea58f61d563967441a251c817a9b) docs: add LLM.md
|
||||
- [731b9e9](https://git.max-richter.dev/max/nodarium/commit/731b9e9b1e52598e11044874a46976e517a1150c) feat: upgrade graph source panel
|
||||
- [72f07d0](https://git.max-richter.dev/max/nodarium/commit/72f07d0a501fa715c40cf0e7c17527ef3f98e96b) feat: initial node groups
|
||||
- [a56e8f4](https://git.max-richter.dev/max/nodarium/commit/a56e8f445edb6064ae7a7b3b783fb7445f1b4e69) feat(ci): install openssh client
|
||||
- [1257274](https://git.max-richter.dev/max/nodarium/commit/12572742eb3ba1641cc744a18d330e88df50e9d0) fix(planty): remove debug span
|
||||
- [7aa9979](https://git.max-richter.dev/max/nodarium/commit/7aa9979e355fcf90342e8b5f1d233b879bb6c71f) chore: update e2e tests
|
||||
- [fc35a68](https://git.max-richter.dev/max/nodarium/commit/fc35a68826885ac7e9c624b39a5c0fe7d1cb83f0) fix: dont package ui library
|
||||
- [aba6f03](https://git.max-richter.dev/max/nodarium/commit/aba6f03bcce3e4363f0f22337d0000083bfff9a9) fix: dont package ui library
|
||||
- [2d6fd00](https://git.max-richter.dev/max/nodarium/commit/2d6fd00fd1ba31bfa943b6d3a4a628bd5132f668) fix: dont package ui library
|
||||
- [d231946](https://git.max-richter.dev/max/nodarium/commit/d231946e50975dfa1b41696cefbbc2f742480ea8) fix: remove unused imports
|
||||
- [e2f4a24](https://git.max-richter.dev/max/nodarium/commit/e2f4a24f759b917d3c7c1ca0b8347312785a03e5) fix(planty): make sure config is completely static
|
||||
- [58d39cd](https://git.max-richter.dev/max/nodarium/commit/58d39cd101298e6a41922d18466899f7bf4a0f97) feat: improve planty ux
|
||||
- [7ebb129](https://git.max-richter.dev/max/nodarium/commit/7ebb1297ac75987b3348dd81a57e0d25ed0a7405) feat(app): make zoom in nicer
|
||||
- [23f65a1](https://git.max-richter.dev/max/nodarium/commit/23f65a1c63650faba2051a2c87f7625378b4b0c6) fix: remove unused header div
|
||||
- [acdc582](https://git.max-richter.dev/max/nodarium/commit/acdc582e957df149ab723d268ac2e205595db199) feat: use ui and planty without build
|
||||
- [7a3e9eb](https://git.max-richter.dev/max/nodarium/commit/7a3e9eb893182e46e72e203df1eb7532a4652ddd) chore: update test screenshot
|
||||
- [be82312](https://git.max-richter.dev/max/nodarium/commit/be82312ea049b21e5ff859163e54ba6da88328a0) chore: update test screenshot
|
||||
- [84f67e9](https://git.max-richter.dev/max/nodarium/commit/84f67e9c33a1141d7e0c3332375576cd0898a47a) fix: update planty types
|
||||
- [491e345](https://git.max-richter.dev/max/nodarium/commit/491e345c2ff1893916848380e8941fa77dff44ec) feat: build planty in post install
|
||||
- [ba501b2](https://git.max-richter.dev/max/nodarium/commit/ba501b211db1d70930fa461e1fd82abb5b639c00) fix: correct tsconfig for planty
|
||||
- [7d76b9e](https://git.max-richter.dev/max/nodarium/commit/7d76b9e1f77ab934289bb18df6197bfd58ce3eeb) fix: mark planty as type:module
|
||||
- [5d4e2e9](https://git.max-richter.dev/max/nodarium/commit/5d4e2e928093cac39192960d9de21a0e1710904e) fix: make formatter happy
|
||||
- [4de15b1](https://git.max-richter.dev/max/nodarium/commit/4de15b19c8bdb35e53ba0d3e3e459cdbb12aee9d) feat: wire up planty with nodarium/app
|
||||
- [168e6fc](https://git.max-richter.dev/max/nodarium/commit/168e6fcc19dc55383b0b21d2b3ebab733058fb94) feat: update some node default settings
|
||||
- [c0eb75d](https://git.max-richter.dev/max/nodarium/commit/c0eb75d53c4251d041744b19a37c44d0d4a1728c) feat: new planty package
|
||||
- [2ec9bfc](https://git.max-richter.dev/max/nodarium/commit/2ec9bfc3c96a97aaf29557c70f76b7bf08156e15) feat(ci): compress benchmark data
|
||||
- [c975206](https://git.max-richter.dev/max/nodarium/commit/c97520617a0d48a765544feebf2d510400db8fb8) fix(ci): use older upload-artifact action
|
||||
- [6475790](https://git.max-richter.dev/max/nodarium/commit/64757901766efb7ccbd3693ebc63ba1367fe6d88) fix(ci): build nodes before benchmarking
|
||||
- [580ec73](https://git.max-richter.dev/max/nodarium/commit/580ec7346599e5d538ff53f31808ff770b4a8095) ci: run benchmark in ci
|
||||
|
||||
# v0.0.5 (2026-02-13)
|
||||
|
||||
## Features
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@nodarium/app",
|
||||
"private": true,
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
<script lang="ts">
|
||||
import { appSettings } from '$lib/settings/app-settings.svelte';
|
||||
import { T } from '@threlte/core';
|
||||
import { T, useThrelte } from '@threlte/core';
|
||||
import { colors } from '../graph/colors.svelte';
|
||||
import BackgroundFrag from './Background.frag';
|
||||
import BackgroundVert from './Background.vert';
|
||||
|
||||
const { invalidate } = useThrelte();
|
||||
|
||||
type Props = {
|
||||
minZoom?: number;
|
||||
maxZoom?: number;
|
||||
@@ -33,9 +35,16 @@
|
||||
|
||||
let bw = $derived(width / cameraPosition[2]);
|
||||
let bh = $derived(height / cameraPosition[2]);
|
||||
|
||||
$effect(() => {
|
||||
if (appSettings.value.theme) {
|
||||
setTimeout(() => invalidate(), 10);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<T.Group
|
||||
visible={!appSettings.value.theme.includes('contrast')}
|
||||
position.x={cameraPosition[0]}
|
||||
position.z={cameraPosition[1]}
|
||||
position.y={-1.0}
|
||||
|
||||
@@ -185,6 +185,8 @@
|
||||
>
|
||||
{node.meta?.title ?? node.id.split('/').at(-1)}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="no-results">No results for "{value}"</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -241,4 +243,11 @@
|
||||
background: var(--color-layer-2);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.no-results {
|
||||
padding: 1em 0.9em;
|
||||
font-size: 0.85em;
|
||||
opacity: 0.45;
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Button } from '@nodarium/ui';
|
||||
import { getGraphManager } from '../graph-state.svelte';
|
||||
const graph = getGraphManager();
|
||||
|
||||
@@ -23,27 +24,19 @@
|
||||
|
||||
{#if graph.isInsideGroup}
|
||||
<div class="group-name flex gap-1 items-center">
|
||||
<button
|
||||
class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
|
||||
onclick={() => exitToGroup()}
|
||||
>
|
||||
Root
|
||||
</button>
|
||||
<Button variant="ghost" size="sm" onclick={() => exitToGroup()}>Root</Button>
|
||||
|
||||
{#each intermediateGroups as entry (entry.id)}
|
||||
<span class="i-[tabler--arrow-right]"></span>
|
||||
<button
|
||||
class="bg-layer-2 opacity-75 hover:opacity-100 cursor-pointer rounded-sm p-1 px-2"
|
||||
onclick={() => exitToGroup(entry.id)}
|
||||
>
|
||||
<Button variant="ghost" size="sm" onclick={() => exitToGroup(entry.id)}>
|
||||
{getGroupName(entry.id)}
|
||||
</button>
|
||||
</Button>
|
||||
{/each}
|
||||
|
||||
<span class="i-[tabler--arrow-right]"></span>
|
||||
<button class="bg-layer-2 opacity-100 cursor-pointer rounded-sm p-1 px-2">
|
||||
<Button variant="ghost" size="sm" class="opacity-100!">
|
||||
{getGroupName(graph.currentGroupId!)}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
@@ -475,6 +475,35 @@ export class GraphManager extends EventEmitter<{
|
||||
// Construct the group inputs on the fly
|
||||
if (node.type === '__internal/group/instance') {
|
||||
const groupId = node.props?.groupId as number;
|
||||
|
||||
let options = this.groups.map((g) => ({
|
||||
value: g.id,
|
||||
label: g.name || `Group#${g.id}`
|
||||
})).filter((g) => {
|
||||
const activeIds = new SvelteSet([
|
||||
...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
|
||||
...(this.currentGroupId !== null ? [this.currentGroupId] : [])
|
||||
]);
|
||||
return !activeIds.has(g.value);
|
||||
});
|
||||
|
||||
// Handle if multiple groups have the same name, by adding the groupid
|
||||
const groupNames = new SvelteMap<string, number>();
|
||||
for (const o of options) {
|
||||
const value = groupNames.get(o.label) || 0;
|
||||
groupNames.set(o.label, value + 1);
|
||||
}
|
||||
options = options.map(o => {
|
||||
const amount = groupNames.get(o.label) || 0;
|
||||
if (amount > 1) {
|
||||
return {
|
||||
label: `${o.label}#${o.value}`,
|
||||
value: o.value
|
||||
};
|
||||
}
|
||||
return o;
|
||||
});
|
||||
|
||||
if (!groupId) {
|
||||
return {
|
||||
...node.state.type,
|
||||
@@ -486,18 +515,9 @@ export class GraphManager extends EventEmitter<{
|
||||
'groupId': {
|
||||
type: 'select',
|
||||
label: '',
|
||||
value: this.groups[0].id,
|
||||
value: this.groups?.[0]?.id,
|
||||
internal: true,
|
||||
options: this.groups.map((g) => ({
|
||||
value: g.id,
|
||||
label: g.name || `Group#${g.id}`
|
||||
})).filter((g) => {
|
||||
const activeIds = new SvelteSet([
|
||||
...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
|
||||
...(this.currentGroupId !== null ? [this.currentGroupId] : [])
|
||||
]);
|
||||
return !activeIds.has(g.value);
|
||||
})
|
||||
options
|
||||
}
|
||||
},
|
||||
outputs: []
|
||||
@@ -523,16 +543,7 @@ export class GraphManager extends EventEmitter<{
|
||||
label: '',
|
||||
value: node.props?.groupId,
|
||||
internal: true,
|
||||
options: this.groups.map((g) => ({
|
||||
value: g.id,
|
||||
label: g.name || `Group#${g.id}`
|
||||
})).filter((g) => {
|
||||
const activeIds = new SvelteSet([
|
||||
...this.parentStack.filter(e => e.id !== this.id).map(e => e.id),
|
||||
...(this.currentGroupId !== null ? [this.currentGroupId] : [])
|
||||
]);
|
||||
return !activeIds.has(g.value);
|
||||
})
|
||||
options
|
||||
},
|
||||
...defaultInputs
|
||||
};
|
||||
@@ -731,25 +742,26 @@ export class GraphManager extends EventEmitter<{
|
||||
return id;
|
||||
}
|
||||
|
||||
createGraph(nodes: NodeInstance[], edges: [number, number, number, string][]) {
|
||||
createGraph(nodes: SerializedNode[], edges: [number, number, number, string][]) {
|
||||
// map old ids to new ids
|
||||
const idMap = new SvelteMap<number, number>();
|
||||
|
||||
let startId = this.createNodeId();
|
||||
|
||||
nodes = nodes.map((node) => {
|
||||
const instances: NodeInstance[] = nodes.map((node) => {
|
||||
const id = startId++;
|
||||
idMap.set(node.id, id);
|
||||
const type = this.registry.getNode(node.type);
|
||||
if (!type && !node.type.startsWith('__internal/')) {
|
||||
throw new Error(`Node type not found: ${node.type}`);
|
||||
}
|
||||
return { ...node, id, tmp: { type } };
|
||||
const registryType = this.registry.getNode(node.type);
|
||||
return { ...node, id, state: { type: registryType } };
|
||||
});
|
||||
|
||||
const _edges = edges.map((edge) => {
|
||||
const from = nodes.find((n) => n.id === idMap.get(edge[0]));
|
||||
const to = nodes.find((n) => n.id === idMap.get(edge[2]));
|
||||
const from = instances.find((n) => n.id === idMap.get(edge[0]));
|
||||
const to = instances.find((n) => n.id === idMap.get(edge[2]));
|
||||
|
||||
if (!from || !to) {
|
||||
throw new Error('Edge references non-existing node');
|
||||
@@ -764,14 +776,15 @@ export class GraphManager extends EventEmitter<{
|
||||
return [from, edge[1], to, edge[3]] as Edge;
|
||||
});
|
||||
|
||||
for (const node of nodes) {
|
||||
this.nodes.set(node.id, node);
|
||||
for (const node of instances) {
|
||||
const n = $state(node);
|
||||
this.nodes.set(node.id, n);
|
||||
}
|
||||
|
||||
this.edges.push(..._edges);
|
||||
|
||||
this.save();
|
||||
return nodes;
|
||||
return instances;
|
||||
}
|
||||
|
||||
getUnusedGroups() {
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { animate, lerp } from '$lib/helpers';
|
||||
import type { NodeInstance, Socket } from '@nodarium/types';
|
||||
import type { NodeInstance, SerializedEdge, SerializedNode, Socket } from '@nodarium/types';
|
||||
import { getContext, setContext } from 'svelte';
|
||||
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
|
||||
import type { OrthographicCamera, Vector3 } from 'three';
|
||||
import type { GraphManager } from './graph-manager.svelte';
|
||||
import { ColorGenerator } from './graph/colors';
|
||||
import { getNodeHeight, getParameterHeight } from './helpers/nodeHelpers';
|
||||
import {
|
||||
getNodeHeight,
|
||||
getParameterHeight,
|
||||
serializeEdge,
|
||||
serializeNode
|
||||
} from './helpers/nodeHelpers';
|
||||
|
||||
const graphStateKey = Symbol('graph-state');
|
||||
export function getGraphState() {
|
||||
@@ -95,8 +100,8 @@ export class GraphState {
|
||||
cameraPosition: [number, number, number] = $state([140, 100, 3.5]);
|
||||
|
||||
clipboard: null | {
|
||||
nodes: NodeInstance[];
|
||||
edges: [number, number, number, string][];
|
||||
nodes: SerializedNode[];
|
||||
edges: SerializedEdge[];
|
||||
} = null;
|
||||
|
||||
cameraBounds = $derived([
|
||||
@@ -190,12 +195,10 @@ export class GraphState {
|
||||
if (this.activeNodeId === -1 && !this.selectedNodes?.size) {
|
||||
return;
|
||||
}
|
||||
let nodes = [
|
||||
this.activeNodeId,
|
||||
...(this.selectedNodes?.values() || [])
|
||||
]
|
||||
const ids = new SvelteSet([this.activeNodeId, ...(this.selectedNodes?.values() || [])]);
|
||||
let nodes = [...ids]
|
||||
.map((id) => this.graph.getNode(id))
|
||||
.filter(b => !!b);
|
||||
.filter((b): b is NodeInstance => !!b);
|
||||
|
||||
const edges = this.graph.getEdgesBetweenNodes(nodes);
|
||||
nodes = nodes.map((node) => ({
|
||||
@@ -203,13 +206,12 @@ export class GraphState {
|
||||
position: [
|
||||
this.mousePosition[0] - node.position[0],
|
||||
this.mousePosition[1] - node.position[1]
|
||||
],
|
||||
tmp: undefined
|
||||
]
|
||||
}));
|
||||
|
||||
this.clipboard = {
|
||||
nodes: nodes,
|
||||
edges: edges
|
||||
nodes: nodes.map(n => serializeNode(n)),
|
||||
edges: edges.map(e => serializeEdge(e))
|
||||
};
|
||||
}
|
||||
|
||||
@@ -255,13 +257,16 @@ export class GraphState {
|
||||
pasteNodes() {
|
||||
if (!this.clipboard) return;
|
||||
|
||||
const nodes = this.clipboard.nodes
|
||||
.map((node) => {
|
||||
node.position[0] = this.mousePosition[0] - node.position[0];
|
||||
node.position[1] = this.mousePosition[1] - node.position[1];
|
||||
return node;
|
||||
})
|
||||
.filter(Boolean) as NodeInstance[];
|
||||
// Create fresh node objects — never mutate clipboard so repeat pastes work correctly.
|
||||
// State is also spread (with cleared parents/children) so createGraph's mutations
|
||||
// don't corrupt the clipboard's stored state references.
|
||||
const nodes = this.clipboard.nodes.map((node) => ({
|
||||
...node,
|
||||
position: [
|
||||
this.mousePosition[0] - node.position[0],
|
||||
this.mousePosition[1] - node.position[1]
|
||||
] as [number, number]
|
||||
}));
|
||||
|
||||
const newNodes = this.graph.createGraph(nodes, this.clipboard.edges);
|
||||
this.selectedNodes.clear();
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
import { maxZoom, minZoom } from './constants';
|
||||
import { FileDropEventManager } from './drop.events';
|
||||
import { MouseEventManager } from './mouse.events';
|
||||
import ZoomIndicator from './ZoomIndicator.svelte';
|
||||
|
||||
const {
|
||||
keymap,
|
||||
@@ -227,7 +228,7 @@
|
||||
style:transform={`scale(${graphState.cameraPosition[2] * 0.1})`}
|
||||
class:hovering-sockets={graphState.activeSocket}
|
||||
>
|
||||
{#each graph.nodeArray as node, index (node.id)}
|
||||
{#each graph.nodeArray as node, index (node)}
|
||||
<NodeEl
|
||||
bind:node={graph.nodeArray[index]}
|
||||
inView={node ? graphState.isNodeInView(node) : false}
|
||||
@@ -247,6 +248,8 @@
|
||||
<HelpView registry={graph.registry} />
|
||||
{/if}
|
||||
|
||||
<ZoomIndicator {safePadding} />
|
||||
|
||||
<style>
|
||||
.graph-wrapper {
|
||||
position: relative;
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { getGraphState } from '../graph-state.svelte';
|
||||
|
||||
const { safePadding }: {
|
||||
safePadding?: { left?: number; right?: number; bottom?: number; top?: number };
|
||||
} = $props();
|
||||
|
||||
const graphState = getGraphState();
|
||||
</script>
|
||||
|
||||
<div class="zoom-indicator" style:right="calc({safePadding?.right ?? 0}px + 10px)">
|
||||
<button
|
||||
class="fit-btn"
|
||||
title="Fit to view (.)"
|
||||
onclick={() => graphState.centerNode()}
|
||||
aria-label="Fit nodes to view"
|
||||
>
|
||||
⊡
|
||||
</button>
|
||||
<span>{Math.round(graphState.cameraPosition[2] * 10)}%</span>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.zoom-indicator {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.75em;
|
||||
color: var(--color-text);
|
||||
opacity: 0.35;
|
||||
z-index: 10;
|
||||
transition: opacity 0.15s, right 0.2s;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.zoom-indicator:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.fit-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
font-size: 1.1em;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { createKeyMap } from '$lib/helpers/createKeyMap';
|
||||
import { panelState } from '$lib/sidebar/PanelState.svelte';
|
||||
import { toast } from '@nodarium/ui';
|
||||
import FileSaver from 'file-saver';
|
||||
import type { GraphManager } from './graph-manager.svelte';
|
||||
import type { GraphState } from './graph-state.svelte';
|
||||
@@ -146,6 +147,7 @@ export function setupKeymaps(keymap: Keymap, graph: GraphManager, graphState: Gr
|
||||
type: 'application/json;charset=utf-8'
|
||||
});
|
||||
FileSaver.saveAs(blob, 'nodarium-graph.json');
|
||||
toast('Graph downloaded', 'success', 1500);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { defaultPlant, lottaFaces, plant, simple } from '$lib/graph-templates';
|
||||
import type { Graph } from '$lib/types';
|
||||
import { InputSelect } from '@nodarium/ui';
|
||||
import { Button, ConfirmDialog, InputSelect, Spinner } from '@nodarium/ui';
|
||||
import type { ProjectManager } from './project-manager.svelte';
|
||||
|
||||
const { projectManager } = $props<{ projectManager: ProjectManager }>();
|
||||
@@ -31,16 +31,27 @@
|
||||
newProjectName = '';
|
||||
showNewProject = false;
|
||||
}
|
||||
|
||||
let pendingDeleteId = $state<number | null>(null);
|
||||
let confirmOpen = $state(false);
|
||||
|
||||
function requestDelete(id: number, e: MouseEvent) {
|
||||
e.stopPropagation();
|
||||
pendingDeleteId = id;
|
||||
confirmOpen = true;
|
||||
}
|
||||
|
||||
function confirmDelete() {
|
||||
if (pendingDeleteId !== null) {
|
||||
projectManager.handleDeleteProject(pendingDeleteId);
|
||||
pendingDeleteId = null;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="flex justify-between px-4 h-[70px] border-b-1 border-outline items-center bg-layer-2">
|
||||
<h3>Project</h3>
|
||||
<button
|
||||
class="px-3 py-1 bg-layer-1 rounded"
|
||||
onclick={() => (showNewProject = !showNewProject)}
|
||||
>
|
||||
New
|
||||
</button>
|
||||
<Button onclick={() => (showNewProject = !showNewProject)}>New</Button>
|
||||
</header>
|
||||
|
||||
{#if showNewProject}
|
||||
@@ -53,20 +64,11 @@
|
||||
onkeydown={(e) => e.key === 'Enter' && handleCreate()}
|
||||
/>
|
||||
<InputSelect options={templates.map(t => t.name)} bind:value={selectedTemplateIndex} />
|
||||
<button
|
||||
class="cursor-pointer self-end px-3 py-1 bg-selected rounded"
|
||||
onclick={() => handleCreate()}
|
||||
>
|
||||
Create
|
||||
</button>
|
||||
<Button variant="primary" class="self-end" onclick={() => handleCreate()}>Create</Button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="text-white min-h-screen">
|
||||
{#if projectManager.loading}
|
||||
<p>Loading...</p>
|
||||
{/if}
|
||||
|
||||
<ul>
|
||||
{#each projectManager.projects as project (project.id)}
|
||||
<li>
|
||||
@@ -89,16 +91,35 @@
|
||||
<div class="flex justify-between items-center grow">
|
||||
<span>{project.meta?.title || 'Untitled'}</span>
|
||||
<button
|
||||
class="text-layer-1! bg-red-500 w-7 text-xl rounded-sm cursor-pointer opacity-20 hover:opacity-80"
|
||||
onclick={() => {
|
||||
projectManager.handleDeleteProject(project.id!);
|
||||
}}
|
||||
class="opacity-20 hover:opacity-70 transition-opacity cursor-pointer p-1 rounded text-red-400"
|
||||
onclick={(e) => requestDelete(project.id!, e)}
|
||||
aria-label="Delete project"
|
||||
>
|
||||
×
|
||||
<span class="i-[tabler--trash] w-4 h-4 block"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
{:else}
|
||||
{#if projectManager.loading}
|
||||
<div class="flex items-center gap-2 p-4">
|
||||
<Spinner size={12} />
|
||||
<p>Loading</p>
|
||||
</div>
|
||||
{:else}
|
||||
<li class="px-4 py-8 text-center opacity-40 text-sm">
|
||||
No projects yet.<br />Press <b>New</b> to create one.
|
||||
</li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
bind:open={confirmOpen}
|
||||
title="Delete project?"
|
||||
message="This cannot be undone. The project and all its data will be permanently removed."
|
||||
confirmLabel="Delete"
|
||||
cancelLabel="Cancel"
|
||||
onconfirm={confirmDelete}
|
||||
/>
|
||||
|
||||
@@ -10,7 +10,9 @@ export class ProjectManager {
|
||||
'node.activeProjectId',
|
||||
undefined
|
||||
);
|
||||
public readonly loading = $derived(this.graph?.id !== this.activeProjectId.value);
|
||||
public readonly loading = $derived(
|
||||
this.projects.length && this.graph?.id !== this.activeProjectId.value
|
||||
);
|
||||
|
||||
constructor() {
|
||||
this.init();
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { localState } from '$lib/helpers/localState.svelte';
|
||||
import type { NodeInput } from '@nodarium/types';
|
||||
import Input from '@nodarium/ui';
|
||||
import Input, { Button as UiButton } from '@nodarium/ui';
|
||||
import { onMount } from 'svelte';
|
||||
import NestedSettings from './NestedSettings.svelte';
|
||||
|
||||
@@ -126,9 +126,9 @@
|
||||
{@const inputType = type[key]}
|
||||
<div class="input input-{inputType.type}" class:first-level={depth === 1}>
|
||||
{#if inputType.type === 'button'}
|
||||
<button onclick={() => onButtonClick?.(id)}>
|
||||
<UiButton onclick={() => onButtonClick?.(id)}>
|
||||
{inputType.label || key}
|
||||
</button>
|
||||
</UiButton>
|
||||
{:else}
|
||||
{#if inputType.label !== ''}
|
||||
<label for={id}>{inputType.label || key}</label>
|
||||
@@ -224,13 +224,6 @@
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
background: var(--color-layer-2);
|
||||
padding-block: 5px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 0;
|
||||
left: 0;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
import { humanizeDuration } from '$lib/helpers';
|
||||
import { localState } from '$lib/helpers/localState.svelte';
|
||||
import Monitor from '$lib/performance/Monitor.svelte';
|
||||
import { InputNumber } from '@nodarium/ui';
|
||||
import { Button, InputNumber } from '@nodarium/ui';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
function calculateStandardDeviation(array: number[]) {
|
||||
@@ -112,7 +112,7 @@
|
||||
onclick={() => copyContent(result?.stdev + '')}
|
||||
>(click to copy)</i>
|
||||
<div>
|
||||
<button onclick={() => (isRunning = false)}>reset</button>
|
||||
<Button onclick={() => (isRunning = false)}>reset</Button>
|
||||
</div>
|
||||
{:else if isRunning}
|
||||
<p>WarmUp ({$warmUp}/{warmUpAmount})</p>
|
||||
@@ -126,7 +126,7 @@
|
||||
{:else}
|
||||
<label for="bench-samples">Samples</label>
|
||||
<InputNumber id="bench-sample" bind:value={amount.value} max={1000} step={1} />
|
||||
<button onclick={benchmark} disabled={isRunning}>start</button>
|
||||
<Button variant="primary" onclick={benchmark} disabled={isRunning}>start</Button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { Button, toast } from '@nodarium/ui';
|
||||
import FileSaver from 'file-saver';
|
||||
import type { Group } from 'three';
|
||||
import type { GLTFExporter } from 'three/addons/exporters/GLTFExporter.js';
|
||||
@@ -28,11 +29,12 @@
|
||||
exporter.parse(
|
||||
scene,
|
||||
(gltf) => {
|
||||
// download .gltf file
|
||||
download(gltf as ArrayBuffer, 'plant', 'text/plain', 'gltf');
|
||||
toast('Exported as GLTF', 'success');
|
||||
},
|
||||
(err) => {
|
||||
console.log(err);
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast(`GLTF export failed: ${msg}`, 'error');
|
||||
}
|
||||
);
|
||||
}
|
||||
@@ -45,13 +47,18 @@
|
||||
objExporter = new m.OBJExporter();
|
||||
return objExporter;
|
||||
}));
|
||||
try {
|
||||
const result = exporter.parse(scene);
|
||||
// download .obj file
|
||||
download(result, 'plant', 'text/plain', 'obj');
|
||||
toast('Exported as OBJ', 'success');
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast(`OBJ export failed: ${msg}`, 'error');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="p-4">
|
||||
<button onclick={exportObj}>export obj</button>
|
||||
<button onclick={exportGltf}>export gltf</button>
|
||||
<div class="p-4 flex gap-2">
|
||||
<Button onclick={exportObj}>export obj</Button>
|
||||
<Button onclick={exportGltf}>export gltf</Button>
|
||||
</div>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
graph
|
||||
? {
|
||||
...graph,
|
||||
nodes: graph.nodes.map((n: object) => ({ ...n, tmp: undefined, state: undefined }))
|
||||
nodes: graph.nodes.map((n: object) => ({ ...n, state: undefined }))
|
||||
}
|
||||
: null
|
||||
);
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import type { GraphManager } from '$lib/graph-interface/graph-manager.svelte';
|
||||
import type { GroupDefinition } from '@nodarium/types';
|
||||
import { Button } from '@nodarium/ui';
|
||||
import { SvelteMap, SvelteSet } from 'svelte/reactivity';
|
||||
|
||||
type Props = { manager: GraphManager };
|
||||
@@ -51,9 +52,9 @@
|
||||
<div class="panel p-4">
|
||||
<div class="header">
|
||||
<span>Unused groups</span>
|
||||
<button class="remove-all" onclick={() => manager.removeUnusedGroups()}>
|
||||
<Button size="sm" variant="destructive" onclick={() => manager.removeUnusedGroups()}>
|
||||
Remove all
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ul class="tree">
|
||||
@@ -92,20 +93,6 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.remove-all {
|
||||
background: none;
|
||||
border: 1px solid var(--color-outline);
|
||||
border-radius: 4px;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-family);
|
||||
font-size: 0.85em;
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
|
||||
.remove-all:hover {
|
||||
border-color: var(--color-active);
|
||||
}
|
||||
|
||||
.tree {
|
||||
list-style: none;
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
import { tutorialConfig } from '$lib/tutorial/tutorial-config';
|
||||
import { Planty } from '@nodarium/planty';
|
||||
import type { Graph, NodeInstance } from '@nodarium/types';
|
||||
import { Spinner, Toast, toast } from '@nodarium/ui';
|
||||
import { createPerformanceStore } from '@nodarium/utils';
|
||||
import type { Group } from 'three';
|
||||
|
||||
@@ -69,6 +70,7 @@
|
||||
|
||||
let activeNode = $state<NodeInstance | undefined>(undefined);
|
||||
let scene = $state<Group>(null!);
|
||||
let isExecuting = $state(false);
|
||||
|
||||
let sidebarOpen = $state(false);
|
||||
let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
|
||||
@@ -101,10 +103,16 @@
|
||||
}
|
||||
});
|
||||
|
||||
let timeout: ReturnType<typeof setTimeout>;
|
||||
|
||||
async function update(
|
||||
g: Graph,
|
||||
s: Record<string, unknown> = $state.snapshot(graphSettings)
|
||||
) {
|
||||
if (timeout) clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
isExecuting = true;
|
||||
}, 100);
|
||||
performanceStore.startRun();
|
||||
try {
|
||||
let a = performance.now();
|
||||
@@ -127,8 +135,11 @@
|
||||
}
|
||||
viewerComponent?.update(graphResult);
|
||||
} catch (error) {
|
||||
console.log('errors', error);
|
||||
const msg = error instanceof Error ? error.message : String(error);
|
||||
toast(`Execution failed: ${msg}`, 'error');
|
||||
} finally {
|
||||
clearTimeout(timeout);
|
||||
isExecuting = false;
|
||||
performanceStore.stopRun();
|
||||
}
|
||||
}
|
||||
@@ -172,6 +183,7 @@
|
||||
config={tutorialConfig}
|
||||
actions={{
|
||||
'setup-default': () => {
|
||||
console.log('setup-default');
|
||||
const ts = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
|
||||
pm.handleCreateProject(
|
||||
structuredClone(templates.defaultPlant) as unknown as Graph,
|
||||
@@ -179,15 +191,16 @@
|
||||
);
|
||||
},
|
||||
'load-tutorial-template': () => {
|
||||
console.log('load-tutorial-template');
|
||||
if (!pm.graph) return;
|
||||
const g = structuredClone(templates.tutorial) as unknown as Graph;
|
||||
g.id = pm.graph.id;
|
||||
g.meta = { ...pm.graph.meta };
|
||||
pm.graph = g;
|
||||
pm.saveGraph(g);
|
||||
manager.load(g);
|
||||
graphInterface.state.centerNode(graphInterface.manager.getAllNodes()[0]);
|
||||
},
|
||||
'open-github-nodes': () => {
|
||||
console.log('open-github-nodes');
|
||||
window.open(
|
||||
'https://github.com/jim-fx/nodarium/tree/main/nodes/max/plantarium',
|
||||
'__blank'
|
||||
@@ -246,6 +259,7 @@
|
||||
<header></header>
|
||||
<Grid.Row>
|
||||
<Grid.Cell>
|
||||
<div class="viewer-cell">
|
||||
<Viewer
|
||||
bind:scene
|
||||
bind:this={viewerComponent}
|
||||
@@ -253,6 +267,12 @@
|
||||
debugData={debugData}
|
||||
centerCamera={appSettings.value.centerCamera}
|
||||
/>
|
||||
{#if isExecuting}
|
||||
<div class="viewer-spinner" aria-label="Executing graph">
|
||||
<Spinner size={28} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Grid.Cell>
|
||||
<Grid.Cell>
|
||||
{#if pm.graph}
|
||||
@@ -365,6 +385,8 @@
|
||||
</Grid.Row>
|
||||
</div>
|
||||
|
||||
<Toast />
|
||||
|
||||
<style>
|
||||
header {
|
||||
background-color: var(--color-layer-1);
|
||||
@@ -397,6 +419,20 @@
|
||||
grid-template-rows: 0px 1fr;
|
||||
}
|
||||
|
||||
.viewer-cell {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.viewer-spinner {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
color: var(--color-text, #cecece);
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.wrapper :global(canvas) {
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 1;
|
||||
|
||||
+645
@@ -0,0 +1,645 @@
|
||||
# Comprehensive UX Practices for Web Applications
|
||||
|
||||
## Introduction
|
||||
|
||||
This document consolidates many of the most important practical UX principles for modern web applications.
|
||||
|
||||
---
|
||||
|
||||
# 1. Core UX Principles
|
||||
|
||||
## 1.1 Visibility of System Status
|
||||
|
||||
Users should always understand:
|
||||
|
||||
- What the system is doing
|
||||
- Whether an action succeeded
|
||||
- Whether work is still in progress
|
||||
- Whether an error occurred
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Show loading indicators immediately
|
||||
- Show success confirmations after important actions
|
||||
- Show inline validation messages
|
||||
- Display progress for long-running tasks
|
||||
- Use skeleton loading states instead of blank screens
|
||||
- Prevent silent failures
|
||||
- Avoid ambiguous UI states
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Buttons with no feedback after clicking
|
||||
- Infinite spinners without explanation
|
||||
- Hidden background operations
|
||||
- Saving without visible confirmation
|
||||
|
||||
---
|
||||
|
||||
## 1.2 Predictability and Consistency
|
||||
|
||||
Users build mental models quickly.
|
||||
|
||||
Breaking established expectations increases cognitive load and causes mistakes.
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Use consistent layouts
|
||||
- Keep interaction patterns stable
|
||||
- Reuse common UI conventions
|
||||
- Keep naming and terminology consistent
|
||||
- Use standard keyboard shortcuts
|
||||
- Make similar components behave similarly
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Different button styles for identical actions
|
||||
- Inconsistent navigation behavior
|
||||
- Custom controls that ignore platform conventions
|
||||
- Unexpected modal behavior
|
||||
|
||||
---
|
||||
|
||||
## 1.3 Recognition Over Recall
|
||||
|
||||
Interfaces should minimize memory requirements.
|
||||
|
||||
Users should recognize options instead of remembering information.
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Show recent searches
|
||||
- Use autocomplete
|
||||
- Display contextual hints
|
||||
- Preserve previously entered values
|
||||
- Use visible labels
|
||||
- Keep important actions visible
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Placeholder-only labels
|
||||
- Hidden functionality
|
||||
- Requiring users to remember previous state
|
||||
- Removing useful context during workflows
|
||||
|
||||
---
|
||||
|
||||
## 1.4 Error Prevention
|
||||
|
||||
Preventing mistakes is better than handling mistakes.
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Disable impossible actions
|
||||
- Validate input early
|
||||
- Warn before destructive operations
|
||||
- Use constrained input formats
|
||||
- Use safe defaults
|
||||
- Prefer undo over confirmation dialogs
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Destructive actions near common actions
|
||||
- Easy accidental deletion
|
||||
- Poor validation timing
|
||||
- Irreversible operations without recovery
|
||||
|
||||
---
|
||||
|
||||
# 2. Input and Form UX
|
||||
|
||||
Forms are one of the most important and failure-prone areas in web applications.
|
||||
|
||||
---
|
||||
|
||||
## 2.1 Input Focus Behavior
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Autofocus the primary field when appropriate
|
||||
- Preserve focus during rerenders
|
||||
- Preserve cursor position
|
||||
- Support keyboard-first workflows
|
||||
- Use logical tab ordering
|
||||
|
||||
### Auto-Selecting Input Text
|
||||
|
||||
Auto-selecting text on focus is context-dependent.
|
||||
|
||||
### Good Use Cases
|
||||
|
||||
- Quantity fields
|
||||
- Rename dialogs
|
||||
- Editable defaults
|
||||
- Quick replacement workflows
|
||||
- Temporary values users often replace entirely
|
||||
|
||||
### Bad Use Cases
|
||||
|
||||
- Long textareas
|
||||
- Complex text editing
|
||||
- Fields users commonly partially edit
|
||||
- Rich text editing
|
||||
|
||||
### Principle
|
||||
|
||||
Only auto-select when full replacement is more likely than partial editing.
|
||||
|
||||
---
|
||||
|
||||
## 2.2 Labels and Placeholders
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Always use visible labels
|
||||
- Use placeholders only as supplementary examples
|
||||
- Keep labels visible after typing
|
||||
- Associate labels correctly for accessibility
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Placeholder-only forms
|
||||
- Ambiguous labels
|
||||
- Labels that disappear during editing
|
||||
|
||||
---
|
||||
|
||||
## 2.3 Validation
|
||||
|
||||
### Recommended Validation Timing
|
||||
|
||||
| Validation Type | Timing |
|
||||
| ------------------- | --------- |
|
||||
| Format validation | Immediate |
|
||||
| Semantic validation | On blur |
|
||||
| Server validation | On submit |
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Show errors near the relevant field
|
||||
- Explain how to fix issues
|
||||
- Preserve entered values after errors
|
||||
- Validate incrementally
|
||||
- Use clear language
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Generic “Invalid input” messages
|
||||
- Clearing form data after errors
|
||||
- Delayed validation surprises
|
||||
- Validation that interrupts typing
|
||||
|
||||
---
|
||||
|
||||
## 2.4 Input Types
|
||||
|
||||
### Good Practices
|
||||
|
||||
Use appropriate HTML input types:
|
||||
|
||||
- `email`
|
||||
- `tel`
|
||||
- `number`
|
||||
- `date`
|
||||
- `password`
|
||||
- `search`
|
||||
|
||||
### Benefits
|
||||
|
||||
- Better mobile keyboards
|
||||
- Native validation
|
||||
- Improved accessibility
|
||||
- Better autofill support
|
||||
|
||||
---
|
||||
|
||||
## 2.5 Form Submission
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Enter submits forms when expected
|
||||
- Escape cancels dialogs
|
||||
- Show loading states during submission
|
||||
- Prevent duplicate submissions
|
||||
- Preserve draft state
|
||||
- Allow keyboard submission
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Disabled submit buttons without explanation
|
||||
- Hidden validation failures
|
||||
- Silent submission failures
|
||||
|
||||
---
|
||||
|
||||
## 2.6 Dropdowns and Selection UX
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Use radio buttons for small option sets
|
||||
- Use searchable selects for large datasets
|
||||
- Prefer autocomplete for many options
|
||||
- Show selected state clearly
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Massive unsearchable dropdowns
|
||||
- Nested dropdown hierarchies
|
||||
- Multi-select controls without search
|
||||
|
||||
---
|
||||
|
||||
# 3. Navigation UX
|
||||
|
||||
---
|
||||
|
||||
## 3.1 Orientation
|
||||
|
||||
Users should always know:
|
||||
|
||||
- Where they are
|
||||
- How they got there
|
||||
- What they can do next
|
||||
- How to go back
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Highlight active navigation
|
||||
- Use breadcrumbs when helpful
|
||||
- Use meaningful page titles
|
||||
- Preserve navigation consistency
|
||||
|
||||
---
|
||||
|
||||
## 3.2 Navigation Structure
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Keep hierarchy shallow
|
||||
- Group related actions
|
||||
- Use descriptive names
|
||||
- Keep primary actions stable
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Deep nesting
|
||||
- Ambiguous navigation labels
|
||||
- Constantly moving actions
|
||||
|
||||
---
|
||||
|
||||
## 3.3 URL Design
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Use readable URLs
|
||||
- Make URLs shareable
|
||||
- Preserve app state in URLs when useful
|
||||
- Support browser history correctly
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Opaque generated URLs
|
||||
- Broken back button behavior
|
||||
- Losing state during navigation
|
||||
|
||||
---
|
||||
|
||||
# 4. Interaction Design
|
||||
|
||||
---
|
||||
|
||||
## 4.1 Click Targets
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Large clickable areas
|
||||
- Adequate spacing between actions
|
||||
- Clear hover/focus states
|
||||
- Touch-friendly sizing
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Tiny clickable regions
|
||||
- Overlapping interactive elements
|
||||
- Hidden hit areas
|
||||
|
||||
---
|
||||
|
||||
## 4.2 Feedback
|
||||
|
||||
Every interaction should produce feedback.
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Hover states
|
||||
- Active states
|
||||
- Loading indicators
|
||||
- Success states
|
||||
- Error states
|
||||
- Optimistic updates when appropriate
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Dead-feeling interfaces
|
||||
- Invisible processing
|
||||
- Delayed reactions
|
||||
|
||||
---
|
||||
|
||||
## 4.3 Destructive Actions
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Require confirmation for dangerous actions
|
||||
- Prefer undo systems
|
||||
- Visually distinguish destructive buttons
|
||||
- Separate destructive actions spatially
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Immediate irreversible deletion
|
||||
- Dangerous actions near common actions
|
||||
- Ambiguous destructive wording
|
||||
|
||||
---
|
||||
|
||||
## 4.4 Modal UX
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Trap keyboard focus
|
||||
- Support Escape to close
|
||||
- Restore focus after closing
|
||||
- Prevent background interaction
|
||||
- Keep modal purpose focused
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Nested modals
|
||||
- Full workflows inside modals
|
||||
- Losing unsaved work accidentally
|
||||
|
||||
---
|
||||
|
||||
# 5. Performance UX
|
||||
|
||||
Performance is a UX feature.
|
||||
|
||||
Users interpret slowness as unreliability.
|
||||
|
||||
---
|
||||
|
||||
## 5.1 Perceived Performance
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Show immediate visual response
|
||||
- Use optimistic UI updates
|
||||
- Preload likely next content
|
||||
- Stream content progressively
|
||||
- Use skeleton loaders
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Blank screens during loading
|
||||
- Long blocking operations
|
||||
- Frozen interfaces
|
||||
|
||||
---
|
||||
|
||||
## 5.2 Layout Stability
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Prevent layout shift
|
||||
- Reserve image dimensions
|
||||
- Avoid moving buttons during loading
|
||||
- Keep skeletons aligned with final layout
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Jumping content
|
||||
- Shifting controls
|
||||
- Reflow-heavy rendering
|
||||
|
||||
---
|
||||
|
||||
## 5.3 Responsiveness
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Keep UI interactive during async operations
|
||||
- Avoid blocking the main thread
|
||||
- Debounce expensive operations
|
||||
- Virtualize large lists
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- UI freezes
|
||||
- Excessive rerenders
|
||||
- Laggy typing experiences
|
||||
|
||||
---
|
||||
|
||||
# 6. Accessibility
|
||||
|
||||
Accessibility improves usability for everyone.
|
||||
|
||||
---
|
||||
|
||||
## 6.1 Keyboard Accessibility
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Full keyboard navigation
|
||||
- Visible focus indicators
|
||||
- Logical tab order
|
||||
- Keyboard shortcuts for power users
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Mouse-only workflows
|
||||
- Hidden focus state
|
||||
- Keyboard traps
|
||||
|
||||
---
|
||||
|
||||
## 6.2 Semantic HTML
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Use proper semantic elements
|
||||
- Use buttons for actions
|
||||
- Use links for navigation
|
||||
- Use headings correctly
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Clickable divs without accessibility support
|
||||
- Fake buttons
|
||||
- Missing semantic structure
|
||||
|
||||
---
|
||||
|
||||
## 6.3 Visual Accessibility
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Sufficient color contrast
|
||||
- Support reduced motion
|
||||
- Avoid color-only communication
|
||||
- Use scalable typography
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Tiny text
|
||||
- Low contrast interfaces
|
||||
- Flashing animations
|
||||
|
||||
---
|
||||
|
||||
## 6.4 Screen Reader Support
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Proper labels
|
||||
- Meaningful alt text
|
||||
- ARIA only when necessary
|
||||
- Correct live regions for updates
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Unlabeled controls
|
||||
- Excessive ARIA misuse
|
||||
- Non-announced state changes
|
||||
|
||||
---
|
||||
|
||||
# 7. Enterprise Application UX
|
||||
|
||||
Enterprise UX differs significantly from marketing-oriented consumer interfaces.
|
||||
|
||||
Power users often prioritize efficiency over visual minimalism.
|
||||
|
||||
---
|
||||
|
||||
## 7.1 Dense Information Design
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Efficient data density
|
||||
- Resizable tables
|
||||
- Sticky headers
|
||||
- Multi-column layouts
|
||||
- High information throughput
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Excessive whitespace
|
||||
- Oversimplified dashboards
|
||||
- Hidden operational controls
|
||||
|
||||
---
|
||||
|
||||
## 7.2 Table UX
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Sorting
|
||||
- Filtering
|
||||
- Column resizing
|
||||
- Pagination or virtualization
|
||||
- Keyboard navigation
|
||||
- Export functionality
|
||||
- Persistent user preferences
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Non-sortable enterprise tables
|
||||
- Horizontal scrolling nightmares
|
||||
- Missing filtering
|
||||
|
||||
---
|
||||
|
||||
## 7.3 Power User Workflows
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Keyboard shortcuts
|
||||
- Bulk actions
|
||||
- Batch editing
|
||||
- Command palettes
|
||||
- State persistence
|
||||
- Fast navigation
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Forced wizard workflows
|
||||
- Excessive confirmations
|
||||
- Repetitive manual work
|
||||
|
||||
---
|
||||
|
||||
# 8. Mobile UX
|
||||
|
||||
---
|
||||
|
||||
## 8.1 Touch Design
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Large touch targets
|
||||
- Thumb-friendly layouts
|
||||
- Avoid hover dependencies
|
||||
- Mobile-friendly spacing
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Tiny controls
|
||||
- Hover-only interactions
|
||||
- Precision-dependent gestures
|
||||
|
||||
---
|
||||
|
||||
## 8.2 Mobile Forms
|
||||
|
||||
### Good Practices
|
||||
|
||||
- Mobile keyboard optimization
|
||||
- Minimal typing
|
||||
- Autofill support
|
||||
- Step-by-step flows when necessary
|
||||
|
||||
### Bad Practices
|
||||
|
||||
- Long complex forms
|
||||
- Tiny input fields
|
||||
- Excessive required typing
|
||||
|
||||
---
|
||||
|
||||
# 9. Cognitive Psychology and UX
|
||||
|
||||
---
|
||||
|
||||
## 9.1 Hick’s Law
|
||||
|
||||
More choices increase decision time.
|
||||
|
||||
### Applications
|
||||
|
||||
- Reduce unnecessary options
|
||||
- Group related actions
|
||||
- Prioritize primary actions
|
||||
|
||||
---
|
||||
|
||||
## 9.2 Fitts’s Law
|
||||
|
||||
Closer and larger targets are easier to use.
|
||||
|
||||
### Applications
|
||||
|
||||
- Large primary buttons
|
||||
- Edge/corner placement for important actions
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodarium/planty",
|
||||
"version": "0.0.1",
|
||||
"version": "0.0.6",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodarium/types",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"description": "",
|
||||
"type": "module",
|
||||
"main": "src/index.ts",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodarium/ui",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
variant?: 'default' | 'primary' | 'destructive' | 'ghost';
|
||||
size?: 'sm' | 'md';
|
||||
disabled?: boolean;
|
||||
class?: string;
|
||||
onclick?: (e: MouseEvent) => void;
|
||||
children?: Snippet;
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
}
|
||||
|
||||
let {
|
||||
variant = 'default',
|
||||
size = 'md',
|
||||
disabled = false,
|
||||
class: _class = '',
|
||||
onclick,
|
||||
children,
|
||||
type = 'button'
|
||||
}: Props = $props();
|
||||
|
||||
const variantClasses = {
|
||||
default: 'bg-layer-2 border border-outline text-text hover:opacity-85',
|
||||
primary: 'bg-selected text-white border border-transparent hover:opacity-88',
|
||||
destructive: 'bg-red-600 text-white border border-transparent hover:opacity-88',
|
||||
ghost: 'bg-layer-2 border border-transparent text-text opacity-75 hover:opacity-100'
|
||||
};
|
||||
|
||||
const sizeClasses = {
|
||||
sm: 'px-2 py-0.5 text-xs',
|
||||
md: 'px-3 py-1 text-sm'
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
{type}
|
||||
{disabled}
|
||||
class:py-1={size === 'sm'}
|
||||
class:px-1={size === 'sm'}
|
||||
class:py-2={size !== 'sm'}
|
||||
class="
|
||||
inline-flex items-center gap-1.5 rounded cursor-pointer
|
||||
font-(--font-family) leading-none whitespace-nowrap
|
||||
transition-opacity duration-100
|
||||
disabled:opacity-40 disabled:cursor-not-allowed
|
||||
{variantClasses[variant]}
|
||||
{sizeClasses[size]}
|
||||
{_class}
|
||||
"
|
||||
{onclick}
|
||||
>
|
||||
{@render children?.()}
|
||||
</button>
|
||||
@@ -0,0 +1,96 @@
|
||||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
import Button from './Button.svelte';
|
||||
|
||||
interface Props {
|
||||
open?: boolean;
|
||||
title?: string;
|
||||
message?: string;
|
||||
confirmLabel?: string;
|
||||
cancelLabel?: string;
|
||||
onconfirm?: () => void;
|
||||
oncancel?: () => void;
|
||||
children?: Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
open = $bindable(false),
|
||||
title = 'Are you sure?',
|
||||
message,
|
||||
confirmLabel = 'Confirm',
|
||||
cancelLabel = 'Cancel',
|
||||
onconfirm,
|
||||
oncancel,
|
||||
children
|
||||
}: Props = $props();
|
||||
|
||||
let dialogEl: HTMLDialogElement;
|
||||
|
||||
$effect(() => {
|
||||
if (!dialogEl) return;
|
||||
if (open) {
|
||||
dialogEl.showModal();
|
||||
} else {
|
||||
dialogEl.close();
|
||||
}
|
||||
});
|
||||
|
||||
function confirm() {
|
||||
open = false;
|
||||
onconfirm?.();
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
open = false;
|
||||
oncancel?.();
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
confirm();
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel(e: Event) {
|
||||
e.preventDefault();
|
||||
cancel();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_interactive_supports_focus -->
|
||||
<dialog
|
||||
bind:this={dialogEl}
|
||||
class="m-auto bg-layer-1 border border-outline rounded-md p-0 text-text max-w-md w-full backdrop:bg-black/50"
|
||||
oncancel={handleCancel}
|
||||
onkeydown={handleKeydown}
|
||||
onclick={(e) => {
|
||||
if (e.target === dialogEl) cancel();
|
||||
}}
|
||||
>
|
||||
<div class="px-6 py-5 flex flex-col gap-3">
|
||||
<h3 class="m-0 text-sm font-semibold">{title}</h3>
|
||||
{#if message}
|
||||
<p class="m-0 text-xs opacity-75 leading-relaxed">{message}</p>
|
||||
{/if}
|
||||
{#if children}
|
||||
<div class="text-xs">
|
||||
{@render children()}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex justify-end gap-2 mt-1">
|
||||
<Button onclick={cancel}>{cancelLabel}</Button>
|
||||
<Button variant="primary" onclick={confirm}>{confirmLabel}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<style>
|
||||
dialog {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,27 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
size?: number;
|
||||
class?: string;
|
||||
}
|
||||
let { size = 20, class: _class = '' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class="animate-spin text-text shrink-0 {_class}"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-label="Loading"
|
||||
role="status"
|
||||
>
|
||||
<circle
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.5"
|
||||
stroke-linecap="round"
|
||||
stroke-dasharray="40 20"
|
||||
/>
|
||||
</svg>
|
||||
@@ -0,0 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { toasts } from './toast.svelte';
|
||||
|
||||
const typeClasses: Record<string, string> = {
|
||||
success: 'border-l-green-500',
|
||||
error: 'border-l-red-500',
|
||||
info: 'border-l-active'
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="fixed bottom-4 right-4 flex flex-col gap-2 z-[9999] pointer-events-none"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-atomic="false"
|
||||
>
|
||||
{#each toasts.value as item (item.id)}
|
||||
<div
|
||||
class="
|
||||
bg-layer-2 text-text border border-outline rounded
|
||||
px-3.5 py-2 text-sm min-w-[180px] max-w-xs
|
||||
border-l-3 {typeClasses[item.type] ?? 'border-l-outline'}
|
||||
animate-[slide-in_0.18s_ease]
|
||||
"
|
||||
>
|
||||
{item.message}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@keyframes slide-in {
|
||||
from { opacity: 0; transform: translateX(12px); }
|
||||
to { opacity: 1; transform: translateX(0); }
|
||||
}
|
||||
</style>
|
||||
@@ -2,14 +2,20 @@ export { default as Input } from './Input.svelte';
|
||||
export { default as InputCheckbox } from './inputs/InputCheckbox.svelte';
|
||||
export { default as InputColor } from './inputs/InputColor.svelte';
|
||||
export { default as InputNumber } from './inputs/InputNumber.svelte';
|
||||
export { default as InputSearch } from './inputs/InputSearch.svelte';
|
||||
export { default as InputSelect } from './inputs/InputSelect.svelte';
|
||||
export { default as InputShape } from './inputs/InputShape.svelte';
|
||||
export { default as InputVec3 } from './inputs/InputVec3.svelte';
|
||||
export { default as SocketTable } from './inputs/SocketTable.svelte';
|
||||
|
||||
export { default as Button } from './Button.svelte';
|
||||
export { default as ConfirmDialog } from './ConfirmDialog.svelte';
|
||||
export { default as Details } from './Details.svelte';
|
||||
export { default as JsonViewer } from './JsonViewer.svelte';
|
||||
export { default as ShortCut } from './ShortCut.svelte';
|
||||
export { default as Spinner } from './Spinner.svelte';
|
||||
export { default as Toast } from './Toast.svelte';
|
||||
export { toast } from './toast.svelte';
|
||||
|
||||
import Input from './Input.svelte';
|
||||
export default Input;
|
||||
|
||||
@@ -46,7 +46,7 @@
|
||||
class="h-full w-8 cursor-pointer appearance-none p-0"
|
||||
/>
|
||||
</label>
|
||||
<div class="flex items-center gap-1 px-2 py-1">
|
||||
<div class="flex items-center gap-1 px-2 py-1 border-l border-outline">
|
||||
<span class="pointer-events-none text-text opacity-30">#</span>
|
||||
<input
|
||||
type="text"
|
||||
@@ -64,5 +64,6 @@
|
||||
margin-top: -1px;
|
||||
margin-right: -1px;
|
||||
height: calc(100% + 2px);
|
||||
width: calc(100% + 2px);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1 +1,99 @@
|
||||
<script lang="ts">
|
||||
type SelectOption = string | { value: number; label: string };
|
||||
|
||||
interface Props {
|
||||
options?: SelectOption[];
|
||||
value?: number;
|
||||
id?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
options = [],
|
||||
value = $bindable(0),
|
||||
id = '',
|
||||
placeholder = 'Search…'
|
||||
}: Props = $props();
|
||||
|
||||
const normalized = $derived(
|
||||
options.map((opt, i) => typeof opt === 'string' ? { value: i, label: opt } : opt)
|
||||
);
|
||||
|
||||
const selected = $derived(normalized.find((o) => o.value === value));
|
||||
|
||||
let query = $state('');
|
||||
let open = $state(false);
|
||||
let container: HTMLDivElement;
|
||||
|
||||
const filtered = $derived(
|
||||
query === ''
|
||||
? normalized
|
||||
: normalized.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
|
||||
);
|
||||
|
||||
function select(val: number) {
|
||||
value = val;
|
||||
query = '';
|
||||
open = false;
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') {
|
||||
open = false;
|
||||
query = '';
|
||||
}
|
||||
if (e.key === 'ArrowDown' && filtered.length) {
|
||||
const idx = filtered.findIndex((o) => o.value === value);
|
||||
value = filtered[(idx + 1) % filtered.length].value;
|
||||
}
|
||||
if (e.key === 'ArrowUp' && filtered.length) {
|
||||
const idx = filtered.findIndex((o) => o.value === value);
|
||||
value = filtered[(idx - 1 + filtered.length) % filtered.length].value;
|
||||
}
|
||||
if (e.key === 'Enter' && filtered.length) {
|
||||
const match = filtered.find((o) => o.value === value) ?? filtered[0];
|
||||
select(match.value);
|
||||
}
|
||||
}
|
||||
|
||||
function handleBlur(e: FocusEvent) {
|
||||
if (!container.contains(e.relatedTarget as Node)) {
|
||||
open = false;
|
||||
query = '';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="relative w-full" bind:this={container} onblur={handleBlur}>
|
||||
<input
|
||||
{id}
|
||||
type="text"
|
||||
class:rounded-b-none!={open}
|
||||
class="w-full bg-layer-2 text-text outline outline-outline px-3 py-2 rounded-md border-none font-(--font-family) text-sm box-border focus:outline-2 focus:outline-active"
|
||||
placeholder={open ? placeholder : (selected?.label ?? placeholder)}
|
||||
bind:value={query}
|
||||
onfocus={() => (open = true)}
|
||||
onkeydown={handleKeydown}
|
||||
autocomplete="off"
|
||||
/>
|
||||
{#if open}
|
||||
<div
|
||||
class="absolute w-[calc(100%+2px)] -ml-px top-[calc(100%+2px)] left-0 right-0 bg-layer-1 border border-outline rounded-b-md max-h-50 overflow-y-auto z-100"
|
||||
role="listbox"
|
||||
>
|
||||
{#each filtered as opt (opt.value)}
|
||||
<div
|
||||
class="px-3 py-2 text-sm text-text cursor-pointer font-(--font-family) {opt.value === value ? 'bg-layer-2' : 'hover:bg-layer-2'}"
|
||||
role="option"
|
||||
aria-selected={opt.value === value}
|
||||
tabindex="-1"
|
||||
onmousedown={() => select(opt.value)}
|
||||
>
|
||||
{opt.label}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="px-3 py-2 text-xs text-text opacity-45 italic">No results</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
export type ToastType = 'info' | 'success' | 'error';
|
||||
|
||||
export type ToastItem = {
|
||||
id: number;
|
||||
message: string;
|
||||
type: ToastType;
|
||||
};
|
||||
|
||||
let _toasts = $state<ToastItem[]>([]);
|
||||
let _nextId = 0;
|
||||
|
||||
export const toasts = {
|
||||
get value() {
|
||||
return _toasts;
|
||||
}
|
||||
};
|
||||
|
||||
export function toast(message: string, type: ToastType = 'info', duration = 3000) {
|
||||
const id = _nextId++;
|
||||
_toasts.push({ id, message, type });
|
||||
setTimeout(() => {
|
||||
_toasts = _toasts.filter((t) => t.id !== id);
|
||||
}, duration);
|
||||
}
|
||||
@@ -2,15 +2,21 @@
|
||||
import type { NodeInput } from '@nodarium/types';
|
||||
import '$lib/app.css';
|
||||
import {
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
Details,
|
||||
InputCheckbox,
|
||||
InputColor,
|
||||
InputNumber,
|
||||
InputSearch,
|
||||
InputSelect,
|
||||
InputShape,
|
||||
InputVec3,
|
||||
JsonViewer,
|
||||
ShortCut
|
||||
ShortCut,
|
||||
Spinner,
|
||||
Toast,
|
||||
toast
|
||||
} from '$lib';
|
||||
import SocketTable from '$lib/inputs/SocketTable.svelte';
|
||||
import Section from './Section.svelte';
|
||||
@@ -68,6 +74,7 @@
|
||||
|
||||
let points = $state([]);
|
||||
let theme = $state('dark');
|
||||
let confirmOpen = $state(false);
|
||||
</script>
|
||||
|
||||
<main class="flex flex-col gap-8 py-8">
|
||||
@@ -76,6 +83,17 @@
|
||||
<ThemeSelector bind:theme />
|
||||
</div>
|
||||
|
||||
<Section title="Button">
|
||||
<div class="flex flex-wrap gap-3 items-center">
|
||||
<Button>Default</Button>
|
||||
<Button variant="primary">Primary</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button disabled>Disabled</Button>
|
||||
<Button size="sm">Small</Button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="InputNumber">
|
||||
<Theme />
|
||||
</Section>
|
||||
@@ -95,6 +113,13 @@
|
||||
<InputVec3 bind:value={vecValue} />
|
||||
</Section>
|
||||
|
||||
<Section title="InputSearch" value={options[selectValue]}>
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>Searchable select — type to filter</p>
|
||||
<InputSearch bind:value={selectValue} {options} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Select">
|
||||
<p>
|
||||
Select with simple values
|
||||
@@ -148,12 +173,12 @@
|
||||
|
||||
<Section title="JsonViewer">
|
||||
{#snippet header()}
|
||||
<button
|
||||
<Button
|
||||
onclick={() => randomlyUpdateJson()}
|
||||
class="-mt-1 bg-layer-2 p-1 px-2 rounded-sm cursor-pointer"
|
||||
>
|
||||
update
|
||||
</button>
|
||||
</Button>
|
||||
{/snippet}
|
||||
<div class="w-64 bg-layer-1 p-2 rounded">
|
||||
<JsonViewer
|
||||
@@ -182,8 +207,46 @@
|
||||
<ShortCut alt ctrl key="delete" />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Spinner">
|
||||
<div class="flex gap-6 items-center">
|
||||
<Spinner size={16} />
|
||||
<Spinner size={24} />
|
||||
<Spinner size={36} />
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="Toast">
|
||||
<div class="flex gap-3">
|
||||
<Button onclick={() => toast('Project saved successfully', 'success')}>
|
||||
Success toast
|
||||
</Button>
|
||||
<Button onclick={() => toast('Something went wrong', 'error')}>
|
||||
Error toast
|
||||
</Button>
|
||||
<Button onclick={() => toast('Graph is executing…', 'info')}>
|
||||
Info toast
|
||||
</Button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section title="ConfirmDialog">
|
||||
<Button onclick={() => (confirmOpen = true)}>
|
||||
Open dialog
|
||||
</Button>
|
||||
<ConfirmDialog
|
||||
bind:open={confirmOpen}
|
||||
title="Delete project?"
|
||||
message="This action cannot be undone. The project and all its data will be permanently removed."
|
||||
confirmLabel="Delete"
|
||||
cancelLabel="Cancel"
|
||||
onconfirm={() => toast('Project deleted', 'error')}
|
||||
/>
|
||||
</Section>
|
||||
</main>
|
||||
|
||||
<Toast />
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 800px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@nodarium/utils",
|
||||
"version": "0.0.5",
|
||||
"version": "0.0.6",
|
||||
"description": "",
|
||||
"main": "./src/index.ts",
|
||||
"type": "module",
|
||||
|
||||
Reference in New Issue
Block a user