Skip to content

Commit

Permalink
[Improve base View][3/n] Add _ to views' private vars and methods (#101)
Browse files Browse the repository at this point in the history
  • Loading branch information
@taneliang
taneliang committed Aug 3, 2020
1 parent 32a33b0 commit ec3383b
Show file tree
Hide file tree
Showing 9 changed files with 270 additions and 255 deletions.
2 changes: 1 addition & 1 deletion src/CanvasPage.js
View file
Expand Up @@ -163,7 +163,7 @@ function AutoSizedCanvas({data, height, width}: AutoSizedCanvasProps) {
surfaceRef.current,
{origin: zeroPoint, size: {width, height}},
stackedZoomables,
reactEventsView.intrinsicSize.width,
data.duration,
);

rootViewRef.current = new View(
Expand Down
104 changes: 52 additions & 52 deletions src/canvas/views/FlamechartView.js
View file
Expand Up @@ -62,15 +62,15 @@ function hoverColorForStackFrame(stackFrame: FlamechartStackFrame): string {

class FlamechartStackLayerView extends View {
/** Layer to display */
stackLayer: FlamechartStackLayer;
_stackLayer: FlamechartStackLayer;

/** A set of `stackLayer`'s frames, for efficient lookup. */
stackFrameSet: Set<FlamechartStackFrame>;
_stackFrameSet: Set<FlamechartStackFrame>;

intrinsicSize: Size;
_intrinsicSize: Size;

hoveredStackFrame: FlamechartStackFrame | null = null;
onHover: ((node: FlamechartStackFrame | null) => void) | null = null;
_hoveredStackFrame: FlamechartStackFrame | null = null;
_onHover: ((node: FlamechartStackFrame | null) => void) | null = null;

constructor(
surface: Surface,
Expand All @@ -79,43 +79,43 @@ class FlamechartStackLayerView extends View {
duration: number,
) {
super(surface, frame);
this.stackLayer = stackLayer;
this.stackFrameSet = new Set(stackLayer);
this.intrinsicSize = {
this._stackLayer = stackLayer;
this._stackFrameSet = new Set(stackLayer);
this._intrinsicSize = {
width: duration,
height: FLAMECHART_FRAME_HEIGHT,
};
}

desiredSize() {
return this.intrinsicSize;
return this._intrinsicSize;
}

setHoveredFlamechartStackFrame(
hoveredStackFrame: FlamechartStackFrame | null,
) {
if (this.hoveredStackFrame === hoveredStackFrame) {
if (this._hoveredStackFrame === hoveredStackFrame) {
return; // We're already hovering over this frame
}

// Only care about frames displayed by this view.
const stackFrameToSet =
hoveredStackFrame && this.stackFrameSet.has(hoveredStackFrame)
hoveredStackFrame && this._stackFrameSet.has(hoveredStackFrame)
? hoveredStackFrame
: null;
if (this.hoveredStackFrame === stackFrameToSet) {
if (this._hoveredStackFrame === stackFrameToSet) {
return; // Resulting state is unchanged
}
this.hoveredStackFrame = stackFrameToSet;
this._hoveredStackFrame = stackFrameToSet;
this.setNeedsDisplay();
}

draw(context: CanvasRenderingContext2D) {
const {
frame,
stackLayer,
hoveredStackFrame,
intrinsicSize,
_stackLayer,
_hoveredStackFrame,
_intrinsicSize,
visibleArea,
} = this;

Expand All @@ -131,10 +131,10 @@ class FlamechartStackLayerView extends View {
context.textBaseline = 'middle';
context.font = `${FLAMECHART_FONT_SIZE}px sans-serif`;

const scaleFactor = positioningScaleFactor(intrinsicSize.width, frame);
const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);

for (let i = 0; i < stackLayer.length; i++) {
const stackFrame = stackLayer[i];
for (let i = 0; i < _stackLayer.length; i++) {
const stackFrame = _stackLayer[i];
const {name, timestamp, duration} = stackFrame;

const width = durationToWidth(duration, scaleFactor);
Expand All @@ -154,7 +154,7 @@ class FlamechartStackLayerView extends View {
continue; // Not in view
}

const showHoverHighlight = hoveredStackFrame === stackLayer[i];
const showHoverHighlight = _hoveredStackFrame === _stackLayer[i];
context.fillStyle = showHoverHighlight
? hoverColorForStackFrame(stackFrame)
: defaultColorForStackFrame(stackFrame);
Expand Down Expand Up @@ -210,26 +210,26 @@ class FlamechartStackLayerView extends View {
/**
* @private
*/
handleHover(interaction: HoverInteraction) {
const {stackLayer, frame, intrinsicSize, onHover, visibleArea} = this;
_handleHover(interaction: HoverInteraction) {
const {_stackLayer, frame, _intrinsicSize, _onHover, visibleArea} = this;
const {location} = interaction.payload;
if (!onHover || !rectContainsPoint(location, visibleArea)) {
if (!_onHover || !rectContainsPoint(location, visibleArea)) {
return;
}

// Find the node being hovered over.
const scaleFactor = positioningScaleFactor(intrinsicSize.width, frame);
const scaleFactor = positioningScaleFactor(_intrinsicSize.width, frame);
let startIndex = 0;
let stopIndex = stackLayer.length - 1;
let stopIndex = _stackLayer.length - 1;
while (startIndex <= stopIndex) {
const currentIndex = Math.floor((startIndex + stopIndex) / 2);
const flamechartStackFrame = stackLayer[currentIndex];
const flamechartStackFrame = _stackLayer[currentIndex];
const {timestamp, duration} = flamechartStackFrame;

const width = durationToWidth(duration, scaleFactor);
const x = Math.floor(timestampToPosition(timestamp, scaleFactor, frame));
if (x <= location.x && x + width >= location.x) {
onHover(flamechartStackFrame);
_onHover(flamechartStackFrame);
return;
}

Expand All @@ -240,26 +240,26 @@ class FlamechartStackLayerView extends View {
}
}

onHover(null);
_onHover(null);
}

handleInteraction(interaction: Interaction) {
switch (interaction.type) {
case 'hover':
this.handleHover(interaction);
this._handleHover(interaction);
break;
}
}
}

export class FlamechartView extends View {
flamechartRowViews: FlamechartStackLayerView[] = [];
_flamechartRowViews: FlamechartStackLayerView[] = [];

/** Container view that vertically stacks flamechart rows */
verticalStackView: View;
_verticalStackView: View;

hoveredStackFrame: FlamechartStackFrame | null = null;
onHover: ((node: FlamechartStackFrame | null) => void) | null = null;
_hoveredStackFrame: FlamechartStackFrame | null = null;
_onHover: ((node: FlamechartStackFrame | null) => void) | null = null;

constructor(
surface: Surface,
Expand All @@ -272,76 +272,76 @@ export class FlamechartView extends View {
}

setDataAndUpdateSubviews(flamechart: Flamechart, duration: number) {
const {surface, frame, onHover, hoveredStackFrame} = this;
const {surface, frame, _onHover, _hoveredStackFrame} = this;

// Clear existing rows on data update
if (this.verticalStackView) {
if (this._verticalStackView) {
this.removeAllSubviews();
this.flamechartRowViews = [];
this._flamechartRowViews = [];
}

this.verticalStackView = new View(surface, frame, verticallyStackedLayout);
this.flamechartRowViews = flamechart.map(stackLayer => {
this._verticalStackView = new View(surface, frame, verticallyStackedLayout);
this._flamechartRowViews = flamechart.map(stackLayer => {
const rowView = new FlamechartStackLayerView(
surface,
frame,
stackLayer,
duration,
);
this.verticalStackView.addSubview(rowView);
this._verticalStackView.addSubview(rowView);

// Update states
rowView.onHover = onHover;
rowView.setHoveredFlamechartStackFrame(hoveredStackFrame);
rowView._onHover = _onHover;
rowView.setHoveredFlamechartStackFrame(_hoveredStackFrame);
return rowView;
});

// Add a plain background view to prevent gaps from appearing between
// flamechartRowViews.
const colorView = new ColorView(surface, frame, COLORS.BACKGROUND);
this.addSubview(colorView);
this.addSubview(this.verticalStackView);
this.addSubview(this._verticalStackView);
}

setHoveredFlamechartStackFrame(
hoveredStackFrame: FlamechartStackFrame | null,
) {
this.hoveredStackFrame = hoveredStackFrame;
this.flamechartRowViews.forEach(rowView =>
this._hoveredStackFrame = hoveredStackFrame;
this._flamechartRowViews.forEach(rowView =>
rowView.setHoveredFlamechartStackFrame(hoveredStackFrame),
);
}

setOnHover(onHover: (node: FlamechartStackFrame | null) => void) {
this.onHover = onHover;
this.flamechartRowViews.forEach(rowView => (rowView.onHover = onHover));
this._onHover = onHover;
this._flamechartRowViews.forEach(rowView => (rowView._onHover = onHover));
}

desiredSize() {
// Ignore the wishes of the background color view
return this.verticalStackView.desiredSize();
return this._verticalStackView.desiredSize();
}

/**
* @private
*/
handleHover(interaction: HoverInteraction) {
const {onHover, visibleArea} = this;
if (!onHover) {
_handleHover(interaction: HoverInteraction) {
const {_onHover, visibleArea} = this;
if (!_onHover) {
return;
}

const {location} = interaction.payload;
if (!rectContainsPoint(location, visibleArea)) {
// Clear out any hovered flamechart stack frame
onHover(null);
_onHover(null);
}
}

handleInteraction(interaction: Interaction) {
switch (interaction.type) {
case 'hover':
this.handleHover(interaction);
this._handleHover(interaction);
break;
}
}
Expand Down
50 changes: 28 additions & 22 deletions src/canvas/views/ReactEventsView.js
View file
Expand Up @@ -26,38 +26,38 @@ import {
} from '../constants';

export class ReactEventsView extends View {
profilerData: ReactProfilerData;
intrinsicSize: Size;
_profilerData: ReactProfilerData;
_intrinsicSize: Size;

hoveredEvent: ReactEvent | null = null;
_hoveredEvent: ReactEvent | null = null;
onHover: ((event: ReactEvent | null) => void) | null = null;

constructor(surface: Surface, frame: Rect, profilerData: ReactProfilerData) {
super(surface, frame);
this.profilerData = profilerData;
this._profilerData = profilerData;

this.intrinsicSize = {
width: this.profilerData.duration,
this._intrinsicSize = {
width: this._profilerData.duration,
height: EVENT_ROW_HEIGHT_FIXED,
};
}

desiredSize() {
return this.intrinsicSize;
return this._intrinsicSize;
}

setHoveredEvent(hoveredEvent: ReactEvent | null) {
if (this.hoveredEvent === hoveredEvent) {
if (this._hoveredEvent === hoveredEvent) {
return;
}
this.hoveredEvent = hoveredEvent;
this._hoveredEvent = hoveredEvent;
this.setNeedsDisplay();
}

/**
* Draw a single `ReactEvent` as a circle in the canvas.
*/
drawSingleReactEvent(
_drawSingleReactEvent(
context: CanvasRenderingContext2D,
rect: Rect,
event: ReactEvent,
Expand Down Expand Up @@ -122,8 +122,8 @@ export class ReactEventsView extends View {
draw(context: CanvasRenderingContext2D) {
const {
frame,
profilerData: {events},
hoveredEvent,
_profilerData: {events},
_hoveredEvent,
visibleArea,
} = this;

Expand All @@ -137,13 +137,16 @@ export class ReactEventsView extends View {

// Draw events
const baseY = frame.origin.y + REACT_EVENT_ROW_PADDING;
const scaleFactor = positioningScaleFactor(this.intrinsicSize.width, frame);
const scaleFactor = positioningScaleFactor(
this._intrinsicSize.width,
frame,
);

events.forEach(event => {
if (event === hoveredEvent) {
if (event === _hoveredEvent) {
return;
}
this.drawSingleReactEvent(
this._drawSingleReactEvent(
context,
visibleArea,
event,
Expand All @@ -155,11 +158,11 @@ export class ReactEventsView extends View {

// Draw the hovered and/or selected items on top so they stand out.
// This is helpful if there are multiple (overlapping) items close to each other.
if (hoveredEvent !== null) {
this.drawSingleReactEvent(
if (_hoveredEvent !== null) {
this._drawSingleReactEvent(
context,
visibleArea,
hoveredEvent,
_hoveredEvent,
baseY,
scaleFactor,
true,
Expand Down Expand Up @@ -196,7 +199,7 @@ export class ReactEventsView extends View {
/**
* @private
*/
handleHover(interaction: HoverInteraction) {
_handleHover(interaction: HoverInteraction) {
const {frame, onHover, visibleArea} = this;
if (!onHover) {
return;
Expand All @@ -209,9 +212,12 @@ export class ReactEventsView extends View {
}

const {
profilerData: {events},
_profilerData: {events},
} = this;
const scaleFactor = positioningScaleFactor(this.intrinsicSize.width, frame);
const scaleFactor = positioningScaleFactor(
this._intrinsicSize.width,
frame,
);
const hoverTimestamp = positionToTimestamp(location.x, scaleFactor, frame);
const eventTimestampAllowance = widthToDuration(
REACT_EVENT_SIZE / 2,
Expand Down Expand Up @@ -239,7 +245,7 @@ export class ReactEventsView extends View {
handleInteraction(interaction: Interaction) {
switch (interaction.type) {
case 'hover':
this.handleHover(interaction);
this._handleHover(interaction);
break;
}
}
Expand Down

0 comments on commit ec3383b

Please sign in to comment.