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

refactor(node-resizer): use package, update resize behaviour

Browse Source
This commit is contained in:
moklick
2022-12-01 14:53:04 +01:00
parent f776239ecb
commit 6ee4eb4c42
18 changed files with 323 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core/src/components/Nodes/wrapNode.tsx
-3
View File
@@ -2,8 +2,6 @@ import { useEffect, useRef, memo } from 'react';
import type { ComponentType, MouseEvent, KeyboardEvent } from 'react';
import cc from 'classcat';
import NodeResizer from './NodeResizer';
import { useStoreApi } from '../../hooks/useStore';
import { Provider } from '../../contexts/NodeIdContext';
import { ARIA_NODE_DESC_KEY } from '../A11yDescriptions';
@@ -220,7 +218,6 @@ export default (NodeComponent: ComponentType<NodeProps>) => {
zIndex={zIndex}
/>
</Provider>
<NodeResizer nodeId={id} />
</div>
);
};
packages/core/src/hooks/useDrag/index.ts
+4 -22
View File
@@ -1,15 +1,14 @@
import { useEffect, useRef, useState, useCallback } from 'react';
import { useEffect, useRef, useState } from 'react';
import type { RefObject, MouseEvent } from 'react';
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import type { D3DragEvent, SubjectPosition } from 'd3';
import { useStoreApi } from '../../hooks/useStore';
import { getDragItems, getEventHandlerParams, hasSelector, calcNextPosition } from './utils';
import { handleNodeClick } from '../../components/Nodes/utils';
import type { NodeDragItem, Node, SelectionDragHandler } from '../../types';
import useGetPointerPosition from '../useGetPointerPosition';
import type { NodeDragItem, Node, SelectionDragHandler, UseDragEvent } from '../../types';
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
export type UseDragData = { dx: number; dy: number };
type UseDragParams = {
@@ -40,24 +39,7 @@ function useDrag({
const dragItems = useRef<NodeDragItem[]>();
const lastPos = useRef<{ x: number | null; y: number | null }>({ x: null, y: null });
// returns the pointer position projected to the RF coordinate system
const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
const { transform, snapGrid, snapToGrid } = store.getState();
const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
const pointerPos = {
x: (x - transform[0]) / transform[2],
y: (y - transform[1]) / transform[2],
};
// we need the snapped position in order to be able to skip unnecessary drag events
return {
xSnapped: snapToGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
ySnapped: snapToGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
...pointerPos,
};
}, []);
const getPointerPosition = useGetPointerPosition();
useEffect(() => {
if (nodeRef?.current) {
packages/core/src/hooks/useGetPointerPosition.ts
+31
View File
@@ -0,0 +1,31 @@
import { useCallback } from 'react';
import { useStoreApi } from './useStore';
import type { UseDragEvent } from '../types';
function useGetPointerPosition() {
const store = useStoreApi();
// returns the pointer position projected to the RF coordinate system
const getPointerPosition = useCallback(({ sourceEvent }: UseDragEvent) => {
const { transform, snapGrid, snapToGrid } = store.getState();
const x = sourceEvent.touches ? sourceEvent.touches[0].clientX : sourceEvent.clientX;
const y = sourceEvent.touches ? sourceEvent.touches[0].clientY : sourceEvent.clientY;
const pointerPos = {
x: (x - transform[0]) / transform[2],
y: (y - transform[1]) / transform[2],
};
// we need the snapped position in order to be able to skip unnecessary drag events
return {
xSnapped: snapToGrid ? snapGrid[0] * Math.round(pointerPos.x / snapGrid[0]) : pointerPos.x,
ySnapped: snapToGrid ? snapGrid[1] * Math.round(pointerPos.y / snapGrid[1]) : pointerPos.y,
...pointerPos,
};
}, []);
return getPointerPosition;
}
export default useGetPointerPosition;
packages/core/src/index.ts
+1
View File
@@ -37,5 +37,6 @@ export { useStore, useStoreApi } from './hooks/useStore';
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 * from './types';
packages/core/src/types/general.ts
+3 -1
View File
@@ -1,6 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { MouseEvent as ReactMouseEvent, ComponentType, MemoExoticComponent } from 'react';
import type { Selection as D3Selection, ZoomBehavior } from 'd3';
import type { D3DragEvent, Selection as D3Selection, SubjectPosition, ZoomBehavior } from 'd3';
import type { XYPosition, Rect, Transform, CoordinateExtent } from './utils';
import type { NodeChange, EdgeChange } from './changes';
@@ -245,3 +245,5 @@ export type ProOptions = {
account?: string;
hideAttribution: boolean;
};
export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
packages/node-resizer/.eslintrc.js
+4
View File
@@ -0,0 +1,4 @@
module.exports = {
root: true,
extends: ['@reactflow/eslint-config'],
};
packages/node-resizer/CHANGELOG.md
+1
View File
@@ -0,0 +1 @@
# @reactflow/node-resizer
packages/node-resizer/README.md
+10
View File
@@ -0,0 +1,10 @@
# @reactflow/node-resizer
A resizer component for React Flow that can be attached to a node.
## Installation
```sh
npm install @reactflow/node-resizer
```
packages/node-resizer/package.json
+71
View File
@@ -0,0 +1,71 @@
{
"name": "@reactflow/node-resizer",
"version": "0.0.0",
"description": "A helper component for resizing nodes.",
"keywords": [
"react",
"node-based UI",
"graph",
"diagram",
"workflow",
"react-flow"
],
"files": [
"dist"
],
"source": "src/index.tsx",
"main": "dist/umd/index.js",
"module": "dist/esm/index.js",
"types": "dist/esm/index.d.ts",
"sideEffects": [
"*.css"
],
"publishConfig": {
"access": "public"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/wbkd/react-flow.git",
"directory": "packages/node-resizer"
},
"scripts": {
"dev": "concurrently \"rollup --config node:@reactflow/rollup-config --watch\" pnpm:css-watch",
"build": "rollup --config node:@reactflow/rollup-config --environment NODE_ENV:production",
"lint": "eslint --ext .js,.jsx,.ts,.tsx src",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@babel/runtime": "^7.18.9",
"@reactflow/core": "workspace:*",
"classcat": "^5.0.3",
"d3-drag": "^3.0.0",
"d3-selection": "^3.0.0",
"zustand": "^4.1.1"
},
"peerDependencies": {
"react": ">=17",
"react-dom": ">=17"
},
"devDependencies": {
"@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",
"@types/react": "^18.0.19",
"@types/react-dom": "^18.0.6",
"react": "^18.2.0",
"typescript": "^4.8.3"
},
"rollup": {
"globals": {
"zustand": "Zustand",
"zustand/shallow": "zustandShallow",
"classcat": "cc"
},
"name": "ReactFlowNodeResizer"
}
}
packages/core/src/components/Nodes/NodeResizer.tsx → packages/node-resizer/src/NodeResizer.tsx
+53 -45
View File
@@ -2,8 +2,8 @@ import { useRef, useEffect } from 'react';
import { drag } from 'd3-drag';
import { select } from 'd3-selection';
import type { D3DragEvent, SubjectPosition } from 'd3';
import { useStoreApi } from '../../hooks/useStore';
import { Dimensions, Node, XYPosition } from '../../types';
import { useStoreApi, useGetPointerPosition } from '@reactflow/core';
import type { Dimensions, Node, XYPosition } from '@reactflow/core';
type NodeResizerProps = {
nodeId: string;
@@ -32,8 +32,16 @@ function ResizeHandle({
}: ResizeHandleProps) {
const store = useStoreApi();
const resizeHandleRef = useRef<HTMLDivElement>(null);
const initialDimensionsRef = useRef<Dimensions & XYPosition>({ width: 0, height: 0, x: 0, y: 0 });
const initialDimensionsRef = useRef<Dimensions & XYPosition & { nodeX: number; nodeY: number }>({
width: 0,
height: 0,
x: 0,
y: 0,
nodeX: 0,
nodeY: 0,
});
const nodeElementRef = useRef<HTMLDivElement | null>(null);
const getPointerPosition = useGetPointerPosition();
useEffect(() => {
if (!resizeHandleRef.current) {
@@ -42,56 +50,55 @@ function ResizeHandle({
const selection = select(resizeHandleRef.current);
const dragHandler = drag<HTMLDivElement, unknown>()
.on('start', () => {
const { transform, nodeInternals } = store.getState();
const node = nodeInternals.get(nodeId);
const nodeElement = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
const bbox = nodeElement.getBoundingClientRect();
initialDimensionsRef.current = {
width: bbox.width / transform[2],
height: bbox.height / transform[2],
x: node?.position.x || 0,
y: node?.position.y || 0,
};
nodeElementRef.current = nodeElement;
})
.on('drag', (evt: ResizeDragEvent) => {
const { transform, updateNodePositions, nodeInternals } = store.getState();
.on('start', (event: ResizeDragEvent) => {
const node = store.getState().nodeInternals.get(nodeId);
const pointerPos = getPointerPosition(event);
initialDimensionsRef.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,
};
nodeElementRef.current = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`) as HTMLDivElement;
})
.on('drag', (event: ResizeDragEvent) => {
const { updateNodePositions, nodeInternals } = store.getState();
const pointerPos = getPointerPosition(event);
const nodeEl = nodeElementRef.current;
const node = nodeInternals.get(nodeId);
if (nodeEl && node) {
const moveX = invertX ? -evt.x : evt.x;
const moveY = invertY ? -evt.y : evt.y;
const distX = enableX ? moveX - evt.subject.x : 0;
const distY = enableY ? moveY - evt.subject.y : 0;
const dragX = distX / transform[2];
const dragY = distY / transform[2];
const xPos = invertX ? initialDimensionsRef.current.x - dragX : initialDimensionsRef.current.x;
const yPos = invertY ? initialDimensionsRef.current.y - dragY : initialDimensionsRef.current.y;
console.log(dragX);
nodeEl.style.width = `${initialDimensionsRef.current.width + dragX}px`;
nodeEl.style.height = `${initialDimensionsRef.current.height + dragY}px`;
nodeEl.style.transform = `translate(${xPos}px, ${yPos}px)`;
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);
if (invertX || invertY) {
const positionUpdate = { x: xPos, y: yPos };
const x = invertX ? initialDimensionsRef.current.nodeX + distX : node.position.x;
const y = invertY ? initialDimensionsRef.current.nodeY + distY : node.position.y;
updateNodePositions(
[
{
id: nodeId,
position: positionUpdate,
// positionAbsolute: node.positionAbsolute,
} as Node,
],
true,
false
);
if (x !== node.position.x || y !== node.position.y) {
updateNodePositions(
[
{
id: nodeId,
position: { x, y },
} as Node,
],
true,
false
);
}
}
if (width !== node.width) {
nodeEl.style.width = `${width}px`;
}
if (height !== node.height) {
nodeEl.style.height = `${height}px`;
}
}
});
@@ -114,6 +121,7 @@ function ResizeHandle({
width: 10,
height: 10,
background: 'red',
opacity: 0.7,
borderRadius: '50%',
transform: 'translate(-50%, -50%)',
}}
packages/node-resizer/src/index.tsx
+2
View File
@@ -0,0 +1,2 @@
export { default as NodeResizer } from './NodeResizer';
export * from './types';
packages/node-resizer/src/types.ts
+9
View File
@@ -0,0 +1,9 @@
import { Position } from '@reactflow/core';
import type { HTMLAttributes } from 'react';
export type NodeToolbarProps = HTMLAttributes<HTMLDivElement> & {
nodeId: string;
isVisible?: boolean;
position?: Position;
offset?: number;
};
packages/node-resizer/tsconfig.json
+6
View File
@@ -0,0 +1,6 @@
{
"extends": "@reactflow/tsconfig/react.json",
"display": "@reactflow/node-resizer",
"include": ["**/*.ts", "**/*.tsx"],
"exclude": ["node_modules", "dist"]
}