From 09383a6eb373e8f0ac85c35363bf999accca4536 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 11 Feb 2016 21:46:09 +0700
Subject: [PATCH] Gentle perspective in the nodestacks.

They get a little bit smaller as they go down.
---
 client/app/scripts/charts/node-shape-hex.js   | 15 +++++++++++---
 .../app/scripts/charts/node-shape-square.js   | 16 +++++++++++----
 client/app/scripts/charts/node-shape-stack.js | 20 ++++++++++++++-----
 3 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/client/app/scripts/charts/node-shape-hex.js b/client/app/scripts/charts/node-shape-hex.js
index 5878544ed5..71b351b109 100644
--- a/client/app/scripts/charts/node-shape-hex.js
+++ b/client/app/scripts/charts/node-shape-hex.js
@@ -24,7 +24,7 @@ function getPoints(h) {
 }
 
 
-export default function NodeShapeHex({highlighted, size, color}) {
+export default function NodeShapeHex({onlyHighlight, highlighted, size, color}) {
   const pathProps = (v) => {
     return {
       d: getPoints(size * v * 2),
@@ -32,10 +32,19 @@ export default function NodeShapeHex({highlighted, size, color}) {
     };
   };
 
+  const hightlightNode = <path className="highlighted" {...pathProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
   return (
     <g className="shape">
-      {highlighted &&
-        <path className="highlighted" {...pathProps(0.7)} />}
+      {highlighted && hightlightNode}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
       <circle className="node" r={Math.max(2, (size * 0.125))} />
diff --git a/client/app/scripts/charts/node-shape-square.js b/client/app/scripts/charts/node-shape-square.js
index 286fa176dc..ea1c1507e8 100644
--- a/client/app/scripts/charts/node-shape-square.js
+++ b/client/app/scripts/charts/node-shape-square.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export default function NodeShapeSquare({highlighted, size, color, rx = 0, ry = 0}) {
+export default function NodeShapeSquare({onlyHighlight, highlighted, size, color, rx = 0, ry = 0}) {
   const rectProps = (v) => {
     return {
       width: v * size * 2,
@@ -11,11 +11,19 @@ export default function NodeShapeSquare({highlighted, size, color, rx = 0, ry =
     };
   };
 
+  const hightlightNode = <rect className="highlighted" {...rectProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
   return (
     <g className="shape">
-      {highlighted &&
-        <rect className="highlighted" {...rectProps(0.7)} />}
-
+      {highlighted && hightlightNode}
       <rect className="border" stroke={color} {...rectProps(0.5)} />
       <rect className="shadow" {...rectProps(0.45)} />
       <circle className="node" r={Math.max(2, (size * 0.125))} />
diff --git a/client/app/scripts/charts/node-shape-stack.js b/client/app/scripts/charts/node-shape-stack.js
index 031fa50cb8..92df910316 100644
--- a/client/app/scripts/charts/node-shape-stack.js
+++ b/client/app/scripts/charts/node-shape-stack.js
@@ -1,19 +1,29 @@
 import React from 'react';
 import _ from 'lodash';
 
-export default function NodeShapeCircleStack(props) {
+export default function NodeShapeStack(props) {
   const propsNoHighlight = _.clone(props);
   const Shape = props.shape;
   delete propsNoHighlight.highlighted;
+  const propsOnlyHighlight = Object.assign({}, props, {onlyHighlight: true});
+  const [dx, dy] = [0, 6];
+  const ds = 0.075;
+  const dsx = (props.size * 2 + dx) / (props.size * 2);
+  const dsy = (props.size * 2 + dy) / (props.size * 2);
+  const hls = [dsx, dsy];
+
   return (
-    <g className="stack">
-      <g transform="translate(0, 4)">
+    <g transform={`translate(${dx * -1}, ${dy * -1})`} className="stack">
+      <g transform={`translate(${dx * 2}, ${dy * 2}) scale(${1 - (2 * ds)}, ${1 - (2 * ds)})`}>
         <Shape {...propsNoHighlight} />
       </g>
-      <Shape {...props} />
-      <g transform="translate(0, -4)">
+      <g transform={`translate(${dx * 1}, ${dy * 1}) scale(${1 - (1 * ds)}, ${1 - (1 * ds)})`}>
         <Shape {...propsNoHighlight} />
       </g>
+      <g transform={`translate(${dx * 0.5}, ${dy * 0.5}) scale(${hls})`} className="stack">
+        <Shape {...propsOnlyHighlight} />
+      </g>
+      <Shape {...propsNoHighlight} />
     </g>
   );
 }