max/nodarium
1
0
Fork 0
Code Issues 9 Pull Requests 1 Actions Packages Projects Releases 5 Wiki Activity

Compare commits

base: max:be8161ec8d76f8e121e31096ebecbd872dae5ef8
Branches Tags
max:main max:feat/arena-runtime max:feat/shape-node max:feat/zig-based-node
max:v0.0.5 max:v0.0.4 max:v0.0.3 max:v0.0.2 max:v0.0.1
..
compare: max:v0.0.1
Branches Tags
max:feat/arena-runtime max:main max:feat/shape-node max:feat/zig-based-node
max:v0.0.5 max:v0.0.4 max:v0.0.3 max:v0.0.2 max:v0.0.1

3 Commits
be8161ec8d ... v0.0.1

Author SHA1 Message Date
Max Richter
fdc4802d68 chore: format
All checks were successful
🚀 Release / release (push) Successful in 3m46s
Details
2026-02-03 15:39:21 +01:00
Max Richter
5a30fce4ec chore(ci): make release script work with sh
Some checks failed
🚀 Release / release (push) Failing after 2m51s
Details
2026-02-03 15:33:25 +01:00
Max Richter
0d0eb65ddd chore(ci): add jq and git to ci docker image 2026-02-03 15:33:12 +01:00
169 changed files with 2050 additions and 7958 deletions
Expand all files Collapse all files

9
.cargo/config.toml
View File

@@ -1,9 +0,0 @@
[target.wasm32-unknown-unknown]
rustflags = [
"-C",
"link-arg=--import-memory",
"-C",
"link-arg=--initial-memory=67108864", # 64 MiB
"-C",
"link-arg=--max-memory=536870912", # 512 MiB
]

18
.dprint.jsonc
View File

@@ -13,12 +13,16 @@
"markdown": {}, "markdown": {},
"toml": {}, "toml": {},
"dockerfile": {}, "dockerfile": {},
"ruff": {},
"jupyter": {},
"malva": {},
"markup": { "markup": {
// https://dprint.dev/plugins/markup_fmt/config/ // https://dprint.dev/plugins/markup_fmt/config/
"scriptIndent": true, "scriptIndent": true,
"styleIndent": true, "styleIndent": true,
}, },
"yaml": {}, "yaml": {},
"graphql": {},
"exec": { "exec": {
"cwd": "${configDir}", "cwd": "${configDir}",
"commands": [ "commands": [
@@ -42,18 +46,20 @@
"**/*-lock.yaml", "**/*-lock.yaml",
"**/yaml.lock", "**/yaml.lock",
"**/.DS_Store", "**/.DS_Store",
"**/.pnpm-store",
"**/.cargo",
"**/target",
], ],
"plugins": [ "plugins": [
"https://plugins.dprint.dev/typescript-0.95.15.wasm", "https://plugins.dprint.dev/typescript-0.95.13.wasm",
"https://plugins.dprint.dev/json-0.21.1.wasm", "https://plugins.dprint.dev/json-0.21.1.wasm",
"https://plugins.dprint.dev/markdown-0.21.1.wasm", "https://plugins.dprint.dev/markdown-0.20.0.wasm",
"https://plugins.dprint.dev/toml-0.7.0.wasm", "https://plugins.dprint.dev/toml-0.7.0.wasm",
"https://plugins.dprint.dev/dockerfile-0.3.3.wasm", "https://plugins.dprint.dev/dockerfile-0.3.3.wasm",
"https://plugins.dprint.dev/ruff-0.6.11.wasm",
"https://plugins.dprint.dev/jupyter-0.2.1.wasm",
"https://plugins.dprint.dev/g-plane/malva-v0.15.1.wasm",
"https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm", "https://plugins.dprint.dev/g-plane/markup_fmt-v0.25.3.wasm",
"https://plugins.dprint.dev/g-plane/pretty_yaml-v0.6.0.wasm", "https://plugins.dprint.dev/g-plane/pretty_yaml-v0.5.1.wasm",
"https://plugins.dprint.dev/g-plane/pretty_graphql-v0.2.3.wasm",
"https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364", "https://plugins.dprint.dev/exec-0.6.0.json@a054130d458f124f9b5c91484833828950723a5af3f8ff2bd1523bd47b83b364",
"https://plugins.dprint.dev/biome-0.11.10.wasm",
], ],
} }

45
.gitea/scripts/build.sh
View File

@@ -1,45 +0,0 @@
#!/usr/bin/env bash
set -euo pipefail
mkdir -p app/static
cp CHANGELOG.md app/static/CHANGELOG.md
# Derive branch/tag info
REF_TYPE="${GITHUB_REF_TYPE:-branch}"
REF_NAME="${GITHUB_REF_NAME:-$(basename "$GITHUB_REF")}"
BRANCH="${GITHUB_HEAD_REF:-}"
if [[ -z "$BRANCH" && "$REF_TYPE" == "branch" ]]; then
BRANCH="$REF_NAME"
fi
# Determine last tag and commits since
LAST_TAG="$(git describe --tags --abbrev=0 2>/dev/null || true)"
if [[ -n "$LAST_TAG" ]]; then
COMMITS_SINCE_LAST_RELEASE="$(git rev-list --count "${LAST_TAG}..HEAD")"
else
COMMITS_SINCE_LAST_RELEASE="0"
fi
commit_message=$(git log -1 --pretty=%B | tr -d '\n' | sed 's/"/\\"/g')
cat >app/static/git.json <<EOF
{
"ref": "${GITHUB_REF:-}",
"ref_name": "${REF_NAME}",
"ref_type": "${REF_TYPE}",
"sha": "${GITHUB_SHA:-}",
"run_number": "${GITHUB_RUN_NUMBER:-}",
"event_name": "${GITHUB_EVENT_NAME:-}",
"workflow": "${GITHUB_WORKFLOW:-}",
"job": "${GITHUB_JOB:-}",
"commit_message": "${commit_message}",
"commit_timestamp": "$(git log -1 --pretty=%cI)",
"branch": "${BRANCH}",
"commits_since_last_release": "${COMMITS_SINCE_LAST_RELEASE}"
}
EOF
pnpm build
cp -R packages/ui/build app/build/ui

75
.gitea/scripts/create-release.sh
View File

