fix(nodes): no remove when in input

dist/ReactGraph.js

@@ -32887,6 +32887,10 @@
     };
   };
 
+  var isInput = function isInput(target) {
+    return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+  };
+
   function useKeyPress(targetKey) {
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
@@ -32894,17 +32898,19 @@
         setKeyPressed = _useState2[1];
 
     function downHandler(_ref) {
-      var key = _ref.key;
+      var key = _ref.key,
+          target = _ref.target;
 
-      if (key === targetKey) {
+      if (key === targetKey && !isInput(target)) {
         setKeyPressed(true);
       }
     }
 
     var upHandler = function upHandler(_ref2) {
-      var key = _ref2.key;
+      var key = _ref2.key,
+          target = _ref2.target;
 
-      if (key === targetKey) {
+      if (key === targetKey && !isInput(target)) {
         setKeyPressed(false);
       }
     };
@@ -33197,7 +33203,7 @@
     }, React__default.createElement(TargetHandle, null), data.label);
   });
 
-  var isInput = function isInput(e) {
+  var isInput$1 = function isInput(e) {
     return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
   };
 
@@ -33233,7 +33239,7 @@
         position = _ref.position,
         transform = _ref.transform;
 
-    if (isInput(evt) || isHandle(evt)) {
+    if (isInput$1(evt) || isHandle(evt)) {
       return false;
     }
 
@@ -33447,7 +33453,7 @@
     }));
   });
 
