performance and glimmer2 updates

addon/-debug/edge-visualization/debug-mixin.js

@@ -2,7 +2,6 @@ import Ember from 'ember';
 import Visualization from './visualization';
 
 const {
-  run,
   computed,
   Mixin
   } = Ember;
@@ -14,76 +13,43 @@ export default Mixin.create({
   _nextVisualization: null,
 
   toggleEdgeVisualization() {
-    this.toggleProperty('showEdges');
-  },
-
-  __smScheduleUpdate(source) {
-    this._super(source);
-    this.visualize();
+    this.toggleProperty('debug');
   },
 
   visualization: null,
-  setupHandlers() {
+  didInsertElement() {
     this._super();
-    if (this.get('showEdges')) {
+    if (this.get('debug')) {
       this.visualization = new Visualization(this);
+      requestAnimationFrame(() => {
+        this.visualize();
+      });
     }
   },
 
-  _edges: computed('containerSize', function() {
-    if (!this.radar || !this.radar.planet) {
-      return {};
-    }
-
-    // segment top break points
-    this.radar.planet.setState();
-
-    const bufferSize = Number(this.get('bufferSize'));
-    const rect = this.radar.planet;
-
-    this.visualize();
-
-    return {
-      viewportTop: rect.top,
-      visibleTop: (-1 * bufferSize * rect.height) + rect.top,
-      viewportBottom: rect.bottom,
-      visibleBottom: (bufferSize * rect.height) + rect.bottom
-    };
-  }),
-
-  _removeComponents(toCull, toHide) {
-    this._super(toCull, toHide);
-    this.visualize();
-  },
-
   visualize() {
-    if (!this.get('showEdges')) {
+    if (!this.get('debug')) {
       if (this.visualization) {
         this.visualization.destroy();
         this.visualization = null;
       }
       return;
     }
-    this._nextVisualization = run.scheduleOnce('afterRender', () => {
-      if (this.visualization) {
-        this.visualization.render();
-      }
-    });
-  },
 
-  __prependComponents(addCount) {
-    this._super(addCount);
-    this.visualize();
+    if (this.visualization) {
+      this.visualization.render();
+      requestAnimationFrame(() => {
+        this.visualize();
+      });
+    }
   },
 
   willDestroy() {
     this._super();
-    run.cancel(this._nextVisualization);
     if (this.visualization) {
       this.visualization.destroy();
       this.visualization = null;
     }
   }
-
 });
 

addon/-debug/edge-visualization/visualization.js

@@ -1,10 +1,13 @@
 /* global document */
 import Geography from '../../-private/radar/models/geography';
+import Container from '../../-private/radar/models/container';
 
-export default class Visualization {
+const SYS_WIDTH = 250;
 
+export default class Visualization {
   constructor(component) {
     this.component = component;
+    this.minimumMovement = Math.floor(component.defaultHeight / 2);
     this.radar = component.radar;
     this.satellites = [];
     this.cache = [];
@@ -36,68 +39,89 @@ export default class Visualization {
     this.visBelow.className = 'sm_visualization-visible';
     this.container.appendChild(this.visBelow);
 
+    this.screen = document.createElement('div');
+    this.screen.className = 'sm_visualization-screen';
+    this.container.appendChild(this.screen);
+
     document.body.appendChild(this.wrapper);
   }
 
+  currentOffsetAdjustment() {
+    let currOffsets = this.radar.currentOffsets;
+
+    if (currOffsets !== null) {
+      const scrollY = currOffsets.top;
+      const scrollX = currOffsets.left;
+      const _scrollY = this.radar.scrollY;
+      const _scrollX = this.radar.scrollX;
+      const dY = scrollY - _scrollY;
+      const dX = scrollX - _scrollX;
+
+      return { dY, dX };
+    }
+
+    return { dY: 0, dX: 0 };
+  }
+
   applySatelliteStyles(element, geography) {
-    const left = (this.radar.planet.width - this.radar.planet.left - geography.left);
+    const adj = this.currentOffsetAdjustment();
+    const left = SYS_WIDTH;
 
-    element.style.width = `${geography.width}px`;
     element.style.height = `${geography.height}px`;
-    element.style.top = `${geography.top}px`;
+    element.style.top = `${geography.top - adj.dY}px`;
     element.style.left = `${left}px`;
   }
 
   applySatelliteMirrorStyles(element, componentElement, compare) {
+    const adj = this.currentOffsetAdjustment();
     const geography = new Geography(componentElement);
-    const left = ((this.radar.planet.width * 2) - this.radar.planet.left - geography.left);
+    const left = 2 * SYS_WIDTH;
     let errorLevel = false;
 
-    element.style.width = `${geography.width}px`;
     element.style.height = `${geography.height}px`;
     element.style.top = `${geography.top}px`;
     element.style.left = `${left}px`;
 
-    if (Math.abs(geography.top - compare.top) > 35) {
+    let diff = Math.abs(geography.top - compare.top + adj.dY);
+
+    if (diff > this.minimumMovement) {
       errorLevel = true;
     }
 
     element.setAttribute('hasErrors', errorLevel ? 'true' : 'false');
   }
 
-  static applyStyles(element, geography) {
-    element.style.width = `${geography.width}px`;
+  static applyVerticalStyles(element, geography) {
     element.style.height = `${geography.height}px`;
     element.style.top = `${geography.top}px`;
+  }
+
+  static applyStyles(element, geography) {
+    Visualization.applyVerticalStyles(element, geography);
+    element.style.width = `${geography.width}px`;
     element.style.left = `${geography.left}px`;
   }
 
   styleViewport() {
-    const edges = this.component.get('_edges');
+    const edges = this.component._edges;
     const {
       planet,
       skyline
       } = this.radar;
-    const wrapperWidth = (((2 * planet.left) + planet.width) * 0.3);
-
-    this.wrapper.style.width = `${wrapperWidth}px`;
-    this.container.style.width = `${planet.width}px`;
     this.container.style.height = `${planet.height}px`;
 
-    Visualization.applyStyles(this.telescope, planet);
-    Visualization.applyStyles(this.sky, skyline);
+    Visualization.applyVerticalStyles(this.telescope, planet);
+    Visualization.applyVerticalStyles(this.sky, skyline);
+
+    Visualization.applyVerticalStyles(this.screen, new Geography(Container));
 
-    Visualization.applyStyles(this.visAbove, {
-      width: planet.width,
+    Visualization.applyVerticalStyles(this.visAbove, {
       top: edges.visibleTop,
-      left: planet.left,
       height: edges.viewportTop - edges.visibleTop
     });
 
-    Visualization.applyStyles(this.visBelow, {
-      width: planet.width,
+    Visualization.applyVerticalStyles(this.visBelow, {
       top: edges.viewportBottom,
-      left: planet.left,
       height: edges.visibleBottom - edges.viewportBottom
     });
   }
@@ -150,12 +174,16 @@ export default class Visualization {
 
     this.radar.satellites.forEach((sat, index) => {
       const element = sats[index];
+      const satIndex = sat.component.get('index');
 
       this.applySatelliteStyles(element, sat.geography);
       element.setAttribute('viewState', sat.component._contentInserted ? 'visible' : 'culled');
-      element.innerText = sat.component.get('index');
+      element.mirrorSatellite.setAttribute('viewState', sat.component._contentInserted ? 'visible' : 'culled');
+      element.setAttribute('index', satIndex);
+      element.mirrorSatellite.setAttribute('index', satIndex);
+      element.innerText = satIndex;
       this.applySatelliteMirrorStyles(element.mirrorSatellite, sat.component.element, sat.geography);
-      element.mirrorSatellite.innerText = sat.component.get('index');
+      element.mirrorSatellite.innerText = satIndex;
     });
   }
 

addon/-private/radar/models/radar.js

@@ -7,6 +7,7 @@ import {
   addScrollHandler,
   removeScrollHandler
 } from '../utils/scroll-handler';
+import scheduler from '../../scheduler';
 
 const {
   guidFor,
@@ -248,6 +249,8 @@ export default class Radar {
       const dX = scrollX - _scrollX;
 
       this.shiftSatellites(dY, dX);
+
+      this.currentOffsets = null;
     }
   }
 
@@ -270,6 +273,11 @@ export default class Radar {
     this.planet.left -= dX;
     this.planet.right -= dX;
 
+    this.skyline.top -= dY;
+    this.skyline.bottom -= dY;
+    this.skyline.left -= dX;
+    this.skyline.right -= dX;
+
     this._shift(dY, dX);
   }
 
@@ -282,21 +290,42 @@ export default class Radar {
   _setupHandlers() {
     this._resizeHandler = undefined;
     this._scrollHandler = undefined;
-    this._nextResize = undefined;
-    this._nextScroll = undefined;
-    this._nextAdjustment = undefined;
+    this._nextResize = null;
+    this._nextScroll = null;
+    this._nextAdjustment = null;
+    this.currentOffsets = null;
+    this.currentAdjustOffsets = null;
 
-    this._scrollHandler = run.bind(this, (offsets) => {
+    this._scrollHandler = (offsets) => {
       if (this.isTracking) {
-        this._nextScroll = run.scheduleOnce('sync', this, this.filterMovement, offsets);
+        this.currentOffsets = offsets;
+
+        if (this._nextScroll === null) {
+          scheduler.schedule('layout', () => {
+            this.filterMovement(this.currentOffsets);
+            this._nextScroll = null;
+          });
+        }
       }
-    });
-    this._resizeHandler = run.bind(this, () => {
-      this._nextResize = run.debounce(this, this.resizeSatellites, this.resizeDebounce);
-    });
-    this._scrollAdjuster = run.bind(this, (offsets) => {
-      this._nextAdjustment = run.scheduleOnce('sync', this, this.updateScrollPosition, offsets);
-    });
+    };
+
+    this._resizeHandler = () => {
+      if (this._nextResize === null) {
+        this._nextResize = scheduler.schedule('sync', () => {
+          this.resizeSatellites();
+          this._nextResize = null;
+        });
+      }
+    };
+    this._scrollAdjuster = (offsets) => {
+      this.currentAdjustOffsets = offsets;
+      if (this._nextAdjustment === null) {
+        this._nextAdjustment = scheduler.schedule('layout', () => {
+          this.updateScrollPosition(this.currentAdjustOffsets);
+          this._nextAdjustment = null;
+        });
+      }
+    };
 
     let handlerOpts = SUPPORTS_PASSIVE ? { capture: true, passive: true } : true;
 
@@ -317,9 +346,9 @@ export default class Radar {
     if (this.telescope !== Container) {
       removeScrollHandler(Container, this._scrollAdjuster);
     }
-    run.cancel(this._nextResize);
-    run.cancel(this._nextScroll);
-    run.cancel(this._nextAdjustment);
+    scheduler.forget(this._nextResize);
+    scheduler.forget(this._nextScroll);
+    scheduler.forget(this._nextAdjustment);
     this._scrollHandler = undefined ;
     this._resizeHandler = undefined;
     this._scrollAdjuster = undefined;

addon/-private/radar/utils/scroll-handler.js

@@ -1,3 +1,5 @@
+import scheduler from '../../scheduler';
+
 const DEFAULT_ARRAY_SIZE = 10;
 
 export class ScrollHandler {
@@ -65,7 +67,7 @@ export class ScrollHandler {
   poll() {
     this.isPolling = true;
 
-    requestAnimationFrame(() => {
+    scheduler.schedule('sync', () => {
       for (let i = 0; i < this.length; i++) {
         let element = this.elements[i];
         let info = this.handlers[i];