@@ -5,21 +5,16 @@ TAG="$GITHUB_REF_NAME"
VERSION=$(echo "$TAG" | sed 's/^v//') VERSION=$(echo "$TAG" | sed 's/^v//')
DATE=$(date +%Y-%m-%d) DATE=$(date +%Y-%m-%d)
echo "🚀 Creating release for $TAG" echo "🚀 Creating release for $TAG (safe mode)"
# ------------------------------------------------------------------- # -------------------------------------------------------------------
# 1. Extract release notes from annotated tag # 1. Extract release notes from annotated tag
# ------------------------------------------------------------------- # -------------------------------------------------------------------
# Ensure the local git knows this is an annotated tag with metadata NOTES=$(git tag -l "$TAG" --format='%(contents)')
git fetch origin "refs/tags/$TAG:refs/tags/$TAG" --force
# %(contents) gets the whole message. if [ -z "$NOTES" ]; then
# If you want ONLY what you typed after the first line, use %(contents:body) echo "❌ Tag message is empty"
NOTES=$(git tag -l "$TAG" --format='%(contents)' | sed '/-----BEGIN PGP SIGNATURE-----/,/-----END PGP SIGNATURE-----/d')
if [ -z "$(echo "$NOTES" | tr -d '[:space:]')" ]; then
echo "❌ Tag message is empty or tag is not annotated"
exit 1 exit 1
fi fi
@@ -28,40 +23,26 @@ git checkout main
# ------------------------------------------------------------------- # -------------------------------------------------------------------
# 2. Update all package.json versions # 2. Update all package.json versions
# ------------------------------------------------------------------- # -------------------------------------------------------------------
echo "🔧 Updating package.json versions to $VERSION" echo "🔧 Updating package.json versions to $VERSION"
find . -name package.json ! -path "*/node_modules/*" | while read -r file; do
find . -name package.json ! -path "*/node_modules/*" | while read file; do
tmp_file="$file.tmp" tmp_file="$file.tmp"
jq --arg v "$VERSION" '.version = $v' "$file" >"$tmp_file" jq --arg v "$VERSION" '.version = $v' "$file" >"$tmp_file"
mv "$tmp_file" "$file" mv "$tmp_file" "$file"
done done
# ------------------------------------------------------------------- # -------------------------------------------------------------------
# 3. Generate commit list since last release # 3. Update CHANGELOG.md (prepend)
# ------------------------------------------------------------------- # -------------------------------------------------------------------
LAST_TAG=$(git tag --sort=-creatordate | grep -v "^$TAG$" | head -n 1 || echo "")
if [ -n "$LAST_TAG" ]; then
# Filter out previous 'chore(release)' commits so the list stays clean
COMMITS=$(git log "$LAST_TAG"..HEAD --pretty=format:'* [%h](https://git.max-richter.dev/max/nodarium/commit/%H) %s' | grep -v "chore(release)")
else
COMMITS=$(git log HEAD --pretty=format:'* [%h](https://git.max-richter.dev/max/nodarium/commit/%H) %s' | grep -v "chore(release)")
fi
# -------------------------------------------------------------------
# 4. Update CHANGELOG.md (prepend)
# -------------------------------------------------------------------
tmp_changelog="CHANGELOG.tmp" tmp_changelog="CHANGELOG.tmp"
{ {
echo "# $TAG ($DATE)" echo "## $TAG ($DATE)"
echo "" echo ""
echo "$NOTES" echo "$NOTES"
echo "" echo ""
if [ -n "$COMMITS" ]; then echo "---"
echo "---"
echo ""
echo "$COMMITS"
echo ""
fi
echo "" echo ""
if [ -f CHANGELOG.md ]; then if [ -f CHANGELOG.md ]; then
cat CHANGELOG.md cat CHANGELOG.md
@@ -70,33 +51,27 @@ tmp_changelog="CHANGELOG.tmp"
mv "$tmp_changelog" CHANGELOG.md mv "$tmp_changelog" CHANGELOG.md
pnpm exec dprint fmt CHANGELOG.md
# ------------------------------------------------------------------- # -------------------------------------------------------------------
# 5. Setup GPG signing # 4. Create release commit
# ------------------------------------------------------------------- # -------------------------------------------------------------------
echo "$BOT_PGP_PRIVATE_KEY" | base64 -d | gpg --batch --import
GPG_KEY_ID=$(gpg --list-secret-keys --keyid-format LONG | grep sec | awk '{print $2}' | cut -d'/' -f2)
export GPG_TTY=$(tty) git config user.name "release-bot"
echo "allow-loopback-pinentry" >>~/.gnupg/gpg-agent.conf git config user.email "release-bot@ci"
gpg-connect-agent reloadagent /bye
git config user.name "nodarium-bot" git add CHANGELOG.md $(find . -name package.json ! -path "*/node_modules/*")
git config user.email "nodarium-bot@max-richter.dev"
git config --global user.signingkey "$GPG_KEY_ID"
git config --global commit.gpgsign true
# -------------------------------------------------------------------
# 6. Create release commit
# -------------------------------------------------------------------
git add CHANGELOG.md $(git ls-files '**/package.json')
# Skip commit if nothing changed
if git diff --cached --quiet; then if git diff --cached --quiet; then
echo "No changes to commit for release $TAG" echo "No changes to commit for release $TAG"
else exit 0
git commit -m "chore(release): $TAG"
git push origin main
fi fi
echo "✅ Release process for $TAG complete" git commit -m "chore(release): $TAG"
# -------------------------------------------------------------------
# 5. Push changes
# -------------------------------------------------------------------
git push origin main
echo "✅ Release commit for $TAG created successfully (tag untouched)"

43
.gitea/scripts/deploy-files.sh
View File

@@ -1,43 +0,0 @@
#!/usr/bin/env bash
set -euo pipefail
echo "Configuring rclone"
KEY_FILE="$(mktemp)"
echo "${SSH_PRIVATE_KEY}" >"${KEY_FILE}"
chmod 600 "${KEY_FILE}"
mkdir -p ~/.config/rclone
cat >~/.config/rclone/rclone.conf <<EOF
[sftp-remote]
type = sftp
host = ${SSH_HOST}
user = ${SSH_USER}
port = ${SSH_PORT}
key_file = ${KEY_FILE}
EOF
if [[ "${GITHUB_REF_TYPE:-}" == "tag" ]]; then
TARGET_DIR="${REMOTE_DIR}"
elif [[ "${GITHUB_EVENT_NAME:-}" == "pull_request" ]]; then
SAFE_PR_NAME="${GITHUB_HEAD_REF//\//-}"
TARGET_DIR="${REMOTE_DIR}_${SAFE_PR_NAME}"
elif [[ "${GITHUB_REF_NAME:-}" == "main" ]]; then
TARGET_DIR="${REMOTE_DIR}_main"
else
SAFE_REF="${GITHUB_REF_NAME//\//-}"
TARGET_DIR="${REMOTE_DIR}_${SAFE_REF}"
fi
echo "Deploying to ${TARGET_DIR}"
rclone sync \
--update \
--verbose \
--progress \
--exclude _astro/** \
--stats 2s \
--stats-one-line \
--transfers 4 \
./app/build/ \
"sftp-remote:${TARGET_DIR}"

59
.gitea/workflows/benchmark.yaml
View File

@@ -1,59 +0,0 @@
name: 📊 Benchmark the Runtime
on:
push:
branches: ["*"]
pull_request:
branches: ["*"]
env:
PNPM_CACHE_FOLDER: .pnpm-store
CARGO_HOME: .cargo
CARGO_TARGET_DIR: target
jobs:
release:
runs-on: ubuntu-latest
container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47
steps:
- name: 📑 Checkout Code
uses: actions/checkout@v4
with:
fetch-depth: 0
token: ${{ secrets.GITEA_TOKEN }}
- name: 💾 Setup pnpm Cache
uses: actions/cache@v4
with:
path: ${{ env.PNPM_CACHE_FOLDER }}
key: ${{ runner.os }}-pnpm-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-
- name: 🦀 Cache Cargo
uses: actions/cache@v4
with:
path: |
~/.cargo/registry
~/.cargo/git
target
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
restore-keys: |
${{ runner.os }}-cargo-
- name: 📦 Install Dependencies
run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }}
- name: 🛠️Build Nodes
run: pnpm build:nodes
- name: 🏃 Execute Runtime
run: pnpm run --filter @nodarium/app bench
- name: 📤 Upload Benchmark Results
uses: actions/upload-artifact@v3
with:
name: benchmark-data
path: app/benchmark/out/
compression: 9

41
.gitea/workflows/build-ci-image.yaml
View File

@@ -1,41 +0,0 @@
name: Build & Push CI Image
on:
push:
branches:
- main
paths:
- "Dockerfile.ci"
- ".gitea/workflows/build-ci-image.yaml"
jobs:
build-and-push:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v4
- name: Set up Docker BuildX
uses: docker/setup-buildx-action@v2
with:
config-inline: |
[registry."git.max-richter.dev"]
https = true
insecure = false
- name: Login to Gitea Registry
uses: docker/login-action@v3
with:
registry: git.max-richter.dev
username: ${{ gitea.actor }}
password: ${{ secrets.REGISTRY_TOKEN }}
- name: Build and Push
uses: docker/build-push-action@v5
with:
context: .
file: ./Dockerfile.ci
push: true
tags: |
git.max-richter.dev/${{ gitea.repository }}-ci:latest
git.max-richter.dev/${{ gitea.repository }}-ci:${{ gitea.sha }}

63
.gitea/workflows/release.yaml
View File

@@ -1,28 +1,24 @@
name: 🚀 Lint & Test & Deploy name: 🚀 Release
on: on:
push: push:
branches: ["*"] branches: ["*"]
tags: ["*"] tags: ["*"]
pull_request:
branches: ["*"]
env: env:
PNPM_CACHE_FOLDER: .pnpm-store PNPM_CACHE_FOLDER: ~/.pnpm-store
CARGO_HOME: .cargo
CARGO_TARGET_DIR: target
jobs: jobs:
release: release:
runs-on: ubuntu-latest runs-on: ubuntu-latest
container: git.max-richter.dev/max/nodarium-ci:bce06da456e3c008851ac006033cfff256015a47 container: jimfx/nodes:latest
steps: steps:
- name: 📑 Checkout Code - name: 📑 Checkout Code
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 fetch-depth: 0
token: ${{ secrets.GITEA_TOKEN }} token: ${{ secrets.GITHUB_TOKEN }}
- name: 💾 Setup pnpm Cache - name: 💾 Setup pnpm Cache
uses: actions/cache@v4 uses: actions/cache@v4
@@ -32,52 +28,31 @@ jobs:
restore-keys: | restore-keys: |
${{ runner.os }}-pnpm- ${{ runner.os }}-pnpm-
- name: 🦀 Cache Cargo
uses: actions/cache@v4
with:
path: |
~/.cargo/registry
~/.cargo/git
target
key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}
restore-keys: |
${{ runner.os }}-cargo-
- name: 📦 Install Dependencies - name: 📦 Install Dependencies
run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }} run: pnpm install --frozen-lockfile --store-dir ${{ env.PNPM_CACHE_FOLDER }}
- name: 🧹 Quality Control - name: 🧹 Lint
run: | run: pnpm lint
pnpm lint
pnpm format:check
pnpm check
pnpm build
xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" pnpm test
- name: 🚀 Create Release Commit - name: 🎨 Format Check
if: gitea.ref_type == 'tag' run: pnpm format:check
run: ./.gitea/scripts/create-release.sh
env: - name: 🧬 Type Check
BOT_PGP_PRIVATE_KEY: ${{ secrets.BOT_PGP_PRIVATE_KEY }} run: pnpm check
- name: 🛠️ Build - name: 🛠️ Build
run: ./.gitea/scripts/build.sh run: pnpm build:deploy
- name: 🚀 Create Release Commit
if: github.ref_type == 'tag'
run: ./.gitea/scripts/create-release.sh
- name: 🏷️ Create Gitea Release - name: 🏷️ Create Gitea Release
if: gitea.ref_type == 'tag' if: github.ref_type == 'tag'
uses: akkuman/gitea-release-action@v1 uses: akkuman/gitea-release-action@v1
with: with:
tag_name: ${{ gitea.ref_name }} tag_name: ${{ github.ref_name }}
release_name: Release ${{ gitea.ref_name }} release_name: Release ${{ github.ref_name }}
body_path: CHANGELOG.md body_path: CHANGELOG.md
draft: false draft: false
prerelease: false prerelease: false
- name: 🚀 Deploy Changed Files via rclone
run: ./.gitea/scripts/deploy-files.sh
env:
REMOTE_DIR: ${{ vars.REMOTE_DIR }}
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
SSH_HOST: ${{ vars.SSH_HOST }}
SSH_PORT: ${{ vars.SSH_PORT }}
SSH_USER: ${{ vars.SSH_USER }}

2
.gitignore vendored
View File

@@ -5,5 +5,3 @@ node_modules/
/target /target
.direnv/ .direnv/
.pnpm-store/

198
CHANGELOG.md
View File

@@ -1,198 +0,0 @@
# v0.0.5 (2026-02-13)
## Features
- Implement debug node with full runtime integration, wildcard (`*`) inputs, variable-height nodes and parameters, and a quick-connect shortcut.
- Add color-coded node sockets and edges to visually indicate data types.
- Recursively merge `localState` with the initial state to safely handle outdated settings stored in `localStorage` when the settings schema changes.
- Clamp the Add Menu to the viewport.
- Add application favicon.
- Consolidate all developer settings into a single **Advanced Mode** setting.
## Fixes
- Fix InputNumber arrow visibility in the light theme.
- Correct changelog formatting issues.
## Chores
- Add `pnpm qa` pre-commit command.
- Run linting and type checks before build in CI.
- Sign release commits with a PGP key.
- General formatting, lint/type cleanup, test snapshot updates, and `.gitignore` maintenance.
---
- [f16ba26](https://git.max-richter.dev/max/nodarium/commit/f16ba2601ff0e8f0f4454e24689499112a2a257a) fix(ci): still trying to get gpg to work
- [cc6b832](https://git.max-richter.dev/max/nodarium/commit/cc6b832f1576356e5453ee4289b02f854152ff9a) fix(ci): trying to get gpg to work
- [dd5fd5b](https://git.max-richter.dev/max/nodarium/commit/dd5fd5bf1715d371566bd40419b72ca05e63401e) fix(ci): better add updates to package.json
- [38d0fff](https://git.max-richter.dev/max/nodarium/commit/38d0fffcf4ca0a346857c3658ccefdfcdf16e217) chore: update ci image
- [bce06da](https://git.max-richter.dev/max/nodarium/commit/bce06da456e3c008851ac006033cfff256015a47) ci: add gpg-agent to ci image
- [af585d5](https://git.max-richter.dev/max/nodarium/commit/af585d56ec825662961c8796226ed9d8cb900795) feat: use new ci image with gpg
- [0aa73a2](https://git.max-richter.dev/max/nodarium/commit/0aa73a27c1f23bea177ecc66034f8e0384c29a8e) feat: install gpg in ci image
- [c1ae702](https://git.max-richter.dev/max/nodarium/commit/c1ae70282cb5d58527180614a80823d80ca478c5) feat: add color to sockets
- [4c7b03d](https://git.max-richter.dev/max/nodarium/commit/4c7b03dfb82174317d8ba01f4725af804201154d) feat: add gradient mesh line
- [144e8cc](https://git.max-richter.dev/max/nodarium/commit/144e8cc797cfcc5a7a1fd9a0a2098dc99afb6170) fix: correctly highlight possible outputs
- [12ff9c1](https://git.max-richter.dev/max/nodarium/commit/12ff9c151873d253ed2e54dcf56aa9c9c4716c7c) Merge pull request 'feat/debug-node' (#41) from feat/debug-node into main
- [8d3ffe8](https://git.max-richter.dev/max/nodarium/commit/8d3ffe84ab9ca9e6d6d28333752e34da878fd3ea) Merge branch 'main' into feat/debug-node
- [95ec93e](https://git.max-richter.dev/max/nodarium/commit/95ec93eeada9bf062e01e1e77b67b8f0343a51bf) feat: better handle ctrl+shift clicks and selections
- [d39185e](https://git.max-richter.dev/max/nodarium/commit/d39185efafc360f49ab9437c0bad1f64665df167) feat: add "pnpm qa" command to check before commit
- [81580cc](https://git.max-richter.dev/max/nodarium/commit/81580ccd8c1db30ce83433c4c4df84bd660d3460) fix: cleanup some type errors
- [bf6f632](https://git.max-richter.dev/max/nodarium/commit/bf6f632d2772c3da812d5864c401f17e1aa8666a) feat: add shortcut to quick connect to debug
- [e098be6](https://git.max-richter.dev/max/nodarium/commit/e098be60135f57cf863904a58489e032ed27e8b4) fix: also execute all nodes before debug node
- [ec13850](https://git.max-richter.dev/max/nodarium/commit/ec13850e1c0ca5846da614d25887ff492cf8be04) fix: make debug node work with runtime
- [15e08a8](https://git.max-richter.dev/max/nodarium/commit/15e08a816339bdf9de9ecb6a57a7defff42dbe8c) feat: implement debug node
- [48cee58](https://git.max-richter.dev/max/nodarium/commit/48cee58ad337c1c6c59a0eb55bf9b5ecd16b99d0) chore: update test snapshots
- [3235cae](https://git.max-richter.dev/max/nodarium/commit/3235cae9049e193c242b6091cee9f01e67ee850e) chore: fix lint and typecheck errors
- [3f44072](https://git.max-richter.dev/max/nodarium/commit/3f440728fc8a94d59022bb545f418be049a1f1ba) feat: implement variable height for node shader
- [da09f8b](https://git.max-richter.dev/max/nodarium/commit/da09f8ba1eda5ed347433d37064a3b4ab49e627e) refactor: move debug node into runtime
- [ddc3b4c](https://git.max-richter.dev/max/nodarium/commit/ddc3b4ce357ef1c1e8066c0a52151713d0b6ed95) feat: allow variable height node parameters
- [2690fc8](https://git.max-richter.dev/max/nodarium/commit/2690fc871291e73d3d028df9668e8fffb1e77476) chore: gitignore pnpm-store
- [072ab90](https://git.max-richter.dev/max/nodarium/commit/072ab9063ba56df0673020eb639548f3a8601e04) feat: add initial debug node
- [e23cad2](https://git.max-richter.dev/max/nodarium/commit/e23cad254d610e00f196b7fdb4532f36fd735a4b) feat: add "*" datatype for inputs for debug node
- [5b5c63c](https://git.max-richter.dev/max/nodarium/commit/5b5c63c1a9c4ef757382bd4452149dc9777693ff) fix(ui): make arrows on inputnumber visible on lighttheme
- [c9021f2](https://git.max-richter.dev/max/nodarium/commit/c9021f2383828f2e2b5594d125165bbc8f70b8e7) refactor: merge all dev settings into one setting
- [9eecdd4](https://git.max-richter.dev/max/nodarium/commit/9eecdd4fb85dc60b8196101050334e26732c9a34) Merge pull request 'feat: merge localState recursively with initial' (#38) from feat/debug-node into main
- [7e71a41](https://git.max-richter.dev/max/nodarium/commit/7e71a41e5229126d404f56598c624709961dbf3b) feat: merge localState recursively with initial
- [07cd9e8](https://git.max-richter.dev/max/nodarium/commit/07cd9e84eb51bc02b7fed39c36cf83caba175ad7) feat: clamp AddMenu to viewport
- [a31a49a](https://git.max-richter.dev/max/nodarium/commit/a31a49ad503d69f92f2491dd685729060ea49896) ci: lint and typecheck before build
- [850d641](https://git.max-richter.dev/max/nodarium/commit/850d641a25cd0c781478c58c117feaf085bdbc62) chore: pnpm format
- [ee5ca81](https://git.max-richter.dev/max/nodarium/commit/ee5ca817573b83cacfa3709e0ae88c6263bc39c1) ci: sign release commits with pgp key
- [22a1183](https://git.max-richter.dev/max/nodarium/commit/22a11832b861ae8b44e2d374b55d12937ecab247) fix(ci): correctly format changelog
- [b5ce572](https://git.max-richter.dev/max/nodarium/commit/b5ce5723fa4a35443df39a9096d0997f808f0b4f) chore: format favicon svg
- [102130c](https://git.max-richter.dev/max/nodarium/commit/102130cc7777ceebcdb3de8466c90cef5b380111) feat: add favicon
- [1668a2e](https://git.max-richter.dev/max/nodarium/commit/1668a2e6d59db071ab3da45204c2b7bfcd2150a2) chore: format changelog.md
# v0.0.4 (2026-02-10)
## Features
- Added shape and leaf nodes, including rotation support.
- Added high-contrast light theme and improved overall node readability.
- Enhanced UI with dots background, clearer details, and consistent node coloring.
- Improved changelog display and parsing robustness.
## Fixes
- Fixed UI issues (backside rendering, missing types, linter errors).
- Improved CI handling of commit messages and changelog placement.
## Chores
- Simplified CI quality checks.
- Updated dprint linters.
- Refactored changelog code.
---
- [51de3ce](https://git.max-richter.dev/max/nodarium/commit/51de3ced133af07b9432e1137068ef43ddfecbc9) fix(ci): update changelog before building
- [8d403ba](https://git.max-richter.dev/max/nodarium/commit/8d403ba8039a05b687f050993a6afca7fb743e12) Merge pull request 'feat/shape-node' (#36) from feat/shape-node into main
- [6bb3011](https://git.max-richter.dev/max/nodarium/commit/6bb301153ac13c31511b6b28ae95c6e0d4c03e9e) Merge remote-tracking branch 'origin/main' into feat/shape-node
- [02eee5f](https://git.max-richter.dev/max/nodarium/commit/02eee5f9bf4b1bc813d5d28673c4d5d77b392a92) fix: disable macro logs in wasm
- [4f48a51](https://git.max-richter.dev/max/nodarium/commit/4f48a519a950123390530f1b6040e2430a767745) feat(nodes): add rotation to instance node
- [97199ac](https://git.max-richter.dev/max/nodarium/commit/97199ac20fb079d6c157962d1a998d63670d8797) feat(nodes): implement leaf node
- [f36f0cb](https://git.max-richter.dev/max/nodarium/commit/f36f0cb2305692c7be60889bcde7f91179e18b81) feat(ui): show circles only when hovering InputShape
- [ed3d48e](https://git.max-richter.dev/max/nodarium/commit/ed3d48e07fa6db84bbb24db6dbe044cbc36f049f) fix(runtime): correctly encode 2d shape for wasm nodes
- [c610d6c](https://git.max-richter.dev/max/nodarium/commit/c610d6c99152d8233235064b81503c2b0dc4ada8) fix(app): show backside in three instances
- [8865b9b](https://git.max-richter.dev/max/nodarium/commit/8865b9b032bdf5a1385b4e9db0b1923f0e224fdd) feat(node): initial leaf / shape nodes
- [235ee5d](https://git.max-richter.dev/max/nodarium/commit/235ee5d979fbd70b3e0fb6f09a352218c3ff1e6d) fix(app): wrong linter errors in changelog
- [23a4857](https://git.max-richter.dev/max/nodarium/commit/23a48572f3913d91d839873cc155a16139c286a6) feat(app): dots background for node interface
- [e89a46e](https://git.max-richter.dev/max/nodarium/commit/e89a46e146e9e95de57ffdf55b05d16d6fe975f4) feat(app): add error page
- [cefda41](https://git.max-richter.dev/max/nodarium/commit/cefda41fcf3d5d011c9f7598a4f3f37136602dbd) feat(theme): optimize node readability
- [21d0f0d](https://git.max-richter.dev/max/nodarium/commit/21d0f0da5a26492fa68ad4897a9b1d9e88857030) feat: add high-contrast-light theme
- [4620245](https://git.max-richter.dev/max/nodarium/commit/46202451ba3eea73bd1bc6ef5129b3e26ee9315c) ci: simplify ci quality checks
- [0f4239d](https://git.max-richter.dev/max/nodarium/commit/0f4239d179ddedd3d012ca98b5bc3312afbc8f10) ci: simplify ci quality checks
- [d9c9bb5](https://git.max-richter.dev/max/nodarium/commit/d9c9bb5234bc8776daf26be99ba77a2145c70649) fix(theme): allow raw html in head style
- [18802fd](https://git.max-richter.dev/max/nodarium/commit/18802fdc10294a58425f052a4fde4bcf4be58caf) fix(ui): add missing types
- [b1cbd23](https://git.max-richter.dev/max/nodarium/commit/b1cbd235420c99a11154ef6a899cc7e14faf1c37) feat(app): use same color for node outline and header
- [33f10da](https://git.max-richter.dev/max/nodarium/commit/33f10da396fdc13edcb8faaee212280102b24f3a) feat(ui): make details stand out
- [af5b3b2](https://git.max-richter.dev/max/nodarium/commit/af5b3b23ba18d73d6abec60949fb0c9edfc25ff8) fix: make sure that CHANGELOG.md is in correct place
- [64d75b9](https://git.max-richter.dev/max/nodarium/commit/64d75b9686c494075223a0a318297fe59ec99e81) feat(ui): add InputColor and custom theme
- [2e6466c](https://git.max-richter.dev/max/nodarium/commit/2e6466ceca1d2131581d1862e93c756affdf6cd6) chore: update dprint linters
- [20d8e2a](https://git.max-richter.dev/max/nodarium/commit/20d8e2abedf0de30299d947575afef9c8ffd61d9) feat(theme): improve light theme a bit
- [715e1d0](https://git.max-richter.dev/max/nodarium/commit/715e1d095b8a77feb0cf66bbb444baf0f163adcb) feat(theme): merge edge and connection color
- [07e2826](https://git.max-richter.dev/max/nodarium/commit/07e2826f16dafa6a07377c9fb591168fa5c2abcf) feat(ui): improve colors of input shape
- [e0ad97b](https://git.max-richter.dev/max/nodarium/commit/e0ad97b003fd8cb4d950c03e5488a5accf6a37d0) feat(ui): highlight circle on hover on InputShape
- [93df4a1](https://git.max-richter.dev/max/nodarium/commit/93df4a19ff816e2bdfa093594721f0829f84c9e6) fix(ci): handle newline in commit messages for git.json
- [d661a4e](https://git.max-richter.dev/max/nodarium/commit/d661a4e4a9dfa6c9c73b5e24a3edcf56e1bbf48c) feat(ui): improve InputShape ux
- [c7f808c](https://git.max-richter.dev/max/nodarium/commit/c7f808ce2d52925425b49f92edf49d9557f8901d) wip
- [72d6cd6](https://git.max-richter.dev/max/nodarium/commit/72d6cd6ea2886626823e6e86856f19338c7af3c1) feat(ui): add initial InputShape element
- [615f2d3](https://git.max-richter.dev/max/nodarium/commit/615f2d3c4866a9e85f3eca398f3f02100c4df355) feat(ui): allow custom snippets in ui section header
- [2fadb68](https://git.max-richter.dev/max/nodarium/commit/2fadb6802de640d692fdab7d654311df0d7b4836) refactor: make changelog code simpler
- [9271d3a](https://git.max-richter.dev/max/nodarium/commit/9271d3a7e4cb0cc751b635c2adb518de7b4100c7) fix(app): handle error while parsing commit
- [13c83ef](https://git.max-richter.dev/max/nodarium/commit/13c83efdb962a6578ade59f10cc574fef0e17534) fix(app): handle error while parsing changelog
- [e44b73b](https://git.max-richter.dev/max/nodarium/commit/e44b73bebfb1cc8e872cd2fa7d8b6ff3565df374) feat: optimize changelog display
- [979e9fd](https://git.max-richter.dev/max/nodarium/commit/979e9fd92289eba9f77221c563337c00028e4cf5) feat: improve changelog readbility
- [544500e](https://git.max-richter.dev/max/nodarium/commit/544500e7fe9ee14412cef76f3c7a32ba6f291656) chore: remove pgp from changelog
- [aaebbc4](https://git.max-richter.dev/max/nodarium/commit/aaebbc4bc082ee93c2317ce45071c9bc61b0b77e) fix: some stuff with ci
# v0.0.3 (2026-02-07)
## Features
- Edge dragging now highlights valid connection sockets, improving graph editing clarity.
- InputNumber supports snapping to predefined values while holding Alt.
- Changelog is accessible directly from the sidebar and now includes git metadata and a list of commits.
## Fixes
- Fixed incorrect socket highlighting when an edge already existed.
- Corrected initialization of `InputNumber` values outside min/max bounds.
- Fixed initialization of nested vec3 inputs.
- Multiple CI fixes to ensure reliable builds, correct environment variables, and proper image handling.
## Maintenance / CI
- Significant CI and Dockerfile cleanup and optimization.
- Improved git metadata generation during builds.
- Dependency updates, formatting, and test snapshot updates.
---
- [f8a2a95](https://git.max-richter.dev/max/nodarium/commit/f8a2a95bc18fa3c8c1db67dc0c2b66db1ff0d866) chore: clean CHANGELOG.md
- [c9dd143](https://git.max-richter.dev/max/nodarium/commit/c9dd143916d758991f3ba30723a32c18b6f98bb5) fix(ci): correctly add release notes from tag to changelog
- [898dd49](https://git.max-richter.dev/max/nodarium/commit/898dd49aee930350af8645382ef5042765a1fac7) fix(ci): correctly copy changelog to build output
- [9fb69d7](https://git.max-richter.dev/max/nodarium/commit/9fb69d760fdf92ecc2448e468242970ec48443b0) feat: show commits since last release in changelog
- [bafbcca](https://git.max-richter.dev/max/nodarium/commit/bafbcca2b8a7cd9f76e961349f11ec84d1e4da63) fix: wrong socket was highlighted when dragging node
- [8ad9e55](https://git.max-richter.dev/max/nodarium/commit/8ad9e5535cd752ef111504226b4dac57b5adcf3d) feat: highlight possible sockets when dragging edge
- [11eaeb7](https://git.max-richter.dev/max/nodarium/commit/11eaeb719be7f34af8db8b7908008a15308c0cac) feat(app): display some git metadata in changelog
- [74c2978](https://git.max-richter.dev/max/nodarium/commit/74c2978cd16d2dd95ce1ae8019dfb9098e52b4b6) chore: cleanup git.json a bit
- [4fdc247](https://git.max-richter.dev/max/nodarium/commit/4fdc24790490d3f13ee94a557159617f4077a2f9) ci: update build.sh to correct git.json
- [c3f8b4b](https://git.max-richter.dev/max/nodarium/commit/c3f8b4b5aad7a525fb11ab14c9236374cb60442d) ci: debug available env vars
- [67591c0](https://git.max-richter.dev/max/nodarium/commit/67591c0572b873d8c7cd00db8efb7dac2d6d4de2) chore: pnpm format
- [de1f9d6](https://git.max-richter.dev/max/nodarium/commit/de1f9d6ab669b8e699d98b8855e125e21030b5b3) feat(ui): change inputnumber to snap to values when alt is pressed
- [6acce72](https://git.max-richter.dev/max/nodarium/commit/6acce72fb8c416cc7f6eec99c2ae94d6529e960c) fix(ui): correctly initialize InputNumber
- [cf8943b](https://git.max-richter.dev/max/nodarium/commit/cf8943b2059aa286e41865caf75058d35498daf7) chore: pnpm update
- [9e03d36](https://git.max-richter.dev/max/nodarium/commit/9e03d36482bb4f972c384b66b2dcf258f0cd18be) chore: use newest ci image
- [fd7268d](https://git.max-richter.dev/max/nodarium/commit/fd7268d6208aede435e1685817ae6b271c68bd83) ci: make dockerfile work
- [6358c22](https://git.max-richter.dev/max/nodarium/commit/6358c22a853ec340be5223fabb8289092e4f4afe) ci: use tagged own image for ci
- [655b6a1](https://git.max-richter.dev/max/nodarium/commit/655b6a18b282f0cddcc750892e575ee6c311036b) ci: make dockerfile work
- [37b2bdc](https://git.max-richter.dev/max/nodarium/commit/37b2bdc8bdbd8ded6b22b89214b49de46f788351) ci: update ci Dockerfile to work
- [94e01d4](https://git.max-richter.dev/max/nodarium/commit/94e01d4ea865f15ce06b52827a1ae6906de5be5e) ci: correctly build and push ci image
- [35f5177](https://git.max-richter.dev/max/nodarium/commit/35f5177884b62bbf119af1bbf4df61dd0291effb) feat: try to optimize the Dockerfile
- [ac2c61f](https://git.max-richter.dev/max/nodarium/commit/ac2c61f2211ba96bbdbb542179905ca776537cec) ci: use actual git url in ci
- [ef3d462](https://git.max-richter.dev/max/nodarium/commit/ef3d46279f4ff9c04d80bb2d9a9e7cfec63b224e) fix(ci): build before testing
- [703da32](https://git.max-richter.dev/max/nodarium/commit/703da324fabbef0e2c017f0f7a925209fa26bd03) ci: automatically build ci image and store locally
- [1dae472](https://git.max-richter.dev/max/nodarium/commit/1dae472253ccb5e3766f2270adc053b922f46738) ci: add a git.json metadata file during build
- [09fdfb8](https://git.max-richter.dev/max/nodarium/commit/09fdfb88cd203ace0e36663ebdb2c8c7ba53f190) chore: update test screenshots
- [04b63cc](https://git.max-richter.dev/max/nodarium/commit/04b63cc7e2fc4fcfa0973cf40592d11457179db3) feat: add changelog to sidebar
- [cb6a356](https://git.max-richter.dev/max/nodarium/commit/cb6a35606dfda50b0c81b04902d7a6c8e59458d2) feat(ci): also cache cargo stuff
- [9c9f3ba](https://git.max-richter.dev/max/nodarium/commit/9c9f3ba3b7c94215a86b0a338a5cecdd87b96b28) fix(ci): use GITHUB_instead of GITEA_ for env vars
- [08dda2b](https://git.max-richter.dev/max/nodarium/commit/08dda2b2cb4d276846abe30bc260127626bb508a) chore: pnpm format
- [059129a](https://git.max-richter.dev/max/nodarium/commit/059129a738d02b8b313bb301a515697c7c4315ac) fix(ci): deploy prs and main
- [437c9f4](https://git.max-richter.dev/max/nodarium/commit/437c9f4a252125e1724686edace0f5f006f58439) feat(ci): add list of all commits to changelog entry
- [48bf447](https://git.max-richter.dev/max/nodarium/commit/48bf447ce12949d7c29a230806d160840b7847e1) docs: straighten up changelog a bit
- [548fa4f](https://git.max-richter.dev/max/nodarium/commit/548fa4f0a1a14adc40a74da1182fa6da81eab3df) fix(app): correctly initialize vec3 inputs in nestedsettings
# v0.0.2 (2026-02-04)
## Fixes
---
- []() fix(ci): actually deploy on tags
- []() fix(app): correctly handle false value in settings
# v0.0.1 (2026-02-03)
chore: format

24
Cargo.lock generated
View File

@@ -24,14 +24,6 @@ dependencies = [
"nodarium_utils", "nodarium_utils",
] ]
[[package]]
name = "debug"
version = "0.1.0"
dependencies = [
"nodarium_macros",
"nodarium_utils",
]
[[package]] [[package]]
name = "float" name = "float"
version = "0.1.0" version = "0.1.0"
@@ -70,14 +62,6 @@ version = "1.0.17"
source = "registry+https://github.com/rust-lang/crates.io-index" source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2" checksum = "92ecc6618181def0457392ccd0ee51198e065e016d1d527a7ac1b6dc7c1f09d2"
[[package]]
name = "leaf"
version = "0.1.0"
dependencies = [
"nodarium_macros",
"nodarium_utils",
]
[[package]] [[package]]
name = "math" name = "math"
version = "0.1.0" version = "0.1.0"
@@ -261,14 +245,6 @@ dependencies = [
"zmij", "zmij",
] ]
[[package]]
name = "shape"
version = "0.1.0"
dependencies = [
"nodarium_macros",
"nodarium_utils",
]
[[package]] [[package]]
name = "stem" name = "stem"
version = "0.1.0" version = "0.1.0"

19
Dockerfile Normal file
View File

@@ -0,0 +1,19 @@
FROM node:24-alpine
# Install all required packages in one layer
RUN apk add --no-cache curl git jq g++ make
# Set Rust paths
ENV RUSTUP_HOME=/usr/local/rustup \
CARGO_HOME=/usr/local/cargo \
PATH=/usr/local/cargo/bin:$PATH
# Install Rust, wasm target, and pnpm
RUN curl --silent --show-error --location --fail --retry 3 \
--proto '=https' --tlsv1.2 \
--output /tmp/rustup-init.sh https://sh.rustup.rs \
&& sh /tmp/rustup-init.sh -y --no-modify-path --profile minimal \
&& rm /tmp/rustup-init.sh \
&& rustup target add wasm32-unknown-unknown \
&& rm -rf /usr/local/rustup/toolchains/*/share/doc \
&& npm i -g pnpm

32
Dockerfile.ci
View File

@@ -1,32 +0,0 @@
FROM node:25-bookworm-slim
ENV RUSTUP_HOME=/usr/local/rustup \
CARGO_HOME=/usr/local/cargo \
PATH=/usr/local/cargo/bin:$PATH
RUN apt-get update && apt-get install -y \
ca-certificates=20230311+deb12u1 \
gpg=2.2.40-1.1+deb12u2 \
gpg-agent=2.2.40-1.1+deb12u2 \
curl=7.88.1-10+deb12u14 \
git=1:2.39.5-0+deb12u3 \
jq=1.6-2.1+deb12u1 \
g++=4:12.2.0-3 \
rclone=1.60.1+dfsg-2+b5 \
xvfb=2:21.1.7-3+deb12u11 \
xauth=1:1.1.2-1 \
--no-install-recommends \
# Install Rust
&& curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y \
--default-toolchain stable \
--profile minimal \
&& rustup target add wasm32-unknown-unknown \
# Setup Playwright
&& npm i -g pnpm \
&& pnpm dlx playwright install --with-deps firefox \
# Final Cleanup
&& rm -rf /usr/local/rustup/downloads /usr/local/rustup/tmp \
&& rm -rf /usr/local/cargo/registry/index /usr/local/cargo/registry/cache \
&& rm -rf /usr/local/rustup/toolchains/*/share/doc \
&& apt-get purge -y --auto-remove \
&& rm -rf /var/lib/apt/lists/*

1
README.md
View File

@@ -27,6 +27,7 @@ Currently this visual programming language is used to develop <https://nodes.max
- [Node.js](https://nodejs.org/en/download) - [Node.js](https://nodejs.org/en/download)
- [pnpm](https://pnpm.io/installation) - [pnpm](https://pnpm.io/installation)
- [rust](https://www.rust-lang.org/tools/install) - [rust](https://www.rust-lang.org/tools/install)
- wasm-pack
### Install dependencies ### Install dependencies

783
SHARED_MEMORY_REFACTOR_PLAN.md
View File

@@ -1,783 +0,0 @@
# Shared Memory Refactor Plan
## Executive Summary
Migrate to a single shared `WebAssembly.Memory` instance imported by all nodes using `--import-memory`. The `#[nodarium_execute]` macro writes the function's return value directly to shared memory at the specified offset.
## Architecture Overview
```
┌─────────────────────────────────────────────────────────────────────┐
│ Shared WebAssembly.Memory │
│ ┌───────────────────────────────────────────────────────────────┐ │
│ │ [Node A output] [Node B output] [Node C output] ... │ │
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │
│ │ │ Vec<i32> │ │ Vec<i32> │ │ Vec<i32> │ │ │
│ │ │ 4 bytes │ │ 12 bytes │ │ 2KB │ │ │
│ │ └────────────┘ └────────────┘ └────────────┘ │ │
│ │ │ │
│ │ offset: 0 ────────────────────────────────────────────────► │ │
│ └───────────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘
▲
│
│ import { memory } from "env"
┌─────────────────────────┼─────────────────────────┐
│ │ │
┌────┴────┐ ┌────┴────┐ ┌────┴────┐
│ Node A │ │ Node B │ │ Node C │
│ WASM │ │ WASM │ │ WASM │
└─────────┘ └─────────┘ └─────────┘
```
## Phase 1: Compilation Configuration
### 1.1 Cargo Config
```toml
# nodes/max/plantarium/box/.cargo/config.toml
[build]
rustflags = ["-C", "link-arg=--import-memory"]
```
Or globally in `Cargo.toml`:
```toml
[profile.release]
rustflags = ["-C", "link-arg=--import-memory"]
```
### 1.2 Import Memory Semantics
With `--import-memory`:
- Nodes **import** memory from the host (not export their own)
- All nodes receive the same `WebAssembly.Memory` instance
- Memory is read/write accessible from all modules
- No `memory.grow` needed (host manages allocation)
## Phase 2: Macro Design
### 2.1 Clean Node API
```rust
// input.json has 3 inputs: op_type, a, b
nodarium_definition_file!("src/input.json");
#[nodarium_execute]
pub fn execute(op_type: *i32, a: *i32, b: *i32) -> Vec<i32> {
// Read inputs directly from shared memory
let op = unsafe { *op_type };
let a_val = f32::from_bits(unsafe { *a } as u32);
let b_val = f32::from_bits(unsafe { *b } as u32);
let result = match op {
0 => a_val + b_val,
1 => a_val - b_val,
2 => a_val * b_val,
3 => a_val / b_val,
_ => 0.0,
};
// Return Vec<i32>, macro handles writing to shared memory
vec![result.to_bits()]
}
```
### 2.2 Macro Implementation
```rust
// packages/macros/src/lib.rs
#[proc_macro_attribute]
pub fn nodarium_execute(_attr: TokenStream, item: TokenStream) -> TokenStream {
let input_fn = parse_macro_input!(item as syn::ItemFn);
let fn_name = &input_fn.sig.ident;
// Parse definition to get input count
let project_dir = env::var("CARGO_MANIFEST_DIR").unwrap();
let def: NodeDefinition = serde_json::from_str(&fs::read_to_string(
Path::new(&project_dir).join("src/input.json")
).unwrap()).unwrap();
let input_count = def.inputs.as_ref().map(|i| i.len()).unwrap_or(0);
// Validate signature
validate_signature(&input_fn, input_count);
// Generate wrapper
generate_execute_wrapper(input_fn, fn_name, input_count)
}
fn validate_signature(fn_sig: &syn::Signature, expected_inputs: usize) {
let param_count = fn_sig.inputs.len();
if param_count != expected_inputs {
panic!(
"Execute function has {} parameters but definition has {} inputs\n\
Definition inputs: {:?}\n\
Expected signature:\n\
pub fn execute({}) -> Vec<i32>",
param_count,
expected_inputs,
def.inputs.as_ref().map(|i| i.keys().collect::<Vec<_>>()),
(0..expected_inputs)
.map(|i| format!("arg{}: *const i32", i))
.collect::<Vec<_>>()
.join(", ")
);
}
// Verify return type is Vec<i32>
match &fn_sig.output {
syn::ReturnType::Type(_, ty) => {
if !matches!(&**ty, syn::Type::Path(tp) if tp.path.is_ident("Vec")) {
panic!("Execute function must return Vec<i32>");
}
}
syn::ReturnType::Default => {
panic!("Execute function must return Vec<i32>");
}
}
}
fn generate_execute_wrapper(
input_fn: syn::ItemFn,
fn_name: &syn::Ident,
input_count: usize,
) -> TokenStream {
let arg_names: Vec<_> = (0..input_count)
.map(|i| syn::Ident::new(&format!("arg{}", i), proc_macro2::Span::call_site()))
.collect();
let expanded = quote! {
#input_fn
#[no_mangle]
pub extern "C" fn execute(
output_pos: i32,
#( #arg_names: i32 ),*
) -> i32 {
extern "C" {
fn __nodarium_log(ptr: *const u8, len: usize);
fn __nodarium_log_panic(ptr: *const u8, len: usize);
}
// Setup panic hook
static SET_HOOK: std::sync::Once = std::sync::Once::new();
SET_HOOK.call_once(|| {
std::panic::set_hook(Box::new(|info| {
let msg = info.to_string();
unsafe { __nodarium_log_panic(msg.as_ptr(), msg.len()); }
}));
});
// Call user function
let result = #fn_name(
#( #arg_names as *const i32 ),*
);
// Write result directly to shared memory at output_pos
let len_bytes = result.len() * 4;
unsafe {
let src = result.as_ptr() as *const u8;
let dst = output_pos as *mut u8;
dst.copy_from_nonoverlapping(src, len_bytes);
}
// Forget the Vec to prevent deallocation (data is in shared memory now)
core::mem::forget(result);
len_bytes as i32
}
};
TokenStream::from(expanded)
}
```
### 2.3 Generated Assembly
The macro generates:
```asm
; Input: output_pos in register r0, arg0 in r1, arg1 in r2, arg2 in r3
execute:
; Call user function
bl user_execute ; returns pointer to Vec<i32> in r0
; Calculate byte length
ldr r4, [r0, #8] ; Vec::len field
lsl r4, r4, #2 ; len * 4 (i32 = 4 bytes)
; Copy Vec data to shared memory at output_pos
ldr r5, [r0, #0] ; Vec::ptr field
ldr r6, [r0, #4] ; capacity (unused)
; memcpy(dst=output_pos, src=r5, len=r4)
; (implemented via copy_from_nonoverlapping)
; Return length
mov r0, r4
bx lr
```
## Phase 3: Input Reading Helpers
```rust
// packages/utils/src/accessor.rs
/// Read i32 from shared memory
#[inline]
pub unsafe fn read_i32(ptr: *const i32) -> i32 {
*ptr
}
/// Read f32 from shared memory (stored as i32 bits)
#[inline]
pub unsafe fn read_f32(ptr: *const i32) -> f32 {
f32::from_bits(*ptr as u32)
}
/// Read boolean from shared memory
#[inline]
pub unsafe fn read_bool(ptr: *const i32) -> bool {
*ptr != 0
}
/// Read vec3 (3 f32s) from shared memory
#[inline]
pub unsafe fn read_vec3(ptr: *const i32) -> [f32; 3] {
let p = ptr as *const f32;
[p.read(), p.add(1).read(), p.add(2).read()]
}
/// Read slice from shared memory
#[inline]
pub unsafe fn read_i32_slice(ptr: *const i32, len: usize) -> &[i32] {
std::slice::from_raw_parts(ptr, len)
}
/// Read f32 slice from shared memory
#[inline]
pub unsafe fn read_f32_slice(ptr: *const i32, len: usize) -> &[f32] {
std::slice::from_raw_parts(ptr as *const f32, len)
}
/// Read with default value
#[inline]
pub unsafe fn read_f32_default(ptr: *const i32, default: f32) -> f32 {
if ptr.is_null() { default } else { read_f32(ptr) }
}
#[inline]
pub unsafe fn read_i32_default(ptr: *const i32, default: i32) -> i32 {
if ptr.is_null() { default } else { read_i32(ptr) }
}
```
## Phase 4: Node Implementation Examples
### 4.1 Math Node
```rust
// nodes/max/plantarium/math/src/lib.rs
nodarium_definition_file!("src/input.json");
#[nodarium_execute]
pub fn execute(op_type: *const i32, a: *const i32, b: *const i32) -> Vec<i32> {
use nodarium_utils::{read_i32, read_f32};
let op = unsafe { read_i32(op_type) };
let a_val = unsafe { read_f32(a) };
let b_val = unsafe { read_f32(b) };
let result = match op {
0 => a_val + b_val, // add
1 => a_val - b_val, // subtract
2 => a_val * b_val, // multiply
3 => a_val / b_val, // divide
_ => 0.0,
};
vec![result.to_bits()]
}
```
### 4.2 Vec3 Node
```rust
// nodes/max/plantarium/vec3/src/lib.rs
nodarium_definition_file!("src/input.json");
#[nodarium_execute]
pub fn execute(x: *const i32, y: *const i32, z: *const i32) -> Vec<i32> {
use nodarium_utils::read_f32;
let x_val = unsafe { read_f32(x) };
let y_val = unsafe { read_f32(y) };
let z_val = unsafe { read_f32(z) };
vec![x_val.to_bits(), y_val.to_bits(), z_val.to_bits()]
}
```
### 4.3 Box Node
```rust
// nodes/max/plantarium/box/src/lib.rs
nodarium_definition_file!("src/input.json");
#[nodarium_execute]
pub fn execute(size: *const i32) -> Vec<i32> {
use nodarium_utils::{read_f32, encode_float, calculate_normals};
let size = unsafe { read_f32(size) };
let p = encode_float(size);
let n = encode_float(-size);
let mut cube_geometry = vec![
1, // 1: geometry
8, // 8 vertices
12, // 12 faces
// Face indices
0, 1, 2, 0, 2, 3,
0, 3, 4, 4, 5, 0,
6, 1, 0, 5, 6, 0,
7, 2, 1, 6, 7, 1,
2, 7, 3, 3, 7, 4,
7, 6, 4, 4, 6, 5,
// Bottom plate
p, n, n, p, n, p, n, n, p, n, n, n,
// Top plate
n, p, n, p, p, n, p, p, p, n, p, p,
// Normals
0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0,
];
calculate_normals(&mut cube_geometry);
cube_geometry
}
```
### 4.4 Stem Node
```rust
// nodes/max/plantarium/stem/src/lib.rs
nodarium_definition_file!("src/input.json");
#[nodarium_execute]
pub fn execute(
origin: *const i32,
amount: *const i32,
length: *const i32,
thickness: *const i32,
resolution: *const i32,
) -> Vec<i32> {
use nodarium_utils::{
read_vec3, read_i32, read_f32,
geometry::{create_multiple_paths, wrap_multiple_paths},
};
let origin = unsafe { read_vec3(origin) };
let amount = unsafe { read_i32(amount) } as usize;
let length = unsafe { read_f32(length) };
let thickness = unsafe { read_f32(thickness) };
let resolution = unsafe { read_i32(resolution) } as usize;
let mut stem_data = create_multiple_paths(amount, resolution, 1);
let mut stems = wrap_multiple_paths(&mut stem_data);
for stem in stems.iter_mut() {
let points = stem.get_points_mut();
for (i, point) in points.iter_mut().enumerate() {
let t = i as f32 / (resolution as f32 - 1.0);
point.x = origin[0];
point.y = origin[1] + t * length;
point.z = origin[2];
point.w = thickness * (1.0 - t);
}
}
stem_data
}
```
## Phase 5: Runtime Implementation
```typescript
// app/src/lib/runtime/memory-manager.ts
export const SHARED_MEMORY = new WebAssembly.Memory({
initial: 1024, // 64MB initial
maximum: 4096, // 256MB maximum
});
export class MemoryManager {
private offset: number = 0;
private readonly start: number = 0;
reset() {
this.offset = this.start;
}
alloc(bytes: number): number {
const pos = this.offset;
this.offset += bytes;
return pos;
}
readInt32(pos: number): number {
return new Int32Array(SHARED_MEMORY.buffer)[pos / 4];
}
readFloat32(pos: number): number {
return new Float32Array(SHARED_MEMORY.buffer)[pos / 4];
}
readBytes(pos: number, length: number): Uint8Array {
return new Uint8Array(SHARED_MEMORY.buffer, pos, length);
}
getInt32View(): Int32Array {
return new Int32Array(SHARED_MEMORY.buffer);
}
getFloat32View(): Float32Array {
return new Float32Array(SHARED_MEMORY.buffer);
}
getRemaining(): number {
return SHARED_MEMORY.buffer.byteLength - this.offset;
}
}
```
```typescript
// app/src/lib/runtime/imports.ts
import { SHARED_MEMORY } from "./memory-manager";
export function createImportObject(nodeId: string): WebAssembly.Imports {
return {
env: {
// Import shared memory
memory: SHARED_MEMORY,
// Logging
__nodarium_log: (ptr: number, len: number) => {
const msg = new TextDecoder().decode(
new Uint8Array(SHARED_MEMORY.buffer, ptr, len),
);
console.log(`[${nodeId}] ${msg}`);
},
__nodarium_log_panic: (ptr: number, len: number) => {
const msg = new TextDecoder().decode(
new Uint8Array(SHARED_MEMORY.buffer, ptr, len),
);
console.error(`[${nodeId}] PANIC: ${msg}`);
},
},
};
}
```
```typescript
// app/src/lib/runtime/executor.ts
import { SHARED_MEMORY } from "./memory-manager";
import { createImportObject } from "./imports";
export class SharedMemoryRuntimeExecutor implements RuntimeExecutor {
private memory: MemoryManager;
private results: Map<string, { pos: number; len: number }> = new Map();
private instances: Map<string, WebAssembly.Instance> = new Map();
constructor(private registry: NodeRegistry) {
this.memory = new MemoryManager();
}
async execute(graph: Graph, settings: Record<string, unknown>) {
this.memory.reset();
this.results.clear();
const [outputNode, nodes] = await this.addMetaData(graph);
const sortedNodes = nodes.sort((a, b) => b.depth - a.depth);
for (const node of sortedNodes) {
await this.executeNode(node, settings);
}
const result = this.results.get(outputNode.id);
const view = this.memory.getInt32View();
return view.subarray(result.pos / 4, result.pos / 4 + result.len / 4);
}
private async executeNode(
node: RuntimeNode,
settings: Record<string, unknown>,
) {
const def = this.definitionMap.get(node.type)!;
const inputs = def.inputs || {};
const inputNames = Object.keys(inputs);
const outputSize = this.estimateOutputSize(def);
const outputPos = this.memory.alloc(outputSize);
const args: number[] = [outputPos];
for (const inputName of inputNames) {
const inputDef = inputs[inputName];
const inputNode = node.state.inputNodes[inputName];
if (inputNode) {
const parentResult = this.results.get(inputNode.id)!;
args.push(parentResult.pos);
continue;
}
const valuePos = this.memory.alloc(16);
this.writeValue(
valuePos,
inputDef,
node.props?.[inputName] ??
settings[inputDef.setting ?? ""] ??
inputDef.value,
);
args.push(valuePos);
}
let instance = this.instances.get(node.type);
if (!instance) {
instance = await this.instantiateNode(node.type);
this.instances.set(node.type, instance);
}
const writtenLen = instance.exports.execute(...args);
this.results.set(node.id, { pos: outputPos, len: writtenLen });
}
private writeValue(pos: number, inputDef: NodeInput, value: unknown) {
const view = this.memory.getFloat32View();
const intView = this.memory.getInt32View();
switch (inputDef.type) {
case "float":
view[pos / 4] = value as number;
break;
case "integer":
case "select":
case "seed":
intView[pos / 4] = value as number;
break;
case "boolean":
intView[pos / 4] = value ? 1 : 0;
break;
case "vec3":
const arr = value as number[];
view[pos / 4] = arr[0];
view[pos / 4 + 1] = arr[1];
view[pos / 4 + 2] = arr[2];
break;
}
}
private estimateOutputSize(def: NodeDefinition): number {
const sizes: Record<string, number> = {
float: 16,
integer: 16,
boolean: 16,
vec3: 16,
geometry: 8192,
path: 4096,
};
return sizes[def.outputs?.[0] || "float"] || 64;
}
private async instantiateNode(
nodeType: string,
): Promise<WebAssembly.Instance> {
const wasmBytes = await this.fetchWasm(nodeType);
const module = await WebAssembly.compile(wasmBytes);
const importObject = createImportObject(nodeType);
return WebAssembly.instantiate(module, importObject);
}
}
```
## Phase 7: Execution Flow Visualization
```
┌─────────────────────────────────────────────────────────────────────────────┐
│ Execution Timeline │
└─────────────────────────────────────────────────────────────────────────────┘
Step 1: Setup
SHARED_MEMORY = new WebAssembly.Memory({ initial: 1024 })
memory.offset = 0
Step 2: Execute Node A (math with 3 inputs)
outputPos = memory.alloc(16) = 0
args = [0, ptr_to_op_type, ptr_to_a, ptr_to_b]
Node A reads:
*ptr_to_op_type → op
*ptr_to_a → a
*ptr_to_b → b
Node A returns: vec![result.to_bits()]
Macro writes result directly to SHARED_MEMORY[0..4]
Returns: 4
results['A'] = { pos: 0, len: 4 }
memory.offset = 4
Step 3: Execute Node B (stem with 5 inputs, input[0] from A)
outputPos = memory.alloc(4096) = 4
args = [4, results['A'].pos, ptr_to_amount, ptr_to_length, ...]
Node B reads:
*results['A'].pos → value from Node A
*ptr_to_amount → amount
...
Node B returns: stem_data Vec<i32> (1000 elements = 4000 bytes)
Macro writes stem_data directly to SHARED_MEMORY[4..4004]
Returns: 4000
results['B'] = { pos: 4, len: 4000 }
memory.offset = 4004
Step 4: Execute Node C (output, 1 input from B)
outputPos = memory.alloc(16) = 4004
args = [4004, results['B'].pos, results['B'].len]
Node C reads:
*results['B'].pos → stem geometry
Node C returns: vec![1] (identity)
Macro writes to SHARED_MEMORY[4004..4008]
results['C'] = { pos: 4004, len: 4 }
Final: Return SHARED_MEMORY[4004..4008] as geometry result
```
## Phase 6: Memory Growth Strategy
```typescript
class MemoryManager {
alloc(bytes: number): number {
const required = this.offset + bytes;
const currentBytes = SHARED_MEMORY.buffer.byteLength;
if (required > currentBytes) {
const pagesNeeded = Math.ceil((required - currentBytes) / 65536);
const success = SHARED_MEMORY.grow(pagesNeeded);
if (!success) {
throw new Error(`Out of memory: need ${bytes} bytes`);
}
this.int32View = new Int32Array(SHARED_MEMORY.buffer);
this.float32View = new Float32Array(SHARED_MEMORY.buffer);
}
const pos = this.offset;
this.offset += bytes;
return pos;
}
}
```
## Phase 8: Migration Checklist
### Build Configuration
- [ ] Add `--import-memory` to Rust flags in `Cargo.toml`
- [ ] Ensure no nodes export memory
### Runtime
- [ ] Create `SHARED_MEMORY` instance
- [ ] Implement `MemoryManager` with alloc/read/write
- [ ] Create import object factory
- [ ] Implement `SharedMemoryRuntimeExecutor`
### Macro
- [ ] Parse definition JSON
- [ ] Validate function signature (N params, Vec<i32> return)
- [ ] Generate wrapper that writes return value to `output_pos`
- [ ] Add panic hook
### Utilities
- [ ] `read_i32(ptr: *const i32) -> i32`
- [ ] `read_f32(ptr: *const i32) -> f32`
- [ ] `read_bool(ptr: *const i32) -> bool`
- [ ] `read_vec3(ptr: *const i32) -> [f32; 3]`
- [ ] `read_i32_slice(ptr: *const i32, len: usize) -> &[i32]`
### Nodes
- [ ] `float`, `integer`, `boolean` nodes
- [ ] `vec3` node
- [ ] `math` node
- [ ] `random` node
- [ ] `box` node
- [ ] `stem` node
- [ ] `branch` node
- [ ] `instance` node
- [ ] `output` node
## Phase 9: Before vs After
### Before (per-node memory)
```rust
#[nodarium_execute]
pub fn execute(input: &[i32]) -> Vec<i32> {
let args = split_args(input);
let a = evaluate_float(args[0]);
let b = evaluate_float(args[1]);
vec![(a + b).to_bits()]
}
```
### After (shared memory)
```rust
#[nodarium_execute]
pub fn execute(a: *const i32, b: *const i32) -> Vec<i32> {
use nodarium_utils::read_f32;
let a_val = unsafe { read_f32(a) };
let b_val = unsafe { read_f32(b) };
vec![(a_val + b_val).to_bits()]
}
```
**Key differences:**
- Parameters are input pointers, not a slice
- Use `read_f32` helper instead of `evaluate_float`
- Macro writes result directly to shared memory
- All nodes share the same memory import
## Phase 10: Benefits
| Aspect | Before | After |
| ----------------- | -------------- | -------------------- |
| Memory | N × ~1MB heaps | 1 × 64-256MB shared |
| Cross-node access | Copy via JS | Direct read |
| API | `&[i32]` slice | `*const i32` pointer |
| Validation | Runtime | Compile-time |

227
SUMMARY.md
View File

@@ -1,227 +0,0 @@
# Nodarium - AI Coding Agent Summary
## Project Overview
Nodarium is a WebAssembly-based visual programming language used to build <https://nodes.max-richter.dev>, a procedural 3D plant modeling tool. The system allows users to create visual node graphs where each node is a compiled WebAssembly module.
## Technology Stack
**Frontend (SvelteKit):**
- Framework: SvelteKit with Svelte 5
- 3D Rendering: Three.js via Threlte
- Styling: Tailwind CSS 4
- Build Tool: Vite
- State Management: Custom store-client package
- WASM Integration: vite-plugin-wasm, comlink
**Backend/Core (Rust/WASM):**
- Language: Rust
- Output: WebAssembly (wasm32-unknown-unknown target)
- Build Tool: cargo
- Procedural Macros: custom macros package
**Package Management:**
- Node packages: pnpm workspace (v10.28.1)
- Rust packages: Cargo workspace
## Directory Structure
```
nodarium/
├── app/ # SvelteKit web application
│ ├── src/
│ │ ├── lib/ # App-specific components and utilities
│ │ ├── routes/ # SvelteKit routes (pages)
│ │ ├── app.css # Global styles
│ │ └── app.html # HTML template
│ ├── static/
│ │ └── nodes/ # Compiled WASM node files served statically
│ ├── package.json # App dependencies
│ ├── svelte.config.js # SvelteKit configuration
│ ├── vite.config.ts # Vite configuration
│ └── tsconfig.json # TypeScript configuration
│
├── packages/ # Shared workspace packages
│ ├── ui/ # Svelte UI component library (published as @nodarium/ui)
│ │ ├── src/ # UI components
│ │ ├── static/ # Static assets for UI
│ │ ├── dist/ # Built output
│ │ └── package.json
│ ├── registry/ # Node registry with IndexedDB persistence (@nodarium/registry)
│ │ └── src/
│ ├── types/ # Shared TypeScript types (@nodarium/types)
│ │ └── src/
│ ├── utils/ # Shared utilities (@nodarium/utils)
│ │ └── src/
│ └── macros/ # Rust procedural macros for node development
│
├── nodes/ # WebAssembly node packages (Rust)
│ └── max/plantarium/ # Plantarium nodes namespace
│ ├── box/ # Box geometry node
│ ├── branch/ # Branch generation node
│ ├── float/ # Float value node
│ ├── gravity/ # Gravity simulation node
│ ├── instance/ # Geometry instancing node
│ ├── math/ # Math operations node
│ ├── noise/ # Noise generation node
│ ├── output/ # Output node for results
│ ├── random/ # Random value node
│ ├── rotate/ # Rotation transformation node
│ ├── stem/ # Stem geometry node
│ ├── triangle/ # Triangle geometry node
│ ├── vec3/ # Vector3 manipulation node
│ └── .template/ # Node template for creating new nodes
│
├── docs/ # Documentation
│ ├── ARCHITECTURE.md # System architecture overview
│ ├── DEVELOPING_NODES.md # Guide for creating new nodes
│ ├── NODE_DEFINITION.md # Node definition schema
│ └── PLANTARIUM.md # Plantarium-specific documentation
│
├── Cargo.toml # Rust workspace configuration
├── package.json # Root npm scripts
├── pnpm-workspace.yaml # pnpm workspace configuration
├── pnpm-lock.yaml # Locked dependency versions
└── README.md # Project readme
```
## Node System Architecture
### What is a Node?
Nodes are WebAssembly modules that:
- Have a unique ID (e.g., `max/plantarium/stem`)
- Define inputs with types and default values
- Define outputs they produce
- Execute logic when called with arguments
### Node Definition Schema
Nodes are defined via `definition.json` embedded in each WASM module:
```json
{
"id": "namespace/category/node-name",
"outputs": ["geometry"],
"inputs": {
"height": { "type": "float", "value": 1.0 },
"radius": { "type": "float", "value": 0.1 }
}
}
```
For now the outputs are limited to a single output.
### Node Execution
Nodes receive serialized arguments and return serialized outputs. The `nodarium_utils` Rust crate provides helpers for:
- Parsing input arguments
- Creating geometry data
- Concatenating output vectors
### Node Registration
Nodes are:
1. Compiled to WASM files in `target/wasm32-unknown-unknown/release/`
2. Copied to `app/static/nodes/` for serving
3. Registered in the browser via IndexedDB using the registry package
## Key Dependencies
**Frontend:**
- `@sveltejs/kit` - Application framework
- `@threlte/core` & `@threlte/extras` - Three.js Svelte integration
- `three` - 3D graphics library
- `tailwindcss` - CSS framework
- `comlink` - WebWorker RPC
- `idb` - IndexedDB wrapper
- `wabt` - WebAssembly binary toolkit
**Rust/WASM:**
- Language: Rust (compiled with plain cargo)
- Output: WebAssembly (wasm32-unknown-unknown target)
- Generic WASM wrapper for language-agnostic node development
- `glam` - Math library (Vec2, Vec3, Mat4, etc.)
- `nodarium_macros` - Custom procedural macros
- `nodarium_utils` - Shared node utilities
## Build Commands
From root directory:
```bash
# Install dependencies
pnpm i
# Build all WASM nodes (compiles Rust, copies to app/static)
pnpm build:nodes
# Build the app (builds UI library + SvelteKit app)
pnpm build:app
# Full build (nodes + app)
pnpm build
# Development
pnpm dev # Run all dev commands in parallel
pnpm dev:nodes # Watch nodes/, auto-rebuild on changes
pnpm dev:app_ui # Watch app and UI package
pnpm dev_ui # Watch UI package only
```
## Workspace Packages
The project uses pnpm workspaces with the following packages:
| Package | Location | Purpose |
| ------------------ | ------------------ | ------------------------------ |
| @nodarium/app | app/ | Main SvelteKit application |
| @nodarium/ui | packages/ui/ | Reusable UI component library |
| @nodarium/registry | packages/registry/ | Node registry with persistence |
| @nodarium/types | packages/types/ | Shared TypeScript types |
| @nodarium/utils | packages/utils/ | Shared utilities |
| nodarium macros | packages/macros/ | Rust procedural macros |
## Configuration Files
- `.dprint.jsonc` - Dprint formatter configuration
- `svelte.config.js` - SvelteKit configuration (app and ui)
- `vite.config.ts` - Vite bundler configuration
- `tsconfig.json` - TypeScript configuration (app and packages)
- `Cargo.toml` - Rust workspace with member packages
- `flake.nix` - Nix development environment
## Development Workflow
### Adding a New Node
1. Copy the `.template` directory in `nodes/max/plantarium/` to create a new node directory
2. Define node in `src/definition.json`
3. Implement logic in `src/lib.rs`
4. Build with `cargo build --release --target wasm32-unknown-unknown`
5. Test by dragging onto the node graph
### Modifying UI Components
1. Changes to `packages/ui/` automatically rebuild with watch mode
2. App imports from `@nodarium/ui`
3. Run `pnpm dev:app_ui` for hot reload
## Important Notes for AI Agents
1. **WASM Compilation**: Nodes require `wasm32-unknown-unknown` target (`rustup target add wasm32-unknown-unknown`)
2. **Cross-Compilation**: WASM build happens on host, not in containers/VMs
3. **Static Serving**: Compiled WASM files must exist in `app/static/nodes/` before dev server runs
4. **Workspace Dependencies**: Use `workspace:*` protocol for internal packages
5. **Threlte Version**: Uses Threlte 8.x, not 7.x (important for 3D component APIs)
6. **Svelte 5**: Project uses Svelte 5 with runes (`$state`, `$derived`, `$effect`)
7. **Tailwind 4**: Uses Tailwind CSS v4 with `@tailwindcss/vite` plugin
8. **IndexedDB**: Registry uses IDB for persistent node storage in browser

294
SUMMARY_RUNTIME.md
View File

@@ -1,294 +0,0 @@
# Node Compilation and Runtime Execution
## Overview
Nodarium nodes are WebAssembly modules written in Rust. Each node is a compiled WASM binary that exposes a standardized C ABI interface. The system uses procedural macros to generate the necessary boilerplate for node definitions, memory management, and execution.
## Node Compilation
### 1. Node Definition (JSON)
Each node has a `src/input.json` file that defines:
```json
{
"id": "max/plantarium/stem",
"meta": { "description": "Creates a stem" },
"outputs": ["path"],
"inputs": {
"origin": { "type": "vec3", "value": [0, 0, 0], "external": true },
"amount": { "type": "integer", "value": 1, "min": 1, "max": 64 },
"length": { "type": "float", "value": 5 },
"thickness": { "type": "float", "value": 0.2 }
}
}
```
### 2. Procedural Macros
The `nodarium_macros` crate provides two procedural macros:
#### `#[nodarium_execute]`
Transforms a Rust function into a WASM-compatible entry point:
```rust
#[nodarium_execute]
pub fn execute(input: &[i32]) -> Vec<i32> {
// Node logic here
}
```
The macro generates:
- **C ABI wrapper**: Converts the WASM interface to a standard C FFI
- **`execute` function**: Takes `(ptr: *const i32, len: usize)` and returns `*mut i32`
- **Memory allocation**: `__alloc(len: usize) -> *mut i32` for buffer allocation
- **Memory deallocation**: `__free(ptr: *mut i32, len: usize)` for cleanup
- **Static output buffer**: `OUTPUT_BUFFER` for returning results
- **Panic hook**: Routes panics through `host_log_panic` for debugging
- **Internal logic wrapper**: Wraps the original function
#### `nodarium_definition_file!("path")`
Embeds the node definition JSON into the WASM binary:
```rust
nodarium_definition_file!("src/input.json");
```
Generates:
- **`DEFINITION_DATA`**: Static byte array in `nodarium_definition` section
- **`get_definition_ptr()`**: Returns pointer to definition data
- **`get_definition_len()`**: Returns length of definition data
### 3. Build Process
Nodes are compiled with:
```bash
cargo build --release --target wasm32-unknown-unknown
```
The resulting `.wasm` files are copied to `app/static/nodes/` for serving.
## Node Execution Runtime
### Architecture
```
┌─────────────────────────────────────────────────────────────┐
│ WebWorker Thread │
│ ┌─────────────────────────────────────────────────────────┐│
│ │ WorkerRuntimeExecutor ││
│ │ ┌───────────────────────────────────────────────────┐ ││
│ │ │ MemoryRuntimeExecutor ││
│ │ │ ┌─────────────────────────────────────────────┐ ││
│ │ │ │ Node Registry (WASM + Definitions) ││
│ │ │ └─────────────────────────────────────────────┘ ││
│ │ │ ┌─────────────────────────────────────────────┐ ││
│ │ │ │ Execution Engine (Bottom-Up Evaluation) ││
│ │ │ └─────────────────────────────────────────────┘ ││
│ │ └───────────────────────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────────────┘
```
### 1. MemoryRuntimeExecutor
The core execution engine in `runtime-executor.ts`:
#### Metadata Collection (`addMetaData`)
1. Load node definitions from registry
2. Build parent/child relationships from graph edges
3. Calculate execution depth via reverse BFS from output node
#### Node Sorting
Nodes are sorted by depth (highest depth first) for bottom-up execution:
```
Depth 3: n3 n6
Depth 2: n2 n4 n5
Depth 1: n1
Depth 0: Output
Execution order: n3, n6, n2, n4, n5, n1, Output
```
#### Input Collection
For each node, inputs are gathered from:
1. **Connected nodes**: Results from parent nodes in the graph
2. **Node props**: Values stored directly on the node instance
3. **Settings**: Global settings mapped via `setting` property
4. **Defaults**: Values from node definition
#### Input Encoding
Values are encoded as `Int32Array`:
- **Floats**: IEEE 754 bits cast to i32
- **Vectors**: `[0, count, v1, v2, v3, 1, 1]` (nested bracket format)
- **Booleans**: `0` or `1`
- **Integers**: Direct i32 value
#### Caching
Results are cached using:
```typescript
inputHash = `node-${node.id}-${fastHashArrayBuffer(encoded_inputs)}`
```
The cache uses LRU eviction (default size: 50 entries).
### 2. Execution Flow
```typescript
async execute(graph: Graph, settings) {
// 1. Load definitions and build node relationships
const [outputNode, nodes] = await this.addMetaData(graph);
// 2. Sort nodes by depth (bottom-up)
const sortedNodes = nodes.sort((a, b) => b.depth - a.depth);
// 3. Execute each node
for (const node of sortedNodes) {
const inputs = this.collectInputs(node, settings);
const encoded = concatEncodedArrays(inputs);
const result = nodeType.execute(encoded);
this.results[node.id] = result;
}
// 4. Return output node result
return this.results[outputNode.id];
}
```
### 3. Worker Isolation
`WorkerRuntimeExecutor` runs execution in a WebWorker via Comlink:
```typescript
class WorkerRuntimeExecutor implements RuntimeExecutor {
private worker = new ComlinkWorker(...);
async execute(graph, settings) {
return this.worker.executeGraph(graph, settings);
}
}
```
The worker backend (`worker-runtime-executor-backend.ts`):
- Creates a single `MemoryRuntimeExecutor` instance
- Manages caching state
- Collects performance metrics
### 4. Remote Execution (Optional)
`RemoteRuntimeExecutor` can execute graphs on a remote server:
```typescript
class RemoteRuntimeExecutor implements RuntimeExecutor {
async execute(graph, settings) {
const res = await fetch(this.url, {
method: "POST",
body: JSON.stringify({ graph, settings })
});
return new Int32Array(await res.arrayBuffer());
}
}
```
## Data Encoding Format
### Bracket Notation
Inputs and outputs use a nested bracket encoding:
```
[0, count, item1, item2, ..., 1, 1]
^ ^ items ^ ^
| | | |
| | | +-- closing bracket
| +-- number of items + 1 |
+-- opening bracket (0) +-- closing bracket (1)
```
### Example Encodings
**Float (5.0)**:
```typescript
encodeFloat(5.0) // → 1084227584 (IEEE 754 bits as i32)
```
**Vec3 ([1, 2, 3])**:
```typescript
[0, 4, encodeFloat(1), encodeFloat(2), encodeFloat(3), 1, 1]
```
**Nested Math Expression**:
```
[0, 3, 0, 2, 0, 3, 0, 0, 0, 3, 7549747, 127, 1, 1, ...]
```
### Decoding Utilities
From `packages/utils/src/tree.rs`:
- `split_args()`: Parses nested bracket arrays into segments
- `evaluate_float()`: Recursively evaluates and decodes float expressions
- `evaluate_int()`: Evaluates integer/math node expressions
- `evaluate_vec3()`: Decodes vec3 arrays
## Geometry Data Format
### Path Data
Paths represent procedural plant structures:
```
[0, count, [0, header_size, node_type, depth, x, y, z, w, ...], 1, 1]
```
Each point has 4 values: x, y, z position + thickness (w).
### Geometry Data
Meshes use a similar format with vertices and face indices.
## Performance Tracking
The runtime collects detailed performance metrics:
- `collect-metadata`: Time to build node graph
- `collected-inputs`: Time to gather inputs
- `encoded-inputs`: Time to encode inputs
- `hash-inputs`: Time to compute cache hash
- `cache-hit`: 1 if cache hit, 0 if miss
- `node/{node_type}`: Time per node execution
## Caching Strategy
### MemoryRuntimeCache
LRU cache implementation:
```typescript
class MemoryRuntimeCache {
private map = new Map<string, unknown>();
size: number = 50;
get(key) { /* move to front */ }
set(key, value) { /* evict oldest if at capacity */ }
}
```
### IndexDBCache
For persistence across sessions, the registry uses IndexedDB caching.
## Summary
The Nodarium node system works as follows:
1. **Compilation**: Rust functions are decorated with macros that generate C ABI WASM exports
2. **Registration**: Node definitions are embedded in WASM and loaded at runtime
3. **Graph Analysis**: Runtime builds node relationships and execution order
4. **Bottom-Up Execution**: Nodes execute from leaves to output
5. **Caching**: Results are cached per-node-inputs hash for performance
6. **Isolation**: Execution runs in a WebWorker to prevent main thread blocking

2
app/.gitignore vendored
View File

@@ -27,5 +27,3 @@ dist-ssr
*.sln *.sln
*.sw? *.sw?
build/ build/
test-results/

1
app/Dockerfile
View File

@@ -28,6 +28,5 @@ RUN rm /etc/nginx/conf.d/default.conf
COPY app/docker/app.conf /etc/nginx/conf.d/app.conf COPY app/docker/app.conf /etc/nginx/conf.d/app.conf
COPY --from=builder /app/app/build /app COPY --from=builder /app/app/build /app
COPY --from=builder /app/packages/ui/build /app/ui
EXPOSE 80 EXPOSE 80

1
app/benchmark/.gitignore vendored
View File

@@ -1 +0,0 @@
out/

47
app/benchmark/benchmarkRegistry.ts
View File

@@ -1,47 +0,0 @@
import { NodeDefinition, NodeId, NodeRegistry } from '@nodarium/types';
import { createWasmWrapper } from '@nodarium/utils';
import { readFile } from 'node:fs/promises';
import { resolve } from 'node:path';
export class BenchmarkRegistry implements NodeRegistry {
status: 'loading' | 'ready' | 'error' = 'loading';
private nodes = new Map<string, NodeDefinition>();
async load(nodeIds: NodeId[]): Promise<NodeDefinition[]> {
const nodes = await Promise.all(nodeIds.map(async id => {
const p = resolve('static/nodes/' + id + '.wasm');
const file = await readFile(p);
const node = createWasmWrapper(file as unknown as ArrayBuffer);
const d = node.get_definition();
return {
...d,
execute: node.execute
};
}));
for (const n of nodes) {
this.nodes.set(n.id, n);
}
this.status = 'ready';
return nodes;
}
async register(id: string, wasmBuffer: ArrayBuffer): Promise<NodeDefinition> {
const wasm = createWasmWrapper(wasmBuffer);
const d = wasm.get_definition();
const node = {
...d,
execute: wasm.execute
};
this.nodes.set(id, node);
return node;
}
getNode(id: NodeId | string): NodeDefinition | undefined {
return this.nodes.get(id);
}
getAllNodes(): NodeDefinition[] {
return [];
}
}

56
app/benchmark/index.ts
View File

@@ -1,56 +0,0 @@
import type { Graph, Graph as GraphType, NodeId } from '@nodarium/types';
import { createLogger, createPerformanceStore } from '@nodarium/utils';
import { mkdir, writeFile } from 'node:fs/promises';
import { resolve } from 'node:path';
import { MemoryRuntimeExecutor } from '../src/lib/runtime/runtime-executor.ts';
import { BenchmarkRegistry } from './benchmarkRegistry.ts';
import defaultPlantTemplate from './templates/default.json' assert { type: 'json' };
import lottaFacesTemplate from './templates/lotta-faces.json' assert { type: 'json' };
import plantTemplate from './templates/plant.json' assert { type: 'json' };
const registry = new BenchmarkRegistry();
const r = new MemoryRuntimeExecutor(registry);
const perfStore = createPerformanceStore();
const log = createLogger('bench');
const templates: Record<string, Graph> = {
'plant': plantTemplate as unknown as GraphType,
'lotta-faces': lottaFacesTemplate as unknown as GraphType,
'default': defaultPlantTemplate as unknown as GraphType
};
async function run(g: GraphType, amount: number) {
await registry.load(plantTemplate.nodes.map(n => n.type) as NodeId[]);
log.log('loaded ' + g.nodes.length + ' nodes');
log.log('warming up');
// Warm up the runtime? maybe this does something?
for (let index = 0; index < 10; index++) {
await r.execute(g, { randomSeed: true });
}
log.log('executing');
r.perf = perfStore;
for (let i = 0; i < amount; i++) {
r.perf?.startRun();
await r.execute(g, { randomSeed: true });
r.perf?.stopRun();
}
log.log('finished');
return r.perf.get();
}
async function main() {
const outPath = resolve('benchmark/out/');
await mkdir(outPath, { recursive: true });
for (const key in templates) {
log.log('executing ' + key);
const perfData = await run(templates[key], 100);
await writeFile(resolve(outPath, key + '.json'), JSON.stringify(perfData));
await new Promise(res => setTimeout(res, 200));
}
}
main();

95
app/benchmark/templates/default.json
View File

@@ -1,95 +0,0 @@
{
"settings": { "resolution.circle": 26, "resolution.curve": 39 },
"nodes": [
{ "id": 9, "position": [220, 80], "type": "max/plantarium/output", "props": {} },
{
"id": 10,
"position": [95, 80],
"type": "max/plantarium/stem",
"props": { "amount": 5, "length": 11, "thickness": 0.1 }
},
{
"id": 14,
"position": [195, 80],
"type": "max/plantarium/gravity",
"props": {
"strength": 0.38,
"scale": 39,
"fixBottom": 0,
"directionalStrength": [1, 1, 1],
"depth": 1,
"curviness": 1
}
},
{
"id": 15,
"position": [120, 80],
"type": "max/plantarium/noise",
"props": {
"strength": 4.9,
"scale": 2.2,
"fixBottom": 1,
"directionalStrength": [1, 1, 1],
"depth": 1,
"octaves": 1
}
},
{
"id": 16,
"position": [70, 80],
"type": "max/plantarium/vec3",
"props": { "0": 0, "1": 0, "2": 0 }
},
{
"id": 17,
"position": [45, 80],
"type": "max/plantarium/random",
"props": { "min": -2, "max": 2 }
},
{
"id": 18,
"position": [170, 80],
"type": "max/plantarium/branch",
"props": {
"length": 1.6,
"thickness": 0.69,
"amount": 36,
"offsetSingle": 0.5,
"lowestBranch": 0.46,
"highestBranch": 1,
"depth": 1,
"rotation": 180
}
},
{
"id": 19,
"position": [145, 80],
"type": "max/plantarium/gravity",
"props": {
"strength": 0.38,
"scale": 39,
"fixBottom": 0,
"directionalStrength": [1, 1, 1],
"depth": 1,
"curviness": 1
}
},
{
"id": 20,
"position": [70, 120],
"type": "max/plantarium/random",
"props": { "min": 0.073, "max": 0.15 }
}
],
"edges": [
[14, 0, 9, "input"],
[10, 0, 15, "plant"],
[16, 0, 10, "origin"],
[17, 0, 16, "0"],
[17, 0, 16, "2"],
[18, 0, 14, "plant"],
[15, 0, 19, "plant"],
[19, 0, 18, "plant"],
[20, 0, 10, "thickness"]
]
}

44
app/benchmark/templates/lotta-faces.json
View File

@@ -1,44 +0,0 @@
{
"settings": { "resolution.circle": 64, "resolution.curve": 64, "randomSeed": false },
"nodes": [
{ "id": 9, "position": [260, 0], "type": "max/plantarium/output", "props": {} },
{
"id": 18,
"position": [185, 0],
"type": "max/plantarium/stem",
"props": { "amount": 64, "length": 12, "thickness": 0.15 }
},
{
"id": 19,
"position": [210, 0],
"type": "max/plantarium/noise",
"props": { "scale": 1.3, "strength": 5.4 }
},
{
"id": 20,
"position": [235, 0],
"type": "max/plantarium/branch",
"props": { "length": 0.8, "thickness": 0.8, "amount": 3 }
},
{
"id": 21,
"position": [160, 0],
"type": "max/plantarium/vec3",
"props": { "0": 0.39, "1": 0, "2": 0.41 }
},
{
"id": 22,
"position": [130, 0],
"type": "max/plantarium/random",
"props": { "min": -2, "max": 2 }
}
],
"edges": [
[18, 0, 19, "plant"],
[19, 0, 20, "plant"],
[20, 0, 9, "input"],
[21, 0, 18, "origin"],
[22, 0, 21, "0"],
[22, 0, 21, "2"]
]
}

71
app/benchmark/templates/plant.json
View File

@@ -1,71 +0,0 @@
{
"settings": { "resolution.circle": 26, "resolution.curve": 39 },
"nodes": [
{ "id": 9, "position": [180, 80], "type": "max/plantarium/output", "props": {} },
{
"id": 10,
"position": [55, 80],
"type": "max/plantarium/stem",
"props": { "amount": 1, "length": 11, "thickness": 0.71 }
},
{
"id": 11,
"position": [80, 80],
"type": "max/plantarium/noise",
"props": {
"strength": 35,
"scale": 4.6,
"fixBottom": 1,
"directionalStrength": [1, 0.74, 0.083],
"depth": 1
}
},
{
"id": 12,
"position": [105, 80],
"type": "max/plantarium/branch",
"props": {
"length": 3,
"thickness": 0.6,
"amount": 10,
"rotation": 180,
"offsetSingle": 0.34,
"lowestBranch": 0.53,
"highestBranch": 1,
"depth": 1
}
},
{
"id": 13,
"position": [130, 80],
"type": "max/plantarium/noise",
"props": {
"strength": 8,
"scale": 7.7,
"fixBottom": 1,
"directionalStrength": [1, 0, 1],
"depth": 1
}
},
{
"id": 14,
"position": [155, 80],
"type": "max/plantarium/gravity",
"props": {
"strength": 0.11,
"scale": 39,
"fixBottom": 0,
"directionalStrength": [1, 1, 1],
"depth": 1,
"curviness": 1
}
}
],
"edges": [
[10, 0, 11, "plant"],
[11, 0, 12, "plant"],
[12, 0, 13, "plant"],
[13, 0, 14, "plant"],
[14, 0, 9, "input"]
]
}

62
app/e2e/main.test.ts
View File

@@ -1,62 +0,0 @@
import { expect, test } from '@playwright/test';
test('test', async ({ page }) => {
// Listen for console messages
page.on('console', msg => {
console.log(`[Browser Console] ${msg.type()}: ${msg.text()}`);
});
await page.goto('http://localhost:4173', { waitUntil: 'load' });
// await expect(page).toHaveScreenshot();
await expect(page.locator('.graph-wrapper')).toHaveScreenshot();
await page.getByRole('button', { name: 'projects' }).click();
await page.getByRole('button', { name: 'New', exact: true }).click();
await page.getByRole('combobox').selectOption('2');
await page.getByRole('textbox', { name: 'Project name' }).click();
await page.getByRole('textbox', { name: 'Project name' }).fill('Test Project');
await page.getByRole('button', { name: 'Create' }).click();
const expectedNodes = [
{
id: '10',
type: 'max/plantarium/stem',
props: {
amount: 50,
length: 4,
thickness: 1
}
},
{
id: '11',
type: 'max/plantarium/noise',
props: {
scale: 0.5,
strength: 5
}
},
{
id: '9',
type: 'max/plantarium/output'
}
];
for (const node of expectedNodes) {
const wrapper = page.locator(
`div.wrapper[data-node-id="${node.id}"][data-node-type="${node.type}"]`
);
await expect(wrapper).toBeVisible();
if ('props' in node) {
const props = node.props as unknown as Record<string, number>;
for (const propId in node.props) {
const expectedValue = props[propId];
const inputElement = page.locator(
`div.wrapper[data-node-type="${node.type}"][data-node-input="${propId}"] input[type="number"]`
);
const value = parseFloat(await inputElement.inputValue());
expect(value).toBe(expectedValue);
}
}
}
});

BIN
app/e2e/main.test.ts-snapshots/test-1-linux.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

30
app/package.json
View File

@@ -1,26 +1,22 @@
{ {
"name": "@nodarium/app", "name": "@nodarium/app",
"private": true, "private": true,
"version": "0.0.5", "version": "0.0.0",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite dev", "dev": "vite dev",
"predev": "rm static/CHANGELOG.md && ln -s ../../CHANGELOG.md static/CHANGELOG.md",
"build": "svelte-kit sync && vite build", "build": "svelte-kit sync && vite build",
"test:unit": "vitest", "test": "vitest",
"test": "npm run test:unit -- --run && npm run test:e2e",
"test:e2e": "playwright test",
"preview": "vite preview", "preview": "vite preview",
"format": "dprint fmt -c '../.dprint.jsonc' .", "format": "dprint fmt -c '../.dprint.jsonc' .",
"format:check": "dprint check -c '../.dprint.jsonc' .", "format:check": "dprint check -c '../.dprint.jsonc' .",
"lint": "eslint .", "lint": "eslint .",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
"bench": "tsx ./benchmark/index.ts"
}, },
"dependencies": { "dependencies": {
"@nodarium/ui": "workspace:*", "@nodarium/ui": "workspace:*",
"@nodarium/utils": "workspace:*", "@nodarium/utils": "workspace:*",
"@sveltejs/kit": "^2.50.2", "@sveltejs/kit": "^2.50.0",
"@tailwindcss/vite": "^4.1.18", "@tailwindcss/vite": "^4.1.18",
"@threlte/core": "8.3.1", "@threlte/core": "8.3.1",
"@threlte/extras": "9.7.1", "@threlte/extras": "9.7.1",
@@ -28,38 +24,34 @@
"file-saver": "^2.0.5", "file-saver": "^2.0.5",
"idb": "^8.0.3", "idb": "^8.0.3",
"jsondiffpatch": "^0.7.3", "jsondiffpatch": "^0.7.3",
"micromark": "^4.0.2",
"tailwindcss": "^4.1.18", "tailwindcss": "^4.1.18",
"three": "^0.182.0" "three": "^0.182.0",
"wabt": "^1.0.39"
}, },
"devDependencies": { "devDependencies": {
"@eslint/compat": "^2.0.2", "@eslint/compat": "^2.0.2",
"@eslint/js": "^9.39.2", "@eslint/js": "^9.39.2",
"@iconify-json/tabler": "^1.2.26", "@iconify-json/tabler": "^1.2.26",
"@iconify/tailwind4": "^1.2.1", "@iconify/tailwind4": "^1.2.1",
"@nodarium/types": "workspace:^", "@nodarium/types": "workspace:",
"@playwright/test": "^1.58.1",
"@sveltejs/adapter-static": "^3.0.10", "@sveltejs/adapter-static": "^3.0.10",
"@sveltejs/vite-plugin-svelte": "^6.2.4", "@sveltejs/vite-plugin-svelte": "^6.2.4",
"@tsconfig/svelte": "^5.0.7", "@tsconfig/svelte": "^5.0.6",
"@types/file-saver": "^2.0.7", "@types/file-saver": "^2.0.7",
"@types/three": "^0.182.0", "@types/three": "^0.182.0",
"@vitest/browser-playwright": "^4.0.18",
"dprint": "^0.51.1", "dprint": "^0.51.1",
"eslint": "^9.39.2", "eslint": "^9.39.2",
"eslint-plugin-svelte": "^3.14.0", "eslint-plugin-svelte": "^3.14.0",
"globals": "^17.3.0", "globals": "^17.3.0",
"svelte": "^5.49.2", "svelte": "^5.46.4",
"svelte-check": "^4.3.6", "svelte-check": "^4.3.5",
"tslib": "^2.8.1", "tslib": "^2.8.1",
"tsx": "^4.21.0",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"typescript-eslint": "^8.54.0", "typescript-eslint": "^8.54.0",
"vite": "^7.3.1", "vite": "^7.3.1",
"vite-plugin-comlink": "^5.3.0", "vite-plugin-comlink": "^5.3.0",
"vite-plugin-glsl": "^1.5.5", "vite-plugin-glsl": "^1.5.5",
"vite-plugin-wasm": "^3.5.0", "vite-plugin-wasm": "^3.5.0",
"vitest": "^4.0.18", "vitest": "^4.0.17"
"vitest-browser-svelte": "^2.0.2"
} }
} }

20
app/playwright.config.ts
View File

@@ -1,20 +0,0 @@
import { defineConfig } from '@playwright/test';
export default defineConfig({
webServer: { command: 'pnpm build && pnpm preview', port: 4173 },
testDir: 'e2e',
use: {
browserName: 'firefox',
launchOptions: {
firefoxUserPrefs: {
// Force WebGL even without a GPU
'webgl.force-enabled': true,
'webgl.disabled': false,
// Use software rendering (Mesa) instead of hardware
'layers.acceleration.disabled': true,
'gfx.webrender.software': true,
'webgl.enable-webgl2': true
}
}
}
});

2
app/src/app.css
View File

@@ -2,7 +2,7 @@
@source "../../packages/ui/**/*.svelte"; @source "../../packages/ui/**/*.svelte";
@plugin "@iconify/tailwind4" { @plugin "@iconify/tailwind4" {
prefix: "i"; prefix: "i";
icon-sets: from-folder("custom", "./src/lib/icons"); icon-sets: from-folder(custom, "./src/lib/icons");
} }
body * { body * {

2
app/src/app.html
View File

@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" /> <link rel="icon" href="%sveltekit.assets%/svelte.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%sveltekit.head% %sveltekit.head%
<title>Nodes</title> <title>Nodes</title>

63
app/src/lib/graph-interface/background/Background.frag
View File

@@ -11,7 +11,6 @@ uniform vec3 camPos;
uniform vec2 zoomLimits; uniform vec2 zoomLimits;
uniform vec3 backgroundColor; uniform vec3 backgroundColor;
uniform vec3 lineColor; uniform vec3 lineColor;
uniform int gridType; // 0 = grid lines, 1 = dots
// Anti-aliased step: threshold in the same units as `value` // Anti-aliased step: threshold in the same units as `value`
float aaStep(float threshold, float value, float deriv) { float aaStep(float threshold, float value, float deriv) {
@@ -79,51 +78,35 @@ void main(void) {
float ux = (vUv.x - 0.5) * width + cx * cz; float ux = (vUv.x - 0.5) * width + cx * cz;
float uy = (vUv.y - 0.5) * height - cy * cz; float uy = (vUv.y - 0.5) * height - cy * cz;
if(gridType == 0) { // extra small grid
// extra small grid float m1 = grid(ux, uy, divisions * 4.0, thickness * 4.0) * 0.9;
float m1 = grid(ux, uy, divisions * 4.0, thickness * 4.0) * 0.9; float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5;
float m2 = grid(ux, uy, divisions * 16.0, thickness * 16.0) * 0.5; float xsmall = max(m1, m2);
float xsmall = max(m1, m2);
float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5;
float s3 = circle_grid(ux, uy, cz / 1.6, 1.0) * 0.5; xsmall = max(xsmall, s3);
xsmall = max(xsmall, s3);
// small grid // small grid
float c1 = grid(ux, uy, divisions, thickness) * 0.6; float c1 = grid(ux, uy, divisions, thickness) * 0.6;
float c2 = grid(ux, uy, divisions * 2.0, thickness * 2.0) * 0.5; float c2 = grid(ux, uy, divisions * 2.0, thickness * 2.0) * 0.5;
float small = max(c1, c2); float small = max(c1, c2);
float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5; float s1 = circle_grid(ux, uy, cz * 10.0, 2.0) * 0.5;
small = max(small, s1); small = max(small, s1);
// large grid // large grid
float c3 = grid(ux, uy, divisions / 8.0, thickness / 8.0) * 0.5; float c3 = grid(ux, uy, divisions / 8.0, thickness / 8.0) * 0.5;
float c4 = grid(ux, uy, divisions / 2.0, thickness / 4.0) * 0.4; float c4 = grid(ux, uy, divisions / 2.0, thickness / 4.0) * 0.4;
float large = max(c3, c4); float large = max(c3, c4);
float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4; float s2 = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4;
large = max(large, s2); large = max(large, s2);
float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0)); float c = mix(large, small, min(nz * 2.0 + 0.05, 1.0));
c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0)); c = mix(c, xsmall, clamp((nz - 0.3) / 0.7, 0.0, 1.0));
vec3 color = mix(backgroundColor, lineColor, c); vec3 color = mix(backgroundColor, lineColor, c);
gl_FragColor = vec4(color, 1.0);
} else {
float large = circle_grid(ux, uy, cz * 20.0, 1.0) * 0.4;
float medium = circle_grid(ux, uy, cz * 10.0, 1.0) * 0.6;
float small = circle_grid(ux, uy, cz * 2.5, 1.0) * 0.8;
float c = mix(large, medium, min(nz * 2.0 + 0.05, 1.0));
c = mix(c, small, clamp((nz - 0.3) / 0.7, 0.0, 1.0));
vec3 color = mix(backgroundColor, lineColor, c);
gl_FragColor = vec4(color, 1.0);
}
gl_FragColor = vec4(color, 1.0);
} }

26
app/src/lib/graph-interface/background/Background.svelte
View File

@@ -6,12 +6,11 @@
import BackgroundVert from './Background.vert'; import BackgroundVert from './Background.vert';
type Props = { type Props = {
minZoom?: number; minZoom: number;
maxZoom?: number; maxZoom: number;
cameraPosition?: [number, number, number]; cameraPosition: [number, number, number];
width?: number; width: number;
height?: number; height: number;
type?: 'grid' | 'dots' | 'none';
}; };
let { let {
@@ -19,18 +18,9 @@
maxZoom = 150, maxZoom = 150,
cameraPosition = [0, 1, 0], cameraPosition = [0, 1, 0],
width = globalThis?.innerWidth || 100, width = globalThis?.innerWidth || 100,
height = globalThis?.innerHeight || 100, height = globalThis?.innerHeight || 100
type = 'grid'
}: Props = $props(); }: Props = $props();
const typeMap = new Map([
['grid', 0],
['dots', 1],
['none', 2]
]);
const gridType = $derived(typeMap.get(type) || 0);
let bw = $derived(width / cameraPosition[2]); let bw = $derived(width / cameraPosition[2]);
let bh = $derived(height / cameraPosition[2]); let bh = $derived(height / cameraPosition[2]);
</script> </script>
@@ -61,9 +51,6 @@
}, },
dimensions: { dimensions: {
value: [100, 100] value: [100, 100]
},
gridType: {
value: 0
} }
}} }}
uniforms.camPos.value={cameraPosition} uniforms.camPos.value={cameraPosition}
@@ -72,7 +59,6 @@
uniforms.lineColor.value={appSettings.value.theme && colors['outline']} uniforms.lineColor.value={appSettings.value.theme && colors['outline']}
uniforms.zoomLimits.value={[minZoom, maxZoom]} uniforms.zoomLimits.value={[minZoom, maxZoom]}
uniforms.dimensions.value={[width, height]} uniforms.dimensions.value={[width, height]}
uniforms.gridType.value={gridType}
/> />
</T.Mesh> </T.Mesh>
</T.Group> </T.Group>

73
app/src/lib/graph-interface/components/AddMenu.svelte
View File

@@ -5,33 +5,19 @@
import { getGraphManager, getGraphState } from '../graph-state.svelte'; import { getGraphManager, getGraphState } from '../graph-state.svelte';
type Props = { type Props = {
paddingLeft?: number;
paddingRight?: number;
paddingTop?: number;
paddingBottom?: number;
onnode: (n: NodeInstance) => void; onnode: (n: NodeInstance) => void;
}; };
const padding = 10; const { onnode }: Props = $props();
const {
paddingLeft = padding,
paddingRight = padding,
paddingTop = padding,
paddingBottom = padding,
onnode
}: Props = $props();
const graph = getGraphManager(); const graph = getGraphManager();
const graphState = getGraphState(); const graphState = getGraphState();
let input: HTMLInputElement; let input: HTMLInputElement;
let wrapper: HTMLDivElement;
let value = $state<string>(); let value = $state<string>();
let activeNodeId = $state<NodeId>(); let activeNodeId = $state<NodeId>();
const MENU_WIDTH = 150;
const MENU_HEIGHT = 350;
const allNodes = graphState.activeSocket const allNodes = graphState.activeSocket
? graph.getPossibleNodes(graphState.activeSocket) ? graph.getPossibleNodes(graphState.activeSocket)
: graph.getNodeDefinitions(); : graph.getNodeDefinitions();
@@ -93,52 +79,19 @@
} }
} }
function clampAddMenuPosition() {
if (!graphState.addMenuPosition) return;
const camX = graphState.cameraPosition[0];
const camY = graphState.cameraPosition[1];
const zoom = graphState.cameraPosition[2];
const halfViewportWidth = (graphState.width / 2) / zoom;
const halfViewportHeight = (graphState.height / 2) / zoom;
const halfMenuWidth = (MENU_WIDTH / 2) / zoom;
const halfMenuHeight = (MENU_HEIGHT / 2) / zoom;
const minX = camX - halfViewportWidth - halfMenuWidth + paddingLeft / zoom;
const maxX = camX + halfViewportWidth - halfMenuWidth - paddingRight / zoom;
const minY = camY - halfViewportHeight - halfMenuHeight + paddingTop / zoom;
const maxY = camY + halfViewportHeight - halfMenuHeight - paddingBottom / zoom;
const clampedX = Math.max(
minX + halfMenuWidth,
Math.min(graphState.addMenuPosition[0], maxX - halfMenuWidth)
);
const clampedY = Math.max(
minY + halfMenuHeight,
Math.min(graphState.addMenuPosition[1], maxY - halfMenuHeight)
);
if (clampedX !== graphState.addMenuPosition[0] || clampedY !== graphState.addMenuPosition[1]) {
graphState.addMenuPosition = [clampedX, clampedY];
}
}
$effect(() => {
const pos = graphState.addMenuPosition;
const zoom = graphState.cameraPosition[2];
const width = graphState.width;
const height = graphState.height;
if (pos && zoom && width && height) {
clampAddMenuPosition();
}
});
onMount(() => { onMount(() => {
input.disabled = false; input.disabled = false;
setTimeout(() => input.focus(), 50); setTimeout(() => input.focus(), 50);
const rect = wrapper.getBoundingClientRect();
const deltaY = rect.bottom - window.innerHeight;
const deltaX = rect.right - window.innerWidth;
if (deltaY > 0) {
wrapper.style.marginTop = `-${deltaY + 30}px`;
}
if (deltaX > 0) {
wrapper.style.marginLeft = `-${deltaX + 30}px`;
}
}); });
</script> </script>
@@ -147,7 +100,7 @@
position.z={graphState.addMenuPosition?.[1]} position.z={graphState.addMenuPosition?.[1]}
transform={false} transform={false}
> >
<div class="add-menu-wrapper"> <div class="add-menu-wrapper" bind:this={wrapper}>
<div class="header"> <div class="header">
<input <input
id="add-menu" id="add-menu"

28
app/src/lib/graph-interface/edges/Edge.svelte
View File

@@ -2,16 +2,19 @@
import { colors } from '../graph/colors.svelte'; import { colors } from '../graph/colors.svelte';
const circleMaterial = new MeshBasicMaterial({ const circleMaterial = new MeshBasicMaterial({
color: colors.outline.clone(), color: colors.edge.clone(),
toneMapped: false toneMapped: false
}); });
let lineColor = $state(colors.edge.clone().convertSRGBToLinear());
$effect.root(() => { $effect.root(() => {
$effect(() => { $effect(() => {
if (appSettings.value.theme === undefined) { if (appSettings.value.theme === undefined) {
return; return;
} }
circleMaterial.color = colors.outline.clone().convertSRGBToLinear(); circleMaterial.color = colors.edge.clone().convertSRGBToLinear();
lineColor = colors.edge.clone().convertSRGBToLinear();
}); });
}); });
@@ -32,7 +35,6 @@
import { CubicBezierCurve } from 'three/src/extras/curves/CubicBezierCurve.js'; import { CubicBezierCurve } from 'three/src/extras/curves/CubicBezierCurve.js';
import { Vector2 } from 'three/src/math/Vector2.js'; import { Vector2 } from 'three/src/math/Vector2.js';
import { getGraphState } from '../graph-state.svelte'; import { getGraphState } from '../graph-state.svelte';
import MeshGradientLineMaterial from './MeshGradientLine/MeshGradientLineMaterial.svelte';
const graphState = getGraphState(); const graphState = getGraphState();
@@ -43,17 +45,12 @@
y2: number; y2: number;
z: number; z: number;
id?: string; id?: string;
inputType?: string;
outputType?: string;
}; };
const { x1, y1, x2, y2, z, inputType = 'unknown', outputType = 'unknown', id }: Props = $props(); const { x1, y1, x2, y2, z, id }: Props = $props();
const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z))); const thickness = $derived(Math.max(0.001, 0.00082 * Math.exp(0.055 * z)));
const inputColor = $derived(graphState.colors.getColor(inputType));
const outputColor = $derived(graphState.colors.getColor(outputType));
let points = $state<Vector3[]>([]); let points = $state<Vector3[]>([]);
let lastId: string | null = null; let lastId: string | null = null;
@@ -109,9 +106,9 @@
position.z={y1} position.z={y1}
position.y={0.8} position.y={0.8}
rotation.x={-Math.PI / 2} rotation.x={-Math.PI / 2}
material={circleMaterial}
> >
<T.CircleGeometry args={[0.5, 16]} /> <T.CircleGeometry args={[0.5, 16]} />
<T.MeshBasicMaterial color={inputColor} toneMapped={false} />
</T.Mesh> </T.Mesh>
<T.Mesh <T.Mesh
@@ -122,7 +119,6 @@
material={circleMaterial} material={circleMaterial}
> >
<T.CircleGeometry args={[0.5, 16]} /> <T.CircleGeometry args={[0.5, 16]} />
<T.MeshBasicMaterial color={outputColor} toneMapped={false} />
</T.Mesh> </T.Mesh>
{#if graphState.hoveredEdgeId === id} {#if graphState.hoveredEdgeId === id}
@@ -130,8 +126,7 @@
<MeshLineGeometry {points} /> <MeshLineGeometry {points} />
<MeshLineMaterial <MeshLineMaterial
width={thickness * 5} width={thickness * 5}
color={inputColor} color={lineColor}
tonemapped={false}
opacity={0.5} opacity={0.5}
transparent transparent
/> />
@@ -140,10 +135,5 @@
<T.Mesh position.x={x1} position.z={y1} position.y={0.1}> <T.Mesh position.x={x1} position.z={y1} position.y={0.1}>
<MeshLineGeometry {points} /> <MeshLineGeometry {points} />
<MeshGradientLineMaterial <MeshLineMaterial width={thickness} color={lineColor} />
width={thickness}
colorStart={inputColor}
colorEnd={outputColor}
tonemapped={false}
/>
</T.Mesh> </T.Mesh>

112
app/src/lib/graph-interface/edges/MeshGradientLine/MeshGradientLineMaterial.svelte
View File

@@ -1,112 +0,0 @@
<script lang="ts">
import { T, useThrelte } from '@threlte/core';
import { Color, ShaderMaterial, Vector2 } from 'three';
import fragmentShader from './fragment.frag';
import type { MeshLineMaterialProps } from './types';
import vertexShader from './vertex.vert';
let {
opacity = 1,
colorStart = '#ffffff',
colorEnd = '#ffffff',
dashOffset = 0,
dashArray = 0,
dashRatio = 0,
attenuate = true,
width = 1,
scaleDown = 0,
alphaMap,
ref = $bindable(),
children,
...props
}: MeshLineMaterialProps = $props();
let { invalidate, size } = useThrelte();
// svelte-ignore state_referenced_locally
const uniforms = {
lineWidth: { value: width },
colorStart: { value: new Color(colorStart) },
colorEnd: { value: new Color(colorEnd) },
opacity: { value: opacity },
resolution: { value: new Vector2(1, 1) },
sizeAttenuation: { value: attenuate ? 1 : 0 },
dashArray: { value: dashArray },
useDash: { value: dashArray > 0 ? 1 : 0 },
dashOffset: { value: dashOffset },
dashRatio: { value: dashRatio },
scaleDown: { value: scaleDown / 10 },
alphaTest: { value: 0 },
alphaMap: { value: alphaMap },
useAlphaMap: { value: alphaMap ? 1 : 0 }
};
const material = new ShaderMaterial({ uniforms });
$effect.pre(() => {
uniforms.lineWidth.value = width;
invalidate();
});
$effect.pre(() => {
uniforms.opacity.value = opacity;
invalidate();
});
$effect.pre(() => {
uniforms.resolution.value.set($size.width, $size.height);
invalidate();
});
$effect.pre(() => {
uniforms.sizeAttenuation.value = attenuate ? 1 : 0;
invalidate();
});
$effect.pre(() => {
uniforms.dashArray.value = dashArray;
uniforms.useDash.value = dashArray > 0 ? 1 : 0;
invalidate();
});
$effect.pre(() => {
uniforms.dashOffset.value = dashOffset;
invalidate();
});
$effect.pre(() => {
uniforms.dashRatio.value = dashRatio;
invalidate();
});
$effect.pre(() => {
uniforms.scaleDown.value = scaleDown / 10;
invalidate();
});
$effect.pre(() => {
uniforms.alphaMap.value = alphaMap;
uniforms.useAlphaMap.value = alphaMap ? 1 : 0;
invalidate();
});
$effect.pre(() => {
uniforms.colorStart.value.set(colorStart);
invalidate();
});
$effect.pre(() => {
uniforms.colorEnd.value.set(colorEnd);
invalidate();
});
</script>
<T
is={material}
bind:ref
{fragmentShader}
{vertexShader}
{...props}
>
{@render children?.({ ref: material })}
</T>

30
app/src/lib/graph-interface/edges/MeshGradientLine/fragment.frag
View File

@@ -1,30 +0,0 @@
uniform vec3 colorStart;
uniform vec3 colorEnd;
uniform float useDash;
uniform float dashArray;
uniform float dashOffset;
uniform float dashRatio;
uniform sampler2D alphaMap;
uniform float useAlphaMap;
varying vec2 vUV;
varying vec4 vColor;
varying float vCounters;
vec4 CustomLinearTosRGB( in vec4 value ) {
return vec4( mix( pow( value.rgb, vec3( 0.41666 ) ) * 1.055 - vec3( 0.055 ), value.rgb * 12.92, vec3( lessThanEqual( value.rgb, vec3( 0.0031308 ) ) ) ), value.a );
}
void main() {
vec4 c = mix(vec4(colorStart,1.0),vec4(colorEnd, 1.0), vCounters);
if( useAlphaMap == 1. ) c.a *= texture2D( alphaMap, vUV ).r;
if( useDash == 1. ){
c.a *= ceil(mod(vCounters + dashOffset, dashArray) - (dashArray * dashRatio));
}
gl_FragColor = CustomLinearTosRGB(c);
}

68
app/src/lib/graph-interface/edges/MeshGradientLine/types.ts
View File

@@ -1,68 +0,0 @@
import type { Props } from '@threlte/core';
import type { BufferGeometry, Vector3 } from 'three';
import type { ColorRepresentation, ShaderMaterial, Texture } from 'three';
export type MeshLineGeometryProps = Props<BufferGeometry> & {
/**
* @default []
*/
points: Vector3[];
/**
* @default 'none'
*/
shape?: 'none' | 'taper' | 'custom';
/**
* @default () => 1
*/
shapeFunction?: (p: number) => number;
};
export type MeshLineMaterialProps =
& Omit<
Props<ShaderMaterial>,
'uniforms' | 'fragmentShader' | 'vertexShader'
>
& {
/**
* @default 1
*/
opacity?: number;
/**
* @default '#ffffff'
*/
color?: ColorRepresentation;
/**
* @default 0
*/
dashOffset?: number;
/**
* @default 0
*/
dashArray?: number;
/**
* @default 0
*/
dashRatio?: number;
/**
* @default true
*/
attenuate?: boolean;
/**
* @default 1
*/
width?: number;
/**
* @default 0
*/
scaleDown?: number;
alphaMap?: Texture | undefined;
};

83
app/src/lib/graph-interface/edges/MeshGradientLine/vertex.vert
View File

@@ -1,83 +0,0 @@
attribute vec3 previous;
attribute vec3 next;
attribute float side;
attribute float width;
attribute float counters;
uniform vec2 resolution;
uniform float lineWidth;
uniform vec3 color;
uniform float opacity;
uniform float sizeAttenuation;
uniform float scaleDown;
varying vec2 vUV;
varying vec4 vColor;
varying float vCounters;
vec2 intoScreen(vec4 i) {
return resolution * (0.5 * i.xy / i.w + 0.5);
}
void main() {
float aspect = resolution.y / resolution.x;
mat4 m = projectionMatrix * modelViewMatrix;
vec4 currentClip = m * vec4( position, 1.0 );
vec4 prevClip = m * vec4( previous, 1.0 );
vec4 nextClip = m * vec4( next, 1.0 );
vec4 currentNormed = currentClip / currentClip.w;
vec4 prevNormed = prevClip / prevClip.w;
vec4 nextNormed = nextClip / nextClip.w;
vec2 currentScreen = intoScreen(currentNormed);
vec2 prevScreen = intoScreen(prevNormed);
vec2 nextScreen = intoScreen(nextNormed);
float actualWidth = lineWidth * width;
vec2 dir;
if(nextScreen == currentScreen) {
dir = normalize( currentScreen - prevScreen );
} else if(prevScreen == currentScreen) {
dir = normalize( nextScreen - currentScreen );
} else {
vec2 inDir = currentScreen - prevScreen;
vec2 outDir = nextScreen - currentScreen;
vec2 fullDir = nextScreen - prevScreen;
if(length(fullDir) > 0.0) {
dir = normalize(fullDir);
} else if(length(inDir) > 0.0){
dir = normalize(inDir);
} else {
dir = normalize(outDir);
}
}
vec2 normal = vec2(-dir.y, dir.x);
if(sizeAttenuation != 0.0) {
normal /= currentClip.w;
normal *= min(resolution.x, resolution.y);
}
if (scaleDown > 0.0) {
float dist = length(nextNormed - prevNormed);
normal *= smoothstep(0.0, scaleDown, dist);
}
vec2 offsetInScreen = actualWidth * normal * side * 0.5;
vec2 withOffsetScreen = currentScreen + offsetInScreen;
vec3 withOffsetNormed = vec3((2.0 * withOffsetScreen/resolution - 1.0), currentNormed.z);
vCounters = counters;
vColor = vec4( color, opacity );
vUV = uv;
gl_Position = currentClip.w * vec4(withOffsetNormed, 1.0);
}

265
app/src/lib/graph-interface/graph-manager.svelte.test.ts
View File

@@ -1,265 +0,0 @@
import { describe, expect, it } from 'vitest';
import { GraphManager } from './graph-manager.svelte';
import {
createMockNodeRegistry,
mockFloatInputNode,
mockFloatOutputNode,
mockGeometryOutputNode,
mockPathInputNode,
mockVec3OutputNode
} from './test-utils';
describe('GraphManager', () => {
describe('getPossibleSockets', () => {
describe('when dragging an output socket', () => {
it('should return compatible input sockets based on type', () => {
const registry = createMockNodeRegistry([
mockFloatOutputNode,
mockFloatInputNode,
mockGeometryOutputNode,
mockPathInputNode
]);
const manager = new GraphManager(registry);
const floatInputNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
const floatOutputNode = manager.createNode({
type: 'test/node/output',
position: [0, 0],
props: {}
});
expect(floatInputNode).toBeDefined();
expect(floatOutputNode).toBeDefined();
const possibleSockets = manager.getPossibleSockets({
node: floatOutputNode!,
index: 0,
position: [0, 0]
});
expect(possibleSockets.length).toBe(1);
const socketNodeIds = possibleSockets.map(([node]) => node.id);
expect(socketNodeIds).toContain(floatInputNode!.id);
});
it('should exclude self node from possible sockets', () => {
const registry = createMockNodeRegistry([
mockFloatOutputNode,
mockFloatInputNode
]);
const manager = new GraphManager(registry);
const floatInputNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
expect(floatInputNode).toBeDefined();
const possibleSockets = manager.getPossibleSockets({
node: floatInputNode!,
index: 'value',
position: [0, 0]
});
const socketNodeIds = possibleSockets.map(([node]) => node.id);
expect(socketNodeIds).not.toContain(floatInputNode!.id);
});
it('should exclude parent nodes from possible sockets when dragging output', () => {
const registry = createMockNodeRegistry([
mockFloatOutputNode,
mockFloatInputNode
]);
const manager = new GraphManager(registry);
const parentNode = manager.createNode({
type: 'test/node/output',
position: [0, 0],
props: {}
});
const childNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
expect(parentNode).toBeDefined();
expect(childNode).toBeDefined();
if (parentNode && childNode) {
manager.createEdge(parentNode, 0, childNode, 'value');
}
const possibleSockets = manager.getPossibleSockets({
node: parentNode!,
index: 0,
position: [0, 0]
});
const socketNodeIds = possibleSockets.map(([node]) => node.id);
expect(socketNodeIds).not.toContain(childNode!.id);
});
it('should return sockets compatible with accepts property', () => {
const registry = createMockNodeRegistry([
mockGeometryOutputNode,
mockPathInputNode
]);
const manager = new GraphManager(registry);
const geometryOutputNode = manager.createNode({
type: 'test/node/geometry',
position: [0, 0],
props: {}
});
const pathInputNode = manager.createNode({
type: 'test/node/path',
position: [100, 100],
props: {}
});
expect(geometryOutputNode).toBeDefined();
expect(pathInputNode).toBeDefined();
const possibleSockets = manager.getPossibleSockets({
node: geometryOutputNode!,
index: 0,
position: [0, 0]
});
const socketNodeIds = possibleSockets.map(([node]) => node.id);
expect(socketNodeIds).toContain(pathInputNode!.id);
});
it('should return empty array when no compatible sockets exist', () => {
const registry = createMockNodeRegistry([
mockVec3OutputNode,
mockFloatInputNode
]);
const manager = new GraphManager(registry);
const vec3OutputNode = manager.createNode({
type: 'test/node/vec3',
position: [0, 0],
props: {}
});
const floatInputNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
expect(vec3OutputNode).toBeDefined();
expect(floatInputNode).toBeDefined();
const possibleSockets = manager.getPossibleSockets({
node: vec3OutputNode!,
index: 0,
position: [0, 0]
});
const socketNodeIds = possibleSockets.map(([node]) => node.id);
expect(socketNodeIds).not.toContain(floatInputNode!.id);
expect(possibleSockets.length).toBe(0);
});
it('should return socket info with correct socket key for inputs', () => {
const registry = createMockNodeRegistry([
mockFloatOutputNode,
mockFloatInputNode
]);
const manager = new GraphManager(registry);
const floatOutputNode = manager.createNode({
type: 'test/node/output',
position: [0, 0],
props: {}
});
const floatInputNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
expect(floatOutputNode).toBeDefined();
expect(floatInputNode).toBeDefined();
const possibleSockets = manager.getPossibleSockets({
node: floatOutputNode!,
index: 0,
position: [0, 0]
});
const matchingSocket = possibleSockets.find(([node]) => node.id === floatInputNode!.id);
expect(matchingSocket).toBeDefined();
expect(matchingSocket![1]).toBe('value');
});
it('should return multiple compatible sockets', () => {
const registry = createMockNodeRegistry([
mockFloatOutputNode,
mockFloatInputNode,
mockGeometryOutputNode,
mockPathInputNode
]);
const manager = new GraphManager(registry);
const floatOutputNode = manager.createNode({
type: 'test/node/output',
position: [0, 0],
props: {}
});
const geometryOutputNode = manager.createNode({
type: 'test/node/geometry',
position: [200, 0],
props: {}
});
const floatInputNode = manager.createNode({
type: 'test/node/input',
position: [100, 100],
props: {}
});
const pathInputNode = manager.createNode({
type: 'test/node/path',
position: [300, 100],
props: {}
});
expect(floatOutputNode).toBeDefined();
expect(geometryOutputNode).toBeDefined();
expect(floatInputNode).toBeDefined();
expect(pathInputNode).toBeDefined();
const possibleSocketsForFloat = manager.getPossibleSockets({
node: floatOutputNode!,
index: 0,
position: [0, 0]
});
expect(possibleSocketsForFloat.length).toBe(1);
expect(possibleSocketsForFloat.map(([n]) => n.id)).toContain(floatInputNode!.id);
});
});
});
});

85
app/src/lib/graph-interface/graph-manager.svelte.ts
View File

@@ -25,15 +25,14 @@ const clone = 'structuredClone' in self
? self.structuredClone ? self.structuredClone
: (args: unknown) => JSON.parse(JSON.stringify(args)); : (args: unknown) => JSON.parse(JSON.stringify(args));
export function areSocketsCompatible( function areSocketsCompatible(
output: string | undefined, output: string | undefined,
inputs: string | (string | undefined)[] | undefined inputs: string | (string | undefined)[] | undefined
) { ) {
if (output === '*') return true;
if (Array.isArray(inputs) && output) { if (Array.isArray(inputs) && output) {
return inputs.includes('*') || inputs.includes(output); return inputs.includes(output);
} }
return inputs === output || inputs === '*'; return inputs === output;
} }
function areEdgesEqual(firstEdge: Edge, secondEdge: Edge) { function areEdgesEqual(firstEdge: Edge, secondEdge: Edge) {
@@ -269,7 +268,14 @@ export class GraphManager extends EventEmitter<{
private _init(graph: Graph) { private _init(graph: Graph) {
const nodes = new SvelteMap( const nodes = new SvelteMap(
graph.nodes.map((node) => { graph.nodes.map((node) => {
return [node.id, node as NodeInstance]; const nodeType = this.registry.getNode(node.type);
const n = node as NodeInstance;
if (nodeType) {
n.state = {
type: nodeType
};
}
return [node.id, n];
}) })
); );
@@ -294,30 +300,6 @@ export class GraphManager extends EventEmitter<{
this.execute(); this.execute();
} }
private async loadAllCollections() {
// Fetch all nodes from all collections of the loaded nodes
const nodeIds = Array.from(new Set([...this.graph.nodes.map((n) => n.type)]));
const allCollections = new Set<`${string}/${string}`>();
for (const id of nodeIds) {
const [user, collection] = id.split('/');
allCollections.add(`${user}/${collection}`);
}
const allCollectionIds = await Promise
.all([...allCollections]
.map(async (collection) =>
remoteRegistry
.fetchCollection(collection)
.then((collection: { nodes: { id: NodeId }[] }) => {
return collection.nodes.map(n => n.id.replace(/\.wasm$/, '') as NodeId);
})
));
const missingNodeIds = [...new Set(allCollectionIds.flat())];
this.registry.load(missingNodeIds);
}
async load(graph: Graph) { async load(graph: Graph) {
const a = performance.now(); const a = performance.now();
@@ -402,9 +384,7 @@ export class GraphManager extends EventEmitter<{
this.loaded = true; this.loaded = true;
logger.log(`Graph loaded in ${performance.now() - a}ms`); logger.log(`Graph loaded in ${performance.now() - a}ms`);
setTimeout(() => this.execute(), 100); setTimeout(() => this.execute(), 100);
this.loadAllCollections(); // lazily load all nodes from all collections
} }
getAllNodes() { getAllNodes() {
@@ -511,10 +491,10 @@ export class GraphManager extends EventEmitter<{
const inputs = Object.entries(to.state?.type?.inputs ?? {}); const inputs = Object.entries(to.state?.type?.inputs ?? {});
const outputs = from.state?.type?.outputs ?? []; const outputs = from.state?.type?.outputs ?? [];
for (let i = 0; i < inputs.length; i++) { for (let i = 0; i < inputs.length; i++) {
const [inputName, input] = inputs[i]; const [inputName, input] = inputs[0];
for (let o = 0; o < outputs.length; o++) { for (let o = 0; o < outputs.length; o++) {
const output = outputs[o]; const output = outputs[0];
if (input.type === output || input.type === '*') { if (input.type === output) {
return this.createEdge(from, o, to, inputName); return this.createEdge(from, o, to, inputName);
} }
} }
@@ -616,14 +596,11 @@ export class GraphManager extends EventEmitter<{
return; return;
} }
const fromType = from.state.type || this.registry.getNode(from.type);
const toType = to.state.type || this.registry.getNode(to.type);
// check if socket types match // check if socket types match
const fromSocketType = fromType?.outputs?.[fromSocket]; const fromSocketType = from.state?.type?.outputs?.[fromSocket];
const toSocketType = [toType?.inputs?.[toSocket]?.type]; const toSocketType = [to.state?.type?.inputs?.[toSocket]?.type];
if (toType?.inputs?.[toSocket]?.accepts) { if (to.state?.type?.inputs?.[toSocket]?.accepts) {
toSocketType.push(...(toType?.inputs?.[toSocket]?.accepts || [])); toSocketType.push(...(to?.state?.type?.inputs?.[toSocket]?.accepts || []));
} }
if (!areSocketsCompatible(fromSocketType, toSocketType)) { if (!areSocketsCompatible(fromSocketType, toSocketType)) {
@@ -746,9 +723,8 @@ export class GraphManager extends EventEmitter<{
} }
getPossibleSockets({ node, index }: Socket): [NodeInstance, string | number][] { getPossibleSockets({ node, index }: Socket): [NodeInstance, string | number][] {
const nodeType = this.registry.getNode(node.type); const nodeType = node?.state?.type;
if (!nodeType) return []; if (!nodeType) return [];
console.log({ index });
const sockets: [NodeInstance, string | number][] = []; const sockets: [NodeInstance, string | number][] = [];
@@ -763,7 +739,7 @@ export class GraphManager extends EventEmitter<{
const ownType = nodeType?.inputs?.[index].type; const ownType = nodeType?.inputs?.[index].type;
for (const node of nodes) { for (const node of nodes) {
const nodeType = this.registry.getNode(node.type); const nodeType = node?.state?.type;
const inputs = nodeType?.outputs; const inputs = nodeType?.outputs;
if (!inputs) continue; if (!inputs) continue;
for (let index = 0; index < inputs.length; index++) { for (let index = 0; index < inputs.length; index++) {
@@ -781,21 +757,17 @@ export class GraphManager extends EventEmitter<{
(n) => n.id !== node.id && !parents.has(n.id) (n) => n.id !== node.id && !parents.has(n.id)
); );
const edges = new SvelteMap<number, string[]>(); // get edges from this socket
this.getEdgesFromNode(node) const edges = new SvelteMap(
.filter((e) => e[1] === index) this.getEdgesFromNode(node)
.forEach((e) => { .filter((e) => e[1] === index)
if (edges.has(e[2].id)) { .map((e) => [e[2].id, e[3]])
edges.get(e[2].id)?.push(e[3]); );
} else {
edges.set(e[2].id, [e[3]]);
}
});
const ownType = nodeType.outputs?.[index]; const ownType = nodeType.outputs?.[index];
for (const node of nodes) { for (const node of nodes) {
const inputs = this.registry.getNode(node.type)?.inputs; const inputs = node?.state?.type?.inputs;
if (!inputs) continue; if (!inputs) continue;
for (const key in inputs) { for (const key in inputs) {
const otherType = [inputs[key].type]; const otherType = [inputs[key].type];
@@ -803,7 +775,7 @@ export class GraphManager extends EventEmitter<{
if ( if (
areSocketsCompatible(ownType, otherType) areSocketsCompatible(ownType, otherType)
&& !edges.get(node.id)?.includes(key) && edges.get(node.id) !== key
) { ) {
sockets.push([node, key]); sockets.push([node, key]);
} }
@@ -811,7 +783,6 @@ export class GraphManager extends EventEmitter<{
} }
} }
console.log(`Found ${sockets.length} possible sockets`, sockets);
return sockets; return sockets;
} }

98
app/src/lib/graph-interface/graph-state.svelte.ts
View File

@@ -3,8 +3,6 @@ import { getContext, setContext } from 'svelte';
import { SvelteMap, SvelteSet } from 'svelte/reactivity'; import { SvelteMap, SvelteSet } from 'svelte/reactivity';
import type { OrthographicCamera, Vector3 } from 'three'; import type { OrthographicCamera, Vector3 } from 'three';
import type { GraphManager } from './graph-manager.svelte'; import type { GraphManager } from './graph-manager.svelte';
import { ColorGenerator } from './graph/colors';
import { getNodeHeight, getSocketPosition } from './helpers/nodeHelpers';
const graphStateKey = Symbol('graph-state'); const graphStateKey = Symbol('graph-state');
export function getGraphState() { export function getGraphState() {
@@ -29,32 +27,7 @@ type EdgeData = {
points: Vector3[]; points: Vector3[];
}; };
const predefinedColors = {
path: {
hue: 80,
lightness: 20,
saturation: 80
},
float: {
hue: 70,
lightness: 10,
saturation: 0
},
geometry: {
hue: 0,
lightness: 50,
saturation: 70
},
'*': {
hue: 200,
lightness: 20,
saturation: 100
}
} as const;
export class GraphState { export class GraphState {
colors = new ColorGenerator(predefinedColors);
constructor(private graph: GraphManager) { constructor(private graph: GraphManager) {
$effect.root(() => { $effect.root(() => {
$effect(() => { $effect(() => {
@@ -110,7 +83,7 @@ export class GraphState {
addMenuPosition = $state<[number, number] | null>(null); addMenuPosition = $state<[number, number] | null>(null);
snapToGrid = $state(false); snapToGrid = $state(false);
backgroundType = $state<'grid' | 'dots' | 'none'>('grid'); showGrid = $state(true);
showHelp = $state(false); showHelp = $state(false);
cameraDown = [0, 0]; cameraDown = [0, 0];
@@ -186,27 +159,44 @@ export class GraphState {
return 1; return 1;
} }
tryConnectToDebugNode(nodeId: number) { getSocketPosition(
const node = this.graph.nodes.get(nodeId); node: NodeInstance,
if (!node) return; index: string | number
if (node.type.endsWith('/debug')) return; ): [number, number] {
if (!node.state.type?.outputs?.length) return; if (typeof index === 'number') {
for (const _node of this.graph.nodes.values()) { return [
if (_node.type.endsWith('/debug')) { (node?.state?.x ?? node.position[0]) + 20,
this.graph.createEdge(node, 0, _node, 'input'); (node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
return; ];
} } else {
const _index = Object.keys(node.state?.type?.inputs || {}).indexOf(index);
return [
node?.state?.x ?? node.position[0],
(node?.state?.y ?? node.position[1]) + 10 + 10 * _index
];
} }
}
const debugNode = this.graph.createNode({ private nodeHeightCache: Record<string, number> = {};
type: 'max/plantarium/debug', getNodeHeight(nodeTypeId: string) {
position: [node.position[0] + 30, node.position[1]], if (nodeTypeId in this.nodeHeightCache) {
props: {} return this.nodeHeightCache[nodeTypeId];
});
if (debugNode) {
this.graph.createEdge(node, 0, debugNode, 'input');
} }
const node = this.graph.getNodeType(nodeTypeId);
if (!node?.inputs) {
return 5;
}
const height = 5
+ 10
* Object.keys(node.inputs).filter(
(p) =>
p !== 'seed'
&& node?.inputs
&& !(node?.inputs?.[p] !== undefined && 'setting' in node.inputs[p])
&& node.inputs[p].hidden !== true
).length;
this.nodeHeightCache[nodeTypeId] = height;
return height;
} }
copyNodes() { copyNodes() {
@@ -259,14 +249,14 @@ export class GraphState {
let { node, index, position } = socket; let { node, index, position } = socket;
// if the socket is an input socket -> remove existing edges // remove existing edge
if (typeof index === 'string') { if (typeof index === 'string') {
const edges = this.graph.getEdgesToNode(node); const edges = this.graph.getEdgesToNode(node);
for (const edge of edges) { for (const edge of edges) {
if (edge[3] === index) { if (edge[3] === index) {
node = edge[0]; node = edge[0];
index = edge[1]; index = edge[1];
position = getSocketPosition(node, index); position = this.getSocketPosition(node, index);
this.graph.removeEdge(edge); this.graph.removeEdge(edge);
break; break;
} }
@@ -286,7 +276,7 @@ export class GraphState {
return { return {
node, node,
index, index,
position: getSocketPosition(node, index) position: this.getSocketPosition(node, index)
}; };
}); });
} }
@@ -323,7 +313,7 @@ export class GraphState {
for (const node of this.graph.nodes.values()) { for (const node of this.graph.nodes.values()) {
const x = node.position[0]; const x = node.position[0];
const y = node.position[1]; const y = node.position[1];
const height = getNodeHeight(node.state.type!); const height = this.getNodeHeight(node.type);
if (downX > x && downX < x + 20 && downY > y && downY < y + height) { if (downX > x && downX < x + 20 && downY > y && downY < y + height) {
clickedNodeId = node.id; clickedNodeId = node.id;
break; break;
@@ -335,12 +325,14 @@ export class GraphState {
} }
isNodeInView(node: NodeInstance) { isNodeInView(node: NodeInstance) {
const height = getNodeHeight(node.state.type!); const height = this.getNodeHeight(node.type);
const width = 20; const width = 20;
return node.position[0] > this.cameraBounds[0] - width return (
node.position[0] > this.cameraBounds[0] - width
&& node.position[0] < this.cameraBounds[1] && node.position[0] < this.cameraBounds[1]
&& node.position[1] > this.cameraBounds[2] - height && node.position[1] > this.cameraBounds[2] - height
&& node.position[1] < this.cameraBounds[3]; && node.position[1] < this.cameraBounds[3]
);
} }
openNodePalette() { openNodePalette() {

32
app/src/lib/graph-interface/graph/Graph.svelte
View File

@@ -11,18 +11,15 @@
import Debug from '../debug/Debug.svelte'; import Debug from '../debug/Debug.svelte';
import EdgeEl from '../edges/Edge.svelte'; import EdgeEl from '../edges/Edge.svelte';
import { getGraphManager, getGraphState } from '../graph-state.svelte'; import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { getSocketPosition } from '../helpers/nodeHelpers';
import NodeEl from '../node/Node.svelte'; import NodeEl from '../node/Node.svelte';
import { maxZoom, minZoom } from './constants'; import { maxZoom, minZoom } from './constants';
import { FileDropEventManager } from './drop.events'; import { FileDropEventManager } from './drop.events';
import { MouseEventManager } from './mouse.events'; import { MouseEventManager } from './mouse.events';
const { const {
keymap, keymap
addMenuPadding
}: { }: {
keymap: ReturnType<typeof createKeyMap>; keymap: ReturnType<typeof createKeyMap>;
addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
} = $props(); } = $props();
const graph = getGraphManager(); const graph = getGraphManager();
@@ -39,8 +36,8 @@
return [0, 0, 0, 0]; return [0, 0, 0, 0];
} }
const pos1 = getSocketPosition(fromNode, edge[1]); const pos1 = graphState.getSocketPosition(fromNode, edge[1]);
const pos2 = getSocketPosition(toNode, edge[3]); const pos2 = graphState.getSocketPosition(toNode, edge[3]);
return [pos1[0], pos1[1], pos2[0], pos2[1]]; return [pos1[0], pos1[1], pos2[0], pos2[1]];
} }
@@ -95,13 +92,6 @@
graphState.activeSocket = null; graphState.activeSocket = null;
graphState.addMenuPosition = null; graphState.addMenuPosition = null;
} }
function getSocketType(node: NodeInstance, index: number | string): string {
if (typeof index === 'string') {
return node.state.type?.inputs?.[index].type || 'unknown';
}
return node.state.type?.outputs?.[index] || 'unknown';
}
</script> </script>
<svelte:window <svelte:window
@@ -142,9 +132,8 @@
position={graphState.cameraPosition} position={graphState.cameraPosition}
/> />
{#if graphState.backgroundType !== 'none'} {#if graphState.showGrid !== false}
<Background <Background
type={graphState.backgroundType}
cameraPosition={graphState.cameraPosition} cameraPosition={graphState.cameraPosition}
{maxZoom} {maxZoom}
{minZoom} {minZoom}
@@ -170,20 +159,12 @@
{#if graph.status === 'idle'} {#if graph.status === 'idle'}
{#if graphState.addMenuPosition} {#if graphState.addMenuPosition}
<AddMenu <AddMenu onnode={handleNodeCreation} />
onnode={handleNodeCreation}
paddingTop={addMenuPadding?.top}
paddingRight={addMenuPadding?.right}
paddingBottom={addMenuPadding?.bottom}
paddingLeft={addMenuPadding?.left}
/>
{/if} {/if}
{#if graphState.activeSocket} {#if graphState.activeSocket}
<EdgeEl <EdgeEl
z={graphState.cameraPosition[2]} z={graphState.cameraPosition[2]}
inputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
outputType={getSocketType(graphState.activeSocket.node, graphState.activeSocket.index)}
x1={graphState.activeSocket.position[0]} x1={graphState.activeSocket.position[0]}
y1={graphState.activeSocket.position[1]} y1={graphState.activeSocket.position[1]}
x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]} x2={graphState.edgeEndPosition?.[0] ?? graphState.mousePosition[0]}
@@ -196,8 +177,6 @@
<EdgeEl <EdgeEl
id={graph.getEdgeId(edge)} id={graph.getEdgeId(edge)}
z={graphState.cameraPosition[2]} z={graphState.cameraPosition[2]}
inputType={getSocketType(edge[0], edge[1])}
outputType={getSocketType(edge[2], edge[3])}
{x1} {x1}
{y1} {y1}
{x2} {x2}
@@ -220,6 +199,7 @@
<NodeEl <NodeEl
{node} {node}
inView={graphState.isNodeInView(node)} inView={graphState.isNodeInView(node)}
z={graphState.cameraPosition[2]}
/> />
{/each} {/each}
</div> </div>

12
app/src/lib/graph-interface/graph/Wrapper.svelte
View File

@@ -13,13 +13,11 @@
settings?: Record<string, unknown>; settings?: Record<string, unknown>;
activeNode?: NodeInstance; activeNode?: NodeInstance;
backgroundType?: 'grid' | 'dots' | 'none'; showGrid?: boolean;
snapToGrid?: boolean; snapToGrid?: boolean;
showHelp?: boolean; showHelp?: boolean;
settingTypes?: Record<string, unknown>; settingTypes?: Record<string, unknown>;
addMenuPadding?: { left?: number; right?: number; bottom?: number; top?: number };
onsave?: (save: Graph) => void; onsave?: (save: Graph) => void;
onresult?: (result: unknown) => void; onresult?: (result: unknown) => void;
}; };
@@ -27,13 +25,11 @@
let { let {
graph, graph,
registry, registry,
addMenuPadding,
settings = $bindable(), settings = $bindable(),
activeNode = $bindable(), activeNode = $bindable(),
backgroundType = $bindable('grid'), showGrid = $bindable(true),
snapToGrid = $bindable(true), snapToGrid = $bindable(true),
showHelp = $bindable(false), showHelp = $bindable(false),
settings = $bindable(),
settingTypes = $bindable(), settingTypes = $bindable(),
onsave, onsave,
onresult onresult
@@ -47,7 +43,7 @@
const graphState = new GraphState(manager); const graphState = new GraphState(manager);
$effect(() => { $effect(() => {
graphState.backgroundType = backgroundType; graphState.showGrid = showGrid;
graphState.snapToGrid = snapToGrid; graphState.snapToGrid = snapToGrid;
graphState.showHelp = showHelp; graphState.showHelp = showHelp;
}); });
@@ -87,4 +83,4 @@
}); });
</script> </script>
<GraphEl {keymap} {addMenuPadding} /> <GraphEl {keymap} />

2
app/src/lib/graph-interface/graph/colors.svelte.ts
View File

@@ -9,7 +9,7 @@ const variables = [
'outline', 'outline',
'active', 'active',
'selected', 'selected',
'connection' 'edge'
] as const; ] as const;
function getColor(variable: (typeof variables)[number]) { function getColor(variable: (typeof variables)[number]) {

44
app/src/lib/graph-interface/graph/colors.ts
View File

@@ -1,44 +0,0 @@
type Color = { hue: number; saturation: number; lightness: number };
export class ColorGenerator {
private colors: Map<string, Color> = new Map();
private lightnessLevels = [10, 60];
constructor(predefined: Record<string, Color>) {
for (const [id, colorStr] of Object.entries(predefined)) {
this.colors.set(id, colorStr);
}
}
public getColor(id: string): string {
if (this.colors.has(id)) {
return this.colorToHsl(this.colors.get(id)!);
}
const newColor = this.generateNewColor();
this.colors.set(id, newColor);
return this.colorToHsl(newColor);
}
private generateNewColor(): Color {
const existingHues = Array.from(this.colors.values()).map(c => c.hue).sort();
let hue = existingHues[0];
let attempts = 0;
while (
existingHues.some(h => Math.abs(h - hue) < 30 || Math.abs(h - hue) > 330)
&& attempts < 360
) {
hue = (hue + 30) % 360;
attempts++;
}
const lightness = 60;
return { hue, lightness, saturation: 100 };
}
private colorToHsl(c: Color): string {
return `hsl(${c.hue}, ${c.saturation}%, ${c.lightness}%)`;
}
}

24
app/src/lib/graph-interface/graph/mouse.events.ts
View File

@@ -3,7 +3,6 @@ import { type NodeInstance } from '@nodarium/types';
import type { GraphManager } from '../graph-manager.svelte'; import type { GraphManager } from '../graph-manager.svelte';
import { type GraphState } from '../graph-state.svelte'; import { type GraphState } from '../graph-state.svelte';
import { snapToGrid as snapPointToGrid } from '../helpers'; import { snapToGrid as snapPointToGrid } from '../helpers';
import { getNodeHeight } from '../helpers/nodeHelpers';
import { maxZoom, minZoom, zoomSpeed } from './constants'; import { maxZoom, minZoom, zoomSpeed } from './constants';
import { EdgeInteractionManager } from './edge.events'; import { EdgeInteractionManager } from './edge.events';
@@ -167,14 +166,15 @@ export class MouseEventManager {
if (this.state.mouseDown) return; if (this.state.mouseDown) return;
this.state.edgeEndPosition = null; this.state.edgeEndPosition = null;
const target = event.target as HTMLElement;
if ( if (event.target instanceof HTMLElement) {
target.nodeName !== 'CANVAS' if (
&& !target.classList.contains('node') event.target.nodeName !== 'CANVAS'
&& !target.classList.contains('content') && !event.target.classList.contains('node')
) { && !event.target.classList.contains('content')
return; ) {
return;
}
} }
const mx = event.clientX - this.state.rect.x; const mx = event.clientX - this.state.rect.x;
@@ -189,10 +189,6 @@ export class MouseEventManager {
// if we clicked on a node // if we clicked on a node
if (clickedNodeId !== -1) { if (clickedNodeId !== -1) {
if (event.ctrlKey && event.shiftKey) {
this.state.tryConnectToDebugNode(clickedNodeId);
return;
}
if (this.state.activeNodeId === -1) { if (this.state.activeNodeId === -1) {
this.state.activeNodeId = clickedNodeId; this.state.activeNodeId = clickedNodeId;
// if the selected node is the same as the clicked node // if the selected node is the same as the clicked node
@@ -269,7 +265,7 @@ export class MouseEventManager {
} }
} }
if (_socket && smallestDist < 1.5) { if (_socket && smallestDist < 0.9) {
this.state.mousePosition = _socket.position; this.state.mousePosition = _socket.position;
this.state.hoveredSocket = _socket; this.state.hoveredSocket = _socket;
} else { } else {
@@ -294,7 +290,7 @@ export class MouseEventManager {
if (!node?.state) continue; if (!node?.state) continue;
const x = node.position[0]; const x = node.position[0];
const y = node.position[1]; const y = node.position[1];
const height = getNodeHeight(node.state.type!); const height = this.state.getNodeHeight(node.type);
if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) { if (x > x1 - 20 && x < x2 && y > y1 - height && y < y2) {
this.state.selectedNodes?.add(node.id); this.state.selectedNodes?.add(node.id);
} else { } else {

7
app/src/lib/graph-interface/helpers/index.ts
View File

@@ -35,9 +35,6 @@ export function createNodePath({
rightBump = false, rightBump = false,
aspectRatio = 1 aspectRatio = 1
} = {}) { } = {}) {
const leftBumpTopY = y + height / 2;
const leftBumpBottomY = y - height / 2;
return `M0,${cornerTop} return `M0,${cornerTop}
${ ${
cornerTop cornerTop
@@ -67,7 +64,9 @@ export function createNodePath({
} }
${ ${
leftBump leftBump
? ` V${leftBumpTopY} C${depth},${leftBumpTopY} ${depth},${leftBumpBottomY} 0,${leftBumpBottomY}` ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${
y - height / 2
}`
: ` H0` : ` H0`
} }
Z`.replace(/\s+/g, ' '); Z`.replace(/\s+/g, ' ');

