refactor(svelte): simplify nodes and edges store handling
This commit is contained in:
moklick
@@ -2,13 +2,10 @@
|
||||
import type { ChangeEventHandler } from 'svelte/elements';
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type NodeTypes,
|
||||
Position
|
||||
} from '../../lib/index';
|
||||
@@ -23,7 +20,7 @@
|
||||
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
|
||||
nodes.update((nds) =>
|
||||
nds.map((node) => {
|
||||
if (node.id !== '2') {
|
||||
if (node.type !== 'colorNode') {
|
||||
return node;
|
||||
}
|
||||
|
||||
@@ -42,7 +39,7 @@
|
||||
);
|
||||
};
|
||||
|
||||
const nodes = createNodes([
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
@@ -73,7 +70,7 @@
|
||||
},
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
const edges = writable([
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
@@ -94,23 +91,20 @@
|
||||
target: '4',
|
||||
animated: true,
|
||||
},
|
||||
], { animated: true });
|
||||
]);
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
{nodeTypes}
|
||||
style="--bgcolor: {$bgColor}"
|
||||
fitView
|
||||
>
|
||||
<SvelteFlow
|
||||
{nodeTypes}
|
||||
style="--bgcolor: {$bgColor}"
|
||||
fitView
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
|
||||
<style>
|
||||
:global(.svelte-flow) {
|
||||
|
||||
@@ -1,52 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
|
||||
import { SvelteFlowProvider } from '../../lib/index';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
|
||||
const nodes = createNodes(
|
||||
[
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input Node' },
|
||||
position: { x: 150, y: 5 }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'default',
|
||||
data: { label: 'Node' },
|
||||
position: { x: 0, y: 150 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'output',
|
||||
data: { label: 'Output Node' },
|
||||
position: { x: 300, y: 150 }
|
||||
}
|
||||
],
|
||||
{ origin: [0.5, 0.5] }
|
||||
);
|
||||
|
||||
const edges = createEdges([
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'Edge Text'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'smoothstep',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
{nodes}
|
||||
{edges}
|
||||
>
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
</SvelteFlowProvider>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
Controls,
|
||||
Background,
|
||||
@@ -9,6 +10,45 @@
|
||||
} from '../../lib/index';
|
||||
import Sidebar from './Sidebar.svelte';
|
||||
|
||||
const nodes = writable(
|
||||
[
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input Node' },
|
||||
position: { x: 150, y: 5 }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'default',
|
||||
data: { label: 'Node' },
|
||||
position: { x: 0, y: 150 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'output',
|
||||
data: { label: 'Output Node' },
|
||||
position: { x: 300, y: 150 }
|
||||
}
|
||||
]
|
||||
);
|
||||
|
||||
const edges = writable([
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'Edge Text'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'smoothstep',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]);
|
||||
|
||||
const svelteFlow = useSvelteFlow();
|
||||
|
||||
const onDragOver = (event: DragEvent) => {
|
||||
@@ -46,6 +86,8 @@
|
||||
|
||||
<main>
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
fitView
|
||||
on:dragover={onDragOver}
|
||||
on:drop={onDrop}
|
||||
|
||||
@@ -1,163 +1,153 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type NodeTypes,
|
||||
MarkerType
|
||||
} from '../../lib/index';
|
||||
|
||||
const nodes = createNodes([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input 1' },
|
||||
position: { x: 250, y: 0 },
|
||||
},
|
||||
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
|
||||
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
|
||||
{ id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
|
||||
{ id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
|
||||
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
|
||||
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
|
||||
{ id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
|
||||
{
|
||||
id: '6',
|
||||
type: 'output',
|
||||
data: { label: 'Output 6' },
|
||||
position: { x: 50, y: 550 },
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
type: 'output',
|
||||
data: { label: 'Output 7' },
|
||||
position: { x: 250, y: 550 },
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
type: 'output',
|
||||
data: { label: 'Output 8' },
|
||||
position: { x: 525, y: 600 },
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
type: 'output',
|
||||
data: { label: 'Output 9' },
|
||||
position: { x: 675, y: 500 },
|
||||
},
|
||||
]);
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input 1' },
|
||||
position: { x: 250, y: 0 },
|
||||
},
|
||||
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
|
||||
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
|
||||
{ id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
|
||||
{ id: '3', data: { label: 'Node 3' }, position: { x: 250, y: 200 } },
|
||||
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
|
||||
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
|
||||
{ id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
|
||||
{
|
||||
id: '6',
|
||||
type: 'output',
|
||||
data: { label: 'Output 6' },
|
||||
position: { x: 50, y: 550 },
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
type: 'output',
|
||||
data: { label: 'Output 7' },
|
||||
position: { x: 250, y: 550 },
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
type: 'output',
|
||||
data: { label: 'Output 8' },
|
||||
position: { x: 525, y: 600 },
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
type: 'output',
|
||||
data: { label: 'Output 9' },
|
||||
position: { x: 675, y: 500 },
|
||||
},
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'bezier edge (default)',
|
||||
},
|
||||
{
|
||||
id: 'e2-2a',
|
||||
source: '2',
|
||||
target: '2a',
|
||||
type: 'smoothstep',
|
||||
label: 'smoothstep edge',
|
||||
},
|
||||
{
|
||||
id: 'e2a-2b',
|
||||
source: '2a',
|
||||
target: '2b',
|
||||
type: 'simplebezier',
|
||||
label: 'simple bezier edge',
|
||||
},
|
||||
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
|
||||
{
|
||||
id: 'e3-4',
|
||||
source: '3',
|
||||
target: '4',
|
||||
type: 'straight',
|
||||
label: 'straight edge',
|
||||
},
|
||||
{
|
||||
id: 'e3-3a',
|
||||
source: '3',
|
||||
target: '3a',
|
||||
type: 'straight',
|
||||
label: 'label only edge',
|
||||
style: 'stroke: none',
|
||||
},
|
||||
{
|
||||
id: 'e3-5',
|
||||
source: '4',
|
||||
target: '5',
|
||||
animated: true,
|
||||
label: 'animated styled edge',
|
||||
style: 'stroke: red',
|
||||
},
|
||||
{
|
||||
id: 'e5-7',
|
||||
source: '5',
|
||||
target: '7',
|
||||
label: 'label with styled bg',
|
||||
labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
const edges = writable([
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'bezier edge (default)',
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'e5-8',
|
||||
source: '5',
|
||||
target: '8',
|
||||
data: { text: 'custom edge' },
|
||||
},
|
||||
{
|
||||
id: 'e5-9',
|
||||
source: '5',
|
||||
target: '9',
|
||||
data: { text: 'custom edge 2' },
|
||||
},
|
||||
{
|
||||
id: 'e5-6',
|
||||
source: '5',
|
||||
target: '6',
|
||||
label: 'hi',
|
||||
labelStyle: 'background: red; font-weight: 700; padding: 5px;',
|
||||
style: 'stroke: #ffcc0',
|
||||
markerEnd: {
|
||||
type: MarkerType.Arrow,
|
||||
color: '#FFCC00',
|
||||
markerUnits: 'userSpaceOnUse',
|
||||
width: 20,
|
||||
height: 20,
|
||||
strokeWidth: 2,
|
||||
{
|
||||
id: 'e2-2a',
|
||||
source: '2',
|
||||
target: '2a',
|
||||
type: 'smoothstep',
|
||||
label: 'smoothstep edge',
|
||||
},
|
||||
markerStart: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: '#FFCC00',
|
||||
orient: 'auto-start-reverse',
|
||||
markerUnits: 'userSpaceOnUse',
|
||||
width: 20,
|
||||
height: 20,
|
||||
{
|
||||
id: 'e2a-2b',
|
||||
source: '2a',
|
||||
target: '2b',
|
||||
type: 'simplebezier',
|
||||
label: 'simple bezier edge',
|
||||
},
|
||||
},
|
||||
]);
|
||||
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
|
||||
{
|
||||
id: 'e3-4',
|
||||
source: '3',
|
||||
target: '4',
|
||||
type: 'straight',
|
||||
label: 'straight edge',
|
||||
},
|
||||
{
|
||||
id: 'e3-3a',
|
||||
source: '3',
|
||||
target: '3a',
|
||||
type: 'straight',
|
||||
label: 'label only edge',
|
||||
style: 'stroke: none',
|
||||
},
|
||||
{
|
||||
id: 'e3-5',
|
||||
source: '4',
|
||||
target: '5',
|
||||
animated: true,
|
||||
label: 'animated styled edge',
|
||||
style: 'stroke: red',
|
||||
},
|
||||
{
|
||||
id: 'e5-7',
|
||||
source: '5',
|
||||
target: '7',
|
||||
label: 'label with styled bg',
|
||||
labelStyle: 'background: #FFCC00; color: #fff; opacity: 0.7',
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'e5-8',
|
||||
source: '5',
|
||||
target: '8',
|
||||
data: { text: 'custom edge' },
|
||||
},
|
||||
{
|
||||
id: 'e5-9',
|
||||
source: '5',
|
||||
target: '9',
|
||||
data: { text: 'custom edge 2' },
|
||||
},
|
||||
{
|
||||
id: 'e5-6',
|
||||
source: '5',
|
||||
target: '6',
|
||||
label: 'hi',
|
||||
labelStyle: 'background: red; font-weight: 700; padding: 5px;',
|
||||
style: 'stroke: #ffcc0',
|
||||
markerEnd: {
|
||||
type: MarkerType.Arrow,
|
||||
color: '#FFCC00',
|
||||
markerUnits: 'userSpaceOnUse',
|
||||
width: 20,
|
||||
height: 20,
|
||||
strokeWidth: 2,
|
||||
},
|
||||
markerStart: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: '#FFCC00',
|
||||
orient: 'auto-start-reverse',
|
||||
markerUnits: 'userSpaceOnUse',
|
||||
width: 20,
|
||||
height: 20,
|
||||
},
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
fitView
|
||||
>
|
||||
<SvelteFlow
|
||||
fitView
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Panel,
|
||||
createNodes,
|
||||
createEdges,
|
||||
PanOnScrollMode,
|
||||
MiniMap,
|
||||
type OnMoveEnd,
|
||||
@@ -12,7 +10,7 @@
|
||||
type Edge,
|
||||
} from '../../lib/index';
|
||||
|
||||
const nodes = createNodes([
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
@@ -24,7 +22,7 @@
|
||||
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
const edges = writable([
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true },
|
||||
{ id: 'e1-3', source: '1', target: '3' },
|
||||
]);
|
||||
@@ -53,163 +51,159 @@
|
||||
let captureElementClick = false;
|
||||
</script>
|
||||
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
elementsSelectable={isSelectable}
|
||||
nodesConnectable={isConnectable}
|
||||
nodesDraggable={isDraggable}
|
||||
zoomOnScroll={zoomOnScroll}
|
||||
zoomOnPinch={zoomOnPinch}
|
||||
panOnScroll={panOnScroll}
|
||||
panOnScrollMode={panOnScrollMode}
|
||||
zoomOnDoubleClick={zoomOnDoubleClick}
|
||||
panOnDrag={panOnDrag}
|
||||
onMoveEnd={onMoveEnd}
|
||||
>
|
||||
<SvelteFlow
|
||||
elementsSelectable={isSelectable}
|
||||
nodesConnectable={isConnectable}
|
||||
nodesDraggable={isDraggable}
|
||||
zoomOnScroll={zoomOnScroll}
|
||||
zoomOnPinch={zoomOnPinch}
|
||||
panOnScroll={panOnScroll}
|
||||
panOnScrollMode={panOnScrollMode}
|
||||
zoomOnDoubleClick={zoomOnDoubleClick}
|
||||
panOnDrag={panOnDrag}
|
||||
onMoveEnd={onMoveEnd}
|
||||
>
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
<MiniMap />
|
||||
<Controls />
|
||||
|
||||
<Panel position="top-right">
|
||||
<div>
|
||||
<label for="draggable">
|
||||
nodesDraggable
|
||||
<input
|
||||
id="draggable"
|
||||
type="checkbox"
|
||||
bind:checked={isDraggable}
|
||||
class="react-flow__draggable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="connectable">
|
||||
nodesConnectable
|
||||
<input
|
||||
id="connectable"
|
||||
type="checkbox"
|
||||
bind:checked={isConnectable}
|
||||
class="react-flow__connectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="selectable">
|
||||
elementsSelectable
|
||||
<input
|
||||
id="selectable"
|
||||
type="checkbox"
|
||||
bind:checked={isSelectable}
|
||||
class="react-flow__selectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonscroll">
|
||||
zoomOnScroll
|
||||
<input
|
||||
id="zoomonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnScroll}
|
||||
class="react-flow__zoomonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonpinch">
|
||||
zoomOnPinch
|
||||
<input
|
||||
id="zoomonpinch"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnPinch}
|
||||
class="react-flow__zoomonpinch"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscroll">
|
||||
panOnScroll
|
||||
<input
|
||||
id="panonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={panOnScroll}
|
||||
class="react-flow__panonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscrollmode">
|
||||
panOnScrollMode
|
||||
<select
|
||||
id="panonscrollmode"
|
||||
bind:value={panOnScrollMode}
|
||||
on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
|
||||
class="react-flow__panonscrollmode"
|
||||
>
|
||||
<option value="free">free</option>
|
||||
<option value="horizontal">horizontal</option>
|
||||
<option value="vertical">vertical</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomondbl">
|
||||
zoomOnDoubleClick
|
||||
<input
|
||||
id="zoomondbl"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnDoubleClick}
|
||||
class="react-flow__zoomondbl"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panondrag">
|
||||
panOnDrag
|
||||
<input
|
||||
id="panondrag"
|
||||
type="checkbox"
|
||||
bind:checked={panOnDrag}
|
||||
class="react-flow__panondrag"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompaneclick">
|
||||
capture onPaneClick
|
||||
<input
|
||||
id="capturezoompaneclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomClick}
|
||||
class="react-flow__capturezoompaneclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompanescroll">
|
||||
capture onPaneScroll
|
||||
<input
|
||||
id="capturezoompanescroll"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomScroll}
|
||||
class="react-flow__capturezoompanescroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="captureelementclick">
|
||||
capture onElementClick
|
||||
<input
|
||||
id="captureelementclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureElementClick}
|
||||
class="react-flow__captureelementclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Panel>
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Panel position="top-right">
|
||||
<div>
|
||||
<label for="draggable">
|
||||
nodesDraggable
|
||||
<input
|
||||
id="draggable"
|
||||
type="checkbox"
|
||||
bind:checked={isDraggable}
|
||||
class="react-flow__draggable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="connectable">
|
||||
nodesConnectable
|
||||
<input
|
||||
id="connectable"
|
||||
type="checkbox"
|
||||
bind:checked={isConnectable}
|
||||
class="react-flow__connectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="selectable">
|
||||
elementsSelectable
|
||||
<input
|
||||
id="selectable"
|
||||
type="checkbox"
|
||||
bind:checked={isSelectable}
|
||||
class="react-flow__selectable"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonscroll">
|
||||
zoomOnScroll
|
||||
<input
|
||||
id="zoomonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnScroll}
|
||||
class="react-flow__zoomonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomonpinch">
|
||||
zoomOnPinch
|
||||
<input
|
||||
id="zoomonpinch"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnPinch}
|
||||
class="react-flow__zoomonpinch"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscroll">
|
||||
panOnScroll
|
||||
<input
|
||||
id="panonscroll"
|
||||
type="checkbox"
|
||||
bind:checked={panOnScroll}
|
||||
class="react-flow__panonscroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panonscrollmode">
|
||||
panOnScrollMode
|
||||
<select
|
||||
id="panonscrollmode"
|
||||
bind:value={panOnScrollMode}
|
||||
on:change={(event) => { panOnScrollMode = PanOnScrollMode.Free }}
|
||||
class="react-flow__panonscrollmode"
|
||||
>
|
||||
<option value="free">free</option>
|
||||
<option value="horizontal">horizontal</option>
|
||||
<option value="vertical">vertical</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="zoomondbl">
|
||||
zoomOnDoubleClick
|
||||
<input
|
||||
id="zoomondbl"
|
||||
type="checkbox"
|
||||
bind:checked={zoomOnDoubleClick}
|
||||
class="react-flow__zoomondbl"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="panondrag">
|
||||
panOnDrag
|
||||
<input
|
||||
id="panondrag"
|
||||
type="checkbox"
|
||||
bind:checked={panOnDrag}
|
||||
class="react-flow__panondrag"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompaneclick">
|
||||
capture onPaneClick
|
||||
<input
|
||||
id="capturezoompaneclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomClick}
|
||||
class="react-flow__capturezoompaneclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="capturezoompanescroll">
|
||||
capture onPaneScroll
|
||||
<input
|
||||
id="capturezoompanescroll"
|
||||
type="checkbox"
|
||||
bind:checked={captureZoomScroll}
|
||||
class="react-flow__capturezoompanescroll"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label for="captureelementclick">
|
||||
capture onElementClick
|
||||
<input
|
||||
id="captureelementclick"
|
||||
type="checkbox"
|
||||
bind:checked={captureElementClick}
|
||||
class="react-flow__captureelementclick"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</Panel>
|
||||
</SvelteFlow>
|
||||
|
||||
@@ -1,15 +1,14 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
Panel,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type NodeTypes,
|
||||
SelectionMode,
|
||||
type NodeTypes,
|
||||
type EdgeTypes
|
||||
} from '../../lib/index';
|
||||
import { CustomNode } from './CustomNode';
|
||||
@@ -23,7 +22,7 @@
|
||||
custom: CustomEdge
|
||||
};
|
||||
|
||||
const nodes = createNodes([
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
@@ -70,9 +69,9 @@
|
||||
data: { label: 'Custom Node' },
|
||||
position: { x: 150, y: 300 }
|
||||
}
|
||||
], { style: 'width: 125px;' });
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
const edges = writable([
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
@@ -93,7 +92,7 @@
|
||||
source: '2',
|
||||
target: '4',
|
||||
}
|
||||
], { animated: true });
|
||||
]);
|
||||
|
||||
function updateNode() {
|
||||
nodes.update(nds => nds.map(n => {
|
||||
@@ -113,37 +112,34 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
{nodeTypes}
|
||||
{edgeTypes}
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
selectionMode={SelectionMode.Full}
|
||||
initialViewport={{ x: 100, y: 100, zoom: 2 }}
|
||||
snapGrid={[25, 25]}
|
||||
on:node:click={(event) => console.log('on node click', event)}
|
||||
on:node:mouseenter={(event) => console.log('on node enter', event)}
|
||||
on:node:mouseleave={(event) => console.log('on node leave', event)}
|
||||
on:edge:click={(event) => console.log('edge click', event)}
|
||||
on:connect:start={(event) => console.log('on connect start', event)}
|
||||
on:connect={(event) => console.log('on connect', event)}
|
||||
on:connect:end={(event) => console.log('on connect end', event)}
|
||||
on:pane:click={(event) => console.log('on pane click', event)}
|
||||
on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
|
||||
>
|
||||
<SvelteFlow
|
||||
{nodeTypes}
|
||||
{edgeTypes}
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
selectionMode={SelectionMode.Full}
|
||||
initialViewport={{ x: 100, y: 100, zoom: 2 }}
|
||||
snapGrid={[25, 25]}
|
||||
on:node:click={(event) => console.log('on node click', event)}
|
||||
on:node:mouseenter={(event) => console.log('on node enter', event)}
|
||||
on:node:mouseleave={(event) => console.log('on node leave', event)}
|
||||
on:edge:click={(event) => console.log('edge click', event)}
|
||||
on:connect:start={(event) => console.log('on connect start', event)}
|
||||
on:connect={(event) => console.log('on connect', event)}
|
||||
on:connect:end={(event) => console.log('on connect end', event)}
|
||||
on:pane:click={(event) => console.log('on pane click', event)}
|
||||
on:pane:contextmenu={(event) => { event.preventDefault(); console.log('on pane contextmenu', event); }}
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
<Panel position="top-right">
|
||||
<button on:click={updateNode}>update node pos</button>
|
||||
</Panel>
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
<Panel position="top-right">
|
||||
<button on:click={updateNode}>update node pos</button>
|
||||
</Panel>
|
||||
</SvelteFlow>
|
||||
|
||||
<style>
|
||||
:global(.svelte-flow .custom-style) {
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type Node,
|
||||
type Edge
|
||||
} from '../../lib/index';
|
||||
@@ -45,20 +43,17 @@
|
||||
}
|
||||
}
|
||||
|
||||
const nodes = createNodes(nodeItems);
|
||||
const edges = createEdges(edgeItems, { animated: true });
|
||||
const nodes = writable(nodeItems);
|
||||
const edges = writable(edgeItems);
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
fitView
|
||||
minZoom={0.2}
|
||||
>
|
||||
<SvelteFlow
|
||||
fitView
|
||||
minZoom={0.2}
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
MiniMap,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type NodeTypes,
|
||||
} from '../../lib/index';
|
||||
import { DebugNode } from './DebugNode';
|
||||
@@ -15,7 +13,7 @@
|
||||
default: DebugNode,
|
||||
};
|
||||
|
||||
const nodes = createNodes([
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
@@ -92,7 +90,7 @@
|
||||
}
|
||||
]);
|
||||
|
||||
const edges = createEdges([
|
||||
const edges = writable([
|
||||
{
|
||||
id: 'e1-2',
|
||||
source: '1',
|
||||
@@ -111,28 +109,25 @@
|
||||
{ id: 'e4a-4b1', source: '4a', target: '4b1' },
|
||||
{ id: 'e4a-4b2', source: '4a', target: '4b2', zIndex: 100 },
|
||||
{ id: 'e4b1-4b2', source: '4b1', target: '4b2' },
|
||||
], { animated: true });
|
||||
]);
|
||||
|
||||
$: {
|
||||
console.log($nodes)
|
||||
}
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
{nodeTypes}
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
>
|
||||
<SvelteFlow
|
||||
{nodeTypes}
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
<MiniMap />
|
||||
</SvelteFlow>
|
||||
|
||||
<style>
|
||||
:global(.svelte-flow .svelte-flow__node.parent) {
|
||||
|
||||
@@ -1,52 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { createNodes, createEdges, SvelteFlowProvider } from '../../lib/index';
|
||||
import { SvelteFlowProvider } from '../../lib/index';
|
||||
|
||||
import Flow from './Flow.svelte';
|
||||
|
||||
const nodes = createNodes(
|
||||
[
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input Node' },
|
||||
position: { x: 150, y: 5 }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'default',
|
||||
data: { label: 'Node' },
|
||||
position: { x: 0, y: 150 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'output',
|
||||
data: { label: 'Output Node' },
|
||||
position: { x: 300, y: 150 }
|
||||
}
|
||||
],
|
||||
{ origin: [0.5, 0.5] }
|
||||
);
|
||||
|
||||
const edges = createEdges([
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'Edge Text'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'smoothstep',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
{nodes}
|
||||
{edges}
|
||||
>
|
||||
<SvelteFlowProvider>
|
||||
<Flow />
|
||||
</SvelteFlowProvider>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
import SvelteFlow, {
|
||||
Controls,
|
||||
Background,
|
||||
@@ -6,10 +7,49 @@
|
||||
MiniMap,
|
||||
} from '../../lib/index';
|
||||
import Sidebar from './Sidebar.svelte';
|
||||
|
||||
const nodes = writable([
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Input Node' },
|
||||
position: { x: 150, y: 5 }
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'default',
|
||||
data: { label: 'Node' },
|
||||
position: { x: 0, y: 150 }
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'output',
|
||||
data: { label: 'Output Node' },
|
||||
position: { x: 300, y: 150 }
|
||||
}
|
||||
]);
|
||||
|
||||
const edges = writable([
|
||||
{
|
||||
id: '1-2',
|
||||
type: 'default',
|
||||
source: '1',
|
||||
target: '2',
|
||||
label: 'Edge Text'
|
||||
},
|
||||
{
|
||||
id: '1-3',
|
||||
type: 'smoothstep',
|
||||
source: '1',
|
||||
target: '3'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
fitView
|
||||
>
|
||||
<Controls />
|
||||
|
||||
@@ -1,44 +1,36 @@
|
||||
<script lang="ts">
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
import SvelteFlow, {
|
||||
SvelteFlowProvider,
|
||||
Controls,
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
createNodes,
|
||||
createEdges,
|
||||
type IsValidConnection
|
||||
} from '../../lib/index';
|
||||
import { Position } from '@xyflow/system';
|
||||
|
||||
const nodes = createNodes([
|
||||
const nodes = writable([
|
||||
{ id: '0', type: 'default', position: { x: 0, y: 150 }, data: { label: 'only connectable with B' } },
|
||||
{ id: 'A', type: 'default', position: { x: 250, y: 0 }, data: { label: 'A' } },
|
||||
{ id: 'B', type: 'default', position: { x: 250, y: 150 }, data: { label: 'B' } },
|
||||
{ id: 'C', type: 'default', position: { x: 250, y: 300 }, data: { label: 'C' } }
|
||||
], {
|
||||
sourcePosition: Position.Right,
|
||||
targetPosition: Position.Left
|
||||
});
|
||||
]);
|
||||
|
||||
const edges = createEdges([]);
|
||||
const edges = writable([]);
|
||||
|
||||
const isValidConnection: IsValidConnection = (connection) => connection.target === 'B'
|
||||
const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider
|
||||
<SvelteFlow
|
||||
{nodes}
|
||||
{edges}
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
isValidConnection={isValidConnection}
|
||||
>
|
||||
<SvelteFlow
|
||||
fitView
|
||||
minZoom={0.1}
|
||||
maxZoom={2.5}
|
||||
isValidConnection={isValidConnection}
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
</SvelteFlowProvider>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
|
||||
<style>
|
||||
:global(.svelte-flow__handle.connecting) {
|
||||
|
||||
Reference in New Issue
Block a user