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

chore(examples): cleanup + routing

Browse Source
This commit is contained in:
moklick
2023-03-08 17:44:54 +01:00
parent 1153486ae2
commit 71cdc0ff02
12 changed files with 256 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/routes/+layout.server.ts
+8
View File
@@ -0,0 +1,8 @@
import { redirect } from '@sveltejs/kit';
/** @type {import('./$types').LayoutServerLoad} */
export function load({ route }) {
if (route.id === '/') {
throw redirect(307, '/overview');
}
}
packages/svelte/src/routes/+layout.svelte
+6
View File
@@ -0,0 +1,6 @@
<script lang="ts">
import { Header } from '../example-components/Header'
</script>
<Header />
<slot />
packages/svelte/src/routes/+page.svelte
+1 -175
View File
@@ -1,175 +1 @@
<script lang="ts">
import SvelteFlow, {
Controls,
Background,
BackgroundVariant,
Minimap,
Panel,
createNodes,
createEdges,
type NodeTypes
} from '../lib/index';
import CustomNode from '../customnodes/Custom.svelte';
const nodeTypes: NodeTypes = {
custom: CustomNode
};
// const yNodes = 10;
// const xNodes = 10;
// const nodes: Node[] = [];
// const edges: Edge[] = [];
// let source = null;
// for (let y = 0; y < yNodes; y++) {
// for (let x = 0; x < xNodes; x++) {
// const position = { x: x * 100, y: y * 50 };
// const id = `${x}-${y}`;
// const data = { label: `Node ${id}` };
// const node = {
// id,
// data,
// position,
// type: x === 0 ? 'custom' : 'default',
// };
// nodes.push(node);
// if (source) {
// const edge = {
// id: `${source.id}-${id}`,
// source: source.id,
// target: id,
// };
// edges.push(edge);
// }
// source = node;
// }
// }
let 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: 'A',
type: 'default',
data: { label: 'Styled with class' },
class: 'custom-style',
position: { x: 150, y: 150 },
},
{
id: 'D',
type: 'default',
data: { label: 'Not draggable' },
position: { x: 150, y: 200 },
draggable: false
},
{
id: '3',
type: 'output',
data: { label: 'Output Node' },
position: { x: 300, y: 150 }
},
{
id: 'B',
type: 'default',
data: { label: 'Styled with style' },
style: 'border: 2px solid #ff5050;',
position: { x: 450, y: 150 }
},
{
id: '4',
type: 'custom',
data: { label: 'Custom Node' },
position: { x: 150, y: 300 }
}
]);
let edges = createEdges([
{
id: '1-2',
type: 'default',
source: '1',
target: '2',
label: 'Edge Text'
},
{
id: '1-3',
type: 'smoothstep',
source: '1',
target: '3'
},
{
id: '2-4',
type: 'default',
source: '2',
target: '4',
}
], { animated: true });
function updateNode() {
nodes.update(nds => nds.map(n => {
if (n.id === '1') {
return {
...n,
position: { x: n.position.x + 20, y: n.position.y }
}
}
return n;
}));
}
$: {
console.log('nodes changed', $nodes)
}
</script>
<SvelteFlow
{nodes}
{edges}
{nodeTypes}
fitView
minZoom={0.1}
maxZoom={2.5}
initialViewport={{ x: 100, y: 100, zoom: 2 }}
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>
<style>
:root {
--node-width: 50;
}
:global(.svelte-flow .custom-style) {
background: #ff5050;
color: white;
}
</style>
<div>this redirects to /overview</div>
packages/svelte/src/routes/overview/+page.svelte
+141
View File
@@ -0,0 +1,141 @@
<script lang="ts">
import SvelteFlow, {
Controls,
Background,
BackgroundVariant,
Minimap,
Panel,
createNodes,
createEdges,
type NodeTypes
} from '../../lib/index';
import { CustomNode } from '../../example-components/CustomNode';
const nodeTypes: NodeTypes = {
custom: CustomNode
};
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: 'A',
type: 'default',
data: { label: 'Styled with class' },
class: 'custom-style',
position: { x: 150, y: 150 },
},
{
id: 'D',
type: 'default',
data: { label: 'Not draggable' },
position: { x: 150, y: 200 },
draggable: false
},
{
id: '3',
type: 'output',
data: { label: 'Output Node' },
position: { x: 300, y: 150 }
},
{
id: 'B',
type: 'default',
data: { label: 'Styled with style' },
style: 'border: 2px solid #ff5050;',
position: { x: 450, y: 150 }
},
{
id: '4',
type: 'custom',
data: { label: 'Custom Node' },
position: { x: 150, y: 300 }
}
]);
const edges = createEdges([
{
id: '1-2',
type: 'default',
source: '1',
target: '2',
label: 'Edge Text'
},
{
id: '1-3',
type: 'smoothstep',
source: '1',
target: '3'
},
{
id: '2-4',
type: 'default',
source: '2',
target: '4',
}
], { animated: true });
function updateNode() {
nodes.update(nds => nds.map(n => {
if (n.id === '1') {
return {
...n,
position: { x: n.position.x + 20, y: n.position.y }
}
}
return n;
}));
}
$: {
console.log('nodes changed', $nodes)
}
</script>
<SvelteFlow
{nodes}
{edges}
{nodeTypes}
fitView
minZoom={0.1}
maxZoom={2.5}
initialViewport={{ x: 100, y: 100, zoom: 2 }}
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>
<style>
:root {
--node-width: 50;
}
:global(.svelte-flow .custom-style) {
background: #ff5050;
color: white;
}
</style>
packages/svelte/src/routes/stress/+page.svelte
+60
View File
@@ -0,0 +1,60 @@
<script lang="ts">
import SvelteFlow, {
Controls,
Background,
BackgroundVariant,
Minimap,
createNodes,
createEdges,
type Node,
type Edge
} from '../../lib/index';
const yNodes = 10;
const xNodes = 10;
const nodeItems: Node[] = [];
const edgeItems: Edge[] = [];
let source = null;
for (let y = 0; y < yNodes; y++) {
for (let x = 0; x < xNodes; x++) {
const position = { x: x * 100, y: y * 50 };
const id = `${x}-${y}`;
const data = { label: `Node ${id}` };
const node = {
id,
data,
position,
type: 'default',
};
nodeItems.push(node);
if (source) {
const edge = {
id: `${source.id}-${id}`,
source: source.id,
target: id,
};
edgeItems.push(edge);
}
source = node;
}
}
const nodes = createNodes(nodeItems);
const edges = createEdges(edgeItems, { animated: true });
</script>
<SvelteFlow
{nodes}
{edges}
fitView
>
<Controls />
<Background variant={BackgroundVariant.Dots} />
<Minimap />
</SvelteFlow>