mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 18:20:27 +00:00
29 lines
1.3 KiB
JavaScript
29 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
NODE_SHAPE_HIGHLIGHT_RADIUS,
|
|
NODE_SHAPE_BORDER_RADIUS,
|
|
NODE_SHAPE_SHADOW_RADIUS,
|
|
NODE_SHAPE_DOT_RADIUS,
|
|
NODE_BASE_SIZE,
|
|
} from '../constants/styles';
|
|
|
|
// This path is already normalized so no dynamic rescaling is needed.
|
|
const CLOUD_PATH = 'M-125 23.333Q-125 44.036-110.352 58.685-95.703 73.333-75 73.333H66.667Q90.755 '
|
|
+ '73.333 107.878 56.211 125 39.089 125 15 125-2.188 115.755-16.445 106.51-30.703 91.406-37.734q'
|
|
+ '0.26-3.646 0.261-5.599 0-27.604-19.532-47.136-19.531-19.531-47.135-19.531-20.573 0-37.305 '
|
|
+ '11.458-16.732 11.458-24.414 29.948-9.115-8.073-21.614-8.073-13.802 0-23.568 9.766-9.766 9.766-'
|
|
+ '9.766 23.568 0 9.766 5.339 17.968-16.797 3.906-27.735 17.513-10.938 13.607-10.937 31.185z';
|
|
|
|
export default function NodeShapeCloud({highlighted, color}) {
|
|
const pathProps = r => ({ d: CLOUD_PATH, transform: `scale(${r / NODE_BASE_SIZE})` });
|
|
|
|
return (
|
|
<g className="shape shape-cloud">
|
|
{highlighted && <path className="highlighted" {...pathProps(NODE_SHAPE_HIGHLIGHT_RADIUS)} />}
|
|
<path className="border" stroke={color} {...pathProps(NODE_SHAPE_BORDER_RADIUS)} />
|
|
<path className="shadow" {...pathProps(NODE_SHAPE_SHADOW_RADIUS)} />
|
|
<circle className="node" r={NODE_SHAPE_DOT_RADIUS} />
|
|
</g>
|
|
);
|
|
}
|