diff --git a/packages/react/src/components/Panel/index.tsx b/packages/react/src/components/Panel/index.tsx index 16fe7841..77fc1869 100644 --- a/packages/react/src/components/Panel/index.tsx +++ b/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 & { position?: PanelPosition; }; -const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all'); - /** * The `` component helps you position content above the viewport. * It is used internally by the [``](/api-reference/components/minimap) @@ -45,16 +40,10 @@ const selector = (s: ReactFlowState) => (s.userSelectionActive ? 'none' : 'all') */ export const Panel = forwardRef( ({ position = 'top-left', children, className, style, ...rest }, ref) => { - const pointerEvents = useStore(selector); const positionClasses = `${position}`.split('-'); return ( -
+
{children}
); diff --git a/packages/svelte/src/lib/container/Panel/Panel.svelte b/packages/svelte/src/lib/container/Panel/Panel.svelte index 314da233..feabcea2 100644 --- a/packages/svelte/src/lib/container/Panel/Panel.svelte +++ b/packages/svelte/src/lib/container/Panel/Panel.svelte @@ -1,19 +1,11 @@ -
+
{@render children?.()}
diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css index 7b4b92be..2d342000 100644 --- a/packages/system/src/styles/init.css +++ b/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;