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

update svelte flow and fix node draggable

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package-lock.json generated
View File

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

2
package.json
View File

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

13
src/Graph.svelte
View File

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

8
src/Node.svelte
View File

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