From d65121d1978203e9c1819ec6e615019b6bcc181c Mon Sep 17 00:00:00 2001 From: moklick Date: Tue, 16 Jul 2019 13:45:25 +0200 Subject: [PATCH] refactor(wrapNode): no border styles --- dist/ReactGraph.js | 41 ++++++++++++++--------- example/SimpleGraph.js | 4 +-- src/NodeRenderer/NodeTypes/DefaultNode.js | 8 ++++- src/NodeRenderer/NodeTypes/InputNode.js | 8 ++++- src/NodeRenderer/NodeTypes/OutputNode.js | 8 ++++- src/style.css | 2 -- 6 files changed, 49 insertions(+), 22 deletions(-) diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js index 8c162f7b..9e52fee0 100644 --- a/dist/ReactGraph.js +++ b/dist/ReactGraph.js @@ -29962,7 +29962,12 @@ key: "renderNode", value: function renderNode(d, onNodeClick) { var nodeType = d.data.type || 'default'; - var NodeComponent = this.props.nodeTypes[nodeType]; + + if (!this.props.nodeTypes[nodeType]) { + console.warn("No node type found for type \"".concat(nodeType, "\". Using fallback type \"default\".")); + } + + var NodeComponent = this.props.nodeTypes[nodeType] || this.props.nodeTypes["default"]; return React__default.createElement(NodeComponent, { key: d.data.id, position: d.position, @@ -30131,14 +30136,16 @@ }, props)); }); + var nodeStyles = { + background: '#ff6060', + padding: 10, + borderRadius: 5 + }; var DefaultNode = (function (_ref) { var data = _ref.data, style = _ref.style; return React__default.createElement("div", { - style: _objectSpread2({ - background: '#ff6060', - padding: '10px' - }, style) + style: _objectSpread2({}, nodeStyles, {}, style) }, React__default.createElement(Handle, { style: { top: 0 @@ -30152,14 +30159,16 @@ })); }); + var nodeStyles$1 = { + background: '#9999ff', + padding: 10, + borderRadius: 5 + }; var InputNode = (function (_ref) { var data = _ref.data, style = _ref.style; return React__default.createElement("div", { - style: _objectSpread2({ - background: '#9999ff', - padding: '10px' - }, style) + style: _objectSpread2({}, nodeStyles$1, {}, style) }, data.label, React__default.createElement(Handle, { style: { bottom: 0, @@ -30169,14 +30178,16 @@ })); }); + var nodeStyles$2 = { + background: '#55ff99', + padding: 10, + borderRadius: 5 + }; var OutputNode = (function (_ref) { var data = _ref.data, style = _ref.style; return React__default.createElement("div", { - style: _objectSpread2({ - background: '#55ff99', - padding: '10px' - }, style) + style: _objectSpread2({}, nodeStyles$2, {}, style) }, React__default.createElement(Handle, { style: { top: 0 @@ -32474,7 +32485,7 @@ var specialTypes = Object.keys(nodeTypes).filter(function (k) { return !['input', 'default', 'output'].includes(k); }).reduce(function (res, key) { - res[key] = wrapNode(nodeTypes[key]); + res[key] = wrapNode(nodeTypes[key] || DefaultNode); return res; }, {}); return _objectSpread2({}, standardTypes, {}, specialTypes); @@ -32507,7 +32518,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__zoomnode {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.react-graph__edges {\n pointer-events: none;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__nodewrap {\n position: absolute;\n width: 150px;\n color: #222;\n font-family: sans-serif;\n font-size: 12px;\n text-align: center;\n cursor: -webkit-grab;\n cursor: grab;\n border: 1px solid #ddd;\n border-radius: 2px;\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__nodewrap:hover {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\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}"; + 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__zoomnode {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n}\n\n.react-graph__edges {\n pointer-events: none;\n}\n\n.react-graph__edge {\n fill: none;\n stroke: #333;\n stroke-width: 2;\n}\n\n.react-graph__nodes {\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: 2;\n pointer-events: none;\n transform-origin: 0 0;\n}\n\n.react-graph__nodewrap {\n position: absolute;\n width: 150px;\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__nodewrap:hover {\n box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);\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}"; styleInject(css); var ReactGraph = diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js index bc4925ed..9c464137 100644 --- a/example/SimpleGraph.js +++ b/example/SimpleGraph.js @@ -3,8 +3,8 @@ import React, { PureComponent } from 'react'; import Graph from '../src'; // import Graph from '../dist/ReactGraph'; -const SpecialNode = ({ data }) => -
I am Special!
{data.label}
+const SpecialNode = ({ data, styles }) => +
I am Special!
{data.label}
; class App extends PureComponent { diff --git a/src/NodeRenderer/NodeTypes/DefaultNode.js b/src/NodeRenderer/NodeTypes/DefaultNode.js index 81cb5992..f60c1f87 100644 --- a/src/NodeRenderer/NodeTypes/DefaultNode.js +++ b/src/NodeRenderer/NodeTypes/DefaultNode.js @@ -2,8 +2,14 @@ import React from 'react'; import Handle from '../Handle'; +const nodeStyles = { + background: '#ff6060', + padding: 10, + borderRadius: 5 +}; + export default ({ data, style }) => ( -
+
{data.label} diff --git a/src/NodeRenderer/NodeTypes/InputNode.js b/src/NodeRenderer/NodeTypes/InputNode.js index aff12db2..bf0a63cb 100644 --- a/src/NodeRenderer/NodeTypes/InputNode.js +++ b/src/NodeRenderer/NodeTypes/InputNode.js @@ -2,8 +2,14 @@ import React from 'react'; import Handle from '../Handle'; +const nodeStyles = { + background: '#9999ff', + padding: 10, + borderRadius: 5 +}; + export default ({ data, style }) => ( -
+
{data.label}
diff --git a/src/NodeRenderer/NodeTypes/OutputNode.js b/src/NodeRenderer/NodeTypes/OutputNode.js index 455b675c..8ba99ebe 100644 --- a/src/NodeRenderer/NodeTypes/OutputNode.js +++ b/src/NodeRenderer/NodeTypes/OutputNode.js @@ -2,8 +2,14 @@ import React from 'react'; import Handle from '../Handle'; +const nodeStyles = { + background: '#55ff99', + padding: 10, + borderRadius: 5 +}; + export default ({ data, style }) => ( -
+
{data.label}
diff --git a/src/style.css b/src/style.css index acdb9ecc..abfdd83c 100644 --- a/src/style.css +++ b/src/style.css @@ -46,8 +46,6 @@ font-size: 12px; text-align: center; cursor: grab; - border: 1px solid #ddd; - border-radius: 2px; user-select: none; pointer-events: all; transform-origin: 0 0;