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

Export event types and use pointer events wherever possible

Browse Source
This commit is contained in:
peterkogo
2025-01-14 13:15:40 +01:00
parent fbbe4e2529
commit ce6fcc7a82
4 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte
+3 -3
View File
@@ -202,9 +202,9 @@
style:visibility={initialized ? 'visible' : 'hidden'} style:visibility={initialized ? 'visible' : 'hidden'}
style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}" style="{style ?? ''};{inlineStyleDimensions.width}{inlineStyleDimensions.height}"
onclick={onSelectNodeHandler} onclick={onSelectNodeHandler}
onmouseenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined} onpointerenter={onnodemouseenter ? (event) => onnodemouseenter({ node, event }) : undefined}
onmouseleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined} onpointerleave={onnodemouseleave ? (event) => onnodemouseleave({ node, event }) : undefined}
onmousemove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined} onpointermove={onnodemousemove ? (event) => onnodemousemove({ node, event }) : undefined}
oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined} oncontextmenu={onnodecontextmenu ? (event) => onnodecontextmenu({ node, event }) : undefined}
> >
<NodeComponent <NodeComponent
packages/svelte/src/lib/container/SvelteFlow/types.ts
+2 -2
View File
@@ -60,7 +60,7 @@ export type SvelteFlowProps = NodeEvents &
* } * }
* ]); * ]);
*/ */
nodes: Node[]; nodes?: Node[];
/** An array of edges to render in a controlled flow. /** An array of edges to render in a controlled flow.
* @example * @example
* const edges = $state.raw([ * const edges = $state.raw([
@@ -71,7 +71,7 @@ export type SvelteFlowProps = NodeEvents &
* } * }
* ]); * ]);
*/ */
edges: Edge[]; edges?: Edge[];
/** Custom node types to be available in a flow. /** Custom node types to be available in a flow.
* *
* Svelte Flow matches a node's type to a component in the nodeTypes object. * Svelte Flow matches a node's type to a component in the nodeTypes object.
packages/svelte/src/lib/index.ts
+1
View File
@@ -54,6 +54,7 @@ export type {
export type { HandleProps, FitViewOptions } from '$lib/types/general'; export type { HandleProps, FitViewOptions } from '$lib/types/general';
export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes'; export type { Node, NodeTypes, BuiltInNode, NodeProps, InternalNode } from '$lib/types/nodes';
export type { SvelteFlowStore } from '$lib/store/types'; export type { SvelteFlowStore } from '$lib/store/types';
export * from '$lib/types/events';
// system types // system types
export { export {
packages/svelte/src/lib/types/events.ts
+16 -16
View File
@@ -1,38 +1,38 @@
import type { Edge } from './edges'; import type { Edge } from './edges';
import type { Node } from './nodes'; import type { Node } from './nodes';
export type NodeEventWithPointer = ({ export type NodeEventWithPointer<T = PointerEvent> = ({
node, node,
event event
}: { }: {
node: Node; node: Node;
event: MouseEvent | TouchEvent; event: T;
}) => void; }) => void;
export type NodesEventWithPointer = ({ export type NodesEventWithPointer<T = PointerEvent> = ({
nodes, nodes,
event event
}: { }: {
nodes: Node[]; nodes: Node[];
event: MouseEvent | TouchEvent; event: T;
}) => void; }) => void;
export type NodeTargetEventWithPointer = ({ export type NodeTargetEventWithPointer<T = PointerEvent> = ({
targetNode, targetNode,
nodes, nodes,
event event
}: { }: {
targetNode: Node | null; targetNode: Node | null;
nodes: Node[]; nodes: Node[];
event: MouseEvent | TouchEvent; event: T;
}) => void; }) => void;
export type NodeEvents = { export type NodeEvents = {
onnodeclick?: NodeEventWithPointer; onnodeclick?: NodeEventWithPointer<MouseEvent | TouchEvent>;
onnodecontextmenu?: NodeEventWithPointer; onnodecontextmenu?: NodeEventWithPointer<MouseEvent>;
onnodedrag?: NodeTargetEventWithPointer; onnodedrag?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodedragstart?: NodeTargetEventWithPointer; onnodedragstart?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodedragstop?: NodeTargetEventWithPointer; onnodedragstop?: NodeTargetEventWithPointer<MouseEvent | TouchEvent>;
onnodemouseenter?: NodeEventWithPointer; onnodemouseenter?: NodeEventWithPointer;
onnodemouseleave?: NodeEventWithPointer; onnodemouseleave?: NodeEventWithPointer;
onnodemousemove?: NodeEventWithPointer; onnodemousemove?: NodeEventWithPointer;
@@ -44,13 +44,13 @@ export type NodeSelectionEvents = {
}; };
export type PaneEvents = { export type PaneEvents = {
onpaneclick?: ({ event }: { event: MouseEvent | TouchEvent }) => void; onpaneclick?: ({ event }: { event: PointerEvent }) => void;
onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void; onpanecontextmenu?: ({ event }: { event: MouseEvent }) => void;
}; };
export type EdgeEvents = { export type EdgeEvents = {
onedgeclick?: ({ edge, event }: { edge: Edge; event: MouseEvent | TouchEvent }) => void; onedgeclick?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void; onedgecontextmenu?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgemouseenter?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void; onedgemouseenter?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
onedgemouseleave?: ({ edge, event }: { edge: Edge; event: MouseEvent }) => void; onedgemouseleave?: ({ edge, event }: { edge: Edge; event: PointerEvent }) => void;
}; };