You can drag these nodes to the pane on the left.
{
+ onbeforeconnect={(connection) => {
console.log('on edge create', connection);
return {
diff --git a/examples/svelte/src/routes/examples/figma/+page.svelte b/examples/svelte/src/routes/examples/figma/+page.svelte
index 31a1877e..35a694ac 100644
--- a/examples/svelte/src/routes/examples/figma/+page.svelte
+++ b/examples/svelte/src/routes/examples/figma/+page.svelte
@@ -16,9 +16,9 @@
const panOnDrag = [1, 2];
- const onMoveStart = (e: any) => console.log('move start', e);
- const onMove = (e: any) => console.log('move', e);
- const onMoveEnd = (e: any) => console.log('move end', e);
+ const onmovestart = (e: any) => console.log('move start', e);
+ const onmove = (e: any) => console.log('move', e);
+ const onmoveend = (e: any) => console.log('move end', e);
let nodes = $state.raw([
{
@@ -47,9 +47,9 @@
selectionOnDrag
panOnScroll
{panOnDrag}
- {onMoveStart}
- {onMove}
- {onMoveEnd}
+ {onmovestart}
+ {onmove}
+ {onmoveend}
>
diff --git a/examples/svelte/src/routes/examples/interaction/+page.svelte b/examples/svelte/src/routes/examples/interaction/+page.svelte
index 0bb400d5..a12fb826 100644
--- a/examples/svelte/src/routes/examples/interaction/+page.svelte
+++ b/examples/svelte/src/routes/examples/interaction/+page.svelte
@@ -29,14 +29,14 @@
{ id: 'e1-3', source: '1', target: '3' }
]);
- const onNodeDragStart = (_: MouseEvent, node: Node) => console.log('drag start', node);
- const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
- const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
- const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
- const onPaneClick = (event: MouseEvent) => console.log('onPaneClick', event);
- const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
- const onPaneContextMenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
- const onMoveEnd: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
+ const onnodedragstart = (_: MouseEvent, node: Node) => console.log('drag start', node);
+ const onnodedragstop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
+ const onnodeclick = (_: MouseEvent, node: Node) => console.log('click', node);
+ const onedgeclick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
+ const onpaneclick = (event: MouseEvent) => console.log('onPaneClick', event);
+ const onpanescroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
+ const onpanecontextmenu = (event: MouseEvent) => console.log('onPaneContextMenu', event);
+ const onmoveend: OnMoveEnd = (_, viewport) => console.log('onMoveEnd', viewport);
let isSelectable = $state(false);
let isDraggable = $state(false);
@@ -64,7 +64,7 @@
{panOnScrollMode}
{zoomOnDoubleClick}
{panOnDrag}
- {onMoveEnd}
+ {onmoveend}
fitView
>
diff --git a/examples/svelte/src/routes/examples/intersections/Flow.svelte b/examples/svelte/src/routes/examples/intersections/Flow.svelte
index 0146dc6c..f436b8d7 100644
--- a/examples/svelte/src/routes/examples/intersections/Flow.svelte
+++ b/examples/svelte/src/routes/examples/intersections/Flow.svelte
@@ -10,21 +10,25 @@
let edges = $state.raw
(initialEdges);
const { getIntersectingNodes } = $derived(useSvelteFlow());
-
- const onNodeDrag = ({ targetNode }) => {
- if (targetNode) {
- const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
-
- nodes = nodes.map((node) => ({
- ...node,
- class: intersections.includes(node.id) ? 'highlight' : ''
- }));
- }
- };
-
+ {
+ if (targetNode) {
+ const intersections = getIntersectingNodes(targetNode).map((n) => n.id);
+
+ nodes = nodes.map((node) => ({
+ ...node,
+ class: intersections.includes(node.id) ? 'highlight' : ''
+ }));
+ }
+ }}
+ >
diff --git a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
index c1521d2d..8912f965 100644
--- a/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
+++ b/examples/svelte/src/routes/examples/node-resizer/DefaultResizer.svelte
@@ -2,7 +2,7 @@
import { Handle, NodeResizer, Position, type NodeProps } from '@xyflow/svelte';
import type { ResizeNode } from './types';
- let { data, selected = undefined }: NodeProps = $props();
+ let { data, selected }: NodeProps = $props();
;
type ResultNodeType = Node<{}, 'result'>;
- export function isTextNode(node: any): node is TextNodeType | UppercaseNode {
+ export function isTextNode(node: any): node is TextNodeType | UppercaseNodeType {
return !node || !node.type ? false : node.type === 'text' || node.type === 'uppercase';
}
diff --git a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
index 6c57c089..a9f14360 100644
--- a/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
+++ b/examples/svelte/src/routes/examples/usenodesdata/ResultNode.svelte
@@ -4,7 +4,8 @@
Position,
useNodeConnections,
useNodesData,
- type NodeProps
+ type NodeProps,
+ type Node
} from '@xyflow/svelte';
import { isTextNode, type MyNode } from './+page.svelte';
diff --git a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
index 19e3f180..389804d6 100644
--- a/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
+++ b/examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte
@@ -1,5 +1,12 @@
-
+
{#if flowConfig.panelProps}
{/if}
diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte b/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
deleted file mode 100644
index 682d8545..00000000
--- a/packages/svelte/src/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-
-
-
- {@render children?.()}
-
diff --git a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts b/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts
deleted file mode 100644
index 02f40786..00000000
--- a/packages/svelte/src/lib/components/EdgeLabelRenderer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as EdgeLabelRenderer } from './EdgeLabelRenderer.svelte';
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index a5c310fe..cdb30fc6 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -36,7 +36,7 @@
onmove,
onmovestart,
onmoveend,
- onerror,
+ onflowerror,
ondelete,
onbeforedelete,
onbeforeconnect,
@@ -49,8 +49,8 @@
onreconnectend,
onclickconnectstart,
onclickconnectend,
- clickConnect,
oninit,
+ clickConnect,
fitView,
fitViewOptions,
nodeOrigin,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index 16d7e205..117b2d9c 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -379,7 +379,7 @@ export type SvelteFlowProps = NodeEvents &
* 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;
+ onflowerror?: OnError;
/** This handler gets called when the user deletes nodes or edges.
* @example
* onDelete={({nodes, edges}) => {
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 7462661f..54853c97 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/packages/svelte/src/lib/index.ts
@@ -5,7 +5,6 @@ export * from '$lib/container/SvelteFlow/types';
// components
export * from '$lib/container/Panel';
export * from '$lib/components/SvelteFlowProvider';
-export * from '$lib/components/EdgeLabelRenderer';
export * from '$lib/components/ViewportPortal';
export {
BezierEdge,
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index fdf5a56c..e885b142 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/packages/svelte/src/lib/store/initial-store.svelte.ts
@@ -285,7 +285,7 @@ export const getInitialStore = (signals: StoreSignals) => {
});
});
onlyRenderVisibleElements: boolean = $derived(signals.props.onlyRenderVisibleElements ?? false);
- onerror: OnError = $derived(signals.props.onerror ?? devWarn);
+ onerror: OnError = $derived(signals.props.onflowerror ?? devWarn);
ondelete?: OnDelete = $derived(signals.props.ondelete);
onbeforedelete?: OnBeforeDelete = $derived(signals.props.onbeforedelete);