Spaces:
Running
Running
File size: 2,197 Bytes
01f62f3 9b3539b 4767f72 01f62f3 9b3539b fc7156e 01f62f3 9b3539b 01f62f3 9b3539b 01f62f3 4767f72 01f62f3 4767f72 01f62f3 fc7156e 9b3539b fc7156e 9b3539b 01f62f3 fc7156e 01f62f3 fc7156e 9b3539b 01f62f3 fc7156e 01f62f3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<script lang="ts">
import { writable } from 'svelte/store';
import {
SvelteFlow,
Controls,
Background,
MiniMap,
MarkerType,
Position,
type Node,
type Edge,
} from '@xyflow/svelte';
import LynxKiteNode from './LynxKiteNode.svelte';
import NodeSearch from './NodeSearch.svelte';
import '@xyflow/svelte/dist/style.css';
const nodeTypes: NodeTypes = {
basic: LynxKiteNode,
};
const nodes = writable<Node[]>([
{
id: '1',
type: 'basic',
data: { title: 'Compute PageRank', params: { damping: 0.85, iterations: 3 } },
position: { x: 0, y: 0 },
sourcePosition: Position.Right,
targetPosition: Position.Left,
},
{
id: '3',
type: 'basic',
data: { title: 'Import Parquet', params: { filename: '/tmp/x.parquet' } },
position: { x: -300, y: 0 },
sourcePosition: Position.Right,
},
]);
const edges = writable<Edge[]>([
{
id: '3-1',
source: '3',
target: '1',
markerEnd: {
type: MarkerType.ArrowClosed,
},
},
]);
function onPaneContextMenu({ detail: { event } }) {
event.preventDefault();
const width = 500;
const height = 200;
showNodeSearch = {
top: event.clientY < height - 200 ? event.clientY : undefined,
left: event.clientX < width - 200 ? event.clientX : undefined,
right: event.clientX >= width - 200 ? width - event.clientX : undefined,
bottom: event.clientY >= height - 200 ? height - event.clientY : undefined
};
showNodeSearch = {
top: event.clientY,
left: event.clientX - 150,
};
}
function addNode(node: Node) {
nodes.update((n) => [...n, node]);
}
let showNodeSearch;
</script>
<div style:height="100vh">
<SvelteFlow {nodes} {edges} {nodeTypes} fitView
on:nodecontextmenu={onPaneContextMenu}
on:panecontextmenu={onPaneContextMenu}
on:paneclick={() => showNodeSearch = undefined}
on:nodeclick={() => showNodeSearch = undefined}
>
<Background />
<Controls />
<Background />
<MiniMap />
{#if showNodeSearch}<NodeSearch on:add={addNode} pos={showNodeSearch} />{/if}
</SvelteFlow>
</div>
|