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

feat(props): add nodeClickDistance

Browse Source
This commit is contained in:
moklick
2024-07-15 15:28:27 +02:00
parent edf7a8eec0
commit da35b9d7fb
16 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/NodeWrapper/index.tsx
View File

@@ -39,6 +39,7 @@ export function NodeWrapper<NodeType extends Node>({
rfId,
nodeTypes,
nodeExtent,
nodeClickDistance,
onError,
}: NodeWrapperProps<NodeType>) {
const { node, internals, isParent } = useStore((s) => {
@@ -76,6 +77,7 @@ export function NodeWrapper<NodeType extends Node>({
handleSelector: node.dragHandle,
nodeId: id,
isSelectable,
nodeClickDistance,
});
const moveSelectedNodes = useMoveSelectedNodes();

1
packages/react/src/container/FlowRenderer/index.tsx
View File

@@ -22,6 +22,7 @@ export type FlowRendererProps<NodeType extends Node = Node> = Omit<
| 'selectNodesOnDrag'
| 'defaultMarkerColor'
| 'rfId'
| 'nodeClickDistance'
> & {
isControlledViewport: boolean;
children: ReactNode;

3
packages/react/src/container/GraphView/index.tsx
View File

@@ -33,6 +33,7 @@ export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge =
| 'defaultViewport'
| 'disableKeyboardA11y'
| 'paneClickDistance'
| 'nodeClickDistance'
>
> & {
rfId: string;
@@ -86,6 +87,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
onPaneScroll,
onPaneContextMenu,
paneClickDistance,
nodeClickDistance,
onEdgeContextMenu,
onEdgeMouseEnter,
onEdgeMouseMove,
@@ -183,6 +185,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
onNodeMouseMove={onNodeMouseMove}
onNodeMouseLeave={onNodeMouseLeave}
onNodeContextMenu={onNodeContextMenu}
nodeClickDistance={nodeClickDistance}
onlyRenderVisibleElements={onlyRenderVisibleElements}
noPanClassName={noPanClassName}
noDragClassName={noDragClassName}

2
packages/react/src/container/NodeRenderer/index.tsx
View File

@@ -24,6 +24,7 @@ export type NodeRendererProps<NodeType extends Node> = Pick<
| 'disableKeyboardA11y'
| 'nodeExtent'
| 'nodeTypes'
| 'nodeClickDistance'
>;
const selector = (s: ReactFlowState) => ({
@@ -86,6 +87,7 @@ function NodeRendererComponent<NodeType extends Node>(props: NodeRendererProps<N
nodesConnectable={nodesConnectable}
nodesFocusable={nodesFocusable}
elementsSelectable={elementsSelectable}
nodeClickDistance={props.nodeClickDistance}
onError={onError}
/>
);

2
packages/react/src/container/ReactFlow/index.tsx
View File

@@ -104,6 +104,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
onPaneScroll,
onPaneContextMenu,
paneClickDistance = 0,
nodeClickDistance = 0,
children,
onReconnect,
onReconnectStart,
@@ -202,6 +203,7 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
onPaneScroll={onPaneScroll}
onPaneContextMenu={onPaneContextMenu}
paneClickDistance={paneClickDistance}
nodeClickDistance={nodeClickDistance}
onSelectionContextMenu={onSelectionContextMenu}
onSelectionStart={onSelectionStart}
onSelectionEnd={onSelectionEnd}

3
packages/react/src/hooks/useDrag.ts
View File

@@ -11,6 +11,7 @@ type UseDragParams = {
handleSelector?: string;
nodeId?: string;
isSelectable?: boolean;
nodeClickDistance?: number;
};
/**
@@ -25,6 +26,7 @@ export function useDrag({
handleSelector,
nodeId,
isSelectable,
nodeClickDistance,
}: UseDragParams) {
const store = useStoreApi();
const [dragging, setDragging] = useState<boolean>(false);
@@ -59,6 +61,7 @@ export function useDrag({
domNode: nodeRef.current,
isSelectable,
nodeId,
nodeClickDistance,
});
return () => {
xyDrag.current?.destroy();

4
packages/react/src/types/component-props.ts
View File

@@ -227,6 +227,10 @@ export interface ReactFlowProps<NodeType extends Node = Node, EdgeType extends E
* @default 0
*/
paneClickDistance?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
nodeClickDistance?: number;
/** This handler gets called before the user deletes nodes or edges and provides a way to abort the deletion by returning false. */
onBeforeDelete?: OnBeforeDelete<NodeType, EdgeType>;
/** Custom node types to be available in a flow.

1
packages/react/src/types/nodes.ts
View File

@@ -53,6 +53,7 @@ export type NodeWrapperProps<NodeType extends Node> = {
nodeTypes?: NodeTypes;
nodeExtent?: CoordinateExtent;
onError?: OnError;
nodeClickDistance?: number;
};
export type BuiltInNode = Node<{ label: string }, 'input' | 'output' | 'default'>;

4
packages/svelte/src/lib/actions/drag/index.ts
View File

@@ -10,6 +10,7 @@ export type UseDragParams = {
handleSelector?: string;
nodeId?: string;
isSelectable?: boolean;
nodeClickDistance?: number;
onDrag?: OnDrag;
onDragStart?: OnDrag;
onDragStop?: OnDrag;
@@ -60,7 +61,8 @@ export default function drag(domNode: Element, params: UseDragParams) {
noDragClassName: params.noDragClass,
handleSelector: params.handleSelector,
nodeId: params.nodeId,
isSelectable: params.isSelectable
isSelectable: params.isSelectable,
nodeClickDistance: params.nodeClickDistance
});
}

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

@@ -43,6 +43,7 @@
export let dragHandle: $$Props['dragHandle'] = undefined;
export let initialized: $$Props['initialized'] = false;
export let parentId: $$Props['parentId'] = undefined;
export let nodeClickDistance: $$Props['nodeClickDistance'] = undefined;
let className: string = '';
export { className as class };
@@ -156,6 +157,7 @@
disabled: false,
handleSelector: dragHandle,
noDragClass: 'nodrag',
nodeClickDistance,
onNodeMouseDown: handleNodeSelection,
onDrag: (event, _, targetNode, nodes) => {
dispatchNodeEvent('nodedrag', { event, targetNode, nodes });

1
packages/svelte/src/lib/components/NodeWrapper/types.ts
View File

@@ -34,4 +34,5 @@ export type NodeWrapperProps = Pick<
zIndex: number;
node: InternalNode;
initialized: boolean;
nodeClickDistance?: number;
};

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

@@ -4,6 +4,11 @@
import { NodeWrapper } from '$lib/components/NodeWrapper';
import { useStore } from '$lib/store';
import type { NodeRendererProps } from './types';
type $$Props = NodeRendererProps;
export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
const {
visibleNodes,
@@ -76,6 +81,7 @@
measuredHeight={node.measured.height}
parentId={node.parentId}
{resizeObserver}
{nodeClickDistance}
on:nodeclick
on:nodemouseenter
on:nodemousemove

3
packages/svelte/src/lib/container/NodeRenderer/types.ts Normal file
View File

@@ -0,0 +1,3 @@
export type NodeRendererProps = {
nodeClickDistance?: number;
};

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

@@ -80,6 +80,7 @@
export let oninit: $$Props['oninit'] = undefined;
export let nodeOrigin: $$Props['nodeOrigin'] = undefined;
export let paneClickDistance: $$Props['paneClickDistance'] = 0;
export let nodeClickDistance: $$Props['nodeClickDistance'] = 0;
export let defaultMarkerColor = '#b1b1b7';
@@ -254,6 +255,7 @@
<div class="svelte-flow__edgelabel-renderer" />
<div class="svelte-flow__viewport-portal" />
<NodeRenderer
{nodeClickDistance}
on:nodeclick
on:nodemouseenter
on:nodemousemove

4
packages/svelte/src/lib/container/SvelteFlow/types.ts
View File

@@ -138,6 +138,10 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
* @default 0
*/
paneClickDistance?: number;
/** Distance that the mouse can move between mousedown/up that will trigger a click
* @default 0
*/
nodeClickDistance?: number;
/** Minimum zoom level
* @default 0.5
*/

11
packages/system/src/xydrag/XYDrag.ts
View File

@@ -84,6 +84,7 @@ export type DragUpdateParams = {
isSelectable?: boolean;
nodeId?: string;
domNode: Element;
nodeClickDistance?: number;
};
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -105,7 +106,14 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
let abortDrag = false; // prevents unintentional dragging on multitouch
// public functions
function update({ noDragClassName, handleSelector, domNode, isSelectable, nodeId }: DragUpdateParams) {
function update({
noDragClassName,
handleSelector,
domNode,
isSelectable,
nodeId,
nodeClickDistance = 0,
}: DragUpdateParams) {
d3Selection = select(domNode);
function updateNodes({ x, y }: XYPosition, dragEvent: MouseEvent | null) {
const {
@@ -264,6 +272,7 @@ export function XYDrag<OnNodeDrag extends (e: any, nodes: any, node: any) => voi
}
const d3DragInstance = drag()
.clickDistance(nodeClickDistance)
.on('start', (event: UseDragEvent) => {
const { domNode, nodeDragThreshold, transform, snapGrid, snapToGrid } = getStoreItems();