refactor(minimap): show partial nodes

dist/ReactGraph.js

@@ -29889,6 +29889,7 @@
   };
   var getNodesInside = function getNodesInside(nodes, bbox) {
     var transform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 1];
+    var partially = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
     return nodes.filter(function (n) {
       var bboxPos = {
         x: (bbox.x - transform[0]) * (1 / transform[2]),
@@ -29900,7 +29901,11 @@
           position = _n$__rg.position,
           width = _n$__rg.width,
           height = _n$__rg.height;
-      return position.x > bboxPos.x && position.x + width < bboxPos.x + bboxWidth && position.y > bboxPos.y && position.y + height < bboxPos.y + bboxHeight;
+      var nodeWidth = partially ? -width : width;
+      var nodeHeight = partially ? 0 : height;
+      var offsetX = partially ? width : 0;
+      var offsetY = partially ? height : 0;
+      return position.x + offsetX > bboxPos.x && position.x + nodeWidth < bboxPos.x + bboxWidth && position.y + offsetY > bboxPos.y && position.y + nodeHeight < bboxPos.y + bboxHeight;
     });
   };
   var getConnectedEdges = function getConnectedEdges(nodes, edges) {
@@ -33681,7 +33686,7 @@
     React.useEffect(function () {
       if (canvasNode) {
         var ctx = canvasNode.current.getContext('2d');
-        var nodesInside = getNodesInside(state.nodes, bbox, state.transform);
+        var nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
         ctx.fillStyle = bgColor;
         ctx.fillRect(0, 0, width, height);
         nodesInside.forEach(function (n) {

example/SimpleGraph.js

@@ -77,7 +77,7 @@ class App extends PureComponent {
         { source: '2', target: '3' },
         { source: '3', target: '4', type: 'step' },
         { source: '3', target: '5' },
-        { source: '5', target: '6', type: 'straight', animated: true, style: { stroke: '#FFCC00' } },
+        { source: '5', target: '6', type: 'step', animated: true, style: { stroke: '#FFCC00' } },
         { source: '6', target: '7', style: { stroke: '#FFCC00' }},
       ]
     };
@@ -166,9 +166,11 @@ class App extends PureComponent {
         <MiniMap
           style={{ position: 'absolute', right: 10, bottom: 10 }}
           nodeColor={n => {
-            if (n.type === 'input') return 'blue'
+            if (n.type === 'input') return 'blue';
-            if (n.type === 'output') return 'green'
+            if (n.type === 'output') return 'green';
-            return 'red';
+            if (n.type === 'default') return 'red';
+
+            return '#FFCC00';
           }}
         />
         <button

example/build/example.e31bb0bc.js

@@ -37723,6 +37723,7 @@ exports.graphPosToZoomedPos = graphPosToZoomedPos;
 
 var getNodesInside = function getNodesInside(nodes, bbox) {
   var transform = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [0, 0, 1];
+  var partially = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   return nodes.filter(function (n) {
     var bboxPos = {
       x: (bbox.x - transform[0]) * (1 / transform[2]),
@@ -37734,7 +37735,11 @@ var getNodesInside = function getNodesInside(nodes, bbox) {
         position = _n$__rg.position,
         width = _n$__rg.width,
         height = _n$__rg.height;
-    return position.x > bboxPos.x && position.x + width < bboxPos.x + bboxWidth && position.y > bboxPos.y && position.y + height < bboxPos.y + bboxHeight;
+    var nodeWidth = partially ? -width : width;
+    var nodeHeight = partially ? 0 : height;
+    var offsetX = partially ? width : 0;
+    var offsetY = partially ? height : 0;
+    return position.x + offsetX > bboxPos.x && position.x + nodeWidth < bboxPos.x + bboxWidth && position.y + offsetY > bboxPos.y && position.y + nodeHeight < bboxPos.y + bboxHeight;
   });
 };
 
@@ -42344,7 +42349,7 @@ var _default = function _default(_ref) {
   (0, _react.useEffect)(function () {
     if (canvasNode) {
       var ctx = canvasNode.current.getContext('2d');
-      var nodesInside = (0, _graphUtils.getNodesInside)(state.nodes, bbox, state.transform);
+      var nodesInside = (0, _graphUtils.getNodesInside)(state.nodes, bbox, state.transform, true);
       ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, width, height);
       nodesInside.forEach(function (n) {
@@ -42693,7 +42698,7 @@ function (_PureComponent) {
       }, {
         source: '5',
         target: '6',
-        type: 'straight',
+        type: 'step',
         animated: true,
         style: {
           stroke: '#FFCC00'
@@ -42831,7 +42836,8 @@ function (_PureComponent) {
         nodeColor: function nodeColor(n) {
           if (n.type === 'input') return 'blue';
           if (n.type === 'output') return 'green';
-          return 'red';
+          if (n.type === 'default') return 'red';
+          return '#FFCC00';
         }
       }), _react.default.createElement("button", {
         type: "button",
@@ -42910,7 +42916,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 + ':' + "60610" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61389" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

example/build/index.js

@@ -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 + ':' + "60610" + '/');
+  var ws = new WebSocket(protocol + '://' + hostname + ':' + "61389" + '/');
 
   ws.onmessage = function (event) {
     checkedAssets = {};

src/Plugins/MiniMap/index.js

@@ -27,7 +27,7 @@ export default ({ style = {}, className, bgColor = '#f8f8f8', nodeColor = '#ddd'
   useEffect(() => {
     if (canvasNode) {
       const ctx = canvasNode.current.getContext('2d');
-      const nodesInside = getNodesInside(state.nodes, bbox, state.transform);
+      const nodesInside = getNodesInside(state.nodes, bbox, state.transform, true);
 
       ctx.fillStyle = bgColor;
       ctx.fillRect(0, 0, width, height);

src/graph-utils.js

@@ -102,7 +102,7 @@ export const graphPosToZoomedPos = (pos, transform) => {
   };
 }
 
-export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
+export const getNodesInside = (nodes, bbox, transform = [0, 0, 1], partially = false) => {
   return nodes.
     filter(n => {
       const bboxPos = {
@@ -112,10 +112,14 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
       const bboxWidth = bbox.width * (1 / transform[2]);
       const bboxHeight = bbox.height * (1 / transform[2]);
       const { position, width, height } = n.__rg;
+      const nodeWidth = partially ? -width : width;
+      const nodeHeight = partially ? 0 : height;
+      const offsetX = partially ? width : 0;
+      const offsetY = partially ? height : 0;
 
       return (
-        (position.x > bboxPos.x && (position.x + width) < (bboxPos.x + bboxWidth)) &&
+        (position.x + offsetX > bboxPos.x && (position.x + nodeWidth) < (bboxPos.x + bboxWidth)) &&
-        (position.y > bboxPos.y && (position.y + height) < (bboxPos.y + bboxHeight))
+        (position.y + offsetY > bboxPos.y && (position.y + nodeHeight) < (bboxPos.y + bboxHeight))
       );
     });
 };
@@ -123,7 +127,7 @@ export const getNodesInside = (nodes, bbox, transform = [0, 0, 1]) => {
 export const getConnectedEdges = (nodes, edges) => {
   const nodeIds = nodes.map(n => n.id);
   return edges.filter(e => nodeIds.includes(e.source) || nodeIds.includes(e.target))
-}
+};
 
 export default {
   isEdge,