From 8b6825324d6741db08808f77ff91c7ca96ae23e4 Mon Sep 17 00:00:00 2001 From: Andrew Levans <121060410+ALevansSamsung@users.noreply.github.com> Date: Mon, 6 May 2024 15:03:07 -0500 Subject: [PATCH] Able to resize wrapped track shells (#107) --- ui/src/assets/common.scss | 1 + ui/src/frontend/track_group_panel.ts | 60 ++++++++++++++-------------- ui/src/frontend/track_panel.ts | 60 ++++++++++++++-------------- 3 files changed, 63 insertions(+), 58 deletions(-) diff --git a/ui/src/assets/common.scss b/ui/src/assets/common.scss index e2171a8468..5a44a33bf2 100644 --- a/ui/src/assets/common.scss +++ b/ui/src/assets/common.scss @@ -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); diff --git a/ui/src/frontend/track_group_panel.ts b/ui/src/frontend/track_group_panel.ts index 8ac513f42c..b897679340 100644 --- a/ui/src/frontend/track_group_panel.ts +++ b/ui/src/frontend/track_group_panel.ts @@ -99,6 +99,33 @@ export class TrackGroupPanel extends Panel { 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) { @@ -106,16 +133,20 @@ export class TrackGroupPanel extends Panel { 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); } } @@ -241,34 +272,6 @@ export class TrackGroupPanel extends Panel { 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; @@ -277,7 +280,6 @@ export class TrackGroupPanel extends Panel { dataTransfer.effectAllowed = 'move'; dataTransfer.setData('perfetto/track/' + this.trackGroupId, `${this.trackGroupId}`); dataTransfer.setDragImage(new Image(), 0, 0); - } } ondragend() { diff --git a/ui/src/frontend/track_panel.ts b/ui/src/frontend/track_panel.ts index f0ba0686c6..fe1f67bb35 100644 --- a/ui/src/frontend/track_panel.ts +++ b/ui/src/frontend/track_panel.ts @@ -184,53 +184,56 @@ class TrackShell implements m.ClassComponent { }) : '')); } + 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; @@ -239,7 +242,6 @@ class TrackShell implements m.ClassComponent { dataTransfer.effectAllowed = 'move'; dataTransfer.setData('perfetto/track/' + this.attrs!.trackState.id, `${this.attrs!.trackState.id}`); dataTransfer.setDragImage(new Image(), 0, 0); - } } ondragend() {