Merge pull request #5362 from xyflow/refactor/deactivate-panel-selection

refactor(panel): simplify / fix panel pointer events

.changeset/friendly-pears-float.md

@@ -0,0 +1,7 @@
+---
+'@xyflow/react': patch
+'@xyflow/svelte': patch
+'@xyflow/system': patch
+---
+
+Remove pointer events from Panel via CSS while a selection gets dragged

packages/react/src/components/Panel/index.tsx

@@ -2,9 +2,6 @@ import { HTMLAttributes, forwardRef } from 'react';
 import cc from 'classcat';
 import type { PanelPosition } from '@xyflow/system';
 
-import { useStore } from '../../hooks/useStore';
-import type { ReactFlowState } from '../../types';
-
 /**
  * @expand
  */
@@ -16,8 +13,6 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   position?: PanelPosition;
 };
 
-const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all');
-
 /**
  * The `<Panel />` component helps you position content above the viewport.
  * It is used internally by the [`<MiniMap />`](/api-reference/components/minimap)
@@ -45,16 +40,10 @@ const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all')
  */
 export const Panel = forwardRef<HTMLDivElement, PanelProps>(
   ({ position = 'top-left', children, className, style, ...rest }, ref) => {
-    const pointerEvents = useStore(selector);
     const positionClasses = `${position}`.split('-');
 
     return (
-      <div
-        className={cc(['react-flow__panel', className, ...positionClasses])}
-        style={{ ...style, pointerEvents }}
-        ref={ref}
-        {...rest}
-      >
+      <div className={cc(['react-flow__panel', className, ...positionClasses])} style={style} ref={ref} {...rest}>
         {children}
       </div>
     );

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -1,19 +1,11 @@
 <script lang="ts">
   import type { PanelProps } from './types';
-  import { useStore } from '$lib/store';
 
   let { position = 'top-right', style, class: className, children, ...rest }: PanelProps = $props();
 
-  let store = $derived(useStore());
-
   let positionClasses = $derived(`${position}`.split('-'));
 </script>
 
-<div
-  class={['svelte-flow__panel', className, ...positionClasses]}
-  {style}
-  style:pointer-events={store.selectionRectMode ? 'none' : ''}
-  {...rest}
->
+<div class={['svelte-flow__panel', className, ...positionClasses]} {style} {...rest}>
   {@render children?.()}
 </div>

packages/system/src/styles/init.css

@@ -265,6 +265,10 @@ svg.xy-flow__connectionline {
   pointer-events: all;
 }
 
+.xy-flow__pane.selection .xy-flow__panel {
+  pointer-events: none;
+}
+
 .xy-flow__panel {
   position: absolute;
   z-index: 5;