From fe9a3519aca24a9c937d4041fe7fc79f92f8f41e Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Wed, 13 Nov 2024 16:23:27 +0100
Subject: [PATCH] migrate Controls

---
 .../lib/plugins/Controls/ControlButton.svelte | 27 +++----
 .../src/lib/plugins/Controls/Controls.svelte  | 74 ++++++++++---------
 .../svelte/src/lib/plugins/Controls/types.ts  |  6 ++
 3 files changed, 60 insertions(+), 47 deletions(-)

diff --git a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
index f2c05810..48a5316c 100644
--- a/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/ControlButton.svelte
@@ -3,28 +3,29 @@
 
   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 };
+  let {
+    class: className,
+    bgColor,
+    bgColorHover,
+    color,
+    colorHover,
+    borderColor,
+    onclick,
+    children,
+    ...restProps
+  }: ControlButtonProps = $props();
 </script>
 
 <button
   type="button"
-  on:click
+  {onclick}
   class={cc(['svelte-flow__controls-button', className])}
   style:--xy-controls-button-background-color-props={bgColor}
   style:--xy-controls-button-background-color-hover-props={bgColorHover}
   style:--xy-controls-button-color-props={color}
   style:--xy-controls-button-color-hover-props={colorHover}
   style:--xy-controls-button-border-color-props={borderColor}
-  {...$$restProps}
+  {...restProps}
 >
-  <slot class="button-svg" />
+  {@render children?.()}
 </button>
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index 2984ad2c..d164852b 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -12,35 +12,36 @@
 
   import type { ControlsProps } from './types';
 
-  type $$Props = ControlsProps;
-
-  export let position: $$Props['position'] = 'bottom-left';
-  export let showZoom: $$Props['showZoom'] = true;
-  export let showFitView: $$Props['showFitView'] = true;
-  export let showLock: $$Props['showLock'] = true;
-  export let buttonBgColor: $$Props['buttonBgColor'] = undefined;
-  export let buttonBgColorHover: $$Props['buttonBgColorHover'] = undefined;
-  export let buttonColor: $$Props['buttonColor'] = undefined;
-  export let buttonColorHover: $$Props['buttonColorHover'] = undefined;
-  export let buttonBorderColor: $$Props['buttonColorHover'] = undefined;
-  export let ariaLabel: $$Props['aria-label'] = undefined;
-  export let style: $$Props['style'] = undefined;
-  export let orientation: $$Props['orientation'] = 'vertical';
-  export let fitViewOptions: $$Props['fitViewOptions'] = undefined;
-
-  let className: $$Props['class'] = '';
-  export { className as class };
+  let {
+    position = 'bottom-left',
+    orientation = 'vertical',
+    showZoom = true,
+    showFitView = true,
+    showLock = true,
+    style,
+    class: className,
+    buttonBgColor,
+    buttonBgColorHover,
+    buttonColor,
+    buttonColorHover,
+    buttonBorderColor,
+    'aria-label': ariaLabel,
+    fitViewOptions,
+    children,
+    before,
+    after
+  }: ControlsProps = $props();
 
   const {
-    zoomIn,
-    zoomOut,
-    fitView,
     viewport,
     minZoom,
     maxZoom,
     nodesDraggable,
     nodesConnectable,
-    elementsSelectable
+    elementsSelectable,
+    zoomIn,
+    zoomOut,
+    fitView
   } = useStore();
 
   const buttonProps = {
@@ -51,9 +52,10 @@
     borderColor: buttonBorderColor
   };
 
-  $: isInteractive = $nodesDraggable || $nodesConnectable || $elementsSelectable;
-  $: minZoomReached = $viewport.zoom <= $minZoom;
-  $: maxZoomReached = $viewport.zoom >= $maxZoom;
+  let isInteractive = $state($nodesDraggable || $nodesConnectable || $elementsSelectable);
+  let minZoomReached = $derived($viewport.zoom <= $minZoom);
+  let maxZoomReached = $derived($viewport.zoom >= $maxZoom);
+  let orientationClass = $derived(orientation === 'horizontal' ? 'horizontal' : 'vertical');
 
   const onZoomInHandler = () => {
     zoomIn();
@@ -74,8 +76,6 @@
     nodesConnectable.set(isInteractive);
     elementsSelectable.set(isInteractive);
   };
-
-  $: orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
 </script>
 
 <Panel
@@ -85,10 +85,12 @@
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
   {style}
 >
-  <slot name="before" />
+  {#if before}
+    {@render before()}
+  {/if}
   {#if showZoom}
     <ControlButton
-      on:click={onZoomInHandler}
+      onclick={onZoomInHandler}
       class="svelte-flow__controls-zoomin"
       title="zoom in"
       aria-label="zoom in"
@@ -98,7 +100,7 @@
       <PlusIcon />
     </ControlButton>
     <ControlButton
-      on:click={onZoomOutHandler}
+      onclick={onZoomOutHandler}
       class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
@@ -111,7 +113,7 @@
   {#if showFitView}
     <ControlButton
       class="svelte-flow__controls-fitview"
-      on:click={onFitViewHandler}
+      onclick={onFitViewHandler}
       title="fit view"
       aria-label="fit view"
       {...buttonProps}
@@ -122,7 +124,7 @@
   {#if showLock}
     <ControlButton
       class="svelte-flow__controls-interactive"
-      on:click={onToggleInteractivity}
+      onclick={onToggleInteractivity}
       title="toggle interactivity"
       aria-label="toggle interactivity"
       {...buttonProps}
@@ -130,6 +132,10 @@
       {#if isInteractive}<UnlockIcon />{:else}<LockIcon />{/if}
     </ControlButton>
   {/if}
-  <slot />
-  <slot name="after" />
+  {#if children}
+    {@render children()}
+  {/if}
+  {#if after}
+    {@render after()}
+  {/if}
 </Panel>
diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts
index a4e5f9d7..1198d9d1 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 { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
@@ -19,10 +20,14 @@ export type ControlsProps = {
   buttonBgColorHover?: string;
   buttonColor?: string;
   buttonColorHover?: string;
+  buttonBorderColor?: string;
   'aria-label'?: string;
   style?: string;
   class?: string;
   orientation?: 'horizontal' | 'vertical';
+  children?: Snippet;
+  before?: Snippet;
+  after?: Snippet;
   fitViewOptions?: FitViewOptions;
 };
 
@@ -33,4 +38,5 @@ export type ControlButtonProps = HTMLButtonAttributes & {
   color?: string;
   colorHover?: string;
   borderColor?: string;
+  children?: Snippet;
 };