Merge branch 'next' into svelte-on-init

examples/react/src/examples/Basic/index.tsx

@@ -10,9 +10,10 @@ import {
   Edge,
   useReactFlow,
   Panel,
+  OnNodeDrag,
 } from '@xyflow/react';
 
-const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
+const onNodeDrag: OnNodeDrag = (_, node) => console.log('drag', node);
 const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
 const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
 

examples/react/src/examples/CustomNode/ColorSelectorNode.tsx

@@ -1,6 +1,8 @@
-import React, { memo, FC, CSSProperties, useCallback, useEffect } from 'react';
+import React, { memo, FC, CSSProperties, useCallback } from 'react';
 import { Handle, Position, NodeProps, Connection, Edge, useOnViewportChange, Viewport } from '@xyflow/react';
 
+import type { ColorSelectorNode } from '.';
+
 const targetHandleStyle: CSSProperties = { background: '#555' };
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
 const sourceHandleStyleB: CSSProperties = {
@@ -11,7 +13,7 @@ const sourceHandleStyleB: CSSProperties = {
 
 const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
 
-const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
+const ColorSelectorNode: FC<NodeProps<ColorSelectorNode['data']>> = ({ data, isConnectable }) => {
   const onStart = useCallback((viewport: Viewport) => console.log('onStart', viewport), []);
   const onChange = useCallback((viewport: Viewport) => console.log('onChange', viewport), []);
   const onEnd = useCallback((viewport: Viewport) => console.log('onEnd', viewport), []);

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

@@ -5,24 +5,33 @@ import {
   Controls,
   addEdge,
   Node,
-  ReactFlowInstance,
   Position,
   SnapGrid,
-  Connection,
-  useNodesState,
   useEdgesState,
   Background,
   Edge,
+  OnNodeDrag,
+  OnInit,
+  applyNodeChanges,
+  OnNodesChange,
+  OnConnect,
+  OnBeforeDelete,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
 
-const onInit = (reactFlowInstance: ReactFlowInstance) => {
+export type ColorSelectorNode = Node<
+  { color: string; onChange: (event: ChangeEvent<HTMLInputElement>) => void },
+  'selectorNode'
+>;
+export type MyNode = Node | ColorSelectorNode;
+
+const onInit: OnInit<MyNode> = (reactFlowInstance) => {
   console.log('flow loaded:', reactFlowInstance);
 };
 
-const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
-const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
+const onNodeDragStop: OnNodeDrag<MyNode> = (_, node) => console.log('drag stop', node);
+const onNodeClick = (_: MouseEvent, node: MyNode) => console.log('click', node);
 
 const initBgColor = '#1A192B';
 
@@ -34,7 +43,16 @@ const nodeTypes = {
 };
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [nodes, setNodes] = useState<MyNode[]>([]);
+  const onNodesChange: OnNodesChange = useCallback(
+    (changes) =>
+      setNodes((nds) => {
+        const nextNodes = applyNodeChanges(changes, nds);
+        return nextNodes;
+      }),
+    [setNodes]
+  );
+
   const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const [bgColor, setBgColor] = useState<string>(initBgColor);
@@ -120,12 +138,13 @@ const CustomNodeFlow = () => {
     ]);
   }, []);
 
-  const onConnect = useCallback(
-    (connection: Connection) =>
-      setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)),
+  const onConnect: OnConnect = useCallback(
+    (connection) => setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)),
     [setEdges]
   );
 
+  const onBeforeDelete: OnBeforeDelete<MyNode> = useCallback(async (params) => true, []);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -143,16 +162,17 @@ const CustomNodeFlow = () => {
       fitView
       minZoom={0.3}
       maxZoom={2}
+      onBeforeDelete={onBeforeDelete}
     >
       <MiniMap
-        nodeStrokeColor={(n: Node): string => {
+        nodeStrokeColor={(n: MyNode): string => {
           if (n.type === 'input') return '#0041d0';
           if (n.type === 'selectorNode') return bgColor;
           if (n.type === 'output') return '#ff0072';
 
           return '#eee';
         }}
-        nodeColor={(n: Node): string => {
+        nodeColor={(n: MyNode): string => {
           if (n.type === 'selectorNode') return bgColor;
 
           return '#fff';

examples/svelte/src/routes/examples/handle-connect/MultiHandleNode.svelte

@@ -43,10 +43,8 @@
 	export let zIndex: $$Props['zIndex'] = undefined;
 	export let dragging: $$Props['dragging'] = false;
 	export let dragHandle: $$Props['dragHandle'] = undefined;
-	export let positionAbsolute: $$Props['positionAbsolute'] = {
-		x: 0,
-		y: 0
-	};
+	export let positionAbsoluteX: $$Props['positionAbsoluteX'] = 0;
+	export let positionAbsoluteY: $$Props['positionAbsoluteY'] = 0;
 	export let isConnectable: $$Props['isConnectable'] = undefined;
 
 	data;
@@ -59,7 +57,8 @@
 	zIndex;
 	dragging;
 	dragHandle;
-	positionAbsolute;
+	positionAbsoluteX;
+	positionAbsoluteY;
 	isConnectable;
 </script>