From 508efab624edc906fa6ee273d597847a5741ca22 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 4 Apr 2024 12:53:05 +0200
Subject: [PATCH] feat(controls): add orientation, style and class props closes
 #4069

---
 examples/react/src/examples/Overview/index.tsx       |  2 +-
 .../svelte/src/routes/examples/overview/+page.svelte |  2 +-
 .../src/additional-components/Controls/Controls.tsx  |  5 ++++-
 .../src/additional-components/Controls/types.ts      |  1 +
 packages/svelte/CHANGELOG.md                         |  8 ++++++++
 .../svelte/src/lib/plugins/Controls/Controls.svelte  | 12 +++++++++++-
 packages/svelte/src/lib/plugins/Controls/types.ts    |  3 +++
 packages/system/src/styles/init.css                  |  7 +++++++
 8 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/examples/react/src/examples/Overview/index.tsx b/examples/react/src/examples/Overview/index.tsx
index 3f5c72d0..8dddbb0d 100644
--- a/examples/react/src/examples/Overview/index.tsx
+++ b/examples/react/src/examples/Overview/index.tsx
@@ -237,7 +237,7 @@ const OverviewFlow = () => {
       onPaneMouseMove={onPaneMouseMove}
     >
       <MiniMap nodeBorderRadius={2} />
-      <Controls />
+      <Controls orientation="horizontal" />
       <Background gap={25} />
     </ReactFlow>
   );
diff --git a/examples/svelte/src/routes/examples/overview/+page.svelte b/examples/svelte/src/routes/examples/overview/+page.svelte
index ef8f9a02..301730f6 100644
--- a/examples/svelte/src/routes/examples/overview/+page.svelte
+++ b/examples/svelte/src/routes/examples/overview/+page.svelte
@@ -191,7 +191,7 @@
 	attributionPosition={'top-center'}
 	deleteKey={['Backspace', 'd']}
 >
-	<Controls>
+	<Controls orientation="horizontal">
 		<ControlButton slot="before">xy</ControlButton>
 		<ControlButton aria-label="log" on:click={() => console.log('control button')}
 			>log</ControlButton
diff --git a/packages/react/src/additional-components/Controls/Controls.tsx b/packages/react/src/additional-components/Controls/Controls.tsx
index 5cb9bb4f..e08c9ca2 100644
--- a/packages/react/src/additional-components/Controls/Controls.tsx
+++ b/packages/react/src/additional-components/Controls/Controls.tsx
@@ -34,6 +34,7 @@ function ControlsComponent({
   className,
   children,
   position = 'bottom-left',
+  orientation = 'vertical',
   'aria-label': ariaLabel = 'React Flow controls',
 }: ControlProps) {
   const store = useStoreApi();
@@ -65,9 +66,11 @@ function ControlsComponent({
     onInteractiveChange?.(!isInteractive);
   };
 
+  const orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
+
   return (
     <Panel
-      className={cc(['react-flow__controls', className])}
+      className={cc(['react-flow__controls', orientationClass, className])}
       position={position}
       style={style}
       data-testid="rf__controls"
diff --git a/packages/react/src/additional-components/Controls/types.ts b/packages/react/src/additional-components/Controls/types.ts
index e9015dfb..f6ea0f8b 100644
--- a/packages/react/src/additional-components/Controls/types.ts
+++ b/packages/react/src/additional-components/Controls/types.ts
@@ -31,6 +31,7 @@ export type ControlProps = {
   /** ClassName applied to container */
   className?: string;
   'aria-label'?: string;
+  orientation?: 'horizontal' | 'vertical';
 };
 
 export type ControlButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5d8c5aeb..109271be 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @xyflow/svelte
 
+## 0.0.40
+
+- add `orientation` ('horizontal' or 'vertical'), `style` and `class` prop for `Controls` component
+- allow multiple keys for `deleteKey`, `selectionKey`, `multiSelectionKey`, `panActivationKey` and `zoomActivationKey`
+- fix node observe / unobserve
+- fix edge and node types
+- active context menu releases pressed keys to reset selection
+
 ## 0.0.39
 
 ## ⚠️ Breaking changes
diff --git a/packages/svelte/src/lib/plugins/Controls/Controls.svelte b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
index 042b2be5..aedcc182 100644
--- a/packages/svelte/src/lib/plugins/Controls/Controls.svelte
+++ b/packages/svelte/src/lib/plugins/Controls/Controls.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import cc from 'classcat';
+
   import Panel from '$lib/container/Panel/Panel.svelte';
   import { useStore } from '$lib/store';
   import ControlButton from './ControlButton.svelte';
@@ -22,6 +24,11 @@
   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';
+
+  let className: $$Props['class'] = '';
+  export { className as class };
 
   const {
     zoomIn,
@@ -66,13 +73,16 @@
     nodesConnectable.set(isInteractive);
     elementsSelectable.set(isInteractive);
   };
+
+  $: orientationClass = orientation === 'horizontal' ? 'horizontal' : 'vertical';
 </script>
 
 <Panel
-  class="svelte-flow__controls"
+  class={cc(['svelte-flow__controls', orientationClass, className])}
   {position}
   data-testid="svelte-flow__controls"
   aria-label={ariaLabel ?? 'Svelte Flow controls'}
+  {style}
 >
   <slot name="before" />
   {#if showZoom}
diff --git a/packages/svelte/src/lib/plugins/Controls/types.ts b/packages/svelte/src/lib/plugins/Controls/types.ts
index fca86b00..1de8dee9 100644
--- a/packages/svelte/src/lib/plugins/Controls/types.ts
+++ b/packages/svelte/src/lib/plugins/Controls/types.ts
@@ -18,6 +18,9 @@ export type ControlsProps = {
   buttonColor?: string;
   buttonColorHover?: string;
   'aria-label'?: string;
+  style?: string;
+  class?: string;
+  orientation?: 'horizontal' | 'vertical';
 };
 
 export type ControlButtonProps = HTMLButtonAttributes & {
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index 48e82af8..4a519893 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -397,6 +397,13 @@ svg.xy-flow__connectionline {
 }
 
 .xy-flow__controls {
+  display: flex;
+  flex-direction: column;
+
+  &.horizontal {
+    flex-direction: row;
+  }
+
   &-button {
     display: flex;
     justify-content: center;