voleum/gr-base
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add svelte flow

Browse source
This commit is contained in:
EatThePooh 2025-10-20 15:03:43 +07:00
parent 58c98dce92
commit e5e11a6fac
5 changed files with 259 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

17
platform/loom/deno.json
View file

@ -7,13 +7,16 @@
"compile": "deno compile --cached-only --no-config --no-check --include ./editor/dist/ --allow-read --allow-env --allow-net mod.ts"
},
"imports": {
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^6.2.1", // dev
"@tsconfig/svelte": "npm:@tsconfig/svelte@^5.0.5", // dev
"@types/node": "npm:@types/node@^24.6.0", // dev
"svelte": "npm:svelte@^5.39.6", // dev
"svelte-check": "npm:svelte-check@^4.3.2", // dev
"typescript": "npm:typescript@~5.9.3", // dev
"vite": "npm:rolldown-vite@7.1.14" // dev
"@sveltejs/vite-plugin-svelte": "npm:@sveltejs/vite-plugin-svelte@^6.2.1",
"@tsconfig/svelte": "npm:@tsconfig/svelte@^5.0.5",
"@svar-ui/svelte-core": "npm:@svar-ui/svelte-core@^2.3.0",
"@xyflow/svelte": "npm:@xyflow/svelte@^1.3.1",
"svelte-splitpanes": "npm:svelte-splitpanes@^8.0.0",
"@types/node": "npm:@types/node@^24.6.0",
"svelte": "npm:svelte@^5.39.6",
"svelte-check": "npm:svelte-check@^4.3.2",
"typescript": "npm:typescript@~5.9.3",
"vite": "npm:rolldown-vite@7.1.14",
},
"lint": {
"rules": {

150
platform/loom/deno.lock generated
View file

@ -2,12 +2,15 @@
"version": "5",
"specifiers": {
"npm:@stricli/core@*": "1.2.0",
"npm:@svar-ui/svelte-core@^2.3.0": "2.3.1",
"npm:@sveltejs/vite-plugin-svelte@^6.2.1": "6.2.1_svelte@5.39.11__acorn@8.15.0_vite@7.1.9__@types+node@24.7.0__picomatch@4.0.3_@types+node@24.7.0",
"npm:@tsconfig/svelte@^5.0.5": "5.0.5",
"npm:@types/node@^24.6.0": "24.7.0",
"npm:@xyflow/svelte@^1.3.1": "1.3.1_svelte@5.39.11__acorn@8.15.0",
"npm:express@*": "5.1.0",
"npm:rolldown-vite@7.1.14": "7.1.14_@types+node@24.7.0_picomatch@4.0.3",
"npm:svelte-check@^4.3.2": "4.3.3_svelte@5.39.11__acorn@8.15.0_typescript@5.9.3",
"npm:svelte-splitpanes@8": "8.0.9_svelte@5.39.11__acorn@8.15.0",
"npm:svelte@^5.39.6": "5.39.11_acorn@8.15.0",
"npm:typescript@~5.9.3": "5.9.3",
"npm:vite@*": "7.1.9_@types+node@24.7.0_picomatch@4.0.3"
@ -391,6 +394,35 @@
"@stricli/core@1.2.0": {
"integrity": "sha512-5b+npntDY0TAB7wAw0daGlh3/R2sf0TDLyrB1By2jCNH+C+lmcSqMtJXOMLVtEGSkIOvqAgIWpLMSs1PXqzt3w=="
},
"@svar-ui/core-locales@2.3.1": {
"integrity": "sha512-wv1oWjNVUoG2s3E0TOFvDVAv29WrSzfsS4bjsop9sFF7VAUIJ7wGGGkTbJcBTJZvAuKNFm10/mY1jV253cPXfQ=="
},
"@svar-ui/lib-dom@0.9.2": {
"integrity": "sha512-U/+2dPuO4GvCxPfyA20XP+cn/5NqJjobS/ZvwTUj1UVMycnIkFRVukboV58LviP5mLJw4o/k1vAgank7sfBEpA=="
},
"@svar-ui/lib-state@1.9.6": {
"integrity": "sha512-twoHa8wZvzdxtES68s6Wnp4Xi1WivScNaFFK6sJ6WDgqVYOzJw0ZhVVrdwHQgieLITTKl/DYh/U3nuqtMetKYw=="
},
"@svar-ui/lib-svelte@0.5.2": {
"integrity": "sha512-i+hHMT3zctaGbRpyMDREt9im7YfLpvGwFYvH1ntEp/kYAwUrR/sxMJlEEKIid+Yg2EeMUstGxmYQbkWoMpPG7A==",
"dependencies": [
"@svar-ui/lib-state"
]
},
"@svar-ui/svelte-core@2.3.1": {
"integrity": "sha512-5ZrEcNX62UtQeB6GlpV15PRwiG7PvUYRdFR+tBjfXJr6Tw/xy1VN9VdwuV/1wXhgE+SSfnyUrJALfrAhGmfNIw==",
"dependencies": [
"@svar-ui/core-locales",
"@svar-ui/lib-dom",
"@svar-ui/lib-svelte"
]
},
"@svelte-put/shortcut@4.1.0_svelte@5.39.11__acorn@8.15.0": {
"integrity": "sha512-wImNEIkbxAIWFqlfuhcbC+jRPDeRa/uJGIXHMEVVD+jqL9xCwWNnkGQJ6Qb2XVszuRLHlb8SGZDL3Io/h3vs8w==",
"dependencies": [
"svelte"
]
},
"@sveltejs/acorn-typescript@1.0.6_acorn@8.15.0": {
"integrity": "sha512-4awhxtMh4cx9blePWl10HRHj8Iivtqj+2QdDCSMDzxG+XKa9+VCNupQuCuvzEhYPzZSrX+0gC+0lHA/0fFKKQQ==",
"dependencies": [
@ -427,6 +459,37 @@
"tslib"
]
},
"@types/d3-color@3.1.3": {
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A=="
},
"@types/d3-drag@3.0.7": {
"integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
"dependencies": [
"@types/d3-selection"
]
},
"@types/d3-interpolate@3.0.4": {
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
"dependencies": [
"@types/d3-color"
]
},
"@types/d3-selection@3.0.11": {
"integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w=="
},
"@types/d3-transition@3.0.9": {
"integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
"dependencies": [
"@types/d3-selection"
]
},
"@types/d3-zoom@3.0.8": {
"integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
"dependencies": [
"@types/d3-interpolate",
"@types/d3-selection"
]
},
"@types/estree@1.0.8": {
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="
},
@ -436,6 +499,28 @@
"undici-types"
]
},
"@xyflow/svelte@1.3.1_svelte@5.39.11__acorn@8.15.0": {
"integrity": "sha512-aLr2v0/nr+zER5+dCzEmR5qCu9l7FCKZwYiRvCX15U2FVIdO2M522pyPEr7Siwq6EEx0QjECACeN+rLZCDSzeA==",
"dependencies": [
"@svelte-put/shortcut",
"@xyflow/system",
"svelte"
]
},
"@xyflow/system@0.0.70": {
"integrity": "sha512-PpC//u9zxdjj0tfTSmZrg3+sRbTz6kop/Amky44U2Dl51sxzDTIUfXMwETOYpmr2dqICWXBIJwXL2a9QWtX2XA==",
"dependencies": [
"@types/d3-drag",
"@types/d3-interpolate",
"@types/d3-selection",
"@types/d3-transition",
"@types/d3-zoom",
"d3-drag",
"d3-interpolate",
"d3-selection",
"d3-zoom"
]
},
"accepts@2.0.0": {
"integrity": "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==",
"dependencies": [
@ -511,6 +596,55 @@
"cookie@0.7.2": {
"integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w=="
},
"d3-color@3.1.0": {
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA=="
},
"d3-dispatch@3.0.1": {
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg=="
},
"d3-drag@3.0.0": {
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
"dependencies": [
"d3-dispatch",
"d3-selection"
]
},
"d3-ease@3.0.1": {
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w=="
},
"d3-interpolate@3.0.1": {
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"dependencies": [
"d3-color"
]
},
"d3-selection@3.0.0": {
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ=="
},
"d3-timer@3.0.1": {
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA=="
},
"d3-transition@3.0.1_d3-selection@3.0.0": {
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
"dependencies": [
"d3-color",
"d3-dispatch",
"d3-ease",
"d3-interpolate",
"d3-selection",
"d3-timer"
]
},
"d3-zoom@3.0.0_d3-selection@3.0.0": {
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
"dependencies": [
"d3-dispatch",
"d3-drag",
"d3-interpolate",
"d3-selection",
"d3-transition"
]
},
"debug@4.4.3": {
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
"dependencies": [
@ -588,6 +722,12 @@
"escape-html@1.0.3": {
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
},
"esm-env-robust@0.0.3": {
"integrity": "sha512-90Gnuw2DALOqlL1581VxP3GHPUNHX9U+fQ+8FNcTTFClhY5gEggAAnJ3q1b2Oq23knRsjv8YpNeMRPaMLUymOA==",
"dependencies": [
"esm-env"
]
},
"esm-env@1.2.2": {
"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
},
@ -1099,6 +1239,13 @@
],
"bin": true
},
"svelte-splitpanes@8.0.9_svelte@5.39.11__acorn@8.15.0": {
"integrity": "sha512-L3oLXTC99M191FInTXJ/f/2i0welRql1QuVbPaU8iy6nvCR6X9VyjHCsCpLqKGWHwqkWo/AM9CQ1c0nzlb+MkA==",
"dependencies": [
"esm-env-robust",
"svelte"
]
},
"svelte@5.39.11_acorn@8.15.0": {
"integrity": "sha512-8MxWVm2+3YwrFbPaxOlT1bbMi6OTenrAgks6soZfiaS8Fptk4EVyRIFhJc3RpO264EeSNwgjWAdki0ufg4zkGw==",
"dependencies": [
@ -1189,11 +1336,14 @@
},
"workspace": {
"dependencies": [
"npm:@svar-ui/svelte-core@^2.3.0",
"npm:@sveltejs/vite-plugin-svelte@^6.2.1",
"npm:@tsconfig/svelte@^5.0.5",
"npm:@types/node@^24.6.0",
"npm:@xyflow/svelte@^1.3.1",
"npm:rolldown-vite@7.1.14",
"npm:svelte-check@^4.3.2",
"npm:svelte-splitpanes@8",
"npm:svelte@^5.39.6",
"npm:typescript@~5.9.3"
]

66
platform/loom/editor/src/App.svelte
View file

@ -2,20 +2,62 @@
import svelteLogo from './assets/svelte.svg'
import viteLogo from '/vite.svg'
import Counter from './lib/Counter.svelte'
import Flow from './lib/Flow.svelte'
// import { Splitpanes, Pane } from 'svelte-splitpanes'
import { SvelteFlow, Controls, Background, MiniMap, Panel, ConnectionLineType } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
let nodes = $state.raw<Node[]>([
{
id: '1',
position: { x: 0, y: 0 },
data: { label: 'Hello' },
type: 'input'
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Hello you' },
type: 'output'
},
{
id: '3',
position: { x: 200, y: 0 },
data: { label: 'what about me'}
}
]);
let edges = $state.raw<Edge[]>([
{
id: 'e1-2',
source: '1',
target: '2',
type: 'smoothstep'
}
]);
</script>
<main>
<div>
<a href="https://grimu-r.voleum.cc" target="_blank" rel="noreferrer">
<h1>Grimu-R Loom</h1>
</a>
</div>
<!-- <Splitpanes dblClickSplitter={false} theme="how-do-themes-work"> -->
<!-- <Pane size={20} snapSize={5} maxSize={50} style="background-color: ivory"> -->
<!-- left -->
<!-- </Pane> -->
<!-- <Pane> -->
<!-- <div> -->
<!-- <a href="https://grimu-r.voleum.cc" target="_blank" rel="noreferrer"> -->
<!-- <h1>Grimu-R Loom</h1> -->
<!-- </a> -->
<!-- </div> -->
<div class="card">
<Counter />
</div>
<!-- <div> -->
<!-- <Counter /> -->
<!-- </div> -->
<!-- </Pane> -->
<!-- <Pane size={20} snapSize={5} maxSize={50}> -->
<!-- right -->
<!-- </Pane> -->
<!-- </Splitpanes> -->
<Flow />
</main>
<style>
</style>

79
platform/loom/editor/src/app.css
View file

@ -1,79 +1,14 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
html, body, #app, main {
height: 100%;
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
.splitpanes__pane {
background-color: ivory;
}
.card {
padding: 2em;
}
.splitpanes__splitter {
background-color: gray;
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
width: 5px;
}

38
platform/loom/editor/src/lib/Flow.svelte Normal file
View file

@ -0,0 +1,38 @@
<script lang="ts">
import { SvelteFlow,
Controls,
Background,
MiniMap,
ConnectionLineType
} from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
let nodes = $state.raw<Node[]>([
{
id: '1',
position: { x: 0, y: 0 },
data: { label: 'Hello' },
type: 'input'
},
{
id: '2',
position: { x: 100, y: 100 },
data: { label: 'Hello you' },
type: 'output'
},
{
id: '3',
position: { x: 200, y: 0 },
data: { label: 'what about me'}
}
]);
let edges = $state.raw<Edge[]>([]);
</script>
<SvelteFlow bind:nodes bind:edges fitView snapGrid={[10,10]}
defaultEdgeOptions={{ type: 'smoothstep', zIndex: 0 }}
connectionLineType={ConnectionLineType.SmoothStep}>
<Controls />
<Background />
<MiniMap />
</SvelteFlow>