diff --git a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte index bbbe42e5..030c1433 100644 --- a/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte +++ b/packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte @@ -1,12 +1,12 @@ +
e.id); diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte index dbbb2a2b..3fb9b4b0 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte +++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte @@ -25,6 +25,7 @@ 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 deleteKey: $$Props['deleteKey'] = undefined; export let connectionRadius: $$Props['connectionRadius'] = undefined; export let connectionLineType: $$Props['connectionLineType'] = undefined; @@ -54,6 +55,7 @@ id, connectionLineType, connectionRadius, + selectionMode, isValidConnection }; diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts index 52552a51..70327e45 100644 --- a/packages/svelte/src/lib/container/SvelteFlow/types.ts +++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts @@ -3,7 +3,8 @@ import type { ConnectionLineType, NodeOrigin, OnConnectStartParams, - Viewport + Viewport, + SelectionMode } from '@reactflow/system'; import type { @@ -27,6 +28,7 @@ export type SvelteFlowProps = { maxZoom?: number; initialViewport?: Viewport; connectionRadius?: number; + selectionMode?: SelectionMode; class?: string; style?: string; diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts index 6b1dad92..a5af2d97 100644 --- a/packages/svelte/src/lib/index.ts +++ b/packages/svelte/src/lib/index.ts @@ -14,4 +14,8 @@ export * from '$lib/utils'; export * from '$lib/hooks/useSvelteFlow'; +export * from '@reactflow/utils'; +export * from '@reactflow/system'; +export * from '@reactflow/edge-utils'; + export default SvelteFlow; diff --git a/packages/svelte/src/lib/types/nodes.ts b/packages/svelte/src/lib/types/nodes.ts index 35fe7e1a..9eb55ac6 100644 --- a/packages/svelte/src/lib/types/nodes.ts +++ b/packages/svelte/src/lib/types/nodes.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ import type { SvelteComponentTyped } from 'svelte'; -import type { BaseNode } from '@reactflow/system'; +import type { BaseNode, NodeProps } from '@reactflow/system'; // @todo: currently the helper function only like Node from '@reactflow/core' // we need a base node type or helpes that accept Node like types @@ -14,16 +14,6 @@ export type Node< style?: string; }; -// eslint-disable-next-line @typescript-eslint/no-explicit-any -export type NodeProps = Pick< - Node, - 'id' | 'data' | 'selected' | 'sourcePosition' | 'targetPosition' -> & { - xPos: number; - yPos: number; - isConnectable?: boolean; -}; - export type NodeTypes = Record>>; export type DefaultNodeOptions = Partial>; diff --git a/packages/svelte/src/routes/overview/+page.svelte b/packages/svelte/src/routes/overview/+page.svelte index d7c1ba76..94d81185 100644 --- a/packages/svelte/src/routes/overview/+page.svelte +++ b/packages/svelte/src/routes/overview/+page.svelte @@ -8,7 +8,8 @@ Panel, createNodes, createEdges, - type NodeTypes + type NodeTypes, + SelectionMode } from '../../lib/index'; import { CustomNode } from '../../example-components/CustomNode'; @@ -113,6 +114,7 @@ fitView minZoom={0.1} maxZoom={2.5} + selectionMode={SelectionMode.Full} 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)}