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

use pointer events instead of mouse events

Browse Source
This commit is contained in:
peterkogo
2025-01-21 12:44:57 +01:00
parent 938647736e
commit 04b9c828bb
9 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/svelte/src/routes/examples/overview/Flow.svelte
View File

@@ -172,11 +172,11 @@
snapGrid={[25, 25]}
oninit={() => console.log('on init')}
onnodeclick={(event) => console.log('on node click', event)}
onnodemouseenter={(event) => console.log('on node enter', event)}
onnodemouseleave={(event) => console.log('on node leave', event)}
onnodepointerenter={(event) => console.log('on node enter', event)}
onnodepointerleave={(event) => console.log('on node leave', event)}
onedgeclick={(event) => console.log('edge click', event)}
onedgemouseenter={(event) => console.log('edge enter', event)}
onedgemouseleave={(event) => console.log('edge leave', event)}
onedgepointerenter={(event) => console.log('edge enter', event)}
onedgepointerleave={(event) => console.log('edge leave', event)}
onconnectstart={(event) => console.log('on connect start', event)}
onconnect={(event) => console.log('on connect', event)}
onconnectend={(event) => console.log('on connect end', event)}

20
packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte
View File

@@ -14,8 +14,8 @@
store,
onedgeclick,
onedgecontextmenu,
onedgemouseenter,
onedgemouseleave
onedgepointerenter,
onedgepointerleave
}: { store: SvelteFlowStore; edge: EdgeLayouted } & EdgeEvents = $props();
let {
@@ -60,7 +60,7 @@
markerEnd ? `url('#${getMarkerId(markerEnd, store.flowId)}')` : undefined
);
function onclick(event: MouseEvent | TouchEvent) {
function onclick(event: MouseEvent) {
const edge = store.edgeLookup.get(id);
if (edge) {
@@ -69,9 +69,9 @@
}
}
function onMouseEvent(
event: MouseEvent,
callback: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void
function onMouseEvent<T = MouseEvent>(
event: T,
callback: ({ edge, event }: { edge: Edge; event: T }) => void
) {
const edge = store.edgeLookup.get(id);
@@ -97,14 +97,14 @@
onMouseEvent(e, onedgecontextmenu);
}
: undefined}
onmouseenter={onedgemouseenter
onpointerenter={onedgepointerenter
? (e) => {
onMouseEvent(e, onedgemouseenter);
onMouseEvent(e, onedgepointerenter);
}
: undefined}
onmouseleave={onedgemouseleave
onpointerleave={onedgepointerleave
? (e) => {
onMouseEvent(e, onedgemouseleave);
onMouseEvent(e, onedgepointerleave);
}
: undefined}
aria-label={ariaLabel === null

4
packages/svelte/src/lib/components/NodeSelection/NodeSelection.svelte
View File

@@ -24,12 +24,12 @@
return null;
});
function oncontextmenu(event: MouseEvent | TouchEvent) {
function oncontextmenu(event: MouseEvent) {
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectioncontextmenu?.({ nodes: selectedNodes, event });
}
function onclick(event: MouseEvent | TouchEvent) {
function onclick(event: MouseEvent) {
const selectedNodes = store.nodes.filter((n) => n.selected);
onselectionclick?.({ nodes: selectedNodes, event });
}

12
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
View File

@@ -19,9 +19,9 @@
onnodedrag,
onnodedragstart,
onnodedragstop,
onnodemouseenter,
onnodemouseleave,
onnodemousemove,
onnodepointerenter,
onnodepointerleave,
onnodepointermove,
onnodecontextmenu
}: NodeWrapperProps & NodeEvents = $props();
@@ -200,9 +200,9 @@
style:visibility={initialized ? 'visible' : 'hidden'}
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
onclick={onSelectNodeHandler}
onpointerenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined}
onpointerleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined}
onpointermove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined}
onpointerenter={onnodepointerenter ? (event) => onnodepointerenter({ node, event }) : undefined}
onpointerleave={onnodepointerleave ? (event) => onnodepointerleave({ node, event }) : undefined}
onpointermove={onnodepointermove ? (event) => onnodepointermove({ node, event }) : undefined}
oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined}
>
<NodeComponent

