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

refactor(node-resizer): use nodeId from context, fix glitches while resizing

Browse Source
This commit is contained in:
Christopher Möller
2022-12-06 17:56:56 +01:00
parent 8bca8e4bfc
commit 0892e2ea9a
17 changed files with 201 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Handle/index.tsx
+5 -3
View File
@@ -1,9 +1,9 @@
import { memo, useContext, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
import { memo, HTMLAttributes, forwardRef, MouseEvent as ReactMouseEvent } from 'react';
import cc from 'classcat';
import shallow from 'zustand/shallow';
import { useStore, useStoreApi } from '../../hooks/useStore';
import NodeIdContext from '../../contexts/NodeIdContext';
import { useNodeId } from '../../contexts/NodeIdContext';
import { checkElementBelowIsValid, handleMouseDown } from './handler';
import { getHostForElement } from '../../utils';
import { addEdge } from '../../utils/graph';
@@ -37,7 +37,9 @@ const Handle = forwardRef<HTMLDivElement, HandleComponentProps>(
ref
) => {
const store = useStoreApi();
const nodeId = useContext(NodeIdContext) as string;
// @fixme: remove type assertion and handle nodeId === null
const nodeId = useNodeId() as string;
const { connectionStartHandle, connectOnClick, noPanClassName } = useStore(selector, shallow);
const handleId = id || null;
packages/core/src/contexts/NodeIdContext.ts
+6 -1
View File
@@ -1,7 +1,12 @@
import { createContext } from 'react';
import { createContext, useContext } from 'react';
export const NodeIdContext = createContext<string | null>(null);
export const Provider = NodeIdContext.Provider;
export const Consumer = NodeIdContext.Consumer;
export const useNodeId = (): string | null => {
const nodeId = useContext(NodeIdContext);
return nodeId;
};
export default NodeIdContext;
packages/core/src/index.ts
+1 -1
View File
@@ -22,7 +22,6 @@ export {
getNodePositionWithOrigin,
} from './utils/graph';
export { applyNodeChanges, applyEdgeChanges } from './utils/changes';
export { createNodeInternals } from './store/utils';
export { getMarkerEnd } from './components/Edges/utils';
export { default as ReactFlowProvider } from './components/ReactFlowProvider';
export { default as Panel } from './components/Panel';
@@ -40,5 +39,6 @@ export { default as useOnViewportChange } from './hooks/useOnViewportChange';
export { default as useOnSelectionChange } from './hooks/useOnSelectionChange';
export { default as useNodesInitialized } from './hooks/useNodesInitialized';
export { default as useGetPointerPosition } from './hooks/useGetPointerPosition';
export { useNodeId } from './contexts/NodeIdContext';
export * from './types';
packages/core/src/store/index.ts
+30 -35
View File
@@ -17,6 +17,7 @@ import type {
NodePositionChange,
NodeDragItem,
UnselectNodesAndEdgesParams,
NodeChange,
} from '../types';
const createRFStore = () =>
@@ -102,47 +103,41 @@ const createRFStore = () =>
onNodesChange?.(changes);
}
},
updateNodePositions: (
nodeDragItems: NodeDragItem[] | Node[],
positionChanged = true,
dragging = false,
applyChanges = true
) => {
const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged = true, dragging = false) => {
const { triggerNodeChanges } = get();
if (hasDefaultNodes || onNodesChange) {
const changes = nodeDragItems.map((node) => {
const change: NodePositionChange = {
id: node.id,
type: 'position',
dragging,
};
const changes = nodeDragItems.map((node) => {
const change: NodePositionChange = {
id: node.id,
type: 'position',
dragging,
};
if (positionChanged) {
change.positionAbsolute = node.positionAbsolute;
change.position = node.position;
}
return change;
});
if (changes?.length) {
if (hasDefaultNodes) {
const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
set({ nodeInternals: nextNodeInternals });
}
if (applyChanges) {
onNodesChange?.(changes);
}
if (positionChanged) {
change.positionAbsolute = node.positionAbsolute;
change.position = node.position;
}
return changes;
}
return change;
});
return null;
triggerNodeChanges(changes);
},
triggerNodeChanges: (changes: NodeChange[]) => {
const { onNodesChange, nodeInternals, hasDefaultNodes, nodeOrigin } = get();
if (changes?.length) {
if (hasDefaultNodes) {
const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
set({ nodeInternals: nextNodeInternals });
}
onNodesChange?.(changes);
}
},
addSelectedNodes: (selectedNodeIds: string[]) => {
const { multiSelectionActive, nodeInternals, edges } = get();
let changedNodes: NodeSelectionChange[];
packages/core/src/types/changes.ts
+2 -1
View File
@@ -7,8 +7,9 @@ import type { Edge } from './edges';
export type NodeDimensionChange = {
id: string;
type: 'dimensions';
dimensions: Dimensions;
dimensions?: Dimensions;
updateStyle?: boolean;
resizing?: boolean;
};
export type NodePositionChange = {
packages/core/src/types/general.ts
+2 -6
View File
@@ -215,12 +215,7 @@ export type ReactFlowActions = {
setEdges: (edges: Edge[]) => void;
setDefaultNodesAndEdges: (nodes?: Node[], edges?: Edge[]) => void;
updateNodeDimensions: (updates: NodeDimensionUpdate[]) => void;
updateNodePositions: (
nodeDragItems: NodeDragItem[] | Node[],
positionChanged: boolean,
dragging: boolean,
applyChanges?: boolean
) => NodePositionChange[] | null;
updateNodePositions: (nodeDragItems: NodeDragItem[] | Node[], positionChanged: boolean, dragging: boolean) => void;
resetSelectedElements: () => void;
unselectNodesAndEdges: (params?: UnselectNodesAndEdgesParams) => void;
addSelectedNodes: (nodeIds: string[]) => void;
@@ -231,6 +226,7 @@ export type ReactFlowActions = {
setNodeExtent: (nodeExtent: CoordinateExtent) => void;
cancelConnection: () => void;
reset: () => void;
triggerNodeChanges: (changes: NodeChange[]) => void;
};
export type ReactFlowState = ReactFlowStore & ReactFlowActions;
packages/core/src/types/nodes.ts
+1
View File
@@ -31,6 +31,7 @@ export type Node<T = any> = {
positionAbsolute?: XYPosition;
ariaLabel?: string;
focusable?: boolean;
resizing?: boolean;
// only used internally
[internalsSymbol]?: {
packages/core/src/utils/changes.ts
+4
View File
@@ -94,6 +94,10 @@ function applyChanges(changes: any[], elements: any[]): any[] {
updateItem.style = { ...(updateItem.style || {}), ...currentChange.dimensions };
}
if (typeof currentChange.resizing === 'boolean') {
updateItem.resizing = currentChange.resizing;
}
if (updateItem.expandParent) {
handleParentExpand(res, updateItem);
}
packages/node-resizer/src/NodeResizer.tsx
+15 -1
View File
@@ -6,11 +6,17 @@ const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
export default function NodeResizer({
nodeId,
isVisible = true,
handleClassName,
handleStyle,
lineClassName,
lineStyle,
color,
}: NodeResizerProps) {
if (!isVisible) {
return null;
}
return (
<>
{lineControls.map((c) => (
@@ -21,10 +27,18 @@ export default function NodeResizer({
nodeId={nodeId}
position={c}
variant={ResizeControlVariant.Line}
color={color}
/>
))}
{handleControls.map((c) => (
<ResizeControl key={c} className={handleClassName} style={handleStyle} nodeId={nodeId} position={c} />
<ResizeControl
key={c}
className={handleClassName}
style={handleStyle}
nodeId={nodeId}
position={c}
color={color}
/>
))}
</>
);
packages/node-resizer/src/ResizeControl.tsx
+79 -49
View File
@@ -7,21 +7,26 @@ import {
useGetPointerPosition,
NodeChange,
NodeDimensionChange,
applyNodeChanges,
createNodeInternals,
useNodeId,
NodePositionChange,
} from '@reactflow/core';
import type { Dimensions, Node, XYPosition } from '@reactflow/core';
import type { Dimensions, XYPosition } from '@reactflow/core';
import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
function ResizeControl({
nodeId,
position = 'bottom-right',
position,
variant = ResizeControlVariant.Handle,
className,
style = {},
children,
color,
minWidth = 1,
minHeight = 1,
}: ResizeControlProps) {
const contextNodeId = useNodeId();
const id = typeof nodeId === 'string' ? nodeId : contextNodeId;
const store = useStoreApi();
const resizeControlRef = useRef<HTMLDivElement>(null);
const startValues = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
@@ -32,17 +37,20 @@ function ResizeControl({
nodeX: 0,
nodeY: 0,
});
const prevValues = useRef<Dimensions & XYPosition>({ width: 0, height: 0, x: 0, y: 0 });
const getPointerPosition = useGetPointerPosition();
const defaultPosition = variant === ResizeControlVariant.Line ? 'right' : 'bottom-right';
const controlPosition = position ?? defaultPosition;
useEffect(() => {
if (!resizeControlRef.current) {
if (!resizeControlRef.current || !id) {
return;
}
const selection = select(resizeControlRef.current);
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const node = store.getState().nodeInternals.get(nodeId);
const node = store.getState().nodeInternals.get(id);
const { xSnapped, ySnapped } = getPointerPosition(event);
startValues.current = {
@@ -53,15 +61,22 @@ function ResizeControl({
x: xSnapped,
y: ySnapped,
};
prevValues.current = {
width: node?.width ?? 0,
height: node?.height ?? 0,
x: node?.position.x ?? 0,
y: node?.position.y ?? 0,
};
})
.on('drag', (event: ResizeDragEvent) => {
const { updateNodePositions, nodeInternals, onNodesChange, hasDefaultNodes, nodeOrigin } = store.getState();
const { nodeInternals, triggerNodeChanges } = store.getState();
const { xSnapped, ySnapped } = getPointerPosition(event);
const node = nodeInternals.get(nodeId);
const enableX = position.includes('right') || position.includes('left');
const enableY = position.includes('bottom') || position.includes('top');
const invertX = position.includes('left');
const invertY = position.includes('top');
const node = nodeInternals.get(id);
const enableX = controlPosition.includes('right') || controlPosition.includes('left');
const enableY = controlPosition.includes('bottom') || controlPosition.includes('top');
const invertX = controlPosition.includes('left');
const invertY = controlPosition.includes('top');
if (node) {
const changes: NodeChange[] = [];
@@ -73,57 +88,70 @@ function ResizeControl({
nodeX: startNodeX,
nodeY: startNodeY,
} = startValues.current;
const distX = enableX ? xSnapped - startX : 0;
const distY = enableY ? ySnapped - startY : 0;
const width = startWidth + (invertX ? -distX : distX);
const height = startHeight + (invertY ? -distY : distY);
const { x: prevX, y: prevY, width: prevWidth, height: prevHeight } = prevValues.current;
const distX = Math.floor(enableX ? xSnapped - startX : 0);
const distY = Math.floor(enableY ? ySnapped - startY : 0);
const width = Math.max(startWidth + (invertX ? -distX : distX), minWidth);
const height = Math.max(startHeight + (invertY ? -distY : distY), minHeight);
const isWidthChange = width !== prevWidth;
const isHeightChange = height !== prevHeight;
if (invertX || invertY) {
const x = invertX ? startNodeX + distX : startNodeX;
const y = invertY ? startNodeY + distY : startNodeY;
const x = invertX ? startNodeX - (width - startWidth) : startNodeX;
const y = invertY ? startNodeY - (height - startHeight) : startNodeY;
if (x !== node.position.x || y !== node.position.y) {
const positionChanges = updateNodePositions(
[
{
id: nodeId,
position: { x, y },
} as Node,
],
true,
false,
false
);
// only transform the node if the width or height changes
const isXPosChange = x !== prevX && isWidthChange;
const isYPosChange = y !== prevY && isHeightChange;
if (positionChanges?.length) {
changes.push(positionChanges[0]);
}
if (isXPosChange || isYPosChange) {
const positionChange: NodePositionChange = {
id: node.id,
type: 'position',
position: {
x: isXPosChange ? x : prevX,
y: isYPosChange ? y : prevY,
},
};
changes.push(positionChange);
prevValues.current.x = positionChange.position!.x;
prevValues.current.y = positionChange.position!.y;
}
}
if (width !== node.width || height !== node.height) {
if (isWidthChange || isHeightChange) {
const dimensionChange: NodeDimensionChange = {
id: nodeId,
id: id,
type: 'dimensions',
updateStyle: true,
resizing: true,
dimensions: {
width: width !== node.width ? width : node.width,
height: height !== node.height ? height : node.height,
width: width,
height: height,
},
};
changes.push(dimensionChange);
prevValues.current.width = width;
prevValues.current.height = height;
}
if (changes.length) {
if (hasDefaultNodes) {
const nodes = applyNodeChanges(changes, Array.from(nodeInternals.values()));
const nextNodeInternals = createNodeInternals(nodes, nodeInternals, nodeOrigin);
store.setState({ nodeInternals: nextNodeInternals });
}
onNodesChange?.(changes);
}
triggerNodeChanges(changes);
}
})
.on('end', () => {
const { triggerNodeChanges } = store.getState();
const dimensionChange: NodeDimensionChange = {
id: id,
type: 'dimensions',
resizing: true,
};
triggerNodeChanges([dimensionChange]);
});
selection.call(dragHandler);
@@ -131,15 +159,17 @@ function ResizeControl({
return () => {
selection.on('.drag', null);
};
}, [nodeId, position, getPointerPosition]);
}, [id, controlPosition, getPointerPosition]);
const positionClassNames = position?.split('-');
const positionClassNames = controlPosition.split('-');
const colorStyleProp = variant === ResizeControlVariant.Line ? 'borderColor' : 'backgroundColor';
const controlStyle = color ? { ...style, [colorStyleProp]: color } : style;
return (
<div
className={cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
ref={resizeControlRef}
style={style}
style={controlStyle}
>
{children}
</div>
packages/node-resizer/src/style.css
+13 -10
View File
@@ -1,9 +1,5 @@
.react-flow__resize-control {
position: absolute;
background-color: rgba(195, 195, 195, 1);
border: 1px solid white;
width: 4px;
height: 4px;
}
.react-flow__resize-control.left,
@@ -28,6 +24,11 @@
/* handle styles */
.react-flow__resize-control.handle {
width: 4px;
height: 4px;
border: 1px solid #fff;
border-radius: 1px;
background-color: #3367d9;
transform: translate(-50%, -50%);
}
@@ -62,9 +63,11 @@
/* line styles */
.react-flow__resize-control.line {
border: none;
background: none;
border-color: #3367d9;
border-width: 0;
border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
width: 1px;
@@ -75,11 +78,11 @@
.react-flow__resize-control.line.left {
left: 0;
border-left: 1px solid rgba(195, 195, 195, 1);
border-left-width: 1px;
}
.react-flow__resize-control.line.right {
left: 100%;
border-right: 1px solid rgba(195, 195, 195, 1);
border-right-width: 1px;
}
.react-flow__resize-control.line.top,
@@ -92,9 +95,9 @@
.react-flow__resize-control.line.top {
top: 0;
border-top: 1px solid rgba(195, 195, 195, 1);
border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
border-bottom: 1px solid rgba(195, 195, 195, 1);
border-bottom-width: 1px;
top: 100%;
}
packages/node-resizer/src/types.ts
+8 -3
View File
@@ -2,11 +2,13 @@ import type { CSSProperties, ReactNode } from 'react';
import type { D3DragEvent, SubjectPosition } from 'd3-drag';
export type NodeResizerProps = {
nodeId: string;
nodeId?: string;
color?: string;
handleClassName?: string;
handleStyle?: CSSProperties;
lineClassName?: string;
lineStyle?: CSSProperties;
isVisible?: boolean;
};
export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
@@ -19,12 +21,15 @@ export enum ResizeControlVariant {
}
export type ResizeControlProps = {
nodeId: string;
position: ControlPosition;
nodeId?: string;
position?: ControlPosition;
variant?: ResizeControlVariant;
color?: string;
className?: string;
style?: CSSProperties;
children?: ReactNode;
minWidth?: number;
minHeight?: number;
};
export type ResizeControlLineProps = ResizeControlProps & {