phosphor-splitpanel - npm Package Compare versions

Comparing version 0.9.9 to 1.0.0-beta

lib/index.d.ts

 import { Message } from 'phosphor-messaging';
 import { Property } from 'phosphor-properties';
-import { ChildMessage, ResizeMessage, Widget } from 'phosphor-widget';
+import { ChildMessage, Panel, ResizeMessage, Widget } from 'phosphor-widget';
 /**
@@ -18,5 +18,5 @@ * The layout orientation of a split panel.
 /**
- * A widget which arranges its children into resizable sections.
+ * A panel which arranges its children into resizable sections.
  */
-export declare class SplitPanel extends Widget {
+export declare class SplitPanel extends Panel {
     /**
@@ -146,2 +146,6 @@ * A convenience alias of the `Horizontal` [[Orientation]].
     /**
+     * A message handler invoked on a `'child-moved'` message.
+     */
+    protected onChildMoved(msg: ChildMessage): void;
+    /**
      * A message handler invoked on a `'child-removed'` message.
@@ -151,6 +155,2 @@ */
     /**
-     * A message handler invoked on a `'child-moved'` message.
-     */
-    protected onChildMoved(msg: ChildMessage): void;
-    /**
      * A message handler invoked on an `'after-show'` message.
@@ -200,2 +200,6 @@ */
     /**
+     * Handle the `'mousemove'` event for the split panel.
+     */
+    private _evtMouseMove(event);
+    /**
      * Handle the `'mouseup'` event for the split panel.
@@ -205,6 +209,2 @@ */
     /**
-     * Handle the `'mousemove'` event for the split panel.
-     */
-    private _evtMouseMove(event);
-    /**
      * Release the mouse grab for the split panel.
@@ -218,6 +218,2 @@ */
     /**
-     * Find the index of the split handle which contains the given target.
-     */
-    private _findHandleIndex(target);
-    /**
      * The change handler for the [[orientationProperty]].
@@ -224,0 +220,0 @@ */

lib/index.js

@@ -61,3 +61,3 @@ /*-----------------------------------------------------------------------------
 /**
- * A widget which arranges its children into resizable sections.
+ * A panel which arranges its children into resizable sections.
  */
@@ -151,4 +151,4 @@ var SplitPanel = (function (_super) {
          */
-        set: function (size) {
-            SplitPanel.spacingProperty.set(this, size);
+        set: function (value) {
+            SplitPanel.spacingProperty.set(this, value);
         },
@@ -184,3 +184,3 @@ enumerable: true,
         this._pendingSizes = true;
-        this.update();
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgUpdateRequest);
     };
@@ -202,8 +202,8 @@ /**
                 break;
+            case 'mousemove':
+                this._evtMouseMove(event);
+                break;
             case 'mouseup':
                 this._evtMouseUp(event);
                 break;
-            case 'mousemove':
-                this._evtMouseMove(event);
-                break;
         }
@@ -221,5 +221,12 @@ };
             phosphor_messaging_1.sendMessage(msg.child, phosphor_widget_1.Widget.MsgAfterAttach);
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
     };
     /**
+     * A message handler invoked on a `'child-moved'` message.
+     */
+    SplitPanel.prototype.onChildMoved = function (msg) {
+        arrays.move(this._sizers, msg.previousIndex, msg.currentIndex);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
+    };
+    /**
      * A message handler invoked on a `'child-removed'` message.
@@ -233,17 +240,11 @@ */
         this.node.removeChild(getHandle(msg.child).node);
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
         resetGeometry(msg.child);
     };
     /**
-     * A message handler invoked on a `'child-moved'` message.
-     */
-    SplitPanel.prototype.onChildMoved = function (msg) {
-        arrays.move(this._sizers, msg.previousIndex, msg.currentIndex);
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
-    };
-    /**
      * A message handler invoked on an `'after-show'` message.
      */
     SplitPanel.prototype.onAfterShow = function (msg) {
-        this.update(true);
+        _super.prototype.onAfterShow.call(this, msg);
+        phosphor_messaging_1.sendMessage(this, phosphor_widget_1.Widget.MsgUpdateRequest);
     };
@@ -254,4 +255,5 @@ /**
     SplitPanel.prototype.onAfterAttach = function (msg) {
+        _super.prototype.onAfterAttach.call(this, msg);
         this.node.addEventListener('mousedown', this);
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
     };
@@ -262,2 +264,3 @@ /**
     SplitPanel.prototype.onBeforeDetach = function (msg) {
+        _super.prototype.onBeforeDetach.call(this, msg);
         this.node.removeEventListener('mousedown', this);
@@ -269,3 +272,3 @@ };
     SplitPanel.prototype.onChildShown = function (msg) {
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
     };
@@ -276,3 +279,3 @@ /**
     SplitPanel.prototype.onChildHidden = function (msg) {
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
     };
@@ -311,6 +314,7 @@ /**
         var visibleCount = 0;
+        var children = this.children;
         var orientation = this.orientation;
         var lastVisibleHandle = null;
-        for (var i = 0, n = this.childCount; i < n; ++i) {
-            var widget = this.childAt(i);
+        for (var i = 0, n = children.length; i < n; ++i) {
+            var widget = children.get(i);
             var handle = getHandle(widget);
@@ -336,4 +340,4 @@ handle.hidden = widget.hidden;
             maxW = visibleCount > 0 ? minW : maxW;
-            for (var i = 0, n = this.childCount; i < n; ++i) {
-                var widget = this.childAt(i);
+            for (var i = 0, n = children.length; i < n; ++i) {
+                var widget = children.get(i);
                 var sizer = this._sizers[i];
@@ -361,4 +365,4 @@ if (sizer.size > 0) {
             maxH = visibleCount > 0 ? minH : maxH;
-            for (var i = 0, n = this.childCount; i < n; ++i) {
-                var widget = this.childAt(i);
+            for (var i = 0, n = children.length; i < n; ++i) {
+                var widget = children.get(i);
                 var sizer = this._sizers[i];
@@ -397,5 +401,5 @@ if (sizer.size > 0) {
         if (this.parent)
-            phosphor_messaging_1.sendMessage(this.parent, phosphor_widget_1.Widget.MsgLayoutRequest);
+            phosphor_messaging_1.sendMessage(this.parent, phosphor_widget_1.Panel.MsgLayoutRequest);
         // Update the layout for the child widgets.
-        this.update(true);
+        phosphor_messaging_1.sendMessage(this, phosphor_widget_1.Widget.MsgUpdateRequest);
     };
@@ -407,3 +411,4 @@ /**
         // Bail early if their are no children to arrange.
-        if (this.childCount === 0) {
+        var children = this.children;
+        if (children.length === 0) {
             return;
@@ -433,4 +438,4 @@ }
             phosphor_boxengine_1.boxCalc(this._sizers, Math.max(0, width - this._fixedSpace));
-            for (var i = 0, n = this.childCount; i < n; ++i) {
-                var widget = this.childAt(i);
+            for (var i = 0, n = children.length; i < n; ++i) {
+                var widget = children.get(i);
                 if (widget.hidden) {
@@ -440,8 +445,4 @@ continue;
                 var size = this._sizers[i].size;
-                var hStyle = getHandle(widget).node.style;
                 setGeometry(widget, left, top, size, height);
-                hStyle.top = top + 'px';
-                hStyle.left = left + size + 'px';
-                hStyle.width = spacing + 'px';
-                hStyle.height = height + 'px';
+                getHandle(widget).setGeometry(left + size, top, spacing, height);
                 left += size + spacing;
@@ -452,4 +453,4 @@ }
             phosphor_boxengine_1.boxCalc(this._sizers, Math.max(0, height - this._fixedSpace));
-            for (var i = 0, n = this.childCount; i < n; ++i) {
-                var widget = this.childAt(i);
+            for (var i = 0, n = children.length; i < n; ++i) {
+                var widget = children.get(i);
                 if (widget.hidden) {
@@ -459,8 +460,4 @@ continue;
                 var size = this._sizers[i].size;
-                var hStyle = getHandle(widget).node.style;
                 setGeometry(widget, left, top, width, size);
-                hStyle.top = top + size + 'px';
-                hStyle.left = left + 'px';
-                hStyle.width = width + 'px';
-                hStyle.height = spacing + 'px';
+                getHandle(widget).setGeometry(left, top + size, width, spacing);
                 top += size + spacing;
@@ -477,3 +474,3 @@ }
         }
-        var index = this._findHandleIndex(event.target);
+        var index = findHandleIndex(this, event.target);
         if (index === -1) {
@@ -487,3 +484,3 @@ return;
         var delta;
-        var node = getHandle(this.childAt(index)).node;
+        var node = getHandle(this.children.get(index)).node;
         if (this.orientation === Orientation.Horizontal) {
@@ -499,13 +496,2 @@ delta = event.clientX - node.getBoundingClientRect().left;
     /**
-     * Handle the `'mouseup'` event for the split panel.
-     */
-    SplitPanel.prototype._evtMouseUp = function (event) {
-        if (event.button !== 0) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this._releaseMouse();
-    };
-    /**
      * Handle the `'mousemove'` event for the split panel.
@@ -528,2 +514,13 @@ */
     /**
+     * Handle the `'mouseup'` event for the split panel.
+     */
+    SplitPanel.prototype._evtMouseUp = function (event) {
+        if (event.button !== 0) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this._releaseMouse();
+    };
+    /**
      * Release the mouse grab for the split panel.
@@ -544,7 +541,8 @@ */
     SplitPanel.prototype._moveHandle = function (index, pos) {
-        // Bail if the handle is invalid or hidden.
-        var widget = this.childAt(index);
+        // Bail if the index is invalid.
+        var widget = this.children.get(index);
         if (!widget) {
             return;
         }
+        // Bail if the handle is hidden.
         var handle = getHandle(widget);
@@ -562,2 +560,3 @@ if (handle.hidden) {
         }
+        // Bail if there is no handle movement.
         if (delta === 0) {
@@ -579,21 +578,10 @@ return;
         }
-        // Update the layout of the widget items. The message is posted
-        // instead of sent because the mouse move event frequency can
-        // outpace the browser's ability to layout, leading to choppy
-        // handle movement, especially on IE. Posting ensures we don't
-        // try to layout faster than the browser can handle.
-        this.update();
+        // Update the layout of the widgets. The message is posted instead
+        // of sent because the mouse move event frequency can outpace the
+        // browser's ability to layout, leading to choppy handle movement,
+        // especially on IE. Posting ensures we don't try to layout faster
+        // than the browser can handle.
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgUpdateRequest);
     };
     /**
-     * Find the index of the split handle which contains the given target.
-     */
-    SplitPanel.prototype._findHandleIndex = function (target) {
-        for (var i = 0, n = this.childCount; i < n; ++i) {
-            var handle = getHandle(this.childAt(i));
-            if (handle.node.contains(target))
-                return i;
-        }
-        return -1;
-    };
-    /**
      * The change handler for the [[orientationProperty]].
@@ -604,3 +592,3 @@ */
         this.toggleClass(VERTICAL_CLASS, value === Orientation.Vertical);
-        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(this, phosphor_widget_1.Panel.MsgLayoutRequest);
     };
