{
+ const graphContext = useContext(GraphContext);
+ const { state, dispatch } = graphContext;
+
+ return (
+
dispatch(setNodesSelection({ isActive: false }))}
+ >
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/UserSelection/index.js b/src/UserSelection/index.js
index 35f20ed6..5d7ae290 100644
--- a/src/UserSelection/index.js
+++ b/src/UserSelection/index.js
@@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState, useContext } from 'react';
import { GraphContext } from '../GraphContext';
-import { updateSelection, setSelection } from '../state/actions';
+import { updateSelection, setSelection, setNodesSelection } from '../state/actions';
const initialRect = {
startX: 0,
@@ -10,8 +10,7 @@ const initialRect = {
y: 0,
width: 0,
height: 0,
- draw: false,
- fixed: false
+ draw: false
};
function getMousePosition(evt) {
@@ -26,7 +25,7 @@ function getMousePosition(evt) {
export default () => {
const selectionPane = useRef(null);
const [rect, setRect] = useState(initialRect);
- const { dispatch, state } = useContext(GraphContext);
+ const { dispatch } = useContext(GraphContext);
useEffect(() => {
function onMouseDown(evt) {
@@ -46,15 +45,13 @@ export default () => {
function onMouseMove(evt) {
setRect((r) => {
- const mousePos = getMousePosition(evt);
-
- const negativeX = mousePos.x < r.startX;
- const negativeY = mousePos.y < r.startY;
-
if (!r.draw) {
return r;
}
+ const mousePos = getMousePosition(evt);
+ const negativeX = mousePos.x < r.startX;
+ const negativeY = mousePos.y < r.startY;
const nextRect = {
...r,
x: negativeX ? mousePos.x : r.x,
@@ -76,7 +73,8 @@ export default () => {
fixed: true
};
- dispatch(updateSelection(nextRect));
+ dispatch(setNodesSelection({ isActive: true, selection: nextRect }));
+ dispatch(setSelection(false));
return nextRect;
});
@@ -93,9 +91,6 @@ export default () => {
};
}, []);
- const selectionRect = rect.fixed ? state.selectedNodesBbox : rect;
- console.log(selectionRect)
-
return (
{
)}
diff --git a/src/state/actions.js b/src/state/actions.js
index b1441f48..7b564eba 100644
--- a/src/state/actions.js
+++ b/src/state/actions.js
@@ -1,7 +1,7 @@
import {
UPDATE_TRANSFORM, UPDATE_SIZE, SET_NODES, SET_EDGES,
UPDATE_NODE_DATA, UPDATE_NODE_POS, INIT_D3, FIT_VIEW,
- UPDATE_SELECTION, SET_SELECTION
+ UPDATE_SELECTION, SET_SELECTION, SET_NODES_SELECTION
} from './index';
export const updateTransform = (transform) => {
@@ -61,6 +61,10 @@ export const setSelection = (isActive) => {
return { type: SET_SELECTION, payload: { selectionActive: isActive } };
};
+export const setNodesSelection = ({ isActive, selection }) => {
+ return { type: SET_NODES_SELECTION, payload: { nodesSelectionActive: isActive, selection } };
+};
+
export const updateSelection = (selection) => {
return {
type: UPDATE_SELECTION,
diff --git a/src/state/index.js b/src/state/index.js
index 8855f1d4..b6c561bb 100644
--- a/src/state/index.js
+++ b/src/state/index.js
@@ -12,6 +12,7 @@ export const INIT_D3 = 'INIT_D3';
export const FIT_VIEW = 'FIT_VIEW';
export const UPDATE_SELECTION = 'UPDATE_SELECTION';
export const SET_SELECTION = 'SET_SELECTION';
+export const SET_NODES_SELECTION = 'SET_NODES_SELECTION';
export const initialState = {
width: 0,
@@ -26,6 +27,7 @@ export const initialState = {
d3Selection: null,
d3Initialised: false,
+ nodesSelectionActive: false,
selectionActive: false,
selection: {},
};
@@ -75,20 +77,26 @@ export const reducer = (state, action) => {
}
case UPDATE_SELECTION: {
const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
- const selectedNodesBbox = getBoundingBox(selectedNodes);
const selectedNodeIds = selectedNodes.map(n => n.data.id);
- const bboxPos = {
- x: ((selectedNodesBbox.x * state.transform[2]) + (state.transform[0] * (1 / 1.0))),
- y: ((selectedNodesBbox.y * state.transform[2]) + (state.transform[1] * (1 / 1.0)))
- };
- let bboxWidth = (selectedNodesBbox.width * state.transform[2]) + 10;
- let bboxHeight = (selectedNodesBbox.height * state.transform[2]) + 10;
+ return { ...state, ...action.payload, selectedNodeIds };
+ }
+ case SET_NODES_SELECTION: {
+ if (!action.payload.nodesSelectionActive) {
+ return { ...state, nodesSelectionActive: false, selectedNodeIds: [] };
+ }
+ const selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
+ const selectedNodesBbox = getBoundingBox(selectedNodes);
- bboxPos.x -= 5;
- bboxPos.y -= 5;
+ // const bboxPos = {
+ // left: ((selectedNodesBbox.x * state.transform[2]) + (state.transform[0] * (1 / 1.0))),
+ // top: ((selectedNodesBbox.y * state.transform[2]) + (state.transform[1] * (1 / 1.0)))
+ // };
+ // let bboxWidth = (selectedNodesBbox.width * state.transform[2]) + 10;
+ // let bboxHeight = (selectedNodesBbox.height * state.transform[2]) + 10;
- return { ...state, ...action.payload, selectedNodeIds, selectedNodesBbox: { ...bboxPos, width: bboxWidth, height: bboxHeight } };
+
+ return { ...state, ...action.payload, selectedNodesBbox };
}
case SET_NODES:
case SET_EDGES:
diff --git a/src/style.css b/src/style.css
index 3781f5c3..a0a06346 100644
--- a/src/style.css
+++ b/src/style.css
@@ -84,4 +84,21 @@
background: #222;
left: 50%;
border-radius: 50%;
+}
+
+.react-graph__nodesselection {
+ z-index: 3;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ transform-origin: left top;
+ pointer-events: none;
+}
+
+.react-graph__nodesselection-rect {
+ position: absolute;
+ background: rgba(0, 89, 220, 0.08);
+ border: 1px dotted rgba(0, 89, 220, 0.8);
}
\ No newline at end of file