sundog
/
ffmpeg-explorer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

many improvements

This commit is contained in:
Sam Lavigne 2023-08-24 16:07:27 -04:00
parent 09e4b5858c
commit f6b4e43509
5 changed files with 133 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
package-lock.json generated
View File

@ -551,33 +551,33 @@
} }
}, },
"node_modules/@types/d3-array": { "node_modules/@types/d3-array": {
"version": "3.0.5", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.6.tgz",
"integrity": "sha512-Qk7fpJ6qFp+26VeQ47WY0mkwXaiq8+76RJcncDEfMc2ocRzXLO67bLFRNI4OX1aGBoPzsM5Y2T+/m1pldOgD+A==", "integrity": "sha512-NHkizg870sKYQn45oZT5ItoHqcgRgJD7KAiWZp4Udc6YdrFH2W0tZ2vv4shRHP+SXHoJ1G8B4I1GWb5oQSGypA==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-axis": { "node_modules/@types/d3-axis": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-axis/-/d3-axis-3.0.3.tgz",
"integrity": "sha512-uGC7DBh0TZrU/LY43Fd8Qr+2ja1FKmH07q2FoZFHo1eYl8aj87GhfVoY1saJVJiq24rp1+wpI6BvQJMKgQm8oA==", "integrity": "sha512-SE3x/pLO/+GIHH17mvs1uUVPkZ3bHquGzvZpPAh4yadRy71J93MJBpgK/xY8l9gT28yTN1g9v3HfGSFeBMmwZw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-selection": "*" "@types/d3-selection": "*"
} }
}, },
"node_modules/@types/d3-brush": { "node_modules/@types/d3-brush": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-brush/-/d3-brush-3.0.3.tgz",
"integrity": "sha512-2TEm8KzUG3N7z0TrSKPmbxByBx54M+S9lHoP2J55QuLU0VSQ9mE96EJSAOVNEqd1bbynMjeTS9VHmz8/bSw8rA==", "integrity": "sha512-MQ1/M/B5ifTScHSe5koNkhxn2mhUPqXjGuKjjVYckplAPjP9t2I2sZafb/YVHDwhoXWZoSav+Q726eIbN3qprA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-selection": "*" "@types/d3-selection": "*"
} }
}, },
"node_modules/@types/d3-chord": { "node_modules/@types/d3-chord": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-chord/-/d3-chord-3.0.3.tgz",
"integrity": "sha512-abT/iLHD3sGZwqMTX1TYCMEulr+wBd0SzyOQnjYNLp7sngdOHYtNkMRI5v3w5thoN+BWtlHVDx2Osvq6fxhZWw==", "integrity": "sha512-keuSRwO02c7PBV3JMWuctIfdeJrVFI7RpzouehvBWL4/GGUB3PBNg/9ZKPZAgJphzmS2v2+7vr7BGDQw1CAulw==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-color": { "node_modules/@types/d3-color": {
@ -587,9 +587,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-contour": { "node_modules/@types/d3-contour": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-contour/-/d3-contour-3.0.3.tgz",
"integrity": "sha512-k6/bGDoAGJZnZWaKzeB+9glgXCYGvh6YlluxzBREiVo8f/X2vpTEdgPy9DN7Z2i42PZOZ4JDhVdlTSTSkLDPlQ==", "integrity": "sha512-x7G/tdDZt4m09XZnG2SutbIuQqmkNYqR9uhDMdPlpJbcwepkEjEWG29euFcgVA1k6cn92CHdDL9Z+fOnxnbVQw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-array": "*", "@types/d3-array": "*",
@ -603,24 +603,24 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-dispatch": { "node_modules/@types/d3-dispatch": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-dispatch/-/d3-dispatch-3.0.3.tgz",
"integrity": "sha512-rxN6sHUXEZYCKV05MEh4z4WpPSqIw+aP7n9ZN6WYAAvZoEAghEK1WeVZMZcHRBwyaKflU43PCUAJNjFxCzPDjg==", "integrity": "sha512-Df7KW3Re7G6cIpIhQtqHin8yUxUHYAqiE41ffopbmU5+FifYUNV7RVyTg8rQdkEagg83m14QtS8InvNb95Zqug==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-drag": { "node_modules/@types/d3-drag": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-drag/-/d3-drag-3.0.3.tgz",
"integrity": "sha512-qmODKEDvyKWVHcWWCOVcuVcOwikLVsyc4q4EBJMREsoQnR2Qoc2cZQUyFUPgO9q4S3qdSqJKBsuefv+h0Qy+tw==", "integrity": "sha512-82AuQMpBQjuXeIX4tjCYfWjpm3g7aGCfx6dFlxX2JlRaiME/QWcHzBsINl7gbHCODA2anPYlL31/Trj/UnjK9A==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-selection": "*" "@types/d3-selection": "*"
} }
}, },
"node_modules/@types/d3-dsv": { "node_modules/@types/d3-dsv": {
"version": "3.0.1", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/d3-dsv/-/d3-dsv-3.0.2.tgz",
"integrity": "sha512-76pBHCMTvPLt44wFOieouXcGXWOF0AJCceUvaFkxSZEu4VDUdv93JfpMa6VGNFs01FHfuP4a5Ou68eRG1KBfTw==", "integrity": "sha512-DooW5AOkj4AGmseVvbwHvwM/Ltu0Ks0WrhG6r5FG9riHT5oUUTHz6xHsHqJSVU8ZmPkOqlUEY2obS5C9oCIi2g==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-ease": { "node_modules/@types/d3-ease": {
@ -630,18 +630,18 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-fetch": { "node_modules/@types/d3-fetch": {
"version": "3.0.2", "version": "3.0.3",
"resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-fetch/-/d3-fetch-3.0.3.tgz",
"integrity": "sha512-gllwYWozWfbep16N9fByNBDTkJW/SyhH6SGRlXloR7WdtAaBui4plTP+gbUgiEot7vGw/ZZop1yDZlgXXSuzjA==", "integrity": "sha512-/EsDKRiQkby3Z/8/AiZq8bsuLDo/tYHnNIZkUpSeEHWV7fHUl6QFBjvMPbhkKGk9jZutzfOkGygCV7eR/MkcXA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-dsv": "*" "@types/d3-dsv": "*"
} }
}, },
"node_modules/@types/d3-force": { "node_modules/@types/d3-force": {
"version": "3.0.4", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/d3-force/-/d3-force-3.0.5.tgz",
"integrity": "sha512-q7xbVLrWcXvSBBEoadowIUJ7sRpS1yvgMWnzHJggFy5cUZBq2HZL5k/pBSm0GdYWS1vs5/EDwMjSKF55PDY4Aw==", "integrity": "sha512-EGG+IWx93ESSXBwfh/5uPuR9Hp8M6o6qEGU7bBQslxCvrdUBQZha/EFpu/VMdLU4B0y4Oe4h175nSm7p9uqFug==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-format": { "node_modules/@types/d3-format": {
@ -651,18 +651,18 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-geo": { "node_modules/@types/d3-geo": {
"version": "3.0.3", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-geo/-/d3-geo-3.0.4.tgz",
"integrity": "sha512-bK9uZJS3vuDCNeeXQ4z3u0E7OeJZXjUgzFdSOtNtMCJCLvDtWDwfpRVWlyt3y8EvRzI0ccOu9xlMVirawolSCw==", "integrity": "sha512-kmUK8rVVIBPKJ1/v36bk2aSgwRj2N/ZkjDT+FkMT5pgedZoPlyhaG62J+9EgNIgUXE6IIL0b7bkLxCzhE6U4VQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/geojson": "*" "@types/geojson": "*"
} }
}, },
"node_modules/@types/d3-hierarchy": { "node_modules/@types/d3-hierarchy": {
"version": "3.1.2", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-hierarchy/-/d3-hierarchy-3.1.3.tgz",
"integrity": "sha512-9hjRTVoZjRFR6xo8igAJyNXQyPX6Aq++Nhb5ebrUF414dv4jr2MitM2fWiOY475wa3Za7TOS2Gh9fmqEhLTt0A==", "integrity": "sha512-GpSK308Xj+HeLvogfEc7QsCOcIxkDwLhFYnOoohosEzOqv7/agxwvJER1v/kTC+CY1nfazR0F7gnHo7GE41/fw==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-interpolate": { "node_modules/@types/d3-interpolate": {
@ -699,9 +699,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-scale": { "node_modules/@types/d3-scale": {
"version": "4.0.3", "version": "4.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.4.tgz",
"integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==", "integrity": "sha512-eq1ZeTj0yr72L8MQk6N6heP603ubnywSDRfNpi5enouR112HzGLS6RIvExCzZTraFF4HdzNpJMwA/zGiMoHUUw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-time": "*" "@types/d3-time": "*"
@ -714,15 +714,15 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-selection": { "node_modules/@types/d3-selection": {
"version": "3.0.5", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.5.tgz", "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.6.tgz",
"integrity": "sha512-xCB0z3Hi8eFIqyja3vW8iV01+OHGYR2di/+e+AiOcXIOrY82lcvWW8Ke1DYE/EUVMsBl4Db9RppSBS3X1U6J0w==", "integrity": "sha512-2ACr96USZVjXR9KMD9IWi1Epo4rSDKnUtYn6q2SPhYxykvXTw9vR77lkFNruXVg4i1tzQtBxeDMx0oNvJWbF1w==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-shape": { "node_modules/@types/d3-shape": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.2.tgz",
"integrity": "sha512-6Uh86YFF7LGg4PQkuO2oG6EMBRLuW9cbavUW46zkIO5kuS2PfTqo2o9SkgtQzguBHbLgNnU90UNsITpsX1My+A==", "integrity": "sha512-NN4CXr3qeOUNyK5WasVUV8NCSAx/CRVcwcb0BuuS1PiTqwIm6ABi1SyasLZ/vsVCFDArF+W4QiGzSry1eKYQ7w==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-path": "*" "@types/d3-path": "*"
@ -747,18 +747,18 @@
"dev": true "dev": true
}, },
"node_modules/@types/d3-transition": { "node_modules/@types/d3-transition": {
"version": "3.0.3", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-transition/-/d3-transition-3.0.4.tgz",
"integrity": "sha512-/S90Od8Id1wgQNvIA8iFv9jRhCiZcGhPd2qX0bKF/PS+y0W5CrXKgIiELd2CvG1mlQrWK/qlYh3VxicqG1ZvgA==", "integrity": "sha512-512a4uCOjUzsebydItSXsHrPeQblCVk8IKjqCUmrlvBWkkVh3donTTxmURDo1YPwIVDh5YVwCAO6gR4sgimCPQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-selection": "*" "@types/d3-selection": "*"
} }
}, },
"node_modules/@types/d3-zoom": { "node_modules/@types/d3-zoom": {
"version": "3.0.3", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.4.tgz",
"integrity": "sha512-OWk1yYIIWcZ07+igN6BeoG6rqhnJ/pYe+R1qWFM2DtW49zsoSjgb9G5xB0ZXA8hh2jAzey1XuRmMSoXdKw8MDA==", "integrity": "sha512-cqkuY1ah9ZQre2POqjSLcM8g40UVya/qwEUrNYP2/rCVljbmqKCVcv+ebvwhlI5azIbSEL7m+os6n+WlYA43aA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3-interpolate": "*", "@types/d3-interpolate": "*",

12
src/FitComp.svelte Normal file
View File

@ -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>

33
src/Graph.svelte
View File

@ -1,7 +1,14 @@
<script> <script>
import { nodes, edges, auto} from "./stores.js"; import { nodes, edges, auto } from "./stores.js";
import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from "@xyflow/svelte"; import {
SvelteFlowProvider,
SvelteFlow,
Controls,
Background,
BackgroundVariant,
} from "@xyflow/svelte";
import Node from "./nodes/Node.svelte"; import Node from "./nodes/Node.svelte";
import FitComp from "./FitComp.svelte";
const nodeTypes = { const nodeTypes = {
ffmpeg: Node, ffmpeg: Node,
@ -25,22 +32,18 @@
function onMoveStart(e) { function onMoveStart(e) {
console.log(e); console.log(e);
} }
function onConnect(e){ function onConnect(e) {
console.log('connect', e); console.log("connect", e);
} }
</script> </script>
<SvelteFlowProvider>
<label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label> <FitComp/>
<div style="width: 900px; height: 500px;"> <label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
<SvelteFlow <div style="width: 900px; height: 500px;">
{nodeTypes} <SvelteFlow {nodeTypes} {nodes} {edges} snapGrid={[10, 10]} fitView>
{nodes}
{edges}
snapGrid={[10, 10]}
fitView
>
<Controls /> <Controls />
<Background variant={BackgroundVariant.Dots} /> <Background variant={BackgroundVariant.Dots} />
</SvelteFlow> </SvelteFlow>
</div> </div>
</SvelteFlowProvider>

4
src/app.css
View File

@ -108,3 +108,7 @@ input[type="range"]:focus::-moz-range-thumb {
border-radius: 0px !important; border-radius: 0px !important;
border: 1px solid var(--b1) !important; border: 1px solid var(--b1) !important;
} }
.svelte-flow__attribution {
display: none !important;
}

77
src/stores.js
View File

@ -279,7 +279,7 @@ nodes.subscribe(($nodes) => {
const n2 = rest[j]; const n2 = rest[j];
for (let k = 0; k < n2.data.inputs.length; k++) { for (let k = 0; k < n2.data.inputs.length; k++) {
const targetEdgeType = n2.data.inputs[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({ newEdges.push({
id: uuidv4(), id: uuidv4(),
type: "default", type: "default",
@ -288,7 +288,7 @@ nodes.subscribe(($nodes) => {
sourceHandle: edgeType + "_" + i, sourceHandle: edgeType + "_" + i,
targetHandle: edgeType + "_" + k, targetHandle: edgeType + "_" + k,
}); });
filled.push(n2.id+ k); filled.push(n2.id + k);
found = true; found = true;
break; 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.inputs = ins;
data.outputs = outs; data.outputs = outs;
@ -357,28 +338,44 @@ export function addNode(data, type) {
type: "ffmpeg", type: "ffmpeg",
data: data, data: data,
nodeType: type, nodeType: type,
position: { x, y }, position: { x: 0, y: 0 },
}; };
nodes.update((n) => { nodes.update((_nodes) => {
n.push(node); _nodes.push(node);
return n;
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) { export function removeNode(id) {