feat(edges): animated prop
This commit is contained in:
moklick
Vendored
+24
-21
@@ -33004,19 +33004,6 @@
|
||||
return _objectSpread2({}, standardTypes, {}, specialTypes);
|
||||
}
|
||||
|
||||
var DefaultEdge = (function (props) {
|
||||
var targetNode = props.targetNode,
|
||||
sourceNode = props.sourceNode;
|
||||
var style = props.data ? props.data.style : {};
|
||||
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
|
||||
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
|
||||
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
|
||||
var targetY = targetNode.__rg.position.y;
|
||||
return React__default.createElement("path", _extends({}, style, {
|
||||
d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
|
||||
}));
|
||||
});
|
||||
|
||||
var BezierEdge = (function (props) {
|
||||
var targetNode = props.targetNode,
|
||||
sourceNode = props.sourceNode;
|
||||
@@ -33033,6 +33020,19 @@
|
||||
}));
|
||||
});
|
||||
|
||||
var StraightEdge = (function (props) {
|
||||
var targetNode = props.targetNode,
|
||||
sourceNode = props.sourceNode;
|
||||
var style = props.data ? props.data.style : {};
|
||||
var sourceX = sourceNode.__rg.position.x + sourceNode.__rg.width / 2;
|
||||
var sourceY = sourceNode.__rg.position.y + sourceNode.__rg.height;
|
||||
var targetX = targetNode.__rg.position.x + targetNode.__rg.width / 2;
|
||||
var targetY = targetNode.__rg.position.y;
|
||||
return React__default.createElement("path", _extends({}, style, {
|
||||
d: "M ".concat(sourceX, ",").concat(sourceY, "L ").concat(targetX, ",").concat(targetY)
|
||||
}));
|
||||
});
|
||||
|
||||
var isInputTarget$1 = function isInputTarget(e) {
|
||||
return ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.nodeName);
|
||||
};
|
||||
@@ -33043,7 +33043,8 @@
|
||||
state = _useContext.state,
|
||||
dispatch = _useContext.dispatch;
|
||||
|
||||
var data = props.data,
|
||||
var _props$data = props.data,
|
||||
data = _props$data === void 0 ? {} : _props$data,
|
||||
_onClick = props.onClick;
|
||||
var selected = state.selectedElements.filter(function (e) {
|
||||
return isEdge(e);
|
||||
@@ -33051,7 +33052,8 @@
|
||||
return e.data.source === data.source && e.data.target === data.target;
|
||||
});
|
||||
var edgeClasses = classnames('react-graph__edge', {
|
||||
selected: selected
|
||||
selected: selected,
|
||||
animated: data.animated
|
||||
});
|
||||
return React__default.createElement("g", {
|
||||
className: edgeClasses,
|
||||
@@ -33074,13 +33076,13 @@
|
||||
|
||||
function createEdgeTypes(edgeTypes) {
|
||||
var standardTypes = {
|
||||
"default": wrapEdge(edgeTypes["default"] || DefaultEdge),
|
||||
bezier: wrapEdge(edgeTypes.bezier || BezierEdge)
|
||||
"default": wrapEdge(edgeTypes["default"] || BezierEdge),
|
||||
straight: wrapEdge(edgeTypes.bezier || StraightEdge)
|
||||
};
|
||||
var specialTypes = Object.keys(DefaultEdge).filter(function (k) {
|
||||
var specialTypes = Object.keys(edgeTypes).filter(function (k) {
|
||||
return !['default', 'bezier'].includes(k);
|
||||
}).reduce(function (res, key) {
|
||||
res[key] = wrapEdge(nodeTypes[key] || DefaultEdge);
|
||||
res[key] = wrapEdge(edgeTypes[key] || BezierEdge);
|
||||
return res;
|
||||
}, {});
|
||||
return _objectSpread2({}, standardTypes, {}, specialTypes);
|
||||
@@ -33113,7 +33115,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n }\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }";
|
||||
var css = ".react-graph {\n width: 100%;\n height: 100%;\n position: relative;\n overflow: hidden;\n}\n\n.react-graph__renderer {\n width: 100%;\n height: 100%;\n position: absolute;\n}\n\n.react-graph__zoompane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 1;\n}\n\n.react-graph__selectionpane {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n}\n\n.react-graph__selection {\n position: absolute;\n top: 0;\n left: 0;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n}\n\n.react-graph__edges {\n position: absolute;\n top: 0;\n left: 0;\n pointer-events: none;\n z-index: 2;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n pointer-events: all;\n}\n\n.react-graph__edge.selected {\n stroke: #ff5050;\n }\n\n.react-graph__edge.animated {\n stroke-dasharray: 5;\n -webkit-animation: dashdraw 0.5s linear infinite;\n animation: dashdraw 0.5s linear infinite;\n }\n\n@-webkit-keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n@keyframes dashdraw {\n from {stroke-dashoffset: 10}\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 3;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__node {\n position: absolute;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n pointer-events: all;\n transform-origin: 0 0;\n}\n\n.react-graph__node:hover > * {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\n }\n\n.react-graph__node.selected > * {\n box-shadow: 0 0 0 2px #000;\n }\n\n.react-graph__handle {\n position: absolute;\n width: 12px;\n height: 12px;\n transform: translate(-50%, -50%);\n background: #222;\n left: 50%;\n border-radius: 50%;\n}\n\n.react-graph__nodesselection {\n z-index: 3;\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n transform-origin: left top;\n pointer-events: none;\n}\n\n.react-graph__nodesselection-rect {\n position: absolute;\n background: rgba(0, 89, 220, 0.08);\n border: 1px dotted rgba(0, 89, 220, 0.8);\n pointer-events: all;\n }";
|
||||
styleInject(css);
|
||||
|
||||
var ReactGraph =
|
||||
@@ -33183,7 +33185,8 @@
|
||||
output: OutputNode
|
||||
},
|
||||
edgeTypes: {
|
||||
"default": DefaultEdge
|
||||
"default": BezierEdge,
|
||||
straight: StraightEdge
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -41,7 +41,7 @@ class App extends PureComponent {
|
||||
{ data: { id: '4', label: 'nody nodes', type: 'output' }, position: { x: 50, y: 300 } },
|
||||
{ data: { id: '5', label: 'Another node', type: 'default' }, position: { x: 400, y: 300 } },
|
||||
{ data: { id: '6', label: 'no option selected', type: 'special', onChange }, position: { x: 400, y: 400 } },
|
||||
{ data: { source: '1', target: '2', type: 'bezier', style: { stroke: 'orange' } } },
|
||||
{ data: { source: '1', target: '2', type: 'bezier', animated: true, style: { stroke: 'orange' } } },
|
||||
{ data: { source: '2', target: '3' } },
|
||||
{ data: { source: '3', target: '4' } },
|
||||
{ data: { source: '3', target: '5' } },
|
||||
|
||||
@@ -9,11 +9,11 @@ const isInputTarget = (e) => ['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.n
|
||||
|
||||
export default EdgeComponent => memo((props) => {
|
||||
const { state, dispatch } = useContext(GraphContext);
|
||||
const { data, onClick } = props;
|
||||
const { data = {}, onClick } = props;
|
||||
const selected = state.selectedElements
|
||||
.filter(e => isEdge(e))
|
||||
.find(e => e.data.source === data.source && e.data.target === data.target);
|
||||
const edgeClasses = cx('react-graph__edge', { selected });
|
||||
const edgeClasses = cx('react-graph__edge', { selected, animated: data.animated });
|
||||
|
||||
return (
|
||||
<g
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
import DefaultEdge from './EdgeTypes/DefaultEdge';
|
||||
import StraightEdge from './EdgeTypes/StraightEdge';
|
||||
import BezierEdge from './EdgeTypes/BezierEdge';
|
||||
import wrapEdge from './EdgeTypes/wrapEdge';
|
||||
|
||||
export function createEdgeTypes(edgeTypes) {
|
||||
const standardTypes = {
|
||||
default: wrapEdge(edgeTypes.default || DefaultEdge),
|
||||
bezier: wrapEdge(edgeTypes.bezier || BezierEdge)
|
||||
default: wrapEdge(edgeTypes.default || BezierEdge),
|
||||
straight: wrapEdge(edgeTypes.bezier || StraightEdge)
|
||||
};
|
||||
|
||||
const specialTypes = Object
|
||||
.keys(DefaultEdge)
|
||||
.keys(edgeTypes)
|
||||
.filter(k => !['default', 'bezier'].includes(k))
|
||||
.reduce((res, key) => {
|
||||
res[key] = wrapEdge(nodeTypes[key] || DefaultEdge);
|
||||
res[key] = wrapEdge(edgeTypes[key] ||BezierEdge);
|
||||
|
||||
return res;
|
||||
}, {});
|
||||
|
||||
+4
-2
@@ -10,7 +10,8 @@ import InputNode from './NodeRenderer/NodeTypes/InputNode';
|
||||
import OutputNode from './NodeRenderer/NodeTypes/OutputNode';
|
||||
import { createNodeTypes } from './NodeRenderer/utils';
|
||||
|
||||
import DefaultEdge from './EdgeRenderer/EdgeTypes/DefaultEdge';
|
||||
import BezierEdge from './EdgeRenderer/EdgeTypes/BezierEdge';
|
||||
import StraightEdge from './EdgeRenderer/EdgeTypes/StraightEdge';
|
||||
import { createEdgeTypes } from './EdgeRenderer/utils';
|
||||
|
||||
import './style.css';
|
||||
@@ -65,7 +66,8 @@ ReactGraph.defaultProps = {
|
||||
output: OutputNode
|
||||
},
|
||||
edgeTypes: {
|
||||
default: DefaultEdge
|
||||
default: BezierEdge,
|
||||
straight: StraightEdge
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -54,6 +54,15 @@
|
||||
&.selected {
|
||||
stroke: #ff5050;
|
||||
}
|
||||
|
||||
&.animated {
|
||||
stroke-dasharray: 5;
|
||||
animation: dashdraw 0.5s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dashdraw {
|
||||
from {stroke-dashoffset: 10}
|
||||
}
|
||||
|
||||
.react-graph__nodes {
|
||||
|
||||
Reference in New Issue
Block a user