Skip to content

Commit

Permalink
Don't show drop border if unable to move trackLike to location [Issue…
Browse files Browse the repository at this point in the history 
… 664] (#89)

* Don't show drop border if unable to move trackLike

* PR Comments

---------

Co-authored-by: Christian W. Damus <[email protected]>
  • Loading branch information
@ALevansSamsung @cdamus
ALevansSamsung and cdamus authored Nov 29, 2023
1 parent efe3ba5 commit 5c59ab2
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 19 deletions.
36 changes: 27 additions & 9 deletions ui/src/frontend/track_group_panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,7 +213,7 @@ export class TrackGroupPanel extends Panel<Attrs> {
e.stopPropagation();
globals.rafScheduler.scheduleFullRedraw();
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('perfetto/track', `${this.trackGroupId}`);
dataTransfer.setData('perfetto/track/' + this.trackGroupId, `${this.trackGroupId}`);
dataTransfer.setDragImage(new Image(), 0, 0);
}

Expand All @@ -227,17 +227,30 @@ export class TrackGroupPanel extends Panel<Attrs> {
if (!(e.target instanceof HTMLElement)) return;
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
if (!dataTransfer.types.includes('perfetto/track')) return;
const dataType = dataTransfer.types.find((dataType)=>{
return dataType.startsWith('perfetto/track/');
});
if (!dataType) return;
const trackLikeId = dataType.split('/').pop();
if (!trackLikeId) return;
e.stopPropagation();
dataTransfer.dropEffect = 'move';
e.preventDefault();

// Apply some hysteresis to the drop logic so that the lightened border
// changes only when we get close enough to the border.
if (e.offsetY < e.target.scrollHeight / 3) {
this.dropping = 'before';
} else if (e.offsetY > e.target.scrollHeight / 3 * 2) {
this.dropping = 'after';
// Test if id has same parent as current
// If not do not set this.dropping
const trackLike : TrackState | TrackGroupState =
globals.state.trackGroups[trackLikeId] ??
globals.state.tracks[trackLikeId];
if (('trackGroup' in trackLike && this.trackGroupState.parentGroup === trackLike.trackGroup) ||
'parentGroup' in trackLike && this.trackGroupState.parentGroup === trackLike.parentGroup) {
// Apply some hysteresis to the drop logic so that the lightened border
// changes only when we get close enough to the border.
if (e.offsetY < e.target.scrollHeight / 3) {
this.dropping = 'before';
} else if (e.offsetY > e.target.scrollHeight / 3 * 2) {
this.dropping = 'after';
}
}
globals.rafScheduler.scheduleFullRedraw();
}
Expand All @@ -252,7 +265,12 @@ export class TrackGroupPanel extends Panel<Attrs> {
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
globals.rafScheduler.scheduleFullRedraw();
const srcId = dataTransfer.getData('perfetto/track');
const dataType = dataTransfer.types.find((dataType)=>{
return dataType.startsWith('perfetto/track/');
});
if (!dataType) return;
const srcId = dataType.split('/').pop();
if (!srcId) return;
const dstId = this.trackGroupId;
globals.dispatch(Actions.moveTrack({srcId, op: this.dropping, dstId}));
this.dropping = undefined;
Expand Down
38 changes: 28 additions & 10 deletions ui/src/frontend/track_panel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {hex} from 'color-convert';
import m from 'mithril';

import {Actions} from '../common/actions';
import {TrackState} from '../common/state';
import {TrackGroupState, TrackState} from '../common/state';
import {TPTime} from '../common/time';

import {TRACK_SHELL_WIDTH, getCssStr} from './css_constants';
Expand Down Expand Up @@ -167,7 +167,7 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
e.stopPropagation();
globals.rafScheduler.scheduleFullRedraw();
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('perfetto/track', `${this.attrs!.trackState.id}`);
dataTransfer.setData('perfetto/track/' + this.attrs!.trackState.id, `${this.attrs!.trackState.id}`);
dataTransfer.setDragImage(new Image(), 0, 0);
}

Expand All @@ -181,17 +181,30 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
if (!(e.target instanceof HTMLElement)) return;
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
if (!dataTransfer.types.includes('perfetto/track')) return;
const dataType = dataTransfer.types.find((dataType)=>{
return dataType.startsWith('perfetto/track/');
});
if (!dataType) return;
const trackLikeId = dataType.split('/').pop();
if (!trackLikeId) return;
e.stopPropagation();
dataTransfer.dropEffect = 'move';
e.preventDefault();

// Apply some hysteresis to the drop logic so that the lightened border
// changes only when we get close enough to the border.
if (e.offsetY < e.target.scrollHeight / 3) {
this.dropping = 'before';
} else if (e.offsetY > e.target.scrollHeight / 3 * 2) {
this.dropping = 'after';
// Test if id has same parent as current
// If not do not set this.dropping
const trackLike : TrackState | TrackGroupState =
globals.state.trackGroups[trackLikeId] ??
globals.state.tracks[trackLikeId];
if (('trackGroup' in trackLike && this.attrs!.trackState.trackGroup === trackLike.trackGroup) ||
'parentGroup' in trackLike && this.attrs!.trackState.trackGroup === trackLike.parentGroup) {
// Apply some hysteresis to the drop logic so that the lightened border
// changes only when we get close enough to the border.
if (e.offsetY < e.target.scrollHeight / 3) {
this.dropping = 'before';
} else if (e.offsetY > e.target.scrollHeight / 3 * 2) {
this.dropping = 'after';
}
}
globals.rafScheduler.scheduleFullRedraw();
}
Expand All @@ -206,7 +219,12 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
const dataTransfer = e.dataTransfer;
if (dataTransfer === null) return;
globals.rafScheduler.scheduleFullRedraw();
const srcId = dataTransfer.getData('perfetto/track');
const dataType = dataTransfer.types.find((dataType)=>{
return dataType.startsWith('perfetto/track/');
});
if (!dataType) return;
const srcId = dataType.split('/').pop();
if (!srcId) return;
const dstId = this.attrs!.trackState.id;
globals.dispatch(Actions.moveTrack({srcId, op: this.dropping, dstId}));
this.dropping = undefined;
Expand Down

0 comments on commit 5c59ab2

Please sign in to comment.