Skip to content

Commit

Permalink
Gentle perspective in the nodestacks.
Browse files Browse the repository at this point in the history
They get a little bit smaller as they go down.
  • Loading branch information
foot committed Feb 15, 2016
1 parent fc7d63f commit 09383a6
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 12 deletions.
15 changes: 12 additions & 3 deletions client/app/scripts/charts/node-shape-hex.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,18 +24,27 @@ 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),
transform: `rotate(90) translate(-${size * getWidth(v)}, -${size * v})`
};
};

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))} />
Expand Down
16 changes: 12 additions & 4 deletions client/app/scripts/charts/node-shape-square.js
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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))} />
Expand Down
20 changes: 15 additions & 5 deletions client/app/scripts/charts/node-shape-stack.js
Original file line number Diff line number Diff line change
@@ -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>
);
}

0 comments on commit 09383a6

Please sign in to comment.