jlfwong/speedscope
1
1
Fork 0
mirror of https://github.com/jlfwong/speedscope.git synced 2024-11-22 12:53:23 +03:00
Code Issues Projects Releases Wiki Activity

Minimap viewport rectangle border

Browse Source
This commit is contained in:
Jamie Wong 2017-12-26 18:02:00 -05:00
parent f691f11670
commit 5f99ee8c4e
3 changed files with 47 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
flamechart-minimap-view.tsx
View File

@ -191,14 +191,29 @@ export const overlayRectangleRenderer = (regl: regl.ReglCommandConstructor) => {
vec2 origin = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportOrigin, 1.0)).xy;
vec2 size = (configSpaceToPhysicalViewSpace * vec3(configSpaceViewportSize, 0.0)).xy;
// TODO(jlfwong): Simplify this with clamp()
if (gl_FragCoord.x > origin.x &&
(physicalSize.y - gl_FragCoord.y) > origin.y &&
gl_FragCoord.x < (origin.x + size.x) &&
(physicalSize.y - gl_FragCoord.y) < (origin.y + size.y)) {
gl_FragColor = vec4(1, 0, 0, 0.0);
vec2 halfSize = physicalSize / 2.0;
float borderWidth = 2.0;
origin = floor(origin * halfSize) / halfSize + borderWidth * vec2(1.0, 1.0);
size = floor(size * halfSize) / halfSize - 2.0 * borderWidth * vec2(1.0, 1.0);
vec2 coord = gl_FragCoord.xy;
coord.y = physicalSize.y - coord.y;
vec2 clamped = clamp(coord, origin, origin + size);
vec2 gap = clamped - coord;
float maxdist = max(abs(gap.x), abs(gap.y));
// TOOD(jlfwong): Could probably optimize this to use mix somehow.
if (maxdist == 0.0) {
// Inside viewport rectangle
gl_FragColor = vec4(0, 0, 0, 0);
} else if (maxdist < borderWidth) {
// Inside viewport rectangle at border
gl_FragColor = vec4(0.7, 0.7, 0.7, 0.8);
} else {
gl_FragColor = vec4(0, 0, 0.1, 0.5);
// Outside viewport rectangle
gl_FragColor = vec4(0.7, 0.7, 0.7, 0.5);
}
}
`,
@ -206,8 +221,10 @@ export const overlayRectangleRenderer = (regl: regl.ReglCommandConstructor) => {
blend: {
enable: true,
func: {
src: 'src alpha',
dst: 'one minus src alpha'
srcRGB: 'src alpha',
srcAlpha: 'one',
dstRGB: 'one minus src alpha',
dstAlpha: 'one'
}
},

12
flamechart-style.ts
View File

@ -11,10 +11,17 @@ export enum FontSize {
LABEL = 10
}
export enum Colors {
MEDIUM_GRAY = "#BDBDBD",
LIGHT_GRAY = "#C4C4C4"
}
export namespace Sizes {
export const MINIMAP_HEIGHT = 100
export const TOOLTIP_WIDTH_MAX = 300
export const TOOLTIP_HEIGHT_MAX = 75
export const SEPARATOR_HEIGHT = 2
}
export const style = StyleSheet.create({
@ -55,12 +62,13 @@ export const style = StyleSheet.create({
top: 0,
height: Sizes.MINIMAP_HEIGHT,
width: '100%',
borderBottom: `${Sizes.SEPARATOR_HEIGHT}px solid ${Colors.MEDIUM_GRAY}`
},
panZoomView: {
position: 'absolute',
left: 0,
top: Sizes.MINIMAP_HEIGHT,
top: Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT,
width: '100%',
height: `calc(100% - ${Sizes.MINIMAP_HEIGHT}px)`,
height: `calc(100% - ${Sizes.MINIMAP_HEIGHT + Sizes.SEPARATOR_HEIGHT}px)`,
},
});

11
reset.css
View File

@ -44,4 +44,15 @@ q:before, q:after {
table {
border-collapse: collapse;
border-spacing: 0;
}
/* Prevent overscrolling */
/* https://stackoverflow.com/a/17899813 */
html {
overflow: hidden;
height: 100%;
}
body {
height: 100%;
overflow: auto;
}