fix(ViewService): move zIndex layer updates into _updateViewport

the-reality-engineer · the-reality-engineer · commit bc842b205073 · 2017-04-27T16:22:01.000-04:00
diff --git a/dist/argon.core.js b/dist/argon.core.js
@@ -18222,12 +18222,9 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                         }
                     }
                     this._layers = layers;
-                    var zIndex = -layers.length;
                     for (var _b = 0, layers_1 = layers; _b < layers_1.length; _b++) {
                         var l = layers_1[_b];
                         this.element.appendChild(l.source);
-                        l.source.style.zIndex = '' + zIndex;
-                        zIndex++;
                     }
                 };
                 Object.defineProperty(ViewService.prototype, "layers", {
@@ -18323,6 +18320,7 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                     var viewportJSON = JSON.stringify(viewport);
                     if (this.layers && this.autoStyleLayerElements) {
                         requestAnimationFrame(function () {
+                            var zIndex = -_this._layers.length;
                             for (var _i = 0, _a = _this._layers; _i < _a.length; _i++) {
                                 var layer = _a[_i];
                                 var layerStyle = layer.source.style;
@@ -18331,6 +18329,8 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                                 layerStyle.bottom = viewport.y + 'px';
                                 layerStyle.width = viewport.width + 'px';
                                 layerStyle.height = viewport.height + 'px';
+                                layerStyle.zIndex = '' + zIndex;
+                                zIndex++;
                             }
                         });
                     }
diff --git a/dist/argon.js b/dist/argon.js
@@ -23802,12 +23802,9 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                         }
                     }
                     this._layers = layers;
-                    var zIndex = -layers.length;
                     for (var _b = 0, layers_1 = layers; _b < layers_1.length; _b++) {
                         var l = layers_1[_b];
                         this.element.appendChild(l.source);
-                        l.source.style.zIndex = '' + zIndex;
-                        zIndex++;
                     }
                 };
                 Object.defineProperty(ViewService.prototype, "layers", {
@@ -23903,6 +23900,7 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                     var viewportJSON = JSON.stringify(viewport);
                     if (this.layers && this.autoStyleLayerElements) {
                         requestAnimationFrame(function () {
+                            var zIndex = -_this._layers.length;
                             for (var _i = 0, _a = _this._layers; _i < _a.length; _i++) {
                                 var layer = _a[_i];
                                 var layerStyle = layer.source.style;
@@ -23911,6 +23909,8 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',
                                 layerStyle.bottom = viewport.y + 'px';
                                 layerStyle.width = viewport.width + 'px';
                                 layerStyle.height = viewport.height + 'px';
+                                layerStyle.zIndex = '' + zIndex;
+                                zIndex++;
                             }
                         });
                     }
diff --git a/dist/argon.min.js b/dist/argon.min.js
diff --git a/src/view.ts b/src/view.ts
@@ -221,11 +221,8 @@ export class ViewService {
             }
         }
         this._layers = layers;
-        let zIndex = -layers.length;
         for (const l of layers) {
             this.element.appendChild(l.source);
-            l.source.style.zIndex = '' + zIndex;
-            zIndex++;
         }
     }
 
