mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-03 10:11:03 +00:00
7c22c97382
* Render highlight with strokes & use non-scaled highlight for stacks. * Reverted part of the changes made to node stack highlighting.
25 lines
1.1 KiB
JavaScript
25 lines
1.1 KiB
JavaScript
import React from 'react';
|
|
|
|
import { NODE_BASE_SIZE } from '../constants/styles';
|
|
|
|
export default function NodeShapeStack(props) {
|
|
const verticalDistance = NODE_BASE_SIZE * (props.contrastMode ? 0.12 : 0.1);
|
|
const verticalTranslate = t => `translate(0, ${t * verticalDistance})`;
|
|
const Shape = props.shape;
|
|
|
|
// Stack three shapes on top of one another pretending they are never highlighted.
|
|
// Instead, fake the highlight of the whole stack with a vertically stretched shape
|
|
// drawn in the background. This seems to give a good approximation of the stack
|
|
// highlight and prevents us from needing to do some render-heavy SVG clipping magic.
|
|
return (
|
|
<g transform={verticalTranslate(-2.5)} className="stack">
|
|
<g transform={`${verticalTranslate(1)} scale(1, 1.14)`}>
|
|
<Shape className="highlight-only" {...props} />
|
|
</g>
|
|
<g transform={verticalTranslate(2)}><Shape {...props} highlighted={false} /></g>
|
|
<g transform={verticalTranslate(1)}><Shape {...props} highlighted={false} /></g>
|
|
<g transform={verticalTranslate(0)}><Shape {...props} highlighted={false} /></g>
|
|
</g>
|
|
);
|
|
}
|