Code cleaning

package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixi-flex-layout",
   "author": "Matuesz Szymik@Fireveined",
-  "version": "0.8.17",
+  "version": "0.8.19",
   "description": "Flex layouts for pixi.js powered by Yoga",
   "keywords": [
     "pixi.js",

src/YogaLayout.ts

@@ -12,6 +12,7 @@ import Display = YogaConstants.Display;
 import PositionType = YogaConstants.PositionType;
 
 type PixelsOrPercentage = number | string;
+type YogaSize = PixelsOrPercentage | "pixi" | "auto";
 
 export class YogaLayout {
 
@@ -28,8 +29,8 @@ export class YogaLayout {
      */
     public rescaleToYoga: boolean = false;
 
-    private _width: PixelsOrPercentage | "pixi";
-    private _height: PixelsOrPercentage | "pixi";
+    private _width: YogaSize;
+    private _height: YogaSize;
     private _cachedLayout: ComputedLayout | undefined;
     private _lastRecalculationDuration = 0;
     private _needUpdateAsRoot: boolean = false;
@@ -55,6 +56,7 @@ export class YogaLayout {
         })
 
         pixiObject.on(YogaLayout.NEED_LAYOUT_UPDATE as any, () => {
+            // size change of this element wont change size/positions of its parent, so there is no need to update whole tree
             if (!this.parent || (this.hasContantDeclaredSize && this.parent.width !== "auto" && this.parent.height !== "auto")) {
                 this._needUpdateAsRoot = true;
             } else {
@@ -157,18 +159,6 @@ export class YogaLayout {
                 this._cachedLayout.height = Math.round(parseFloat(this._height as string) / 100 * this.parent.calculatedHeight)
             }
 
-            if (this.position === "absolute" && this.parent) {
-                this._cachedLayout.left = this.node.getComputedMargin(Yoga.EDGE_LEFT);
-                this._cachedLayout.top = this.node.getComputedMargin(Yoga.EDGE_TOP)
-            }
-
-
-            // YOGA FIX for padding
-            // this._cachedLayout.width += this.node.getComputedPadding(Yoga.EDGE_LEFT);
-            // this._cachedLayout.height += this.node.getComputedPadding(Yoga.EDGE_TOP);
-            // this._cachedLayout.left -= this.node.getComputedPadding(Yoga.EDGE_LEFT);
-            // this._cachedLayout.top -= this.node.getComputedPadding(Yoga.EDGE_TOP);
-
             // YOGA FIX for not working aspect ratio https://github.com/facebook/yoga/issues/677
             if (this._aspectRatio) {
                 const newHeight = this.calculatedWidth / this._aspectRatio;
@@ -208,27 +198,27 @@ export class YogaLayout {
         return this._cachedLayout ? this._cachedLayout.height : this.node.getComputedHeight();
     }
 
-    public set width(value: PixelsOrPercentage) {
+    public set width(value: YogaSize) {
         this._width = value;
         if (value !== "pixi") {
             this.node.setWidth(value);
         }
         this.requestLayoutUpdate();
     }
 
-    public get width(): PixelsOrPercentage {
+    public get width(): YogaSize {
         return this._parseValue(this.node.getWidth());
     }
 
-    public set height(value: PixelsOrPercentage) {
+    public set height(value: YogaSize) {
         this._height = value;
         if (value !== "pixi") {
             this.node.setHeight(value);
         }
         this.requestLayoutUpdate();
     }
 
-    public get height(): PixelsOrPercentage {
+    public get height(): YogaSize {
         return this._parseValue(this.node.getHeight());
     }
 

src/containerPolyfill.ts

@@ -112,8 +112,8 @@ export function applyContainerPolyfill() {
                 const removed = this.children.slice(begin, range);
                 removed.forEach(child => this.yoga.removeChild(child.yoga))
             }
+            this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
         }
-        this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
         return removeChildren.call(this, beginIndex, endIndex) as any;
     }
 

src/displayObjectPolyfill.ts

@@ -1,6 +1,7 @@
 import { DisplayObject } from "pixi.js";
 import { YogaLayout } from "./YogaLayout";
-import { YogaConstants } from "./YogaContants";
+import TransformStatic = PIXI.TransformStatic;
+
 const NineSlicePlane = (<any>PIXI).NineSlicePlane || (<any>PIXI).mesh.NineSlicePlane;
 
 declare module "pixi.js" {
@@ -12,8 +13,14 @@ declare module "pixi.js" {
 
         checkIfBoundingBoxChanged(): void;
     }
+
+    interface DisplayObject {
+        _yogaLayoutHash: number;
+        _prevYogaLayoutHash: number;
+    }
 }
 
+
 export function applyDisplayObjectPolyfill() {
 
     Object.defineProperty(DisplayObject.prototype, "yoga", {
@@ -52,13 +59,14 @@ export function applyDisplayObjectPolyfill() {
     }
 
     DisplayObject.prototype.checkIfBoundingBoxChanged = function (this: DisplayObject) {
-        if (this instanceof PIXI.Text) {
+        if ((this as any).updateText) {
             (this as any).updateText(true);
         }
 
         this.yoga.children.forEach(child => {
             child.target.checkIfBoundingBoxChanged();
         })
+
         const texture: PIXI.Texture = (this as any)._texture;
         const bounds = (this as any)._boundsRect;
 
@@ -69,15 +77,15 @@ export function applyDisplayObjectPolyfill() {
             if (!this.yoga.rescaleToYoga && this instanceof NineSlicePlane) {
                 tw = (<any>this).width;
                 th = (<any>this).height;
-            }
-            if (this.yoga.rescaleToYoga && (this instanceof PIXI.Text || this instanceof PIXI.Sprite)) {
+            } else if (this.yoga.rescaleToYoga && (this instanceof PIXI.Text || this instanceof PIXI.Sprite)) {
                 this.yoga.aspectRatio = (texture.orig.width / texture.orig.height)
             }
-            (this as any).__layoutHash = tw * 0.12498 + th * 121;
-            if ((this as any).__layoutHash !== (this as any).__oldHash) {
+
+            this._yogaLayoutHash = tw * 0.12498 + th * 4121;
+            if (this._yogaLayoutHash !== this._prevYogaLayoutHash) {
                 this.emit(YogaLayout.NEED_LAYOUT_UPDATE);
             }
-            (this as any).__oldHash = (this as any).__layoutHash;
+            this._prevYogaLayoutHash = this._yogaLayoutHash;
 
             this.yoga.isWidthCalculatedFromPixi && this.yoga.node.setWidth(tw);
             this.yoga.isHeightCalculatedFromPixi && this.yoga.node.setHeight(th);
@@ -92,13 +100,12 @@ export function applyDisplayObjectPolyfill() {
         this.yoga.update();
         const layout = this.yoga.computedLayout;
 
-        (<any>this.transform).position.x = layout.left;
-        (<any>this.transform).position.y = layout.top;
+        (this.transform as TransformStatic).position.x = layout.left;
+        (this.transform as TransformStatic).position.y = layout.top;
 
-        const texture: PIXI.Texture = (this as any)._texture;
         if (this.yoga.rescaleToYoga) {
-            ((<any>this).width = layout.width);
-            ((<any>this).height = layout.height);
+            (<any>this).width = layout.width;
+            (<any>this).height = layout.height;
         }
 
         this.yoga.children.forEach(child => {