Skip to content

Commit

Permalink
feat(nodes): add selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@moklick
moklick committed Jul 16, 2019
1 parent a66f707 commit 0e179ff
Show file tree
Hide file tree
Showing 10 changed files with 290 additions and 61 deletions.
176 changes: 152 additions & 24 deletions dist/ReactGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,18 @@
height: bbox.maxY - bbox.minY
};
};
var getNodesInside = function getNodesInside(nodes, bbox) {
var transform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 1];
return nodes.filter(function (n) {
var bboxPos = {
x: (bbox.x - transform[0]) * (1 / transform[2]),
y: (bbox.y - transform[1]) * (1 / transform[2])
};
var bboxWidth = bbox.width * (1 / transform[2]);
var bboxHeight = bbox.height * (1 / transform[2]);
return n.position.x > bboxPos.x && n.position.x + n.data.__width < bboxPos.x + bboxWidth && n.position.y > bboxPos.y && n.position.y + n.data.__height < bboxPos.y + bboxHeight;
});
};

var noop = {value: function() {}};

Expand Down Expand Up @@ -29767,15 +29779,20 @@
var UPDATE_SIZE = 'UPDATE_SIZE';
var INIT_D3 = 'INIT_D3';
var FIT_VIEW = 'FIT_VIEW';
var UPDATE_SELECTION = 'UPDATE_SELECTION';
var SET_SELECTION = 'SET_SELECTION';
var initialState = {
width: 0,
height: 0,
transform: [0, 0, 1],
nodes: [],
edges: [],
selectedNodes: [],
d3Zoom: null,
d3Selection: null,
d3Initialised: false
d3Initialised: false,
selectionActive: false,
selection: {}
};
var reducer = function reducer(state, action) {
switch (action.type) {
Expand Down Expand Up @@ -29817,11 +29834,22 @@
return state;
}

case UPDATE_SELECTION:
{
var selectedNodes = getNodesInside(state.nodes, action.payload.selection, state.transform).map(function (n) {
return n.data.id;
});
return _objectSpread2({}, state, {}, action.payload, {
selectedNodes: selectedNodes
});
}

case SET_NODES:
case SET_EDGES:
case UPDATE_TRANSFORM:
case INIT_D3:
case UPDATE_SIZE:
case SET_SELECTION:
return _objectSpread2({}, state, {}, action.payload);

default:
Expand Down Expand Up @@ -29894,6 +29922,22 @@
type: FIT_VIEW
};
};
var setSelection = function setSelection(isActive) {
return {
type: SET_SELECTION,
payload: {
selectionActive: isActive
}
};
};
var updateSelection = function updateSelection(selection) {
return {
type: UPDATE_SELECTION,
payload: {
selection: selection
}
};
};

var GraphContext = React.createContext({});
var Provider = function Provider(props) {
Expand Down Expand Up @@ -30075,55 +30119,73 @@
return EdgeRenderer;
}(React.PureComponent);

var initialRect = {
startX: 0,
startY: 0,
x: 0,
y: 0,
width: 0,
height: 0,
draw: false
};
var Selection$2 = (function () {
var selectionPane = React.useRef(null);

var _useState = React.useState({
x: 0,
y: 0,
width: 0,
height: 0,
draw: false
}),
var _useState = React.useState(initialRect),
_useState2 = _slicedToArray(_useState, 2),
rect = _useState2[0],
setRect = _useState2[1];

var _useContext = React.useContext(GraphContext),
dispatch = _useContext.dispatch;

React.useEffect(function () {
function onMouseDown(evt) {
setRect(function (r) {
return _objectSpread2({}, r, {
startX: evt.clientX,
startY: evt.clientY,
x: evt.clientX,
y: evt.clientY,
draw: true
});
});
dispatch(setSelection(true));
}

function onMouseMove(evt) {
setRect(function (r) {
return _objectSpread2({}, r, {
width: evt.clientX,
height: evt.clientY
var negativeX = evt.clientX < r.startX;
var negativeY = evt.clientY < r.startY;

if (!r.draw) {
return r;
}

var nextRect = _objectSpread2({}, r, {
x: negativeX ? evt.clientX : r.x,
y: negativeY ? evt.clientY : r.y,
width: negativeX ? r.startX - evt.clientX : evt.clientX - r.startX,
height: negativeY ? r.startY - evt.clientY : evt.clientY - r.startY
});

dispatch(updateSelection(nextRect));
return nextRect;
});
}

function onMouseUp() {
console.log('selection mouse up');
}

function removeAll() {
selectionPane.current.removeEventListener('mousedown', onMouseDown);
selectionPane.current.removeEventListener('mousemove', onMouseMove);
selectionPane.current.removeEventListener('mouseup', onMouseUp);
setRect(initialRect);
dispatch(setSelection(false));
}

selectionPane.current.addEventListener('mousedown', onMouseDown);
selectionPane.current.addEventListener('mousemove', onMouseMove);
selectionPane.current.addEventListener('mouseup', onMouseUp);
return function () {
removeAll();
selectionPane.current.removeEventListener('mousedown', onMouseDown);
selectionPane.current.removeEventListener('mousemove', onMouseMove);
selectionPane.current.removeEventListener('mouseup', onMouseUp);
};
}, []);
return React__default.createElement("div", {
Expand Down Expand Up @@ -30280,7 +30342,8 @@
var data = _ref.data,
style = _ref.style;
return React__default.createElement("div", {
style: _objectSpread2({}, nodeStyles$1, {}, style)
style: _objectSpread2({}, nodeStyles$1, {}, style),
className: "react-graph__node-inner"
}, data.label, React__default.createElement(Handle, {
style: {
bottom: 0,
Expand Down Expand Up @@ -32519,6 +32582,59 @@

});

var classnames = createCommonjsModule(function (module) {
/*!
Copyright (c) 2017 Jed Watson.
Licensed under the MIT License (MIT), see
http://jedwatson.github.io/classnames
*/
/* global define */

(function () {

var hasOwn = {}.hasOwnProperty;

function classNames () {
var classes = [];

for (var i = 0; i < arguments.length; i++) {
var arg = arguments[i];
if (!arg) continue;

var argType = typeof arg;

if (argType === 'string' || argType === 'number') {
classes.push(arg);
} else if (Array.isArray(arg) && arg.length) {
var inner = classNames.apply(null, arg);
if (inner) {
classes.push(inner);
}
} else if (argType === 'object') {
for (var key in arg) {
if (hasOwn.call(arg, key) && arg[key]) {
classes.push(key);
}
}
}
}

return classes.join(' ');
}

if ( module.exports) {
classNames.default = classNames;
module.exports = classNames;
} else {
window.classNames = classNames;
}
}());
});

var isInputTarget = function isInputTarget(e) {
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
};

var wrapNode = (function (NodeComponent) {
return function (props) {
var position = props.position,
Expand All @@ -32533,6 +32649,10 @@
y = _graphContext$state$t[1],
k = _graphContext$state$t[2];

var selected = graphContext.state.selectedNodes.includes(id);
var nodeClasses = classnames('react-graph__node', {
selected: selected
});
React.useEffect(function () {
var bounds = nodeElement.current.getBoundingClientRect();
var unscaledWith = Math.round(bounds.width * (1 / k));
Expand All @@ -32545,6 +32665,10 @@
return React__default.createElement(reactDraggable.DraggableCore, {
grid: [1, 1],
onStart: function onStart(e) {
if (isInputTarget(e)) {
return false;
}

var unscaledPos = {
x: e.clientX * (1 / k),
y: e.clientY * (1 / k)
Expand Down Expand Up @@ -32573,13 +32697,17 @@
},
scale: k
}, React__default.createElement("div", {
className: "react-graph__nodewrap",
className: nodeClasses,
ref: nodeElement,
style: {
transform: "translate(".concat(position.x, "px,").concat(position.y, "px)")
},
onClick: function onClick() {
return onNodeClick({
onClick: function onClick(e) {
if (isInputTarget(e)) {
return false;
}

onNodeClick({
data: data,
position: position
});
Expand Down Expand Up @@ -32630,7 +32758,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: 2;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 3;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0,0,0,0.1);\n border: 1px solid #222;\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__nodewrap {\n position: absolute;\n width: 150px;\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__nodewrap:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\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 width: 150px;\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}";
styleInject(css);

var ReactGraph =
Expand Down
21 changes: 15 additions & 6 deletions example/SimpleGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,14 @@ const SpecialNode = ({ data, styles }) => (
style={{ background: '#FFCC00', padding: 10, borderRadius: 30, ...styles }}
>
I am <strong>special</strong>!<br />{data.label}
<input
style={{ margin: '10px 0' }}
/>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
);

Expand All @@ -17,12 +25,12 @@ class App extends PureComponent {

this.state = {
elements: [
{ data: { id: '1', label: 'Tests', type: 'input' }, position: { x: 0, y: 0 } },
{ data: { id: '1', label: 'Tests', type: 'input' }, position: { x: 50, y: 50 } },
{ data: { id: '2', label: 'This is a node This is a node This is a node This is a node' }, position: { x: 100, y: 100 } },
{ data: { id: '3', label: 'This is a node' }, position: { x: 100, y: 200 }, style: { background: '#222', color: '#fff' } },
{ data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
{ data: { id: '5', label: 'Another node', type: 'default' }, position: { x: 400, y: 300 } },
{ data: { id: '6', label: 'I am label', type: 'special' }, position: { x: 400, y: 400 } },
{ data: { id: '6', label: 'I have inputs', type: 'special' }, position: { x: 400, y: 400 } },
{ data: { source: '1', target: '2' } },
{ data: { source: '2', target: '3' } },
{ data: { source: '3', target: '4' } },
Expand All @@ -34,8 +42,9 @@ class App extends PureComponent {

onLoad(graphInstance) {
this.graphInstance = graphInstance;

console.log('graph loaded:', this.graphInstance);

this.graphInstance.fitView();
}

onChange(elements) {
Expand All @@ -57,7 +66,7 @@ class App extends PureComponent {
...prevState,
elements: prevState.elements.concat({
data: { id: prevState.elements.length + 1, label: 'Added node' },
position: { x: 50, y: 50 }
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }
})
}));
}
Expand All @@ -76,14 +85,14 @@ class App extends PureComponent {
>
<button
type="button"
style={{ position: 'absolute', right: '10px', bottom: '10px' }}
style={{ position: 'absolute', right: '10px', bottom: '10px', zIndex: 4 }}
onClick={() => this.onFitView()}
>
fit
</button>
<button
type="button"
style={{ position: 'absolute', bottom: '10px', left: '10px' }}
style={{ position: 'absolute', bottom: '10px', left: '10px', zIndex: 4 }}
onClick={() => this.onAdd()}
>
add
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"main": "dist/ReactGraph.js",
"private": true,
"dependencies": {
"classnames": "^2.2.6",
"d3-selection": "^1.4.0",
"d3-zoom": "^1.7.3",
"lodash.isequal": "^4.5.0",
Expand Down
5 changes: 4 additions & 1 deletion src/NodeRenderer/NodeTypes/InputNode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ const nodeStyles = {
};

export default ({ data, style }) => (
<div style={{ ...nodeStyles, ...style }}>
<div
style={{ ...nodeStyles, ...style }}
className="react-graph__node-inner"
>
{data.label}
<Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
</div>
Expand Down

0 comments on commit 0e179ff

Please sign in to comment.