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

Merge branch 'next' into feat/dragedge

Browse Source
This commit is contained in:
moklick
2020-11-26 15:26:48 +01:00
parent d17562e1a1 79b48c965d
commit 3a5ecfa666
32 changed files with 9834 additions and 28326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/SmoothStepEdge.tsx
+26 -41
View File
@@ -8,30 +8,18 @@ import { EdgeSmoothStepProps, Position } from '../../types';
// The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines.
const bottomLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const leftBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const bottomRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`;
const leftTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const topLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const topRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const bottomLeftCorner = (x: number, y: number, size: number): string =>
`L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
const leftBottomCorner = (x: number, y: number, size: number): string =>
`L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
const bottomRightCorner = (x: number, y: number, size: number): string =>
`L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
const rightBottomCorner = (x: number, y: number, size: number): string =>
`L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
interface GetSmoothStepPathParams {
sourceX: number;
@@ -60,27 +48,12 @@ export function getSmoothStepPath({
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
const leftAndRight = [Position.Left, Position.Right];
let firstCornerPath = null;
let secondCornerPath = null;
const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
// default case: source and target positions are top or bottom
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
let firstCornerPath = null;
let secondCornerPath = null;
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
@@ -115,6 +88,18 @@ export function getSmoothStepPath({
: topRightCorner(sourceX, targetY, cornerSize);
}
secondCornerPath = '';
} else {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
}
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;
src/components/ElementUpdater/index.tsx
+20
View File
@@ -0,0 +1,20 @@
import { useEffect } from 'react';
import { useStoreActions } from '../../store/hooks';
import { Elements } from '../../types';
interface ElementUpdaterProps {
elements: Elements;
}
const ElementUpdater = ({ elements }: ElementUpdaterProps) => {
const setElements = useStoreActions((actions) => actions.setElements);
useEffect(() => {
setElements(elements);
}, [elements]);
return null;
};
export default ElementUpdater;
src/components/Nodes/utils.ts
+10 -1
View File
@@ -1,7 +1,16 @@
import { HandleElement, Position } from '../../types';
import { getDimensions } from '../../utils';
export const getHandleBounds = (
export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
const bounds = nodeElement.getBoundingClientRect();
return {
source: getHandleBoundsByHandleType('.source', nodeElement, bounds, scale),
target: getHandleBoundsByHandleType('.target', nodeElement, bounds, scale),
};
};
export const getHandleBoundsByHandleType = (
selector: string,
nodeElement: HTMLDivElement,
parentBounds: ClientRect | DOMRect,
src/components/Nodes/wrapNode.tsx
+12 -16
View File
@@ -1,7 +1,6 @@
import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo, MouseEvent, useCallback } from 'react';
import { DraggableCore } from 'react-draggable';
import cc from 'classcat';
import { ResizeObserver } from 'resize-observer';
import { useStoreActions } from '../../store/hooks';
import { Provider } from '../../contexts/NodeIdContext';
@@ -12,7 +11,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
id,
type,
data,
transform,
scale,
xPos,
yPos,
selected,
@@ -36,6 +35,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
snapToGrid,
snapGrid,
isDragging,
resizeObserver,
}: WrapNodeProps) => {
const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
@@ -161,24 +161,19 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
useEffect(() => {
if (nodeElement.current && !isHidden) {
updateNodeDimensions({ id, nodeElement: nodeElement.current });
}
}, [id, isHidden]);
const resizeObserver = new ResizeObserver(() => {
if (nodeElement.current) {
updateNodeDimensions({ id, nodeElement: nodeElement.current });
}
});
useEffect(() => {
if (nodeElement.current) {
const currNode = nodeElement.current;
resizeObserver.observe(currNode);
resizeObserver.observe(nodeElement.current);
return () => {
if (resizeObserver && nodeElement.current) {
resizeObserver.unobserve(nodeElement.current);
}
};
return () => resizeObserver.unobserve(currNode);
}
return;
}, [id, isHidden]);
}, []);
if (isHidden) {
return null;
@@ -199,7 +194,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onStart={onDragStart}
onDrag={onDrag}
onStop={onDragStop}
scale={transform[2]}
scale={scale}
disabled={!isDraggable}
cancel=".nodrag"
nodeRef={nodeElement}
@@ -214,6 +209,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
onMouseLeave={onMouseLeaveHandler}
onContextMenu={onContextMenuHandler}
onClick={onSelectNodeHandler}
data-id={id}
>
<Provider value={id}>
<NodeComponent