From 4d8fc79d218f19e46949e4fef558c78c816e8e7c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 15 Jan 2024 17:00:16 +0100
Subject: [PATCH] refactor(svelte): add slot to controls, cleanup ControlButton
 types closes #3788

---
 .../src/routes/examples/overview/+page.svelte    | 10 ++++++++--
 .../lib/plugins/Controls/ControlButton.svelte    | 16 ++++++++++------
 .../src/lib/plugins/Controls/Controls.svelte     |  3 +++
 .../svelte/src/lib/plugins/Controls/types.ts     | 10 ++++++++++
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index 44d54544..586af3b9 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -13,7 +13,8 @@
 		type Node,
 		type Edge,
 		ConnectionMode,
-		useSvelteFlow
+		useSvelteFlow,
+		ControlButton
 	} from '@xyflow/svelte';
 
 	import CustomNode from './CustomNode.svelte';
@@ -187,7 +188,12 @@
 	connectionMode={ConnectionMode.Strict}
 	attributionPosition={'top-center'}
 >
-	<Controls />
+	<Controls>
+		<ControlButton slot="before">xy</ControlButton>
+		<ControlButton aria-label="log" on:click={() => console.log('control button')}
+			>log</ControlButton
+		>
+	</Controls>
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />
 	<Panel position="top-right">
diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
index be64f19a..f2c05810 100644
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -1,12 +1,16 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  let className: string;
-  let bgColor: string | undefined = undefined;
-  let bgColorHover: string | undefined = undefined;
-  let color: string | undefined = undefined;
-  let colorHover: string | undefined = undefined;
-  let borderColor: string | undefined = undefined;
+  import type { ControlButtonProps } from './types';
+
+  type $$Props = ControlButtonProps;
+
+  let className: $$Props['class'] = undefined;
+  let bgColor: $$Props['bgColor'] = undefined;
+  let bgColorHover: $$Props['bgColorHover'] = undefined;
+  let color: $$Props['color'] = undefined;
+  let colorHover: $$Props['colorHover'] = undefined;
+  let borderColor: $$Props['borderColor'] = undefined;
 
   export { className as class };
 </script>
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index a82c7c03..042b2be5 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -74,6 +74,7 @@
   data-testid="svelte-flow__controls"
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
 >
+  <slot name="before" />
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}
@@ -118,4 +119,6 @@
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
     </ControlButton>
   {/if}
+  <slot />
+  <slot name="after" />
 </Panel>
diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts
index 2aad9b39..4e0ab786 100644
--- a/packages/svelte/src/lib/plugins/Controls/types.ts
+++ b/packages/svelte/src/lib/plugins/Controls/types.ts
@@ -1,3 +1,4 @@
+import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
 export type ControlsProps = {
@@ -11,3 +12,12 @@ export type ControlsProps = {
   buttonColorHover?: string;
   'aria-label'?: string;
 };
+
+export type ControlButtonProps = HTMLButtonAttributes & {
+  class?: string;
+  bgColor?: string;
+  bgColorHover?: string;
+  color?: string;
+  colorHover?: string;
+  borderColor?: string;
+};