many improvements
This commit is contained in:
Sam Lavigne
parent
09e4b5858c
commit
f6b4e43509
|
|
@ -551,33 +551,33 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.5.tgz",
|
||||
"integrity": "sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==",
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.6.tgz",
|
||||
"integrity": "sha512-NHkizg870sKYQn45oZT5ItoHqcgRgJD7KAiWZp4Udc6YdrFH2W0tZ2vv4shRHP+SXHoJ1G8B4I1GWb5oQSGypA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-axis": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.2.tgz",
|
||||
"integrity": "sha512-uGC7DBh0TZrU/LY43Fd8Qr+2ja1FKmH07q2FoZFHo1eYl8aj87GhfVoY1saJVJiq24rp1+wpI6BvQJMKgQm8oA==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.3.tgz",
|
||||
"integrity": "sha512-SE3x/pLO/+GIHH17mvs1uUVPkZ3bHquGzvZpPAh4yadRy71J93MJBpgK/xY8l9gT28yTN1g9v3HfGSFeBMmwZw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-brush": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.2.tgz",
|
||||
"integrity": "sha512-2TEm8KzUG3N7z0TrSKPmbxByBx54M+S9lHoP2J55QuLU0VSQ9mE96EJSAOVNEqd1bbynMjeTS9VHmz8/bSw8rA==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.3.tgz",
|
||||
"integrity": "sha512-MQ1/M/B5ifTScHSe5koNkhxn2mhUPqXjGuKjjVYckplAPjP9t2I2sZafb/YVHDwhoXWZoSav+Q726eIbN3qprA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-chord": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.2.tgz",
|
||||
"integrity": "sha512-abT/iLHD3sGZwqMTX1TYCMEulr+wBd0SzyOQnjYNLp7sngdOHYtNkMRI5v3w5thoN+BWtlHVDx2Osvq6fxhZWw==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.3.tgz",
|
||||
"integrity": "sha512-keuSRwO02c7PBV3JMWuctIfdeJrVFI7RpzouehvBWL4/GGUB3PBNg/9ZKPZAgJphzmS2v2+7vr7BGDQw1CAulw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-color": {
|
||||
|
|
@ -587,9 +587,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-contour": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.2.tgz",
|
||||
"integrity": "sha512-k6/bGDoAGJZnZWaKzeB+9glgXCYGvh6YlluxzBREiVo8f/X2vpTEdgPy9DN7Z2i42PZOZ4JDhVdlTSTSkLDPlQ==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.3.tgz",
|
||||
"integrity": "sha512-x7G/tdDZt4m09XZnG2SutbIuQqmkNYqR9uhDMdPlpJbcwepkEjEWG29euFcgVA1k6cn92CHdDL9Z+fOnxnbVQw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-array": "*",
|
||||
|
|
@ -603,24 +603,24 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-dispatch": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.2.tgz",
|
||||
"integrity": "sha512-rxN6sHUXEZYCKV05MEh4z4WpPSqIw+aP7n9ZN6WYAAvZoEAghEK1WeVZMZcHRBwyaKflU43PCUAJNjFxCzPDjg==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.3.tgz",
|
||||
"integrity": "sha512-Df7KW3Re7G6cIpIhQtqHin8yUxUHYAqiE41ffopbmU5+FifYUNV7RVyTg8rQdkEagg83m14QtS8InvNb95Zqug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-drag": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.2.tgz",
|
||||
"integrity": "sha512-qmODKEDvyKWVHcWWCOVcuVcOwikLVsyc4q4EBJMREsoQnR2Qoc2cZQUyFUPgO9q4S3qdSqJKBsuefv+h0Qy+tw==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.3.tgz",
|
||||
"integrity": "sha512-82AuQMpBQjuXeIX4tjCYfWjpm3g7aGCfx6dFlxX2JlRaiME/QWcHzBsINl7gbHCODA2anPYlL31/Trj/UnjK9A==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-dsv": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.1.tgz",
|
||||
"integrity": "sha512-76pBHCMTvPLt44wFOieouXcGXWOF0AJCceUvaFkxSZEu4VDUdv93JfpMa6VGNFs01FHfuP4a5Ou68eRG1KBfTw==",
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.2.tgz",
|
||||
"integrity": "sha512-DooW5AOkj4AGmseVvbwHvwM/Ltu0Ks0WrhG6r5FG9riHT5oUUTHz6xHsHqJSVU8ZmPkOqlUEY2obS5C9oCIi2g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-ease": {
|
||||
|
|
@ -630,18 +630,18 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-fetch": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.2.tgz",
|
||||
"integrity": "sha512-gllwYWozWfbep16N9fByNBDTkJW/SyhH6SGRlXloR7WdtAaBui4plTP+gbUgiEot7vGw/ZZop1yDZlgXXSuzjA==",
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.3.tgz",
|
||||
"integrity": "sha512-/EsDKRiQkby3Z/8/AiZq8bsuLDo/tYHnNIZkUpSeEHWV7fHUl6QFBjvMPbhkKGk9jZutzfOkGygCV7eR/MkcXA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-dsv": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-force": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.4.tgz",
|
||||
"integrity": "sha512-q7xbVLrWcXvSBBEoadowIUJ7sRpS1yvgMWnzHJggFy5cUZBq2HZL5k/pBSm0GdYWS1vs5/EDwMjSKF55PDY4Aw==",
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.5.tgz",
|
||||
"integrity": "sha512-EGG+IWx93ESSXBwfh/5uPuR9Hp8M6o6qEGU7bBQslxCvrdUBQZha/EFpu/VMdLU4B0y4Oe4h175nSm7p9uqFug==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-format": {
|
||||
|
|
@ -651,18 +651,18 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-geo": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.3.tgz",
|
||||
"integrity": "sha512-bK9uZJS3vuDCNeeXQ4z3u0E7OeJZXjUgzFdSOtNtMCJCLvDtWDwfpRVWlyt3y8EvRzI0ccOu9xlMVirawolSCw==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.4.tgz",
|
||||
"integrity": "sha512-kmUK8rVVIBPKJ1/v36bk2aSgwRj2N/ZkjDT+FkMT5pgedZoPlyhaG62J+9EgNIgUXE6IIL0b7bkLxCzhE6U4VQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-hierarchy": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
|
||||
"integrity": "sha512-9hjRTVoZjRFR6xo8igAJyNXQyPX6Aq++Nhb5ebrUF414dv4jr2MitM2fWiOY475wa3Za7TOS2Gh9fmqEhLTt0A==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.3.tgz",
|
||||
"integrity": "sha512-GpSK308Xj+HeLvogfEc7QsCOcIxkDwLhFYnOoohosEzOqv7/agxwvJER1v/kTC+CY1nfazR0F7gnHo7GE41/fw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-interpolate": {
|
||||
|
|
@ -699,9 +699,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-scale": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
|
||||
"integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.4.tgz",
|
||||
"integrity": "sha512-eq1ZeTj0yr72L8MQk6N6heP603ubnywSDRfNpi5enouR112HzGLS6RIvExCzZTraFF4HdzNpJMwA/zGiMoHUUw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
|
|
@ -714,15 +714,15 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-selection": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.5.tgz",
|
||||
"integrity": "sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==",
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.6.tgz",
|
||||
"integrity": "sha512-2ACr96USZVjXR9KMD9IWi1Epo4rSDKnUtYn6q2SPhYxykvXTw9vR77lkFNruXVg4i1tzQtBxeDMx0oNvJWbF1w==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-shape": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.1.tgz",
|
||||
"integrity": "sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.2.tgz",
|
||||
"integrity": "sha512-NN4CXr3qeOUNyK5WasVUV8NCSAx/CRVcwcb0BuuS1PiTqwIm6ABi1SyasLZ/vsVCFDArF+W4QiGzSry1eKYQ7w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
|
|
@ -747,18 +747,18 @@
|
|||
"dev": true
|
||||
},
|
||||
"node_modules/@types/d3-transition": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.3.tgz",
|
||||
"integrity": "sha512-/S90Od8Id1wgQNvIA8iFv9jRhCiZcGhPd2qX0bKF/PS+y0W5CrXKgIiELd2CvG1mlQrWK/qlYh3VxicqG1ZvgA==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.4.tgz",
|
||||
"integrity": "sha512-512a4uCOjUzsebydItSXsHrPeQblCVk8IKjqCUmrlvBWkkVh3donTTxmURDo1YPwIVDh5YVwCAO6gR4sgimCPQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-selection": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/d3-zoom": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.3.tgz",
|
||||
"integrity": "sha512-OWk1yYIIWcZ07+igN6BeoG6rqhnJ/pYe+R1qWFM2DtW49zsoSjgb9G5xB0ZXA8hh2jAzey1XuRmMSoXdKw8MDA==",
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.4.tgz",
|
||||
"integrity": "sha512-cqkuY1ah9ZQre2POqjSLcM8g40UVya/qwEUrNYP2/rCVljbmqKCVcv+ebvwhlI5azIbSEL7m+os6n+WlYA43aA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/d3-interpolate": "*",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<script>
|
||||
import { useSvelteFlow } from "@xyflow/svelte";
|
||||
import {nodes, auto} from './stores.js';
|
||||
|
||||
const { zoomIn, zoomOut, setZoom, fitView, setCenter, setViewport, getViewport, viewport } =
|
||||
useSvelteFlow();
|
||||
|
||||
nodes.subscribe((n) => {
|
||||
if ($auto) fitView();
|
||||
});
|
||||
</script>
|
||||
<button>Fit</button>
|
||||
|
|
@ -1,7 +1,14 @@
|
|||
<script>
|
||||
import { nodes, edges, auto} from "./stores.js";
|
||||
import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from "@xyflow/svelte";
|
||||
import { nodes, edges, auto } from "./stores.js";
|
||||
import {
|
||||
SvelteFlowProvider,
|
||||
SvelteFlow,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
} from "@xyflow/svelte";
|
||||
import Node from "./nodes/Node.svelte";
|
||||
import FitComp from "./FitComp.svelte";
|
||||
|
||||
const nodeTypes = {
|
||||
ffmpeg: Node,
|
||||
|
|
@ -25,22 +32,18 @@
|
|||
function onMoveStart(e) {
|
||||
console.log(e);
|
||||
}
|
||||
function onConnect(e){
|
||||
console.log('connect', e);
|
||||
function onConnect(e) {
|
||||
console.log("connect", e);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
|
||||
<div style="width: 900px; height: 500px;">
|
||||
<SvelteFlow
|
||||
{nodeTypes}
|
||||
{nodes}
|
||||
{edges}
|
||||
snapGrid={[10, 10]}
|
||||
fitView
|
||||
>
|
||||
<SvelteFlowProvider>
|
||||
<FitComp/>
|
||||
<label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
|
||||
<div style="width: 900px; height: 500px;">
|
||||
<SvelteFlow {nodeTypes} {nodes} {edges} snapGrid={[10, 10]} fitView>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
</div>
|
||||
</div>
|
||||
</SvelteFlowProvider>
|
||||
|
|
|
|||
|
|
@ -108,3 +108,7 @@ input[type="range"]:focus::-moz-range-thumb {
|
|||
border-radius: 0px !important;
|
||||
border: 1px solid var(--b1) !important;
|
||||
}
|
||||
|
||||
.svelte-flow__attribution {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ nodes.subscribe(($nodes) => {
|
|||
const n2 = rest[j];
|
||||
for (let k = 0; k < n2.data.inputs.length; k++) {
|
||||
const targetEdgeType = n2.data.inputs[k];
|
||||
if (edgeType === targetEdgeType && !filled.includes(n2.id+k)) {
|
||||
if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
|
||||
newEdges.push({
|
||||
id: uuidv4(),
|
||||
type: "default",
|
||||
|
|
@ -288,7 +288,7 @@ nodes.subscribe(($nodes) => {
|
|||
sourceHandle: edgeType + "_" + i,
|
||||
targetHandle: edgeType + "_" + k,
|
||||
});
|
||||
filled.push(n2.id+ k);
|
||||
filled.push(n2.id + k);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
|
|
@ -330,25 +330,6 @@ export function addNode(data, type) {
|
|||
}
|
||||
}
|
||||
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
|
||||
const w = 100;
|
||||
const h = 50;
|
||||
const margin = 10;
|
||||
|
||||
let existing = get(nodes);
|
||||
|
||||
if (type === "input") {
|
||||
const inps = existing.filter((n) => n.nodeType === "input");
|
||||
y = inps.length * h;
|
||||
} else if (type === "filter") {
|
||||
const flts = existing.filter((n) => n.nodeType === "filter");
|
||||
x = (flts.length + 1) * w;
|
||||
} else if (type === "output") {
|
||||
x = 500;
|
||||
}
|
||||
|
||||
data.inputs = ins;
|
||||
data.outputs = outs;
|
||||
|
||||
|
|
@ -357,28 +338,44 @@ export function addNode(data, type) {
|
|||
type: "ffmpeg",
|
||||
data: data,
|
||||
nodeType: type,
|
||||
position: { x, y },
|
||||
position: { x: 0, y: 0 },
|
||||
};
|
||||
|
||||
nodes.update((n) => {
|
||||
n.push(node);
|
||||
return n;
|
||||
nodes.update((_nodes) => {
|
||||
_nodes.push(node);
|
||||
|
||||
const isAuto = get(auto);
|
||||
|
||||
if (isAuto) {
|
||||
const w = 100;
|
||||
const h = 50;
|
||||
const margin = 10;
|
||||
let prev = null;
|
||||
|
||||
for (let n of _nodes) {
|
||||
if (n.nodeType === "input") {
|
||||
n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
|
||||
prev = n;
|
||||
}
|
||||
}
|
||||
|
||||
for (let n of _nodes) {
|
||||
if (n.nodeType === "filter") {
|
||||
let _w = prev && prev.width ? prev.width : w;
|
||||
n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -30 };
|
||||
prev = n;
|
||||
}
|
||||
}
|
||||
|
||||
for (let n of _nodes) {
|
||||
if (n.nodeType === "output") {
|
||||
let _w = prev && prev.width ? prev.width : w;
|
||||
n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 0 };
|
||||
}
|
||||
}
|
||||
}
|
||||
return _nodes;
|
||||
});
|
||||
|
||||
//autolayout();
|
||||
|
||||
// edges.update((_edges) => {
|
||||
// const target = existing[existing.length - 2];
|
||||
// if (!target) return _edges;
|
||||
// const newEdge = {
|
||||
// id: uuidv4(),
|
||||
// type: "default",
|
||||
// source: target.id,
|
||||
// target: node.id,
|
||||
// };
|
||||
// _edges.push(newEdge);
|
||||
// return _edges;
|
||||
// });
|
||||
}
|
||||
|
||||
export function removeNode(id) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue