From 473b46edf259b1a87135ebde1973655f88d308a8 Mon Sep 17 00:00:00 2001 From: Sam Lavigne Date: Tue, 22 Aug 2023 21:57:53 -0400 Subject: [PATCH] attempt at nodes --- package-lock.json | 406 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/App.svelte | 76 +++---- src/Filter.svelte | 4 +- src/FilterPicker.svelte | 4 +- src/Graph.svelte | 277 ++++++++---------------- src/Graph_old.svelte | 201 ++++++++++++++++++ src/Input.svelte | 5 +- src/nodes/FilterNode.svelte | 0 src/nodes/InputNode.svelte | 0 src/nodes/Node.svelte | 23 ++ src/nodes/OutputNode.svelte | 0 src/stores.js | 187 ++++++++++++----- 13 files changed, 888 insertions(+), 296 deletions(-) create mode 100644 src/Graph_old.svelte create mode 100644 src/nodes/FilterNode.svelte create mode 100644 src/nodes/InputNode.svelte create mode 100644 src/nodes/Node.svelte create mode 100644 src/nodes/OutputNode.svelte diff --git a/package-lock.json b/package-lock.json index cf74935..b44f5ad 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^2.4.2", + "@xyflow/svelte": "^0.0.12", "svelte": "^4.0.5", "svelte-dnd-action": "^0.9.25", "svelvet": "^8.1.0", @@ -466,6 +467,12 @@ "resolved": "https://registry.npmjs.org/@leeoniya/ufuzzy/-/ufuzzy-1.0.8.tgz", "integrity": "sha512-HQ6aJlYpWLq1f9AiApJl0aOIXlJUtuhBOYfSfv5rt3XNYkCBveojtnL6FvOVpJ2gEJ2wqgMW8xOHkLVYAbXghg==" }, + "node_modules/@svelte-put/shortcut": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@svelte-put/shortcut/-/shortcut-3.0.0.tgz", + "integrity": "sha512-nZg3pwpTi9wUsvQPlqOzEsxZcF2jmY5j+VBq/20IUjjd2OpM92XqZAga0PCCjE6OuEobOt58UMnC2QZgOvk0tQ==", + "dev": true + }, "node_modules/@sveltejs/vite-plugin-svelte": { "version": "2.4.5", "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.4.5.tgz", @@ -505,12 +512,300 @@ "vite": "^4.0.0" } }, + "node_modules/@types/d3": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.0.tgz", + "integrity": "sha512-jIfNVK0ZlxcuRDKtRS/SypEyOQ6UHaFQBKv032X45VvxSJ6Yi5G9behy9h6tNTHTDGh5Vq+KbmBjUWLgY4meCA==", + "dev": true, + "dependencies": { + "@types/d3-array": "*", + "@types/d3-axis": "*", + "@types/d3-brush": "*", + "@types/d3-chord": "*", + "@types/d3-color": "*", + "@types/d3-contour": "*", + "@types/d3-delaunay": "*", + "@types/d3-dispatch": "*", + "@types/d3-drag": "*", + "@types/d3-dsv": "*", + "@types/d3-ease": "*", + "@types/d3-fetch": "*", + "@types/d3-force": "*", + "@types/d3-format": "*", + "@types/d3-geo": "*", + "@types/d3-hierarchy": "*", + "@types/d3-interpolate": "*", + "@types/d3-path": "*", + "@types/d3-polygon": "*", + "@types/d3-quadtree": "*", + "@types/d3-random": "*", + "@types/d3-scale": "*", + "@types/d3-scale-chromatic": "*", + "@types/d3-selection": "*", + "@types/d3-shape": "*", + "@types/d3-time": "*", + "@types/d3-time-format": "*", + "@types/d3-timer": "*", + "@types/d3-transition": "*", + "@types/d3-zoom": "*" + } + }, + "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==", + "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==", + "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==", + "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==", + "dev": true + }, + "node_modules/@types/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA==", + "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==", + "dev": true, + "dependencies": { + "@types/d3-array": "*", + "@types/geojson": "*" + } + }, + "node_modules/@types/d3-delaunay": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-delaunay/-/d3-delaunay-6.0.1.tgz", + "integrity": "sha512-tLxQ2sfT0p6sxdG75c6f/ekqxjyYR0+LwPrsO1mbC9YDBzPJhs2HbJJRrn8Ez1DBoHRo2yx7YEATI+8V1nGMnQ==", + "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==", + "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==", + "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==", + "dev": true + }, + "node_modules/@types/d3-ease": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.0.tgz", + "integrity": "sha512-aMo4eaAOijJjA6uU+GIeW018dvy9+oH5Y2VPPzjjfxevvGQ/oRDs+tfYC9b50Q4BygRR8yE2QCLsrT0WtAVseA==", + "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==", + "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==", + "dev": true + }, + "node_modules/@types/d3-format": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-3.0.1.tgz", + "integrity": "sha512-5KY70ifCCzorkLuIkDe0Z9YTf9RR2CjBX1iaJG+rgM/cPP+sO+q9YdQ9WdhQcgPj1EQiJ2/0+yUkkziTG6Lubg==", + "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==", + "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==", + "dev": true + }, + "node_modules/@types/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw==", + "dev": true, + "dependencies": { + "@types/d3-color": "*" + } + }, + "node_modules/@types/d3-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.0.0.tgz", + "integrity": "sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg==", + "dev": true + }, + "node_modules/@types/d3-polygon": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-polygon/-/d3-polygon-3.0.0.tgz", + "integrity": "sha512-D49z4DyzTKXM0sGKVqiTDTYr+DHg/uxsiWDAkNrwXYuiZVd9o9wXZIo+YsHkifOiyBkmSWlEngHCQme54/hnHw==", + "dev": true + }, + "node_modules/@types/d3-quadtree": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@types/d3-quadtree/-/d3-quadtree-3.0.2.tgz", + "integrity": "sha512-QNcK8Jguvc8lU+4OfeNx+qnVy7c0VrDJ+CCVFS9srBo2GL9Y18CnIxBdTF3v38flrGy5s1YggcoAiu6s4fLQIw==", + "dev": true + }, + "node_modules/@types/d3-random": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@types/d3-random/-/d3-random-3.0.1.tgz", + "integrity": "sha512-IIE6YTekGczpLYo/HehAy3JGF1ty7+usI97LqraNa8IiDur+L44d0VOjAvFQWJVdZOJHukUJw+ZdZBlgeUsHOQ==", + "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==", + "dev": true, + "dependencies": { + "@types/d3-time": "*" + } + }, + "node_modules/@types/d3-scale-chromatic": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz", + "integrity": "sha512-dsoJGEIShosKVRBZB0Vo3C8nqSDqVGujJU6tPznsBJxNJNwMF8utmS83nvCBKQYPpjCzaaHcrf66iTRpZosLPw==", + "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==", + "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==", + "dev": true, + "dependencies": { + "@types/d3-path": "*" + } + }, + "node_modules/@types/d3-time": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz", + "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==", + "dev": true + }, + "node_modules/@types/d3-time-format": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-4.0.0.tgz", + "integrity": "sha512-yjfBUe6DJBsDin2BMIulhSHmr5qNR5Pxs17+oW4DoVPyVIXZ+m6bs7j1UVKP08Emv6jRmYrYqxYzO63mQxy1rw==", + "dev": true + }, + "node_modules/@types/d3-timer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.0.tgz", + "integrity": "sha512-HNB/9GHqu7Fo8AQiugyJbv6ZxYz58wef0esl4Mv828w1ZKpAshw/uFWVDUcIB9KKFeFKoxS3cHY07FFgtTRZ1g==", + "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==", + "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==", + "dev": true, + "dependencies": { + "@types/d3-interpolate": "*", + "@types/d3-selection": "*" + } + }, "node_modules/@types/estree": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", "dev": true }, + "node_modules/@types/geojson": { + "version": "7946.0.10", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz", + "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==", + "dev": true + }, + "node_modules/@xyflow/svelte": { + "version": "0.0.12", + "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.12.tgz", + "integrity": "sha512-BXwOauzjInjPBdJb1GaKVCYIxyznQKzuEltnPb3i3/EO9GJHx1xcD/c8aBUBBnAG7EWBKtuiyDGk/EBW8MEmsg==", + "dev": true, + "dependencies": { + "@svelte-put/shortcut": "^3.0.0", + "@xyflow/system": "0.0.2", + "classcat": "^5.0.4" + }, + "peerDependencies": { + "svelte": "^3.0.0 || ^4.0.0" + } + }, + "node_modules/@xyflow/system": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.2.tgz", + "integrity": "sha512-xtDf35E4Bwmt9IutmhNLna/vMNN3uRA/kwYUYTAifnWSCUaKENBqMOX4xAGNljBJX1yjo7FNlMRgn347raN69Q==", + "dev": true, + "dependencies": { + "@types/d3": "^7.4.0", + "@types/d3-drag": "^3.0.1", + "@types/d3-selection": "^3.0.3", + "@types/d3-zoom": "^3.0.1", + "d3-drag": "^3.0.0", + "d3-selection": "^3.0.0", + "d3-zoom": "^3.0.0" + } + }, "node_modules/acorn": { "version": "8.10.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz", @@ -541,6 +836,12 @@ "dequal": "^2.0.3" } }, + "node_modules/classcat": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/classcat/-/classcat-5.0.4.tgz", + "integrity": "sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==", + "dev": true + }, "node_modules/code-red": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", @@ -567,6 +868,111 @@ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" } }, + "node_modules/d3-color": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", + "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-dispatch": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz", + "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-drag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz", + "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==", + "dev": true, + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-selection": "3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-ease": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", + "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-interpolate": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", + "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", + "dev": true, + "dependencies": { + "d3-color": "1 - 3" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-selection": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz", + "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-timer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", + "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", + "dev": true, + "engines": { + "node": ">=12" + } + }, + "node_modules/d3-transition": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz", + "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==", + "dev": true, + "dependencies": { + "d3-color": "1 - 3", + "d3-dispatch": "1 - 3", + "d3-ease": "1 - 3", + "d3-interpolate": "1 - 3", + "d3-timer": "1 - 3" + }, + "engines": { + "node": ">=12" + }, + "peerDependencies": { + "d3-selection": "2 - 3" + } + }, + "node_modules/d3-zoom": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz", + "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==", + "dev": true, + "dependencies": { + "d3-dispatch": "1 - 3", + "d3-drag": "2 - 3", + "d3-interpolate": "1 - 3", + "d3-selection": "2 - 3", + "d3-transition": "2 - 3" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/package.json b/package.json index 64166c0..6ad48bb 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^2.4.2", + "@xyflow/svelte": "^0.0.12", "svelte": "^4.0.5", "svelte-dnd-action": "^0.9.25", "svelvet": "^8.1.0", diff --git a/src/App.svelte b/src/App.svelte index 447d86a..caa3397 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,6 +1,6 @@ - - {#each $inputs as inp, index} - -
-
- {inp.name} -
- -
-
- -
v
- - -
a
- -
- - {/each} - {#each $filters as f, index} - -
-
- {f.name} -
- -
-
- {#each countCons(f).in as inp, index} - -
{inp}
- - {/each} -
-
- {#each countCons(f).out as out} - -
{out}
- - {/each} -
- - {/each} - - -
-
- {$output} -
- -
-
- -
v
- - -
a
- -
- - - - -
- {#each edges as e} -

- {e[0]} =======> {e[1]} -

- {/each} +
+ + + +
- +
+ {JSON.stringify(command)} +
diff --git a/src/Graph_old.svelte b/src/Graph_old.svelte new file mode 100644 index 0000000..5c16521 --- /dev/null +++ b/src/Graph_old.svelte @@ -0,0 +1,201 @@ + + + + {#each $inputs as inp, index} + +
+
+ {inp.name} +
+ +
+
+ +
v
+ + +
a
+ +
+ + {/each} + + {#each $filters as f, index} + +
+
+ {f.name} +
+ +
+
+ {#each countCons(f).in as inp, index} + +
{inp}
+ + {/each} +
+
+ {#each countCons(f).out as out} + +
{out}
+ + {/each} +
+ + {/each} + + +
+
+ {$output} +
+ +
+
+ +
v
+ + +
a
+ +
+ + + + +
+ {#each edges as e} +

+ {e[0]} =======> {e[1]} +

+ {/each} +
+ + diff --git a/src/Input.svelte b/src/Input.svelte index cd3ca24..a355aa5 100644 --- a/src/Input.svelte +++ b/src/Input.svelte @@ -1,12 +1,11 @@ diff --git a/src/nodes/FilterNode.svelte b/src/nodes/FilterNode.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/nodes/InputNode.svelte b/src/nodes/InputNode.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/nodes/Node.svelte b/src/nodes/Node.svelte new file mode 100644 index 0000000..bdee8b1 --- /dev/null +++ b/src/nodes/Node.svelte @@ -0,0 +1,23 @@ + + +
+ {data.name} +
+{#each data.inputs as inp, index} + +{/each} +{#each data.outputs as out, index} + +{/each} + + + + + + + + diff --git a/src/nodes/OutputNode.svelte b/src/nodes/OutputNode.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/stores.js b/src/stores.js index f1538d1..da485e0 100644 --- a/src/stores.js +++ b/src/stores.js @@ -1,55 +1,148 @@ import { v4 as uuidv4 } from "uuid"; -import { writable } from 'svelte/store'; +import { writable, derived, get } from "svelte/store"; -export const inputs = writable([{name: "punch.mp4", id: uuidv4()}]); -export const output = writable("out.mp4"); -export const filters = writable([]); +// export const inputs = writable([]); +// export const output = writable("out.mp4"); +// export const filters = writable([]); +export const nodes = writable([]); +export const edges = writable([]); -export function addFilter(f) { - const newFilter = { ...f, filterId: f.id, id: uuidv4() }; - if (f.params) { - newFilter.params = f.params.map((p) => { - p.value = null; - if (p.default != null) p.value = p.default; - return p; - }); - } - filters.update((filts) => { - filts.push(newFilter) - return filts; - }) +addNode({ name: "punch.mp4" }, "input"); +addNode({ name: "out.mp4" }, "output"); + +function makeFilterArgs(f) { + let fCommand = f.name; + if (f.params && f.params.length > 0) { + let params = f.params + .map((p) => { + if (p.value === "" || p.value === null || p.value === p.default) return null; + return `${p.name}=${p.value}`; + }) + .filter((p) => p !== null) + .join(":"); + if (params) fCommand += "=" + params; + } + return fCommand; } -export function removeFilter(id) { - filters.update((filts) => { - const index = filts.findIndex((f) => f.id === id); - filts.splice(index, 1); - return filts; - }); +export const command = derived(edges, ($edges) => { + console.log($edges); + return $edges; +}); + +export const previewCommand = derived(nodes, ($nodes) => { + const cInputs = $nodes + .filter((n) => n.nodeType === "input") + .map((i) => `-i ${i.data.name}`) + .join(" "); + + const cOutput = $nodes + .filter((n) => n.nodeType === "output") + .map((i) => `${i.data.name}`) + .join(" "); + + const cFilters = $nodes + .filter((n) => n.nodeType === "filter") + .map((n) => n.data) + .map(makeFilterArgs) + .join(","); + + let out = `ffmpeg ${cInputs}`; + + if (cFilters) out += ` -filter_complex "${cFilters}"`; + + out += ` ${cOutput}`; + return out; +}); + +export const inputs = derived(nodes, ($nodes) => { + return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data); +}); + +export const filters = derived(nodes, ($nodes) => { + return $nodes.filter((n) => n.nodeType === "filter").map((n) => n.data); +}); + +export const output = derived(nodes, ($nodes) => { + return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data); +}); + +export function addNode(data, type) { + let ins = []; + let outs = []; + + if (type === "input") { + outs = ["v", "a"]; + } else if (type === "output") { + ins = ["v", "a"]; + } else if (type === "filter") { + const [_ins, _outs] = data.type.split("->"); + ins = _ins.toLowerCase().split(""); + outs = _outs.toLowerCase().split(""); + if (data.params) { + data.params = data.params.map((p) => { + p.value = null; + if (p.default != null) p.value = p.default; + return p; + }); + } + } + + let x = 0; + let y = 0; + + const w = 100; + const h = 50; + const margin = 10; + + const 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; + + let node = { + id: uuidv4(), + type: "ffmpeg", + data: data, + nodeType: type, + position: { x, y }, + }; + + nodes.update((n) => { + n.push(node); + return n; + }); + + edges.update((_edges) => { + console.log('EXISTING', existing); + const target = existing[existing.length -2]; + if (!target) return _edges; + const newEdge = { + id: uuidv4(), + type: "default", + source: node.id, + target: target.id, + }; + console.log("NEW EDGE", newEdge); + _edges.push(newEdge); + return _edges; + }); } -export function addOutput(f) { - -} - -export function removeOutput(f) { - -} - -export function addInput(f) { - const newInput = {name: f, id: uuidv4()} - inputs.update((inps) => { - inps.push(newInput); - return inps; - }); - -} - -export function removeInput(id) { - inputs.update((inps) => { - const index = inps.findIndex((f) => f.id === id); - inps.splice(index, 1); - return inps; - }); - +export function removeNode(id) { + nodes.update((_nodes) => { + const index = _nodes.findIndex((n) => n.id === id); + _nodes.splice(index, 1); + return _nodes; + }); }