@@ -624,2 +612,3 @@ /**
     SplitPanel.orientationProperty = new phosphor_properties_1.Property({
+        name: 'orientation',
         value: Orientation.Horizontal,
@@ -637,5 +626,6 @@ changed: function (owner, old, value) { return owner._onOrientationChanged(old, value); },
     SplitPanel.spacingProperty = new phosphor_properties_1.Property({
+        name: 'spacing',
         value: 3,
         coerce: function (owner, value) { return Math.max(0, value | 0); },
-        changed: function (owner) { return phosphor_messaging_1.postMessage(owner, phosphor_widget_1.Widget.MsgLayoutRequest); },
+        changed: function (owner) { return phosphor_messaging_1.postMessage(owner, phosphor_widget_1.Panel.MsgLayoutRequest); },
     });
@@ -652,8 +642,9 @@ /**
     SplitPanel.stretchProperty = new phosphor_properties_1.Property({
+        name: 'stretch',
         value: 0,
         coerce: function (owner, value) { return Math.max(0, value | 0); },
-        changed: onStretchChanged,
+        changed: onChildPropertyChanged,
     });
     return SplitPanel;
-})(phosphor_widget_1.Widget);
+})(phosphor_widget_1.Panel);
 exports.SplitPanel = SplitPanel;
@@ -726,2 +717,12 @@ /**
     });
+    /**
+     * Set the geometry for the handle.
+     */
+    SplitHandle.prototype.setGeometry = function (left, top, width, height) {
+        var style = this.node.style;
+        style.top = top + 'px';
+        style.left = left + 'px';
+        style.width = width + 'px';
+        style.height = height + 'px';
+    };
     return SplitHandle;
