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

update svelte flow and fix node draggable

Browse Source
This commit is contained in:
Sam Lavigne
2023-08-29 13:44:47 -04:00
parent 297e8fdfed
commit a7da696e51
4 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

@ -14,7 +14,7 @@
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.2", "@sveltejs/vite-plugin-svelte": "^2.4.2",
"@xyflow/svelte": "^0.0.12", "@xyflow/svelte": "^0.0.17",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"vite": "^4.4.5", "vite": "^4.4.5",
@ -583,9 +583,9 @@
} }
}, },
"node_modules/@types/d3-array": { "node_modules/@types/d3-array": {
"version": "3.0.6", "version": "3.0.7",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.6.tgz", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.7.tgz",
"integrity": "sha512-NHkizg870sKYQn45oZT5ItoHqcgRgJD7KAiWZp4Udc6YdrFH2W0tZ2vv4shRHP+SXHoJ1G8B4I1GWb5oQSGypA==", "integrity": "sha512-4/Q0FckQ8TBjsB0VdGFemJOG8BLXUB2KKlL0VmZ+eOYeOnTb/wDRQqYWpBmQ6IlvWkXwkYiot+n9Px2aTJ7zGQ==",
"dev": true "dev": true
}, },
"node_modules/@types/d3-axis": { "node_modules/@types/d3-axis": {
@ -884,13 +884,13 @@
} }
}, },
"node_modules/@xyflow/svelte": { "node_modules/@xyflow/svelte": {
"version": "0.0.12", "version": "0.0.17",
"resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.12.tgz", "resolved": "https://registry.npmjs.org/@xyflow/svelte/-/svelte-0.0.17.tgz",
"integrity": "sha512-BXwOauzjInjPBdJb1GaKVCYIxyznQKzuEltnPb3i3/EO9GJHx1xcD/c8aBUBBnAG7EWBKtuiyDGk/EBW8MEmsg==", "integrity": "sha512-aD5o21wQt8iKgRznMNJVODd/U40oOiaIJie1niTQ5Tj+/TPZTpyChoKiH/VOqrI4tJlczCh9360uZo7sX8bQyg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@svelte-put/shortcut": "^3.0.0", "@svelte-put/shortcut": "^3.0.0",
"@xyflow/system": "0.0.2", "@xyflow/system": "0.0.4",
"classcat": "^5.0.4" "classcat": "^5.0.4"
}, },
"peerDependencies": { "peerDependencies": {
@ -898,9 +898,9 @@
} }
}, },
"node_modules/@xyflow/system": { "node_modules/@xyflow/system": {
"version": "0.0.2", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.2.tgz", "resolved": "https://registry.npmjs.org/@xyflow/system/-/system-0.0.4.tgz",
"integrity": "sha512-xtDf35E4Bwmt9IutmhNLna/vMNN3uRA/kwYUYTAifnWSCUaKENBqMOX4xAGNljBJX1yjo7FNlMRgn347raN69Q==", "integrity": "sha512-tFFu0ZYVdjL/CQKtY9nDrcb02H5p7SlzvEj7EXnTkmpahNDfnSpaM/h5466DZylkwLzwsMaPs9u2pjPcyLI93g==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/d3": "^7.4.0", "@types/d3": "^7.4.0",

2
package.json
View File

@ -11,7 +11,7 @@
}, },
"devDependencies": { "devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.2", "@sveltejs/vite-plugin-svelte": "^2.4.2",
"@xyflow/svelte": "^0.0.12", "@xyflow/svelte": "^0.0.17",
"svelte": "^4.0.5", "svelte": "^4.0.5",
"uuid": "^9.0.0", "uuid": "^9.0.0",
"vite": "^4.4.5", "vite": "^4.4.5",

13
src/Graph.svelte
View File

@ -7,6 +7,7 @@
Background, Background,
BackgroundVariant, BackgroundVariant,
} from "@xyflow/svelte"; } from "@xyflow/svelte";
import '@xyflow/svelte/dist/style.css';
import Node from "./Node.svelte"; import Node from "./Node.svelte";
import FitComp from "./FitComp.svelte"; import FitComp from "./FitComp.svelte";
import ButtonEdge from "./ButtonEdge.svelte"; import ButtonEdge from "./ButtonEdge.svelte";
@ -46,12 +47,14 @@
<div class="flow"> <div class="flow">
<div style="height: 100%; width: 100%"> <div style="height: 100%; width: 100%">
<SvelteFlow <SvelteFlow
nodesConnectable={!auto} nodesDraggable={!$auto}
panOnDrag={!auto} nodesConnectable={!$auto}
edgesUpdatable={!auto} panOnDrag={!$auto}
edgesUpdatable={!$auto}
connectOnClick={true} connectOnClick={true}
nodesFocusable={!auto} nodesFocusable={!$auto}
edgesFocusable={!auto} edgesFocusable={!$auto}
zoomOnScroll={!$auto}
deleteKey={0} deleteKey={0}
on:nodeclick={onClick} on:nodeclick={onClick}
{nodeTypes} {nodeTypes}

8
src/Node.svelte
View File

@ -53,7 +53,7 @@
position={Position.Left} position={Position.Left}
id={inp + "_" + index} id={inp + "_" + index}
class="handle {inp}" class="handle {inp}"
style="top: {index * 12 + 4}px; left: -8px;">{inp}</Handle style="top: {index * 12 + 4}px; left: -13px;">{inp}</Handle
> >
{/each} {/each}
{#each data.outputs as out, index} {#each data.outputs as out, index}
@ -62,17 +62,20 @@
id={out + "_" + index} id={out + "_" + index}
position={Position.Right} position={Position.Right}
class="handle {out}" class="handle {out}"
style="top: {index * 12 + 4}px; right: -18px; left: auto;">{out}</Handle style="top: {index * 12 + 4}px; right: -13px; left: auto;">{out}</Handle
> >
{/each} {/each}
<style> <style>
:global(:root) { :global(:root) {
--edge-stroke-default: var(--b1) !important;
--edge-stroke: var(--b1) !important;
--edge-color: var(--b1) !important; --edge-color: var(--b1) !important;
--edge-color-selected: black; --edge-color-selected: black;
} }
:global(.svelte-flow__node) { :global(.svelte-flow__node) {
box-shadow: 2px 2px 0px var(--b2); box-shadow: 2px 2px 0px var(--b2);
background-color: #fff;
} }
:global(.svelte-flow__node.selected) { :global(.svelte-flow__node.selected) {
outline: 1px solid var(--b1) !important; outline: 1px solid var(--b1) !important;
@ -85,6 +88,7 @@
background-color: white !important; background-color: white !important;
font-size: 10px; font-size: 10px;
line-height: 6px; line-height: 6px;
text-align: center;
} }
:global(.handle.a) { :global(.handle.a) {
/* border: 1px solid var(--b2) !important; */ /* border: 1px solid var(--b2) !important; */