71
app/src/lib/graph-interface/helpers/nodeHelpers.ts
View File

@@ -1,71 +0,0 @@
import type { NodeDefinition, NodeInstance } from '@nodarium/types';
export function getParameterHeight(node: NodeDefinition, inputKey: string) {
const input = node.inputs?.[inputKey];
if (!input) {
return 0;
}
if (inputKey === 'seed') return 0;
if (!node.inputs) return 0;
if ('setting' in input) return 0;
if (input.hidden) return 0;
if (input.type === 'shape' && input.external !== true) {
return 200;
}
if (
input?.label !== '' && !input.external && input.type !== 'path'
&& input.type !== 'geometry'
) {
return 100;
}
return 50;
}
export function getSocketPosition(
node: NodeInstance,
index: string | number
): [number, number] {
if (typeof index === 'number') {
return [
(node?.state?.x ?? node.position[0]) + 20,
(node?.state?.y ?? node.position[1]) + 2.5 + 10 * index
];
} else {
let height = 5;
const nodeType = node.state.type!;
const inputs = nodeType.inputs || {};
for (const inputKey in inputs) {
const h = getParameterHeight(nodeType, inputKey) / 10;
if (inputKey === index) {
height += h / 2;
break;
}
height += h;
}
return [
node?.state?.x ?? node.position[0],
(node?.state?.y ?? node.position[1]) + height
];
}
}
const nodeHeightCache: Record<string, number> = {};
export function getNodeHeight(node: NodeDefinition) {
if (node.id in nodeHeightCache) {
return nodeHeightCache[node.id];
}
if (!node?.inputs) {
return 5;
}
let height = 5;
for (const key in node.inputs) {
const h = getParameterHeight(node, key) / 10;
height += h;
}
nodeHeightCache[node.id] = height;
return height;
}

