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/app.html
-1
View File
@@ -2,7 +2,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<style> <style>
html, html,
packages/svelte/src/customnodes/Custom.svelte → packages/svelte/src/example-components/CustomNode/Custom.svelte
View File
packages/svelte/src/example-components/CustomNode/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as CustomNode } from './Custom.svelte';
packages/svelte/src/example-components/Header/Header.svelte
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
import { goto } from '$app/navigation';
const routes = [
'overview',
'stress'
];
const onChange = (event: Event) => {
const route = (event.target as HTMLSelectElement).value;
goto(`/${route}`);
};
</script>
<header>
<div class="logo">SvelteFlow</div>
<select on:change={onChange}>
{#each routes as route}
<option value={route}>{route}</option>
{/each}
</select>
</header>
<style>
header {
padding: 10px;
border-bottom: 1px solid #eee;
display: flex;
font-weight: 700;
align-items: center;
color: #111;
}
.logo {
margin-right: 1rem;
}
</style>
packages/svelte/src/example-components/Header/index.ts
+1
View File
@@ -0,0 +1 @@
export { default as Header } from './Header.svelte';
packages/svelte/src/lib/container/SvelteFlow/types.ts
+1 -9
View File
@@ -6,14 +6,7 @@ import type {
Viewport Viewport
} from '@reactflow/system'; } from '@reactflow/system';
import type { import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes } from '$lib/types';
Edge,
Node,
NodeTypes,
KeyDefinition,
EdgeTypes,
DefaultEdgeOptions
} from '$lib/types';
import type { Writable } from 'svelte/store'; import type { Writable } from 'svelte/store';
import type { createNodes } from '$lib/utils'; import type { createNodes } from '$lib/utils';
@@ -31,7 +24,6 @@ export type SvelteFlowProps = {
minZoom?: number; minZoom?: number;
maxZoom?: number; maxZoom?: number;
initialViewport?: Viewport; initialViewport?: Viewport;
defaultEdgeOptions?: DefaultEdgeOptions;
connectionRadius?: number; connectionRadius?: number;
class?: string; class?: string;
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"> <div>this redirects to /overview</div>
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>
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>
packages/svelte/static/favicon.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB