Skip to content

Commit

Permalink
fix(nodes): no remove when in input
Browse files Browse the repository at this point in the history
  • Loading branch information
@moklick
moklick committed Aug 5, 2019
1 parent f90f3c2 commit 1d81205
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 33 deletions.
22 changes: 14 additions & 8 deletions dist/ReactGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32887,24 +32887,30 @@
};
};

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

function useKeyPress(targetKey) {
var _useState = React.useState(false),
_useState2 = _slicedToArray(_useState, 2),
keyPressed = _useState2[0],
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);
}
};
Expand Down Expand Up @@ -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);
};

Expand Down Expand Up @@ -33233,7 +33239,7 @@
position = _ref.position,
transform = _ref.transform;

if (isInput(evt) || isHandle(evt)) {
if (isInput$1(evt) || isHandle(evt)) {
return false;
}

Expand Down Expand Up @@ -33447,7 +33453,7 @@
}));
});

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

Expand All @@ -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;
}

Expand Down
42 changes: 32 additions & 10 deletions example/SimpleGraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) || e.id !== '6') {
return e;
}

return { ...e, data: { ...e.data, label: `Option ${option} selected.` } };
})}
));
}

const onChangeInput = (input, d) => {
this.setState(prevState => (
{elements: prevState.elements.map(e => {
if (isEdge(e)) {
if (isEdge(e) || e.id !== '8') {
return e;
}

return {
...e,
data: {
...e.data,
label: '6' === e.id ? `option ${id} selected` : e.data.label
}
};
if (e.id === '8') {
return { ...e, data: { ...e.data, input: input || 'write something' } };
}
})}
));
}
Expand All @@ -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' },
Expand Down Expand Up @@ -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"
Expand Down
86 changes: 77 additions & 9 deletions example/build/example.e31bb0bc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41057,24 +41057,30 @@ 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),
keyPressed = _useState2[0],
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);
}
};
Expand Down Expand Up @@ -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);
};
Expand All @@ -42464,24 +42496,44 @@ 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.")
})
});
})
};
});
};

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: [{
Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -42695,7 +42762,8 @@ function (_PureComponent) {
return _this2.onChange(elements);
},
nodeTypes: {
special: SpecialNode
special: SpecialNode,
text: InputNode
},
connectionLineStyle: {
stroke: '#ddd',
Expand Down Expand Up @@ -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 = {};
Expand Down
2 changes: 1 addition & 1 deletion example/build/example.e31bb0bc.js.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion example/build/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 6 additions & 4 deletions src/hooks.js
View file
Original file line number Diff line number Diff line change
@@ -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 }) {
if (key === targetKey) {
function downHandler({ key, target }) {
if (key === targetKey && !isInput(target)) {
setKeyPressed(true);
}
}

const upHandler = ({ key }) => {
if (key === targetKey) {
const upHandler = ({ key, target }) => {
if (key === targetKey && !isInput(target)) {
setKeyPressed(false);
}
};
Expand Down

0 comments on commit 1d81205

Please sign in to comment.