phosphor-splitpanel - npm Package Compare versions

Comparing version 0.9.1 to 0.9.2

lib/index.d.ts

@@ -209,9 +209,9 @@ import { Message } from 'phosphor-messaging';
     /**
-     * Update the split items and size constraints of the panel.
+     * Update the size constraints of the panel.
      */
     private _setupGeometry();
     /**
-     * Layout the items using the given offset width and height.
+     * Layout the children using the given offset width and height.
      */
-    private _layoutItems(offsetWidth, offsetHeight);
+    private _layoutChildren(offsetWidth, offsetHeight);
     /**
@@ -252,4 +252,3 @@ * Handle the `'mousedown'` event for the split panel.
     private _sizers;
-    private _items;
     private _pressData;
 }

lib/index.js

@@ -73,3 +73,2 @@ /*-----------------------------------------------------------------------------
         this._sizers = [];
-        this._items = [];
         this._pressData = null;
@@ -110,3 +109,2 @@ this.addClass(exports.SPLIT_PANEL_CLASS);
         this._releaseMouse();
-        this._items.length = 0;
         this._sizers.length = 0;
@@ -222,8 +220,6 @@ _super.prototype.dispose.call(this);
         phosphor_properties_1.Property.getChanged(msg.child).connect(this._onPropertyChanged, this);
-        var item = createItem(msg.child, this.orientation);
         var sizer = createSizer(averageSize(this._sizers));
-        arrays.insert(this._items, msg.currentIndex, item);
         arrays.insert(this._sizers, msg.currentIndex, sizer);
-        this.node.appendChild(item.widget.node);
-        this.node.appendChild(item.handle.node);
+        this.node.appendChild(msg.child.node);
+        this.node.appendChild(getHandle(msg.child).node);
         if (this.isAttached)
@@ -238,9 +234,9 @@ phosphor_messaging_1.sendMessage(msg.child, phosphor_widget_1.MSG_AFTER_ATTACH);
         phosphor_properties_1.Property.getChanged(msg.child).disconnect(this._onPropertyChanged, this);
-        var item = arrays.removeAt(this._items, msg.previousIndex);
         arrays.removeAt(this._sizers, msg.previousIndex);
         if (this.isAttached)
             phosphor_messaging_1.sendMessage(msg.child, phosphor_widget_1.MSG_BEFORE_DETACH);
-        this.node.removeChild(item.widget.node);
-        this.node.removeChild(item.handle.node);
+        this.node.removeChild(msg.child.node);
+        this.node.removeChild(getHandle(msg.child).node);
         phosphor_messaging_1.postMessage(this, phosphor_widget_1.MSG_LAYOUT_REQUEST);
+        phosphor_widget_1.clearLayoutGeometry(msg.child);
     };
@@ -251,3 +247,2 @@ /**
     SplitPanel.prototype.onChildMoved = function (msg) {
-        arrays.move(this._items, msg.previousIndex, msg.currentIndex);
         arrays.move(this._sizers, msg.previousIndex, msg.currentIndex);
@@ -292,5 +287,12 @@ phosphor_messaging_1.postMessage(this, phosphor_widget_1.MSG_LAYOUT_REQUEST);
         if (this.isVisible) {
-            var width = msg.width < 0 ? this.node.offsetWidth : msg.width;
-            var height = msg.height < 0 ? this.node.offsetHeight : msg.height;
-            this._layoutItems(width, height);
+            var width = msg.width;
+            var height = msg.height;
+            if (width < 0 || height < 0) {
+                var geo = phosphor_widget_1.getLayoutGeometry(this);
+                if (width < 0)
+                    width = geo ? geo.width : this.node.offsetWidth;
+                if (height < 0)
+                    height = geo ? geo.height : this.node.offsetHeight;
+            }
+            this._layoutChildren(width, height);
         }
@@ -303,3 +305,6 @@ };
         if (this.isVisible) {
-            this._layoutItems(this.node.offsetWidth, this.node.offsetHeight);
+            var geo = phosphor_widget_1.getLayoutGeometry(this);
+            var width = geo ? geo.width : this.node.offsetWidth;
+            var height = geo ? geo.height : this.node.offsetHeight;
+            this._layoutChildren(width, height);
         }
@@ -316,15 +321,16 @@ };
     /**
-     * Update the split items and size constraints of the panel.
+     * Update the size constraints of the panel.
      */
     SplitPanel.prototype._setupGeometry = function () {
-        // Update the handles and track the visible item count.
+        // Update the handles and track the visible widget count.
         var visibleCount = 0;
         var orientation = this.orientation;
-        var lastVisibleItem = null;
-        for (var i = 0, n = this._items.length; i < n; ++i) {
-            var item = this._items[i];
-            item.handle.hidden = item.widget.hidden;
-            item.handle.orientation = orientation;
-            if (!item.widget.hidden) {
-                lastVisibleItem = item;
+        var lastVisibleHandle = null;
+        for (var i = 0, n = this.childCount; i < n; ++i) {
+            var widget = this.childAt(i);
+            var handle = getHandle(widget);
+            handle.hidden = widget.hidden;
+            handle.orientation = orientation;
+            if (!handle.hidden) {
+                lastVisibleHandle = handle;
                 visibleCount++;
@@ -334,4 +340,4 @@ }
         // Hide the last visible handle and update the fixed space.
-        if (lastVisibleItem)
-            lastVisibleItem.handle.hidden = true;
+        if (lastVisibleHandle)
+            lastVisibleHandle.hidden = true;
         this._fixedSpace = this.handleSize * Math.max(0, visibleCount - 1);
@@ -346,4 +352,4 @@ // Compute new size constraints for the split panel.
             maxW = visibleCount > 0 ? minW : maxW;
-            for (var i = 0, n = this._items.length; i < n; ++i) {
-                var item = this._items[i];
+            for (var i = 0, n = this.childCount; i < n; ++i) {
+                var widget = this.childAt(i);
                 var sizer = this._sizers[i];
@@ -353,3 +359,3 @@ if (sizer.size > 0) {
                 }
-                if (item.widget.hidden) {
+                if (widget.hidden) {
                     sizer.minSize = 0;
@@ -359,4 +365,4 @@ sizer.maxSize = 0;
                 }
-                var limits = phosphor_domutil_1.sizeLimits(item.widget.node);
-                sizer.stretch = SplitPanel.getStretch(item.widget);
+                var limits = phosphor_domutil_1.sizeLimits(widget.node);
+                sizer.stretch = SplitPanel.getStretch(widget);
                 sizer.minSize = limits.minWidth;
@@ -373,4 +379,4 @@ sizer.maxSize = limits.maxWidth;
             maxH = visibleCount > 0 ? minH : maxH;
-            for (var i = 0, n = this._items.length; i < n; ++i) {
-                var item = this._items[i];
+            for (var i = 0, n = this.childCount; i < n; ++i) {
+                var widget = this.childAt(i);
                 var sizer = this._sizers[i];
@@ -380,3 +386,3 @@ if (sizer.size > 0) {
                 }
-                if (item.widget.hidden) {
+                if (widget.hidden) {
                     sizer.minSize = 0;
@@ -386,4 +392,4 @@ sizer.maxSize = 0;
                 }
-                var limits = phosphor_domutil_1.sizeLimits(item.widget.node);
-                sizer.stretch = SplitPanel.getStretch(item.widget);
+                var limits = phosphor_domutil_1.sizeLimits(widget.node);
+                sizer.stretch = SplitPanel.getStretch(widget);
                 sizer.minSize = limits.minHeight;
@@ -416,7 +422,7 @@ sizer.maxSize = limits.maxHeight;
     /**
-     * Layout the items using the given offset width and height.
+     * Layout the children using the given offset width and height.
      */
-    SplitPanel.prototype._layoutItems = function (offsetWidth, offsetHeight) {
-        // Bail early if their are no items to arrange.
-        if (this._items.length === 0) {
+    SplitPanel.prototype._layoutChildren = function (offsetWidth, offsetHeight) {
+        // Bail early if their are no children to arrange.
+        if (this.childCount === 0) {
             return;
@@ -435,10 +441,14 @@ }
             phosphor_boxengine_1.boxCalc(this._sizers, Math.max(0, width - this._fixedSpace));
-            for (var i = 0, n = this._items.length; i < n; ++i) {
-                var item = this._items[i];
-                if (item.widget.hidden) {
+            for (var i = 0, n = this.childCount; i < n; ++i) {
+                var widget = this.childAt(i);
+                if (widget.hidden) {
                     continue;
                 }
                 var size = this._sizers[i].size;
-                item.layoutWidget(left, top, size, height);
-                item.layoutHandle(left + size, top, handleSize, height);
+                var hStyle = getHandle(widget).node.style;
+                phosphor_widget_1.setLayoutGeometry(widget, left, top, size, height);
+                hStyle.top = top + 'px';
+                hStyle.left = left + size + 'px';
+                hStyle.width = handleSize + 'px';
+                hStyle.height = height + 'px';
                 left += size + handleSize;
@@ -449,10 +459,14 @@ }
             phosphor_boxengine_1.boxCalc(this._sizers, Math.max(0, height - this._fixedSpace));
-            for (var i = 0, n = this._items.length; i < n; ++i) {
-                var item = this._items[i];
-                if (item.widget.hidden) {
+            for (var i = 0, n = this.childCount; i < n; ++i) {
+                var widget = this.childAt(i);
+                if (widget.hidden) {
                     continue;
                 }
                 var size = this._sizers[i].size;
-                item.layoutWidget(left, top, width, size);
-                item.layoutHandle(left, top + size, width, handleSize);
+                var hStyle = getHandle(widget).node.style;
+                phosphor_widget_1.setLayoutGeometry(widget, left, top, width, size);
+                hStyle.top = top + size + 'px';
+                hStyle.left = left + 'px';
+                hStyle.width = width + 'px';
+                hStyle.height = handleSize + 'px';
                 top += size + handleSize;
@@ -478,3 +492,3 @@ }
         var delta;
-        var node = this._items[index].handle.node;
+        var node = getHandle(this.childAt(index)).node;
         if (this.orientation === Orientation.Horizontal) {
@@ -534,13 +548,17 @@ delta = event.clientX - node.getBoundingClientRect().left;
         // Bail if the handle is invalid or hidden.
-        var item = this._items[index];
-        if (!item || item.handle.hidden) {
+        var widget = this.childAt(index);
+        if (!widget) {
             return;
         }
+        var handle = getHandle(widget);
+        if (handle.hidden) {
+            return;
+        }
         // Compute the delta movement for the handle.
         var delta;
         if (this.orientation === Orientation.Horizontal) {
-            delta = pos - item.handle.node.offsetLeft;
+            delta = pos - handle.node.offsetLeft;
         }
         else {
-            delta = pos - item.handle.node.offsetTop;
+            delta = pos - handle.node.offsetTop;
         }
@@ -553,5 +571,4 @@ if (delta === 0) {
             var sizer = this._sizers[i];
-            if (sizer.size > 0) {
+            if (sizer.size > 0)
                 sizer.sizeHint = sizer.size;
-            }
         }
@@ -576,4 +593,5 @@ // Adjust the sizers to reflect the movement.
     SplitPanel.prototype._findHandleIndex = function (target) {
-        for (var i = 0, n = this._items.length; i < n; ++i) {
-            if (this._items[i].handle.node.contains(target))
+        for (var i = 0, n = this.childCount; i < n; ++i) {
+            var handle = getHandle(this.childAt(i));
+            if (handle.node.contains(target))
                 return i;
@@ -656,8 +674,8 @@ }
      */
-    function SplitHandle(orientation) {
+    function SplitHandle() {
         _super.call(this);
         this._hidden = false;
-        this._orientation = void 0;
+        this._orientation = Orientation.Horizontal;
         this.addClass(exports.SPLIT_HANDLE_CLASS);
-        this.orientation = orientation;
+        this.addClass(exports.HORIZONTAL_CLASS);
     }
@@ -718,96 +736,12 @@ /**
 /**
- * A class which assists with the layout of a widget and split handle.
+ * A private attached property for the split handle for a widget.
  */
-var SplitItem = (function () {
-    /**
-     * Construct a new split item.
-     */
-    function SplitItem(widget, handle) {
-        this._top = NaN;
-        this._left = NaN;
-        this._width = NaN;
-        this._height = NaN;
-        this._handleTop = NaN;
-        this._handleLeft = NaN;
-        this._handleWidth = NaN;
-        this._handleHeight = NaN;
-        this._widget = widget;
-        this._handle = handle;
-    }
-    Object.defineProperty(SplitItem.prototype, "widget", {
-        /**
-         * Get the widget for the item.
-         */
-        get: function () {
-            return this._widget;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(SplitItem.prototype, "handle", {
-        /**
-         * Get the split handle for the item.
-         */
-        get: function () {
-            return this._handle;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    /**
-     * Update the layout geometry for the widget.
-     */
-    SplitItem.prototype.layoutWidget = function (left, top, width, height) {
-        var resized = false;
-        var style = this._widget.node.style;
-        if (left !== this._left) {
-            this._left = left;
-            style.left = left + 'px';
-        }
-        if (top !== this._top) {
-            this._top = top;
-            style.top = top + 'px';
-        }
-        if (width !== this._width) {
-            resized = true;
-            this._width = width;
-            style.width = width + 'px';
-        }
-        if (height !== this._height) {
-            resized = true;
-            this._height = height;
-            style.height = height + 'px';
-        }
-        if (resized)
-            phosphor_messaging_1.sendMessage(this._widget, new phosphor_widget_1.ResizeMessage(width, height));
-    };
-    /**
-     * Update the layout geometry for the handle.
-     */
-    SplitItem.prototype.layoutHandle = function (left, top, width, height) {
-        var style = this._handle.node.style;
-        if (left !== this._handleLeft) {
-            this._handleLeft = left;
-            style.left = left + 'px';
-        }
-        if (top !== this._handleTop) {
-            this._handleTop = top;
-            style.top = top + 'px';
-        }
-        if (width !== this._handleWidth) {
-            this._handleWidth = width;
-            style.width = width + 'px';
-        }
-        if (height !== this._handleHeight) {
-            this._handleHeight = height;
-            style.height = height + 'px';
-        }
-    };
-    return SplitItem;
-})();
+var splitHandleProperty = new phosphor_properties_1.Property({
+    create: function (owner) { return new SplitHandle(); },
+});
 /**
- * Create a new split item with the given widget and orientation.
+ * Lookup the split handle for the given widget.
  */
-function createItem(widget, orientation) {
-    return new SplitItem(widget, new SplitHandle(orientation));
+function getHandle(widget) {
+    return splitHandleProperty.get(widget);
 }
@@ -814,0 +748,0 @@ /**

package.json

 {
   "name": "phosphor-splitpanel",
-  "version": "0.9.1",
+  "version": "0.9.2",
   "description": "A Phosphor layout widget which arranges its children into resizable sections.",
@@ -15,3 +15,3 @@ "main": "lib/index.js",
     "phosphor-properties": "^1.1.0",
-    "phosphor-widget": "^0.9.5"
+    "phosphor-widget": "^0.9.6"
   },
@@ -18,0 +18,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

45385

decreased by-3.93%

Lines of code

1145

decreased by-5.53%

Dependency changes

• Updatedphosphor-widget@^0.9.6