Skip to content

Commit

Permalink
Able to resize wrapped track shells (#107)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ALevansSamsung
ALevansSamsung authored May 6, 2024
1 parent 811b773 commit 8b68253
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 58 deletions.
1 change: 1 addition & 0 deletions ui/src/assets/common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -723,6 +723,7 @@ button.query-ctrl {
.shell {
border-right: 1px solid var(--main-foreground-color);
background-color: var(--collapsed-background);
overflow: hidden;
}
.track-button {
color: rgb(60, 86, 136);
Expand Down
60 changes: 31 additions & 29 deletions ui/src/frontend/track_group_panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,23 +99,54 @@ export class TrackGroupPanel extends Panel<Attrs> {
get summaryTrackState(): TrackState {
return assertExists(globals.state.tracks[this.trackGroupState.tracks[0]]);
}
resize = (e: MouseEvent): void => {
e.stopPropagation();
e.preventDefault();
let y = e.offsetY;
let previousClientY = e.clientY;
const mouseMoveEvent = (evMove: MouseEvent): void => {
evMove.preventDefault();
y += (evMove.clientY -previousClientY);
previousClientY = evMove.clientY;
if (this.attrs && this.initialHeight) {
const newMultiplier = y / this.initialHeight;
if (newMultiplier < 1) {
this.summaryTrackState.scaleFactor = 1;
} else {
this.summaryTrackState.scaleFactor = newMultiplier;
}
globals.rafScheduler.scheduleFullRedraw();
}
};
const mouseUpEvent = (): void => {
document.removeEventListener('mousemove', mouseMoveEvent);
document.removeEventListener('mouseup', mouseUpEvent);
};
document.addEventListener('mousemove', mouseMoveEvent);
document.addEventListener('mouseup', mouseUpEvent);
document.removeEventListener('mousedown', this.resize);
};

onmousemove(e: MouseEvent) {
if (this.summaryTrack && this.summaryTrack.supportsResizing) {
if (e.currentTarget instanceof HTMLElement &&
e.offsetY >=
e.currentTarget.scrollHeight - MOUSE_TARGETING_THRESHOLD_PX
) {
document.addEventListener('mousedown', this.resize);
e.currentTarget.style.cursor = 'row-resize';
return;
} else if (e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
}
}
document.removeEventListener('mousedown', this.resize);
}
onmouseleave(e: MouseEvent) {
if (this.summaryTrack && this.summaryTrack.supportsResizing &&
e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
document.removeEventListener('mousedown', this.resize);
}
}

Expand Down Expand Up @@ -241,34 +272,6 @@ export class TrackGroupPanel extends Panel<Attrs> {
null);
}
ondragstart(e: DragEvent) {
if (this.summaryTrack && this.summaryTrack.supportsResizing &&
e.target instanceof HTMLElement &&
e.offsetY >= e.target.scrollHeight - MOUSE_TARGETING_THRESHOLD_PX) {
e.stopPropagation();
e.preventDefault();
let y = e.offsetY;
let previousClientY = e.clientY;
const mouseMoveEvent = (evMove: MouseEvent): void => {
evMove.preventDefault();
y += (evMove.clientY -previousClientY);
previousClientY = evMove.clientY;
if (this.attrs && this.initialHeight) {
const newMultiplier = y / this.initialHeight;
if (newMultiplier < 1) {
this.summaryTrackState.scaleFactor = 1;
} else {
this.summaryTrackState.scaleFactor = newMultiplier;
}
globals.rafScheduler.scheduleFullRedraw();
}
};
const mouseUpEvent = (): void => {
document.removeEventListener('mousemove', mouseMoveEvent);
document.removeEventListener('mouseup', mouseUpEvent);
};
document.addEventListener('mousemove', mouseMoveEvent);
document.addEventListener('mouseup', mouseUpEvent);
} else {
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
this.dragging = true;
Expand All @@ -277,7 +280,6 @@ export class TrackGroupPanel extends Panel<Attrs> {
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('perfetto/track/' + this.trackGroupId, `${this.trackGroupId}`);
dataTransfer.setDragImage(new Image(), 0, 0);
}
}

ondragend() {
Expand Down
60 changes: 31 additions & 29 deletions ui/src/frontend/track_panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,53 +184,56 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
}) :
''));
}
resize = (e: MouseEvent): void => {
e.stopPropagation();
e.preventDefault();
let y = e.offsetY;
let previousClientY = e.clientY;
const mouseMoveEvent = (evMove: MouseEvent): void => {
evMove.preventDefault();
y += (evMove.clientY -previousClientY);
previousClientY = evMove.clientY;
if (this.attrs && this.initialHeight) {
const newMultiplier = y / this.initialHeight;
if (newMultiplier < 1) {
this.attrs.trackState.scaleFactor = 1;
} else {
this.attrs.trackState.scaleFactor = newMultiplier;
}
globals.rafScheduler.scheduleFullRedraw();
}
};
const mouseUpEvent = (): void => {
document.removeEventListener('mousemove', mouseMoveEvent);
document.removeEventListener('mouseup', mouseUpEvent);
};
document.addEventListener('mousemove', mouseMoveEvent);
document.addEventListener('mouseup', mouseUpEvent);
document.removeEventListener('mousedown', this.resize);
};

onmousemove(e: MouseEvent) {
if (this.attrs?.track.supportsResizing) {
if (e.currentTarget instanceof HTMLElement &&
e.offsetY >= e.currentTarget.scrollHeight - 5) {
document.addEventListener('mousedown', this.resize);
e.currentTarget.style.cursor = 'row-resize';
return;
} else if (e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
}
}
document.removeEventListener('mousedown', this.resize);
}
onmouseleave(e: MouseEvent) {
if (this.attrs?.track.supportsResizing &&
e.currentTarget instanceof HTMLElement) {
e.currentTarget.style.cursor = 'unset';
document.removeEventListener('mousedown', this.resize);
}
}

ondragstart(e: DragEvent) {
if (this.attrs?.track.supportsResizing &&
e.target instanceof HTMLElement &&
e.offsetY >= e.target.scrollHeight - 5) {
e.stopPropagation();
e.preventDefault();
let y = e.offsetY;
let previousClientY = e.clientY;
const mouseMoveEvent = (evMove: MouseEvent): void => {
evMove.preventDefault();
y += (evMove.clientY -previousClientY);
previousClientY = evMove.clientY;
if (this.attrs && this.initialHeight) {
const newMultiplier = y / this.initialHeight;
if (newMultiplier < 1) {
this.attrs.trackState.scaleFactor = 1;
} else {
this.attrs.trackState.scaleFactor = newMultiplier;
}
globals.rafScheduler.scheduleFullRedraw();
}
};
const mouseUpEvent = (): void => {
document.removeEventListener('mousemove', mouseMoveEvent);
document.removeEventListener('mouseup', mouseUpEvent);
};
document.addEventListener('mousemove', mouseMoveEvent);
document.addEventListener('mouseup', mouseUpEvent);
} else {
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
this.dragging = true;
Expand All @@ -239,7 +242,6 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('perfetto/track/' + this.attrs!.trackState.id, `${this.attrs!.trackState.id}`);
dataTransfer.setDragImage(new Image(), 0, 0);
}
}

ondragend() {
Expand Down

0 comments on commit 8b68253

Please sign in to comment.