Perf fix

gui/src/2D/controls/container.ts

@@ -316,7 +316,7 @@ export class Container extends Control {
         }
         while (this._rebuildLayout && rebuildCount < 3);
 
-        if (rebuildCount > 3) {
+        if (rebuildCount >= 3) {
             BABYLON.Tools.Error(`Layout cycle detected in GUI (Container uniqueId=${this.uniqueId})`);
         }
 
@@ -335,6 +335,10 @@ export class Container extends Control {
     public _draw(context: CanvasRenderingContext2D): void {
 
         this._localDraw(context);
+       
+        if (this.clipChildren) {
+            this._clipForChildren(context);
+        }
 
         for (var child of this._children) {
             child._render(context);

gui/src/2D/controls/control.ts

@@ -850,6 +850,23 @@ export class Control {
         return "Control";
     }
 
+    /**
+     * Gets the first ascendant in the hierarchy of the given type
+     * @param className defines the required type
+     * @returns the ascendant or null if not found
+     */
+    public getAscendantOfClass(className: string): Nullable<Control> {
+        if (!this.parent) {
+            return null;
+        }
+
+        if (this.parent.getClassName() === className) {
+            return this.parent;
+        }
+
+        return this.parent.getAscendantOfClass(className);
+    }
+
     /** @hidden */
     public _resetFontCache(): void {
         this._fontSet = true;
@@ -1336,7 +1353,6 @@ export class Control {
         }
 
         context.clip();
-        this._clipForChildren(context);
     }
 
     /** @hidden */

gui/src/2D/controls/scrollViewers/scrollViewer.ts

@@ -148,8 +148,8 @@ export class ScrollViewer extends Rectangle {
         });
 
         this._dragSpace = new Rectangle();
-        this._dragSpace.thickness = 2;
-        this._grid.addControl(this._dragSpace, 1, 1);        
+        this._dragSpace.thickness = 1;
+        this._grid.addControl(this._dragSpace, 1, 1);
 
         // Colors
         this.barColor = "grey";
@@ -223,7 +223,6 @@ export class ScrollViewer extends Rectangle {
         this._barColor = color;
         this._horizontalBar.color = color;
         this._verticalBar.color = color;
-        this._dragSpace.background = color;
     }
 
     /** Gets or sets the size of the bar */
@@ -275,6 +274,7 @@ export class ScrollViewer extends Rectangle {
         this._barBackground = color;
         this._horizontalBar.background = color;
         this._verticalBar.background = color;
+        this._dragSpace.background = color;
     }
 
     /** @hidden */

gui/src/2D/controls/scrollViewers/scrollViewerWindow.ts

@@ -29,8 +29,8 @@ export class _ScrollViewerWindow extends Container {
         this._measureForChildren.left = this._currentMeasure.left;
         this._measureForChildren.top = this._currentMeasure.top;
 
-        this._measureForChildren.width = this._currentMeasure.width;
-        this._measureForChildren.height = this._currentMeasure.height;
+        this._measureForChildren.width = parentMeasure.width;
+        this._measureForChildren.height = parentMeasure.height;
     }
 
     protected _postMeasure(): void {
@@ -41,8 +41,16 @@ export class _ScrollViewerWindow extends Container {
                 continue;
             }
 
-            maxWidth = Math.max(maxWidth, child._currentMeasure.width);
-            maxHeight = Math.max(maxHeight, child._currentMeasure.height);
+            if (child._currentMeasure.left  < 0) {
+                child._currentMeasure.left = this._currentMeasure.left;
+            }
+
+            if (child._currentMeasure.top  < 0) {
+                child._currentMeasure.top = this._currentMeasure.top;
+            }
+
+            maxWidth = Math.max(maxWidth, child._currentMeasure.left - this._currentMeasure.left + child._currentMeasure.width);
+            maxHeight = Math.max(maxHeight, child._currentMeasure.top - this._currentMeasure.top +  child._currentMeasure.height);
         }
 
         if (this._currentMeasure.width !== maxWidth) {
@@ -50,6 +58,7 @@ export class _ScrollViewerWindow extends Container {
             this._currentMeasure.width = maxWidth;
             this._rebuildLayout = true;
             this._isDirty = true;
+            console.log(maxWidth);
         }
 
         if (this._currentMeasure.height !== maxHeight) {

gui/src/2D/controls/sliders/baseSlider.ts

@@ -158,7 +158,7 @@ export class BaseSlider extends Control {
         this._isThumbClamped = value;
         this._markAsDirty();
     }
-    
+
     /**
      * Creates a new BaseSlider
      * @param name defines the control name

gui/src/2D/controls/sliders/imageBasedSlider.ts

@@ -153,7 +153,7 @@ export class ImageBasedSlider extends BaseSlider {
             } else {
                 this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
             }
-            
+
             this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
             this._thumbImage._draw(context);
         }

gui/src/2D/controls/sliders/scrollBar.ts

@@ -85,11 +85,11 @@ export class ScrollBar extends BaseSlider {
         // Value bar
         context.fillStyle = this.color;
 
-        // Thumb        
+        // Thumb
         if (this.isVertical) {
             this._thumbMeasure.left = left - this._effectiveBarOffset;
             this._thumbMeasure.top = this._currentMeasure.top + thumbPosition;
-            this._thumbMeasure.width = this._currentMeasure.width;            
+            this._thumbMeasure.width = this._currentMeasure.width;
             this._thumbMeasure.height = this._effectiveThumbThickness;
         }
         else {
@@ -98,7 +98,7 @@ export class ScrollBar extends BaseSlider {
             this._thumbMeasure.width = this._effectiveThumbThickness;
             this._thumbMeasure.height = this._currentMeasure.height;
         }
-        
+
         context.fillRect(this._thumbMeasure.left, this._thumbMeasure.top, this._thumbMeasure.width , this._thumbMeasure.height);
 
         context.restore();
@@ -144,12 +144,12 @@ export class ScrollBar extends BaseSlider {
         this.value += delta * (this.maximum - this.minimum);
 
         this._originX = x;
-        this._originY = y;        
+        this._originY = y;
     }
 
     public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean {
         this._first = true;
 
         return super._onPointerDown(target, coordinates, pointerId, buttonIndex);
-    }  
+    }
 }

gui/src/2D/controls/stackPanel.ts

@@ -98,8 +98,15 @@ export class StackPanel extends Container {
         super._additionalProcessing(parentMeasure, context);
 
         this._measureForChildren.copyFrom(parentMeasure);
+
         this._measureForChildren.left = this._currentMeasure.left;
         this._measureForChildren.top = this._currentMeasure.top;
+
+        if (this.isVertical) {
+            this._measureForChildren.width = this._currentMeasure.width;
+        } else {
+            this._measureForChildren.height = this._currentMeasure.height;
+        }
     }
 
     protected _postMeasure(): void {
@@ -116,7 +123,7 @@ export class StackPanel extends Container {
                     child._markAsDirty();
                 }
                 child._top.ignoreAdaptiveScaling = true;
-                stackHeight += child._currentMeasure.height;
+                stackHeight += child._currentMeasure.height + child.paddingTopInPixels;
                 if (child._currentMeasure.width > stackWidth) {
                     stackWidth = child._currentMeasure.width;
                 }
@@ -126,7 +133,7 @@ export class StackPanel extends Container {
                     child._markAsDirty();
                 }
                 child._left.ignoreAdaptiveScaling = true;
-                stackWidth += child._currentMeasure.width;
+                stackWidth += child._currentMeasure.width + child.paddingLeftInPixels;
                 if (child._currentMeasure.height > stackHeight) {
                     stackHeight = child._currentMeasure.height;
                 }

inspector/src/components/sceneExplorer/entities/gui/advancedDynamicTextureTreeItemComponent.tsx

@@ -44,6 +44,11 @@ export class AdvancedDynamicTextureTreeItemComponent extends React.Component<IAd
                 if (!this.props.onSelectionChangedObservable) {
                     return;
                 }
+
+                if (control.getClassName() === "ScrollViewerWindow") {
+                    control = control.getAscendantOfClass("ScrollViewer")!;
+                }
+
                 this.props.onSelectionChangedObservable.notifyObservers(control);
             });
         }