refactor(svelte): add slot to controls, cleanup ControlButton types closes #3788

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">

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import cc from 'classcat';
 
-  let className: string;
+  import type { ControlButtonProps } from './types';
-  let bgColor: string | undefined = undefined;
+
-  let bgColorHover: string | undefined = undefined;
+  type $$Props = ControlButtonProps;
-  let color: string | undefined = undefined;
+
-  let colorHover: string | undefined = undefined;
+  let className: $$Props['class'] = undefined;
-  let borderColor: string | undefined = 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>

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>

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;
+};