feat(nodes): add selection

src/NodeRenderer/NodeTypes/InputNode.js

@@ -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>

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useRef, useContext } from 'react';
 import ReactDraggable from 'react-draggable';
+import cx from 'classnames';
 
 import { GraphContext } from '../../GraphContext';
 import { updateNodeData, updateNodePos } from '../../state/actions';
-import { projectPosition } from '../../graph-utils';
+
+const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
 
 export default NodeComponent => (props) => {
   const { position, data, onNodeClick } = props;
@@ -11,6 +13,8 @@ export default NodeComponent => (props) => {
   const nodeElement = useRef(null);
   const graphContext = useContext(GraphContext);
   const [ x, y, k ] = graphContext.state.transform;
+  const selected = graphContext.state.selectedNodes.includes(id);
+  const nodeClasses = cx('react-graph__node', { selected });
 
   useEffect(() => {
     const bounds = nodeElement.current.getBoundingClientRect();
@@ -24,6 +28,10 @@ export default NodeComponent => (props) => {
     <ReactDraggable.DraggableCore
       grid={[1, 1]}
       onStart={(e) => {
+        if (isInputTarget(e)) {
+          return false;
+        }
+
         const unscaledPos = {
           x: e.clientX * (1 / k),
           y: e.clientY * (1 / k)
@@ -48,10 +56,15 @@ export default NodeComponent => (props) => {
       scale={k}
     >
       <div
-        className="react-graph__nodewrap"
+        className={nodeClasses}
         ref={nodeElement}
         style={{ transform: `translate(${position.x}px,${position.y}px)` }}
-        onClick={() => onNodeClick({ data, position })}
+        onClick={(e) => {
+          if (isInputTarget(e)) {
+            return false;
+          }
+          onNodeClick({ data, position });
+        }}
       >
         <NodeComponent {...props} />
       </div>