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

start to migrate

Browse Source
This commit is contained in:
peterkogo
2024-11-12 16:46:09 +01:00
parent 352122968f
commit 880ed8886b
13 changed files with 528 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+134 -117
View File
@@ -19,79 +19,93 @@
import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
import { useColorModeClass } from '$lib/hooks/useColorModeClass';
type $$Props = SvelteFlowProps;
let {
id = '1',
nodes,
edges,
fitView,
fitViewOptions,
minZoom,
maxZoom,
initialViewport,
viewport,
nodeTypes,
edgeTypes,
selectionKey,
selectionMode,
panActivationKey,
multiSelectionKey,
zoomActivationKey,
nodesDraggable,
nodesConnectable,
nodeDragThreshold,
elementsSelectable,
snapGrid,
deleteKey,
connectionRadius,
connectionLineType,
connectionMode = ConnectionMode.Strict,
connectionLineStyle = '',
connectionLineContainerStyle = '',
onMoveStart,
onMove,
onMoveEnd,
isValidConnection,
translateExtent,
nodeExtent,
onlyRenderVisibleElements,
panOnScrollMode = PanOnScrollMode.Free,
preventScrolling = true,
zoomOnScroll = true,
zoomOnDoubleClick = true,
zoomOnPinch = true,
panOnScroll = false,
panOnDrag = true,
selectionOnDrag,
autoPanOnConnect = true,
autoPanOnNodeDrag = true,
onerror,
ondelete,
onedgecreate,
attributionPosition,
proOptions,
defaultEdgeOptions,
width,
height,
colorMode = 'light',
onconnect,
onconnectstart,
onconnectend,
onbeforedelete,
oninit,
nodeOrigin,
paneClickDistance = 0,
nodeClickDistance = 0,
defaultMarkerColor = '#b1b1b7',
style,
class: className,
connectionLine,
children,
onnodeclick,
onnodecontextmenu,
onnodedrag,
onnodedragstart,
onnodedragstop,
onnodemouseenter,
onnodemousemove,
onnodemouseleave,
onselectionclick,
onselectioncontextmenu,
onedgeclick,
onedgecontextmenu,
onedgemouseenter,
onedgemouseleave,
...rest
}: SvelteFlowProps = $props();
export let id: $$Props['id'] = '1';
export let nodes: $$Props['nodes'];
export let edges: $$Props['edges'];
export let fitView: $$Props['fitView'] = undefined;
export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
export let minZoom: $$Props['minZoom'] = undefined;
export let maxZoom: $$Props['maxZoom'] = undefined;
export let initialViewport: $$Props['initialViewport'] = undefined;
export let viewport: $$Props['viewport'] = undefined;
export let nodeTypes: $$Props['nodeTypes'] = undefined;
export let edgeTypes: $$Props['edgeTypes'] = undefined;
export let selectionKey: $$Props['selectionKey'] = undefined;
export let selectionMode: $$Props['selectionMode'] = undefined;
export let panActivationKey: $$Props['panActivationKey'] = undefined;
export let multiSelectionKey: $$Props['multiSelectionKey'] = undefined;
export let zoomActivationKey: $$Props['zoomActivationKey'] = undefined;
export let nodesDraggable: $$Props['nodesDraggable'] = undefined;
export let nodesConnectable: $$Props['nodesConnectable'] = undefined;
export let nodeDragThreshold: $$Props['nodeDragThreshold'] = undefined;
export let elementsSelectable: $$Props['elementsSelectable'] = undefined;
export let snapGrid: $$Props['snapGrid'] = undefined;
export let deleteKey: $$Props['deleteKey'] = undefined;
export let connectionRadius: $$Props['connectionRadius'] = undefined;
export let connectionLineType: $$Props['connectionLineType'] = undefined;
export let connectionMode: $$Props['connectionMode'] = ConnectionMode.Strict;
export let connectionLineStyle: $$Props['connectionLineStyle'] = '';
export let connectionLineContainerStyle: $$Props['connectionLineContainerStyle'] = '';
export let onMoveStart: $$Props['onMoveStart'] = undefined;
export let onMove: $$Props['onMove'] = undefined;
export let onMoveEnd: $$Props['onMoveEnd'] = undefined;
export let isValidConnection: $$Props['isValidConnection'] = undefined;
export let translateExtent: $$Props['translateExtent'] = undefined;
export let nodeExtent: $$Props['nodeExtent'] = undefined;
export let onlyRenderVisibleElements: $$Props['onlyRenderVisibleElements'] = undefined;
export let panOnScrollMode: $$Props['panOnScrollMode'] = PanOnScrollMode.Free;
export let preventScrolling: $$Props['preventScrolling'] = true;
export let zoomOnScroll: $$Props['zoomOnScroll'] = true;
export let zoomOnDoubleClick: $$Props['zoomOnDoubleClick'] = true;
export let zoomOnPinch: $$Props['zoomOnPinch'] = true;
export let panOnScroll: $$Props['panOnScroll'] = false;
export let panOnDrag: $$Props['panOnDrag'] = true;
export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
export let onerror: $$Props['onerror'] = undefined;
export let ondelete: $$Props['ondelete'] = undefined;
export let onedgecreate: $$Props['onedgecreate'] = undefined;
export let attributionPosition: $$Props['attributionPosition'] = undefined;
export let proOptions: $$Props['proOptions'] = undefined;
export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
export let width: $$Props['width'] = undefined;
export let height: $$Props['height'] = undefined;
export let colorMode: $$Props['colorMode'] = 'light';
export let onconnect: $$Props['onconnect'] = undefined;
export let onconnectstart: $$Props['onconnectstart'] = undefined;
export let onconnectend: $$Props['onconnectend'] = undefined;
export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
export let oninit: $$Props['oninit'] = undefined;
export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
export let paneClickDistance: $$Props['paneClickDistance'] = 0;
export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
export let defaultMarkerColor = '#b1b1b7';
export let style: $$Props['style'] = undefined;
let className: $$Props['class'] = undefined;
export { className as class };
let domNode: HTMLDivElement;
let clientWidth: number;
let clientHeight: number;
let domNode = $state<HTMLDivElement>();
let clientWidth = $state<number>();
let clientHeight = $state<number>();
const initViewport = $viewport || initialViewport;
@@ -108,9 +122,9 @@
});
onMount(() => {
store.width.set(clientWidth);
store.height.set(clientHeight);
store.domNode.set(domNode);
store.width.set(clientWidth!);
store.height.set(clientHeight!);
store.domNode.set(domNode!);
store.syncNodeStores(nodes);
store.syncEdgeStores(edges);
@@ -139,26 +153,26 @@
});
// Update width & height on resize
$: {
$effect.pre(() => {
if (clientWidth !== undefined && clientHeight !== undefined) {
store.width.set(clientWidth);
store.height.set(clientHeight);
}
}
});
// Call oninit once when flow is intialized
const { initialized } = store;
let onInitCalled = false;
$: {
let onInitCalled = $state(false);
$effect.pre(() => {
if (!onInitCalled && $initialized) {
oninit?.();
onInitCalled = true;
}
}
});
// this updates the store for simple changes
// where the prop names equals the store name
$: {
$effect(() => {
const updatableProps: UpdatableStoreProps = {
flowId: id,
connectionLineType,
@@ -186,18 +200,20 @@
};
updateStoreByKeys(store, updatableProps);
}
$: updateStore(store, {
nodeTypes,
edgeTypes,
minZoom,
maxZoom,
translateExtent,
paneClickDistance
});
$: colorModeClass = useColorModeClass(colorMode);
$effect(() => {
updateStore(store, {
nodeTypes,
edgeTypes,
minZoom,
maxZoom,
translateExtent,
paneClickDistance
});
});
let colorModeClass = $derived(useColorModeClass(colorMode));
</script>
<div
@@ -207,9 +223,7 @@
{style}
class={cc(['svelte-flow', className, $colorModeClass])}
data-testid="svelte-flow__wrapper"
on:dragover
on:drop
{...$$restProps}
{...rest}
role="application"
>
<KeyHandler
@@ -242,44 +256,47 @@
<ViewportComponent>
<EdgeRenderer
on:edgeclick
on:edgecontextmenu
on:edgemouseenter
on:edgemouseleave
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
{defaultEdgeOptions}
/>
<ConnectionLine
<!-- <ConnectionLine
containerStyle={connectionLineContainerStyle}
style={connectionLineStyle}
isCustomComponent={$$slots.connectionLine}
isCustomComponent={connectionLine}
>
<slot name="connectionLine" slot="connectionLine" />
</ConnectionLine>
<div class="svelte-flow__edgelabel-renderer" />
<div class="svelte-flow__viewport-portal" />
{#snippet connectionLine()}
{@render connectionLine_render?.()}
{/snippet}
</ConnectionLine> -->
<div class="svelte-flow__edgelabel-renderer"></div>
<div class="svelte-flow__viewport-portal"></div>
<NodeRenderer
{nodeClickDistance}
on:nodeclick
on:nodemouseenter
on:nodemousemove
on:nodemouseleave
on:nodedragstart
on:nodedrag
on:nodedragstop
on:nodecontextmenu
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
<NodeSelection
on:selectionclick
on:selectioncontextmenu
on:nodedragstart
on:nodedrag
on:nodedragstop
{onselectionclick}
{onselectioncontextmenu}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}
/>
</ViewportComponent>
<UserSelection />
</Pane>
</Zoom>
<Attribution {proOptions} position={attributionPosition} />
<slot />
{@render children?.()}
</div>
<style>