Merge branch 'xyflow' into svelte-flow-get-intersecting-nodes

examples/react/src/examples/DragNDrop/index.tsx

@@ -49,9 +49,9 @@ const DnDFlow = () => {
 
     if (reactFlowInstance) {
       const type = event.dataTransfer.getData('application/reactflow');
-      const position = reactFlowInstance.project({
+      const position = reactFlowInstance.screenToFlowCoordinate({
         x: event.clientX,
-        y: event.clientY - 40,
+        y: event.clientY,
       });
       const newNode: Node = {
         id: getId(),

examples/svelte/src/components/Header/Header.svelte

@@ -16,7 +16,8 @@
 		'usesvelteflow',
 		'useupdatenodeinternals',
 		'validation',
-		'intersections'
+		'intersections',
+		'add-node-on-drop'
 	];
 
 	const onChange = (event: Event) => {

examples/svelte/src/routes/add-node-on-drop/+page.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { SvelteFlowProvider } from '@xyflow/svelte';
+  import Flow from './Flow.svelte';
+</script>
+
+<!-- You need the SvelteFlowProvider so you can useSvelteFlow  -->
+<SvelteFlowProvider>
+  <Flow />
+</SvelteFlowProvider>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { SvelteFlow, useSvelteFlow } from '@xyflow/svelte';
+	import type { Edge, Node } from '@xyflow/svelte';
+	import { writable } from 'svelte/store';
+
+	import '@xyflow/svelte/dist/style.css';
+
+	const initialNodes: Node[] = [
+		{
+			id: '0',
+			type: 'input',
+			data: { label: 'Node' },
+			position: { x: 0, y: 50 }
+		}
+	];
+
+	const nodes = writable<Node[]>(initialNodes);
+	const edges = writable<Edge[]>([]);
+
+	let connectingNodeId: string = '0';
+	let rect: DOMRectReadOnly;
+	let id = 1;
+	const getId = () => `${id++}`;
+
+	const { screenToFlowCoordinate, flowToScreenCoordinate } = useSvelteFlow();
+
+	function handleConnectEnd({ detail: { event } }: { detail: { event: MouseEvent | TouchEvent } }) {
+		// See of connection landed inside the flow pane
+		const targetIsPane = event.target?.classList.contains('svelte-flow__pane');
+		if (targetIsPane) {
+			const id = getId();
+			const position = {
+				x: event.clientX,
+				y: event.clientY
+			};
+
+			const doubleTransformedPosition = flowToScreenCoordinate(screenToFlowCoordinate(position));
+			console.log(
+				'Is transforming in both directions (screen-flow, flow-screen) the same?',
+				position.x === doubleTransformedPosition.x && position.y === doubleTransformedPosition.y
+			);
+
+			const newNode: Node = {
+				id,
+				data: { label: `Node ${id}` },
+				// project the screen coordinates to pane coordinates
+				position: screenToFlowCoordinate(position),
+				// set the origin of the new node so it is centered
+				origin: [0.5, 0.0]
+			};
+
+			$nodes.push(newNode);
+			$edges.push({
+				source: connectingNodeId,
+				target: id,
+				id: `${connectingNodeId}--${id}`
+			});
+
+			$nodes = $nodes;
+			$edges = $edges;
+		}
+	}
+</script>
+
+<svelte:window />
+
+<div class="wrapper" bind:contentRect={rect}>
+	<SvelteFlow
+		{nodes}
+		{edges}
+		fitView
+		fitViewOptions={{ padding: 2 }}
+		on:connectstart={({ detail: { nodeId } }) => {
+			// Memorize the nodeId you start draggin a connection line from a node
+			connectingNodeId = nodeId;
+		}}
+		on:connectend={handleConnectEnd}
+	/>
+</div>
+
+<style>
+	:global(.svelte-flow .svelte-flow__handle) {
+		width: 30px;
+		height: 14px;
+		border-radius: 3px;
+		background-color: #784be8;
+	}
+
+	:global(.svelte-flow .svelte-flow__handle-top) {
+		top: -10px;
+	}
+
+	:global(.svelte-flow .svelte-flow__handle-bottom) {
+		bottom: -10px;
+	}
+
+	:global(.svelte-flow .svelte-flow__node) {
+		height: 40px;
+		width: 150px;
+		justify-content: center;
+		align-items: center;
+		display: flex;
+		border-width: 2px;
+		font-weight: 700;
+	}
+
+	:global(.svelte-flow .svelte-flow__edge path, .svelte-flow__connectionline path) {
+		stroke-width: 2;
+	}
+
+	.wrapper {
+		height: 100vh;
+		width: 100vw;
+	}
+</style>