feat(svelte): add event handlers and props, rename class names

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -47,7 +47,7 @@
     : [patternDimensions[0] / 2, patternDimensions[1] / 2];
 </script>
 
-<svg class={cc(['react-flow__background', className])} style={style}>
+<svg class={cc(['svelte-flow__background', className])} style={style}>
   <pattern
     id={patternId}
     x={$transform[0] % scaledGap[0]}
@@ -67,7 +67,7 @@
 </svg>
 
 <style>
-  .react-flow__background {
+  .svelte-flow__background {
     position: absolute;
     width: 100%;
     height: 100%;

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

@@ -9,14 +9,14 @@
 <button
   type="button"
   on:click
-  class={cc(['react-flow__controls-button', className])}
+  class={cc(['svelte-flow__controls-button', className])}
   {...$$restProps}
 >
   <slot class="button-svg" />
 </button>
 
 <style>
-  .react-flow__controls-button {
+  .svelte-flow__controls-button {
     border: none;
     background: #fefefe;
     border-bottom: 1px solid #eee;
@@ -31,7 +31,7 @@
     padding: 5px;
   }
 
-  .react-flow__controls-button :global(svg) {
+  .svelte-flow__controls-button :global(svg) {
     width: 100%;
     max-width: 12px;
     max-height: 12px;

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

@@ -43,11 +43,11 @@
   };
 </script>
 
-<Panel class="react-flow__controls" {position}>
+<Panel class="svelte-flow__controls" {position}>
   {#if showZoom}
     <ControlButton
       on:click={onZoomInHandler}
-      class="react-flow__controls-zoomin"
+      class="svelte-flow__controls-zoomin"
       title="zoom in"
       aria-label="zoom in"
     >
@@ -56,7 +56,7 @@
     <svelte:component
       this={ControlButton}
       on:click={onZoomOutHandler}
-      class="react-flow__controls-zoomout"
+      class="svelte-flow__controls-zoomout"
       title="zoom out"
       aria-label="zoom out"
     >
@@ -66,7 +66,7 @@
   {#if showFitView}
     <svelte:component
       this={ControlButton}
-      class="react-flow__controls-fitview"
+      class="svelte-flow__controls-fitview"
       on:click={onFitViewHandler}
       title="fit view"
       aria-label="fit view"
@@ -77,7 +77,7 @@
   {#if showInteractive}
     <svelte:component
       this={ControlButton}
-      class="react-flow__controls-interactive"
+      class="svelte-flow__controls-interactive"
       on:click={onToggleInteractivity}
       title="toggle interactivity"
       aria-label="toggle interactivity"

packages/svelte/src/lib/plugins/Controls/index.ts

@@ -1,3 +1,3 @@
 export { default as Controls } from './Controls.svelte';
 export { default as ControlButton } from './ControlButton.svelte';
-export { type ControlsProps } from './types';
+export * from './types';

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -1,8 +1,8 @@
 import type { PanelPosition } from '@reactflow/system';
 
 export type ControlsProps = {
-  position: PanelPosition;
-  showZoom: boolean;
-  showFitView: boolean;
-  showInteractive: boolean;
+  position?: PanelPosition;
+  showZoom?: boolean;
+  showFitView?: boolean;
+  showInteractive?: boolean;
 };

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -43,7 +43,7 @@
   const nodeClassNameFunc = getAttrFunction(nodeClassName);
   const shapeRendering =
     typeof window === 'undefined' || !!window.chrome ? 'crispEdges' : 'geometricPrecision';
-  const labelledBy = `react-flow__minimap-desc-${$id}`;
+  const labelledBy = `svelte-flow__minimap-desc-${$id}`;
 
   $: viewBB = {
     x: -$transform[0] / $transform[2],
@@ -69,7 +69,7 @@
 
 <Panel
   {position}
-  class={cc(['react-flow__minimap', className])}
+  class={cc(['svelte-flow__minimap', className])}
   style={`background-color: ${bgColor}; ${style}`}
 >
   <svg
@@ -100,7 +100,7 @@
       {/if}
     {/each}
     <path
-      class="react-flow__minimap-mask"
+      class="svelte-flow__minimap-mask"
       d={`M${x - offset},${y - offset}h${viewboxWidth + offset * 2}v${viewboxHeight + offset * 2}h${
         -viewboxWidth - offset * 2
       }z

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <rect
-  class={cc(['react-flow__minimap-node', className])}
+  class={cc(['svelte-flow__minimap-node', className])}
   {x}
   {y}
   rx={borderRadius}