From d9f422ed72e8ba2db0e46dbd2391d33d11ef3e07 Mon Sep 17 00:00:00 2001
From: David Ballester Mena <david.ballester.mena@gmail.com>
Date: Thu, 8 Aug 2019 19:43:36 +0200
Subject: [PATCH] feat(canvas): base selection color on node color

---
 .../canvas/services/node-renderer.service.js     | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/canvas/services/node-renderer.service.js b/src/components/canvas/services/node-renderer.service.js
index 01b01ef..9553f3c 100644
--- a/src/components/canvas/services/node-renderer.service.js
+++ b/src/components/canvas/services/node-renderer.service.js
@@ -1,5 +1,5 @@
 import blue from '@material-ui/core/colors/blue';
-import orange from '@material-ui/core/colors/orange';
+import * as color from 'color';
 
 export function getNodeColor(node) {
   const nodeColor = node.color;
@@ -15,12 +15,18 @@ export function renderNode(node, ctx, globalScale) {
 }
 
 function renderSelectedCircle(node, ctx) {
-  const color = node.color === orange['A200'] ? blue['A200'] : orange['A200'];
-  ctx.strokeStyle = color;
-  ctx.fillStyle = color;
+  ctx.save();
+  const nodeColor = getNodeColor(node);
+  const circleColor = color(nodeColor)
+    .lighten(0.4)
+    .hex();
+  const radius = (node.groups || []).length > 0 ? 7 : 6;
+  ctx.strokeStyle = circleColor;
+  ctx.fillStyle = circleColor;
   ctx.beginPath();
-  ctx.arc(node.x, node.y, 6, 0, 2 * Math.PI);
+  ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI);
   ctx.fill();
+  ctx.restore();
 }
 
 function renderLabel(node, ctx, globalScale) {