Merge branch 'next' of github.com:xyflow/xyflow into next

examples/react/src/app.d.ts

@@ -1,7 +1,11 @@
-import { Edge, Node, ReactFlowProps } from '@xyflow/react';
+import { BackgroundProps, ControlProps, Edge, MiniMapProps, Node, PanelProps, ReactFlowProps } from '@xyflow/react';
 
 declare global {
   interface FlowConfig {
     flowProps: Omit<ReactFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
+    panelProps: PanelProps;
+    backgroundProps: BackgroundProps;
+    controlsProps: ControlProps;
+    minimapProps: MiniMapProps;
   }
 }

examples/react/src/generic-tests/Flow.tsx

@@ -7,6 +7,10 @@ import {
   OnNodesChange,
   OnEdgesChange,
   OnConnect,
+  Controls,
+  Panel,
+  MiniMap,
+  Background,
 } from '@xyflow/react';
 
 type FlowProps = {
@@ -24,7 +28,12 @@ export default ({ flowConfig }: FlowProps) => {
 
   return (
     <div style={{ height: '100%' }}>
-      <ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} />
+      <ReactFlow {...props} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect}>
+        {flowConfig.controlsProps && <Controls {...flowConfig.controlsProps} />}
+        {flowConfig.panelProps && <Panel {...flowConfig.panelProps} />}
+        {flowConfig.minimapProps && <MiniMap {...flowConfig.minimapProps} />}
+        {flowConfig.backgroundProps && <Background {...flowConfig.backgroundProps} />}
+      </ReactFlow>
     </div>
   );
 };

examples/svelte/src/app.d.ts

@@ -1,6 +1,14 @@
 // See https://kit.svelte.dev/docs/types#app
 
-import type { Edge, Node, SvelteFlowProps } from '@xyflow/svelte';
+import type {
+	BackgroundProps,
+	Edge,
+	MiniMap,
+	MiniMapProps,
+	Node,
+	PanelProps,
+	SvelteFlowProps
+} from '@xyflow/svelte';
 
 // for information about these interfaces
 declare global {
@@ -13,6 +21,10 @@ declare global {
 
 	interface FlowConfig {
 		flowProps: Omit<SvelteFlowProps, 'nodes' | 'edges'> & { nodes: Node[]; edges: Edge[] };
+		panelProps: PanelProps;
+		backgroundProps: BackgroundProps;
+		controlsProps: ControlsProps;
+		minimapProps: MiniMapProps;
 	}
 }
 

examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { writable } from 'svelte/store';
-	import { SvelteFlow } from '@xyflow/svelte';
+	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
 
@@ -10,7 +10,20 @@
 	const nodes = writable(flowConfig.flowProps.nodes);
 	const edges = writable(flowConfig.flowProps.edges);
 
-	const props = { ...flowConfig.flowProps, nodes, edges };
+	const flowProps = { ...flowConfig.flowProps, nodes, edges };
 </script>
 
-<SvelteFlow {...props} />
+<SvelteFlow {...flowProps}>
+	{#if flowConfig.panelProps}
+		<Panel {...flowConfig.panelProps} />
+	{/if}
+	{#if flowConfig.minimapProps}
+		<MiniMap {...flowConfig.minimapProps} />
+	{/if}
+	{#if flowConfig.controlsProps}
+		<Controls {...flowConfig.controlsProps} />
+	{/if}
+	{#if flowConfig.backgroundProps}
+		<Background {...flowConfig.backgroundProps} />
+	{/if}
+</SvelteFlow>