From 292a56dc1d8cf63bd3c687a4179cb31474c80a3b Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 25 Feb 2016 16:05:50 +0100
Subject: [PATCH] Adds support for the septagon node shape

---
 .../app/scripts/charts/node-shape-septagon.js | 45 +++++++++++++++++++
 client/app/scripts/charts/node.js             |  2 +
 .../app/scripts/components/debug-toolbar.js   |  2 +-
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 client/app/scripts/charts/node-shape-septagon.js

diff --git a/client/app/scripts/charts/node-shape-septagon.js b/client/app/scripts/charts/node-shape-septagon.js
new file mode 100644
index 000000000..fedcf58c1
--- /dev/null
+++ b/client/app/scripts/charts/node-shape-septagon.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import d3 from 'd3';
+
+const line = d3.svg.line()
+  .interpolate('cardinal-closed')
+  .tension(0.25);
+
+function polygon(r, sides) {
+  const a = (Math.PI * 2) / sides;
+  const points = [[r, 0]];
+  for (let i = 1; i < sides; i++) {
+    points.push([r * Math.cos(a * i), r * Math.sin(a * i)]);
+  }
+  return points;
+}
+
+export default function NodeShapeSeptagon({onlyHighlight, highlighted, size, color}) {
+  const scaledSize = size * 1.0;
+  const pathProps = (v) => {
+    return {
+      d: line(polygon(scaledSize * v, 7)),
+      transform: `rotate(90)`
+    };
+  };
+
+  const hightlightNode = <path className="highlighted" {...pathProps(0.7)} />;
+
+  if (onlyHighlight) {
+    return (
+      <g className="shape">
+        {highlighted && hightlightNode}
+      </g>
+    );
+  }
+
+  return (
+    <g className="shape">
+      {highlighted && hightlightNode}
+      <path className="border" stroke={color} {...pathProps(0.5)} />
+      <path className="shadow" {...pathProps(0.45)} />
+      <circle className="node" r={Math.max(2, (scaledSize * 0.125))} />
+    </g>
+  );
+}
+
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 13c24b402..8b68ff4c6 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -9,6 +9,7 @@ import NodeShapeCircle from './node-shape-circle';
 import NodeShapeStack from './node-shape-stack';
 import NodeShapeRoundedSquare from './node-shape-rounded-square';
 import NodeShapeHex from './node-shape-hex';
+import NodeShapeSeptagon from './node-shape-septagon';
 import NodeShapeCloud from './node-shape-cloud';
 
 function stackedShape(Shape) {
@@ -22,6 +23,7 @@ function stackedShape(Shape) {
 const nodeShapes = {
   'circle': NodeShapeCircle,
   'hexagon': NodeShapeHex,
+  'pentagon': NodeShapeSeptagon,
   'square': NodeShapeRoundedSquare,
   'cloud': NodeShapeCloud
 };
diff --git a/client/app/scripts/components/debug-toolbar.js b/client/app/scripts/components/debug-toolbar.js
index 88853b0dc..8dc56c764 100644
--- a/client/app/scripts/components/debug-toolbar.js
+++ b/client/app/scripts/components/debug-toolbar.js
@@ -7,7 +7,7 @@ const log = debug('scope:debug-panel');
 import { receiveNodesDelta } from '../actions/app-actions';
 import AppStore from '../stores/app-store';
 
-const SHAPES = ['circle', 'hexagon', 'square'];
+const SHAPES = ['circle', 'hexagon', 'square', 'pentagon'];
 const NODE_COUNTS = [1, 2, 3];
 const STACK_VARIANTS = [true, false];