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

108
dist/ReactGraph.js vendored
View File

@@ -29797,6 +29797,7 @@
var FIT_VIEW = 'FIT_VIEW';
var UPDATE_SELECTION = 'UPDATE_SELECTION';
var SET_SELECTION = 'SET_SELECTION';
var SET_NODES_SELECTION = 'SET_NODES_SELECTION';
var initialState = {
width: 0,
height: 0,
@@ -29813,6 +29814,7 @@
d3Zoom: null,
d3Selection: null,
d3Initialised: false,
nodesSelectionActive: false,
selectionActive: false,
selection: {}
};
@@ -29861,24 +29863,34 @@
case UPDATE_SELECTION:
{
var selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
var selectedNodesBbox = getBoundingBox(selectedNodes);
var selectedNodeIds = selectedNodes.map(function (n) {
return n.data.id;
});
var 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)
};
var bboxWidth = selectedNodesBbox.width * state.transform[2] + 10;
var bboxHeight = selectedNodesBbox.height * state.transform[2] + 10;
bboxPos.x -= 5;
bboxPos.y -= 5;
return _objectSpread2({}, state, {}, action.payload, {
selectedNodeIds: selectedNodeIds,
selectedNodesBbox: _objectSpread2({}, bboxPos, {
width: bboxWidth,
height: bboxHeight
})
selectedNodeIds: selectedNodeIds
});
}
case SET_NODES_SELECTION:
{
if (!action.payload.nodesSelectionActive) {
return _objectSpread2({}, state, {
nodesSelectionActive: false,
selectedNodeIds: []
});
}
var _selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform);
var selectedNodesBbox = getBoundingBox(_selectedNodes); // 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 _objectSpread2({}, state, {}, action.payload, {
selectedNodesBbox: selectedNodesBbox
});
}
@@ -29968,6 +29980,17 @@
}
};
};
var setNodesSelection = function setNodesSelection(_ref2) {
var isActive = _ref2.isActive,
selection = _ref2.selection;
return {
type: SET_NODES_SELECTION,
payload: {
nodesSelectionActive: isActive,
selection: selection
}
};
};
var updateSelection = function updateSelection(selection) {
return {
type: UPDATE_SELECTION,
@@ -30163,8 +30186,7 @@
y: 0,
width: 0,
height: 0,
draw: false,
fixed: false
draw: false
};
function getMousePosition(evt) {
@@ -30184,8 +30206,7 @@
setRect = _useState2[1];
var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch,
state = _useContext.state;
dispatch = _useContext.dispatch;
React.useEffect(function () {
function onMouseDown(evt) {
@@ -30204,14 +30225,14 @@
function onMouseMove(evt) {
setRect(function (r) {
var mousePos = getMousePosition(evt);
var negativeX = mousePos.x < r.startX;
var negativeY = mousePos.y < r.startY;
if (!r.draw) {
return r;
}
var mousePos = getMousePosition(evt);
var negativeX = mousePos.x < r.startX;
var negativeY = mousePos.y < r.startY;
var nextRect = _objectSpread2({}, r, {
x: negativeX ? mousePos.x : r.x,
y: negativeY ? mousePos.y : r.y,
@@ -30230,7 +30251,11 @@
fixed: true
});
dispatch(updateSelection(nextRect));
dispatch(setNodesSelection({
isActive: true,
selection: nextRect
}));
dispatch(setSelection(false));
return nextRect;
});
}
@@ -30244,17 +30269,40 @@
selectionPane.current.removeEventListener('mouseup', onMouseUp);
};
}, []);
var selectionRect = rect.fixed ? state.selectedNodesBbox : rect;
console.log(selectionRect);
return React__default.createElement("div", {
className: "react-graph__selectionpane",
ref: selectionPane
}, (rect.draw || rect.fixed) && React__default.createElement("div", {
className: "react-graph__selection",
style: {
width: selectionRect.width,
height: selectionRect.height,
transform: "translate(".concat(selectionRect.x, "px, ").concat(selectionRect.y, "px)")
width: rect.width,
height: rect.height,
transform: "translate(".concat(rect.x, "px, ").concat(rect.y, "px)")
}
}));
});
var NodesSelection = (function () {
var graphContext = React.useContext(GraphContext);
var state = graphContext.state,
dispatch = graphContext.dispatch;
return React__default.createElement("div", {
className: "react-graph__nodesselection",
style: {
transform: "translate(".concat(state.transform[0], "px,").concat(state.transform[1], "px) scale(").concat(state.transform[2], ")")
},
onClick: function onClick() {
return dispatch(setNodesSelection({
isActive: false
}));
}
}, React__default.createElement("div", {
className: "react-graph__nodesselection-rect",
style: {
width: state.selectedNodesBbox.width,
height: state.selectedNodesBbox.height,
top: state.selectedNodesBbox.y,
left: state.selectedNodesBbox.x
}
}));
});
@@ -30352,7 +30400,7 @@
}), React__default.createElement(EdgeRenderer, {
width: graphContext.state.width,
height: graphContext.state.height
}), shiftPressed && React__default.createElement(UserSelection, null), React__default.createElement("div", {
}), shiftPressed && React__default.createElement(UserSelection, null), graphContext.state.nodesSelectionActive && React__default.createElement(NodesSelection, null), React__default.createElement("div", {
className: "react-graph__zoompane",
ref: zoomPane
}));
@@ -32824,7 +32872,7 @@
}
}
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n pointer-events: none;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}";
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n pointer-events: none;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n}\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n}\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}";
styleInject(css);
var ReactGraph =

