alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(pane): cleanup

Browse Source
This commit is contained in:
moklick
2025-10-16 10:33:47 +02:00
parent 6bb64b3ed6
commit a16fc575c8
2 changed files with 6 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/react/src/container/Pane/index.tsx
View File

@@ -1,7 +1,3 @@
/**
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import { import {
useRef, useRef,
type MouseEvent as ReactMouseEvent, type MouseEvent as ReactMouseEvent,
@@ -121,7 +117,9 @@ export function Pane({
const onClickCapture = (event: ReactMouseEvent) => event.stopPropagation(); const onClickCapture = (event: ReactMouseEvent) => event.stopPropagation();
const onPointerDown = (event: ReactPointerEvent): void => { // We are using capture here in order to prevent other pointer events
// to be able to create a selection above a node or an edge
const onPointerDownCapture = (event: ReactPointerEvent): void => {
const { resetSelectedElements, domNode } = store.getState(); const { resetSelectedElements, domNode } = store.getState();
containerBounds.current = domNode?.getBoundingClientRect(); containerBounds.current = domNode?.getBoundingClientRect();
@@ -272,7 +270,7 @@ export function Pane({
onPointerEnter={hasActiveSelection ? undefined : onPaneMouseEnter} onPointerEnter={hasActiveSelection ? undefined : onPaneMouseEnter}
onPointerMove={hasActiveSelection ? onPointerMove : onPaneMouseMove} onPointerMove={hasActiveSelection ? onPointerMove : onPaneMouseMove}
onPointerUp={hasActiveSelection ? onPointerUp : undefined} onPointerUp={hasActiveSelection ? onPointerUp : undefined}
onPointerDownCapture={hasActiveSelection ? onPointerDown : undefined} onPointerDownCapture={hasActiveSelection ? onPointerDownCapture : undefined}
onClickCapture={hasActiveSelection ? onClickCapture : undefined} onClickCapture={hasActiveSelection ? onClickCapture : undefined}
onPointerLeave={onPaneMouseLeave} onPointerLeave={onPaneMouseLeave}
ref={container} ref={container}

4
packages/svelte/src/lib/container/Pane/Pane.svelte
View File

@@ -91,7 +91,7 @@
} }
// We start the selection process when the user clicks down on the pane // We start the selection process when the user clicks down on the pane
function onPointerDown(event: PointerEvent) { function onPointerDownCapture(event: PointerEvent) {
containerBounds = container?.getBoundingClientRect(); containerBounds = container?.getBoundingClientRect();
const isNoKeyEvent = const isNoKeyEvent =
@@ -235,7 +235,7 @@
class:dragging={store.dragging} class:dragging={store.dragging}
class:selection={isSelecting} class:selection={isSelecting}
onclick={hasActiveSelection ? undefined : wrapHandler(onClick, container)} onclick={hasActiveSelection ? undefined : wrapHandler(onClick, container)}
onpointerdowncapture={hasActiveSelection ? onPointerDown : undefined} onpointerdowncapture={hasActiveSelection ? onPointerDownCapture : undefined}
onpointermove={hasActiveSelection ? onPointerMove : undefined} onpointermove={hasActiveSelection ? onPointerMove : undefined}
onpointerup={hasActiveSelection ? onPointerUp : undefined} onpointerup={hasActiveSelection ? onPointerUp : undefined}
oncontextmenu={wrapHandler(onContextMenu, container)} oncontextmenu={wrapHandler(onContextMenu, container)}