Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix node highlight for all shapes #2430

Merged
merged 2 commits into from
Apr 11, 2017
Merged

Fix node highlight for all shapes #2430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4258fbf
Render highlight with strokes & use non-scaled highlight for stacks.
fbarl Apr 6, 2017
aedd48a
Reverted part of the changes made to node stack highlighting.
fbarl Apr 7, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 13 additions & 17 deletions client/app/scripts/charts/node-shape-stack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,23 @@ import React from 'react';

import { NODE_BASE_SIZE } from '../constants/styles';


export default function NodeShapeStack(props) {
const shift = props.contrastMode ? 0.15 : 0.1;
const highlightScale = [1, 1 + shift];
const dy = NODE_BASE_SIZE * shift;

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={`translate(0, ${dy * -2.5})`} className="stack">
<g transform={`scale(${highlightScale}) translate(0, ${dy})`} className="highlight">
<Shape {...props} />
</g>
<g transform={`translate(0, ${dy * 2})`}>
<Shape {...props} />
</g>
<g transform={`translate(0, ${dy * 1})`}>
<Shape {...props} />
</g>
<g className="only-metrics">
<Shape {...props} />
<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>
);
}
9 changes: 7 additions & 2 deletions client/app/scripts/charts/node-shapes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,13 @@ function NodeShape(shapeType, shapeElement, shapeProps, { id, highlighted, color
return (
<g className={className}>
{highlighted && shapeElement({
className: 'highlight',
transform: `scale(${NODE_BASE_SIZE * 0.7})`,
className: 'highlight-border',
transform: `scale(${NODE_BASE_SIZE * 0.5})`,
...shapeProps,
})}
{highlighted && shapeElement({
className: 'highlight-shadow',
transform: `scale(${NODE_BASE_SIZE * 0.5})`,
...shapeProps,
})}
{shapeElement({
Expand Down
24 changes: 13 additions & 11 deletions client/app/styles/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -425,15 +425,11 @@
}
}

.stack .shape .highlight {
display: none;
}

.stack .highlight .shape {
.border { display: none; }
.stack .highlight-only {
.background { display: none; }
.shadow { display: none; }
.border { display: none; }
.node { display: none; }
.highlight { display: inline; }
}

.stack .shape .metric-fill {
Expand All @@ -444,14 +440,20 @@
transform: scale(1);
cursor: pointer;

.highlight {
fill: $weave-blue;
fill-opacity: $node-highlight-fill-opacity;
.highlight-border {
fill: none;
stroke: $weave-blue;
stroke-width: $node-highlight-stroke-width;
stroke-width: 0.7 + $node-highlight-stroke-width * 2;
stroke-opacity: $node-highlight-stroke-opacity;
}

.highlight-shadow {
fill: none;
stroke: white;
stroke-width: 0.7;
stroke-opacity: $node-highlight-shadow-opacity;
}

.background {
stroke: none;
fill: $background-lighter-color;
Expand Down
2 changes: 1 addition & 1 deletion client/app/styles/_contrast-overrides.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $text-darker-color: darken($text-color, 20%);
$white: white;
$edge-color: black;

$node-highlight-fill-opacity: 0.3;
$node-highlight-shadow-opacity: 0.4;
$node-highlight-stroke-opacity: 0.5;
$node-highlight-stroke-width: 0.16;
$node-border-stroke-width: 0.2;
Expand Down
2 changes: 1 addition & 1 deletion client/app/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ $border-radius: 4px;

$terminal-header-height: 44px;

$node-highlight-fill-opacity: 0.1;
$node-highlight-shadow-opacity: 0.5;
$node-highlight-stroke-opacity: 0.4;
$node-highlight-stroke-width: 0.04;
$node-border-stroke-width: 0.12;
Expand Down