alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(react/svelte): simplify ssr usage

Browse Source
This commit is contained in:
moklick
2023-10-23 16:37:28 +02:00
parent f42f6314e2
commit 6de9bbc916
6 changed files with 70 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte
+58 -20
View File
@@ -1,35 +1,73 @@
<script lang="ts">
import { writable } from 'svelte/store';
import { SvelteFlow, Controls, Background, BackgroundVariant, Position } from '@xyflow/svelte';
import { SvelteFlow, Controls, Background, BackgroundVariant, Position, type Node, type Edge } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
const nodeDefaults = {
sourcePosition: Position.Right,
targetPosition: Position.Left,
size: {
width: 100,
height: 40,
},
handles: [
{ type: 'source', x: 100, y: 20, position: Position.Right, width: 1, height: 1 },
{ type: 'target', x: 0, y: 20, position: Position.Left, width: 1, height: 1 },
],
};
const nodes = writable([
const nodes = writable<Node[]>([
{
id: '0',
position: { x: 0, y: 150 },
data: { label: 'Node 0' },
...nodeDefaults,
sourcePosition: Position.Right,
targetPosition: Position.Left,
size: {
width: 100,
height: 40,
},
handles: [
{ type: 'source', x: 100, y: 20, position: Position.Right },
{ type: 'target', x: 0, y: 20, position: Position.Left },
],
},
{
id: 'A',
position: { x: 250, y: 0 },
data: { label: 'A' },
sourcePosition: Position.Right,
targetPosition: Position.Left,
size: {
width: 100,
height: 40,
},
handles: [
{ type: 'source', x: 100, y: 20, position: Position.Right },
{ type: 'target', x: 0, y: 20, position: Position.Left },
],
},
{
id: 'B',
position: { x: 250, y: 150 },
data: { label: 'B' },
sourcePosition: Position.Right,
targetPosition: Position.Left,
size: {
width: 100,
height: 40,
},
handles: [
{ type: 'source', x: 100, y: 20, position: Position.Right },
{ type: 'target', x: 0, y: 20, position: Position.Left },
],
},
{
id: 'C',
position: { x: 250, y: 300 },
data: { label: 'C' },
sourcePosition: Position.Right,
targetPosition: Position.Left,
size: {
width: 100,
height: 40,
},
handles: [
{ type: 'source', x: 100, y: 20, position: Position.Right },
{ type: 'target', x: 0, y: 20, position: Position.Left },
],
},
{ id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
{ id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
{ id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults },
]);
const edges = writable([
const edges = writable<Edge[]>([
{ id: '0A', source: '0', target: 'A', animated: true },
{ id: '0B', source: '0', target: 'B', animated: true },
{ id: '0C', source: '0', target: 'C', animated: true },