Add handle moved signal to split panel

packages/widgets/src/splitpanel.ts

@@ -15,6 +15,8 @@ import { Drag } from '@lumino/dragdrop';
 
 import { Message } from '@lumino/messaging';
 
+import { ISignal, Signal } from '@lumino/signaling';
+
 import { Panel } from './panel';
 
 import { SplitLayout } from './splitlayout';
@@ -110,6 +112,13 @@ export class SplitPanel extends Panel {
     return (this.layout as SplitLayout).renderer;
   }
 
+  /**
+   * A signal emitted when a split handle has moved.
+   */
+  get handleMoved(): ISignal<this, void> {
+    return this._handleMoved;
+  }
+
   /**
    * A read-only array of the split handles in the panel.
    */
@@ -341,6 +350,9 @@ export class SplitPanel extends Panel {
     this._pressData.override.dispose();
     this._pressData = null;
 
+    // Emit the handle moved signal.
+    this._handleMoved.emit(undefined);
+
     // Remove the extra document listeners.
     document.removeEventListener('mouseup', this, true);
     document.removeEventListener('mousemove', this, true);
@@ -350,6 +362,7 @@ export class SplitPanel extends Panel {
     document.removeEventListener('contextmenu', this, true);
   }
 
+  private _handleMoved = new Signal<any, void>(this);
   private _pressData: Private.IPressData | null = null;
 }
 

packages/widgets/tests/src/splitpanel.spec.ts

@@ -21,6 +21,17 @@ const renderer: SplitPanel.IRenderer = {
   createHandle: () => document.createElement('div')
 };
 
+function dragHandle(panel: LogSplitPanel): void {
+  MessageLoop.sendMessage(panel, Widget.Msg.UpdateRequest);
+  let handle = panel.handles[0];
+  let rect = handle.getBoundingClientRect();
+  let args = { clientX: rect.left + 1, clientY: rect.top + 1 };
+  simulate(handle, 'mousedown', args);
+  args = { clientX: rect.left + 10, clientY: rect.top + 1 };
+  simulate(document.body, 'mousemove', args);
+  simulate(document.body, 'mouseup');
+}
+
 class LogSplitPanel extends SplitPanel {
   events: string[] = [];
 
@@ -130,6 +141,26 @@ describe('@lumino/widgets', () => {
       });
     });
 
+    describe('#handleMoved', () => {
+      it('should be emitted when a handle is moved by the user', done => {
+        let panel = new LogSplitPanel();
+        let widgets = [new Widget(), new Widget()];
+        panel.orientation = 'horizontal';
+        each(widgets, w => {
+          w.node.style.minHeight = '40px';
+          w.node.style.minWidth = '40px';
+          panel.addWidget(w);
+        });
+        panel.setRelativeSizes([40, 80]);
+        Widget.attach(panel, document.body);
+        panel.handleMoved.connect((sender, _) => {
+          expect(sender).to.equal(panel);
+          done();
+        });
+        dragHandle(panel);
+      });
+    });
+
     describe('#handles', () => {
       it('should get the read-only sequence of the split handles in the panel', () => {
         let panel = new SplitPanel();

packages/widgets/tests/src/tabbar.spec.ts

@@ -76,7 +76,7 @@ function startDrag(
   // Force an update.
   MessageLoop.sendMessage(bar, Widget.Msg.UpdateRequest);
   simulateOnNode(tab, 'mousedown');
-  let called = true;
+  let called = false;
   bar.tabDetachRequested.connect((sender, args) => {
     called = true;
   });