@@ -343,13 +340,16 @@ export class ViewService {
 
         if (this.layers && this.autoStyleLayerElements) {
             requestAnimationFrame(() => {
+                let zIndex = -this._layers.length;
                 for (const layer of this._layers) {
                     const layerStyle = layer.source.style;
                     layerStyle.position = 'absolute';
                     layerStyle.left = viewport.x + 'px';
                     layerStyle.bottom = viewport.y + 'px';
                     layerStyle.width = viewport.width + 'px';
                     layerStyle.height = viewport.height + 'px';
+                    layerStyle.zIndex = '' + zIndex;
+                    zIndex++;
                 }
             })
         }

Original file line number	Diff line number	Diff line change
`@@ -18222,12 +18222,9 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`18222`	`18222`	`}`
`18223`	`18223`	`}`
`18224`	`18224`	`this._layers = layers;`
`18225`		`- var zIndex = -layers.length;`
`18226`	`18225`	`for (var _b = 0, layers_1 = layers; _b < layers_1.length; _b++) {`
`18227`	`18226`	`var l = layers_1[_b];`
`18228`	`18227`	`this.element.appendChild(l.source);`
`18229`		`- l.source.style.zIndex = '' + zIndex;`
`18230`		`- zIndex++;`
`18231`	`18228`	`}`
`18232`	`18229`	`};`
`18233`	`18230`	`Object.defineProperty(ViewService.prototype, "layers", {`
`@@ -18323,6 +18320,7 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`18323`	`18320`	`var viewportJSON = JSON.stringify(viewport);`
`18324`	`18321`	`if (this.layers && this.autoStyleLayerElements) {`
`18325`	`18322`	`requestAnimationFrame(function () {`
	`18323`	`+ var zIndex = -_this._layers.length;`
`18326`	`18324`	`for (var _i = 0, _a = _this._layers; _i < _a.length; _i++) {`
`18327`	`18325`	`var layer = _a[_i];`
`18328`	`18326`	`var layerStyle = layer.source.style;`
`@@ -18331,6 +18329,8 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`18331`	`18329`	`layerStyle.bottom = viewport.y + 'px';`
`18332`	`18330`	`layerStyle.width = viewport.width + 'px';`
`18333`	`18331`	`layerStyle.height = viewport.height + 'px';`
	`18332`	`+ layerStyle.zIndex = '' + zIndex;`
	`18333`	`+ zIndex++;`
`18334`	`18334`	`}`
`18335`	`18335`	`});`
`18336`	`18336`	`}`
Original file line number	Diff line number	Diff line change
`@@ -23802,12 +23802,9 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`23802`	`23802`	`}`
`23803`	`23803`	`}`
`23804`	`23804`	`this._layers = layers;`
`23805`		`- var zIndex = -layers.length;`
`23806`	`23805`	`for (var _b = 0, layers_1 = layers; _b < layers_1.length; _b++) {`
`23807`	`23806`	`var l = layers_1[_b];`
`23808`	`23807`	`this.element.appendChild(l.source);`
`23809`		`- l.source.style.zIndex = '' + zIndex;`
`23810`		`- zIndex++;`
`23811`	`23808`	`}`
`23812`	`23809`	`};`
`23813`	`23810`	`Object.defineProperty(ViewService.prototype, "layers", {`
`@@ -23903,6 +23900,7 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`23903`	`23900`	`var viewportJSON = JSON.stringify(viewport);`
`23904`	`23901`	`if (this.layers && this.autoStyleLayerElements) {`
`23905`	`23902`	`requestAnimationFrame(function () {`
	`23903`	`+ var zIndex = -_this._layers.length;`
`23906`	`23904`	`for (var _i = 0, _a = _this._layers; _i < _a.length; _i++) {`
`23907`	`23905`	`var layer = _a[_i];`
`23908`	`23906`	`var layerStyle = layer.source.style;`
`@@ -23911,6 +23909,8 @@ $__System.register('1', ['2', '3', '3d', '4', '9', '10', 'a', '1d', '35', '2d',`
`23911`	`23909`	`layerStyle.bottom = viewport.y + 'px';`
`23912`	`23910`	`layerStyle.width = viewport.width + 'px';`
`23913`	`23911`	`layerStyle.height = viewport.height + 'px';`
	`23912`	`+ layerStyle.zIndex = '' + zIndex;`
	`23913`	`+ zIndex++;`
`23914`	`23914`	`}`
`23915`	`23915`	`});`
`23916`	`23916`	`}`
Original file line number	Diff line number	Diff line change
`@@ -221,11 +221,8 @@ export class ViewService {`
`221`	`221`	`}`
`222`	`222`	`}`
`223`	`223`	`this._layers = layers;`
`224`		`- let zIndex = -layers.length;`
`225`	`224`	`for (const l of layers) {`
`226`	`225`	`this.element.appendChild(l.source);`
`227`		`- l.source.style.zIndex = '' + zIndex;`
`228`		`- zIndex++;`
`229`	`226`	`}`
`230`	`227`	`}`
`231`	`228`
`@@ -343,13 +340,16 @@ export class ViewService {`
`343`	`340`
`344`	`341`	`if (this.layers && this.autoStyleLayerElements) {`
`345`	`342`	`requestAnimationFrame(() => {`
	`343`	`+ let zIndex = -this._layers.length;`
`346`	`344`	`for (const layer of this._layers) {`
`347`	`345`	`const layerStyle = layer.source.style;`
`348`	`346`	`layerStyle.position = 'absolute';`
`349`	`347`	`layerStyle.left = viewport.x + 'px';`
`350`	`348`	`layerStyle.bottom = viewport.y + 'px';`
`351`	`349`	`layerStyle.width = viewport.width + 'px';`
`352`	`350`	`layerStyle.height = viewport.height + 'px';`
	`351`	`+ layerStyle.zIndex = '' + zIndex;`
	`352`	`+ zIndex++;`
`353`	`353`	`}`
`354`	`354`	`})`
`355`	`355`	`}`