80
app/src/lib/graph-interface/node/Node.frag
View File

@@ -1,88 +1,56 @@
varying vec2 vUv; varying vec2 vUv;
uniform float uWidth; uniform float uWidth;
uniform float uHeight; uniform float uHeight;
uniform float uZoom;
uniform vec3 uColorDark; uniform vec3 uColorDark;
uniform vec3 uColorBright; uniform vec3 uColorBright;
uniform vec3 uStrokeColor;
const float uHeaderHeight = 5.0; uniform vec3 uStrokeColor;
uniform float uSectionHeights[16]; uniform float uStrokeWidth;
uniform int uNumSections;
float msign(in float x) { return (x < 0.0) ? -1.0 : 1.0; } float msign(in float x) { return (x < 0.0) ? -1.0 : 1.0; }
float sdCircle(vec2 p, float r) { return length(p) - r; }
vec4 roundedBoxSDF( in vec2 p, in vec2 b, in float r, in float s) { vec4 roundedBoxSDF( in vec2 p, in vec2 b, in float r, in float s) {
vec2 q = abs(p) - b + r; vec2 q = abs(p) - b + r;
float l = b.x + b.y + 1.570796 * r; float l = b.x + b.y + 1.570796 * r;
float k1 = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r; float k1 = min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
float k2 = ((q.x > 0.0) ? atan(q.y, q.x) : 1.570796); float k2 = ((q.x > 0.0) ? atan(q.y, q.x) : 1.570796);
float k3 = 3.0 + 2.0 * msign(min(p.x, -p.y)) - msign(p.x); float k3 = 3.0 + 2.0 * msign(min(p.x, -p.y)) - msign(p.x);
float k4 = msign(p.x * p.y); float k4 = msign(p.x * p.y);
float k5 = r * k2 + max(-q.x, 0.0); float k5 = r * k2 + max(-q.x, 0.0);
float ra = s * round(k1 / s); float ra = s * round(k1 / s);
float l2 = l + 1.570796 * ra; float l2 = l + 1.570796 * ra;
return vec4(k1 - ra, k3 * l2 + k4 * (b.y + ((q.y > 0.0) ? k5 + k2 * ra : q.y)), 4.0 * l2, k1); return vec4(k1 - ra, k3 * l2 + k4 * (b.y + ((q.y > 0.0) ? k5 + k2 * ra : q.y)), 4.0 * l2, k1);
} }
void main(){ void main(){
float strokeWidth = mix(2.0, 0.5, uZoom);
float borderRadius = 0.5;
float dentRadius = 0.8;
float y = (1.0 - vUv.y) * uHeight; float y = (1.0-vUv.y) * uHeight;
float x = vUv.x * uWidth; float x = vUv.x * uWidth;
vec2 size = vec2(uWidth, uHeight); vec2 size = vec2(uWidth, uHeight);
vec2 uvCenter = (vUv - 0.5) * 2.0; vec2 uv = (vUv - 0.5) * 2.0;
vec4 boxData = roundedBoxSDF(uvCenter * size, size, borderRadius * 2.0, 0.0); float u_border_radius = 0.4;
float sceneSDF = boxData.w; vec4 distance = roundedBoxSDF(uv * size, size, u_border_radius*2.0, 0.0);
vec2 headerDentPos = vec2(uWidth, uHeaderHeight * 0.5); if (distance.w > 0.0 ) {
float headerDentDist = sdCircle(vec2(x, y) - headerDentPos, dentRadius); // outside
sceneSDF = max(sceneSDF, -headerDentDist*2.0); gl_FragColor = vec4(0.0,0.0,0.0, 0.0);
}else{
float currentYBoundary = uHeaderHeight; if (distance.w > -uStrokeWidth || mod(y+5.0, 10.0) < uStrokeWidth/2.0) {
float previousYBoundary = uHeaderHeight; // draw the outer stroke
gl_FragColor = vec4(uStrokeColor, 1.0);
for (int i = 0; i < 16; i++) { }else if (y<5.0){
if (i >= uNumSections) break; // draw the header
gl_FragColor = vec4(uColorBright, 1.0);
float sectionHeight = uSectionHeights[i]; }else{
currentYBoundary += sectionHeight; gl_FragColor = vec4(uColorDark, 1.0);
}
float centerY = previousYBoundary + (sectionHeight * 0.5);
vec2 circlePos = vec2(0.0, centerY);
float circleDist = sdCircle(vec2(x, y) - circlePos, dentRadius);
sceneSDF = max(sceneSDF, -circleDist*2.0);
previousYBoundary = currentYBoundary;
}
if (sceneSDF > 0.05) {
gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
return;
}
vec3 finalColor = (y < uHeaderHeight) ? uColorBright : uColorDark;
bool isDivider = false;
float dividerY = uHeaderHeight;
if (abs(y - dividerY) < strokeWidth * 0.25) isDivider = true;
for (int i = 0; i < 16; i++) {
if (i >= uNumSections - 1) break;
dividerY += uSectionHeights[i];
if (abs(y - dividerY) < strokeWidth * 0.25) isDivider = true;
}
if (sceneSDF > -strokeWidth || isDivider) {
gl_FragColor = vec4(uStrokeColor, 1.0);
} else {
gl_FragColor = vec4(finalColor, 1.0);
} }
} }

38
app/src/lib/graph-interface/node/Node.svelte
View File

@@ -5,7 +5,6 @@
import { type Mesh } from 'three'; import { type Mesh } from 'three';
import { getGraphState } from '../graph-state.svelte'; import { getGraphState } from '../graph-state.svelte';
import { colors } from '../graph/colors.svelte'; import { colors } from '../graph/colors.svelte';
import { getNodeHeight, getParameterHeight } from '../helpers/nodeHelpers';
import NodeFrag from './Node.frag'; import NodeFrag from './Node.frag';
import NodeVert from './Node.vert'; import NodeVert from './Node.vert';
import NodeHtml from './NodeHTML.svelte'; import NodeHtml from './NodeHTML.svelte';
@@ -15,10 +14,9 @@
type Props = { type Props = {
node: NodeInstance; node: NodeInstance;
inView: boolean; inView: boolean;
z: number;
}; };
let { node = $bindable(), inView }: Props = $props(); let { node = $bindable(), inView, z }: Props = $props();
const nodeType = $derived(node.state.type!);
const isActive = $derived(graphState.activeNodeId === node.id); const isActive = $derived(graphState.activeNodeId === node.id);
const isSelected = $derived(graphState.selectedNodes.has(node.id)); const isSelected = $derived(graphState.selectedNodes.has(node.id));
@@ -31,18 +29,9 @@
: colors.outline) : colors.outline)
); );
const sectionHeights = $derived(
Object
.keys(nodeType.inputs || {})
.map(key => getParameterHeight(nodeType, key) / 10)
.filter(b => !!b)
);
let meshRef: Mesh | undefined = $state(); let meshRef: Mesh | undefined = $state();
const height = getNodeHeight(node.state.type!); const height = graphState.getNodeHeight(node.type);
const zoom = $derived(graphState.cameraPosition[2]);
$effect(() => { $effect(() => {
if (meshRef && !node.state?.mesh) { if (meshRef && !node.state?.mesh) {
@@ -50,10 +39,6 @@
graphState.updateNodePosition(node); graphState.updateNodePosition(node);
} }
}); });
const zoomValue = $derived(
(Math.log(graphState.cameraPosition[2]) - Math.log(1)) / (Math.log(40) - Math.log(1))
);
// const zoomValue = (graphState.cameraPosition[2] - 1) / 39;
</script> </script>
<T.Mesh <T.Mesh
@@ -62,7 +47,7 @@
position.y={0.8} position.y={0.8}
rotation.x={-Math.PI / 2} rotation.x={-Math.PI / 2}
bind:ref={meshRef} bind:ref={meshRef}
visible={inView && zoom < 7} visible={inView && z < 7}
> >
<T.PlaneGeometry args={[20, height]} radius={1} /> <T.PlaneGeometry args={[20, height]} radius={1} />
<T.ShaderMaterial <T.ShaderMaterial
@@ -73,18 +58,13 @@
uColorBright: { value: colors['layer-2'] }, uColorBright: { value: colors['layer-2'] },
uColorDark: { value: colors['layer-1'] }, uColorDark: { value: colors['layer-1'] },
uStrokeColor: { value: colors.outline.clone() }, uStrokeColor: { value: colors.outline.clone() },
uSectionHeights: { value: [5, 10] }, uStrokeWidth: { value: 1.0 },
uNumSections: { value: 2 },
uWidth: { value: 20 }, uWidth: { value: 20 },
uHeight: { value: 200 }, uHeight: { value: height }
uZoom: { value: 1.0 }
}} }}
uniforms.uZoom.value={zoomValue} uniforms.uStrokeColor.value={strokeColor.clone()}
uniforms.uHeight.value={height} uniforms.uStrokeWidth.value={(7 - z) / 3}
uniforms.uSectionHeights.value={sectionHeights}
uniforms.uNumSections.value={sectionHeights.length}
uniforms.uStrokeColor.value={strokeColor}
/> />
</T.Mesh> </T.Mesh>
<NodeHtml bind:node {inView} {isActive} {isSelected} z={zoom} /> <NodeHtml bind:node {inView} {isActive} {isSelected} {z} />

61
app/src/lib/graph-interface/node/NodeHeader.svelte
View File

