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

refactor(nodes): use-d3drag

Browse Source
This commit is contained in:
moklick
2022-04-13 11:19:17 +02:00
parent 3bd756d8a6
commit f2004fe45a
11 changed files with 154 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Nodes/wrapNode.tsx
+51 -62
View File
@@ -1,5 +1,4 @@
import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
import cc from 'classcat';
import shallow from 'zustand/shallow';
@@ -7,6 +6,7 @@ import { useStore, useStoreApi } from '../../store';
import { Provider } from '../../contexts/NodeIdContext';
import { NodeProps, WrapNodeProps, ReactFlowState } from '../../types';
import useMemoizedMouseHandler from './useMemoizedMouseHandler';
import useDrag, { UseDragEvent, UseDragData } from '../../hooks/useDrag';
const selector = (s: ReactFlowState) => ({
addSelectedNodes: s.addSelectedNodes,
@@ -20,7 +20,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
id,
type,
data,
scale,
xPos,
yPos,
selected,
@@ -42,8 +41,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
sourcePosition,
targetPosition,
hidden,
snapToGrid,
snapGrid,
dragging,
resizeObserver,
dragHandle,
@@ -72,11 +69,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
[zIndex, xPos, yPos, hasPointerEvents, style]
);
const grid = useMemo(
() => (snapToGrid ? snapGrid : [1, 1])! as [number, number],
[snapToGrid, snapGrid?.[0], snapGrid?.[1]]
);
const onMouseEnterHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseEnter);
const onMouseMoveHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseMove);
const onMouseLeaveHandler = useMemoizedMouseHandler(id, dragging, store.getState, onMouseLeave);
@@ -104,7 +96,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
);
const onDragStart = useCallback(
(event: DraggableEvent) => {
(event: UseDragEvent) => {
if (selectNodesOnDrag && isSelectable) {
store.setState({ nodesSelectionActive: false });
@@ -123,28 +115,28 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
if (onNodeDragStart) {
const node = store.getState().nodeInternals.get(id)!;
onNodeDragStart(event as MouseEvent, { ...node });
onNodeDragStart(event.sourceEvent as MouseEvent, { ...node });
}
},
[id, selected, selectNodesOnDrag, isSelectable, onNodeDragStart]
);
const onDrag = useCallback(
(event: DraggableEvent, draggableData: DraggableData) => {
updateNodePosition({ id, dragging: true, diff: { x: draggableData.deltaX, y: draggableData.deltaY } });
(event: UseDragEvent, dragPos: UseDragData) => {
updateNodePosition({ id, dragging: true, diff: { x: dragPos.dx, y: dragPos.dy } });
if (onNodeDrag) {
const node = store.getState().nodeInternals.get(id)!;
onNodeDrag(event as MouseEvent, {
onNodeDrag(event.sourceEvent as MouseEvent, {
...node,
dragging: true,
position: {
x: node.position.x + draggableData.deltaX,
y: node.position.y + draggableData.deltaY,
x: node.position.x + dragPos.dx,
y: node.position.y + dragPos.dy,
},
positionAbsolute: {
x: (node.positionAbsolute?.x || 0) + draggableData.deltaX,
y: (node.positionAbsolute?.y || 0) + draggableData.deltaY,
x: (node.positionAbsolute?.x || 0) + dragPos.dx,
y: (node.positionAbsolute?.y || 0) + dragPos.dy,
},
});
}
@@ -153,7 +145,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
);
const onDragStop = useCallback(
(event: DraggableEvent) => {
(event: UseDragEvent) => {
// onDragStop also gets called when user just clicks on a node.
// Because of that we set dragging to true inside the onDrag handler and handle the click here
let node;
@@ -168,7 +160,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
}
if (onClick && node) {
onClick(event as MouseEvent, { ...node });
onClick(event.sourceEvent as MouseEvent, { ...node });
}
return;
@@ -180,7 +172,7 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
});
if (onNodeDragStop && node) {
onNodeDragStop(event as MouseEvent, { ...node, dragging: false });
onNodeDragStop(event.sourceEvent as MouseEvent, { ...node, dragging: false });
}
},
[id, isSelectable, selectNodesOnDrag, onClick, onNodeDragStop, dragging, selected]
@@ -215,6 +207,16 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
}
}, [id, type, sourcePosition, targetPosition]);
useDrag({
onStart: onDragStart,
onDrag: onDrag,
onStop: onDragStop,
nodeRef: nodeElement,
disabled: !isDraggable,
noDragClassName,
handleSelector: dragHandle,
});
if (hidden) {
return null;
}
@@ -232,48 +234,35 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
]);
return (
<DraggableCore
onStart={onDragStart}
onDrag={onDrag}
onStop={onDragStop}
scale={scale}
disabled={!isDraggable}
cancel={`.${noDragClassName}`}
nodeRef={nodeElement}
grid={grid}
enableUserSelectHack={false}
handle={dragHandle}
<div
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
onMouseEnter={onMouseEnterHandler}
onMouseMove={onMouseMoveHandler}
onMouseLeave={onMouseLeaveHandler}
onContextMenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
onDoubleClick={onNodeDoubleClickHandler}
data-id={id}
>
<div
className={nodeClasses}
ref={nodeElement}
style={nodeStyle}
onMouseEnter={onMouseEnterHandler}
onMouseMove={onMouseMoveHandler}
onMouseLeave={onMouseLeaveHandler}
onContextMenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
onDoubleClick={onNodeDoubleClickHandler}
data-id={id}
>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
xPos={xPos}
yPos={yPos}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
dragging={dragging}
dragHandle={dragHandle}
zIndex={zIndex}
/>
</Provider>
</div>
</DraggableCore>
<Provider value={id}>
<NodeComponent
id={id}
data={data}
type={type}
xPos={xPos}
yPos={yPos}
selected={selected}
isConnectable={isConnectable}
sourcePosition={sourcePosition}
targetPosition={targetPosition}
dragging={dragging}
dragHandle={dragHandle}
zIndex={zIndex}
/>
</Provider>
</div>
);
};
src/components/NodesSelection/index.tsx
+18 -33
View File
@@ -4,13 +4,13 @@
*/
import React, { memo, useMemo, useCallback, useRef, MouseEvent } from 'react';
import { DraggableCore, DraggableData } from 'react-draggable';
import cc from 'classcat';
import shallow from 'zustand/shallow';
import { useStore } from '../../store';
import { Node, ReactFlowState } from '../../types';
import { getRectOfNodes } from '../../utils/graph';
import useDrag, { UseDragData, UseDragEvent } from '../../hooks/useDrag';
export interface NodesSelectionProps {
onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
@@ -27,8 +27,6 @@ const selector = (s: ReactFlowState) => ({
selectedNodes: Array.from(s.nodeInternals)
.filter(([_, n]) => n.selected)
.map(([_, n]) => n),
snapToGrid: s.snapToGrid,
snapGrid: s.snapGrid,
updateNodePosition: s.updateNodePosition,
});
@@ -39,15 +37,10 @@ function NodesSelection({
onSelectionContextMenu,
noPanClassName,
}: NodesSelectionProps) {
const { transform, userSelectionActive, selectedNodes, snapToGrid, snapGrid, updateNodePosition } = useStore(
selector,
shallow
);
const { transform, userSelectionActive, selectedNodes, updateNodePosition } = useStore(selector, shallow);
const [tX, tY, tScale] = transform;
const nodeRef = useRef(null);
const grid = useMemo(() => (snapToGrid ? snapGrid : [1, 1])! as [number, number], [snapToGrid, snapGrid]);
const style = useMemo(
() => ({
transform: `translate(${tX}px,${tY}px) scale(${tScale})`,
@@ -68,34 +61,34 @@ function NodesSelection({
);
const onStart = useCallback(
(event: MouseEvent) => {
onSelectionDragStart?.(event, selectedNodes);
(event: UseDragEvent) => {
onSelectionDragStart?.(event.sourceEvent, selectedNodes);
},
[onSelectionDragStart, selectedNodes]
);
const onDrag = useCallback(
(event: MouseEvent, data: DraggableData) => {
(event: UseDragEvent, data: UseDragData) => {
updateNodePosition({
diff: {
x: data.deltaX,
y: data.deltaY,
x: data.dx,
y: data.dy,
},
dragging: true,
});
onSelectionDrag?.(event, selectedNodes);
onSelectionDrag?.(event.sourceEvent, selectedNodes);
},
[onSelectionDrag, selectedNodes, updateNodePosition]
);
const onStop = useCallback(
(event: MouseEvent) => {
(event: UseDragEvent) => {
updateNodePosition({
dragging: false,
});
onSelectionDragStop?.(event, selectedNodes);
onSelectionDragStop?.(event.sourceEvent, selectedNodes);
},
[selectedNodes, onSelectionDragStop]
);
@@ -107,28 +100,20 @@ function NodesSelection({
[onSelectionContextMenu, selectedNodes]
);
useDrag({
onStart,
onDrag,
onStop,
nodeRef,
});
if (!selectedNodes?.length || userSelectionActive) {
return null;
}
return (
<div className={cc(['react-flow__nodesselection', 'react-flow__container', noPanClassName])} style={style}>
<DraggableCore
scale={tScale}
grid={grid}
onStart={(event) => onStart(event as MouseEvent)}
onDrag={(event, data) => onDrag(event as MouseEvent, data)}
onStop={(event) => onStop(event as MouseEvent)}
nodeRef={nodeRef}
enableUserSelectHack={false}
>
<div
ref={nodeRef}
className="react-flow__nodesselection-rect"
onContextMenu={onContextMenu}
style={innerStyle}
/>
</DraggableCore>
<div ref={nodeRef} className="react-flow__nodesselection-rect" onContextMenu={onContextMenu} style={innerStyle} />
</div>
);
}
src/container/NodeRenderer/index.tsx
+1 -8
View File
@@ -23,19 +23,15 @@ interface NodeRendererProps {
}
const selector = (s: ReactFlowState) => ({
scale: s.transform[2],
nodesDraggable: s.nodesDraggable,
nodesConnectable: s.nodesConnectable,
elementsSelectable: s.elementsSelectable,
updateNodeDimensions: s.updateNodeDimensions,
snapGrid: s.snapGrid,
snapToGrid: s.snapToGrid,
nodeInternals: s.nodeInternals,
});
const NodeRenderer = (props: NodeRendererProps) => {
const { scale, nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions, snapGrid, snapToGrid } =
useStore(selector, shallow);
const { nodesDraggable, nodesConnectable, elementsSelectable, updateNodeDimensions } = useStore(selector, shallow);
const nodes = useVisibleNodes(props.onlyRenderVisibleElements);
const resizeObserverRef = useRef<ResizeObserver>();
@@ -93,8 +89,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
xPos={node.positionAbsolute?.x ?? 0}
yPos={node.positionAbsolute?.y ?? 0}
dragging={!!node.dragging}
snapGrid={snapGrid}
snapToGrid={snapToGrid}
selectNodesOnDrag={props.selectNodesOnDrag}
onClick={props.onNodeClick}
onMouseEnter={props.onNodeMouseEnter}
@@ -105,7 +99,6 @@ const NodeRenderer = (props: NodeRendererProps) => {
onNodeDragStart={props.onNodeDragStart}
onNodeDrag={props.onNodeDrag}
onNodeDragStop={props.onNodeDragStop}
scale={scale}
selected={!!node.selected}
isDraggable={isDraggable}
isSelectable={isSelectable}
src/hooks/useDrag/index.tsx
+56
View File
@@ -0,0 +1,56 @@
import { RefObject, useEffect } from 'react';
import { D3DragEvent, drag, SubjectPosition } from 'd3-drag';
import { select } from 'd3-selection';
import { useStoreApi } from '../../store';
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export type UseDragData = { dx: number; dy: number };
type UseDragParams = {
onStart: (event: UseDragEvent) => void;
onDrag: (event: UseDragEvent, data: UseDragData) => void;
onStop: (event: UseDragEvent) => void;
nodeRef: RefObject<Element>;
disabled?: boolean;
noDragClassName?: string;
// @TODO: implement handleSelector functionality
handleSelector?: string;
};
function useDrag({ onStart, onDrag, onStop, nodeRef, disabled = false, noDragClassName }: UseDragParams) {
const store = useStoreApi();
useEffect(() => {
if (nodeRef?.current) {
const selection = select(nodeRef.current);
if (disabled) {
selection.on('.drag', null);
} else {
const dragHandler = drag()
.on('start', onStart)
.on('drag', (event: UseDragEvent) => {
const [, , scale] = store.getState().transform;
// @TODO: we need to use snapGrid and snapToGrid from the store here
// @TODO: don't use event.dx but work with event.x somehow in order to prevent lagging / slower node movement than mouse movement
onDrag(event, { dx: event.dx / scale, dy: event.dy / scale });
})
.on('end', onStop)
.filter((event: any) => !event.ctrlKey && !event.button && !event.target.className.includes(noDragClassName));
selection.call(dragHandler);
return () => {
selection.on('.drag', null);
};
}
}
}, [disabled, noDragClassName]);
return null;
}
export default useDrag;
src/store/index.ts
+7 -3
View File
@@ -97,7 +97,7 @@ const createStore = () =>
}
},
updateNodePosition: ({ id, diff, dragging }: NodeDiffUpdate) => {
const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes } = get();
const { onNodesChange, nodeExtent, nodeInternals, hasDefaultNodes, snapGrid, snapToGrid } = get();
if (hasDefaultNodes || onNodesChange) {
const changes: NodePositionChange[] = [];
@@ -105,10 +105,14 @@ const createStore = () =>
nodeInternals.forEach((node) => {
if (node.selected) {
if (!node.parentNode || !isParentSelected(node, nodeInternals)) {
changes.push(createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals }));
changes.push(
createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals, snapToGrid, snapGrid })
);
}
} else if (node.id === id) {
changes.push(createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals }));
changes.push(
createPositionChange({ node, diff, dragging, nodeExtent, nodeInternals, snapToGrid, snapGrid })
);
}
});
src/store/utils.ts
+7
View File
@@ -1,3 +1,4 @@
// @ts-nocheck
import { zoomIdentity } from 'd3-zoom';
import { GetState } from 'zustand';
@@ -15,6 +16,7 @@ import {
XYPosition,
XYZPosition,
FitViewOptions,
SnapGrid,
} from '../types';
type ParentNodes = Record<string, boolean>;
@@ -111,6 +113,8 @@ type CreatePostionChangeParams = {
nodeInternals: NodeInternals;
diff?: XYPosition;
dragging?: boolean;
snapToGrid?: boolean;
snapGrid?: SnapGrid;
};
export function createPositionChange({
@@ -119,6 +123,8 @@ export function createPositionChange({
dragging,
nodeExtent,
nodeInternals,
snapToGrid,
snapGrid,
}: CreatePostionChangeParams): NodePositionChange {
const change: NodePositionChange = {
id: node.id,
@@ -128,6 +134,7 @@ export function createPositionChange({
if (diff) {
const nextPosition = { x: node.position.x + diff.x, y: node.position.y + diff.y };
let currentExtent = node.extent || nodeExtent;
if (node.extent === 'parent') {
src/types/nodes.ts
-4
View File
@@ -1,6 +1,5 @@
import { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import { SnapGrid } from './general';
import { XYPosition, Position, CoordinateExtent } from './utils';
import { HandleElement } from './handles';
@@ -59,7 +58,6 @@ export interface WrapNodeProps<T = any> {
data: T;
selected: boolean;
isConnectable: boolean;
scale: number;
xPos: number;
yPos: number;
width?: number | null;
@@ -81,8 +79,6 @@ export interface WrapNodeProps<T = any> {
sourcePosition: Position;
targetPosition: Position;
hidden?: boolean;
snapToGrid?: boolean;
snapGrid?: SnapGrid;
dragging: boolean;
resizeObserver: ResizeObserver | null;
dragHandle?: string;