alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nodes): no remove when in input

Browse Source
This commit is contained in:
moklick
2019-08-05 17:12:09 +02:00
parent f90f3c26cd
commit 1d81205d4f
6 changed files with 131 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
dist/ReactGraph.js vendored
View File

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

42
example/SimpleGraph.js
View File

@@ -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 {
...e,
data: {
...e.data,
label: '6' === e.id ? `option ${id} selected` : e.data.label
}
};
return { ...e, data: { ...e.data, label: `Option ${option} selected.` } };
})}
));
}
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"

86
example/build/example.e31bb0bc.js
View File

@@ -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 = {};

2
example/build/example.e31bb0bc.js.map
View File

File diff suppressed because one or more lines are too long

2
example/build/index.js
View File

@@ -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 = {};

10
src/hooks.js
View File

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