Merge pull request #3723 from xyflow/viewport-portal

Added seperate portal to put dom elements inside the flow

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import portal from '$lib/actions/portal';
+  import { useStore } from '$lib/store';
+
+  type $$Props = {};
+
+  const { domNode } = useStore();
+</script>
+
+<div use:portal={{ target: '.svelte-flow__viewport-portal', domNode: $domNode }}>
+  <slot />
+</div>

packages/svelte/src/lib/components/ViewportPortal/index.ts

@@ -0,0 +1 @@
+export { default as ViewportPortal } from './ViewportPortal.svelte';

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -218,6 +218,7 @@
           <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
+        <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter

packages/svelte/src/lib/index.ts

@@ -6,6 +6,7 @@ export * from '$lib/container/SvelteFlow/types';
 export * from '$lib/container/Panel';
 export * from '$lib/components/SvelteFlowProvider';
 export * from '$lib/components/EdgeLabelRenderer';
+export * from '$lib/components/ViewportPortal';
 export * from '$lib/components/BaseEdge';
 export { BezierEdge, StepEdge, SmoothStepEdge, StraightEdge } from '$lib/components/edges';
 export * from '$lib/components/Handle';