@@ -733,2 +734,3 @@ })(phosphor_nodewrapper_1.NodeWrapper);
 var splitHandleProperty = new phosphor_properties_1.Property({
+    name: 'splitHandle',
     create: function (owner) { return new SplitHandle(); },
@@ -740,2 +742,3 @@ });
 var rectProperty = new phosphor_properties_1.Property({
+    name: 'rect',
     create: createRect,
@@ -762,2 +765,14 @@ });
 /**
+ * Find the index of the split handle which contains the given target.
+ */
+function findHandleIndex(panel, target) {
+    var children = panel.children;
+    for (var i = 0, n = children.length; i < n; ++i) {
+        var handle = getHandle(children.get(i));
+        if (handle.node.contains(target))
+            return i;
+    }
+    return -1;
+}
+/**
  * Set the offset geometry for the given widget.
@@ -809,7 +824,7 @@ *
 /**
- * The change handler for the stretch attached property.
+ * The change handler for the attached child properties.
  */
-function onStretchChanged(child, old, value) {
+function onChildPropertyChanged(child) {
     if (child.parent instanceof SplitPanel) {
-        phosphor_messaging_1.postMessage(child.parent, phosphor_widget_1.Widget.MsgLayoutRequest);
+        phosphor_messaging_1.postMessage(child.parent, phosphor_widget_1.Panel.MsgLayoutRequest);
     }
@@ -816,0 +831,0 @@ }

package.json

 {
   "name": "phosphor-splitpanel",
-  "version": "0.9.9",
-  "description": "A Phosphor layout widget which arranges its children into resizable sections.",
+  "version": "1.0.0-beta",
+  "description": "A Phosphor layout panel which arranges its children into resizable sections.",
   "main": "lib/index.js",
@@ -9,9 +9,9 @@ "typings": "lib/index.d.ts",
     "phosphor-arrays": "^1.0.5",
-    "phosphor-boxengine": "^0.9.4",
+    "phosphor-boxengine": "^1.0.1",
     "phosphor-disposable": "^1.0.4",
-    "phosphor-domutil": "^0.9.5",
+    "phosphor-domutil": "^1.0.0",
     "phosphor-messaging": "^1.0.5",
     "phosphor-nodewrapper": "^1.0.4",
-    "phosphor-properties": "^1.3.0",
-    "phosphor-widget": "^0.9.13"
+    "phosphor-properties": "^2.0.0",
+    "phosphor-widget": "^1.0.0-beta"
   },
@@ -70,2 +70,3 @@ "devDependencies": {
   "keywords": [
+    "layout",
     "panel",
@@ -72,0 +73,0 @@ "split",

README.md

@@ -7,3 +7,3 @@ phosphor-splitpanel
 
-A Phosphor layout widget which arranges its children into resizable sections.
+A Phosphor layout panel which arranges its children into resizable sections.
 
@@ -114,11 +114,15 @@ [API Docs](http://phosphorjs.github.io/phosphor-splitpanel/api/)
 ```typescript
-import { SplitPanel } from 'phosphor-splitpanel';
+import {
+  SplitPanel
+} from 'phosphor-splitpanel';
 
-import { Widget } from 'phosphor-widget';
+import {
+  Widget
+} from 'phosphor-widget';
 
 
 // Create some content for the panel.
-var w1 = new Widget();
-var w2 = new Widget();
-var w3 = new Widget();
+let w1 = new Widget();
+let w2 = new Widget();
+let w3 = new Widget();
 
@@ -131,14 +135,14 @@ // Set the widget stretch factors (optional).
 // Setup the split panel.
-var sp = new SplitPanel();
-sp.orientation = SplitPanel.Horizontal;
-sp.handleSize = 5;
-sp.children = [w1, w2, w3];
+let panel = new SplitPanel();
+panel.handleSize = 5;
+panel.orientation = SplitPanel.Horizontal;
+panel.children.assign([w1, w2, w3]);
 
 // sometime later...
 
-// Get the relative widget sizes.
-var size = sp.sizes();
+// Get the normalized relative widget sizes.
+let sizes = panel.sizes();
 
 // Set the relative widget sizes.
-sp.setSizes([2, 4, 1]);
+panel.setSizes([2, 4, 1]);
 ```

Fixed alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

47570

increased by1.32%

Lines of code

1188

increased by0.93%

Number of medium maintenance alerts

0

decreased by-100%

Number of lines in readme file

146

increased by2.82%

Dependency changes

• + Addedphosphor-boxengine@1.0.1(transitive)

• + Addedphosphor-domutil@1.2.0(transitive)

• + Addedphosphor-properties@2.0.0(transitive)

• + Addedphosphor-widget@1.0.0-rc.1(transitive)

• - Removedphosphor-boxengine@0.9.4(transitive)

• - Removedphosphor-domutil@0.9.6(transitive)

• - Removedphosphor-properties@1.3.0(transitive)

• - Removedphosphor-widget@0.9.13(transitive)

• Updatedphosphor-boxengine@^1.0.1

• Updatedphosphor-domutil@^1.0.0

• Updatedphosphor-properties@^2.0.0

• Updatedphosphor-widget@^1.0.0-beta