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

Merge branch 'main' into v10

Browse Source
This commit is contained in:
moklick
2021-12-04 01:01:25 +01:00
parent 5fbf3d8c83 31b379c83c
commit 2e83af4638
11 changed files with 2188 additions and 2776 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+5
View File
@@ -35,6 +35,11 @@ const elements = [
const BasicFlow = () => <ReactFlow elements={elements} />;
```
## Community Packages
* [react-flow-smart-edge](https://github.com/tisoap/react-flow-smart-edge) - Custom edge that doesn't intersect with nodes
* [Feliz.ReactFlow](https://github.com/tforkmann/Feliz.ReactFlow) - Feliz React Bindings for React Flow
## Development
Before you start you need to install the React Flow dependencies via `npm install` and the ones of the examples `cd example && npm install`.
example/src/CustomNode/index.tsx
+1 -1
View File
@@ -137,4 +137,4 @@ const CustomNodeFlow = () => {
);
};
export default CustomNodeFlow;
export default CustomNodeFlow;
example/src_oldapi/Undirectional/index.tsx
+1 -1
View File
@@ -191,7 +191,7 @@ const UpdateNodeInternalsFlow = () => {
nodeTypes={nodeTypes}
onConnect={onConnect}
onPaneClick={onPaneClick}
connectionLineType={ConnectionLineType.SmoothStep}
connectionLineType={ConnectionLineType.Bezier}
connectionMode={ConnectionMode.Loose}
onEdgeUpdate={onEdgeUpdate}
/>
example/src_oldapi/UseZoomPanHelper/index.tsx
+20 -2
View File
@@ -29,7 +29,7 @@ const UseZoomPanHelperFlow = () => {
const [elements, setElements] = useState<Elements>(initialElements);
const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params: Connection | Edge) => setElements((els) => addEdge(params, els));
const { project } = useZoomPanHelper();
const { project, setCenter, zoomIn, zoomOut } = useZoomPanHelper();
const onPaneClick = useCallback(
(evt) => {
@@ -48,8 +48,26 @@ const UseZoomPanHelperFlow = () => {
[project]
);
const onElementClick = useCallback(
(_, element) => {
const { x, y } = element.position;
setCenter(x, y, 1);
},
[setCenter]
);
return (
<ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onPaneClick={onPaneClick}>
<ReactFlow
elements={elements}
onElementClick={onElementClick}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
onPaneClick={onPaneClick}
>
<div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
<button onClick={() => zoomIn(1200)}>zoomIn</button>
<button onClick={() => zoomOut(0)}>zoomOut</button>
</div>
<Background />
<MiniMap />
</ReactFlow>
package-lock.json
Generated
+2079 -2713
View File
File diff suppressed because it is too large Load Diff
package.json
+22 -25
View File
@@ -31,54 +31,51 @@
"release:next": "release-it --preRelease=next --no-git"
},
"dependencies": {
"@babel/runtime": "^7.15.4",
"@types/d3": "^7.0.0",
"@types/react-redux": "^7.1.19",
"@babel/runtime": "^7.16.3",
"@types/d3": "^7.1.0",
"@types/react-redux": "^7.1.20",
"classcat": "^5.0.3",
"d3-selection": "^3.0.0",
"d3-zoom": "^3.0.0",
"react-draggable": "^4.4.4",
"react-redux": "^7.2.5",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"zustand": "^3.5.13"
"zustand": "^3.6.6"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.0.5",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.0.6",
"@rollup/plugin-replace": "^3.0.0",
"@svgr/rollup": "^5.5.0",
"@svgr/rollup": "^6.1.0",
"@types/redux": "^3.6.31",
"@types/resize-observer-browser": "^0.1.6",
"@welldone-software/why-did-you-render": "^6.2.1",
"autoprefixer": "^10.3.6",
"babel-preset-react-app": "^10.0.0",
"cypress": "^8.5.0",
"postcss": "^8.3.9",
"postcss-cli": "^9.0.1",
"cypress": "^9.1.0",
"postcss": "^8.4.4",
"postcss-cli": "^9.0.2",
"postcss-nested": "^5.0.6",
"prettier": "2.4.1",
"prettier": "2.5.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"release-it": "^14.11.6",
"rollup": "^2.58.0",
"release-it": "^14.11.8",
"rollup": "^2.60.1",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-livereload": "^2.0.5",
"rollup-plugin-postcss": "^4.0.1",
"rollup-plugin-postcss": "^4.0.2",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-typescript2": "^0.30.0",
"rollup-plugin-typescript2": "^0.31.1",
"start-server-and-test": "^1.14.0",
"typescript": "^4.4.3"
"typescript": "^4.5.2"
},
"peerDependencies": {
"react": "16 || 17",
"react-dom": "16 || 17"
"react": "16 || 17",
"react-dom": "16 || 17"
},
"files": [
"dist",
src/additional-components/Controls/index.tsx
+1 -1
View File
@@ -26,7 +26,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
<button className={cc(['react-flow__controls-button', className])} {...rest}>
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
{children}
</button>
);
src/components/ConnectionLine/index.tsx
+16 -11
View File
@@ -29,6 +29,14 @@ interface ConnectionLineProps {
const selector = (s: ReactFlowState) => ({ nodeInternals: s.nodeInternals, transform: s.transform });
const getSourceHandle = (handleId: string | null, sourceNode: NodeInternalsItem, connectionHandleType: HandleType) => {
const handleTypeInverted = connectionHandleType === 'source' ? 'target' : 'source';
const handleBound =
sourceNode.handleBounds?.[connectionHandleType] || sourceNode.handleBounds?.[handleTypeInverted];
return handleId ? handleBound?.find((d: HandleElement) => d.id === handleId) : handleBound?.[0];
};
export default ({
connectionNodeId,
connectionHandleId,
@@ -44,25 +52,22 @@ export default ({
const handleId = connectionHandleId;
const { nodeInternals, transform } = useStore(selector, shallow);
const sourceNodeInternals = useRef<NodeInternalsItem | undefined>(nodeInternals.get(nodeId));
const sourceNode = useRef<Node | undefined>(nodeInternals.get(nodeId));
const sourceNode = useRef<NodeInternalsItem | undefined>(nodeInternals.get(nodeId));
if (
!sourceNode.current ||
!sourceNodeInternals.current ||
!sourceNode.current ||
!isConnectable ||
!sourceNodeInternals.current.handleBounds?.[connectionHandleType]
!sourceNode.current.handleBounds?.[connectionHandleType]
) {
return null;
}
const sourceHandle = handleId
? sourceNodeInternals.current.handleBounds[connectionHandleType]!.find((d: HandleElement) => d.id === handleId)
: sourceNodeInternals.current.handleBounds[connectionHandleType]![0];
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNodeInternals.current.width! / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNodeInternals.current.height!;
const sourceX = sourceNodeInternals.current.positionAbsolute!.x + sourceHandleX;
const sourceY = sourceNodeInternals.current.positionAbsolute!.y + sourceHandleY;
const sourceHandle = getSourceHandle(handleId, sourceNode.current, connectionHandleType);
const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : (sourceNode.current?.width ?? 0) / 2;
const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.current?.height ?? 0;
const sourceX = sourceNode.current.positionAbsolute!.x + sourceHandleX;
const sourceY = sourceNode.current.positionAbsolute!.y + sourceHandleY;
const targetX = (connectionPositionX - transform[0]) / transform[2];
const targetY = (connectionPositionY - transform[1]) / transform[2];
src/components/Edges/SmoothStepEdge.tsx
+5 -1
View File
@@ -73,7 +73,11 @@ export function getSmoothStepPath({
sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize);
secondCornerPath =
sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize);
} else if (sourcePosition === Position.Right && targetPosition === Position.Left) {
} else if (
(sourcePosition === Position.Right && targetPosition === Position.Left) ||
(sourcePosition === Position.Left && targetPosition === Position.Right) ||
(sourcePosition === Position.Left && targetPosition === Position.Left)
) {
// and sourceX > targetX
firstCornerPath =
sourceY <= targetY ? leftTopCorner(cX, sourceY, cornerSize) : leftBottomCorner(cX, sourceY, cornerSize);
src/hooks/useZoomPanHelper.ts
+23 -17
View File
@@ -1,6 +1,7 @@
import { useMemo } from 'react';
import { zoomIdentity } from 'd3-zoom';
import shallow from 'zustand/shallow';
import { Selection as D3Selection } from 'd3';
import { useStoreApi, useStore } from '../store';
import { getRectOfNodeInternals, pointToRendererPoint, getTransformForBounds } from '../utils/graph';
@@ -25,6 +26,10 @@ const selector = (s: ReactFlowState) => ({
d3Selection: s.d3Selection,
});
const getTransition = (selection: D3Selection<Element, unknown, null, undefined>, duration: number = 0) => {
return selection.transition().duration(duration);
};
const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const store = useStoreApi();
const { d3Zoom, d3Selection } = useStore(selector, shallow);
@@ -32,53 +37,54 @@ const useZoomPanHelper = (): ZoomPanHelperFunctions => {
const zoomPanHelperFunctions = useMemo<ZoomPanHelperFunctions>(() => {
if (d3Selection && d3Zoom) {
return {
zoomIn: () => d3Zoom.scaleBy(d3Selection, 1.2),
zoomOut: () => d3Zoom.scaleBy(d3Selection, 1 / 1.2),
zoomTo: (zoomLevel: number) => d3Zoom.scaleTo(d3Selection, zoomLevel),
zoomIn: (options) => d3Zoom.scaleBy(getTransition(d3Selection, options?.duration), 1.2),
zoomOut: (options) => d3Zoom.scaleBy(getTransition(d3Selection, options?.duration), 1 / 1.2),
zoomTo: (zoomLevel, options) =>
d3Zoom.scaleTo(getTransition(d3Selection, options?.duration), zoomLevel),
transform: (transform: FlowTransform) => {
const nextTransform = zoomIdentity.translate(transform.x, transform.y).scale(transform.zoom);
d3Zoom.transform(d3Selection, nextTransform);
d3Zoom.transform(getTransition(d3Selection), nextTransform);
},
fitView: (options: FitViewParams = { padding: DEFAULT_PADDING, includeHiddenNodes: false }) => {
fitView: (options) => {
const { nodeInternals, width, height, minZoom, maxZoom } = store.getState();
// @TODO: work with nodeInternals instead of converting it to an array
const nodes = Array.from(nodeInternals).map(([_, node]) => node);
if (!nodes.length) {
return;
}
const bounds = getRectOfNodeInternals(
options.includeHiddenNodes ? nodes : nodes.filter((node) => !node.hidden)
options?.includeHiddenNodes ? nodes : nodes.filter((node) => !node.hidden)
);
const [x, y, zoom] = getTransformForBounds(
bounds,
width,
height,
options.minZoom ?? minZoom,
options.maxZoom ?? maxZoom,
options.padding ?? DEFAULT_PADDING
options?.minZoom ?? minZoom,
options?.maxZoom ?? maxZoom,
options?.padding ?? DEFAULT_PADDING
);
const transform = zoomIdentity.translate(x, y).scale(zoom);
d3Zoom.transform(d3Selection, transform);
d3Zoom.transform(getTransition(d3Selection, options?.duration), transform);
},
setCenter: (x: number, y: number, zoom?: number) => {
setCenter: (x, y, options) => {
const { width, height, maxZoom } = store.getState();
const nextZoom = typeof zoom !== 'undefined' ? zoom : maxZoom;
const nextZoom = typeof options?.zoom !== 'undefined' ? options.zoom : maxZoom;
const centerX = width / 2 - x * nextZoom;
const centerY = height / 2 - y * nextZoom;
const transform = zoomIdentity.translate(centerX, centerY).scale(nextZoom);
d3Zoom.transform(d3Selection, transform);
d3Zoom.transform(getTransition(d3Selection, options?.duration), transform);
},
fitBounds: (bounds: Rect, padding = DEFAULT_PADDING) => {
fitBounds: (bounds, options) => {
const { width, height, minZoom, maxZoom } = store.getState();
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, padding);
const [x, y, zoom] = getTransformForBounds(bounds, width, height, minZoom, maxZoom, options?.padding ?? DEFAULT_PADDING);
const transform = zoomIdentity.translate(x, y).scale(zoom);
d3Zoom.transform(d3Selection, transform);
d3Zoom.transform(getTransition(d3Selection, options?.duration), transform);
},
project: (position: XYPosition) => {
const { transform, snapToGrid, snapGrid } = store.getState();
tsconfig.json
+15 -4
View File
@@ -3,7 +3,10 @@
"outDir": "dist",
"module": "esnext",
"target": "esnext",
"lib": ["dom", "esnext"],
"lib": [
"dom",
"esnext"
],
"jsx": "react",
"moduleResolution": "node",
"declaration": true,
@@ -21,6 +24,14 @@
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
}
"include": [
"src"
],
"exclude": [
"node_modules",
"build",
"dist",
"example",
"rollup.config.js"
]
}