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

feat(nodesselection): zoom- and scalable nodes selection

Browse Source
This commit is contained in:
moklick
2019-07-24 11:37:40 +02:00
parent 1ba6e7b26b
commit ac8ac49d1d
7 changed files with 161 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/state/actions.js
+5 -1
View File
@@ -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,
src/state/index.js
+18 -10
View File
@@ -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: