On a pinned track resize, the mouse and the border being moved are di…

…slocated (#117)

* Half resize distance for pinned tracks

* Do not half resize on pinned group.  Also better compute resize state

* rename pinnedGroup to pinnedCopy

ui/src/frontend/track_group_panel.ts

@@ -62,7 +62,7 @@ export class TrackGroupPanel extends Panel<Attrs> {
   // in trackGroupState() below.
   private lastTrackGroupState: TrackGroupState;
 
-  private initialHeight?: number;
+  private defaultHeight?: number;
 
   constructor(protected attrs: m.CVnode<Attrs>) {
     super();
@@ -77,7 +77,8 @@ export class TrackGroupPanel extends Panel<Attrs> {
     this.lastTrackGroupState = assertExists(
       globals.state.trackGroups[this.trackGroupId]);
       if (this.summaryTrack) {
-        this.initialHeight = this.summaryTrack.getHeight();
+        this.defaultHeight =
+          this.summaryTrack.getHeight() / this.summaryTrackState.scaleFactor;
       }
   }
 
@@ -103,15 +104,15 @@ export class TrackGroupPanel extends Panel<Attrs> {
   resize = (e: MouseEvent): void => {
     e.stopPropagation();
     e.preventDefault();
-    if(!this.summaryTrack){
+    if (!this.summaryTrack) {
       return;
     }
-    let y = this.summaryTrack.getHeight()
+    let y = this.summaryTrack.getHeight();
     const mouseMoveEvent = (evMove: MouseEvent): void => {
       evMove.preventDefault();
       y += evMove.movementY;
-      if (this.attrs && this.initialHeight) {
-        const newMultiplier = y / this.initialHeight;
+      if (this.attrs && this.defaultHeight) {
+        const newMultiplier = y / this.defaultHeight;
         if (newMultiplier < 1) {
           this.summaryTrackState.scaleFactor = 1;
         } else {

ui/src/frontend/track_panel.ts

@@ -68,19 +68,21 @@ function isSelected(id: string) {
 interface TrackShellAttrs {
   track: Track;
   trackState: TrackState;
+  pinnedCopy?: boolean;
 }
 
 class TrackShell implements m.ClassComponent<TrackShellAttrs> {
   // Set to true when we click down and drag the
   private dragging = false;
   private dropping: 'before'|'after'|undefined = undefined;
   private attrs?: TrackShellAttrs;
-  private initialHeight?: number;
+  private defaultHeight?: number;
 
   oninit(vnode: m.Vnode<TrackShellAttrs>) {
     this.attrs = vnode.attrs;
     if (this.attrs) {
-      this.initialHeight = this.attrs.track.getHeight();
+      this.defaultHeight =
+        this.attrs.track.getHeight() / this.attrs.trackState.scaleFactor;
     }
   }
 
@@ -191,10 +193,18 @@ class TrackShell implements m.ClassComponent<TrackShellAttrs> {
     }
     let y = this.attrs.track.getHeight();
     const mouseMoveEvent = (evMove: MouseEvent): void => {
+      if (!this.attrs) {
+        return;
+      }
       evMove.preventDefault();
-      y += evMove.movementY;
-        if (this.attrs && this.initialHeight) {
-          const newMultiplier = y / this.initialHeight;
+      let movementY = evMove.movementY;
+      if (this.attrs.pinnedCopy !== true &&
+          isPinned(this.attrs.trackState.id)) {
+        movementY /=2;
+      }
+      y += movementY;
+        if (this.defaultHeight) {
+          const newMultiplier = y / this.defaultHeight;
           if (newMultiplier < 1) {
             this.attrs.trackState.scaleFactor = 1;
           } else {
@@ -386,6 +396,7 @@ export class TrackContent implements m.ClassComponent<TrackContentAttrs> {
 interface TrackComponentAttrs {
   trackState: TrackState;
   track: Track;
+  pinnedCopy?: boolean;
 }
 class TrackComponent implements m.ClassComponent<TrackComponentAttrs> {
   view({attrs}: m.CVnode<TrackComponentAttrs>) {
@@ -401,7 +412,10 @@ class TrackComponent implements m.ClassComponent<TrackComponentAttrs> {
           id: 'track_' + attrs.trackState.id,
         },
         [
-          m(TrackShell, {track: attrs.track, trackState: attrs.trackState}),
+          m(TrackShell, {
+            track: attrs.track,
+            trackState: attrs.trackState,
+            pinnedCopy: attrs.pinnedCopy}),
           m(TrackContent, {track: attrs.track}),
         ]);
   }
@@ -444,6 +458,7 @@ export class TrackButton implements m.ClassComponent<TrackButtonAttrs> {
 interface TrackPanelAttrs {
   id: string;
   selectable: boolean;
+  pinnedCopy?: boolean;
 }
 
 export class TrackPanel extends Panel<TrackPanelAttrs> {
@@ -452,10 +467,12 @@ export class TrackPanel extends Panel<TrackPanelAttrs> {
   // has disappeared.
   private track: Track|undefined;
   private trackState: TrackState|undefined;
+  private pinnedCopy?: boolean;
 
   constructor(vnode: m.CVnode<TrackPanelAttrs>) {
     super();
     const trackId = vnode.attrs.id;
+    this.pinnedCopy = vnode.attrs.pinnedCopy;
     const trackState = globals.state.tracks[trackId];
     if (trackState === undefined) {
       return;
@@ -473,7 +490,10 @@ export class TrackPanel extends Panel<TrackPanelAttrs> {
     if (this.track === undefined || this.trackState === undefined) {
       return m('div', 'No such track');
     }
-    return m(TrackComponent, {trackState: this.trackState, track: this.track});
+    return m(TrackComponent, {
+      trackState: this.trackState,
+      track: this.track,
+      pinnedCopy: this.pinnedCopy});
   }
 
   oncreate() {

ui/src/frontend/viewer_page.ts

@@ -314,7 +314,11 @@ class TraceViewer implements m.ClassComponent<TraceViewerAttrs> {
                   m(NotesPanel, {key: 'notes'}),
                   m(TickmarkPanel, {key: 'searchTickmarks'}),
                   ...globals.state.pinnedTracks.map(
-                      (id) => m(TrackPanel, {key: id, id, selectable: true})),
+                      (id) => m(TrackPanel, {
+                        key: id,
+                        id,
+                        selectable: true,
+                        pinnedCopy: true})),
                 ],
                 kind: 'OVERVIEW',
               })),