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
examples/svelte/src/routes/examples/custom-connection-line/CustomNode.svelte
+1 -9
View File
@@ -1,15 +1,7 @@
<script lang="ts">
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
interface Props {
isConnectable: $$Props['isConnectable'];
[key: string]: any
}
let { isConnectable, ...rest }: Props = $props();
rest;
let { isConnectable }: NodeProps = $props();
const handleStyle = 'width: 10px; height: 10px; bottom: -5px;';
</script>
examples/svelte/src/routes/examples/customnode/CustomNode.svelte
+1 -10
View File
@@ -2,16 +2,7 @@
import type { Writable } from 'svelte/store';
import { Handle, Position, type NodeProps, type Node } from '@xyflow/svelte';
type $$Props = NodeProps<Node<{ colorStore: Writable<string> }>>;
interface Props {
data: $$Props['data'];
[key: string]: any
}
let { data, ...rest }: Props = $props();
rest;
let { data }: NodeProps<Node<{ colorStore: Writable<string> }>> = $props();
const { colorStore } = data;
</script>
examples/svelte/src/routes/examples/handle-connect/SingleHandleNode.svelte
+1 -10
View File
@@ -1,14 +1,7 @@
<script lang="ts">
import { Handle, Position, type NodeProps, type Connection } from '@xyflow/svelte';
type $$Props = NodeProps;
interface Props {
id: $$Props['id'];
[key: string]: any
}
let { id, ...rest }: Props = $props();
let { id }: NodeProps = $props();
function onConnectTarget(connection: Connection[]) {
console.log('connect target', connection);
@@ -25,8 +18,6 @@
function onDisconnectSource(connection: Connection[]) {
console.log('disconnect source', connection);
}
rest;
</script>
<div class="custom">
examples/svelte/src/routes/examples/node-toolbar/CustomNode.svelte
+1 -9
View File
@@ -1,15 +1,7 @@
<script lang="ts">
import { NodeToolbar, type NodeProps, Handle, Position } from '@xyflow/svelte';
type $$Props = NodeProps;
rest;
interface Props {
data: $$Props['data'];
[key: string]: any
}
let { data, ...rest }: Props = $props();
let { data }: NodeProps = $props();
</script>
<NodeToolbar
examples/svelte/src/routes/examples/overview/CustomNode.svelte
+5 -11
View File
@@ -1,17 +1,11 @@
<script lang="ts">
import { Handle, Position, type BuiltInNode, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps<BuiltInNode>;
rest;
interface Props {
data?: { label: string };
positionAbsoluteX?: number;
positionAbsoluteY?: number;
[key: string]: any
}
let { data = { label: 'Node' }, positionAbsoluteX = 0, positionAbsoluteY = 0, ...rest }: Props = $props();
let {
data = { label: 'Node' },
positionAbsoluteX = 0,
positionAbsoluteY = 0
}: NodeProps = $props();
</script>
<div class="custom">
examples/svelte/src/routes/examples/overview/CustomNodeDragHandle.svelte
+1 -9
View File
@@ -1,15 +1,7 @@
<script lang="ts">
import type { BuiltInNode, NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps<BuiltInNode>;
rest;
interface Props {
data?: { label: string };
[key: string]: any
}
let { data = { label: 'Node' }, ...rest }: Props = $props();
let { data = { label: 'Node' } }: NodeProps<BuiltInNode> = $props();
</script>
<div class="custom">
examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+4 -10
View File
@@ -8,22 +8,16 @@
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
type $$Props = NodeProps;
interface Props {
id: $$Props['id'];
[key: string]: any
}
let { id, ...rest }: Props = $props();
rest;
let { id }: NodeProps = $props();
const connections = useHandleConnections({
nodeId: id,
type: 'target'
});
let nodeData = $derived(useNodesData<MyNode>($connections.map((connection) => connection.source)));
let nodeData = $derived(
useNodesData<MyNode>($connections.map((connection) => connection.source))
);
let textNodes = $derived($nodeData.filter(isTextNode));
</script>
examples/svelte/src/routes/examples/usenodesdata/TextNode.svelte
+1 -10
View File
@@ -1,18 +1,9 @@
<script lang="ts">
import { Handle, Position, type NodeProps, useSvelteFlow } from '@xyflow/svelte';
type $$Props = NodeProps;
interface Props {
id: $$Props['id'];
data: $$Props['data'];
[key: string]: any
}
let { id, data, ...rest }: Props = $props();
let { id, data }: NodeProps = $props();
const { updateNodeData } = useSvelteFlow();
rest;
</script>
<div class="custom">
examples/svelte/src/routes/examples/useupdatenodeinternals/CustomNode.svelte
+1 -10
View File
@@ -1,20 +1,11 @@
<script lang="ts">
import { Handle, Position, type NodeProps, useUpdateNodeInternals } from '@xyflow/svelte';
type $$Props = NodeProps;
interface Props {
id: $$Props['id'];
[key: string]: any
}
let { id, ...rest }: Props = $props();
rest;
let { id }: NodeProps = $props();
const updateNodeInternals = useUpdateNodeInternals();
let handleCount = $state(1);
const onClick = () => {
handleCount += 1;
packages/svelte/package.json
+1 -1
View File
@@ -79,7 +79,7 @@
"svelte-eslint-parser": "^0.43.0",
"svelte-preprocess": "^6.0.3",
"tslib": "^2.8.1",
"typescript": "5.4.2"
"typescript": "^5.5.0"
},
"peerDependencies": {
"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0"
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>
packages/svelte/src/lib/container/SvelteFlow/types.ts
+321 -313
View File
@@ -34,319 +34,327 @@ import type {
IsValidConnection
} from '$lib/types';
import type { Writable } from 'svelte/store';
import type { Snippet } from 'svelte';
import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
/** The id of the flow
*
* This is necessary if you want to render multiple flows.
* @optional
*/
id?: string;
/** An array of nodes to render in a controlled flow.
* @example
* const nodes = writable([
* {
* id: 'node-1',
* type: 'input',
* data: { label: 'Node 1' },
* position: { x: 250, y: 50 }
* }
* ]);
*/
nodes: Writable<Node[]>;
/** An array of edges to render in a controlled flow.
* @example
* const edges = writable([
* {
* id: 'edge-1-2',
* source: 'node-1',
* target: 'node-2',
* }
* ]);
*/
edges: Writable<Edge[]>;
/** Custom node types to be available in a flow.
*
* Svelte Flow matches a node's type to a component in the nodeTypes object.
* @example
* import CustomNode from './CustomNode.svelte';
*
* const nodeTypes = { nameOfNodeType: CustomNode };
*/
nodeTypes?: NodeTypes;
/** Custom edge types to be available in a flow.
*
* Svelte Flow matches an edge's type to a component in the edgeTypes object.
* @example
* import CustomEdge from './CustomEdge.svelte';
*
* const edgeTypes = { nameOfEdgeType: CustomEdge };
*/
edgeTypes?: EdgeTypes;
/** Pressing down this key you can select multiple elements with a selection box.
* @default 'Shift'
*/
selectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Space'
*/
panActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key deletes all selected nodes & edges.
* @default 'Backspace'
*/
deleteKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key you can select multiple elements by clicking.
* @default 'Meta' for macOS, "Ctrl" for other systems
*/
multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Meta' for macOS, "Ctrl" for other systems
* */
zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** If set, initial viewport will show all nodes & edges */
fitView?: boolean;
/** Options to be used in combination with fitView
* @example
* const fitViewOptions = {
* padding: 0.1,
* includeHiddenNodes: false,
* minZoom: 0.1,
* maxZoom: 1,
* duration: 200,
* nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
* };
*/
fitViewOptions?: FitViewOptions;
/** Defines nodes relative position to its coordinates
* @example
* [0, 0] // default, top left
* [0.5, 0.5] // center
* [1, 1] // bottom right
*/
nodeOrigin?: NodeOrigin;
/** With a threshold greater than zero you can control the distinction between node drag and click events.
*
* If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
* @default 1
*/
nodeDragThreshold?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
paneClickDistance?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
nodeClickDistance?: number;
/** Minimum zoom level
* @default 0.5
*/
minZoom?: number;
/** Maximum zoom level
* @default 2
*/
maxZoom?: number;
/** Sets the initial position and zoom of the viewport.
*
* If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
* @example
* const initialViewport = {
* zoom: 0.5,
* position: { x: 0, y: 0 }
* };
*/
initialViewport?: Viewport;
/** Custom viewport writable to be used instead of internal one */
viewport?: Writable<Viewport>;
/** The radius around a handle where you drop a connection line to create a new edge.
* @default 20
*/
connectionRadius?: number;
/** 'strict' connection mode will only allow you to connect source handles to target handles.
*
* 'loose' connection mode will allow you to connect handles of any type to one another.
* @default 'strict'
*/
connectionMode?: ConnectionMode;
/** Styles to be applied to the connection line */
connectionLineStyle?: string;
/** Styles to be applied to the container of the connection line */
connectionLineContainerStyle?: string;
/** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
* @default 'full'
*/
selectionMode?: SelectionMode;
/** Grid all nodes will snap to
* @example [20, 20]
*/
snapGrid?: SnapGrid;
/** Color of edge markers
* @example "#b1b1b7"
*/
defaultMarkerColor?: string;
/** Controls if all nodes should be draggable
* @default true
*/
nodesDraggable?: boolean;
/** Controls if all nodes should be connectable to each other
* @default true
*/
nodesConnectable?: boolean;
/** Controls if all elements should (nodes & edges) be selectable
* @default true
*/
elementsSelectable?: boolean;
/** By default the viewport extends infinitely. You can use this prop to set a boundary.
*
* The first pair of coordinates is the top left boundary and the second pair is the bottom right.
* @example [[-1000, -10000], [1000, 1000]]
*/
translateExtent?: CoordinateExtent;
/** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
*
* The first pair of coordinates is the top left boundary and the second pair is the bottom right.
* @example [[-1000, -10000], [1000, 1000]]
*/
nodeExtent?: CoordinateExtent;
/** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
* @default true
*/
preventScrolling?: boolean;
/** Controls if the viewport should zoom by scrolling inside the container */
zoomOnScroll?: boolean;
/** Controls if the viewport should zoom by double clicking somewhere on the flow */
zoomOnDoubleClick?: boolean;
/** Controls if the viewport should zoom by pinching on a touch screen */
zoomOnPinch?: boolean;
/** Controls if the viewport should pan by scrolling inside the container
*
* Can be limited to a specific direction with panOnScrollMode
*/
panOnScroll?: boolean;
/** This prop is used to limit the direction of panning when panOnScroll is enabled.
*
* The "free" option allows panning in any direction.
* @default "free"
* @example "horizontal" | "vertical"
*/
panOnScrollMode?: PanOnScrollMode;
/** Enableing this prop allows users to pan the viewport by clicking and dragging.
*
* You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
* @example [0, 2] // allows panning with the left and right mouse buttons
* [0, 1, 2, 3, 4] // allows panning with all mouse buttons
*/
panOnDrag?: boolean | number[];
/** Select multiple elements with a selection box, without pressing down selectionKey */
selectionOnDrag?: boolean;
/** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
*
* This might improve performance when you have a large number of nodes and edges but also adds an overhead.
* @default false
*/
onlyRenderVisibleElements?: boolean;
/** You can enable this prop to automatically pan the viewport while making a new connection.
* @default true
*/
autoPanOnConnect?: boolean;
/** You can enable this prop to automatically pan the viewport while dragging a node.
* @default true
*/
autoPanOnNodeDrag?: boolean;
/** Set position of the attribution
* @default 'bottom-right'
* @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
*/
attributionPosition?: PanelPosition;
/** By default, we render a small attribution in the corner of your flows that links back to the project.
*
* Anyone is free to remove this attribution whether they're a Pro subscriber or not
* but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
* before doing so.
*/
proOptions?: ProOptions;
/** Defaults to be applied to all new edges that are added to the flow.
*
* Properties on a new edge will override these defaults if they exist.
* @example
* const defaultEdgeOptions = {
* type: 'customEdgeType',
* animated: true,
* interactionWidth: 10,
* data: { label: 'custom label' },
* hidden: false,
* deletable: true,
* selected: false,
* focusable: true,
* markerStart: EdgeMarker.ArrowClosed,
* markerEnd: EdgeMarker.ArrowClosed,
* zIndex: 12,
* ariaLabel: 'custom aria label'
* }
*/
defaultEdgeOptions?: DefaultEdgeOptions;
/** Sets a fixed width for the flow */
width?: number;
/** Sets a fixed height for the flow */
height?: number;
/** Controls color scheme used for styling the flow
* @default 'system'
* @example 'system' | 'light' | 'dark'
*/
colorMode?: ColorMode;
/** Class to be applied to the flow container */
class?: string;
/** Styles to be applied to the flow container */
style?: string;
/** Choose from the built-in edge types to be used for connections
* @default 'default' | ConnectionLineType.Bezier
* @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
* @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
*/
connectionLineType?: ConnectionLineType;
/** This callback can be used to validate a new connection
*
* If you return false, the edge will not be added to your flow.
* If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
* @default (connection: Connection) => true
*/
isValidConnection?: IsValidConnection;
/** This event handler is called when the user begins to pan or zoom the viewport */
onMoveStart?: OnMoveStart;
/** This event handler is called when the user pans or zooms the viewport */
onMove?: OnMove;
/** This event handler is called when the user stops panning or zooming the viewport */
onMoveEnd?: OnMoveEnd;
/** Ocassionally something may happen that causes Svelte Flow to throw an error.
*
* Instead of exploding your application, we log a message to the console and then call this event handler.
* You might use it for additional logging or to show a message to the user.
*/
onerror?: OnError;
/** This handler gets called when the user deletes nodes or edges.
* @example
* onDelete={({nodes, edges}) => {
* console.log('deleted nodes:', nodes);
* console.log('deleted edges:', edges);
* }}
*/
ondelete?: OnDelete;
/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
onbeforedelete?: OnBeforeDelete;
export type SvelteFlowProps = NodeEvents &
NodeSelectionEvents &
EdgeEvents &
PaneEvents &
DOMAttributes<HTMLDivElement> & {
/** The id of the flow
*
* This is necessary if you want to render multiple flows.
* @optional
*/
id?: string;
/** An array of nodes to render in a controlled flow.
* @example
* const nodes = writable([
* {
* id: 'node-1',
* type: 'input',
* data: { label: 'Node 1' },
* position: { x: 250, y: 50 }
* }
* ]);
*/
nodes: Writable<Node[]>;
/** An array of edges to render in a controlled flow.
* @example
* const edges = writable([
* {
* id: 'edge-1-2',
* source: 'node-1',
* target: 'node-2',
* }
* ]);
*/
edges: Writable<Edge[]>;
/** Custom node types to be available in a flow.
*
* Svelte Flow matches a node's type to a component in the nodeTypes object.
* @example
* import CustomNode from './CustomNode.svelte';
*
* const nodeTypes = { nameOfNodeType: CustomNode };
*/
nodeTypes?: NodeTypes;
/** Custom edge types to be available in a flow.
*
* Svelte Flow matches an edge's type to a component in the edgeTypes object.
* @example
* import CustomEdge from './CustomEdge.svelte';
*
* const edgeTypes = { nameOfEdgeType: CustomEdge };
*/
edgeTypes?: EdgeTypes;
/** Pressing down this key you can select multiple elements with a selection box.
* @default 'Shift'
*/
selectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can pan the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Space'
*/
panActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key deletes all selected nodes & edges.
* @default 'Backspace'
*/
deleteKey?: KeyDefinition | KeyDefinition[] | null;
/** Pressing down this key you can select multiple elements by clicking.
* @default 'Meta' for macOS, "Ctrl" for other systems
*/
multiSelectionKey?: KeyDefinition | KeyDefinition[] | null;
/** If a key is set, you can zoom the viewport while that key is held down even if panOnScroll is set to false.
*
* By setting this prop to null you can disable this functionality.
* @default 'Meta' for macOS, "Ctrl" for other systems
* */
zoomActivationKey?: KeyDefinition | KeyDefinition[] | null;
/** If set, initial viewport will show all nodes & edges */
fitView?: boolean;
/** Options to be used in combination with fitView
* @example
* const fitViewOptions = {
* padding: 0.1,
* includeHiddenNodes: false,
* minZoom: 0.1,
* maxZoom: 1,
* duration: 200,
* nodes: [{id: 'node-1'}, {id: 'node-2'}], // nodes to fit
* };
*/
fitViewOptions?: FitViewOptions;
/** Defines nodes relative position to its coordinates
* @example
* [0, 0] // default, top left
* [0.5, 0.5] // center
* [1, 1] // bottom right
*/
nodeOrigin?: NodeOrigin;
/** With a threshold greater than zero you can control the distinction between node drag and click events.
*
* If threshold equals 1, you need to drag the node 1 pixel before a drag event is fired.
* @default 1
*/
nodeDragThreshold?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
paneClickDistance?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
nodeClickDistance?: number;
/** Minimum zoom level
* @default 0.5
*/
minZoom?: number;
/** Maximum zoom level
* @default 2
*/
maxZoom?: number;
/** Sets the initial position and zoom of the viewport.
*
* If a default viewport is provided but fitView is enabled, the default viewport will be ignored.
* @example
* const initialViewport = {
* zoom: 0.5,
* position: { x: 0, y: 0 }
* };
*/
initialViewport?: Viewport;
/** Custom viewport writable to be used instead of internal one */
viewport?: Writable<Viewport>;
/** The radius around a handle where you drop a connection line to create a new edge.
* @default 20
*/
connectionRadius?: number;
/** 'strict' connection mode will only allow you to connect source handles to target handles.
*
* 'loose' connection mode will allow you to connect handles of any type to one another.
* @default 'strict'
*/
connectionMode?: ConnectionMode;
/** Provide a custom snippet to be used insted of the default connection line */
connectionLine?: Snippet;
/** Styles to be applied to the connection line */
connectionLineStyle?: string;
/** Styles to be applied to the container of the connection line */
connectionLineContainerStyle?: string;
/** When set to "partial", when the user creates a selection box by click and dragging nodes that are only partially in the box are still selected.
* @default 'full'
*/
selectionMode?: SelectionMode;
/** Grid all nodes will snap to
* @example [20, 20]
*/
snapGrid?: SnapGrid;
/** Color of edge markers
* @example "#b1b1b7"
*/
defaultMarkerColor?: string;
/** Controls if all nodes should be draggable
* @default true
*/
nodesDraggable?: boolean;
/** Controls if all nodes should be connectable to each other
* @default true
*/
nodesConnectable?: boolean;
/** Controls if all elements should (nodes & edges) be selectable
* @default true
*/
elementsSelectable?: boolean;
/** By default the viewport extends infinitely. You can use this prop to set a boundary.
*
* The first pair of coordinates is the top left boundary and the second pair is the bottom right.
* @example [[-1000, -10000], [1000, 1000]]
*/
translateExtent?: CoordinateExtent;
/** By default the nodes can be placed anywhere. You can use this prop to set a boundary.
*
* The first pair of coordinates is the top left boundary and the second pair is the bottom right.
* @example [[-1000, -10000], [1000, 1000]]
*/
nodeExtent?: CoordinateExtent;
/** Disabling this prop will allow the user to scroll the page even when their pointer is over the flow.
* @default true
*/
preventScrolling?: boolean;
/** Controls if the viewport should zoom by scrolling inside the container */
zoomOnScroll?: boolean;
/** Controls if the viewport should zoom by double clicking somewhere on the flow */
zoomOnDoubleClick?: boolean;
/** Controls if the viewport should zoom by pinching on a touch screen */
zoomOnPinch?: boolean;
/** Controls if the viewport should pan by scrolling inside the container
*
* Can be limited to a specific direction with panOnScrollMode
*/
panOnScroll?: boolean;
/** This prop is used to limit the direction of panning when panOnScroll is enabled.
*
* The "free" option allows panning in any direction.
* @default "free"
* @example "horizontal" | "vertical"
*/
panOnScrollMode?: PanOnScrollMode;
/** Enableing this prop allows users to pan the viewport by clicking and dragging.
*
* You can also set this prop to an array of numbers to limit which mouse buttons can activate panning.
* @example [0, 2] // allows panning with the left and right mouse buttons
* [0, 1, 2, 3, 4] // allows panning with all mouse buttons
*/
panOnDrag?: boolean | number[];
/** Select multiple elements with a selection box, without pressing down selectionKey */
selectionOnDrag?: boolean;
/** You can enable this optimisation to instruct Svelte Flow to only render nodes and edges that would be visible in the viewport.
*
* This might improve performance when you have a large number of nodes and edges but also adds an overhead.
* @default false
*/
onlyRenderVisibleElements?: boolean;
/** You can enable this prop to automatically pan the viewport while making a new connection.
* @default true
*/
autoPanOnConnect?: boolean;
/** You can enable this prop to automatically pan the viewport while dragging a node.
* @default true
*/
autoPanOnNodeDrag?: boolean;
/** Set position of the attribution
* @default 'bottom-right'
* @example 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
*/
attributionPosition?: PanelPosition;
/** By default, we render a small attribution in the corner of your flows that links back to the project.
*
* Anyone is free to remove this attribution whether they're a Pro subscriber or not
* but we ask that you take a quick look at our {@link https://reactflow.dev/learn/troubleshooting/remove-attribution | removing attribution guide}
* before doing so.
*/
proOptions?: ProOptions;
/** Defaults to be applied to all new edges that are added to the flow.
*
* Properties on a new edge will override these defaults if they exist.
* @example
* const defaultEdgeOptions = {
* type: 'customEdgeType',
* animated: true,
* interactionWidth: 10,
* data: { label: 'custom label' },
* hidden: false,
* deletable: true,
* selected: false,
* focusable: true,
* markerStart: EdgeMarker.ArrowClosed,
* markerEnd: EdgeMarker.ArrowClosed,
* zIndex: 12,
* ariaLabel: 'custom aria label'
* }
*/
defaultEdgeOptions?: DefaultEdgeOptions;
/** Sets a fixed width for the flow */
width?: number;
/** Sets a fixed height for the flow */
height?: number;
/** Controls color scheme used for styling the flow
* @default 'system'
* @example 'system' | 'light' | 'dark'
*/
colorMode?: ColorMode;
/** Class to be applied to the flow container */
class?: string;
/** Styles to be applied to the flow container */
style?: string;
/** Choose from the built-in edge types to be used for connections
* @default 'default' | ConnectionLineType.Bezier
* @example 'straight' | 'default' | 'step' | 'smoothstep' | 'bezier'
* @example ConnectionLineType.Straight | ConnectionLineType.Default | ConnectionLineType.Step | ConnectionLineType.SmoothStep | ConnectionLineType.Bezier
*/
connectionLineType?: ConnectionLineType;
/** This callback can be used to validate a new connection
*
* If you return false, the edge will not be added to your flow.
* If you have custom connection logic its preferred to use this callback over the isValidConnection prop on the handle component for performance reasons.
* @default (connection: Connection) => true
*/
isValidConnection?: IsValidConnection;
/** This event handler is called when the user begins to pan or zoom the viewport */
onMoveStart?: OnMoveStart;
/** This event handler is called when the user pans or zooms the viewport */
onMove?: OnMove;
/** This event handler is called when the user stops panning or zooming the viewport */
onMoveEnd?: OnMoveEnd;
/** Ocassionally something may happen that causes Svelte Flow to throw an error.
*
* Instead of exploding your application, we log a message to the console and then call this event handler.
* You might use it for additional logging or to show a message to the user.
*/
onerror?: OnError;
/** This handler gets called when the user deletes nodes or edges.
* @example
* onDelete={({nodes, edges}) => {
* console.log('deleted nodes:', nodes);
* console.log('deleted edges:', edges);
* }}
*/
ondelete?: OnDelete;
/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
onbeforedelete?: OnBeforeDelete;
/** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */
onedgecreate?: OnEdgeCreate;
/** This handler gets called when a new edge is created. You can use it to modify the newly created edge. */
onedgecreate?: OnEdgeCreate;
/** This event gets fired when a connection successfully completes and an edge is created. */
onconnect?: OnConnect;
/** When a user starts to drag a connection line, this event gets fired. */
onconnectstart?: OnConnectStart;
/** When a user stops dragging a connection line, this event gets fired. */
onconnectend?: OnConnectEnd;
/** This handler gets called when the flow is finished initializing */
oninit?: () => void;
};
/** This event gets fired when a connection successfully completes and an edge is created. */
onconnect?: OnConnect;
/** When a user starts to drag a connection line, this event gets fired. */
onconnectstart?: OnConnectStart;
/** When a user stops dragging a connection line, this event gets fired. */
onconnectend?: OnConnectEnd;
/** This handler gets called when the flow is finished initializing */
oninit?: () => void;
};
packages/svelte/src/lib/types/events.ts
+56
View File
@@ -0,0 +1,56 @@
import type { Edge } from './edges';
import type { Node } from './nodes';
export type NodeEventWithPointer = ({
node,
event
}: {
node: Node;
event: MouseEvent | TouchEvent;
}) => void;
export type NodesEventWithPointer = ({
nodes,
event
}: {
nodes: Node[];
event: MouseEvent | TouchEvent;
}) => void;
export type NodeTargetEventWithPointer = ({
targetNode,
nodes,
event
}: {
targetNode: Node | null;
nodes: Node[];
event: MouseEvent | TouchEvent;
}) => void;
export type NodeEvents = {
onnodeclick?: NodeEventWithPointer;
onnodecontextmenu?: NodeEventWithPointer;
onnodedrag?: NodeTargetEventWithPointer;
onnodedragstart?: NodeTargetEventWithPointer;
onnodedragstop?: NodeTargetEventWithPointer;
onnodemouseenter?: NodeEventWithPointer;
onnodemouseleave?: NodeEventWithPointer;
onnodemousemove?: NodeEventWithPointer;
};
export type NodeSelectionEvents = {
onselectioncontextmenu?: NodesEventWithPointer;
onselectionclick?: NodesEventWithPointer;
};
export type PaneEvents = {
onpaneclick?: ({ event }: { event: MouseEvent | TouchEvent }) => void;
onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
};
export type EdgeEvents = {
onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent | TouchEvent }) => void;
onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
onedgemouseenter?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
onedgemouseleave?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
};