-  var isInput$1 = function isInput(e) {
+  var isInput$2 = function isInput(e) {
     return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
   };
 
@@ -33467,7 +33473,7 @@
       return React__default.createElement("g", {
         className: edgeClasses,
         onClick: function onClick(e) {
-          if (isInput$1(e)) {
+          if (isInput$2(e)) {
             return false;
           }
 

example/SimpleGraph.js

@@ -18,26 +18,45 @@ const SpecialNode = ({ data, styles }) => (
   </div>
 );
 
+const InputNode = ({ data, styles }) => (
+  <div
+    style={{ background: '#FFCC00', padding: 10, borderRadius: 2, ...styles }}
+  >
+    <TargetHandle style={{ left: 10, background: '#999' }} />
+    <div>{data.input}</div>
+    <input onChange={(e) => data.onChange(e.target.value, data)} />
+    <SourceHandle style={{ left: 10, background: '#999' }} />
+  </div>
+);
+
 const onNodeDragStop = node => console.log('drag stop', node);
 
 class App extends PureComponent {
   constructor() {
     super();
 
-    const onChange = (id, d) => {
+    const onChange = (option, d) => {
       this.setState(prevState => (
         {elements: prevState.elements.map(e => {
-          if (isEdge(e)) {
+          if (isEdge(e) || e.id !== '6') {
             return e;
           }
 
-          return {
+          return { ...e, data: { ...e.data, label: `Option ${option} selected.` } };
-            ...e,
+        })}
-            data: {
+      ));
-              ...e.data,
+    }
-              label: '6' === e.id ? `option ${id} selected` : e.data.label
+
-            }
+    const onChangeInput = (input, d) => {
-          };
+      this.setState(prevState => (
+        {elements: prevState.elements.map(e => {
+          if (isEdge(e) || e.id !== '8') {
+            return e;
+          }
+
+          if (e.id === '8') {
+            return { ...e, data: { ...e.data, input: input || 'write something' } };
+          }
         })}
       ));
     }
@@ -52,7 +71,9 @@ class App extends PureComponent {
         { id: '5', type: 'default', data: { label: '5 Another node'}, position: { x: 400, y: 300 } },
         { id: '6', type: 'special', data: { onChange, label: '6 no option selected' }, position: { x: 425, y: 375 } },
         { id: '7', type: 'output', data: { label: '7 output' }, position: { x: 250, y: 500 } },
+        { id: '8', type: 'text', data: { onChange: onChangeInput, input: 'write something' }, position: { x: 300, y: 100 } },
         { source: '1', target: '2', animated: true },
+        { source: '1', target: '8', animated: true },
         { source: '2', target: '3' },
         { source: '3', target: '4' },
         { source: '3', target: '5' },
@@ -136,7 +157,8 @@ class App extends PureComponent {
         onLoad={graphInstance => this.onLoad(graphInstance)}
         onChange={(elements) => this.onChange(elements)}
         nodeTypes={{
-          special: SpecialNode
+          special: SpecialNode,
+          text: InputNode
         }}
         connectionLineStyle={{ stroke: '#ddd', strokeWidth: 2 }}
         connectionLineType="bezier"

example/build/example.e31bb0bc.js

@@ -41057,6 +41057,10 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var isInput = function isInput(target) {
+  return ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+};
+
 function useKeyPress(targetKey) {
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -41064,17 +41068,19 @@ function useKeyPress(targetKey) {
       setKeyPressed = _useState2[1];
 
   function downHandler(_ref) {
-    var key = _ref.key;
+    var key = _ref.key,
+        target = _ref.target;
 
-    if (key === targetKey) {
+    if (key === targetKey && !isInput(target)) {
       setKeyPressed(true);
     }
   }
 
   var upHandler = function upHandler(_ref2) {
-    var key = _ref2.key;
+    var key = _ref2.key,
+        target = _ref2.target;
 
-    if (key === targetKey) {
+    if (key === targetKey && !isInput(target)) {
       setKeyPressed(false);
     }
   };
@@ -42448,6 +42454,32 @@ var SpecialNode = function SpecialNode(_ref) {
   }));
 };
 
+var InputNode = function InputNode(_ref2) {
+  var data = _ref2.data,
+      styles = _ref2.styles;
+  return _react.default.createElement("div", {
+    style: _objectSpread({
+      background: '#FFCC00',
+      padding: 10,
+      borderRadius: 2
+    }, styles)
+  }, _react.default.createElement(_src.TargetHandle, {
+    style: {
+      left: 10,
+      background: '#999'
+    }
+  }), _react.default.createElement("div", null, data.input), _react.default.createElement("input", {
+    onChange: function onChange(e) {
+      return data.onChange(e.target.value, data);
+    }
+  }), _react.default.createElement(_src.SourceHandle, {
+    style: {
+      left: 10,
+      background: '#999'
+    }
+  }));
+};
+
 var onNodeDragStop = function onNodeDragStop(node) {
   return console.log('drag stop', node);
 };
@@ -42464,17 +42496,17 @@ function (_PureComponent) {
 
     _this = _possibleConstructorReturn(this, _getPrototypeOf(App).call(this));
 
-    var onChange = function onChange(id, d) {
+    var onChange = function onChange(option, d) {
       _this.setState(function (prevState) {
         return {
           elements: prevState.elements.map(function (e) {
-            if ((0, _src.isEdge)(e)) {
+            if ((0, _src.isEdge)(e) || e.id !== '6') {
               return e;
             }
 
             return _objectSpread({}, e, {
               data: _objectSpread({}, e.data, {
-                label: '6' === e.id ? "option ".concat(id, " selected") : e.data.label
+                label: "Option ".concat(option, " selected.")
               })
             });
           })
@@ -42482,6 +42514,26 @@ function (_PureComponent) {
       });
     };
 
+    var onChangeInput = function onChangeInput(input, d) {
+      _this.setState(function (prevState) {
+        return {
+          elements: prevState.elements.map(function (e) {
+            if ((0, _src.isEdge)(e) || e.id !== '8') {
+              return e;
+            }
+
+            if (e.id === '8') {
+              return _objectSpread({}, e, {
+                data: _objectSpread({}, e.data, {
+                  input: input || 'write something'
+                })
+              });
+            }
+          })
+        };
+      });
+    };
+
     _this.state = {
       graphLoaded: false,
       elements: [{
@@ -42558,10 +42610,25 @@ function (_PureComponent) {
           x: 250,
           y: 500
         }
+      }, {
+        id: '8',
+        type: 'text',
+        data: {
+          onChange: onChangeInput,
+          input: 'write something'
+        },
+        position: {
+          x: 300,
+          y: 100
+        }
       }, {
         source: '1',
         target: '2',
         animated: true
+      }, {
+        source: '1',
+        target: '8',
+        animated: true
       }, {
         source: '2',
         target: '3'
@@ -42695,7 +42762,8 @@ function (_PureComponent) {
           return _this2.onChange(elements);
         },
         nodeTypes: {
-          special: SpecialNode
+          special: SpecialNode,
+          text: InputNode
         },
         connectionLineStyle: {
           stroke: '#ddd',
@@ -42785,7 +42853,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50661" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "54719" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

example/build/index.js

@@ -212,7 +212,7 @@ var parent = module.bundle.parent;
 if ((!parent || !parent.isParcelRequire) && typeof WebSocket !== 'undefined') {
   var hostname = "" || location.hostname;
   var protocol = location.protocol === 'https:' ? 'wss' : 'ws';
-  var ws = new WebSocket(protocol + '://' + hostname + ':' + "50661" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "54719" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/hooks.js

@@ -1,16 +1,18 @@
 import { useState, useEffect } from 'react';
 
+const isInput = target => ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.nodeName);
+
 export function useKeyPress(targetKey) {
   const [keyPressed, setKeyPressed] = useState(false);
 
-  function downHandler({ key }) {
+  function downHandler({ key, target }) {
-    if (key === targetKey) {
+    if (key === targetKey && !isInput(target)) {
       setKeyPressed(true);
     }
   }
 
-  const upHandler = ({ key }) => {
+  const upHandler = ({ key, target }) => {
-    if (key === targetKey) {
+    if (key === targetKey && !isInput(target)) {
       setKeyPressed(false);
     }
   };