Adds support for the septagon node shape

This commit is contained in:
Simon Howe
2016-02-25 16:05:50 +01:00
parent 1bfbf67d1c
commit 292a56dc1d
3 changed files with 48 additions and 1 deletions

View File

@@ -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>
);
}

View File

@@ -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
};

View File

@@ -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];