From f6b4e4350937f43bc060da9b6b03a6b8897729a1 Mon Sep 17 00:00:00 2001 From: Sam Lavigne Date: Thu, 24 Aug 2023 16:07:27 -0400 Subject: [PATCH] many improvements --- package-lock.json | 102 ++++++++++++++++++++++----------------------- src/FitComp.svelte | 12 ++++++ src/Graph.svelte | 47 +++++++++++---------- src/app.css | 4 ++ src/stores.js | 85 ++++++++++++++++++------------------- 5 files changed, 133 insertions(+), 117 deletions(-) create mode 100644 src/FitComp.svelte diff --git a/package-lock.json b/package-lock.json index b44f5ad..84724ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": "*", diff --git a/src/FitComp.svelte b/src/FitComp.svelte new file mode 100644 index 0000000..56299fd --- /dev/null +++ b/src/FitComp.svelte @@ -0,0 +1,12 @@ + + diff --git a/src/Graph.svelte b/src/Graph.svelte index f761d0b..dfe97c9 100644 --- a/src/Graph.svelte +++ b/src/Graph.svelte @@ -1,7 +1,14 @@ - - -
- - - - -
+ + + +
+ + + + +
+ diff --git a/src/app.css b/src/app.css index 236873e..3eb3aa5 100644 --- a/src/app.css +++ b/src/app.css @@ -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; +} diff --git a/src/stores.js b/src/stores.js index 69940f4..93a20ca 100644 --- a/src/stores.js +++ b/src/stores.js @@ -275,11 +275,11 @@ nodes.subscribe(($nodes) => { for (let i = 0; i < n1.data.outputs.length; i++) { const edgeType = n1.data.outputs[i]; for (let j = 0; j < rest.length; j++) { - let found = false; + let found = false; 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)) { + const targetEdgeType = n2.data.inputs[k]; + if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) { newEdges.push({ id: uuidv4(), type: "default", @@ -288,12 +288,12 @@ nodes.subscribe(($nodes) => { sourceHandle: edgeType + "_" + i, targetHandle: edgeType + "_" + k, }); - filled.push(n2.id+ k); - found = true; + filled.push(n2.id + k); + found = true; break; } } - if (found) break; + if (found) break; } } const nextNode = rest.shift(); @@ -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) {