@@ -1,9 +1,7 @@
<script lang="ts"> <script lang="ts">
import { appSettings } from '$lib/settings/app-settings.svelte'; import type { NodeInstance } from '@nodarium/types';
import type { NodeInstance, Socket } from '@nodarium/types';
import { getGraphState } from '../graph-state.svelte'; import { getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers/index.js'; import { createNodePath } from '../helpers/index.js';
import { getSocketPosition } from '../helpers/nodeHelpers';
const graphState = getGraphState(); const graphState = getGraphState();
@@ -16,7 +14,7 @@
graphState.setDownSocket?.({ graphState.setDownSocket?.({
node, node,
index: 0, index: 0,
position: getSocketPosition?.(node, 0) position: graphState.getSocketPosition?.(node, 0)
}); });
} }
} }
@@ -37,43 +35,22 @@
); );
const pathHover = $derived( const pathHover = $derived(
createNodePath({ createNodePath({
depth: 7, depth: 8.5,
height: 40, height: 50,
y: 49, y: 49,
cornerTop, cornerTop,
rightBump, rightBump,
aspectRatio aspectRatio
}) })
); );
const socketId = $derived(`${node.id}-${0}`);
function getSocketType(s: Socket | null) {
if (!s) return 'unknown';
if (typeof s.index === 'string') {
return s.node.state.type?.inputs?.[s.index].type || 'unknown';
}
return s.node.state.type?.outputs?.[s.index] || 'unknown';
}
const socketType = $derived(getSocketType(graphState.activeSocket));
const hoverColor = $derived(graphState.colors.getColor(socketType));
</script> </script>
<div <div class="wrapper" data-node-id={node.id} data-node-type={node.type}>
class="wrapper"
data-node-id={node.id}
data-node-type={node.type}
style:--socket-color={hoverColor}
class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
>
<div class="content"> <div class="content">
{#if appSettings.value.debug.advancedMode}
<span class="bg-white text-black! mr-2 px-1 rounded-sm opacity-30">{node.id}</span>
{/if}
{node.type.split('/').pop()} {node.type.split('/').pop()}
</div> </div>
<div <div
class="target" class="click-target"
role="button" role="button"
tabindex="0" tabindex="0"
onmousedown={handleMouseDown} onmousedown={handleMouseDown}
@@ -101,20 +78,7 @@
height: 50px; height: 50px;
} }
.possible-socket .target::before { .click-target {
content: "";
position: absolute;
width: 30px;
height: 30px;
border-radius: 100%;
box-shadow: 0px 0px 10px var(--socket-color);
background-color: var(--socket-color);
outline: solid thin var(--socket-color);
opacity: 0.7;
z-index: -10;
}
.target {
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 50%; top: 50%;
@@ -123,9 +87,11 @@
width: 30px; width: 30px;
z-index: 100; z-index: 100;
border-radius: 50%; border-radius: 50%;
/* background: red; */
/* opacity: 0.2; */
} }
.target:hover + svg path { .click-target:hover + svg path {
d: var(--hover-path); d: var(--hover-path);
} }
@@ -142,16 +108,11 @@
svg path { svg path {
stroke-width: 0.2px; stroke-width: 0.2px;
transition: transition: d 0.3s ease, fill 0.3s ease;
d 0.3s ease,
fill 0.3s ease;
fill: var(--color-layer-2); fill: var(--color-layer-2);
stroke: var(--stroke); stroke: var(--stroke);
stroke-width: var(--stroke-width); stroke-width: var(--stroke-width);
d: var(--path); d: var(--path);
stroke-linejoin: round;
shape-rendering: geometricPrecision;
} }
.content { .content {

19
app/src/lib/graph-interface/node/NodeInput.svelte
View File

@@ -31,24 +31,11 @@
return 0; return 0;
} }
let value = $state(structuredClone($state.snapshot(getDefaultValue()))); let value = $state(getDefaultValue());
function diffArray(a: number[], b?: number[] | number) {
if (!Array.isArray(b)) return true;
if (Array.isArray(a) !== Array.isArray(b)) return true;
if (a.length !== b.length) return true;
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return true;
}
return false;
}
$effect(() => { $effect(() => {
const a = $state.snapshot(value); if (value !== undefined && node?.props?.[id] !== value) {
const b = $state.snapshot(node?.props?.[id]); node.props = { ...node.props, [id]: value };
const isDiff = Array.isArray(a) ? diffArray(a, b) : a !== b;
if (value !== undefined && isDiff) {
node.props = { ...node.props, [id]: a };
if (graph) { if (graph) {
graph.save(); graph.save();
graph.execute(); graph.execute();

109
app/src/lib/graph-interface/node/NodeParameter.svelte
View File

@@ -1,8 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { NodeInput, NodeInstance, Socket } from '@nodarium/types'; import type { NodeInput, NodeInstance } from '@nodarium/types';
import { getGraphManager, getGraphState } from '../graph-state.svelte'; import { getGraphManager, getGraphState } from '../graph-state.svelte';
import { createNodePath } from '../helpers'; import { createNodePath } from '../helpers';
import { getParameterHeight, getSocketPosition } from '../helpers/nodeHelpers';
import NodeInputEl from './NodeInput.svelte'; import NodeInputEl from './NodeInput.svelte';
type Props = { type Props = {
@@ -13,18 +12,17 @@
}; };
const graph = getGraphManager(); const graph = getGraphManager();
const graphState = getGraphState();
const graphId = graph?.id;
const elementId = `input-${Math.random().toString(36).substring(7)}`;
let { node = $bindable(), input, id, isLast }: Props = $props(); let { node = $bindable(), input, id, isLast }: Props = $props();
const nodeType = $derived(node.state.type!); const inputType = $derived(node?.state?.type?.inputs?.[id]);
const inputType = $derived(nodeType.inputs?.[id]);
const socketId = $derived(`${node.id}-${id}`); const socketId = $derived(`${node.id}-${id}`);
const height = $derived(getParameterHeight(nodeType, id));
const graphState = getGraphState();
const graphId = graph?.id;
const elementId = `input-${Math.random().toString(36).substring(7)}`;
function handleMouseDown(ev: MouseEvent) { function handleMouseDown(ev: MouseEvent) {
ev.preventDefault(); ev.preventDefault();
@@ -32,18 +30,28 @@
graphState.setDownSocket({ graphState.setDownSocket({
node, node,
index: id, index: id,
position: getSocketPosition(node, id) position: graphState.getSocketPosition?.(node, id)
}); });
} }
const leftBump = $derived(nodeType.inputs?.[id].internal !== true); const leftBump = $derived(node.state?.type?.inputs?.[id].internal !== true);
const cornerBottom = $derived(isLast ? 5 : 0); const cornerBottom = $derived(isLast ? 5 : 0);
const aspectRatio = 0.5; const aspectRatio = 0.5;
const path = $derived( const path = $derived(
createNodePath({
depth: 7,
height: 20,
y: 50.5,
cornerBottom,
leftBump,
aspectRatio
})
);
const pathDisabled = $derived(
createNodePath({ createNodePath({
depth: 6, depth: 6,
height: 2000 / height, height: 18,
y: 50.5, y: 50.5,
cornerBottom, cornerBottom,
leftBump, leftBump,
@@ -52,49 +60,41 @@
); );
const pathHover = $derived( const pathHover = $derived(
createNodePath({ createNodePath({
depth: 7, depth: 8,
height: 2200 / height, height: 25,
y: 50.5, y: 50.5,
cornerBottom, cornerBottom,
leftBump, leftBump,
aspectRatio aspectRatio
}) })
); );
function getSocketType(s: Socket | null) {
if (!s) return 'unknown';
if (typeof s.index === 'string') {
return s.node.state.type?.inputs?.[s.index].type || 'unknown';
}
return s.node.state.type?.outputs?.[s.index] || 'unknown';
}
const socketType = $derived(getSocketType(graphState.activeSocket));
const hoverColor = $derived(graphState.colors.getColor(socketType));
</script> </script>
<div <div
class="wrapper" class="wrapper"
data-node-type={node.type} data-node-type={node.type}
data-node-input={id} data-node-input={id}
style:height="{height}px" class:disabled={!graphState?.possibleSocketIds.has(socketId)}
style:--socket-color={hoverColor}
class:possible-socket={graphState?.possibleSocketIds.has(socketId)}
> >
{#key id && graphId} {#key id && graphId}
<div class="content" class:disabled={graph?.inputSockets?.has(socketId)}> <div class="content" class:disabled={graph?.inputSockets?.has(socketId)}>
{#if inputType?.label !== ''} {#if inputType?.label !== ''}
<label for={elementId} title={input.description}>{input.label || id}</label> <label for={elementId} title={input.description}>{input.label || id}</label>
{/if} {/if}
<span
class="absolute i-[tabler--help-circle] size-4 block top-2 right-2 opacity-30"
title={JSON.stringify(input, null, 2)}
></span>
{#if inputType?.external !== true} {#if inputType?.external !== true}
<NodeInputEl {graph} {elementId} bind:node {input} {id} /> <NodeInputEl {graph} {elementId} bind:node {input} {id} />
{/if} {/if}
</div> </div>
{#if node?.state?.type?.inputs?.[id]?.internal !== true} {#if node?.state?.type?.inputs?.[id]?.internal !== true}
<div data-node-socket class="large target"></div>
<div <div
data-node-socket data-node-socket
class="target" class="small target"
onmousedown={handleMouseDown} onmousedown={handleMouseDown}
role="button" role="button"
tabindex="0" tabindex="0"
@@ -106,9 +106,14 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" viewBox="0 0 100 100"
width="100"
height="100"
preserveAspectRatio="none" preserveAspectRatio="none"
style:--path={`path("${path}")`} style={`
style:--hover-path={`path("${pathHover}")`} --path: path("${path}");
--hover-path: path("${pathHover}");
--hover-path-disabled: path("${pathDisabled}");
`}
> >
<path vector-effect="non-scaling-stroke"></path> <path vector-effect="non-scaling-stroke"></path>
</svg> </svg>
@@ -118,43 +123,42 @@
.wrapper { .wrapper {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100px;
transform: translateY(-0.5px); transform: translateY(-0.5px);
} }
.target { .target {
width: 30px;
height: 30px;
position: absolute; position: absolute;
border-radius: 50%; border-radius: 50%;
top: 50%; top: 50%;
transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%);
/* background: red; */
/* opacity: 0.1; */
} }
.possible-socket .target::before { .small.target {
content: "";
position: absolute;
width: 30px; width: 30px;
height: 30px; height: 30px;
border-radius: 100%;
box-shadow: 0px 0px 10px var(--socket-color);
background-color: var(--socket-color);
outline: solid thin var(--socket-color);
opacity: 0.5;
z-index: -10;
} }
.target:hover ~ svg path{ .large.target {
d: var(--hover-path); width: 60px;
height: 60px;
cursor: unset;
pointer-events: none;
}
:global(.hovering-sockets) .large.target {
pointer-events: all;
} }
.content { .content {
position: relative; position: relative;
padding: 10px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-inline: 20px;
height: 100%; height: 100%;
justify-content: center; justify-content: space-around;
gap: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
@@ -175,16 +179,19 @@
stroke: var(--stroke); stroke: var(--stroke);
stroke-width: var(--stroke-width); stroke-width: var(--stroke-width);
d: var(--path); d: var(--path);
}
stroke-linejoin: round; :global {
shape-rendering: geometricPrecision; .hovering-sockets .large:hover ~ svg path {
d: var(--hover-path);
}
} }
.content.disabled { .content.disabled {
opacity: 0.2; opacity: 0.2;
} }
.possible-socket svg path { .disabled svg path {
d: var(--hover-path); d: var(--hover-path-disabled) !important;
} }
</style> </style>

86
app/src/lib/graph-interface/test-utils.ts
View File

@@ -1,86 +0,0 @@
import type { NodeDefinition, NodeId, NodeRegistry } from '@nodarium/types';
export function createMockNodeRegistry(nodes: NodeDefinition[]): NodeRegistry {
const nodesMap = new Map(nodes.map(n => [n.id, n]));
return {
status: 'ready' as const,
load: async (nodeIds: NodeId[]) => {
const loaded: NodeDefinition[] = [];
for (const id of nodeIds) {
if (nodesMap.has(id)) {
loaded.push(nodesMap.get(id)!);
}
}
return loaded;
},
getNode: (id: string) => nodesMap.get(id as NodeId),
getAllNodes: () => Array.from(nodesMap.values()),
register: async () => {
throw new Error('Not implemented in mock');
}
};
}
export const mockFloatOutputNode: NodeDefinition = {
id: 'test/node/output',
inputs: {},
outputs: ['float'],
meta: { title: 'Float Output' },
execute: () => new Int32Array()
};
export const mockFloatInputNode: NodeDefinition = {
id: 'test/node/input',
inputs: { value: { type: 'float' } },
outputs: [],
meta: { title: 'Float Input' },
execute: () => new Int32Array()
};
export const mockGeometryOutputNode: NodeDefinition = {
id: 'test/node/geometry',
inputs: {},
outputs: ['geometry'],
meta: { title: 'Geometry Output' },
execute: () => new Int32Array()
};
export const mockPathInputNode: NodeDefinition = {
id: 'test/node/path',
inputs: { input: { type: 'path', accepts: ['geometry'] } },
outputs: [],
meta: { title: 'Path Input' },
execute: () => new Int32Array()
};
export const mockVec3OutputNode: NodeDefinition = {
id: 'test/node/vec3',
inputs: {},
outputs: ['vec3'],
meta: { title: 'Vec3 Output' },
execute: () => new Int32Array()
};
export const mockIntegerInputNode: NodeDefinition = {
id: 'test/node/integer',
inputs: { value: { type: 'integer' } },
outputs: [],
meta: { title: 'Integer Input' },
execute: () => new Int32Array()
};
export const mockBooleanOutputNode: NodeDefinition = {
id: 'test/node/boolean',
inputs: {},
outputs: ['boolean'],
meta: { title: 'Boolean Output' },
execute: () => new Int32Array()
};
export const mockBooleanInputNode: NodeDefinition = {
id: 'test/node/boolean-input',
inputs: { value: { type: 'boolean' } },
outputs: [],
meta: { title: 'Boolean Input' },
execute: () => new Int32Array()
};

110
app/src/lib/graph-templates.test.ts
View File

@@ -1,110 +0,0 @@
import { grid } from '$lib/graph-templates/grid';
import { tree } from '$lib/graph-templates/tree';
import { describe, expect, it } from 'vitest';
describe('graph-templates', () => {
describe('grid', () => {
it('should create a grid graph with nodes and edges', () => {
const result = grid(2, 3);
expect(result.nodes.length).toBeGreaterThan(0);
expect(result.edges.length).toBeGreaterThan(0);
});
it('should have output node at the end', () => {
const result = grid(1, 1);
const outputNode = result.nodes.find(n => n.type === 'max/plantarium/output');
expect(outputNode).toBeDefined();
});
it('should create nodes based on grid dimensions', () => {
const result = grid(2, 2);
const mathNodes = result.nodes.filter(n => n.type === 'max/plantarium/math');
expect(mathNodes.length).toBeGreaterThan(0);
const outputNode = result.nodes.find(n => n.type === 'max/plantarium/output');
expect(outputNode).toBeDefined();
});
it('should have output node at the end', () => {
const result = grid(1, 1);
const outputNode = result.nodes.find(n => n.type === 'max/plantarium/output');
expect(outputNode).toBeDefined();
});
it('should create nodes based on grid dimensions', () => {
const result = grid(2, 2);
const mathNodes = result.nodes.filter(n => n.type === 'max/plantarium/math');
expect(mathNodes.length).toBeGreaterThan(0);
const outputNode = result.nodes.find(n => n.type === 'max/plantarium/output');
expect(outputNode).toBeDefined();
});
it('should have valid node positions', () => {
const result = grid(3, 2);
result.nodes.forEach(node => {
expect(node.position).toHaveLength(2);
expect(typeof node.position[0]).toBe('number');
expect(typeof node.position[1]).toBe('number');
});
});
it('should generate valid graph structure', () => {
const result = grid(2, 2);
result.nodes.forEach(node => {
expect(typeof node.id).toBe('number');
expect(node.type).toBeTruthy();
});
result.edges.forEach(edge => {
expect(edge).toHaveLength(4);
});
});
});
describe('tree', () => {
it('should create a tree graph with specified depth', () => {
const result = tree(0);
expect(result.nodes.length).toBeGreaterThan(0);
expect(result.edges.length).toBeGreaterThan(0);
});
it('should have root output node', () => {
const result = tree(2);
const outputNode = result.nodes.find(n => n.type === 'max/plantarium/output');
expect(outputNode).toBeDefined();
expect(outputNode?.id).toBe(0);
});
it('should increase node count with depth', () => {
const tree0 = tree(0);
const tree1 = tree(1);
const tree2 = tree(2);
expect(tree0.nodes.length).toBeLessThan(tree1.nodes.length);
expect(tree1.nodes.length).toBeLessThan(tree2.nodes.length);
});
it('should create binary tree structure', () => {
const result = tree(2);
const mathNodes = result.nodes.filter(n => n.type === 'max/plantarium/math');
expect(mathNodes.length).toBeGreaterThan(0);
const edgeCount = result.edges.length;
expect(edgeCount).toBe(result.nodes.length - 1);
});
it('should have valid node positions', () => {
const result = tree(3);
result.nodes.forEach(node => {
expect(node.position).toHaveLength(2);
expect(typeof node.position[0]).toBe('number');
expect(typeof node.position[1]).toBe('number');
});
});
});
});

1
app/src/lib/graph-templates/index.ts
View File

@@ -4,5 +4,4 @@ export { default as lottaFaces } from './lotta-faces.json';
export { default as lottaNodesAndFaces } from './lotta-nodes-and-faces.json'; export { default as lottaNodesAndFaces } from './lotta-nodes-and-faces.json';
export { default as lottaNodes } from './lotta-nodes.json'; export { default as lottaNodes } from './lotta-nodes.json';
export { plant } from './plant'; export { plant } from './plant';
export { default as simple } from './simple.json';
export { tree } from './tree'; export { tree } from './tree';

63
app/src/lib/graph-templates/simple.json
View File

@@ -1,63 +0,0 @@
{
"id": 0,
"settings": {
"resolution.circle": 54,
"resolution.curve": 20,
"randomSeed": true
},
"meta": {
"title": "New Project",
"lastModified": "2026-02-03T16:56:40.375Z"
},
"nodes": [
{
"id": 9,
"position": [
215,
85
],
"type": "max/plantarium/output",
"props": {}
},
{
"id": 10,
"position": [
165,
72.5
],
"type": "max/plantarium/stem",
"props": {
"amount": 50,
"length": 4,
"thickness": 1
}
},
{
"id": 11,
"position": [
190,
77.5
],
"type": "max/plantarium/noise",
"props": {
"plant": 0,
"scale": 0.5,
"strength": 5
}
}
],
"edges": [
[
10,
0,
11,
"plant"
],
[
11,
0,
9,
"input"
]
]
}

145
app/src/lib/helpers.test.ts
View File

@@ -1,145 +0,0 @@
import { clone, debounce, humanizeDuration, humanizeNumber, lerp, snapToGrid } from '$lib/helpers';
import { describe, expect, it } from 'vitest';
describe('helpers', () => {
describe('snapToGrid', () => {
it('should snap to nearest grid point', () => {
expect(snapToGrid(5, 10)).toBe(10);
expect(snapToGrid(15, 10)).toBe(20);
expect(snapToGrid(0, 10)).toBe(0);
expect(snapToGrid(-10, 10)).toBe(-10);
});
it('should snap exact midpoint values', () => {
expect(snapToGrid(5, 10)).toBe(10);
});
it('should use default grid size of 10', () => {
expect(snapToGrid(5)).toBe(10);
expect(snapToGrid(15)).toBe(20);
});
it('should handle values exactly on grid', () => {
expect(snapToGrid(10, 10)).toBe(10);
expect(snapToGrid(20, 10)).toBe(20);
});
});
describe('lerp', () => {
it('should linearly interpolate between two values', () => {
expect(lerp(0, 100, 0)).toBe(0);
expect(lerp(0, 100, 0.5)).toBe(50);
expect(lerp(0, 100, 1)).toBe(100);
});
it('should handle negative values', () => {
expect(lerp(-50, 50, 0.5)).toBe(0);
expect(lerp(-100, 0, 0.5)).toBe(-50);
});
it('should handle t values outside 0-1 range', () => {
expect(lerp(0, 100, -0.5)).toBe(-50);
expect(lerp(0, 100, 1.5)).toBe(150);
});
});
describe('humanizeNumber', () => {
it('should return unchanged numbers below 1000', () => {
expect(humanizeNumber(0)).toBe('0');
expect(humanizeNumber(999)).toBe('999');
});
it('should add K suffix for thousands', () => {
expect(humanizeNumber(1000)).toBe('1K');
expect(humanizeNumber(1500)).toBe('1.5K');
expect(humanizeNumber(999999)).toBe('1000K');
});
it('should add M suffix for millions', () => {
expect(humanizeNumber(1000000)).toBe('1M');
expect(humanizeNumber(2500000)).toBe('2.5M');
});
it('should add B suffix for billions', () => {
expect(humanizeNumber(1000000000)).toBe('1B');
});
});
describe('humanizeDuration', () => {
it('should return ms for very short durations', () => {
expect(humanizeDuration(100)).toBe('100ms');
expect(humanizeDuration(999)).toBe('999ms');
});
it('should format seconds', () => {
expect(humanizeDuration(1000)).toBe('1s');
expect(humanizeDuration(1500)).toBe('1s500ms');
expect(humanizeDuration(59000)).toBe('59s');
});
it('should format minutes', () => {
expect(humanizeDuration(60000)).toBe('1m');
expect(humanizeDuration(90000)).toBe('1m 30s');
});
it('should format hours', () => {
expect(humanizeDuration(3600000)).toBe('1h');
expect(humanizeDuration(3661000)).toBe('1h 1m 1s');
});
it('should format days', () => {
expect(humanizeDuration(86400000)).toBe('1d');
expect(humanizeDuration(90061000)).toBe('1d 1h 1m 1s');
});
it('should handle zero', () => {
expect(humanizeDuration(0)).toBe('0ms');
});
});
describe('debounce', () => {
it('should return a function', () => {
const fn = debounce(() => {}, 100);
expect(typeof fn).toBe('function');
});
it('should only call once when invoked multiple times within delay', () => {
let callCount = 0;
const fn = debounce(() => {
callCount++;
}, 100);
fn();
const firstCall = callCount;
fn();
fn();
expect(callCount).toBe(firstCall);
});
});
describe('clone', () => {
it('should deep clone objects', () => {
const original = { a: 1, b: { c: 2 } };
const cloned = clone(original);
expect(cloned).toEqual(original);
expect(cloned).not.toBe(original);
expect(cloned.b).not.toBe(original.b);
});
it('should handle arrays', () => {
const original = [1, 2, [3, 4]];
const cloned = clone(original);
expect(cloned).toEqual(original);
expect(cloned).not.toBe(original);
expect(cloned[2]).not.toBe(original[2]);
});
it('should handle primitives', () => {
expect(clone(42)).toBe(42);
expect(clone('hello')).toBe('hello');
expect(clone(true)).toBe(true);
expect(clone(null)).toBe(null);
});
});
});

72
app/src/lib/helpers/deepMerge.test.ts
View File

@@ -1,72 +0,0 @@
import { isObject, mergeDeep } from '$lib/helpers/deepMerge';
import { describe, expect, it } from 'vitest';
describe('deepMerge', () => {
describe('isObject', () => {
it('should return true for plain objects', () => {
expect(isObject({})).toBe(true);
expect(isObject({ a: 1 })).toBe(true);
});
it('should return false for non-objects', () => {
expect(isObject([])).toBe(false);
expect(isObject('string')).toBe(false);
expect(isObject(42)).toBe(false);
expect(isObject(undefined)).toBe(false);
});
});
describe('mergeDeep', () => {
it('should merge two flat objects', () => {
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
const result = mergeDeep(target, source);
expect(result).toEqual({ a: 1, b: 3, c: 4 });
});
it('should deeply merge nested objects', () => {
const target = { a: { x: 1 }, b: { y: 2 } };
const source = { a: { y: 2 }, c: { z: 3 } };
const result = mergeDeep(target, source);
expect(result).toEqual({
a: { x: 1, y: 2 },
b: { y: 2 },
c: { z: 3 }
});
});
it('should handle multiple sources', () => {
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
const result = mergeDeep(target, source1, source2);
expect(result).toEqual({ a: 1, b: 2, c: 3 });
});
it('should return target if no sources provided', () => {
const target = { a: 1 };
const result = mergeDeep(target);
expect(result).toBe(target);
});
it('should overwrite non-object values', () => {
const target = { a: { b: 1 } };
const source = { a: 'string' };
const result = mergeDeep(target, source);
expect(result.a).toBe('string');
});
it('should handle arrays by replacing', () => {
const target = { a: [1, 2] };
const source = { a: [3, 4] };
const result = mergeDeep(target, source);
expect(result.a).toEqual([3, 4]);
});
});
});

37
app/src/lib/helpers/localState.svelte.ts
View File

@@ -1,37 +1,5 @@
import { browser } from '$app/environment'; import { browser } from '$app/environment';
function mergeRecursive<T>(current: T, initial: T): T {
if (typeof initial === 'number') {
if (typeof current === 'number') return current;
return initial;
}
if (typeof initial === 'boolean') {
if (typeof current === 'boolean') return current;
return initial;
}
if (Array.isArray(initial)) {
if (Array.isArray(current)) return current;
return initial;
}
if (typeof initial === 'object' && initial) {
const merged = initial;
if (typeof current === 'object' && current) {
for (const key of Object.keys(initial)) {
if (key in current) {
// @ts-expect-error It's safe dont worry about it
merged[key] = mergeRecursive(current[key], initial[key]);
}
}
}
return merged;
}
return current;
}
export class LocalStore<T> { export class LocalStore<T> {
value = $state<T>() as T; value = $state<T>() as T;
key = ''; key = '';
@@ -42,10 +10,7 @@ export class LocalStore<T> {
if (browser) { if (browser) {
const item = localStorage.getItem(key); const item = localStorage.getItem(key);
if (item) { if (item) this.value = this.deserialize(item);
const storedValue = this.deserialize(item);
this.value = mergeRecursive(storedValue, value);
}
} }
$effect.root(() => { $effect.root(() => {

11
app/src/lib/node-registry/debugNode.ts
View File

@@ -1,11 +0,0 @@
export const debugNode = {
id: 'max/plantarium/debug',
inputs: {
input: {
type: '*'
}
},
execute(_data: Int32Array): Int32Array {
return _data;
}
} as const;

22
app/src/lib/node-registry/node-registry-client.ts
View File

@@ -2,7 +2,6 @@ import {
type AsyncCache, type AsyncCache,
type NodeDefinition, type NodeDefinition,
NodeDefinitionSchema, NodeDefinitionSchema,
type NodeId,
type NodeRegistry type NodeRegistry
} from '@nodarium/types'; } from '@nodarium/types';
import { createLogger, createWasmWrapper } from '@nodarium/utils'; import { createLogger, createWasmWrapper } from '@nodarium/utils';
@@ -13,19 +12,11 @@ log.mute();
export class RemoteNodeRegistry implements NodeRegistry { export class RemoteNodeRegistry implements NodeRegistry {
status: 'loading' | 'ready' | 'error' = 'loading'; status: 'loading' | 'ready' | 'error' = 'loading';
private nodes: Map<string, NodeDefinition> = new Map(); private nodes: Map<string, NodeDefinition> = new Map();
private memory = new WebAssembly.Memory({ initial: 1024, maximum: 8192 });
constructor( constructor(
private url: string, private url: string,
public cache?: AsyncCache<ArrayBuffer | string>, public cache?: AsyncCache<ArrayBuffer | string>
nodes?: NodeDefinition[] ) {}
) {
if (nodes?.length) {
for (const node of nodes) {
this.nodes.set(node.id, node);
}
}
}
async fetchJson(url: string, skipCache = false) { async fetchJson(url: string, skipCache = false) {
const finalUrl = `${this.url}/${url}`; const finalUrl = `${this.url}/${url}`;
@@ -172,13 +163,6 @@ export class RemoteNodeRegistry implements NodeRegistry {
} }
getAllNodes() { getAllNodes() {
const allNodes = [...this.nodes.values()]; return [...this.nodes.values()];
log.info('getting all nodes', allNodes);
return allNodes;
}
async overwriteNode(nodeId: NodeId, node: NodeDefinition) {
log.info('Overwritten node', { nodeId, node });
this.nodes.set(nodeId, node);
} }
} }

2
app/src/lib/performance/Monitor.svelte
View File

@@ -86,7 +86,7 @@
position: absolute; position: absolute;
} }
svg { svg {
height: 126px; height: 124px;
margin: 24px 0px; margin: 24px 0px;
border-top: solid thin var(--color-outline); border-top: solid thin var(--color-outline);
border-bottom: solid thin var(--color-outline); border-bottom: solid thin var(--color-outline);

43
app/src/lib/project-manager/ProjectManager.svelte
View File

@@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import { defaultPlant, lottaFaces, plant, simple } from '$lib/graph-templates'; import { defaultPlant, lottaFaces, plant } from '$lib/graph-templates';
import type { Graph } from '$lib/types'; import type { Graph } from '$lib/types';
import { InputSelect } from '@nodarium/ui';
import type { ProjectManager } from './project-manager.svelte'; import type { ProjectManager } from './project-manager.svelte';
const { projectManager } = $props<{ projectManager: ProjectManager }>(); const { projectManager } = $props<{ projectManager: ProjectManager }>();
let showNewProject = $state(false); let showNewProject = $state(false);
let newProjectName = $state(''); let newProjectName = $state('');
let selectedTemplate = $state('defaultPlant');
const templates = [ const templates = [
{ {
@@ -16,27 +16,25 @@
graph: defaultPlant as unknown as Graph graph: defaultPlant as unknown as Graph
}, },
{ name: 'Plant', value: 'plant', graph: plant as unknown as Graph }, { name: 'Plant', value: 'plant', graph: plant as unknown as Graph },
{ name: 'Simple', value: 'simple', graph: simple as unknown as Graph },
{ {
name: 'Lotta Faces', name: 'Lotta Faces',
value: 'lottaFaces', value: 'lottaFaces',
graph: lottaFaces as unknown as Graph graph: lottaFaces as unknown as Graph
} }
]; ];
let selectedTemplateIndex = $state(0);
function handleCreate() { function handleCreate() {
const template = templates[selectedTemplateIndex] || templates[0]; const template = templates.find((t) => t.value === selectedTemplate) || templates[0];
projectManager.handleCreateProject(template.graph, newProjectName); projectManager.handleCreateProject(template.graph, newProjectName);
newProjectName = ''; newProjectName = '';
showNewProject = false; showNewProject = false;
} }
</script> </script>
<header class="flex justify-between px-4 h-[70px] border-b-1 border-outline items-center bg-layer-2"> <header class="flex justify-between px-4 h-[70px] border-b-1 border-outline items-center">
<h3>Project</h3> <h3>Project</h3>
<button <button
class="px-3 py-1 bg-layer-1 rounded" class="px-3 py-1 bg-layer-0 rounded"
onclick={() => (showNewProject = !showNewProject)} onclick={() => (showNewProject = !showNewProject)}
> >
New New
@@ -44,17 +42,24 @@
</header> </header>
{#if showNewProject} {#if showNewProject}
<div class="flex flex-col px-4 py-3.5 mt-[1px] border-b-1 border-outline gap-3"> <div class="flex flex-col px-4 py-3 border-b-1 border-outline gap-2">
<input <input
type="text" type="text"
bind:value={newProjectName} bind:value={newProjectName}
placeholder="Project name" placeholder="Project name"
class="w-full px-2 py-2 bg-layer-2 rounded" class="w-full px-2 py-2 bg-gray-800 border border-gray-700 rounded"
onkeydown={(e) => e.key === 'Enter' && handleCreate()} onkeydown={(e) => e.key === 'Enter' && handleCreate()}
/> />
<InputSelect options={templates.map(t => t.name)} bind:value={selectedTemplateIndex} /> <select
bind:value={selectedTemplate}
class="w-full px-2 py-2 bg-gray-800 border border-gray-700 rounded"
>
{#each templates as template (template.name)}
<option value={template.value}>{template.name}</option>
{/each}
</select>
<button <button
class="cursor-pointer self-end px-3 py-1 bg-selected rounded" class="cursor-pointer self-end px-3 py-1 bg-blue-600 rounded"
onclick={() => handleCreate()} onclick={() => handleCreate()}
> >
Create Create
@@ -62,22 +67,20 @@
</div> </div>
{/if} {/if}
<div class="text-white min-h-screen"> <div class="p-4 text-white min-h-screen">
{#if projectManager.loading} {#if projectManager.loading}
<p>Loading...</p> <p>Loading...</p>
{/if} {/if}
<ul> <ul class="space-y-2">
{#each projectManager.projects as project (project.id)} {#each projectManager.projects as project (project.id)}
<li> <li>
<div <div
class=" class="
h-[70px] border-b-1 border-b-outline w-full text-left px-3 py-2 rounded cursor-pointer {projectManager
flex
w-full text-left px-3 py-2 cursor-pointer {projectManager
.activeProjectId.value === project.id .activeProjectId.value === project.id
? 'border-l-2 border-l-selected pl-2.5!' ? 'bg-blue-600'
: ''} : 'bg-gray-800 hover:bg-gray-700'}
" "
onclick={() => projectManager.handleSelectProject(project.id!)} onclick={() => projectManager.handleSelectProject(project.id!)}
role="button" role="button"
@@ -86,10 +89,10 @@
e.key === 'Enter' e.key === 'Enter'
&& projectManager.handleSelectProject(project.id!)} && projectManager.handleSelectProject(project.id!)}
> >
<div class="flex justify-between items-center grow"> <div class="flex justify-between items-center">
<span>{project.meta?.title || 'Untitled'}</span> <span>{project.meta?.title || 'Untitled'}</span>
<button <button
class="text-layer-1! bg-red-500 w-7 text-xl rounded-sm cursor-pointer opacity-20 hover:opacity-80" class="text-red-400 hover:text-red-300"
onclick={() => { onclick={() => {
projectManager.handleDeleteProject(project.id!); projectManager.handleDeleteProject(project.id!);
}} }}

2
app/src/lib/project-manager/project-manager.svelte.ts
View File

@@ -54,7 +54,7 @@ export class ProjectManager {
g.id = id; g.id = id;
if (!g.meta) g.meta = {}; if (!g.meta) g.meta = {};
g.meta.title = title; if (!g.meta.title) g.meta.title = title;
db.saveGraph(g); db.saveGraph(g);
this.projects = [...this.projects, g]; this.projects = [...this.projects, g];

19
app/src/lib/result-viewer/Debug.svelte
View File

@@ -1,19 +0,0 @@
<script lang="ts">
import { T } from '@threlte/core';
import type { Group } from 'three';
import { updateDebugScene } from './debug';
type Props = {
debugData?: Record<number, { type: string; data: Int32Array }>;
};
let group = $state<Group>(null!);
const { debugData }: Props = $props();
$effect(() => {
if (!group || !debugData) return;
updateDebugScene(group, $state.snapshot(debugData));
});
</script>
<T.Group bind:ref={group} />

62
app/src/lib/result-viewer/Scene.svelte
View File

@@ -1,26 +1,33 @@
<script lang="ts"> <script lang="ts">
import { colors } from '$lib/graph-interface/graph/colors.svelte'; import { colors } from '$lib/graph-interface/graph/colors.svelte';
import { T, useTask, useThrelte } from '@threlte/core'; import { T, useTask, useThrelte } from '@threlte/core';
import { Grid } from '@threlte/extras'; import { Grid, MeshLineGeometry, MeshLineMaterial, Text } from '@threlte/extras';
import { Box3, type BufferGeometry, type Group, Mesh, MeshBasicMaterial, Vector3 } from 'three'; import {
Box3,
type BufferGeometry,
type Group,
Mesh,
MeshBasicMaterial,
Vector3,
type Vector3Tuple
} from 'three';
import { appSettings } from '../settings/app-settings.svelte'; import { appSettings } from '../settings/app-settings.svelte';
import Camera from './Camera.svelte'; import Camera from './Camera.svelte';
import Debug from './Debug.svelte';
const { renderStage, invalidate: _invalidate } = useThrelte(); const { renderStage, invalidate: _invalidate } = useThrelte();
type Props = { type Props = {
fps: number[]; fps: number[];
debugData?: Record<number, { type: string; data: Int32Array }>; lines: Vector3[][];
scene: Group; scene: Group;
centerCamera: boolean; centerCamera: boolean;
}; };
let { let {
lines,
centerCamera, centerCamera,
fps = $bindable(), fps = $bindable(),
scene = $bindable(), scene = $bindable()
debugData
}: Props = $props(); }: Props = $props();
let geometries = $state.raw<BufferGeometry[]>([]); let geometries = $state.raw<BufferGeometry[]>([]);
@@ -84,12 +91,18 @@
}); });
_invalidate(); _invalidate();
}); });
function getPosition(geo: BufferGeometry, i: number) {
return [
geo.attributes.position.array[i],
geo.attributes.position.array[i + 1],
geo.attributes.position.array[i + 2]
] as Vector3Tuple;
}
</script> </script>
<Camera {center} {centerCamera} /> <Camera {center} {centerCamera} />
<Debug {debugData} />
{#if appSettings.value.showGrid} {#if appSettings.value.showGrid}
<Grid <Grid
cellColor={colors['outline']} cellColor={colors['outline']}
@@ -103,4 +116,35 @@
fadeOrigin={new Vector3(0, 0, 0)} fadeOrigin={new Vector3(0, 0, 0)}
/> />
{/if} {/if}
<T.Group bind:ref={scene}></T.Group>
<T.Group>
{#if geometries}
{#each geometries as geo (geo.id)}
{#if appSettings.value.debug.showIndices}
{#each geo.attributes.position.array, i (i)}
{#if i % 3 === 0}
<Text fontSize={0.25} position={getPosition(geo, i)} />
{/if}
{/each}
{/if}
{#if appSettings.value.debug.showVertices}
<T.Points visible={true}>
<T is={geo} />
<T.PointsMaterial size={0.25} />
</T.Points>
{/if}
{/each}
{/if}
<T.Group bind:ref={scene}></T.Group>
</T.Group>
{#if appSettings.value.debug.showStemLines && lines}
{#each lines as line (line[0].x + '-' + line[0].y + '-' + '' + line[0].z)}
<T.Mesh>
<MeshLineGeometry points={line} />
<MeshLineMaterial width={0.1} color="red" depthTest={false} />
</T.Mesh>
{/each}
{/if}

44
app/src/lib/result-viewer/Viewer.svelte
View File

@@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import SmallPerformanceViewer from '$lib/performance/SmallPerformanceViewer.svelte'; import SmallPerformanceViewer from '$lib/performance/SmallPerformanceViewer.svelte';
import { appSettings } from '$lib/settings/app-settings.svelte'; import { appSettings } from '$lib/settings/app-settings.svelte';
import { splitNestedArray } from '@nodarium/utils'; import { decodeFloat, splitNestedArray } from '@nodarium/utils';
import type { PerformanceStore } from '@nodarium/utils'; import type { PerformanceStore } from '@nodarium/utils';
import { Canvas } from '@threlte/core'; import { Canvas } from '@threlte/core';
import { DoubleSide } from 'three'; import { Vector3 } from 'three';
import { type Group, MeshMatcapMaterial, TextureLoader } from 'three'; import { type Group, MeshMatcapMaterial, TextureLoader } from 'three';
import { createGeometryPool, createInstancedGeometryPool } from './geometryPool'; import { createGeometryPool, createInstancedGeometryPool } from './geometryPool';
import Scene from './Scene.svelte'; import Scene from './Scene.svelte';
@@ -14,8 +14,7 @@
matcap.colorSpace = 'srgb'; matcap.colorSpace = 'srgb';
const material = new MeshMatcapMaterial({ const material = new MeshMatcapMaterial({
color: 0xffffff, color: 0xffffff,
matcap, matcap
side: DoubleSide
}); });
let sceneComponent = $state<ReturnType<typeof Scene>>(); let sceneComponent = $state<ReturnType<typeof Scene>>();
@@ -23,7 +22,6 @@
let geometryPool: ReturnType<typeof createGeometryPool>; let geometryPool: ReturnType<typeof createGeometryPool>;
let instancePool: ReturnType<typeof createInstancedGeometryPool>; let instancePool: ReturnType<typeof createInstancedGeometryPool>;
export function updateGeometries(inputs: Int32Array[], group: Group) { export function updateGeometries(inputs: Int32Array[], group: Group) {
geometryPool = geometryPool || createGeometryPool(group, material); geometryPool = geometryPool || createGeometryPool(group, material);
instancePool = instancePool || createInstancedGeometryPool(group, material); instancePool = instancePool || createInstancedGeometryPool(group, material);
@@ -41,16 +39,44 @@
scene: Group; scene: Group;
centerCamera: boolean; centerCamera: boolean;
perf: PerformanceStore; perf: PerformanceStore;
debugData?: Record<number, { type: string; data: Int32Array }>;
}; };
let { scene = $bindable(), centerCamera, debugData, perf }: Props = $props(); let { scene = $bindable(), centerCamera, perf }: Props = $props();
let lines = $state<Vector3[][]>([]);
function createLineGeometryFromEncodedData(encodedData: Int32Array) {
const positions: Vector3[] = [];
const amount = (encodedData.length - 1) / 4;
for (let i = 0; i < amount; i++) {
const x = decodeFloat(encodedData[2 + i * 4 + 0]);
const y = decodeFloat(encodedData[2 + i * 4 + 1]);
const z = decodeFloat(encodedData[2 + i * 4 + 2]);
positions.push(new Vector3(x, y, z));
}
return positions;
}
export const update = function update(result: Int32Array) { export const update = function update(result: Int32Array) {
perf.addPoint('split-result'); perf.addPoint('split-result');
const inputs = splitNestedArray(result); const inputs = splitNestedArray(result);
perf.endPoint(); perf.endPoint();
if (appSettings.value.debug.showStemLines) {
perf.addPoint('create-lines');
lines = inputs
.map((input) => {
if (input[0] === 0) {
return createLineGeometryFromEncodedData(input);
}
})
.filter(Boolean) as Vector3[][];
perf.endPoint();
}
perf.addPoint('update-geometries'); perf.addPoint('update-geometries');
const { totalVertices, totalFaces } = updateGeometries(inputs, scene); const { totalVertices, totalFaces } = updateGeometries(inputs, scene);
@@ -62,7 +88,7 @@
}; };
</script> </script>
{#if appSettings.value.debug.advancedMode} {#if appSettings.value.debug.showPerformancePanel}
<SmallPerformanceViewer {fps} store={perf} /> <SmallPerformanceViewer {fps} store={perf} />
{/if} {/if}
@@ -70,8 +96,8 @@
<Canvas> <Canvas>
<Scene <Scene
bind:this={sceneComponent} bind:this={sceneComponent}
{lines}
{centerCamera} {centerCamera}
{debugData}
bind:scene bind:scene
bind:fps bind:fps
/> />

90
app/src/lib/result-viewer/debug.ts
View File

@@ -1,90 +0,0 @@
import { splitNestedArray } from '@nodarium/utils';
import {
BufferGeometry,
type Group,
InstancedMesh,
Line,
LineBasicMaterial,
Matrix4,
MeshBasicMaterial,
SphereGeometry,
Vector3
} from 'three';
function writePath(scene: Group, data: Int32Array): Vector3[] {
const positions: Vector3[] = [];
const f32 = new Float32Array(data.buffer);
for (let i = 2; i + 2 < f32.length; i += 4) {
const vec = new Vector3(f32[i], f32[i + 1], f32[i + 2]);
positions.push(vec);
}
// Path line
if (positions.length >= 2) {
const geometry = new BufferGeometry().setFromPoints(positions);
const line = new Line(
geometry,
new LineBasicMaterial({ color: 0xff0000, depthTest: false })
);
scene.add(line);
}
// Instanced spheres at points
if (positions.length > 0) {
const sphereGeometry = new SphereGeometry(0.05, 8, 8); // keep low-poly
const sphereMaterial = new MeshBasicMaterial({
color: 0xff0000,
depthTest: false
});
const spheres = new InstancedMesh(
sphereGeometry,
sphereMaterial,
positions.length
);
const matrix = new Matrix4();
for (let i = 0; i < positions.length; i++) {
matrix.makeTranslation(
positions[i].x,
positions[i].y,
positions[i].z
);
spheres.setMatrixAt(i, matrix);
}
spheres.instanceMatrix.needsUpdate = true;
scene.add(spheres);
}
return positions;
}
function clearGroup(group: Group) {
for (let i = group.children.length - 1; i >= 0; i--) {
const child = group.children[i];
group.remove(child);
// optional but correct: free GPU memory
// @ts-expect-error three.js runtime fields
child.geometry?.dispose?.();
// @ts-expect-error three.js runtime fields
child.material?.dispose?.();
}
}
export function updateDebugScene(
group: Group,
data: Record<number, { type: string; data: Int32Array }>
) {
clearGroup(group);
return Object.entries(data || {}).map(([, d]) => {
switch (d.type) {
case 'path':
splitNestedArray(d.data)
.forEach(p => writePath(group, p));
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
return (_g: Group) => {};
}).flat();
}

39
app/src/lib/runtime/helpers.ts
View File

@@ -1,39 +0,0 @@
export function logInt32ArrayChanges(
before: Int32Array,
after: Int32Array,
clamp = 10
): void {
if (before.length !== after.length) {
throw new Error('Arrays must have the same length');
}
let rangeStart: number | null = null;
let collected: number[] = [];
const flush = (endIndex: number) => {
if (rangeStart === null) return;
const preview = collected.slice(0, clamp);
const suffix = collected.length > clamp ? '...' : '';
console.log(
`Change ${rangeStart}-${endIndex}: [${preview.join(', ')}${suffix}]`
);
rangeStart = null;
collected = [];
};
for (let i = 0; i < before.length; i++) {
if (before[i] !== after[i]) {
if (rangeStart === null) {
rangeStart = i;
}
collected.push(after[i]);
} else {
flush(i - 1);
}
}
flush(before.length - 1);
}

419
app/src/lib/runtime/runtime-executor.ts
View File

@@ -1,5 +1,3 @@
import type { SettingsToStore } from '$lib/settings/app-settings.svelte';
import { RemoteNodeRegistry } from '@nodarium/registry';
import type { import type {
Graph, Graph,
NodeDefinition, NodeDefinition,
@@ -9,42 +7,28 @@ import type {
SyncCache SyncCache
} from '@nodarium/types'; } from '@nodarium/types';
import { import {
concatEncodedArrays,
createLogger, createLogger,
createWasmWrapper,
encodeFloat, encodeFloat,
fastHashArrayBuffer,
type PerformanceStore type PerformanceStore
} from '@nodarium/utils'; } from '@nodarium/utils';
import { DevSettingsType } from '../../routes/dev/settings.svelte';
import { logInt32ArrayChanges } from './helpers';
import type { RuntimeNode } from './types'; import type { RuntimeNode } from './types';
const log = createLogger('runtime-executor'); const log = createLogger('runtime-executor');
// log.mute(); // Keep logging enabled for debug info log.mute();
const remoteRegistry = new RemoteNodeRegistry(''); function getValue(input: NodeInput, value?: unknown) {
type WasmExecute = (outputPos: number, args: number[]) => number;
function getValue(input: NodeInput, value?: unknown): number | number[] | Int32Array {
if (value === undefined && 'value' in input) { if (value === undefined && 'value' in input) {
value = input.value; value = input.value;
} }
switch (input.type) { if (input.type === 'float') {
case 'float': return encodeFloat(value as number);
return encodeFloat(value as number);
case 'select':
return (value as number) ?? 0;
case 'vec3': {
const arr = Array.isArray(value) ? value : [];
return [0, arr.length + 1, ...arr.map(v => encodeFloat(v)), 1, 1];
}
} }
if (Array.isArray(value)) { if (Array.isArray(value)) {
if (input.type === 'vec3' || input.type === 'shape') { if (input.type === 'vec3') {
return [ return [
0, 0,
value.length + 1, value.length + 1,
@@ -56,82 +40,57 @@ function getValue(input: NodeInput, value?: unknown): number | number[] | Int32A
return [0, value.length + 1, ...value, 1, 1] as number[]; return [0, value.length + 1, ...value, 1, 1] as number[];
} }
if (typeof value === 'boolean') return value ? 1 : 0; if (typeof value === 'boolean') {
if (typeof value === 'number') return value; return value ? 1 : 0;
if (value instanceof Int32Array) return value;
throw new Error(`Unsupported input type: ${input.type}`);
}
function compareInt32(a: Int32Array, b: Int32Array): boolean {
if (a.length !== b.length) return false;
for (let i = 0; i < a.length; i++) {
if (a[i] !== b[i]) return false;
} }
return true;
if (typeof value === 'number') {
return value;
}
if (value instanceof Int32Array) {
return value;
}
throw new Error(`Unknown input type ${input.type}`);
} }
export type Pointer = { export class MemoryRuntimeExecutor implements RuntimeExecutor {
start: number; private definitionMap: Map<string, NodeDefinition> = new Map();
end: number;
_title?: string;
};
private seed = Math.floor(Math.random() * 100000000); private seed = Math.floor(Math.random() * 100000000);
private debugData: Record<number, { type: string; data: Int32Array }> = {};
perf?: PerformanceStore; perf?: PerformanceStore;
constructor( constructor(
private readonly registry: NodeRegistry, private registry: NodeRegistry,
public cache?: SyncCache<Int32Array> public cache?: SyncCache<Int32Array>
) { ) {
this.cache = undefined; this.cache = undefined;
this.refreshView();
log.info('MemoryRuntimeExecutor initialized');
} }
private refreshView(): void {
this.memoryView = new Int32Array(this.memory.buffer);
log.info(`Memory view refreshed, length: ${this.memoryView.length}`);
}
public getMemory(): Int32Array {
return new Int32Array(this.memory.buffer);
}
private map = new Map<string, { definition: NodeDefinition; execute: WasmExecute }>();
private async getNodeDefinitions(graph: Graph) { private async getNodeDefinitions(graph: Graph) {
if (this.registry.status !== 'ready') { if (this.registry.status !== 'ready') {
throw new Error('Node registry is not ready'); throw new Error('Node registry is not ready');
} }
await this.registry.load(graph.nodes.map(n => n.type)); await this.registry.load(graph.nodes.map((node) => node.type));
log.info(`Loaded ${graph.nodes.length} node types from registry`);
for (const { type } of graph.nodes) { const typeMap = new Map<string, NodeDefinition>();
if (this.map.has(type)) continue; for (const node of graph.nodes) {
if (!typeMap.has(node.type)) {
const def = this.registry.getNode(type); const type = this.registry.getNode(node.type);
if (!def) continue; if (type) {
typeMap.set(node.type, type);
log.info(`Fetching WASM for node type: ${type}`); }
const buffer = await remoteRegistry.fetchArrayBuffer(`nodes/${type}.wasm`); }
const wrapper = createWasmWrapper(buffer, this.memory);
this.map.set(type, {
definition: def,
execute: wrapper.execute
});
log.info(`Node type ${type} loaded and wrapped`);
} }
return typeMap;
return this.map;
} }
private async addMetaData(graph: Graph) { private async addMetaData(graph: Graph) {
this.nodes = await this.getNodeDefinitions(graph); // First, lets check if all nodes have a definition
log.info(`Metadata added for ${this.nodes.size} nodes`); this.definitionMap = await this.getNodeDefinitions(graph);
const graphNodes = graph.nodes.map(node => { const graphNodes = graph.nodes.map(node => {
const n = node as RuntimeNode; const n = node as RuntimeNode;
@@ -144,68 +103,55 @@ export type Pointer = {
return n; return n;
}); });
const outputNode = graphNodes.find(n => n.type.endsWith('/output') || n.type.endsWith('/debug')) const outputNode = graphNodes.find((node) => node.type.endsWith('/output'));
?? graphNodes[0]; if (!outputNode) {
throw new Error('No output node found');
}
const nodeMap = new Map(graphNodes.map(n => [n.id, n])); const nodeMap = new Map(
graphNodes.map((node) => [node.id, node])
);
// loop through all edges and assign the parent and child nodes to each node // loop through all edges and assign the parent and child nodes to each node
for (const edge of graph.edges) { for (const edge of graph.edges) {
const [parentId, /*_parentOutput*/, childId, childInput] = edge; const [parentId, /*_parentOutput*/, childId, childInput] = edge;
const parent = nodeMap.get(parentId); const parent = nodeMap.get(parentId);
const child = nodeMap.get(childId); const child = nodeMap.get(childId);
if (!parent || !child) continue; if (parent && child) {
parent.state.children.push(child);
parent.state.children.push(child); child.state.parents.push(parent);
child.state.parents.push(parent); child.state.inputNodes[childInput] = parent;
child.state.inputNodes[childInput] = parent; }
} }
const nodes = new Map<number, RuntimeNode>(); const nodes = [];
// loop through all the nodes and assign each nodes its depth // loop through all the nodes and assign each nodes its depth
const stack = [outputNode, ...graphNodes.filter(n => n.type.endsWith('/debug'))]; const stack = [outputNode];
while (stack.length) { while (stack.length) {
const node = stack.pop()!; const node = stack.pop();
if (!node) continue;
for (const parent of node.state.parents) { for (const parent of node.state.parents) {
parent.state = parent.state || {};
parent.state.depth = node.state.depth + 1; parent.state.depth = node.state.depth + 1;
stack.push(parent); stack.push(parent);
} }
nodes.set(node.id, node); nodes.push(node);
} }
for (const node of graphNodes) { return [outputNode, nodes] as const;
if (node.type.endsWith('/debug')) {
node.state = node.state || {};
const parent = node.state.parents[0];
if (parent) {
node.state.depth = parent.state.depth - 1;
parent.state.debugNode = true;
}
nodes.set(node.id, node);
}
}
const _nodes = [...nodes.values()];
return [outputNode, _nodes] as const;
} }
private writeToMemory(value: number | number[] | Int32Array, title?: string): Pointer { async execute(graph: Graph, settings: Record<string, unknown>) {
const start = this.offset; this.perf?.addPoint('runtime');
if (typeof value === 'number') {
this.memoryView[this.offset++] = value;
} else {
this.memoryView.set(value, this.offset);
this.offset += value.length;
}
let a = performance.now(); let a = performance.now();
this.debugData = {};
// Then we add some metadata to the graph // Then we add some metadata to the graph
const [_outputNode, nodes] = await this.addMetaData(graph); const [outputNode, nodes] = await this.addMetaData(graph);
let b = performance.now();
this.perf?.addPoint('collect-metadata', b - a);
/* /*
* Here we sort the nodes into buckets, which we then execute one by one * Here we sort the nodes into buckets, which we then execute one by one
@@ -223,75 +169,58 @@ export type Pointer = {
(a, b) => (b.state?.depth || 0) - (a.state?.depth || 0) (a, b) => (b.state?.depth || 0) - (a.state?.depth || 0)
); );
console.log({ settings }); // here we store the intermediate results of the nodes
const results: Record<string, Int32Array> = {};
this.printMemory(); if (settings['randomSeed']) {
const seedPtr = this.writeToMemory(this.seed, 'seed'); this.seed = Math.floor(Math.random() * 100000000);
}
const settingPtrs = new Map<string, Pointer>(
Object.entries(settings).map((
[key, value]
) => [key as string, this.writeToMemory(value as number, `setting.${key}`)])
);
for (const node of sortedNodes) { for (const node of sortedNodes) {
const node_type = this.nodes.get(node.type)!; const node_type = this.definitionMap.get(node.type)!;
console.log('---------------');
console.log('STARTING NODE EXECUTION', node_type.definition.id + '/' + node.id);
this.printMemory();
// console.log(node_type.definition.inputs);
const inputs = Object.entries(node_type.definition.inputs || {}).map(
([key, input]) => {
// We should probably initially write this to memory
if (input.type === 'seed') {
return seedPtr;
}
const title = `${node.id}.${key}`;
// We should probably initially write this to memory
// If the input is linked to a setting, we use that value
// TODO: handle nodes which reference undefined settings
if (input.setting) {
return settingPtrs.get(input.setting)!;
}
// check if the input is connected to another node
const inputNode = node.state.inputNodes[key];
if (inputNode) {
if (this.results[inputNode.id] === undefined) {
throw new Error(
`Node ${node.type}/${node.id} is missing input from node ${inputNode.type}/${inputNode.id}`
);
}
return this.results[inputNode.id];
}
// If the value is stored in the node itself, we use that value
if (node.props?.[key] !== undefined) {
const value = getValue(input, node.props[key]);
console.log(`Writing prop for ${node.id} -> ${key} to memory`, node.props[key], value);
return this.writeToMemory(value, title);
}
return this.writeToMemory(getValue(input), title);
}
);
this.printMemory();
if (!node_type || !node.state || !node_type.execute) { if (!node_type || !node.state || !node_type.execute) {
log.warn(`Node ${node.id} has no definition`); log.warn(`Node ${node.id} has no definition`);
continue; continue;
} }
this.inputPtrs[node.id] = inputs; a = performance.now();
const args = inputs.map(s => [s.start, s.end]).flat();
console.log('ARGS', inputs); // Collect the inputs for the node
const inputs = Object.entries(node_type.inputs || {}).map(
([key, input]) => {
if (input.type === 'seed') {
return this.seed;
}
// If the input is linked to a setting, we use that value
if (input.setting) {
return getValue(input, settings[input.setting]);
}
// check if the input is connected to another node
const inputNode = node.state.inputNodes[key];
if (inputNode) {
if (results[inputNode.id] === undefined) {
throw new Error(
`Node ${node.type} is missing input from node ${inputNode.type}`
);
}
return results[inputNode.id];
}
// If the value is stored in the node itself, we use that value
if (node.props?.[key] !== undefined) {
return getValue(input, node.props[key]);
}
return getValue(input);
}
);
b = performance.now();
this.perf?.addPoint('collected-inputs', b - a);
this.printMemory();
try { try {
a = performance.now(); a = performance.now();
const encoded_inputs = concatEncodedArrays(inputs); const encoded_inputs = concatEncodedArrays(inputs);
@@ -308,12 +237,6 @@ export type Pointer = {
log.log(`Using cached value for ${node_type.id || node.id}`); log.log(`Using cached value for ${node_type.id || node.id}`);
this.perf?.addPoint('cache-hit', 1); this.perf?.addPoint('cache-hit', 1);
results[node.id] = cachedValue as Int32Array; results[node.id] = cachedValue as Int32Array;
if (node.state.debugNode && node_type.outputs) {
this.debugData[node.id] = {
type: node_type.outputs[0],
data: cachedValue
};
}
continue; continue;
} }
this.perf?.addPoint('cache-hit', 0); this.perf?.addPoint('cache-hit', 0);
@@ -322,152 +245,32 @@ export type Pointer = {
log.log(`Inputs:`, inputs); log.log(`Inputs:`, inputs);
a = performance.now(); a = performance.now();
results[node.id] = node_type.execute(encoded_inputs); results[node.id] = node_type.execute(encoded_inputs);
if (node.state.debugNode && node_type.outputs) {
this.debugData[node.id] = {
type: node_type.outputs[0],
data: results[node.id]
};
}
log.log('Executed', node.type, node.id); log.log('Executed', node.type, node.id);
b = performance.now(); b = performance.now();
if (this.cache && node.id !== outputNode.id) { if (this.cache && node.id !== outputNode.id) {
this.cache.set(inputHash, this.results[node.id]); this.cache.set(inputHash, results[node.id]);
} }
this.perf?.addPoint('node/' + node_type.id, b - a); this.perf?.addPoint('node/' + node_type.id, b - a);
log.log('Result:', results[node.id]); log.log('Result:', results[node.id]);
log.groupEnd(); log.groupEnd();
} catch (e) { } catch (e) {
console.error(`Failed to execute node ${node.type}/${node.id}`, e); log.groupEnd();
this.isRunning = false; log.error(`Error executing node ${node_type.id || node.id}`, e);
} }
} }
this.isRunning = true; // return the result of the parent of the output node
log.info('Execution started'); const res = results[outputNode.id];
try { if (this.cache) {
this.offset = 0; this.cache.size = sortedNodes.length * 2;
this.results = {};
this.inputPtrs = {};
this.allPtrs = [];
this.seed += 2;
this.refreshView();
const [outputNode, nodes] = await this.addMetaData(graph);
const sortedNodes = [...nodes].sort(
(a, b) => (b.state.depth ?? 0) - (a.state.depth ?? 0)
);
const seedPtr = this.writeToMemory(this.seed, 'seed');
const settingPtrs = new Map<string, Pointer>();
for (const [key, value] of Object.entries(settings)) {
const ptr = this.writeToMemory(value as number, `setting.${key}`);
settingPtrs.set(key, ptr);
}
let lastNodePtr: Pointer | undefined = undefined;
for (const node of sortedNodes) {
const nodeType = this.nodes.get(node.type);
if (!nodeType) continue;
log.info(`Executing node: ${node.id} (type: ${node.type})`);
const inputs = Object.entries(nodeType.definition.inputs || {}).map(
([key, input]) => {
if (input.type === 'seed') return seedPtr;
if (input.setting) {
const ptr = settingPtrs.get(input.setting);
if (!ptr) throw new Error(`Missing setting: ${input.setting}`);
return ptr;
}
const src = node.state.inputNodes[key];
if (src) {
const res = this.results[src.id];
if (!res) {
throw new Error(`Missing input from ${src.type}/${src.id}`);
}
return res;
}
if (node.props?.[key] !== undefined) {
return this.writeToMemory(
getValue(input, node.props[key]),
`${node.id}.${key}`
);
}
return this.writeToMemory(getValue(input), `${node.id}.${key}`);
}
);
this.inputPtrs[node.id] = inputs;
const args = inputs.flatMap(p => [p.start * 4, p.end * 4]);
log.info(`Executing node ${node.type}/${node.id}`);
const memoryBefore = this.memoryView.slice(0, this.offset);
const bytesWritten = nodeType.execute(this.offset * 4, args);
this.refreshView();
const memoryAfter = this.memoryView.slice(0, this.offset);
logInt32ArrayChanges(memoryBefore, memoryAfter);
this.refreshView();
const outLen = bytesWritten >> 2;
const outputStart = this.offset;
if (
args.length === 2
&& inputs[0].end - inputs[0].start === outLen
&& compareInt32(
this.memoryView.slice(inputs[0].start, inputs[0].end),
this.memoryView.slice(outputStart, outputStart + outLen)
)
) {
this.results[node.id] = inputs[0];
this.allPtrs.push(this.results[node.id]);
log.info(`Node ${node.id} result reused input memory`);
} else {
this.results[node.id] = {
start: outputStart,
end: outputStart + outLen,
_title: `${node.id} ->`
};
this.allPtrs.push(this.results[node.id]);
this.offset += outLen;
lastNodePtr = this.results[node.id];
log.info(
`Node ${node.id} wrote result to memory: start=${outputStart}, end=${outputStart + outLen
}`
);
}
}
const res = this.results[outputNode.id] ?? lastNodePtr;
if (!res) throw new Error('Output node produced no result');
log.info(`Execution finished, output pointer: start=${res.start}, end=${res.end}`);
this.refreshView();
return this.memoryView.slice(res.start, res.end);
} catch (e) {
log.info('Execution error:', e);
console.error(e);
} finally {
this.isRunning = false;
console.log('Final Memory', [...this.memoryView.slice(0, 20)]);
this.perf?.endPoint('runtime');
log.info('Executor state reset');
} }
}
getDebugData() { this.perf?.endPoint('runtime');
return this.debugData;
return res as unknown as Int32Array;
} }
getPerformanceData() { getPerformanceData() {

1
app/src/lib/runtime/types.ts
View File

@@ -5,7 +5,6 @@ type RuntimeState = {
parents: RuntimeNode[]; parents: RuntimeNode[];
children: RuntimeNode[]; children: RuntimeNode[];
inputNodes: Record<string, RuntimeNode>; inputNodes: Record<string, RuntimeNode>;
debugNode?: boolean;
}; };
export type RuntimeNode = SerializedNode & { state: RuntimeState }; export type RuntimeNode = SerializedNode & { state: RuntimeState };

7
app/src/lib/runtime/worker-runtime-executor-backend.ts
View File

@@ -1,4 +1,3 @@
import { debugNode } from '$lib/node-registry/debugNode';
import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index'; import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
import type { Graph } from '@nodarium/types'; import type { Graph } from '@nodarium/types';
import { createPerformanceStore } from '@nodarium/utils'; import { createPerformanceStore } from '@nodarium/utils';
@@ -6,7 +5,7 @@ import { MemoryRuntimeExecutor } from './runtime-executor';
import { MemoryRuntimeCache } from './runtime-executor-cache'; import { MemoryRuntimeCache } from './runtime-executor-cache';
const indexDbCache = new IndexDBCache('node-registry'); const indexDbCache = new IndexDBCache('node-registry');
const nodeRegistry = new RemoteNodeRegistry('', indexDbCache, [debugNode]); const nodeRegistry = new RemoteNodeRegistry('', indexDbCache);
const cache = new MemoryRuntimeCache(); const cache = new MemoryRuntimeCache();
const executor = new MemoryRuntimeExecutor(nodeRegistry, cache); const executor = new MemoryRuntimeExecutor(nodeRegistry, cache);
@@ -44,7 +43,3 @@ export async function executeGraph(
export function getPerformanceData() { export function getPerformanceData() {
return performanceStore.get(); return performanceStore.get();
} }
export function getDebugData() {
return executor.getDebugData();
}

7
app/src/lib/runtime/worker-runtime-executor.ts
View File

@@ -6,15 +6,12 @@ export class WorkerRuntimeExecutor implements RuntimeExecutor {
new URL(`./worker-runtime-executor-backend.ts`, import.meta.url) new URL(`./worker-runtime-executor-backend.ts`, import.meta.url)
); );
execute(graph: Graph, settings: Record<string, unknown>) { async execute(graph: Graph, settings: Record<string, unknown>) {
return this.worker.executeGraph(graph, settings); return this.worker.executeGraph(graph, settings);
} }
getPerformanceData() { async getPerformanceData() {
return this.worker.getPerformanceData(); return this.worker.getPerformanceData();
} }
getDebugData() {
return this.worker.getDebugData();
}
set useRuntimeCache(useCache: boolean) { set useRuntimeCache(useCache: boolean) {
this.worker.setUseRuntimeCache(useCache); this.worker.setUseRuntimeCache(useCache);
} }

11
app/src/lib/settings/NestedSettings.svelte
View File

@@ -56,10 +56,6 @@
return 0; return 0;
} }
if (Array.isArray(inputValue) && node.type === 'vec3') {
return inputValue;
}
// If the component is supplied with a default value use that // If the component is supplied with a default value use that
if (inputValue !== undefined && typeof inputValue !== 'object') { if (inputValue !== undefined && typeof inputValue !== 'object') {
return inputValue; return inputValue;
@@ -102,7 +98,7 @@
&& typeof internalValue === 'number' && typeof internalValue === 'number'
) { ) {
value[key] = node?.options?.[internalValue]; value[key] = node?.options?.[internalValue];
} else if (internalValue !== undefined) { } else if (internalValue) {
value[key] = internalValue; value[key] = internalValue;
} }
}); });
@@ -128,6 +124,7 @@
{#if key && isNodeInput(type?.[key])} {#if key && isNodeInput(type?.[key])}
{@const inputType = type[key]} {@const inputType = type[key]}
<!-- Leaf input -->
<div class="input input-{inputType.type}" class:first-level={depth === 1}> <div class="input input-{inputType.type}" class:first-level={depth === 1}>
{#if inputType.type === 'button'} {#if inputType.type === 'button'}
<button onclick={handleClick}> <button onclick={handleClick}>
@@ -141,6 +138,7 @@
{/if} {/if}
</div> </div>
{:else if depth === 0} {:else if depth === 0}
<!-- Root: iterate over top-level keys -->
{#each Object.keys(type ?? {}).filter((k) => k !== 'title') as childKey (childKey)} {#each Object.keys(type ?? {}).filter((k) => k !== 'title') as childKey (childKey)}
<NestedSettings <NestedSettings
id={`${id}.${childKey}`} id={`${id}.${childKey}`}
@@ -152,6 +150,7 @@
{/each} {/each}
<hr /> <hr />
{:else if key && type?.[key]} {:else if key && type?.[key]}
<!-- Group -->
{#if depth > 0} {#if depth > 0}
<hr /> <hr />
{/if} {/if}
@@ -211,7 +210,7 @@
.first-level.input { .first-level.input {
padding-left: 1em; padding-left: 1em;
padding-right: 1em; padding-right: 1em;
padding-bottom: 0.5px; padding-bottom: 1px;
gap: 3px; gap: 3px;
} }

39
app/src/lib/settings/app-settings.svelte.ts
View File

@@ -6,7 +6,6 @@ const themes = [
'catppuccin', 'catppuccin',
'solarized', 'solarized',
'high-contrast', 'high-contrast',
'high-contrast-light',
'nord', 'nord',
'dracula' 'dracula'
] as const; ] as const;
@@ -30,11 +29,10 @@ export const AppSettingTypes = {
}, },
nodeInterface: { nodeInterface: {
title: 'Node Interface', title: 'Node Interface',
backgroundType: { showNodeGrid: {
type: 'select', type: 'boolean',
label: 'Background', label: 'Show Grid',
options: ['grid', 'dots', 'none'], value: true
value: 'grid'
}, },
snapToGrid: { snapToGrid: {
type: 'boolean', type: 'boolean',
@@ -59,9 +57,34 @@ export const AppSettingTypes = {
label: 'Execute in WebWorker', label: 'Execute in WebWorker',
value: true value: true
}, },
advancedMode: { showIndices: {
type: 'boolean', type: 'boolean',
label: 'Advanced Mode', label: 'Show Indices',
value: false
},
showPerformancePanel: {
type: 'boolean',
label: 'Show Performance Panel',
value: false
},
showBenchmarkPanel: {
type: 'boolean',
label: 'Show Benchmark Panel',
value: false
},
showVertices: {
type: 'boolean',
label: 'Show Vertices',
value: false
},
showStemLines: {
type: 'boolean',
label: 'Show Stem Lines',
value: false
},
showGraphJson: {
type: 'boolean',
label: 'Show Graph Source',
value: false value: false
}, },
cache: { cache: {

2
app/src/lib/sidebar/Panel.svelte
View File

@@ -34,7 +34,7 @@
<div class="wrapper" class:hidden> <div class="wrapper" class:hidden>
{#if title} {#if title}
<header class="bg-layer-2"> <header class="bg-layer-2">
<h3>{title}</h3> <h3 class="font-bold">{title}</h3>
</header> </header>
{/if} {/if}
{@render children?.()} {@render children?.()}

6
app/src/lib/sidebar/Sidebar.svelte
View File

@@ -2,11 +2,7 @@
import { type Snippet } from 'svelte'; import { type Snippet } from 'svelte';
import { panelState as state } from './PanelState.svelte'; import { panelState as state } from './PanelState.svelte';
let { children, open = $bindable(false) } = $props<{ children?: Snippet; open?: boolean }>(); const { children } = $props<{ children?: Snippet }>();
$effect(() => {
open = !!state.activePanel.value;
});
</script> </script>
<div class="wrapper" class:visible={state.activePanel.value}> <div class="wrapper" class:visible={state.activePanel.value}>

6
app/src/lib/sidebar/panels/ActiveNodeSelected.svelte
View File

@@ -42,13 +42,11 @@
const store: Store = {}; const store: Store = {};
Object.keys(inputs).forEach((key) => { Object.keys(inputs).forEach((key) => {
if (props) { if (props) {
const value = props[key] !== undefined ? props[key] : inputs[key].value; const value = props[key] || inputs[key].value;
if (Array.isArray(value) || typeof value === 'number') { if (Array.isArray(value) || typeof value === 'number') {
store[key] = value; store[key] = value;
} else if (typeof value === 'boolean') {
store[key] = value ? 1 : 0;
} else { } else {
console.error('Wrong error', { value }); console.error('Wrong error');
} }
} }
}); });

2
app/src/lib/sidebar/panels/ActiveNodeSettings.svelte
View File

@@ -12,7 +12,7 @@
</script> </script>
<div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'> <div class='{node?"border-l-2 pl-3.5!":""} bg-layer-2 flex items-center h-[70px] border-b-1 border-l-selected border-b-outline pl-4'>
<h3>Node Settings</h3> <h3 class="font-bold">Node Settings</h3>
</div> </div>
{#if node} {#if node}

185
app/src/lib/sidebar/panels/Changelog.svelte
View File

@@ -1,185 +0,0 @@
<script lang="ts">
import { Details } from '@nodarium/ui';
import { micromark } from 'micromark';
type Props = {
git?: Record<string, string>;
changelog?: string;
};
const {
git,
changelog
}: Props = $props();
const typeMap = new Map([
['fix', 'border-l-red-800'],
['feat', 'border-l-green-800'],
['chore', 'border-l-gray-800'],
['docs', 'border-l-blue-800'],
['refactor', 'border-l-purple-800'],
['ci', 'border-l-red-400']
]);
function detectCommitType(commit: string) {
for (const key of typeMap.keys()) {
if (commit.startsWith(key)) {
return key;
}
}
return '';
}
function parseCommit(line?: string) {
if (!line) return;
const regex = /^\s*-\s*\[([a-f0-9]+)\]\((https?:\/\/[^\s)]+)\)\s+(.+)$/;
const match = line.match(regex);
if (!match) {
return;
}
const [, sha, link, description] = match;
return {
sha,
link,
description,
type: detectCommitType(description)
};
}
function parseChangelog(md: string) {
return md.split(/^# v/gm)
.filter(l => !!l.length)
.map(release => {
const [firstLine, ...rest] = release.split('\n');
const title = firstLine.trim();
const blocks = rest
.join('\n')
.split('---');
const commits = blocks.length > 1
? blocks
.at(-1)
?.split('\n')
?.map(line => parseCommit(line))
?.filter(c => !!c)
: [];
const description = (
blocks.length > 1
? blocks
.slice(0, -1)
.join('\n')
: blocks[0]
).trim();
return {
description: micromark(description),
title,
commits
};
});
}
</script>
<div id="changelog" class="p-4 font-mono text-text overflow-y-auto max-h-full space-y-5">
{#if git}
<div class="mb-4 p-3 bg-layer-2 text-xs rounded">
<p><strong>Branch:</strong> {git.branch}</p>
<p>
<strong>Commit:</strong>
<a
href="https://git.max-richter.dev/max/nodarium/commit/{git.sha}"
class="link"
target="_blank"
>
{git.sha.slice(0, 7)}
</a>
– {git.commit_message}
</p>
<p>
<strong>Commits since last release:</strong>
{git.commits_since_last_release}
</p>
<p>
<strong>Timestamp:</strong>
{new Date(git.commit_timestamp).toLocaleString()}
</p>
</div>
{/if}
{#if changelog}
{#each parseChangelog(changelog) as release (release)}
<Details title={release.title}>
<!-- eslint-disable-next-line svelte/no-at-html-tags -->
<div id="description" class="pb-5">{@html release.description}</div>
{#if release?.commits?.length}
<Details
title="All Commits"
class="commits"
>
{#each release.commits as commit (commit)}
<p class="py-1 leading-7 text-xs border-b-1 border-l-1 border-b-outline last:border-b-0 -ml-2 pl-2 {typeMap.get(commit.type)}">
<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
<a href={commit.link} class="link" target="_blank">{commit.sha}</a>
{commit.description}
</p>
{/each}
</Details>
{/if}
</Details>
{/each}
{/if}
</div>
<style lang="postcss">
@reference "tailwindcss";
#changelog :global(.commits) {
margin-left: -16px;
margin-right: -16px;
border-radius: 0px 0px 2px 2px !important;
}
#changelog :global(details > div){
padding-bottom: 0px;
}
#changelog :global(.commits > div) {
padding-bottom: 0px;
padding-top: 0px;
}
#description :global(h2) {
@apply font-bold mt-4 mb-1;
}
#description :global(h2:first-child) {
margin-top: 0px !important;
}
#description :global(ul) {
padding-left: 1em;
}
#description :global(li),
#description :global(p) {
@apply text-xs!;
list-style-type: disc;
}
#changelog :global(details > details[open] > summary){
margin-bottom: 20px !important;
}
.link {
color: #60a5fa;
text-decoration: none;
}
.link:hover {
text-decoration: underline;
}
</style>

2
app/src/lib/sidebar/panels/GraphSource.svelte
View File

@@ -7,7 +7,7 @@
return JSON.stringify( return JSON.stringify(
{ {
...g, ...g,
nodes: g.nodes.map((n: object) => ({ ...n, tmp: undefined, state: undefined })) nodes: g.nodes.map((n: object) => ({ ...n, tmp: undefined }))
}, },
null, null,
2 2

20
app/src/routes/+error.svelte
View File

@@ -1,20 +0,0 @@
<script lang="ts">
import { page } from '$app/state';
</script>
<main class="w-screen h-screen flex flex-col items-center justify-center">
<div class="outline-1 outline-outline bg-layer-2">
<h1 class="p-8 text-3xl">@nodarium/error</h1>
<hr>
<pre class="p-8">{JSON.stringify(page.error, null, 2)}</pre>
<hr>
<div class="flex p-4">
<button
class="bg-layer-2 outline-1 outline-outline p-3 px-6 rounded-sm cursor-pointer"
on:click={() => window.location.reload()}
>
reload
</button>
</div>
</div>
</main>

27
app/src/routes/+layout.server.ts
View File

@@ -1,28 +1 @@
export const prerender = true; export const prerender = true;
export async function load({ fetch }) {
async function fetchChangelog() {
try {
const res = await fetch('/CHANGELOG.md');
return await res.text();
} catch (error) {
console.log('Failed to fetch CHANGELOG.md', error);
return;
}
}
async function fetchGitInfo() {
try {
const res = await fetch('/git.json');
return await res.json();
} catch (error) {
console.log('Failed to fetch git.json', error);
return;
}
}
return {
git: await fetchGitInfo(),
changelog: await fetchChangelog()
};
}

34
app/src/routes/+page.svelte
View File

@@ -4,7 +4,6 @@
import Grid from '$lib/grid'; import Grid from '$lib/grid';
import { debounceAsyncFunction } from '$lib/helpers'; import { debounceAsyncFunction } from '$lib/helpers';
import { createKeyMap } from '$lib/helpers/createKeyMap'; import { createKeyMap } from '$lib/helpers/createKeyMap';
import { debugNode } from '$lib/node-registry/debugNode.js';
import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index'; import { IndexDBCache, RemoteNodeRegistry } from '$lib/node-registry/index';
import NodeStore from '$lib/node-store/NodeStore.svelte'; import NodeStore from '$lib/node-store/NodeStore.svelte';
import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte'; import PerformanceViewer from '$lib/performance/PerformanceViewer.svelte';
@@ -18,7 +17,6 @@
import Panel from '$lib/sidebar/Panel.svelte'; import Panel from '$lib/sidebar/Panel.svelte';
import ActiveNodeSettings from '$lib/sidebar/panels/ActiveNodeSettings.svelte'; import ActiveNodeSettings from '$lib/sidebar/panels/ActiveNodeSettings.svelte';
import BenchmarkPanel from '$lib/sidebar/panels/BenchmarkPanel.svelte'; import BenchmarkPanel from '$lib/sidebar/panels/BenchmarkPanel.svelte';
import Changelog from '$lib/sidebar/panels/Changelog.svelte';
import ExportSettings from '$lib/sidebar/panels/ExportSettings.svelte'; import ExportSettings from '$lib/sidebar/panels/ExportSettings.svelte';
import GraphSource from '$lib/sidebar/panels/GraphSource.svelte'; import GraphSource from '$lib/sidebar/panels/GraphSource.svelte';
import Keymap from '$lib/sidebar/panels/Keymap.svelte'; import Keymap from '$lib/sidebar/panels/Keymap.svelte';
@@ -30,11 +28,8 @@
let performanceStore = createPerformanceStore(); let performanceStore = createPerformanceStore();
const { data } = $props();
const registryCache = new IndexDBCache('node-registry'); const registryCache = new IndexDBCache('node-registry');
const nodeRegistry = new RemoteNodeRegistry('', registryCache);
const nodeRegistry = new RemoteNodeRegistry('', registryCache, [debugNode]);
const workerRuntime = new WorkerRuntimeExecutor(); const workerRuntime = new WorkerRuntimeExecutor();
const runtimeCache = new MemoryRuntimeCache(); const runtimeCache = new MemoryRuntimeCache();
const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache); const memoryRuntime = new MemoryRuntimeExecutor(nodeRegistry, runtimeCache);
@@ -65,10 +60,8 @@
let activeNode = $state<NodeInstance | undefined>(undefined); let activeNode = $state<NodeInstance | undefined>(undefined);
let scene = $state<Group>(null!); let scene = $state<Group>(null!);
let sidebarOpen = $state(false);
let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!); let graphInterface = $state<ReturnType<typeof GraphInterface>>(null!);
let viewerComponent = $state<ReturnType<typeof Viewer>>(); let viewerComponent = $state<ReturnType<typeof Viewer>>();
let debugData = $state<Record<number, { type: string; data: Int32Array }>>();
const manager = $derived(graphInterface?.manager); const manager = $derived(graphInterface?.manager);
async function randomGenerate() { async function randomGenerate() {
@@ -90,6 +83,11 @@
let graphSettingTypes = $state({ let graphSettingTypes = $state({
randomSeed: { type: 'boolean', value: false } randomSeed: { type: 'boolean', value: false }
}); });
$effect(() => {
if (graphSettings && graphSettingTypes) {
manager?.setSettings($state.snapshot(graphSettings));
}
});
async function update( async function update(
g: Graph, g: Graph,
@@ -103,7 +101,6 @@
if (appSettings.value.debug.useWorker) { if (appSettings.value.debug.useWorker) {
let perfData = await runtime.getPerformanceData(); let perfData = await runtime.getPerformanceData();
debugData = await runtime.getDebugData();
let lastRun = perfData?.at(-1); let lastRun = perfData?.at(-1);
if (lastRun?.total) { if (lastRun?.total) {
lastRun.runtime = lastRun.total; lastRun.runtime = lastRun.total;
@@ -162,7 +159,6 @@
bind:scene bind:scene
bind:this={viewerComponent} bind:this={viewerComponent}
perf={performanceStore} perf={performanceStore}
debugData={debugData}
centerCamera={appSettings.value.centerCamera} centerCamera={appSettings.value.centerCamera}
/> />
</Grid.Cell> </Grid.Cell>
@@ -172,8 +168,7 @@
graph={pm.graph} graph={pm.graph}
bind:this={graphInterface} bind:this={graphInterface}
registry={nodeRegistry} registry={nodeRegistry}
addMenuPadding={{ right: sidebarOpen ? 330 : undefined }} showGrid={appSettings.value.nodeInterface.showNodeGrid}
backgroundType={appSettings.value.nodeInterface.backgroundType}
snapToGrid={appSettings.value.nodeInterface.snapToGrid} snapToGrid={appSettings.value.nodeInterface.snapToGrid}
bind:activeNode bind:activeNode
bind:showHelp={appSettings.value.nodeInterface.showHelp} bind:showHelp={appSettings.value.nodeInterface.showHelp}
@@ -183,7 +178,7 @@
onresult={(result) => handleUpdate(result as Graph)} onresult={(result) => handleUpdate(result as Graph)}
/> />
{/if} {/if}
<Sidebar bind:open={sidebarOpen}> <Sidebar>
<Panel id="general" title="General" icon="i-[tabler--settings]"> <Panel id="general" title="General" icon="i-[tabler--settings]">
<NestedSettings <NestedSettings
id="general" id="general"
@@ -216,7 +211,7 @@
<Panel <Panel
id="performance" id="performance"
title="Performance" title="Performance"
hidden={!appSettings.value.debug.advancedMode} hidden={!appSettings.value.debug.showPerformancePanel}
icon="i-[tabler--brand-speedtest] bg-red-400" icon="i-[tabler--brand-speedtest] bg-red-400"
> >
{#if $performanceStore} {#if $performanceStore}
@@ -229,7 +224,7 @@
<Panel <Panel
id="graph-source" id="graph-source"
title="Graph Source" title="Graph Source"
hidden={!appSettings.value.debug.advancedMode} hidden={!appSettings.value.debug.showGraphJson}
icon="i-[tabler--code]" icon="i-[tabler--code]"
> >
<GraphSource graph={pm.graph ?? manager?.serialize()} /> <GraphSource graph={pm.graph ?? manager?.serialize()} />
@@ -237,7 +232,7 @@
<Panel <Panel
id="benchmark" id="benchmark"
title="Benchmark" title="Benchmark"
hidden={!appSettings.value.debug.advancedMode} hidden={!appSettings.value.debug.showBenchmarkPanel}
icon="i-[tabler--graph] bg-red-400" icon="i-[tabler--graph] bg-red-400"
> >
<BenchmarkPanel run={randomGenerate} /> <BenchmarkPanel run={randomGenerate} />
@@ -254,13 +249,6 @@
/> />
<ActiveNodeSettings {manager} bind:node={activeNode} /> <ActiveNodeSettings {manager} bind:node={activeNode} />
</Panel> </Panel>
<Panel
id="changelog"
title="Changelog"
icon="i-[tabler--file-text-spark] bg-green-400"
>
<Changelog git={data.git} changelog={data.changelog} />
</Panel>
</Sidebar> </Sidebar>
</Grid.Cell> </Grid.Cell>
</Grid.Row> </Grid.Row>

2
app/src/routes/dev/+layout.svelte
View File

@@ -3,6 +3,6 @@
const { children } = $props<{ children?: Snippet }>(); const { children } = $props<{ children?: Snippet }>();
</script> </script>
<main class="w-screen h-screen overflow-x-hidden"> <main class="w-screen overflow-x-hidden">
{@render children()} {@render children()}
</main> </main>

112
app/src/routes/dev/+page.svelte
View File

@@ -7,6 +7,7 @@
import Sidebar from '$lib/sidebar/Sidebar.svelte'; import Sidebar from '$lib/sidebar/Sidebar.svelte';
import { type NodeId, type NodeInstance } from '@nodarium/types'; import { type NodeId, type NodeInstance } from '@nodarium/types';
import { concatEncodedArrays, createWasmWrapper, encodeNestedArray } from '@nodarium/utils'; import { concatEncodedArrays, createWasmWrapper, encodeNestedArray } from '@nodarium/utils';
import Code from './Code.svelte';
const registryCache = new IndexDBCache('node-registry'); const registryCache = new IndexDBCache('node-registry');
const nodeRegistry = new RemoteNodeRegistry('', registryCache); const nodeRegistry = new RemoteNodeRegistry('', registryCache);
@@ -44,9 +45,8 @@
} }
} }
let graphSettings = $state<Record<string, any>>({}); $effect(() => {
let graphSettingTypes = $state({ fetchNodeData(activeNode.value);
randomSeed: { type: "boolean", value: false },
}); });
$effect(() => { $effect(() => {
@@ -62,107 +62,31 @@
}); });
</script> </script>
<svelte:window <div class="node-wrapper absolute bottom-8 left-8">
bind:innerHeight={windowHeight} {#if nodeInstance}
onkeydown={(ev) => ev.key === "r" && handleResult()} <NodeHTML inView position="relative" z={5} bind:node={nodeInstance} />
/> {/if}
</div>
<Grid.Row> <Grid.Row>
<Grid.Cell> <Grid.Cell>
{#if visibleRows?.length} <pre>
<table <code>
class="min-w-full select-none overflow-auto text-left text-sm flex-1" {JSON.stringify(nodeInstance?.props)}
onscroll={(e) => { </code>
const scrollTop = e.currentTarget.scrollTop; </pre>
start.value = Math.floor(scrollTop / rowHeight);
}}
>
<thead class="">
<tr>
<th class="px-4 py-2 border-b border-[var(--outline)]">i</th>
<th
class="px-4 py-2 border-b border-[var(--outline)] w-[50px]"
style:width="50px">Ptrs</th
>
<th class="px-4 py-2 border-b border-[var(--outline)]">Value</th>
<th class="px-4 py-2 border-b border-[var(--outline)]">Float</th>
</tr>
</thead>
<tbody
onscroll={(e) => {
const scrollTop = e.currentTarget.scrollTop;
start.value = Math.floor(scrollTop / rowHeight);
}}
>
{#each visibleRows as r, i}
{@const index = i + start.value}
{@const ptr = ptrs[i]}
<tr class="h-[40px] odd:bg-[var(--layer-1)]">
<td class="px-4 border-b border-[var(--outline)] w-8">{index}</td>
<td
class="border-b border-[var(--outline)] overflow-hidden text-ellipsis pl-2
{ptr?._title?.includes('->')
? 'bg-red-500'
: 'bg-blue-500'}"
style="width: 100px; min-width: 100px; max-width: 100px;"
>
{ptr?._title}
</td>
<td
class="px-4 border-b border-[var(--outline)] cursor-pointer text-blue-600 hover:text-blue-800"
onclick={() =>
(rowIsFloat.value[index] = !rowIsFloat.value[index])}
>
{decodeValue(r, rowIsFloat.value[index])}
</td>
<td class="px-4 border-b border-[var(--outline)] italic w-5">
<input
type="checkbox"
checked={rowIsFloat.value[index]}
onclick={() =>
(rowIsFloat.value[index] = !rowIsFloat.value[index])}
/>
</td>
</tr>
{/each}
</tbody>
</table>
<button
onclick={() => copyVisibleMemory(visibleRows, ptrs, start.value)}
class="flex items-center cursor-pointer absolute bottom-4 left-4 z-100 bg-gray-200 px-2 py-1 rounded hover:bg-gray-300"
>
Copy Visible Memory
</button>
<input
class="absolute bottom-4 right-4 bg-white"
bind:value={start.value}
min="0"
type="number"
step="1"
/>
{/if}
</Grid.Cell> </Grid.Cell>
<Grid.Cell> <Grid.Cell>
<div class="h-screen w-[80vw] overflow-y-auto"></div> <div class="h-screen w-[80vw] overflow-y-auto">
{#if nodeWasm}
<Code wasm={nodeWasm} />
{/if}
</div>
</Grid.Cell> </Grid.Cell>
</Grid.Row> </Grid.Row>
<Sidebar> <Sidebar>
<Panel id="general" title="General" icon="i-[tabler--settings]">
<h3 class="p-4 pb-0">Debug Settings</h3>
<NestedSettings
id="Debug"
bind:value={devSettings.value}
type={DevSettingsType}
/>
<hr />
<NestedSettings
id="general"
bind:value={appSettings.value}
type={AppSettingTypes}
/>
</Panel>
<Panel <Panel
id="node-store" id="node-store"
classes="text-green-400" classes="text-green-400"

26
app/src/routes/dev/Code.svelte Normal file
View File

@@ -0,0 +1,26 @@
<script lang="ts">
import wabtInit from 'wabt';
const { wasm } = $props<{ wasm: ArrayBuffer }>();
async function toWat(arrayBuffer: ArrayBuffer) {
const wabt = await wabtInit();
const module = wabt.readWasm(new Uint8Array(arrayBuffer), {
readDebugNames: true
});
module.generateNames();
module.applyNames();
return module.toText({ foldExprs: false, inlineExport: false });
}
</script>
{#await toWat(wasm)}
<p>Converting to WAT</p>
{:then c}
<pre>
<code class="text-gray-50">{c}</code>
</pre>
{/await}

74
app/src/routes/dev/dev-graph.json
View File

@@ -1,74 +0,0 @@
{
"settings": {
"resolution.circle": 26,
"resolution.curve": 39
},
"nodes": [
{
"id": 9,
"position": [
225,
65
],
"type": "max/plantarium/output",
"props": {
"out": 0
}
},
{
"id": 10,
"position": [
200,
60
],
"type": "max/plantarium/math",
"props": {
"op_type": 3,
"a": 2,
"b": 0.38
}
},
{
"id": 11,
"position": [
175,
60
],
"type": "max/plantarium/float",
"props": {
"value": 0.66
}
},
{
"id": 12,
"position": [
175,
80
],
"type": "max/plantarium/float",
"props": {
"value": 1
}
}
],
"edges": [
[
11,
0,
10,
"a"
],
[
12,
0,
10,
"b"
],
[
10,
0,
9,
"out"
]
]
}

48
app/src/routes/dev/helpers.ts
View File

@@ -1,48 +0,0 @@
import type { Pointer } from '$lib/runtime';
export function copyVisibleMemory(rows: Int32Array, currentPtrs: Pointer[], start: number) {
if (!rows?.length) return;
// Build an array of rows for the table
const tableRows = [...rows].map((value, i) => {
const index = start + i;
const ptr = currentPtrs[i];
return {
index,
ptr: ptr?._title ?? '',
value: value
};
});
// Compute column widths
const indexWidth = Math.max(
5,
...tableRows.map((r) => r.index.toString().length)
);
const ptrWidth = Math.max(
10,
...tableRows.map((r) => r.ptr.length)
);
const valueWidth = Math.max(
10,
...tableRows.map((r) => r.value.toString().length)
);
// Build header
let output =
`| ${'Index'.padEnd(indexWidth)} | ${'Ptr'.padEnd(ptrWidth)} | ${'Value'.padEnd(valueWidth)
} |\n`
+ `|-${'-'.repeat(indexWidth)}-|-${'-'.repeat(ptrWidth)}-|-${'-'.repeat(valueWidth)}-|\n`;
// Add rows
for (const row of tableRows) {
output += `| ${row.index.toString().padEnd(indexWidth)} | ${row.ptr.padEnd(ptrWidth)} | ${row.value.toString().padEnd(valueWidth)
} |\n`;
}
// Copy to clipboard
navigator.clipboard
.writeText(output)
.then(() => console.log('Memory + metadata copied as table'))
.catch((err) => console.error('Failed to copy memory:', err));
}

15
app/src/routes/dev/settings.svelte.ts
View File

@@ -1,15 +0,0 @@
import { localState } from '$lib/helpers/localState.svelte';
import { settingsToStore } from '$lib/settings/app-settings.svelte';
export const DevSettingsType = {
debugNode: {
type: 'boolean',
label: 'Debug Nodes',
value: true
}
} as const;
export let devSettings = localState(
'dev-settings',
settingsToStore(DevSettingsType)
);

2
app/static/.gitignore vendored
View File

@@ -1,3 +1 @@
nodes/ nodes/
CHANGELOG.md
git.json

19
app/static/favicon.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M55.2154 77.6602L52.2788 78.3944L49.2607 60.6933L52.2788 33.0404L47.6293 18.0312L45.9162 18.6838L41.6745 28.7987L31.6412 33.4483H20.2211L21.6894 24.0675L31.6412 15.9919L45.9162 15.1762L49.7501 15.9919L55.2154 32.6326L54.5628 38.5873L64.8409 33.0404L69.5721 37.69L80.1764 43.1553L84.1734 52.8624L83.113 64.1193L73.8954 61.8353L66.3092 52.4545V38.5873L64.1068 36.7112L54.155 42.4212L52.2788 60.6933L55.2154 77.6602Z"
fill="url(#paint0_linear)"
/>
<defs>
<linearGradient
id="paint0_linear"
x1="34.3903"
y1="15.1762"
x2="52.1972"
y2="78.3944"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#4CAF7B" />
<stop offset="1" stop-color="#347452" />
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 861 B

19
app/static/svelte.svg Normal file
View File

@@ -0,0 +1,19 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--logos"
width="26.6"
height="32"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 256 308"
>
<path
fill="#FF3E00"
d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"
></path><path
fill="#FFF"
d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"
></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

26
app/static/tauri.svg Normal file
View File

@@ -0,0 +1,26 @@
<svg width="206" height="231" viewBox="0 0 206 231" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M143.143 84C143.143 96.1503 133.293 106 121.143 106C108.992 106 99.1426 96.1503 99.1426 84C99.1426 71.8497 108.992 62 121.143 62C133.293 62 143.143 71.8497 143.143 84Z"
fill="#FFC131"
/>
<ellipse
cx="84.1426"
cy="147"
rx="22"
ry="22"
transform="rotate(180 84.1426 147)"
fill="#24C8DB"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M166.738 154.548C157.86 160.286 148.023 164.269 137.757 166.341C139.858 160.282 141 153.774 141 147C141 144.543 140.85 142.121 140.558 139.743C144.975 138.204 149.215 136.139 153.183 133.575C162.73 127.404 170.292 118.608 174.961 108.244C179.63 97.8797 181.207 86.3876 179.502 75.1487C177.798 63.9098 172.884 53.4021 165.352 44.8883C157.82 36.3744 147.99 30.2165 137.042 27.1546C126.095 24.0926 114.496 24.2568 103.64 27.6274C92.7839 30.998 83.1319 37.4317 75.8437 46.1553C74.9102 47.2727 74.0206 48.4216 73.176 49.5993C61.9292 50.8488 51.0363 54.0318 40.9629 58.9556C44.2417 48.4586 49.5653 38.6591 56.679 30.1442C67.0505 17.7298 80.7861 8.57426 96.2354 3.77762C111.685 -1.01901 128.19 -1.25267 143.769 3.10474C159.348 7.46215 173.337 16.2252 184.056 28.3411C194.775 40.457 201.767 55.4101 204.193 71.404C206.619 87.3978 204.374 103.752 197.73 118.501C191.086 133.25 180.324 145.767 166.738 154.548ZM41.9631 74.275L62.5557 76.8042C63.0459 72.813 63.9401 68.9018 65.2138 65.1274C57.0465 67.0016 49.2088 70.087 41.9631 74.275Z"
fill="#FFC131"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M38.4045 76.4519C47.3493 70.6709 57.2677 66.6712 67.6171 64.6132C65.2774 70.9669 64 77.8343 64 85.0001C64 87.1434 64.1143 89.26 64.3371 91.3442C60.0093 92.8732 55.8533 94.9092 51.9599 97.4256C42.4128 103.596 34.8505 112.392 30.1816 122.756C25.5126 133.12 23.9357 144.612 25.6403 155.851C27.3449 167.09 32.2584 177.598 39.7906 186.112C47.3227 194.626 57.153 200.784 68.1003 203.846C79.0476 206.907 90.6462 206.743 101.502 203.373C112.359 200.002 122.011 193.568 129.299 184.845C130.237 183.722 131.131 182.567 131.979 181.383C143.235 180.114 154.132 176.91 164.205 171.962C160.929 182.49 155.596 192.319 148.464 200.856C138.092 213.27 124.357 222.426 108.907 227.222C93.458 232.019 76.9524 232.253 61.3736 227.895C45.7948 223.538 31.8055 214.775 21.0867 202.659C10.3679 190.543 3.37557 175.59 0.949823 159.596C-1.47592 143.602 0.768139 127.248 7.41237 112.499C14.0566 97.7497 24.8183 85.2327 38.4045 76.4519ZM163.062 156.711L163.062 156.711C162.954 156.773 162.846 156.835 162.738 156.897C162.846 156.835 162.954 156.773 163.062 156.711Z"
fill="#24C8DB"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

37
app/static/vite.svg Normal file
View File

@@ -0,0 +1,37 @@
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--logos"
width="31.88"
height="32"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 256 257"
>
<defs><linearGradient
id="IconifyId1813088fe1fbc01fb466"
x1="-.828%"
x2="57.636%"
y1="7.652%"
y2="78.411%"
><stop offset="0%" stop-color="#41D1FF"></stop><stop
offset="100%"
stop-color="#BD34FE"
></stop></linearGradient><linearGradient
id="IconifyId1813088fe1fbc01fb467"
x1="43.376%"
x2="50.316%"
y1="2.242%"
y2="89.03%"
><stop offset="0%" stop-color="#FFEA83"></stop><stop
offset="8.333%"
stop-color="#FFDD35"
></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path
fill="url(#IconifyId1813088fe1fbc01fb466)"
d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"
></path><path
fill="url(#IconifyId1813088fe1fbc01fb467)"
d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"
></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

34
app/vite.config.ts
View File

@@ -1,10 +1,9 @@
import { sveltekit } from '@sveltejs/kit/vite'; import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite'; import tailwindcss from '@tailwindcss/vite';
import { playwright } from '@vitest/browser-playwright'; import { defineConfig } from 'vite';
import comlink from 'vite-plugin-comlink'; import comlink from 'vite-plugin-comlink';
import glsl from 'vite-plugin-glsl'; import glsl from 'vite-plugin-glsl';
import wasm from 'vite-plugin-wasm'; import wasm from 'vite-plugin-wasm';
import { defineConfig } from 'vitest/config';
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
@@ -21,36 +20,5 @@ export default defineConfig({
}, },
ssr: { ssr: {
noExternal: ['three'] noExternal: ['three']
},
build: {
chunkSizeWarningLimit: 2000
},
test: {
expect: { requireAssertions: true },
projects: [
{
extends: './vite.config.ts',
test: {
name: 'client',
browser: {
enabled: true,
provider: playwright(),
instances: [{ browser: 'firefox', headless: true }]
},
include: ['src/**/*.svelte.{test,spec}.{js,ts}'],
exclude: ['src/lib/server/**']
}
},
{
extends: './vite.config.ts',
test: {
name: 'server',
environment: 'node',
include: ['src/**/*.{test,spec}.{js,ts}'],
exclude: ['src/**/*.svelte.{test,spec}.{js,ts}']
}
}
]
} }
}); });

9
docs/DEVELOPING_NODES.md
View File

@@ -4,19 +4,20 @@ This guide will help you developing your first Nodarium Node written in Rust. As
## Prerequesites ## Prerequesites
You need to have [Rust](https://www.rust-lang.org/tools/install) installed. Rust is the language we are going to develop our node in and cargo compiles our rust code into webassembly. You need to have [Rust](https://www.rust-lang.org/tools/install) and [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/) installed. Rust is the language we are going to develop our node in and wasm-pack helps us compile our rust code into a webassembly file.
```bash ```bash
# install rust # install rust
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# install wasm-pack
cargo install wasm-pack
``` ```
## Clone Template ## Clone Template
```bash ```bash
# copy the template directory wasm-pack new my-new-node --template https://github.com/jim-fx/nodarium_template
cp -r nodes/max/plantarium/.template nodes/max/plantarium/my-new-node cd my-new-node
cd nodes/max/plantarium/my-new-node
``` ```
## Setup Definition ## Setup Definition

14
nodes/max/plantarium/box/src/lib.rs
View File

@@ -1,18 +1,20 @@
use nodarium_macros::nodarium_definition_file; use nodarium_macros::nodarium_definition_file;
use nodarium_macros::nodarium_execute; use nodarium_macros::nodarium_execute;
use nodarium_utils::{ use nodarium_utils::{
encode_float, evaluate_float, geometry::calculate_normals, wrap_arg, encode_float, evaluate_float, geometry::calculate_normals,log,
read_i32_slice split_args, wrap_arg,
}; };
nodarium_definition_file!("src/input.json"); nodarium_definition_file!("src/input.json");
#[nodarium_execute] #[nodarium_execute]
pub fn execute(size: (i32, i32)) -> Vec<i32> { pub fn execute(input: &[i32]) -> Vec<i32> {
let args = read_i32_slice(size); let args = split_args(input);
let size = evaluate_float(&args); log!("WASM(cube): input: {:?} -> {:?}", input, args);
let size = evaluate_float(args[0]);
let p = encode_float(size); let p = encode_float(size);
let n = encode_float(-size); let n = encode_float(-size);
@@ -75,6 +77,8 @@ pub fn execute(size: (i32, i32)) -> Vec<i32> {
let res = wrap_arg(&cube_geometry); let res = wrap_arg(&cube_geometry);
log!("WASM(box): output: {:?}", res);
res res
} }

Some files were not shown because too many files have changed in this diff Show More