From cc7c49223b07aefef81cd6f8538dd59e2f43eb57 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@Peters-MBP.fritz.box>
Date: Thu, 14 Dec 2023 13:51:25 +0100
Subject: [PATCH 1/3] Added seperate portal to put dom elements inside the flow

---
 .../react/src/components/ViewPortal/index.tsx | 19 +++++++++++++++++++
 .../react/src/container/GraphView/index.tsx   |  2 +-
 .../components/ViewPortal/ViewPortal.svelte   | 12 ++++++++++++
 .../src/lib/components/ViewPortal/index.ts    |  1 +
 .../container/SvelteFlow/SvelteFlow.svelte    |  1 +
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/components/ViewPortal/index.tsx
 create mode 100644 packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte
 create mode 100644 packages/svelte/src/lib/components/ViewPortal/index.ts

diff --git a/packages/react/src/components/ViewPortal/index.tsx b/packages/react/src/components/ViewPortal/index.tsx
new file mode 100644
index 00000000..5560c803
--- /dev/null
+++ b/packages/react/src/components/ViewPortal/index.tsx
@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+
+import { useStore } from '../../hooks/useStore';
+import type { ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__view-portal');
+
+function ViewPortal({ children }: { children: ReactNode }) {
+  const viewPortalDiv = useStore(selector);
+
+  if (!viewPortalDiv) {
+    return null;
+  }
+
+  return createPortal(children, viewPortalDiv);
+}
+
+export default ViewPortal;
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index 014d754f..e7d0f83f 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -180,7 +180,7 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-
+        <div className="react-flow__view-portal" />
         <NodeRenderer
           nodeTypes={nodeTypesWrapped}
           onNodeClick={onNodeClick}
diff --git a/packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte b/packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte
new file mode 100644
index 00000000..3aa3d117
--- /dev/null
+++ b/packages/svelte/src/lib/components/ViewPortal/ViewPortal.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__view-portal', domNode: $domNode }}>
+  <slot />
+</div>
diff --git a/packages/svelte/src/lib/components/ViewPortal/index.ts b/packages/svelte/src/lib/components/ViewPortal/index.ts
new file mode 100644
index 00000000..778b6276
--- /dev/null
+++ b/packages/svelte/src/lib/components/ViewPortal/index.ts
@@ -0,0 +1 @@
+export { default as ViewPortal } from './ViewPortal.svelte';
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 81aa81bd..e8db67f2 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/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-view-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter

From 7bb96c9817f4571846c27c5be1c7038b7ef48194 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@Peters-MBP.fritz.box>
Date: Thu, 14 Dec 2023 14:27:05 +0100
Subject: [PATCH 2/3] Renamed to ViewportPortal

---
 .../src/components/{ViewPortal => ViewportPortal}/index.tsx | 6 +++---
 packages/react/src/container/GraphView/index.tsx            | 2 +-
 packages/react/src/index.ts                                 | 1 +
 packages/svelte/src/lib/components/ViewPortal/index.ts      | 1 -
 .../ViewportPortal.svelte}                                  | 2 +-
 packages/svelte/src/lib/components/ViewportPortal/index.ts  | 1 +
 .../svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte   | 2 +-
 packages/svelte/src/lib/index.ts                            | 1 +
 8 files changed, 9 insertions(+), 7 deletions(-)
 rename packages/react/src/components/{ViewPortal => ViewportPortal}/index.tsx (75%)
 delete mode 100644 packages/svelte/src/lib/components/ViewPortal/index.ts
 rename packages/svelte/src/lib/components/{ViewPortal/ViewPortal.svelte => ViewportPortal/ViewportPortal.svelte} (69%)
 create mode 100644 packages/svelte/src/lib/components/ViewportPortal/index.ts

diff --git a/packages/react/src/components/ViewPortal/index.tsx b/packages/react/src/components/ViewportPortal/index.tsx
similarity index 75%
rename from packages/react/src/components/ViewPortal/index.tsx
rename to packages/react/src/components/ViewportPortal/index.tsx
index 5560c803..4195a608 100644
--- a/packages/react/src/components/ViewPortal/index.tsx
+++ b/packages/react/src/components/ViewportPortal/index.tsx
@@ -4,9 +4,9 @@ import { createPortal } from 'react-dom';
 import { useStore } from '../../hooks/useStore';
 import type { ReactFlowState } from '../../types';
 
-const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__view-portal');
+const selector = (s: ReactFlowState) => s.domNode?.querySelector('.react-flow__viewport-portal');
 
-function ViewPortal({ children }: { children: ReactNode }) {
+function ViewportPortal({ children }: { children: ReactNode }) {
   const viewPortalDiv = useStore(selector);
 
   if (!viewPortalDiv) {
@@ -16,4 +16,4 @@ function ViewPortal({ children }: { children: ReactNode }) {
   return createPortal(children, viewPortalDiv);
 }
 
-export default ViewPortal;
+export default ViewportPortal;
diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index e7d0f83f..2065ee65 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -180,7 +180,7 @@ const GraphView = ({
           />
         </EdgeRenderer>
         <div className="react-flow__edgelabel-renderer" />
-        <div className="react-flow__view-portal" />
+        <div className="react-flow__viewport-portal" />
         <NodeRenderer
           nodeTypes={nodeTypesWrapped}
           onNodeClick={onNodeClick}
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index ae82e78b..6fc948f5 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -10,6 +10,7 @@ export { default as BaseEdge } from './components/Edges/BaseEdge';
 export { default as ReactFlowProvider } from './components/ReactFlowProvider';
 export { default as Panel, type PanelProps } from './components/Panel';
 export { default as EdgeLabelRenderer } from './components/EdgeLabelRenderer';
+export { default as ViewportPortal } from './components/ViewportPortal';
 
 export { default as useReactFlow } from './hooks/useReactFlow';
 export { default as useUpdateNodeInternals } from './hooks/useUpdateNodeInternals';
diff --git a/packages/svelte/src/lib/components/ViewPortal/index.ts b/packages/svelte/src/lib/components/ViewPortal/index.ts
deleted file mode 100644
index 778b6276..00000000
--- a/packages/svelte/src/lib/components/ViewPortal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as ViewPortal } from './ViewPortal.svelte';
diff --git a/packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
similarity index 69%
rename from packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte
rename to packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
index 3aa3d117..a0bcb347 100644
--- a/packages/svelte/src/lib/components/ViewPortal/ViewPortal.svelte
+++ b/packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte
@@ -7,6 +7,6 @@
   const { domNode } = useStore();
 </script>
 
-<div use:portal={{ target: '.svelte-flow__view-portal', domNode: $domNode }}>
+<div use:portal={{ target: '.svelte-flow__viewport-portal', domNode: $domNode }}>
   <slot />
 </div>
diff --git a/packages/svelte/src/lib/components/ViewportPortal/index.ts b/packages/svelte/src/lib/components/ViewportPortal/index.ts
new file mode 100644
index 00000000..12da71c8
--- /dev/null
+++ b/packages/svelte/src/lib/components/ViewportPortal/index.ts
@@ -0,0 +1 @@
+export { default as ViewportPortal } from './ViewportPortal.svelte';
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index e8db67f2..3e09a460 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -218,7 +218,7 @@
           <slot name="connectionLine" slot="connectionLine" />
         </ConnectionLine>
         <div class="svelte-flow__edgelabel-renderer" />
-        <div class="svelte-view-portal" />
+        <div class="svelte-flow__viewport-portal" />
         <NodeRenderer
           on:nodeclick
           on:nodemouseenter
diff --git a/packages/svelte/src/lib/index.ts b/packages/svelte/src/lib/index.ts
index 895793d2..4272e36e 100644
--- a/packages/svelte/src/lib/index.ts
+++ b/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';

From fa1e3975909e0d9845e1e72e40516f0ae1878af8 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@Peters-MBP.fritz.box>
Date: Mon, 18 Dec 2023 11:55:26 +0100
Subject: [PATCH 3/3] added style for viewport portal

---
 packages/system/src/styles/init.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 7b716a9d..b9219b65 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -296,6 +296,14 @@
   top: 0;
 }
 
+.xy-flow__viewport-portal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+}
+
 .xy-flow__minimap {
   background: var(--xy-minimap-background-color, var(--xy-minimap-background-color-default));