4
src/GraphView/index.js
View File

@@ -7,10 +7,11 @@ import { GraphContext } from '../GraphContext';
import NodeRenderer from '../NodeRenderer';
import EdgeRenderer from '../EdgeRenderer';
import UserSelection from '../UserSelection';
import NodesSelection from '../NodesSelection';
import { updateTransform, updateSize, initD3, fitView } from '../state/actions';
import { useKeyPress } from '../hooks';
const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2])
const d3ZoomInstance = d3Zoom.zoom().scaleExtent([0.5, 2]);
const GraphView = (props) => {
const zoomPane = useRef(null);
@@ -75,6 +76,7 @@ const GraphView = (props) => {
<NodeRenderer nodeTypes={props.nodeTypes} />
<EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
{shiftPressed && <UserSelection />}
{graphContext.state.nodesSelectionActive && <NodesSelection />}
<div
className="react-graph__zoompane"
ref={zoomPane}

29
src/NodesSelection/index.js Normal file
View File

@@ -0,0 +1,29 @@
import React, { useContext } from 'react';
import { GraphContext } from '../GraphContext';
import { setNodesSelection } from '../state/actions';
export default () => {
const graphContext = useContext(GraphContext);
const { state, dispatch } = graphContext;
return (
<div
className="react-graph__nodesselection"
style={{
transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
}}
onClick={() => dispatch(setNodesSelection({ isActive: false }))}
>
<div
className="react-graph__nodesselection-rect"
style={{
width: state.selectedNodesBbox.width,
height: state.selectedNodesBbox.height,
top: state.selectedNodesBbox.y,
left: state.selectedNodesBbox.x
}}
/>
</div>
);
};

27
src/UserSelection/index.js
View File

@@ -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 (
<div
className="react-graph__selectionpane"
@@ -105,9 +100,9 @@ export default () => {
<div
className="react-graph__selection"
style={{
width: selectionRect.width,
height: selectionRect.height,
transform: `translate(${selectionRect.x}px, ${selectionRect.y}px)`
width: rect.width,
height: rect.height,
transform: `translate(${rect.x}px, ${rect.y}px)`
}}
/>
)}

6
src/state/actions.js
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,

28
src/state/index.js
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:

17
src/style.css
View File

@@ -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);
}