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

feat(edges): step edge

Browse Source
This commit is contained in:
moklick
2019-08-06 11:21:03 +02:00
parent 24a296fef9
commit cac51acc26
7 changed files with 76 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/ReactGraph.js
Vendored
+16 -1
View File
@@ -33453,6 +33453,20 @@
}));
});
var StepEdge = React.memo(function (props) {
var sourceX = props.sourceX,
sourceY = props.sourceY,
targetX = props.targetX,
targetY = props.targetY,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style;
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
return React__default.createElement("path", _extends({}, style, {
d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(sourceX, ",").concat(centerY, "L ").concat(targetX, ",").concat(centerY, "L ").concat(targetX, ",").concat(targetY)
}));
});
var isInput$2 = function isInput(e) {
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
};
@@ -33617,7 +33631,8 @@
},
edgeTypes: {
"default": BezierEdge,
straight: StraightEdge
straight: StraightEdge,
step: StepEdge
},
connectionLineType: 'bezier',
connectionLineStyle: {}
example/SimpleGraph.js
+1 -1
View File
@@ -75,7 +75,7 @@ class App extends PureComponent {
{ source: '1', target: '2', animated: true },
{ source: '1', target: '8', animated: true },
{ source: '2', target: '3' },
{ source: '3', target: '4' },
{ source: '3', target: '4', type: 'step' },
{ source: '3', target: '5' },
{ source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } },
{ source: '6', target: '7', style: { stroke: '#FFCC00' }},
example/build/example.e31bb0bc.js
+37 -4
View File
@@ -41923,6 +41923,35 @@ var _default = (0, _react.memo)(function (props) {
}));
});
exports.default = _default;
},{"react":"../node_modules/react/index.js"}],"../src/EdgeRenderer/EdgeTypes/StepEdge.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _default = (0, _react.memo)(function (props) {
var sourceX = props.sourceX,
sourceY = props.sourceY,
targetX = props.targetX,
targetY = props.targetY,
_props$style = props.style,
style = _props$style === void 0 ? {} : _props$style;
var yOffset = Math.abs(targetY - sourceY) / 2;
var centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
return _react.default.createElement("path", _extends({}, style, {
d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(sourceX, ",").concat(centerY, "L ").concat(targetX, ",").concat(centerY, "L ").concat(targetX, ",").concat(targetY)
}));
});
exports.default = _default;
},{"react":"../node_modules/react/index.js"}],"../src/EdgeRenderer/EdgeTypes/wrapEdge.js":[function(require,module,exports) {
"use strict";
@@ -42120,6 +42149,8 @@ var _BezierEdge = _interopRequireDefault(require("../EdgeRenderer/EdgeTypes/Bezi
var _StraightEdge = _interopRequireDefault(require("../EdgeRenderer/EdgeTypes/StraightEdge"));
var _StepEdge = _interopRequireDefault(require("../EdgeRenderer/EdgeTypes/StepEdge"));
var _utils2 = require("../EdgeRenderer/utils");
require("../style.css");
@@ -42224,14 +42255,15 @@ ReactGraph.defaultProps = {
},
edgeTypes: {
default: _BezierEdge.default,
straight: _StraightEdge.default
straight: _StraightEdge.default,
step: _StepEdge.default
},
connectionLineType: 'bezier',
connectionLineStyle: {}
};
var _default = ReactGraph;
exports.default = _default;
},{"react":"../node_modules/react/index.js","@welldone-software/why-did-you-render":"../node_modules/@welldone-software/why-did-you-render/dist/umd/whyDidYouRender.min.js","../GraphView":"../src/GraphView/index.js","../GlobalKeyHandler":"../src/GlobalKeyHandler/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer/NodeTypes/DefaultNode":"../src/NodeRenderer/NodeTypes/DefaultNode.js","../NodeRenderer/NodeTypes/InputNode":"../src/NodeRenderer/NodeTypes/InputNode.js","../NodeRenderer/NodeTypes/OutputNode":"../src/NodeRenderer/NodeTypes/OutputNode.js","../NodeRenderer/utils":"../src/NodeRenderer/utils.js","../EdgeRenderer/EdgeTypes/BezierEdge":"../src/EdgeRenderer/EdgeTypes/BezierEdge.js","../EdgeRenderer/EdgeTypes/StraightEdge":"../src/EdgeRenderer/EdgeTypes/StraightEdge.js","../EdgeRenderer/utils":"../src/EdgeRenderer/utils.js","../style.css":"../src/style.css"}],"../src/utils.js":[function(require,module,exports) {
},{"react":"../node_modules/react/index.js","@welldone-software/why-did-you-render":"../node_modules/@welldone-software/why-did-you-render/dist/umd/whyDidYouRender.min.js","../GraphView":"../src/GraphView/index.js","../GlobalKeyHandler":"../src/GlobalKeyHandler/index.js","../GraphContext":"../src/GraphContext/index.js","../NodeRenderer/NodeTypes/DefaultNode":"../src/NodeRenderer/NodeTypes/DefaultNode.js","../NodeRenderer/NodeTypes/InputNode":"../src/NodeRenderer/NodeTypes/InputNode.js","../NodeRenderer/NodeTypes/OutputNode":"../src/NodeRenderer/NodeTypes/OutputNode.js","../NodeRenderer/utils":"../src/NodeRenderer/utils.js","../EdgeRenderer/EdgeTypes/BezierEdge":"../src/EdgeRenderer/EdgeTypes/BezierEdge.js","../EdgeRenderer/EdgeTypes/StraightEdge":"../src/EdgeRenderer/EdgeTypes/StraightEdge.js","../EdgeRenderer/EdgeTypes/StepEdge":"../src/EdgeRenderer/EdgeTypes/StepEdge.js","../EdgeRenderer/utils":"../src/EdgeRenderer/utils.js","../style.css":"../src/style.css"}],"../src/utils.js":[function(require,module,exports) {
"use strict";
Object.defineProperty(exports, "__esModule", {
@@ -42653,7 +42685,8 @@ function (_PureComponent) {
target: '3'
}, {
source: '3',
target: '4'
target: '4',
type: 'step'
}, {
source: '3',
target: '5'
@@ -42877,7 +42910,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 + ':' + "52817" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60610" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
example/build/example.e31bb0bc.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
example/build/index.js
+1 -1
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 + ':' + "52817" + '/');
var ws = new WebSocket(protocol + '://' + hostname + ':' + "60610" + '/');
ws.onmessage = function (event) {
checkedAssets = {};
src/EdgeRenderer/EdgeTypes/StepEdge.js
+17
View File
@@ -0,0 +1,17 @@
import React, { memo } from 'react';
export default memo((props) => {
const {
sourceX, sourceY, targetX, targetY, style = {}
} = props;
const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
return (
<path
{...style}
d={`M ${sourceX},${sourceY}L ${sourceX},${centerY}L ${targetX},${centerY}L ${targetX},${targetY}`}
/>
);
});
src/ReactGraph/index.js
+3 -1
View File
@@ -16,6 +16,7 @@ import { createNodeTypes } from '../NodeRenderer/utils';
import BezierEdge from '../EdgeRenderer/EdgeTypes/BezierEdge';
import StraightEdge from '../EdgeRenderer/EdgeTypes/StraightEdge';
import StepEdge from '../EdgeRenderer/EdgeTypes/StepEdge';
import { createEdgeTypes } from '../EdgeRenderer/utils';
import '../style.css';
@@ -75,7 +76,8 @@ ReactGraph.defaultProps = {
},
edgeTypes: {
default: BezierEdge,
straight: StraightEdge
straight: StraightEdge,
step: StepEdge
},
connectionLineType: 'bezier',
connectionLineStyle: {}