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/NodeResizer.tsx
-137
View File
@@ -1,137 +0,0 @@
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';
type NodeResizerProps = {
nodeId: string;
};
type ResizeHandleProps = {
nodeId: string;
invertX?: boolean;
invertY?: boolean;
enableX?: boolean;
enableY?: boolean;
top?: number | string;
left?: number | string;
};
type ResizeDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>;
function ResizeHandle({
top = 0,
left = 0,
invertX = false,
invertY = false,
enableX = false,
enableY = false,
nodeId,
}: ResizeHandleProps) {
const store = useStoreApi();
const resizeHandleRef = useRef<HTMLDivElement>(null);
const initialDimensionsRef = useRef<Dimensions & XYPosition>({ width: 0, height: 0, x: 0, y: 0 });
const nodeElementRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
if (!resizeHandleRef.current) {
return;
}
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();
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)`;
if (invertX || invertY) {
const positionUpdate = { x: xPos, y: yPos };
updateNodePositions(
[
{
id: nodeId,
position: positionUpdate,
// positionAbsolute: node.positionAbsolute,
} as Node,
],
true,
false
);
}
}
});
selection.call(dragHandler);
return () => {
selection.on('.drag', null);
};
}, [nodeId]);
return (
<div
className="nodrag"
ref={resizeHandleRef}
style={{
position: 'absolute',
left,
top,
width: 10,
height: 10,
background: 'red',
borderRadius: '50%',
transform: 'translate(-50%, -50%)',
}}
/>
);
}
export default function NodeResizer({ nodeId }: NodeResizerProps) {
return (
<>
<ResizeHandle nodeId={nodeId} top={0} left={0} enableX enableY invertX invertY />
<ResizeHandle nodeId={nodeId} top="50%" left={0} enableX invertX />
<ResizeHandle nodeId={nodeId} top="100%" left={0} enableX enableY />
<ResizeHandle nodeId={nodeId} top={0} left="50%" enableY invertY />
<ResizeHandle nodeId={nodeId} top={0} left="100%" enableX enableY invertY />
<ResizeHandle nodeId={nodeId} top="50%" left="100%" enableX />
<ResizeHandle nodeId={nodeId} top="100%" left="100%" enableX enableY />
<ResizeHandle nodeId={nodeId} top="100%" left="50%" enableY />
</>
);
}
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>;