From 064f7d9c75ced5c11a31db42323072394a602529 Mon Sep 17 00:00:00 2001 From: moklick Date: Thu, 25 Jul 2019 16:03:50 +0200 Subject: [PATCH] feat(edges): animated prop --- dist/ReactGraph.js | 45 ++++++++++--------- example/SimpleGraph.js | 2 +- .../{DefaultEdge.js => StraightEdge.js} | 0 src/EdgeRenderer/EdgeTypes/wrapEdge.js | 4 +- src/EdgeRenderer/utils.js | 10 ++--- src/index.js | 6 ++- src/style.css | 9 ++++ 7 files changed, 45 insertions(+), 31 deletions(-) rename src/EdgeRenderer/EdgeTypes/{DefaultEdge.js => StraightEdge.js} (100%) diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 6613d688..57e2f3aa 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -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 } }; diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js index 9df423bd..08e7ff52 100644 --- a/example/SimpleGraph.js +++ b/example/SimpleGraph.js @@ -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' } }, diff --git a/src/EdgeRenderer/EdgeTypes/DefaultEdge.js b/src/EdgeRenderer/EdgeTypes/StraightEdge.js similarity index 100% rename from src/EdgeRenderer/EdgeTypes/DefaultEdge.js rename to src/EdgeRenderer/EdgeTypes/StraightEdge.js diff --git a/src/EdgeRenderer/EdgeTypes/wrapEdge.js b/src/EdgeRenderer/EdgeTypes/wrapEdge.js index fdce0356..fc227c2c 100644 --- a/src/EdgeRenderer/EdgeTypes/wrapEdge.js +++ b/src/EdgeRenderer/EdgeTypes/wrapEdge.js @@ -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 ( !['default', 'bezier'].includes(k)) .reduce((res, key) => { - res[key] = wrapEdge(nodeTypes[key] || DefaultEdge); + res[key] = wrapEdge(edgeTypes[key] ||BezierEdge); return res; }, {}); diff --git a/src/index.js b/src/index.js index 52c54139..acc867af 100644 --- a/src/index.js +++ b/src/index.js @@ -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 } }; diff --git a/src/style.css b/src/style.css index e996791f..e1422505 100644 --- a/src/style.css +++ b/src/style.css @@ -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 {