From 8bca8e4bfc6e2dde7e85340d64f033f991b5997c Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 4 Dec 2022 17:50:11 +0100 Subject: [PATCH] refacitr(resizer): cleanup --- packages/node-resizer/package.json | 2 - packages/node-resizer/src/NodeResizer.tsx | 28 ++++++---- packages/node-resizer/src/ResizeControl.tsx | 62 +++++++++++---------- packages/node-resizer/src/types.ts | 7 ++- 4 files changed, 56 insertions(+), 43 deletions(-) diff --git a/packages/node-resizer/package.json b/packages/node-resizer/package.json index 3025ccb7..0a169f31 100644 --- a/packages/node-resizer/package.json +++ b/packages/node-resizer/package.json @@ -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", diff --git a/packages/node-resizer/src/NodeResizer.tsx b/packages/node-resizer/src/NodeResizer.tsx index 9074ea2f..75267d86 100644 --- a/packages/node-resizer/src/NodeResizer.tsx +++ b/packages/node-resizer/src/NodeResizer.tsx @@ -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 ( <> - - - - - - - - - - + {lineControls.map((c) => ( + + ))} + {handleControls.map((c) => ( + + ))} ); } diff --git a/packages/node-resizer/src/ResizeControl.tsx b/packages/node-resizer/src/ResizeControl.tsx index 832cd647..ec2e46dd 100644 --- a/packages/node-resizer/src/ResizeControl.tsx +++ b/packages/node-resizer/src/ResizeControl.tsx @@ -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(null); - const initialDimensionsRef = useRef({ + const resizeControlRef = useRef(null); + const startValues = useRef({ width: 0, height: 0, x: 0, @@ -33,53 +32,58 @@ function ResizeControl({ nodeX: 0, nodeY: 0, }); - const nodeElementRef = useRef(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() .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 (
{children} @@ -143,7 +147,7 @@ function ResizeControl({ } export function ResizeControlLine(props: ResizeControlLineProps) { - return ; + return ; } -export default ResizeControl; +export default memo(ResizeControl); diff --git a/packages/node-resizer/src/types.ts b/packages/node-resizer/src/types.ts index 7eb6b32a..9368e434 100644 --- a/packages/node-resizer/src/types.ts +++ b/packages/node-resizer/src/types.ts @@ -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;