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

Merge pull request #169 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-04-20 13:20:51 +02:00
committed by GitHub
parent 6fbd488011 6354aa4330
commit a33ec23073
21 changed files with 12673 additions and 8356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/integration/flow/basic.spec.js
+11 -8
View File
@@ -47,6 +47,8 @@ describe('Basic Graph Rendering', () => {
.last()
.should('have.not.class', 'selected')
.get('.react-flow__nodesselection-rect');
cy.get('body').type('{shift}', { release: true });
});
it('selects all nodes', () => {
@@ -59,6 +61,8 @@ describe('Basic Graph Rendering', () => {
.get('.react-flow__node')
.should('have.class', 'selected')
.get('.react-flow__nodesselection-rect');
cy.get('body').type('{shift}', { release: true });
});
it('removes selection', () => {
@@ -73,11 +77,10 @@ describe('Basic Graph Rendering', () => {
it('drags a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
cy.drag('.react-flow__node:first', { x: 500, y: 25 })
.then($el => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
});
});
it('removes a node', () => {
@@ -116,7 +119,7 @@ describe('Basic Graph Rendering', () => {
const newPosition = {
clientX: Cypress.config('viewportWidth') * 0.6,
clientY: Cypress.config('viewportHeight') * 0.7
clientY: Cypress.config('viewportHeight') * 0.7,
};
const styleBeforeDrag = Cypress.$('.react-flow__nodes').css('transform');
@@ -137,10 +140,10 @@ describe('Basic Graph Rendering', () => {
const styleBeforeZoom = Cypress.$('.react-flow__nodes').css('transform');
cy.get('.react-flow__zoompane')
.trigger('wheel','topLeft', { deltaY: -200 })
.trigger('wheel', 'topLeft', { deltaY: -200 })
.then(() => {
const styleAfterZoom = Cypress.$('.react-flow__nodes').css('transform');
expect(styleBeforeZoom).to.not.equal(styleAfterZoom);
});
});
});
});
cypress/integration/flow/inactive.spec.js
+9 -20
View File
@@ -5,34 +5,27 @@ describe('Inactive Graph Rendering', () => {
cy.get('.react-flow__renderer');
cy.get('.react-flow__node').should('have.length', 4);
cy.get('.react-flow__edge').should('have.length', 2);
cy.get('.react-flow__node')
.children('div')
.children('.react-flow__handle');
cy.get('.react-flow__node').children('div').children('.react-flow__handle');
});
it('tries to select a node by click', () => {
cy.get('.react-flow__node:first')
.click()
.should('have.not.class', 'selected');
cy.get('.react-flow__node:first').click().should('have.not.class', 'selected');
});
it('tries to select an edge by click', () => {
cy.get('.react-flow__edge:first')
.click()
.should('have.not.class', 'selected');
cy.get('.react-flow__edge:first').click().should('have.not.class', 'selected');
});
it('tries to do a selection', () => {
cy.get('body')
.type('{shift}', { release: false })
.get('.react-flow__selectionpane')
.should('not.exist');
cy.get('body').type('{shift}', { release: false }).get('.react-flow__selectionpane').should('not.exist');
cy.get('body').type('{shift}', { release: true });
});
it('tries to drag a node', () => {
const styleBeforeDrag = Cypress.$('.react-flow__node:first').css('transform');
cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then($el => {
cy.drag('.react-flow__node:first', { x: 500, y: 25 }).then(($el) => {
const styleAfterDrag = $el.css('transform');
expect(styleBeforeDrag).to.equal(styleAfterDrag);
});
@@ -58,14 +51,10 @@ describe('Inactive Graph Rendering', () => {
});
it('selects a node by click', () => {
cy.get('.react-flow__node:first')
.click()
.should('have.class', 'selected');
cy.get('.react-flow__node:first').click().should('have.class', 'selected');
});
it('selects an edge by click', () => {
cy.get('.react-flow__edge:first')
.click()
.should('have.class', 'selected');
cy.get('.react-flow__edge:first').click().should('have.class', 'selected');
});
});
dist/ReactFlow.esm.js
Vendored
+1320 -964
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.esm.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/ReactFlow.js
Vendored
+1266 -910
View File
File diff suppressed because it is too large Load Diff
dist/ReactFlow.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/components/Nodes/utils.d.ts
Vendored
+2
View File
@@ -0,0 +1,2 @@
import { HandleElement } from '../../types';
export declare const getHandleBounds: (selector: string, nodeElement: HTMLDivElement, parentBounds: ClientRect | DOMRect, k: number) => HandleElement[] | null;
dist/components/NodesSelection/index.d.ts
Vendored
+4
View File
@@ -1,3 +1,7 @@
/**
* The nodes selection rectangle gets displayed when a user
* made a selectio with on or several nodes
*/
import React from 'react';
declare const _default: React.MemoExoticComponent<() => JSX.Element>;
export default _default;
dist/components/UserSelection/index.d.ts
Vendored
+3
View File
@@ -1,3 +1,6 @@
/**
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import React from 'react';
declare type UserSelectionProps = {
isInteractive: boolean;
dist/contexts/NodeIdContext.d.ts
Vendored
+2 -2
View File
@@ -2,6 +2,6 @@
import { ElementId } from '../types';
declare type ContextProps = ElementId | null;
export declare const NodeIdContext: import("react").Context<ContextProps>;
export declare const Provider: import("react").ProviderExoticComponent<import("react").ProviderProps<ContextProps>>;
export declare const Consumer: import("react").ExoticComponent<import("react").ConsumerProps<ContextProps>>;
export declare const Provider: import("react").Provider<ContextProps>;
export declare const Consumer: import("react").Consumer<ContextProps>;
export default NodeIdContext;
dist/hooks/useElementUpdater.d.ts
Vendored
+2 -2
View File
@@ -1,3 +1,3 @@
import { Node, Edge } from '../types';
declare const useElementUpdater: (elements: (Node | Edge)[]) => void;
import { Elements } from '../types';
declare const useElementUpdater: (elements: Elements) => void;
export default useElementUpdater;
dist/store/hooks.d.ts
Vendored
+12 -12
View File
@@ -4,19 +4,15 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
selection: import("../types").SelectionRect | null;
userSelectionRect: import("../types").SelectionRect;
connectionPosition: import("../types").XYPosition;
onConnect: import("../types").OnConnectFunc;
setOnConnect: import("easy-peasy").Action<StoreModel, import("../types").OnConnectFunc>;
setNodes: import("easy-peasy").Action<StoreModel, import("../types").Node[]>;
setEdges: import("easy-peasy").Action<StoreModel, import("../types").Edge[]>;
updateNodeData: import("easy-peasy").Action<StoreModel, {
updateNodeDimensions: import("easy-peasy").Action<StoreModel, {
id: string;
width: number;
height: number;
handleBounds: {
source: import("../types").HandleElement[] | null;
target: import("../types").HandleElement[] | null;
};
nodeElement: HTMLDivElement;
}>;
updateNodePos: import("easy-peasy").Action<StoreModel, {
id: string;
@@ -27,7 +23,7 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
isActive: boolean;
selection?: import("../types").SelectionRect | undefined;
}>;
setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | (import("../types").Node | import("../types").Edge)[]>;
setSelectedElements: import("easy-peasy").Action<StoreModel, import("../types").Node | import("../types").Edge | import("../types").Elements>;
updateSelection: import("easy-peasy").Action<StoreModel, import("../types").SelectionRect>;
updateTransform: import("easy-peasy").Action<StoreModel, {
x: number;
@@ -46,15 +42,18 @@ export declare const useStoreActions: <Result>(mapActions: (actions: import("eas
setConnectionPosition: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
setConnectionSourceId: import("easy-peasy").Action<StoreModel, string | null>;
setInteractive: import("easy-peasy").Action<StoreModel, boolean>;
setUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
updateUserSelection: import("easy-peasy").Action<StoreModel, import("../types").XYPosition>;
unsetUserSelection: import("easy-peasy").Action<StoreModel, void>;
}, "1">) => Result) => Result;
export declare const useStoreDispatch: () => import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").IntermediateStateMapper<{
export declare const useStoreState: <Result>(mapState: (state: import("easy-peasy").StateMapper<{
width: number;
height: number;
transform: [number, number, number];
transform: import("../types").Transform;
nodes: import("../types").Node[];
edges: import("../types").Edge[];
selectedElements: (import("../types").Node | import("../types").Edge)[];
selectedElements: import("../types").Elements;
selectedNodesBbox: import("../types").Rect;
d3Zoom: import("d3-zoom").ZoomBehavior<Element, unknown> | null;
d3Selection: import("d3-selection").Selection<Element, unknown, null, undefined> | null;
@@ -62,10 +61,11 @@ export declare const useStoreState: <Result>(mapState: (state: import("easy-peas
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: import("../types").SelectionRect | null;
userSelectionRect: import("../types").SelectionRect;
connectionSourceId: string | null;
connectionPosition: import("../types").XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: import("../types").OnConnectFunc;
}, "1">) => Result, dependencies?: any[] | undefined) => Result;
}, "1">) => Result, equalityFn?: ((prev: Result, next: Result) => boolean) | undefined) => Result;
dist/store/index.d.ts
Vendored
+9 -92
View File
@@ -1,6 +1,6 @@
import { Action } from 'easy-peasy';
import { Selection as D3Selection, ZoomBehavior } from 'd3';
import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect, HandleElement } from '../types';
import { ElementId, Elements, Transform, Node, Edge, Rect, Dimensions, XYPosition, OnConnectFunc, SelectionRect } from '../types';
declare type TransformXYK = {
x: number;
y: number;
@@ -10,14 +10,9 @@ declare type NodePosUpdate = {
id: ElementId;
pos: XYPosition;
};
declare type NodeUpdate = {
declare type NodeDimensionUpdate = {
id: ElementId;
width: number;
height: number;
handleBounds: {
source: HandleElement[] | null;
target: HandleElement[] | null;
};
nodeElement: HTMLDivElement;
};
declare type SelectionUpdate = {
isActive: boolean;
@@ -45,6 +40,7 @@ export interface StoreModel {
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
userSelectionRect: SelectionRect;
connectionSourceId: ElementId | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
@@ -54,7 +50,7 @@ export interface StoreModel {
setOnConnect: Action<StoreModel, OnConnectFunc>;
setNodes: Action<StoreModel, Node[]>;
setEdges: Action<StoreModel, Edge[]>;
updateNodeData: Action<StoreModel, NodeUpdate>;
updateNodeDimensions: Action<StoreModel, NodeDimensionUpdate>;
updateNodePos: Action<StoreModel, NodePosUpdate>;
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
@@ -67,88 +63,9 @@ export interface StoreModel {
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, ElementId | null>;
setInteractive: Action<StoreModel, boolean>;
setUserSelection: Action<StoreModel, XYPosition>;
updateUserSelection: Action<StoreModel, XYPosition>;
unsetUserSelection: Action<StoreModel>;
}
declare const store: {
getState: () => import("easy-peasy").IntermediateStateMapper<{
width: number;
height: number;
transform: [number, number, number];
nodes: Node[];
edges: Edge[];
selectedElements: (Node | Edge)[];
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
d3Initialised: boolean;
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
connectionSourceId: string | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: OnConnectFunc;
}, "1">;
subscribe: (listener: () => void) => import("redux").Unsubscribe;
replaceReducer: (nextReducer: import("redux").Reducer<import("easy-peasy").IntermediateStateMapper<{
width: number;
height: number;
transform: [number, number, number];
nodes: Node[];
edges: Edge[];
selectedElements: (Node | Edge)[];
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
d3Initialised: boolean;
nodesSelectionActive: boolean;
selectionActive: boolean;
selection: SelectionRect | null;
connectionSourceId: string | null;
connectionPosition: XYPosition;
snapToGrid: boolean;
snapGrid: [number, number];
isInteractive: boolean;
onConnect: OnConnectFunc;
}, "1">, import("redux").AnyAction>) => void;
dispatch: import("easy-peasy").Dispatch<StoreModel, import("redux").Action<any>>;
addModel: <ModelSlice extends object>(key: string, modelSlice: ModelSlice) => void;
clearMockedActions: () => void;
getActions: () => import("easy-peasy").ActionMapper<{
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
selection: SelectionRect | null;
connectionPosition: XYPosition;
onConnect: OnConnectFunc;
setOnConnect: Action<StoreModel, OnConnectFunc>;
setNodes: Action<StoreModel, Node[]>;
setEdges: Action<StoreModel, Edge[]>;
updateNodeData: Action<StoreModel, NodeUpdate>;
updateNodePos: Action<StoreModel, NodePosUpdate>;
setSelection: Action<StoreModel, boolean>;
setNodesSelection: Action<StoreModel, SelectionUpdate>;
setSelectedElements: Action<StoreModel, Node | Edge | (Node | Edge)[]>;
updateSelection: Action<StoreModel, SelectionRect>;
updateTransform: Action<StoreModel, TransformXYK>;
updateSize: Action<StoreModel, Dimensions>;
initD3: Action<StoreModel, D3Init>;
setSnapGrid: Action<StoreModel, SetSnapGrid>;
setConnectionPosition: Action<StoreModel, XYPosition>;
setConnectionSourceId: Action<StoreModel, string | null>;
setInteractive: Action<StoreModel, boolean>;
}, "1">;
getListeners: () => import("easy-peasy").ListenerMapper<{
selectedNodesBbox: Rect;
d3Zoom: ZoomBehavior<Element, unknown> | null;
d3Selection: D3Selection<Element, unknown, null, undefined> | null;
selection: SelectionRect | null;
connectionPosition: XYPosition;
onConnect: OnConnectFunc;
}, "1">;
getMockedActions: () => import("easy-peasy").MockedAction[];
reconfigure: <NewStoreModel extends object>(model: NewStoreModel) => void;
removeModel: (key: string) => void;
};
declare const store: import("easy-peasy").Store<StoreModel, import("easy-peasy").EasyPeasyConfig<{}, any>>;
export default store;
dist/utils/graph.d.ts
Vendored
+7 -7
View File
@@ -1,14 +1,14 @@
import { Node, Edge, XYPosition, Rect, FitViewParams } from '../types';
import { Node, Edge, Elements, Transform, XYPosition, Rect, FitViewParams } from '../types';
export declare const isEdge: (element: Node | Edge) => boolean;
export declare const isNode: (element: Node | Edge) => boolean;
export declare const getOutgoers: (node: Node, elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const removeElements: (elementsToRemove: (Node | Edge)[], elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const addEdge: (edgeParams: Edge, elements: (Node | Edge)[]) => (Node | Edge)[];
export declare const parseElement: (element: Node | Edge, transform: [number, number, number], snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
export declare const getOutgoers: (node: Node, elements: Elements) => Elements;
export declare const removeElements: (elementsToRemove: Elements, elements: Elements) => Elements;
export declare const addEdge: (edgeParams: Edge, elements: Elements) => Elements;
export declare const parseElement: (element: Node | Edge, transform: Transform, snapToGrid: boolean, snapGrid: [number, number]) => Node | Edge;
export declare const getBoundsofRects: (rect1: Rect, rect2: Rect) => Rect;
export declare const getRectOfNodes: (nodes: Node[]) => Rect;
export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: [number, number, number]) => XYPosition;
export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: [number, number, number], partially?: boolean) => Node[];
export declare const graphPosToZoomedPos: ({ x, y }: XYPosition, [tx, ty, tScale]: Transform) => XYPosition;
export declare const getNodesInside: (nodes: Node[], rect: Rect, [tx, ty, tScale]?: Transform, partially?: boolean) => Node[];
export declare const getConnectedEdges: (nodes: Node[], edges: Edge[]) => Edge[];
export declare const fitView: ({ padding }?: FitViewParams) => void;
export declare const zoomIn: () => void;
example/package-lock.json
Generated
+5050 -2889
View File
File diff suppressed because it is too large Load Diff
example/package.json
+2 -2
View File
@@ -3,10 +3,10 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"react-dom": "^16.10.2",
"react-dom": "^16.13.1",
"react-flow": "file:../",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0"
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
package-lock.json
Generated
+4808 -3309
View File
File diff suppressed because it is too large Load Diff
package.json
+29 -29
View File
@@ -5,54 +5,54 @@
"module": "dist/ReactFlow.esm.js",
"private": true,
"dependencies": {
"@svgr/rollup": "^4.3.3",
"@welldone-software/why-did-you-render": "^3.3.9",
"@svgr/rollup": "^5.3.0",
"@welldone-software/why-did-you-render": "^4.0.6",
"classnames": "^2.2.6",
"d3-selection": "^1.4.1",
"d3-zoom": "^1.8.3",
"easy-peasy": "^3.3.0",
"fast-deep-equal": "^3.0.0-beta.2",
"react-draggable": "^4.1.0",
"fast-deep-equal": "^3.1.1",
"react-draggable": "^4.2.0",
"resize-observer": "^1.0.0",
"scheduler": "^0.17.0"
"scheduler": "^0.19.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.8.4",
"@babel/preset-react": "^7.8.3",
"@types/classnames": "^2.2.9",
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.0",
"@babel/preset-react": "^7.9.4",
"@types/classnames": "^2.2.10",
"@types/d3": "^5.7.2",
"@types/react": "^16.9.22",
"@types/react-dom": "^16.9.4",
"autoprefixer": "^9.7.4",
"babel-loader": "^8.0.6",
"babel-preset-react-app": "^9.0.2",
"cypress": "^3.6.1",
"@types/react": "^16.9.31",
"@types/react-dom": "^16.9.6",
"autoprefixer": "^9.7.5",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"cypress": "^4.4.0",
"husky": "^4.2.3",
"postcss-nested": "^4.2.1",
"prettier": "1.19.1",
"prettier": "2.0.2",
"prop-types": "^15.7.2",
"react": "^16.12.0",
"rollup": "^1.31.1",
"rollup-plugin-babel": "^4.3.3",
"rollup": "^2.3.2",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-bundle-size": "^1.0.3",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-livereload": "^1.0.4",
"rollup-plugin-livereload": "^1.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-peer-deps-external": "^2.2.0",
"rollup-plugin-postcss": "^2.0.3",
"rollup-plugin-peer-deps-external": "^2.2.2",
"rollup-plugin-postcss": "^2.5.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-serve": "^1.0.1",
"rollup-plugin-terser": "^5.1.2",
"rollup-plugin-typescript2": "^0.26.0",
"rollup-plugin-uglify": "^6.0.3",
"rollup-plugin-visualizer": "^3.3.1",
"start-server-and-test": "^1.10.6",
"typescript": "^3.7.2",
"wait-on": "^3.3.0"
"rollup-plugin-terser": "^5.3.0",
"rollup-plugin-typescript2": "^0.27.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-visualizer": "^4.0.2",
"start-server-and-test": "^1.10.11",
"typescript": "^3.8.3",
"wait-on": "^4.0.1"
},
"peerDependencies": {
"react": "^16.9.0"
"react": "^16.13.1"
},
"scripts": {
"build": "rollup -c --environment NODE_ENV:production",
src/components/NodesSelection/index.tsx
+6 -6
View File
@@ -30,7 +30,7 @@ function getStartPositions(nodes: Node[]): StartPositions {
export default memo(() => {
const [offset, setOffset] = useState<XYPosition>({ x: 0, y: 0 });
const [startPositions, setStartPositions] = useState<StartPositions>({});
const state = useStoreState(s => ({
const state = useStoreState((s) => ({
transform: s.transform,
selectedNodesBbox: s.selectedNodesBbox,
selectedElements: s.selectedElements,
@@ -38,7 +38,7 @@ export default memo(() => {
snapGrid: s.snapGrid,
nodes: s.nodes,
}));
const updateNodePos = useStoreActions(a => a.updateNodePos);
const updateNodePos = useStoreActions((a) => a.updateNodePos);
const [tx, ty, tScale] = state.transform;
const position = state.selectedNodesBbox;
const grid = (state.snapToGrid ? state.snapGrid : [1, 1])! as [number, number];
@@ -51,7 +51,7 @@ export default memo(() => {
const offsetX: number = scaledClient.x - position.x - tx;
const offsetY: number = scaledClient.y - position.y - ty;
const selectedNodes = (state.selectedElements.filter(isNode) as Node[]).map(
selectedNode => state.nodes.find(node => node.id === selectedNode.id)! as Node
(selectedNode) => state.nodes.find((node) => node.id === selectedNode.id)! as Node
);
const nextStartPositions = getStartPositions(selectedNodes);
@@ -68,7 +68,7 @@ export default memo(() => {
y: evt.clientY / tScale,
};
(state.selectedElements.filter(isNode) as Node[]).forEach(node => {
(state.selectedElements.filter(isNode) as Node[]).forEach((node) => {
const pos: XYPosition = {
x: startPositions[node.id].x + scaledClient.x - position.x - offset.x - tx,
y: startPositions[node.id].y + scaledClient.y - position.y - offset.y - ty,
@@ -88,8 +88,8 @@ export default memo(() => {
<ReactDraggable
scale={tScale}
grid={grid}
onStart={evt => onStart(evt as MouseEvent)}
onDrag={evt => onDrag(evt as MouseEvent)}
onStart={(evt) => onStart(evt as MouseEvent)}
onDrag={(evt) => onDrag(evt as MouseEvent)}
>
<div
className="react-flow__nodesselection-rect"
src/components/UserSelection/index.tsx
+51 -99
View File
@@ -2,29 +2,19 @@
* The user selection rectangle gets displayed when a user drags the mouse while pressing shift
*/
import React, { useEffect, useRef, useState, memo } from 'react';
import React, { memo } from 'react';
import { useStoreActions } from '../../store/hooks';
import { SelectionRect } from '../../types';
import { useStoreActions, useStoreState } from '../../store/hooks';
import { XYPosition } from '../../types';
type UserSelectionProps = {
isInteractive: boolean;
};
const initialRect: SelectionRect = {
startX: 0,
startY: 0,
x: 0,
y: 0,
width: 0,
height: 0,
draw: false,
};
function getMousePosition(evt: MouseEvent) {
function getMousePosition(evt: React.MouseEvent): XYPosition | void {
const reactFlowNode = document.querySelector('.react-flow');
if (!reactFlowNode) {
return false;
return;
}
const containerBounds = reactFlowNode.getBoundingClientRect();
@@ -35,105 +25,67 @@ function getMousePosition(evt: MouseEvent) {
};
}
const SelectionRect = () => {
const userSelectionRect = useStoreState((s) => s.userSelectionRect);
if (!userSelectionRect.draw) {
return null;
}
return (
<div
className="react-flow__selection"
style={{
width: userSelectionRect.width,
height: userSelectionRect.height,
transform: `translate(${userSelectionRect.x}px, ${userSelectionRect.y}px)`,
}}
/>
);
};
export default memo(({ isInteractive }: UserSelectionProps) => {
const selectionPane = useRef<HTMLDivElement>(null);
const [rect, setRect] = useState(initialRect);
const setSelection = useStoreActions(a => a.setSelection);
const updateSelection = useStoreActions(a => a.updateSelection);
const setNodesSelection = useStoreActions(a => a.setNodesSelection);
const { setUserSelection, updateUserSelection, unsetUserSelection } = useStoreActions((a) => ({
setUserSelection: a.setUserSelection,
updateUserSelection: a.updateUserSelection,
unsetUserSelection: a.unsetUserSelection,
}));
if (!isInteractive) {
return null;
}
useEffect(() => {
function onMouseDown(evt: MouseEvent): void {
const mousePos = getMousePosition(evt);
if (!mousePos) {
return;
}
setRect(currentRect => ({
...currentRect,
startX: mousePos.x,
startY: mousePos.y,
x: mousePos.x,
y: mousePos.y,
draw: true,
}));
setSelection(true);
function onMouseDown(evt: React.MouseEvent): void {
const mousePos = getMousePosition(evt);
if (!mousePos) {
return;
}
function onMouseMove(evt: MouseEvent): void {
setRect(currentRect => {
if (!currentRect.draw) {
return currentRect;
}
setUserSelection(mousePos);
}
const mousePos = getMousePosition(evt);
if (!mousePos) {
return currentRect;
}
function onMouseMove(evt: React.MouseEvent): void {
const mousePos = getMousePosition(evt);
const negativeX = mousePos.x < currentRect.startX;
const negativeY = mousePos.y < currentRect.startY;
const nextRect = {
...currentRect,
x: negativeX ? mousePos.x : currentRect.x,
y: negativeY ? mousePos.y : currentRect.y,
width: negativeX ? currentRect.startX - mousePos.x : mousePos.x - currentRect.startX,
height: negativeY ? currentRect.startY - mousePos.y : mousePos.y - currentRect.startY,
};
updateSelection(nextRect);
return nextRect;
});
if (!mousePos) {
return;
}
function onMouseUp() {
setRect(currentRect => {
setNodesSelection({ isActive: true, selection: currentRect });
setSelection(false);
updateUserSelection(mousePos);
}
return {
...currentRect,
draw: false,
};
});
}
if (selectionPane.current) {
selectionPane.current.addEventListener('mousedown', onMouseDown);
selectionPane.current.addEventListener('mousemove', onMouseMove);
selectionPane.current.addEventListener('mouseup', onMouseUp);
return () => {
if (!selectionPane.current) {
return;
}
selectionPane.current.removeEventListener('mousedown', onMouseDown);
selectionPane.current.removeEventListener('mousemove', onMouseMove);
selectionPane.current.removeEventListener('mouseup', onMouseUp);
};
}
return;
}, [selectionPane.current]);
function onMouseUp() {
unsetUserSelection();
}
return (
<div className="react-flow__selectionpane" ref={selectionPane}>
{rect.draw && (
<div
className="react-flow__selection"
style={{
width: rect.width,
height: rect.height,
transform: `translate(${rect.x}px, ${rect.y}px)`,
}}
/>
)}
<div
className="react-flow__selectionpane"
onMouseDown={onMouseDown}
onMouseMove={onMouseMove}
onMouseUp={onMouseUp}
>
<SelectionRect />
</div>
);
});
src/store/index.ts
+78 -3
View File
@@ -67,6 +67,8 @@ export interface StoreModel {
selectionActive: boolean;
selection: SelectionRect | null;
userSelectionRect: SelectionRect;
connectionSourceId: ElementId | null;
connectionPosition: XYPosition;
@@ -108,6 +110,10 @@ export interface StoreModel {
setConnectionSourceId: Action<StoreModel, ElementId | null>;
setInteractive: Action<StoreModel, boolean>;
setUserSelection: Action<StoreModel, XYPosition>;
updateUserSelection: Action<StoreModel, XYPosition>;
unsetUserSelection: Action<StoreModel>;
}
const storeModel: StoreModel = {
@@ -127,6 +133,15 @@ const storeModel: StoreModel = {
selectionActive: false,
selection: null,
userSelectionRect: {
startX: 0,
startY: 0,
x: 0,
y: 0,
width: 0,
height: 0,
draw: false,
},
connectionSourceId: null,
connectionPosition: { x: 0, y: 0 },
@@ -152,7 +167,7 @@ const storeModel: StoreModel = {
updateNodeDimensions: action((state, { id, nodeElement }) => {
const bounds = nodeElement.getBoundingClientRect();
const dimensions = getDimensions(nodeElement);
const matchingNode = state.nodes.find(n => n.id === id);
const matchingNode = state.nodes.find((n) => n.id === id);
// only update when size change
if (
@@ -167,7 +182,7 @@ const storeModel: StoreModel = {
target: getHandleBounds('.target', nodeElement, bounds, state.transform[2]),
};
state.nodes.forEach(n => {
state.nodes.forEach((n) => {
if (n.id === id) {
n.__rg = {
...n.__rg,
@@ -191,7 +206,7 @@ const storeModel: StoreModel = {
};
}
state.nodes.forEach(n => {
state.nodes.forEach((n) => {
if (n.id === id) {
n.__rg = {
...n.__rg,
@@ -201,6 +216,66 @@ const storeModel: StoreModel = {
});
}),
setUserSelection: action((state, mousePos) => {
state.userSelectionRect = {
width: 0,
height: 0,
startX: mousePos.x,
startY: mousePos.y,
x: mousePos.x,
y: mousePos.y,
draw: true,
};
state.selectionActive = true;
}),
updateUserSelection: action((state, mousePos) => {
const startX = state.userSelectionRect.startX || 0;
const startY = state.userSelectionRect.startY || 0;
const negativeX = mousePos.x < startX;
const negativeY = mousePos.y < startY;
const nextRect = {
...state.userSelectionRect,
x: negativeX ? mousePos.x : state.userSelectionRect.x,
y: negativeY ? mousePos.y : state.userSelectionRect.y,
width: negativeX ? startX - mousePos.x : mousePos.x - startX,
height: negativeY ? startY - mousePos.y : mousePos.y - startY,
};
const selectedNodes = getNodesInside(state.nodes, nextRect, state.transform);
const selectedEdges = getConnectedEdges(selectedNodes, state.edges);
const nextSelectedElements = [...selectedNodes, ...selectedEdges];
const selectedElementsUpdated = !isEqual(nextSelectedElements, state.selectedElements);
state.selection = nextRect;
state.selectedElements = selectedElementsUpdated ? nextSelectedElements : state.selectedElements;
state.userSelectionRect = nextRect;
}),
unsetUserSelection: action((state) => {
const selectedNodes = getNodesInside(state.nodes, state.userSelectionRect, state.transform);
if (!selectedNodes.length) {
state.selectionActive = false;
state.userSelectionRect = { ...state.userSelectionRect, draw: false };
state.nodesSelectionActive = false;
state.selectedElements = [];
return;
}
const selectedNodesBbox = getRectOfNodes(selectedNodes);
state.selection = state.userSelectionRect;
state.nodesSelectionActive = true;
state.selectedNodesBbox = selectedNodesBbox;
state.userSelectionRect = { ...state.userSelectionRect, draw: false };
state.selectionActive = false;
}),
setSelection: action((state, isActive) => {
state.selectionActive = isActive;
}),