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

Hoist code for viewport transformation to FlamechartView

Browse Source
This commit is contained in:
Jamie Wong 2018-01-10 20:43:42 -08:00
parent 5bbfc452ab
commit c1cee29eab
2 changed files with 41 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
flamechart-minimap-view.tsx
View File

@ -14,6 +14,7 @@ const DEVICE_PIXEL_RATIO = window.devicePixelRatio
interface FlamechartMinimapViewProps {
flamechart: Flamechart
configSpaceViewportRect: Rect
transformViewport: (transform: AffineTransform) => void
setConfigSpaceViewportRect: (rect: Rect) => void
}
@ -218,29 +219,6 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
private minConfigSpaceViewportRectWidth() { return 3 * this.props.flamechart.getMinFrameWidth(); }
private transformViewport(transform: AffineTransform) {
const viewportRect = transform.transformRect(this.props.configSpaceViewportRect)
this.setConfigSpaceViewportRect(viewportRect)
}
private setConfigSpaceViewportRect(viewportRect: Rect) {
const configSpaceOriginBounds = new Rect(
new Vec2(0, 0),
Vec2.max(new Vec2(0, 0), this.configSpaceSize().minus(viewportRect.size))
)
// TODO(jlfwong): De-dup this with FlamechartPanZoomView
const configSpaceSizeBounds = new Rect(
new Vec2(this.minConfigSpaceViewportRectWidth(), viewportRect.height()),
new Vec2(this.configSpaceSize().x, viewportRect.height())
)
this.props.setConfigSpaceViewportRect(new Rect(
configSpaceOriginBounds.closestPointTo(viewportRect.origin),
configSpaceSizeBounds.closestPointTo(viewportRect.size)
))
}
private logicalToPhysicalViewSpace() {
return AffineTransform.withScale(new Vec2(DEVICE_PIXEL_RATIO, DEVICE_PIXEL_RATIO))
}
@ -250,7 +228,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
const configDelta = this.configSpaceToPhysicalViewSpace().inverseTransformVector(physicalDelta)
if (!configDelta) return
this.transformViewport(AffineTransform.withTranslation(configDelta))
this.props.transformViewport(AffineTransform.withTranslation(configDelta))
}
private onWheel = (ev: WheelEvent) => {
@ -283,7 +261,7 @@ export class FlamechartMinimapView extends Component<FlamechartMinimapViewProps,
const width = right - left
const height = this.props.configSpaceViewportRect.height()
this.setConfigSpaceViewportRect(new Rect(
this.props.setConfigSpaceViewportRect(new Rect(
new Vec2(left, configEnd.y - height / 2),
new Vec2(width, height)
))

73
flamechart-view.tsx
View File

@ -76,6 +76,7 @@ interface FlamechartPanZoomViewProps {
flamechart: Flamechart
setNodeHover: (node: CallTreeNode | null, logicalViewSpaceMouse: Vec2) => void
configSpaceViewportRect: Rect
transformViewport: (transform: AffineTransform) => void
setConfigSpaceViewportRect: (rect: Rect) => void
}
@ -405,31 +406,6 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
}
})
private minConfigSpaceViewportRectWidth() { return 3 * this.props.flamechart.getMinFrameWidth(); }
private transformViewport(transform: AffineTransform) {
const viewportRect = transform.transformRect(this.props.configSpaceViewportRect)
const configSpaceOriginBounds = new Rect(
new Vec2(0, 0),
Vec2.max(new Vec2(0, 0), this.configSpaceSize().minus(viewportRect.size))
)
const configSpaceSizeBounds = new Rect(
new Vec2(this.minConfigSpaceViewportRectWidth(), viewportRect.height()),
new Vec2(this.configSpaceSize().x, viewportRect.height())
)
this.setConfigSpaceViewportRect(new Rect(
configSpaceOriginBounds.closestPointTo(viewportRect.origin),
configSpaceSizeBounds.closestPointTo(viewportRect.size)
))
// Clear hovered labels when the viewport changes
this.hoveredLabel = null
this.props.setNodeHover(null, new Vec2())
}
private pan(logicalViewSpaceDelta: Vec2) {
this.interactionLock = 'pan'
@ -437,7 +413,7 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
const configDelta = this.configSpaceToPhysicalViewSpace().inverseTransformVector(physicalDelta)
if (!configDelta) return
this.transformViewport(AffineTransform.withTranslation(configDelta))
this.props.transformViewport(AffineTransform.withTranslation(configDelta))
}
private zoom(logicalViewSpaceCenter: Vec2, multiplier: number) {
@ -447,16 +423,12 @@ export class FlamechartPanZoomView extends ReloadableComponent<FlamechartPanZoom
const configSpaceCenter = this.configSpaceToPhysicalViewSpace().inverseTransformPosition(physicalCenter)
if (!configSpaceCenter) return
if (multiplier < 1 && this.props.configSpaceViewportRect.width() <= this.minConfigSpaceViewportRectWidth()) {
return
}
const zoomTransform = AffineTransform
.withTranslation(configSpaceCenter.times(-1))
.scaledBy(new Vec2(multiplier, 1))
.translatedBy(configSpaceCenter)
this.transformViewport(zoomTransform)
this.props.transformViewport(zoomTransform)
}
private lastDragPos: Vec2 | null = null
@ -629,6 +601,39 @@ export class FlamechartView extends ReloadableComponent<FlamechartViewProps, Fla
}
}
private configSpaceSize() {
return new Vec2(
this.props.flamechart.getTotalWeight(),
this.props.flamechart.getLayers().length
)
}
private minConfigSpaceViewportRectWidth() { return 3 * this.props.flamechart.getMinFrameWidth(); }
private setConfigSpaceViewportRect = (viewportRect: Rect): void => {
const configSpaceOriginBounds = new Rect(
new Vec2(0, 0),
Vec2.max(new Vec2(0, 0), this.configSpaceSize().minus(viewportRect.size))
)
const configSpaceSizeBounds = new Rect(
new Vec2(this.minConfigSpaceViewportRectWidth(), viewportRect.height()),
new Vec2(this.configSpaceSize().x, viewportRect.height())
)
this.setState({
configSpaceViewportRect: new Rect(
configSpaceOriginBounds.closestPointTo(viewportRect.origin),
configSpaceSizeBounds.closestPointTo(viewportRect.size)
)
})
}
private transformViewport = (transform: AffineTransform): void => {
const viewportRect = transform.transformRect(this.state.configSpaceViewportRect)
this.setConfigSpaceViewportRect(viewportRect)
}
onNodeHover = (hoveredNode: CallTreeNode | null, logicalSpaceMouse: Vec2) => {
this.setState({
hoveredNode,
@ -698,21 +703,19 @@ export class FlamechartView extends ReloadableComponent<FlamechartViewProps, Fla
}
}
setConfigSpaceViewportRect = (r: Rect) => {
this.setState({ configSpaceViewportRect: r })
}
render() {
return (
<div className={css(style.fill, style.clip, style.vbox)} ref={this.containerRef}>
<FlamechartMinimapView
configSpaceViewportRect={this.state.configSpaceViewportRect}
transformViewport={this.transformViewport}
setConfigSpaceViewportRect={this.setConfigSpaceViewportRect}
flamechart={this.props.flamechart} />
<FlamechartPanZoomView
ref={this.panZoomRef}
flamechart={this.props.flamechart}
setNodeHover={this.onNodeHover}
transformViewport={this.transformViewport}
configSpaceViewportRect={this.state.configSpaceViewportRect}
setConfigSpaceViewportRect={this.setConfigSpaceViewportRect}
/>