feat(minimap): node color func

xyflow · Aug 5, 2019 · 24a296f · 24a296f
1 parent 34a0df4
commit 24a296f
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 9 deletions.
diff --git a/dist/ReactGraph.js b/dist/ReactGraph.js
@@ -33623,6 +33623,10 @@
     connectionLineStyle: {}
   };
 
+  var isFunction = function isFunction(obj) {
+    return !!(obj && obj.constructor && obj.call && obj.apply);
+  };
+
   var baseStyle = {
     position: 'absolute',
     zIndex: 5,
@@ -33656,6 +33660,9 @@
       height: state.height
     };
     var scaleFactor = width / state.width;
+    var nodeColorFunc = isFunction(nodeColor) ? nodeColor : function () {
+      return nodeColor;
+    };
     React.useEffect(function () {
       if (canvasNode) {
         var ctx = canvasNode.current.getContext('2d');
@@ -33668,7 +33675,7 @@
           var transformY = state.transform[1];
           var x = pos.x * state.transform[2] + transformX;
           var y = pos.y * state.transform[2] + transformY;
-          ctx.fillStyle = nodeColor;
+          ctx.fillStyle = nodeColorFunc(n);
           ctx.fillRect(x * scaleFactor, y * scaleFactor, n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
         });
       }

diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js
@@ -165,6 +165,11 @@ class App extends PureComponent {
       >
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}
+          nodeColor={n => {
+            if (n.type === 'input') return 'blue'
+            if (n.type === 'output') return 'green'
+            return 'red';
+          }}
         />
         <button
           type="button"

diff --git a/example/build/example.e31bb0bc.js b/example/build/example.e31bb0bc.js
@@ -42231,7 +42231,20 @@ ReactGraph.defaultProps = {
 };
 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/Plugins/MiniMap/index.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/utils":"../src/EdgeRenderer/utils.js","../style.css":"../src/style.css"}],"../src/utils.js":[function(require,module,exports) {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFunction = void 0;
+
+var isFunction = function isFunction(obj) {
+  return !!(obj && obj.constructor && obj.call && obj.apply);
+};
+
+exports.isFunction = isFunction;
+},{}],"../src/Plugins/MiniMap/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -42243,6 +42256,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _utils = require("../../utils");
+
 var _graphUtils = require("../../graph-utils");
 
 var _GraphContext = require("../../GraphContext");
@@ -42291,6 +42306,9 @@ var _default = function _default(_ref) {
     height: state.height
   };
   var scaleFactor = width / state.width;
+  var nodeColorFunc = (0, _utils.isFunction)(nodeColor) ? nodeColor : function () {
+    return nodeColor;
+  };
   (0, _react.useEffect)(function () {
     if (canvasNode) {
       var ctx = canvasNode.current.getContext('2d');
@@ -42303,7 +42321,7 @@ var _default = function _default(_ref) {
         var transformY = state.transform[1];
         var x = pos.x * state.transform[2] + transformX;
         var y = pos.y * state.transform[2] + transformY;
-        ctx.fillStyle = nodeColor;
+        ctx.fillStyle = nodeColorFunc(n);
         ctx.fillRect(x * scaleFactor, y * scaleFactor, n.__rg.width * scaleFactor * state.transform[2], n.__rg.height * scaleFactor * state.transform[2]);
       });
     }
@@ -42320,7 +42338,7 @@ var _default = function _default(_ref) {
 };
 
 exports.default = _default;
-},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../graph-utils":"../src/graph-utils.js","../../GraphContext":"../src/GraphContext/index.js"}],"../src/index.js":[function(require,module,exports) {
+},{"react":"../node_modules/react/index.js","classnames":"../node_modules/classnames/index.js","../../utils":"../src/utils.js","../../graph-utils":"../src/graph-utils.js","../../GraphContext":"../src/GraphContext/index.js"}],"../src/index.js":[function(require,module,exports) {
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
@@ -42776,6 +42794,11 @@ function (_PureComponent) {
           position: 'absolute',
           right: 10,
           bottom: 10
+        },
+        nodeColor: function nodeColor(n) {
+          if (n.type === 'input') return 'blue';
+          if (n.type === 'output') return 'green';
+          return 'red';
         }
       }), _react.default.createElement("button", {
         type: "button",
@@ -42854,7 +42877,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 + ':' + "60876" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "52817" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

diff --git a/example/build/example.e31bb0bc.js.map b/example/build/example.e31bb0bc.js.map
diff --git a/example/build/index.js b/example/build/index.js
diff --git a/example/build/index.js.map b/example/build/index.js.map
diff --git a/src/Plugins/MiniMap/index.js b/src/Plugins/MiniMap/index.js
@@ -1,6 +1,7 @@
 import React, { useRef, useContext, useEffect } from 'react';
 import classnames from 'classnames';
 
+import { isFunction } from '../../utils'
 import { getNodesInside } from '../../graph-utils';
 import { GraphContext } from '../../GraphContext';
 
@@ -21,6 +22,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
   const height = (state.height / (state.width || 1)) * width;
   const bbox = { x: 0, y: 0, width: state.width, height: state.height };
   const scaleFactor = width / state.width;
+  const nodeColorFunc = isFunction(nodeColor) ? nodeColor : () => nodeColor;
 
   useEffect(() => {
     if (canvasNode) {
@@ -37,7 +39,8 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
         const x = (pos.x * state.transform[2]) + transformX;
         const y = (pos.y * state.transform[2]) + transformY;
 
-        ctx.fillStyle = nodeColor;
+        ctx.fillStyle = nodeColorFunc(n);
+
         ctx.fillRect(
           (x * scaleFactor),
           (y * scaleFactor),

diff --git a/src/utils.js b/src/utils.js
@@ -0,0 +1 @@
+export const isFunction = obj => !!(obj && obj.constructor && obj.call && obj.apply);