merge next

examples/react/src/examples/CustomNode/index.tsx

@@ -15,6 +15,7 @@ import {
   applyNodeChanges,
   OnNodesChange,
   OnConnect,
+  OnBeforeDelete,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -142,6 +143,8 @@ const CustomNodeFlow = () => {
     [setEdges]
   );
 
+  const onBeforeDelete: OnBeforeDelete<MyNode> = useCallback(async (params) => true, []);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -159,6 +162,7 @@ const CustomNodeFlow = () => {
       fitView
       minZoom={0.3}
       maxZoom={2}
+      onBeforeDelete={onBeforeDelete}
     >
       <MiniMap
         nodeStrokeColor={(n: MyNode): string => {

examples/react/src/examples/Edges/index.tsx

@@ -175,6 +175,15 @@ const edgeTypes: EdgeTypes = {
   custom2: CustomEdge2,
 };
 
+const defaultEdgeOptions = {
+  markerEnd: {
+    type: MarkerType.ArrowClosed,
+    color: 'red',
+    width: 20,
+    height: 20,
+  },
+};
+
 const EdgesFlow = () => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -197,6 +206,7 @@ const EdgesFlow = () => {
       onEdgeMouseMove={onEdgeMouseMove}
       onEdgeMouseLeave={onEdgeMouseLeave}
       onDelete={console.log}
+      defaultEdgeOptions={defaultEdgeOptions}
     >
       <MiniMap />
       <Controls />

examples/react/src/examples/Subflow/index.tsx

@@ -13,6 +13,7 @@ import {
   MiniMap,
   Background,
   Panel,
+  NodeOrigin,
 } from '@xyflow/react';
 
 import DebugNode from './DebugNode';
@@ -119,6 +120,7 @@ const initialNodes: Node[] = [
     data: { label: 'Node 3' },
     position: { x: 400, y: 100 },
     className: 'light',
+    extent: 'parent',
   },
 ];
 

examples/react/src/examples/UseNodesData/index.tsx

@@ -18,7 +18,7 @@ import UppercaseNode from './UppercaseNode';
 export type TextNode = Node<{ text: string }, 'text'>;
 export type ResultNode = Node<{}, 'result'>;
 export type UppercaseNode = Node<{}, 'uppercase'>;
-export type MyNode = Node<{ text: string }, 'text'> | Node<{}, 'result'> | Node<{}, 'uppercase'>;
+export type MyNode = Node | TextNode | ResultNode | UppercaseNode;
 
 const nodeTypes = {
   text: TextNode,

examples/svelte/src/routes/examples/add-node-on-drop/Flow.svelte

@@ -34,7 +34,7 @@
 
 		// See of connection landed inside the flow pane
 		const targetIsPane = (event.target as HTMLDivElement)?.classList.contains('svelte-flow__pane');
-		if (targetIsPane) {
+		if (targetIsPane && 'clientX' in event && 'clientY' in event) {
 			const id = getId();
 			const position = {
 				x: event.clientX,

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -22,6 +22,7 @@
 	import CustomEdge from './CustomEdge.svelte';
 
 	import '@xyflow/svelte/dist/style.css';
+	import InitTracker from './InitTracker.svelte';
 
 	const nodeTypes: NodeTypes = {
 		custom: CustomNode,
@@ -148,6 +149,7 @@
 	selectionMode={SelectionMode.Full}
 	initialViewport={{ x: 100, y: 100, zoom: 2 }}
 	snapGrid={[25, 25]}
+	oninit={() => console.log('on init')}
 	on:nodeclick={(event) => console.log('on node click', event)}
 	on:nodemouseenter={(event) => console.log('on node enter', event)}
 	on:nodemouseleave={(event) => console.log('on node leave', event)}
@@ -207,6 +209,8 @@
 			}}>hide/unhide</button
 		>
 	</Panel>
+
+	<InitTracker />
 </SvelteFlow>
 
 <style>

examples/svelte/src/routes/examples/overview/InitTracker.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { useNodesInitialized, useInitialized } from '@xyflow/svelte';
+
+	const nodesInitialized = useNodesInitialized();
+	const initialized = useInitialized();
+
+	$: {
+		if (nodesInitialized) {
+			console.log('nodes initialized');
+		}
+	}
+
+	$: {
+		if (initialized) {
+			console.log('initialized');
+		}
+	}
+</script>