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

refacitr(resizer): cleanup

Browse Source
This commit is contained in:
moklick
2022-12-04 17:50:11 +01:00
parent 9da984f3e4
commit 8bca8e4bfc
4 changed files with 56 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/node-resizer/package.json
View File

@@ -38,7 +38,6 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@babel/runtime": "^7.18.9",
"@reactflow/core": "workspace:*",
"classcat": "^5.0.4",
"d3-drag": "^3.0.0",
@@ -53,7 +52,6 @@
"@reactflow/eslint-config": "workspace:*",
"@reactflow/rollup-config": "workspace:*",
"@reactflow/tsconfig": "workspace:*",
"@types/d3": "^7.4.0",
"@types/d3-drag": "^3.0.1",
"@types/d3-selection": "^3.0.3",
"@types/node": "^18.7.16",

28
packages/node-resizer/src/NodeResizer.tsx
View File

@@ -1,5 +1,8 @@
import ResizeControl from './ResizeControl';
import type { NodeResizerProps } from './types';
import { ControlPosition, NodeResizerProps, ResizeControlVariant, ControlLinePosition } from './types';
const handleControls: ControlPosition[] = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
const lineControls: ControlLinePosition[] = ['top', 'right', 'bottom', 'left'];
export default function NodeResizer({
nodeId,
@@ -10,16 +13,19 @@ export default function NodeResizer({
}: NodeResizerProps) {
return (
<>
<ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-left" />
<ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="top" />
<ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="top-right" />
<ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="left" />
<ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-left" />
<ResizeControl className={lineClassName} variant="line" style={lineStyle} nodeId={nodeId} position="right" />
<ResizeControl className={handleClassName} style={handleStyle} nodeId={nodeId} position="bottom-right" />
<ResizeControl className={lineClassName} variant="line" position="bottom" style={lineStyle} nodeId={nodeId} />
{lineControls.map((c) => (
<ResizeControl
key={c}
className={lineClassName}
style={lineStyle}
nodeId={nodeId}
position={c}
variant={ResizeControlVariant.Line}
/>
))}
{handleControls.map((c) => (
<ResizeControl key={c} className={handleClassName} style={handleStyle} nodeId={nodeId} position={c} />
))}
</>
);
}

62
packages/node-resizer/src/ResizeControl.tsx
View File

@@ -1,4 +1,4 @@
import { useRef, useEffect } from 'react';
import { useRef, useEffect, memo } from 'react';
import cc from 'classcat';
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
@@ -6,26 +6,25 @@ import {
useStoreApi,
useGetPointerPosition,
NodeChange,
NodePositionChange,
NodeDimensionChange,
applyNodeChanges,
createNodeInternals,
} from '@reactflow/core';
import type { Dimensions, Node, XYPosition } from '@reactflow/core';
import type { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps } from './types';
import { ResizeDragEvent, ResizeControlProps, ResizeControlLineProps, ResizeControlVariant } from './types';
function ResizeControl({
nodeId,
position = 'bottom-right',
variant = 'handle',
variant = ResizeControlVariant.Handle,
className,
style = {},
children,
}: ResizeControlProps) {
const store = useStoreApi();
const resizeHandleRef = useRef<HTMLDivElement>(null);
const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
const resizeControlRef = useRef<HTMLDivElement>(null);
const startValues = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
width: 0,
height: 0,
x: 0,
@@ -33,53 +32,58 @@ function ResizeControl({
nodeX: 0,
nodeY: 0,
});
const nodeElementRef = useRef<HTMLDivElement | null>(null);
const getPointerPosition = useGetPointerPosition();
useEffect(() => {
if (!resizeHandleRef.current) {
if (!resizeControlRef.current) {
return;
}
const selection = select(resizeHandleRef.current);
const selection = select(resizeControlRef.current);
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', (event: ResizeDragEvent) => {
const node = store.getState().nodeInternals.get(nodeId);
const pointerPos = getPointerPosition(event);
const { xSnapped, ySnapped } = getPointerPosition(event);
initialDimensionsRef.current = {
startValues.current = {
width: node?.width ?? 0,
height: node?.height ?? 0,
nodeX: node?.position.x ?? 0,
nodeY: node?.position.y ?? 0,
x: pointerPos.xSnapped,
y: pointerPos.ySnapped,
x: xSnapped,
y: ySnapped,
};
nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
})
.on('drag', (event: ResizeDragEvent) => {
const { updateNodePositions, nodeInternals, onNodesChange, hasDefaultNodes, nodeOrigin } = store.getState();
const pointerPos = getPointerPosition(event);
const nodeEl = nodeElementRef.current;
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');
if (nodeEl && node) {
if (node) {
const changes: NodeChange[] = [];
const distX = enableX ? pointerPos.xSnapped - initialDimensionsRef.current.x : 0;
const distY = enableY ? pointerPos.ySnapped - initialDimensionsRef.current.y : 0;
const width = initialDimensionsRef.current.width + (invertX ? -distX : distX);
const height = initialDimensionsRef.current.height + (invertY ? -distY : distY);
const {
x: startX,
y: startY,
width: startWidth,
height: startHeight,
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);
if (invertX || invertY) {
const x = invertX ? initialDimensionsRef.current.nodeX + distX : initialDimensionsRef.current.nodeX;
const y = invertY ? initialDimensionsRef.current.nodeY + distY : initialDimensionsRef.current.nodeY;
const x = invertX ? startNodeX + distX : startNodeX;
const y = invertY ? startNodeY + distY : startNodeY;
if (x !== node.position.x || y !== node.position.y) {
const positionChanges: NodePositionChange[] | null = updateNodePositions(
const positionChanges = updateNodePositions(
[
{
id: nodeId,
@@ -129,12 +133,12 @@ function ResizeControl({
};
}, [nodeId, position, getPointerPosition]);
const positionClassNames = position.split('-');
const positionClassNames = position?.split('-');
return (
<div
className={cc([className, ...positionClassNames, variant, 'react-flow__resize-control', 'nodrag'])}
ref={resizeHandleRef}
className={cc(['react-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
ref={resizeControlRef}
style={style}
>
{children}
@@ -143,7 +147,7 @@ function ResizeControl({
}
export function ResizeControlLine(props: ResizeControlLineProps) {
return <ResizeControl {...props} variant="line" />;
return <ResizeControl {...props} variant={ResizeControlVariant.Line} />;
}
export default ResizeControl;
export default memo(ResizeControl);

7
packages/node-resizer/src/types.ts
View File

@@ -13,10 +13,15 @@ export type ControlLinePosition = 'top' | 'bottom' | 'left' | 'right';
export type ControlPosition = ControlLinePosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
export enum ResizeControlVariant {
Line = 'line',
Handle = 'handle',
}
export type ResizeControlProps = {
nodeId: string;
position: ControlPosition;
variant?: 'line' | 'handle';
variant?: ResizeControlVariant;
className?: string;
style?: CSSProperties;
children?: ReactNode;