From 2ed150174723ab0a5efeaf835b3f937b88390443 Mon Sep 17 00:00:00 2001 From: Max Richter Date: Wed, 10 Apr 2024 15:40:01 +0200 Subject: [PATCH] feat: extract graph-interface into seperate package --- app/package.json | 10 +- app/src/lib/components/AddMenu.svelte | 164 ---- app/src/lib/components/BoxSelection.svelte | 31 - .../components/background/Background.svelte | 56 -- app/src/lib/components/background/index.ts | 0 app/src/lib/components/debug/Debug.svelte | 24 - app/src/lib/components/graph/Graph.svelte | 799 ------------------ app/src/lib/components/graph/GraphView.svelte | 84 -- app/src/lib/components/graph/Wrapper.svelte | 10 - app/src/lib/components/graph/index.ts | 2 - app/src/lib/components/node/Node.svelte | 135 --- app/src/lib/components/node/NodeHeader.svelte | 137 --- app/src/lib/components/node/NodeInput.svelte | 23 - .../lib/components/node/NodeParameter.svelte | 196 ----- .../lib/{graphs => graph-templates}/grid.ts | 0 .../lib/{graphs => graph-templates}/index.ts | 0 .../lib/{graphs => graph-templates}/tree.ts | 0 app/src/lib/grid/Row.svelte | 2 +- app/src/lib/stores/localStore.ts | 0 app/src/routes/+page.svelte | 73 +- .../.eslintignore | 0 packages/graph-interface/.eslintrc.cjs | 31 + .../.gitignore | 0 .../.npmrc | 0 packages/graph-interface/.prettierignore | 4 + packages/graph-interface/.prettierrc | 8 + .../README.md | 0 packages/graph-interface/package.json | 65 ++ .../src/app.d.ts | 0 .../src/app.html | 0 .../graph-interface/src/lib/AddMenu.svelte | 164 ++++ .../src/lib/BoxSelection.svelte | 28 + .../graph-interface/src/lib}/Camera.svelte | 0 .../src/lib}/background/Background.frag | 0 .../lib}/background/Background.story.svelte | 0 .../src/lib/background/Background.svelte | 52 ++ .../src/lib}/background/Background.vert | 0 .../src/lib/debug/Debug.svelte | 19 + .../graph-interface/src/lib}/debug/index.ts | 0 .../graph-interface/src/lib}/debug/store.ts | 0 .../src/lib}/edges/Edge.svelte | 0 .../src/lib}/edges/FloatingEdge.svelte | 0 .../src/lib}/edges/createEdgeGeometry.ts | 2 +- .../graph-interface/src/lib}/edges/utils.ts | 0 .../graph-interface}/src/lib/graph-manager.ts | 31 +- .../src/lib/graph/Graph.svelte | 765 +++++++++++++++++ .../src/lib/graph/GraphView.svelte | 78 ++ .../src/lib/graph/Wrapper.svelte | 25 + .../graph-interface/src/lib}/graph/context.ts | 2 +- .../graph-interface/src/lib}/graph/stores.ts | 3 +- .../src/lib/helpers/EventEmitter.ts | 5 +- .../graph-interface/src/lib/helpers/index.ts | 107 +++ .../src/lib/helpers/localStore.ts | 53 ++ .../src/lib/helpers/throttle.ts | 20 + .../src/lib/history-manager.ts | 2 +- packages/graph-interface/src/lib/index.ts | 2 + .../graph-interface/src/lib}/node/Node.frag | 0 .../graph-interface/src/lib/node/Node.svelte | 127 +++ .../graph-interface/src/lib}/node/Node.vert | 0 .../src/lib/node/NodeHeader.svelte | 129 +++ .../src/lib/node/NodeInput.svelte | 23 + .../src/lib/node/NodeParameter.svelte | 174 ++++ .../src/routes/+page.svelte | 0 .../static/favicon.png | Bin .../svelte.config.js | 0 packages/graph-interface/tsconfig.json | 18 + packages/graph-interface/vite.config.ts | 18 + packages/ui/.eslintignore | 13 + packages/{input-elements => ui}/.eslintrc.cjs | 0 packages/ui/.gitignore | 11 + packages/ui/.npmrc | 1 + packages/ui/README.md | 58 ++ packages/{input-elements => ui}/package.json | 2 +- packages/ui/src/app.d.ts | 13 + packages/ui/src/app.html | 12 + .../{input-elements => ui}/src/index.test.ts | 0 .../ui/src/lib}/Details.svelte | 0 .../src/lib/Input.svelte | 0 .../src/lib/elements/Checkbox.story.svelte | 0 .../src/lib/elements/Checkbox.svelte | 0 .../src/lib/elements/Float.story.svelte | 0 .../src/lib/elements/Float.svelte | 0 .../src/lib/elements/Integer.story.svelte | 0 .../src/lib/elements/Integer.svelte | 0 .../src/lib/elements/Select.story.svelte | 0 .../src/lib/elements/Select.svelte | 0 .../{input-elements => ui}/src/lib/index.ts | 3 +- packages/ui/src/routes/+page.svelte | 3 + packages/ui/static/favicon.png | Bin 0 -> 1571 bytes packages/ui/svelte.config.js | 18 + packages/{input-elements => ui}/tsconfig.json | 0 .../{input-elements => ui}/vite.config.ts | 0 pnpm-lock.yaml | 146 +++- 93 files changed, 2193 insertions(+), 1788 deletions(-) delete mode 100644 app/src/lib/components/AddMenu.svelte delete mode 100644 app/src/lib/components/BoxSelection.svelte delete mode 100644 app/src/lib/components/background/Background.svelte delete mode 100644 app/src/lib/components/background/index.ts delete mode 100644 app/src/lib/components/debug/Debug.svelte delete mode 100644 app/src/lib/components/graph/Graph.svelte delete mode 100644 app/src/lib/components/graph/GraphView.svelte delete mode 100644 app/src/lib/components/graph/Wrapper.svelte delete mode 100644 app/src/lib/components/graph/index.ts delete mode 100644 app/src/lib/components/node/Node.svelte delete mode 100644 app/src/lib/components/node/NodeHeader.svelte delete mode 100644 app/src/lib/components/node/NodeInput.svelte delete mode 100644 app/src/lib/components/node/NodeParameter.svelte rename app/src/lib/{graphs => graph-templates}/grid.ts (100%) rename app/src/lib/{graphs => graph-templates}/index.ts (100%) rename app/src/lib/{graphs => graph-templates}/tree.ts (100%) delete mode 100644 app/src/lib/stores/localStore.ts rename packages/{input-elements => graph-interface}/.eslintignore (100%) create mode 100644 packages/graph-interface/.eslintrc.cjs rename packages/{input-elements => graph-interface}/.gitignore (100%) rename packages/{input-elements => graph-interface}/.npmrc (100%) create mode 100644 packages/graph-interface/.prettierignore create mode 100644 packages/graph-interface/.prettierrc rename packages/{input-elements => graph-interface}/README.md (100%) create mode 100644 packages/graph-interface/package.json rename packages/{input-elements => graph-interface}/src/app.d.ts (100%) rename packages/{input-elements => graph-interface}/src/app.html (100%) create mode 100644 packages/graph-interface/src/lib/AddMenu.svelte create mode 100644 packages/graph-interface/src/lib/BoxSelection.svelte rename {app/src/lib/components => packages/graph-interface/src/lib}/Camera.svelte (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/background/Background.frag (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/background/Background.story.svelte (100%) create mode 100644 packages/graph-interface/src/lib/background/Background.svelte rename {app/src/lib/components => packages/graph-interface/src/lib}/background/Background.vert (100%) create mode 100644 packages/graph-interface/src/lib/debug/Debug.svelte rename {app/src/lib/components => packages/graph-interface/src/lib}/debug/index.ts (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/debug/store.ts (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/edges/Edge.svelte (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/edges/FloatingEdge.svelte (100%) rename {app/src/lib/components => packages/graph-interface/src/lib}/edges/createEdgeGeometry.ts (98%) rename {app/src/lib/components => packages/graph-interface/src/lib}/edges/utils.ts (100%) rename {app => packages/graph-interface}/src/lib/graph-manager.ts (93%) create mode 100644 packages/graph-interface/src/lib/graph/Graph.svelte create mode 100644 packages/graph-interface/src/lib/graph/GraphView.svelte create mode 100644 packages/graph-interface/src/lib/graph/Wrapper.svelte rename {app/src/lib/components => packages/graph-interface/src/lib}/graph/context.ts (69%) rename {app/src/lib/components => packages/graph-interface/src/lib}/graph/stores.ts (96%) rename {app => packages/graph-interface}/src/lib/helpers/EventEmitter.ts (98%) create mode 100644 packages/graph-interface/src/lib/helpers/index.ts create mode 100644 packages/graph-interface/src/lib/helpers/localStore.ts create mode 100644 packages/graph-interface/src/lib/helpers/throttle.ts rename {app => packages/graph-interface}/src/lib/history-manager.ts (97%) create mode 100644 packages/graph-interface/src/lib/index.ts rename {app/src/lib/components => packages/graph-interface/src/lib}/node/Node.frag (100%) create mode 100644 packages/graph-interface/src/lib/node/Node.svelte rename {app/src/lib/components => packages/graph-interface/src/lib}/node/Node.vert (100%) create mode 100644 packages/graph-interface/src/lib/node/NodeHeader.svelte create mode 100644 packages/graph-interface/src/lib/node/NodeInput.svelte create mode 100644 packages/graph-interface/src/lib/node/NodeParameter.svelte rename packages/{input-elements => graph-interface}/src/routes/+page.svelte (100%) rename packages/{input-elements => graph-interface}/static/favicon.png (100%) rename packages/{input-elements => graph-interface}/svelte.config.js (100%) create mode 100644 packages/graph-interface/tsconfig.json create mode 100644 packages/graph-interface/vite.config.ts create mode 100644 packages/ui/.eslintignore rename packages/{input-elements => ui}/.eslintrc.cjs (100%) create mode 100644 packages/ui/.gitignore create mode 100644 packages/ui/.npmrc create mode 100644 packages/ui/README.md rename packages/{input-elements => ui}/package.json (97%) create mode 100644 packages/ui/src/app.d.ts create mode 100644 packages/ui/src/app.html rename packages/{input-elements => ui}/src/index.test.ts (100%) rename {app/src/lib/components => packages/ui/src/lib}/Details.svelte (100%) rename packages/{input-elements => ui}/src/lib/Input.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Checkbox.story.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Checkbox.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Float.story.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Float.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Integer.story.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Integer.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Select.story.svelte (100%) rename packages/{input-elements => ui}/src/lib/elements/Select.svelte (100%) rename packages/{input-elements => ui}/src/lib/index.ts (74%) create mode 100644 packages/ui/src/routes/+page.svelte create mode 100644 packages/ui/static/favicon.png create mode 100644 packages/ui/svelte.config.js rename packages/{input-elements => ui}/tsconfig.json (100%) rename packages/{input-elements => ui}/vite.config.ts (100%) diff --git a/app/package.json b/app/package.json index 3724627..5549419 100644 --- a/app/package.json +++ b/app/package.json @@ -13,7 +13,8 @@ "story:preview": "histoire preview" }, "dependencies": { - "@nodes/input-elements": "link:../packages/input-elements", + "@nodes/graph-interface": "link:../packages/graph-interface", + "@nodes/ui": "link:../packages/ui", "@sveltejs/kit": "^2.5.0", "@tauri-apps/api": "2.0.0-beta.2", "@tauri-apps/plugin-shell": "^2.0.0-beta.0", @@ -21,12 +22,7 @@ "@threlte/extras": "^8.7.5", "@threlte/flex": "^1.0.1", "@types/three": "^0.159.0", - "input-elements": "link:../packages/input-elements", - "jsondiffpatch": "^0.6.0", - "meshline": "^3.2.0", - "plantarium-nodes-math": "link:../nodes/max/plantarium/math/pkg", - "three": "^0.159.0", - "three.meshline": "^1.4.0" + "three": "^0.159.0" }, "devDependencies": { "@histoire/plugin-svelte": "^0.17.9", diff --git a/app/src/lib/components/AddMenu.svelte b/app/src/lib/components/AddMenu.svelte deleted file mode 100644 index 981cb7a..0000000 --- a/app/src/lib/components/AddMenu.svelte +++ /dev/null @@ -1,164 +0,0 @@ - - - -
-
- -
- -
- {#each nodes as node} -
{ - if (event.key === "Enter") { - if (position) { - graph.createNode({ type: node.id, position }); - position = null; - } - } - }} - on:mousedown={() => { - if (position) { - graph.createNode({ type: node.id, position }); - position = null; - } - }} - on:focus={() => { - activeNodeId = node.id; - }} - class:selected={node.id === activeNodeId} - on:mouseover={() => { - activeNodeId = node.id; - }} - > - {node.id} -
- {/each} -
-
- - - diff --git a/app/src/lib/components/BoxSelection.svelte b/app/src/lib/components/BoxSelection.svelte deleted file mode 100644 index a7a4fe9..0000000 --- a/app/src/lib/components/BoxSelection.svelte +++ /dev/null @@ -1,31 +0,0 @@ - - - -
- - - diff --git a/app/src/lib/components/background/Background.svelte b/app/src/lib/components/background/Background.svelte deleted file mode 100644 index 0c854fc..0000000 --- a/app/src/lib/components/background/Background.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - diff --git a/app/src/lib/components/background/index.ts b/app/src/lib/components/background/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/app/src/lib/components/debug/Debug.svelte b/app/src/lib/components/debug/Debug.svelte deleted file mode 100644 index 94686a6..0000000 --- a/app/src/lib/components/debug/Debug.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - -{#each $points as point} - - - - -{/each} - -{#each $lines as line} - - - - -{/each} diff --git a/app/src/lib/components/graph/Graph.svelte b/app/src/lib/components/graph/Graph.svelte deleted file mode 100644 index ce03f7d..0000000 --- a/app/src/lib/components/graph/Graph.svelte +++ /dev/null @@ -1,799 +0,0 @@ - - -
- - - - - - {#if boxSelection && mouseDown} - - {/if} - - {#if $status === "idle"} - {#if addMenuPosition} - - {/if} - - {#if $activeSocket} - - {/if} - - - {:else if $status === "loading"} - Loading - {:else if $status === "error"} - Error - {/if} - -
- - diff --git a/app/src/lib/components/graph/GraphView.svelte b/app/src/lib/components/graph/GraphView.svelte deleted file mode 100644 index 6c70781..0000000 --- a/app/src/lib/components/graph/GraphView.svelte +++ /dev/null @@ -1,84 +0,0 @@ - - -{#each $edges as edge (`${edge[0].id}-${edge[1]}-${edge[2].id}-${edge[3]}`)} - {@const pos = getEdgePosition(edge)} - {@const [x1, y1, x2, y2] = pos} - -{/each} - - -
- {#each $nodes.values() as node (node.id)} - - {/each} -
- - - diff --git a/app/src/lib/components/graph/Wrapper.svelte b/app/src/lib/components/graph/Wrapper.svelte deleted file mode 100644 index 0eca272..0000000 --- a/app/src/lib/components/graph/Wrapper.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - - diff --git a/app/src/lib/components/graph/index.ts b/app/src/lib/components/graph/index.ts deleted file mode 100644 index e6f3e44..0000000 --- a/app/src/lib/components/graph/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -import Wrapper from './Wrapper.svelte'; -export default Wrapper; diff --git a/app/src/lib/components/node/Node.svelte b/app/src/lib/components/node/Node.svelte deleted file mode 100644 index 01ba489..0000000 --- a/app/src/lib/components/node/Node.svelte +++ /dev/null @@ -1,135 +0,0 @@ - - - - - - - -
- - - {#each parameters as [key, value], i} - - {/each} -
- - diff --git a/app/src/lib/components/node/NodeHeader.svelte b/app/src/lib/components/node/NodeHeader.svelte deleted file mode 100644 index b32d1f5..0000000 --- a/app/src/lib/components/node/NodeHeader.svelte +++ /dev/null @@ -1,137 +0,0 @@ - - -
-
- {node.type.split("/").pop()} -
-
- - - -
- - diff --git a/app/src/lib/components/node/NodeInput.svelte b/app/src/lib/components/node/NodeInput.svelte deleted file mode 100644 index e6fe8ae..0000000 --- a/app/src/lib/components/node/NodeInput.svelte +++ /dev/null @@ -1,23 +0,0 @@ - - - - diff --git a/app/src/lib/components/node/NodeParameter.svelte b/app/src/lib/components/node/NodeParameter.svelte deleted file mode 100644 index 4990d8a..0000000 --- a/app/src/lib/components/node/NodeParameter.svelte +++ /dev/null @@ -1,196 +0,0 @@ - - -
- {#key id && graphId} - {#if node?.tmp?.type?.inputs?.[id]?.external !== true} -
- -
- {/if} - - {#if node?.tmp?.type?.inputs?.[id]?.internal !== true} -
-
- {/if} - {/key} - - - - -
- - diff --git a/app/src/lib/graphs/grid.ts b/app/src/lib/graph-templates/grid.ts similarity index 100% rename from app/src/lib/graphs/grid.ts rename to app/src/lib/graph-templates/grid.ts diff --git a/app/src/lib/graphs/index.ts b/app/src/lib/graph-templates/index.ts similarity index 100% rename from app/src/lib/graphs/index.ts rename to app/src/lib/graph-templates/index.ts diff --git a/app/src/lib/graphs/tree.ts b/app/src/lib/graph-templates/tree.ts similarity index 100% rename from app/src/lib/graphs/tree.ts rename to app/src/lib/graph-templates/tree.ts diff --git a/app/src/lib/grid/Row.svelte b/app/src/lib/grid/Row.svelte index 83f1399..df7dc3f 100644 --- a/app/src/lib/grid/Row.svelte +++ b/app/src/lib/grid/Row.svelte @@ -2,7 +2,7 @@ import { setContext, getContext } from "svelte"; import localStore from "$lib/helpers/localStore"; - const gridId = getContext("grid-id"); + const gridId = getContext("grid-id") || "grid-0"; let sizes = localStore(gridId, []); let registerIndex = 0; diff --git a/app/src/lib/stores/localStore.ts b/app/src/lib/stores/localStore.ts deleted file mode 100644 index e69de29..0000000 diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 058f493..d50e84a 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -1,63 +1,46 @@ -
-
- -
-
- - -
-
- -
-
-
header
- - + {res} + + + {#key graph} + + {/key}
@@ -76,10 +59,10 @@ } .details-wrapper { - position: absolute; + position: fixed; z-index: 100; - top: 10px; - left: 10px; + bottom: 10px; + right: 10px; } :global(html) { diff --git a/packages/input-elements/.eslintignore b/packages/graph-interface/.eslintignore similarity index 100% rename from packages/input-elements/.eslintignore rename to packages/graph-interface/.eslintignore diff --git a/packages/graph-interface/.eslintrc.cjs b/packages/graph-interface/.eslintrc.cjs new file mode 100644 index 0000000..0b75758 --- /dev/null +++ b/packages/graph-interface/.eslintrc.cjs @@ -0,0 +1,31 @@ +/** @type { import("eslint").Linter.Config } */ +module.exports = { + root: true, + extends: [ + 'eslint:recommended', + 'plugin:@typescript-eslint/recommended', + 'plugin:svelte/recommended', + 'prettier' + ], + parser: '@typescript-eslint/parser', + plugins: ['@typescript-eslint'], + parserOptions: { + sourceType: 'module', + ecmaVersion: 2020, + extraFileExtensions: ['.svelte'] + }, + env: { + browser: true, + es2017: true, + node: true + }, + overrides: [ + { + files: ['*.svelte'], + parser: 'svelte-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser' + } + } + ] +}; diff --git a/packages/input-elements/.gitignore b/packages/graph-interface/.gitignore similarity index 100% rename from packages/input-elements/.gitignore rename to packages/graph-interface/.gitignore diff --git a/packages/input-elements/.npmrc b/packages/graph-interface/.npmrc similarity index 100% rename from packages/input-elements/.npmrc rename to packages/graph-interface/.npmrc diff --git a/packages/graph-interface/.prettierignore b/packages/graph-interface/.prettierignore new file mode 100644 index 0000000..cc41cea --- /dev/null +++ b/packages/graph-interface/.prettierignore @@ -0,0 +1,4 @@ +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/packages/graph-interface/.prettierrc b/packages/graph-interface/.prettierrc new file mode 100644 index 0000000..9573023 --- /dev/null +++ b/packages/graph-interface/.prettierrc @@ -0,0 +1,8 @@ +{ + "useTabs": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 100, + "plugins": ["prettier-plugin-svelte"], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] +} diff --git a/packages/input-elements/README.md b/packages/graph-interface/README.md similarity index 100% rename from packages/input-elements/README.md rename to packages/graph-interface/README.md diff --git a/packages/graph-interface/package.json b/packages/graph-interface/package.json new file mode 100644 index 0000000..1ef6b2e --- /dev/null +++ b/packages/graph-interface/package.json @@ -0,0 +1,65 @@ +{ + "name": "@nodes/graph-interface", + "version": "0.0.1", + "scripts": { + "dev": "svelte-package --watch", + "build": "vite build && npm run package", + "postbuild": "pnpm run package", + "preview": "vite preview", + "package": "svelte-kit sync && svelte-package && publint", + "prepublishOnly": "npm run package", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --check . && eslint .", + "format": "prettier --write ." + }, + "exports": { + ".": { + "types": "./dist/index.d.ts", + "svelte": "./dist/index.js" + } + }, + "files": [ + "dist", + "!dist/**/*.test.*", + "!dist/**/*.spec.*" + ], + "dependencies": { + "@nodes/ui": "link:../ui", + "@nodes/types": "link:../types", + "@threlte/core": "^7.1.0", + "@threlte/extras": "^8.7.5", + "@threlte/flex": "^1.0.1", + "@types/three": "^0.159.0", + "jsondiffpatch": "^0.6.0", + "three": "^0.159.0", + "vite-plugin-glsl": "^1.2.1" + }, + "peerDependencies": { + "svelte": "^4.0.0" + }, + "devDependencies": { + "@histoire/plugin-svelte": "^0.17.9", + "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/kit": "^2.0.0", + "@sveltejs/package": "^2.0.0", + "@sveltejs/vite-plugin-svelte": "^3.0.0", + "@types/eslint": "^8.56.0", + "@typescript-eslint/eslint-plugin": "^7.0.0", + "@typescript-eslint/parser": "^7.0.0", + "eslint": "^8.56.0", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-svelte": "^2.35.1", + "prettier": "^3.1.1", + "prettier-plugin-svelte": "^3.1.2", + "publint": "^0.1.9", + "svelte": "^4.2.7", + "svelte-check": "^3.6.0", + "tslib": "^2.4.1", + "typescript": "^5.0.0", + "vite": "^5.0.11" + }, + "svelte": "./dist/index.js", + "types": "./dist/index.d.ts", + "type": "module" +} diff --git a/packages/input-elements/src/app.d.ts b/packages/graph-interface/src/app.d.ts similarity index 100% rename from packages/input-elements/src/app.d.ts rename to packages/graph-interface/src/app.d.ts diff --git a/packages/input-elements/src/app.html b/packages/graph-interface/src/app.html similarity index 100% rename from packages/input-elements/src/app.html rename to packages/graph-interface/src/app.html diff --git a/packages/graph-interface/src/lib/AddMenu.svelte b/packages/graph-interface/src/lib/AddMenu.svelte new file mode 100644 index 0000000..9414eb8 --- /dev/null +++ b/packages/graph-interface/src/lib/AddMenu.svelte @@ -0,0 +1,164 @@ + + + +
+
+ +
+ +
+ {#each nodes as node} +
{ + if (event.key === 'Enter') { + if (position) { + graph.createNode({ type: node.id, position }); + position = null; + } + } + }} + on:mousedown={() => { + if (position) { + graph.createNode({ type: node.id, position }); + position = null; + } + }} + on:focus={() => { + activeNodeId = node.id; + }} + class:selected={node.id === activeNodeId} + on:mouseover={() => { + activeNodeId = node.id; + }} + > + {node.id} +
+ {/each} +
+
+ + + diff --git a/packages/graph-interface/src/lib/BoxSelection.svelte b/packages/graph-interface/src/lib/BoxSelection.svelte new file mode 100644 index 0000000..998c207 --- /dev/null +++ b/packages/graph-interface/src/lib/BoxSelection.svelte @@ -0,0 +1,28 @@ + + + +
+ + + diff --git a/app/src/lib/components/Camera.svelte b/packages/graph-interface/src/lib/Camera.svelte similarity index 100% rename from app/src/lib/components/Camera.svelte rename to packages/graph-interface/src/lib/Camera.svelte diff --git a/app/src/lib/components/background/Background.frag b/packages/graph-interface/src/lib/background/Background.frag similarity index 100% rename from app/src/lib/components/background/Background.frag rename to packages/graph-interface/src/lib/background/Background.frag diff --git a/app/src/lib/components/background/Background.story.svelte b/packages/graph-interface/src/lib/background/Background.story.svelte similarity index 100% rename from app/src/lib/components/background/Background.story.svelte rename to packages/graph-interface/src/lib/background/Background.story.svelte diff --git a/packages/graph-interface/src/lib/background/Background.svelte b/packages/graph-interface/src/lib/background/Background.svelte new file mode 100644 index 0000000..ddbe198 --- /dev/null +++ b/packages/graph-interface/src/lib/background/Background.svelte @@ -0,0 +1,52 @@ + + + + + + + + diff --git a/app/src/lib/components/background/Background.vert b/packages/graph-interface/src/lib/background/Background.vert similarity index 100% rename from app/src/lib/components/background/Background.vert rename to packages/graph-interface/src/lib/background/Background.vert diff --git a/packages/graph-interface/src/lib/debug/Debug.svelte b/packages/graph-interface/src/lib/debug/Debug.svelte new file mode 100644 index 0000000..ce105f1 --- /dev/null +++ b/packages/graph-interface/src/lib/debug/Debug.svelte @@ -0,0 +1,19 @@ + + +{#each $points as point} + + + + +{/each} + +{#each $lines as line} + + + + +{/each} diff --git a/app/src/lib/components/debug/index.ts b/packages/graph-interface/src/lib/debug/index.ts similarity index 100% rename from app/src/lib/components/debug/index.ts rename to packages/graph-interface/src/lib/debug/index.ts diff --git a/app/src/lib/components/debug/store.ts b/packages/graph-interface/src/lib/debug/store.ts similarity index 100% rename from app/src/lib/components/debug/store.ts rename to packages/graph-interface/src/lib/debug/store.ts diff --git a/app/src/lib/components/edges/Edge.svelte b/packages/graph-interface/src/lib/edges/Edge.svelte similarity index 100% rename from app/src/lib/components/edges/Edge.svelte rename to packages/graph-interface/src/lib/edges/Edge.svelte diff --git a/app/src/lib/components/edges/FloatingEdge.svelte b/packages/graph-interface/src/lib/edges/FloatingEdge.svelte similarity index 100% rename from app/src/lib/components/edges/FloatingEdge.svelte rename to packages/graph-interface/src/lib/edges/FloatingEdge.svelte diff --git a/app/src/lib/components/edges/createEdgeGeometry.ts b/packages/graph-interface/src/lib/edges/createEdgeGeometry.ts similarity index 98% rename from app/src/lib/components/edges/createEdgeGeometry.ts rename to packages/graph-interface/src/lib/edges/createEdgeGeometry.ts index 82c19e6..b5e00aa 100644 --- a/app/src/lib/components/edges/createEdgeGeometry.ts +++ b/packages/graph-interface/src/lib/edges/createEdgeGeometry.ts @@ -1,5 +1,5 @@ import { BufferGeometry, Vector3, BufferAttribute } from 'three' -import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils' +import { setXY, setXYZ, setXYZW, setXYZXYZ } from './utils.js' export function createEdgeGeometry(points: Vector3[]) { diff --git a/app/src/lib/components/edges/utils.ts b/packages/graph-interface/src/lib/edges/utils.ts similarity index 100% rename from app/src/lib/components/edges/utils.ts rename to packages/graph-interface/src/lib/edges/utils.ts diff --git a/app/src/lib/graph-manager.ts b/packages/graph-interface/src/lib/graph-manager.ts similarity index 93% rename from app/src/lib/graph-manager.ts rename to packages/graph-interface/src/lib/graph-manager.ts index f918560..78f79fc 100644 --- a/app/src/lib/graph-manager.ts +++ b/packages/graph-interface/src/lib/graph-manager.ts @@ -1,14 +1,13 @@ import { writable, type Writable } from "svelte/store"; -import type { Graph, Node, Edge, Socket, NodeRegistry, RuntimeExecutor, } from "@nodes/types"; -import { HistoryManager } from "./history-manager"; -import * as templates from "./graphs"; -import EventEmitter from "./helpers/EventEmitter"; -import throttle from "./helpers/throttle"; -import { createLogger } from "./helpers"; +import type { Graph, Node, Edge, Socket, NodeRegistry, } from "@nodes/types"; +import { HistoryManager } from "./history-manager.js" +import EventEmitter from "./helpers/EventEmitter.js"; +import throttle from "./helpers/throttle.js"; +import { createLogger } from "./helpers/index.js"; const logger = createLogger("graph-manager"); -export class GraphManager extends EventEmitter<{ "save": Graph }> { +export class GraphManager extends EventEmitter<{ "save": Graph, "result": any }> { status: Writable<"loading" | "idle" | "error"> = writable("loading"); loaded = false; @@ -27,7 +26,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph }> { history: HistoryManager = new HistoryManager(); - constructor(private nodeRegistry: NodeRegistry, private runtime: RuntimeExecutor) { + constructor(private nodeRegistry: NodeRegistry) { super(); this.nodes.subscribe((nodes) => { this._nodes = nodes; @@ -58,10 +57,7 @@ export class GraphManager extends EventEmitter<{ "save": Graph }> { execute() { } _execute() { if (this.loaded === false) return; - const start = performance.now(); - const result = this.runtime.execute(this.serialize()); - const end = performance.now(); - logger.log(`Execution took ${end - start}ms -> ${result}`); + this.emit("result", this.serialize()); } getNodeTypes() { @@ -525,17 +521,6 @@ export class GraphManager extends EventEmitter<{ "save": Graph }> { .filter(Boolean) as unknown as [Node, number, Node, string][]; } - createTemplate(template: T, ...args: Parameters) { - switch (template) { - case "grid": - return templates.grid(args?.[0] || 5, args?.[1] || 5); - case "tree": - return templates.tree(args?.[0] || 4); - default: - throw new Error(`Template not found: ${template}`); - } - - } } diff --git a/packages/graph-interface/src/lib/graph/Graph.svelte b/packages/graph-interface/src/lib/graph/Graph.svelte new file mode 100644 index 0000000..3487d89 --- /dev/null +++ b/packages/graph-interface/src/lib/graph/Graph.svelte @@ -0,0 +1,765 @@ + + + + +
+ + + + + + {#if boxSelection && mouseDown} + + {/if} + + {#if $status === 'idle'} + {#if addMenuPosition} + + {/if} + + {#if $activeSocket} + + {/if} + + + {:else if $status === 'loading'} + Loading + {:else if $status === 'error'} + Error + {/if} + +
+ + diff --git a/packages/graph-interface/src/lib/graph/GraphView.svelte b/packages/graph-interface/src/lib/graph/GraphView.svelte new file mode 100644 index 0000000..083fd69 --- /dev/null +++ b/packages/graph-interface/src/lib/graph/GraphView.svelte @@ -0,0 +1,78 @@ + + +{#each $edges as edge (`${edge[0].id}-${edge[1]}-${edge[2].id}-${edge[3]}`)} + {@const pos = getEdgePosition(edge)} + {@const [x1, y1, x2, y2] = pos} + +{/each} + + +
+ {#each $nodes.values() as node (node.id)} + + {/each} +
+ + + diff --git a/packages/graph-interface/src/lib/graph/Wrapper.svelte b/packages/graph-interface/src/lib/graph/Wrapper.svelte new file mode 100644 index 0000000..5c72b3b --- /dev/null +++ b/packages/graph-interface/src/lib/graph/Wrapper.svelte @@ -0,0 +1,25 @@ + + + diff --git a/app/src/lib/components/graph/context.ts b/packages/graph-interface/src/lib/graph/context.ts similarity index 69% rename from app/src/lib/components/graph/context.ts rename to packages/graph-interface/src/lib/graph/context.ts index b0e904a..1ed7ab9 100644 --- a/app/src/lib/components/graph/context.ts +++ b/packages/graph-interface/src/lib/graph/context.ts @@ -1,4 +1,4 @@ -import type { GraphManager } from "$lib/graph-manager"; +import type { GraphManager } from "../graph-manager.js"; import { getContext } from "svelte"; export function getGraphManager(): GraphManager { diff --git a/app/src/lib/components/graph/stores.ts b/packages/graph-interface/src/lib/graph/stores.ts similarity index 96% rename from app/src/lib/components/graph/stores.ts rename to packages/graph-interface/src/lib/graph/stores.ts index 29457eb..fe9d61d 100644 --- a/app/src/lib/components/graph/stores.ts +++ b/packages/graph-interface/src/lib/graph/stores.ts @@ -1,4 +1,3 @@ -import { browser } from "$app/environment"; import type { Socket } from "@nodes/types"; import { writable, type Writable } from "svelte/store"; import { Color } from "three/src/math/Color.js"; @@ -17,7 +16,7 @@ export const colors = writable({ backgroundColorLighter: new Color().setStyle("#202020") }); -if (browser) { +if ("getComputedStyle" in globalThis) { const body = document.body; diff --git a/app/src/lib/helpers/EventEmitter.ts b/packages/graph-interface/src/lib/helpers/EventEmitter.ts similarity index 98% rename from app/src/lib/helpers/EventEmitter.ts rename to packages/graph-interface/src/lib/helpers/EventEmitter.ts index 122df55..a10a55e 100644 --- a/app/src/lib/helpers/EventEmitter.ts +++ b/packages/graph-interface/src/lib/helpers/EventEmitter.ts @@ -1,7 +1,4 @@ - -import throttle from './throttle'; - - +import throttle from './throttle.js'; type EventMap = Record; type EventKey = string & keyof T; diff --git a/packages/graph-interface/src/lib/helpers/index.ts b/packages/graph-interface/src/lib/helpers/index.ts new file mode 100644 index 0000000..9d60856 --- /dev/null +++ b/packages/graph-interface/src/lib/helpers/index.ts @@ -0,0 +1,107 @@ +export function snapToGrid(value: number, gridSize: number = 10) { + return Math.round(value / gridSize) * gridSize; +} + +export function lerp(a: number, b: number, t: number) { + return a + (b - a) * t; +} + +export function animate(duration: number, callback: (progress: number) => void | false) { + const start = performance.now(); + const loop = (time: number) => { + const progress = (time - start) / duration; + if (progress < 1) { + const res = callback(progress); + if (res !== false) { + requestAnimationFrame(loop); + } + } else { + callback(1); + } + } + requestAnimationFrame(loop); +} + +export function createNodePath({ + depth = 8, + height = 20, + y = 50, + cornerTop = 0, + cornerBottom = 0, + leftBump = false, + rightBump = false, + aspectRatio = 1, +} = {}) { + return `M0,${cornerTop} + ${cornerTop + ? ` V${cornerTop} + Q0,0 ${cornerTop * aspectRatio},0 + H${100 - cornerTop * aspectRatio} + Q100,0 100,${cornerTop} + ` + : ` V0 + H100 + ` + } + V${y - height / 2} + ${rightBump + ? ` C${100 - depth},${y - height / 2} ${100 - depth},${y + height / 2} 100,${y + height / 2}` + : ` H100` + } + ${cornerBottom + ? ` V${100 - cornerBottom} + Q100,100 ${100 - cornerBottom * aspectRatio},100 + H${cornerBottom * aspectRatio} + Q0,100 0,${100 - cornerBottom} + ` + : `${leftBump ? `V100 H0` : `V100`}` + } + ${leftBump + ? ` V${y + height / 2} C${depth},${y + height / 2} ${depth},${y - height / 2} 0,${y - height / 2}` + : ` H0` + } + Z`.replace(/\s+/g, " "); +} + +export const debounce = (fn: Function, ms = 300) => { + let timeoutId: ReturnType; + return function (this: any, ...args: any[]) { + clearTimeout(timeoutId); + timeoutId = setTimeout(() => fn.apply(this, args), ms); + }; +}; + +export const clone: (v: T) => T = "structedClone" in globalThis ? globalThis.structuredClone : (obj) => JSON.parse(JSON.stringify(obj)); + +export const createLogger = (() => { + let maxLength = 5; + return (scope: string) => { + maxLength = Math.max(maxLength, scope.length); + let muted = false; + return { + log: (...args: any[]) => !muted && console.log(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args), + info: (...args: any[]) => !muted && console.info(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args), + warn: (...args: any[]) => !muted && console.warn(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #888", ...args), + error: (...args: any[]) => console.error(`[%c${scope.padEnd(maxLength, " ")}]:`, "color: #f88", ...args), + mute() { + muted = true; + }, + unmute() { + muted = false; + } + + } + } +})(); + + +export function withSubComponents>( + component: A, + subcomponents: B +): A & B { + Object.keys(subcomponents).forEach((key) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (component as any)[key] = (subcomponents as any)[key]; + }); + return component as A & B; +} diff --git a/packages/graph-interface/src/lib/helpers/localStore.ts b/packages/graph-interface/src/lib/helpers/localStore.ts new file mode 100644 index 0000000..7b9e2ad --- /dev/null +++ b/packages/graph-interface/src/lib/helpers/localStore.ts @@ -0,0 +1,53 @@ +import { writable, type Writable } from "svelte/store"; + +function isStore(v: unknown): v is Writable { + return v !== null && typeof v === "object" && "subscribe" in v && "set" in v; +} + +const storeIds: Map> = new Map(); + +const HAS_LOCALSTORAGE = "localStorage" in globalThis; + +function createLocalStore(key: string, initialValue: T | Writable) { + + let store: Writable; + + if (HAS_LOCALSTORAGE) { + const localValue = localStorage.getItem(key); + const value = localValue ? JSON.parse(localValue) : null; + if (value === null) { + if (isStore(initialValue)) { + store = initialValue; + } else { + store = writable(initialValue); + } + } else { + store = writable(value); + } + } else { + return isStore(initialValue) ? initialValue : writable(initialValue); + } + + store.subscribe((value) => { + localStorage.setItem(key, JSON.stringify(value)); + }); + + return { + subscribe: store.subscribe, + set: store.set, + update: store.update + } +} + + +export default function localStore(key: string, initialValue: T | Writable): Writable { + + if (storeIds.has(key)) return storeIds.get(key) as Writable; + + const store = createLocalStore(key, initialValue) + + storeIds.set(key, store); + + return store + +} diff --git a/packages/graph-interface/src/lib/helpers/throttle.ts b/packages/graph-interface/src/lib/helpers/throttle.ts new file mode 100644 index 0000000..9dcb09c --- /dev/null +++ b/packages/graph-interface/src/lib/helpers/throttle.ts @@ -0,0 +1,20 @@ +export default ( + fn: (...args: A) => R, + delay: number +): ((...args: A) => R) => { + let wait = false; + + return (...args: A) => { + if (wait) return undefined; + + const val = fn(...args); + + wait = true; + + setTimeout(() => { + wait = false; + }, delay); + + return val; + } +}; diff --git a/app/src/lib/history-manager.ts b/packages/graph-interface/src/lib/history-manager.ts similarity index 97% rename from app/src/lib/history-manager.ts rename to packages/graph-interface/src/lib/history-manager.ts index c445555..2a6bfc2 100644 --- a/app/src/lib/history-manager.ts +++ b/packages/graph-interface/src/lib/history-manager.ts @@ -1,6 +1,6 @@ import { create, type Delta } from "jsondiffpatch"; import type { Graph } from "@nodes/types"; -import { createLogger, clone } from "./helpers"; +import { createLogger, clone } from "./helpers/index.js"; const diff = create({ diff --git a/packages/graph-interface/src/lib/index.ts b/packages/graph-interface/src/lib/index.ts new file mode 100644 index 0000000..33c0097 --- /dev/null +++ b/packages/graph-interface/src/lib/index.ts @@ -0,0 +1,2 @@ +import Wrapper from './graph/Wrapper.svelte'; +export default Wrapper; diff --git a/app/src/lib/components/node/Node.frag b/packages/graph-interface/src/lib/node/Node.frag similarity index 100% rename from app/src/lib/components/node/Node.frag rename to packages/graph-interface/src/lib/node/Node.frag diff --git a/packages/graph-interface/src/lib/node/Node.svelte b/packages/graph-interface/src/lib/node/Node.svelte new file mode 100644 index 0000000..ffd7af6 --- /dev/null +++ b/packages/graph-interface/src/lib/node/Node.svelte @@ -0,0 +1,127 @@ + + + + + + + +
+ + + {#each parameters as [key, value], i} + + {/each} +
+ + diff --git a/app/src/lib/components/node/Node.vert b/packages/graph-interface/src/lib/node/Node.vert similarity index 100% rename from app/src/lib/components/node/Node.vert rename to packages/graph-interface/src/lib/node/Node.vert diff --git a/packages/graph-interface/src/lib/node/NodeHeader.svelte b/packages/graph-interface/src/lib/node/NodeHeader.svelte new file mode 100644 index 0000000..61eb031 --- /dev/null +++ b/packages/graph-interface/src/lib/node/NodeHeader.svelte @@ -0,0 +1,129 @@ + + +
+
+ {node.type.split('/').pop()} +
+
+ + + +
+ + diff --git a/packages/graph-interface/src/lib/node/NodeInput.svelte b/packages/graph-interface/src/lib/node/NodeInput.svelte new file mode 100644 index 0000000..d0f45f2 --- /dev/null +++ b/packages/graph-interface/src/lib/node/NodeInput.svelte @@ -0,0 +1,23 @@ + + + + diff --git a/packages/graph-interface/src/lib/node/NodeParameter.svelte b/packages/graph-interface/src/lib/node/NodeParameter.svelte new file mode 100644 index 0000000..fd6e61b --- /dev/null +++ b/packages/graph-interface/src/lib/node/NodeParameter.svelte @@ -0,0 +1,174 @@ + + +
+ {#key id && graphId} + {#if node?.tmp?.type?.inputs?.[id]?.external !== true} +
+ +
+ {/if} + + {#if node?.tmp?.type?.inputs?.[id]?.internal !== true} +
+
+ {/if} + {/key} + + + + +
+ + diff --git a/packages/input-elements/src/routes/+page.svelte b/packages/graph-interface/src/routes/+page.svelte similarity index 100% rename from packages/input-elements/src/routes/+page.svelte rename to packages/graph-interface/src/routes/+page.svelte diff --git a/packages/input-elements/static/favicon.png b/packages/graph-interface/static/favicon.png similarity index 100% rename from packages/input-elements/static/favicon.png rename to packages/graph-interface/static/favicon.png diff --git a/packages/input-elements/svelte.config.js b/packages/graph-interface/svelte.config.js similarity index 100% rename from packages/input-elements/svelte.config.js rename to packages/graph-interface/svelte.config.js diff --git a/packages/graph-interface/tsconfig.json b/packages/graph-interface/tsconfig.json new file mode 100644 index 0000000..e9454e7 --- /dev/null +++ b/packages/graph-interface/tsconfig.json @@ -0,0 +1,18 @@ +{ + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true, + "module": "NodeNext", + "moduleResolution": "NodeNext", + "types": [ + "vite-plugin-glsl/ext" + ] + } +} diff --git a/packages/graph-interface/vite.config.ts b/packages/graph-interface/vite.config.ts new file mode 100644 index 0000000..2b5a1b2 --- /dev/null +++ b/packages/graph-interface/vite.config.ts @@ -0,0 +1,18 @@ +import { sveltekit } from '@sveltejs/kit/vite'; +import glsl from "vite-plugin-glsl"; +import { defineConfig } from 'vite'; +import { exec } from 'child_process'; +const dev = import.meta.env; + +export default defineConfig({ + plugins: [sveltekit(), glsl(), { + name: 'postbuild-commands', // the name of your custom plugin. Could be anything. + closeBundle: async () => { + return; + // run pnpm run package + exec('pnpm run package', (err, stdout, stderr) => { + console.log(stdout); + }); + } + },] +}); diff --git a/packages/ui/.eslintignore b/packages/ui/.eslintignore new file mode 100644 index 0000000..3897265 --- /dev/null +++ b/packages/ui/.eslintignore @@ -0,0 +1,13 @@ +.DS_Store +node_modules +/build +/.svelte-kit +/package +.env +.env.* +!.env.example + +# Ignore files for PNPM, NPM and YARN +pnpm-lock.yaml +package-lock.json +yarn.lock diff --git a/packages/input-elements/.eslintrc.cjs b/packages/ui/.eslintrc.cjs similarity index 100% rename from packages/input-elements/.eslintrc.cjs rename to packages/ui/.eslintrc.cjs diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 0000000..ac7211b --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,11 @@ +.DS_Store +node_modules +/build +/dist +/.svelte-kit +/package +.env +.env.* +!.env.example +vite.config.js.timestamp-* +vite.config.ts.timestamp-* diff --git a/packages/ui/.npmrc b/packages/ui/.npmrc new file mode 100644 index 0000000..b6f27f1 --- /dev/null +++ b/packages/ui/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/packages/ui/README.md b/packages/ui/README.md new file mode 100644 index 0000000..69f4875 --- /dev/null +++ b/packages/ui/README.md @@ -0,0 +1,58 @@ +# create-svelte + +Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). + +Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). + +## Creating a project + +If you're seeing this, you've probably already done this step. Congrats! + +```bash +# create a new project in the current directory +npm create svelte@latest + +# create a new project in my-app +npm create svelte@latest my-app +``` + +## Developing + +Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: + +```bash +npm run dev + +# or start the server and open the app in a new browser tab +npm run dev -- --open +``` + +Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. + +## Building + +To build your library: + +```bash +npm run package +``` + +To create a production version of your showcase app: + +```bash +npm run build +``` + +You can preview the production build with `npm run preview`. + +> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. + +## Publishing + +Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). + +To publish your library to [npm](https://www.npmjs.com): + +```bash +npm publish +``` diff --git a/packages/input-elements/package.json b/packages/ui/package.json similarity index 97% rename from packages/input-elements/package.json rename to packages/ui/package.json index 402418b..f2b0e99 100644 --- a/packages/input-elements/package.json +++ b/packages/ui/package.json @@ -1,5 +1,5 @@ { - "name": "@nodes/input-elements", + "name": "@nodes/ui", "version": "0.0.1", "scripts": { "dev": "vite dev", diff --git a/packages/ui/src/app.d.ts b/packages/ui/src/app.d.ts new file mode 100644 index 0000000..743f07b --- /dev/null +++ b/packages/ui/src/app.d.ts @@ -0,0 +1,13 @@ +// See https://kit.svelte.dev/docs/types#app +// for information about these interfaces +declare global { + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } +} + +export {}; diff --git a/packages/ui/src/app.html b/packages/ui/src/app.html new file mode 100644 index 0000000..f22aeaa --- /dev/null +++ b/packages/ui/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/packages/input-elements/src/index.test.ts b/packages/ui/src/index.test.ts similarity index 100% rename from packages/input-elements/src/index.test.ts rename to packages/ui/src/index.test.ts diff --git a/app/src/lib/components/Details.svelte b/packages/ui/src/lib/Details.svelte similarity index 100% rename from app/src/lib/components/Details.svelte rename to packages/ui/src/lib/Details.svelte diff --git a/packages/input-elements/src/lib/Input.svelte b/packages/ui/src/lib/Input.svelte similarity index 100% rename from packages/input-elements/src/lib/Input.svelte rename to packages/ui/src/lib/Input.svelte diff --git a/packages/input-elements/src/lib/elements/Checkbox.story.svelte b/packages/ui/src/lib/elements/Checkbox.story.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Checkbox.story.svelte rename to packages/ui/src/lib/elements/Checkbox.story.svelte diff --git a/packages/input-elements/src/lib/elements/Checkbox.svelte b/packages/ui/src/lib/elements/Checkbox.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Checkbox.svelte rename to packages/ui/src/lib/elements/Checkbox.svelte diff --git a/packages/input-elements/src/lib/elements/Float.story.svelte b/packages/ui/src/lib/elements/Float.story.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Float.story.svelte rename to packages/ui/src/lib/elements/Float.story.svelte diff --git a/packages/input-elements/src/lib/elements/Float.svelte b/packages/ui/src/lib/elements/Float.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Float.svelte rename to packages/ui/src/lib/elements/Float.svelte diff --git a/packages/input-elements/src/lib/elements/Integer.story.svelte b/packages/ui/src/lib/elements/Integer.story.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Integer.story.svelte rename to packages/ui/src/lib/elements/Integer.story.svelte diff --git a/packages/input-elements/src/lib/elements/Integer.svelte b/packages/ui/src/lib/elements/Integer.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Integer.svelte rename to packages/ui/src/lib/elements/Integer.svelte diff --git a/packages/input-elements/src/lib/elements/Select.story.svelte b/packages/ui/src/lib/elements/Select.story.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Select.story.svelte rename to packages/ui/src/lib/elements/Select.story.svelte diff --git a/packages/input-elements/src/lib/elements/Select.svelte b/packages/ui/src/lib/elements/Select.svelte similarity index 100% rename from packages/input-elements/src/lib/elements/Select.svelte rename to packages/ui/src/lib/elements/Select.svelte diff --git a/packages/input-elements/src/lib/index.ts b/packages/ui/src/lib/index.ts similarity index 74% rename from packages/input-elements/src/lib/index.ts rename to packages/ui/src/lib/index.ts index c2eb28e..eff9c90 100644 --- a/packages/input-elements/src/lib/index.ts +++ b/packages/ui/src/lib/index.ts @@ -5,7 +5,8 @@ import Float from "./elements/Float.svelte"; import Integer from "./elements/Integer.svelte"; import Select from "./elements/Select.svelte"; import Checkbox from "./elements/Checkbox.svelte"; +import Details from "./Details.svelte"; -export { Float, Integer, Select, Checkbox }; +export { Float, Integer, Select, Checkbox, Input, Details }; export default Input; diff --git a/packages/ui/src/routes/+page.svelte b/packages/ui/src/routes/+page.svelte new file mode 100644 index 0000000..0a45b69 --- /dev/null +++ b/packages/ui/src/routes/+page.svelte @@ -0,0 +1,3 @@ +

Welcome to your library project

+

Create your package using @sveltejs/package and preview/showcase your work with SvelteKit

+

Visit kit.svelte.dev to read the documentation

diff --git a/packages/ui/static/favicon.png b/packages/ui/static/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..825b9e65af7c104cfb07089bb28659393b4f2097 GIT binary patch literal 1571 zcmV+;2Hg3HP)Px)-AP12RCwC$UE6KzI1p6{F2N z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z zgj#$x=!~7LGqHW?IO8+*oE1MyDp!G=L0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;| zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb zghxQU22N}F51}^yfDSt786oMTc!W&V;d?76)9KXX1 z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFNgpIod~R{>@#@5x9zJKEHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2` zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL z@iUO?SBBG-0cQuo+an4TsLy-g-x;8P4UVwk|D8{W@U1Zi z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA zI8U?CWdY@}cRq6{5~y+)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6 zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6 zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5 zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH= 8'} dev: true - /meshline@3.2.0(three@0.159.0): - resolution: {integrity: sha512-ZaJkC967GTuef7UBdO0rGPX544oIWaNo7tYedVHSoR2lje6RR16fX8IsgMxgxoYYERtjqsRWIYBSPBxG4QR84Q==} - peerDependencies: - three: '>=0.137' - dependencies: - three: 0.159.0 - dev: false - /meshoptimizer@0.18.1: resolution: {integrity: sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==} dev: false @@ -3076,7 +3148,6 @@ packages: /picomatch@2.3.1: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - dev: true /pkg-types@1.0.3: resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==} @@ -3624,10 +3695,6 @@ packages: tweakpane: 3.1.10 dev: false - /three.meshline@1.4.0: - resolution: {integrity: sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw==} - dev: false - /three@0.159.0: resolution: {integrity: sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==} dev: false @@ -3882,7 +3949,6 @@ packages: vite: 5.1.4 transitivePeerDependencies: - rollup - dev: true /vite-plugin-wasm@3.3.0(vite@5.1.4): resolution: {integrity: sha512-tVhz6w+W9MVsOCHzxo6SSMSswCeIw4HTrXEi6qL3IRzATl83jl09JVO1djBqPSwfjgnpVHNLYcaMbaDX5WB/pg==}