8
packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte
View File

@@ -9,8 +9,8 @@
store,
onedgeclick,
onedgecontextmenu,
onedgemouseenter,
onedgemouseleave
onedgepointerenter,
onedgepointerleave
}: { store: SvelteFlowStore } & EdgeEvents = $props();
</script>
@@ -25,8 +25,8 @@
{edge}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
{onedgepointerenter}
{onedgepointerleave}
/>
{/each}

12
packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte
View File

@@ -11,9 +11,9 @@
nodeClickDistance,
onnodeclick,
onnodecontextmenu,
onnodemouseenter,
onnodemousemove,
onnodemouseleave,
onnodepointerenter,
onnodepointermove,
onnodepointerleave,
onnodedrag,
onnodedragstart,
onnodedragstop
@@ -51,9 +51,9 @@
{resizeObserver}
{nodeClickDistance}
{onnodeclick}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodepointerenter}
{onnodepointermove}
{onnodepointerleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}

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

@@ -73,7 +73,7 @@
// Used to prevent click events when the user lets go of the selectionKey during a selection
let selectionInProgress = false;
function onClick(event: MouseEvent | TouchEvent) {
function onClick(event: MouseEvent) {
// We prevent click events when the user let go of the selectionKey during a selection
if (selectionInProgress) {
selectionInProgress = false;

20
packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
View File

@@ -38,15 +38,15 @@
onnodedrag,
onnodedragstart,
onnodedragstop,
onnodemouseenter,
onnodemousemove,
onnodemouseleave,
onnodepointerenter,
onnodepointermove,
onnodepointerleave,
onselectionclick,
onselectioncontextmenu,
onedgeclick,
onedgecontextmenu,
onedgemouseenter,
onedgemouseleave,
onedgepointerenter,
onedgepointerleave,
onpaneclick,
onpanecontextmenu,
panOnScrollMode = PanOnScrollMode.Free,
@@ -163,8 +163,8 @@
{store}
{onedgeclick}
{onedgecontextmenu}
{onedgemouseenter}
{onedgemouseleave}
{onedgepointerenter}
{onedgepointerleave}
/>
<ConnectionLine
{store}
@@ -180,9 +180,9 @@
{nodeClickDistance}
{onnodeclick}
{onnodecontextmenu}
{onnodemouseenter}
{onnodemousemove}
{onnodemouseleave}
{onnodepointerenter}
{onnodepointermove}
{onnodepointerleave}
{onnodedrag}
{onnodedragstart}
{onnodedragstop}

20
packages/svelte/src/lib/types/events.ts
View File

@@ -33,24 +33,24 @@ export type NodeEvents = {
onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodemouseenter?: NodeEventWithPointer;
onnodemouseleave?: NodeEventWithPointer;
onnodemousemove?: NodeEventWithPointer;
onnodepointerenter?: NodeEventWithPointer;
onnodepointerleave?: NodeEventWithPointer;
onnodepointermove?: NodeEventWithPointer;
};
export type NodeSelectionEvents = {
onselectioncontextmenu?: NodesEventWithPointer;
onselectionclick?: NodesEventWithPointer;
onselectioncontextmenu?: NodesEventWithPointer<MouseEvent>;
onselectionclick?: NodesEventWithPointer<MouseEvent>;
};
export type PaneEvents = {
onpaneclick?: ({ event }: { event: PointerEvent }) => void;
onpaneclick?: ({ event }: { event: MouseEvent }) => void;
onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
};
export type EdgeEvents = {
onedgeclick?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgemouseenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgemouseleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void;
onedgepointerenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgepointerleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
};