feat(controls): add orientation, style and class props closes #4069

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>
   );

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

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"

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

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

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}

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 & {

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;