Fix resizing and mode switching in DockPanel (#411)

afshin · web-flow · commit 4cc45f16746d · 2022-09-15T10:29:33.000+02:00
* Fix charset in examples

* Fix resizing in Dockpanel

* Clean up event types

* Add empty DockLayout test and more UTF-8

* Add test for DockPanel#handles() that would have failed before this PR

* Fix mode switching in `DockLayout`

* Only use yield* when there is no predicate
diff --git a/examples/example-accordionpanel/index.html b/examples/example-accordionpanel/index.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="UTF-8">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <script type="text/javascript" src="build/bundle.example.js"></script>
 </head>
diff --git a/examples/example-datagrid/index.html b/examples/example-datagrid/index.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="UTF-8">
   <script type="text/javascript" src="build/bundle.example.js"></script>
 </head>
 <body>
diff --git a/examples/example-dockpanel-amd/index.html b/examples/example-dockpanel-amd/index.html
@@ -7,6 +7,7 @@
 <html>
 
 <head>
+  <meta charset="UTF-8">
   <title>example-dockpanel-iife</title>
 
   <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
diff --git a/examples/example-dockpanel-iife/index.html b/examples/example-dockpanel-iife/index.html
@@ -7,6 +7,7 @@
 <html>
 
 <head>
+  <meta charset="UTF-8">
   <title>example-dockpanel-iife</title>
 
   <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
diff --git a/examples/example-dockpanel/index.html b/examples/example-dockpanel/index.html
@@ -6,6 +6,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+  <meta charset="UTF-8">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
   <script type="text/javascript" src="build/bundle.example.js"></script>
 </head>
diff --git a/packages/widgets/src/docklayout.ts b/packages/widgets/src/docklayout.ts
@@ -145,10 +145,8 @@ export class DockLayout extends Layout {
    * #### Notes
    * This iterator includes the generated tab bars.
    */
-  *[Symbol.iterator](): IterableIterator<Widget> {
-    if (this._root) {
-      yield* this._root.iterAllWidgets();
-    }
+  [Symbol.iterator](): IterableIterator<Widget> {
+    return this._root ? this._root.iterAllWidgets() : Private.empty;
   }
 
   /**
@@ -159,10 +157,8 @@ export class DockLayout extends Layout {
    * #### Notes
    * This iterator does not include the generated tab bars.
    */
-  *widgets(): IterableIterator<Widget> {
-    if (this._root) {
-      yield* this._root.iterUserWidgets();
-    }
+  widgets(): IterableIterator<Widget> {
+    return this._root ? this._root.iterUserWidgets() : Private.empty;
   }
 
   /**
@@ -174,10 +170,8 @@ export class DockLayout extends Layout {
    * This iterator yields the widgets corresponding to the current tab
    * of each tab bar in the layout.
    */
-  *selectedWidgets(): IterableIterator<Widget> {
-    if (this._root) {
-      yield* this._root.iterSelectedWidgets();
-    }
+  selectedWidgets(): IterableIterator<Widget> {
+    return this._root ? this._root.iterSelectedWidgets() : Private.empty;
   }
 
   /**
@@ -188,21 +182,17 @@ export class DockLayout extends Layout {
    * #### Notes
    * This iterator does not include the user widgets.
    */
-  *tabBars(): IterableIterator<TabBar<Widget>> {
-    if (this._root) {
-      yield* this._root.iterTabBars();
-    }
+  tabBars(): IterableIterator<TabBar<Widget>> {
+    return this._root ? this._root.iterTabBars() : Private.empty;
   }
 
   /**
    * Create an iterator over the handles in the layout.
    *
    * @returns A new iterator over the handles in the layout.
    */
-  *handles(): IterableIterator<HTMLDivElement> {
-    if (this._root) {
-      yield* this._root.iterHandles();
-    }
+  handles(): IterableIterator<HTMLDivElement> {
+    return this._root ? this._root.iterHandles() : Private.empty;
   }
 
   /**
@@ -1434,6 +1424,11 @@ export namespace DockLayout {
  * The namespace for the module implementation details.
  */
 namespace Private {
+  /**
+   * An empty iterator.
+   */
+  export const empty = [][Symbol.iterator]();
+
   /**
    * A fraction used for sizing root panels; ~= `1 / golden_ratio`.
    */
@@ -1840,6 +1835,7 @@ namespace Private {
      * Create an iterator for the handles in the layout tree.
      */
     *iterHandles(): IterableIterator<HTMLDivElement> {
+      yield* this.handles;
       for (const child of this.children) {
         yield* child.iterHandles();
       }
diff --git a/packages/widgets/src/dockpanel.ts b/packages/widgets/src/dockpanel.ts
@@ -446,13 +446,13 @@ export class DockPanel extends Widget {
         this._evtDrop(event as Drag.Event);
         break;
       case 'pointerdown':
-        this._evtPointerDown(event as MouseEvent);
+        this._evtPointerDown(event as PointerEvent);
         break;
       case 'pointermove':
-        this._evtPointerMove(event as MouseEvent);
+        this._evtPointerMove(event as PointerEvent);
         break;
       case 'pointerup':
-        this._evtPointerUp(event as MouseEvent);
+        this._evtPointerUp(event as PointerEvent);
         break;
       case 'keydown':
         this._evtKeyDown(event as KeyboardEvent);
@@ -685,7 +685,7 @@ export class DockPanel extends Widget {
   /**
    * Handle the `'pointerdown'` event for the dock panel.
    */
-  private _evtPointerDown(event: MouseEvent): void {
+  private _evtPointerDown(event: PointerEvent): void {
     // Do nothing if the left mouse button is not pressed.
     if (event.button !== 0) {
       return;
@@ -723,7 +723,7 @@ export class DockPanel extends Widget {
   /**
    * Handle the `'pointermove'` event for the dock panel.
    */
-  private _evtPointerMove(event: MouseEvent): void {
+  private _evtPointerMove(event: PointerEvent): void {
     // Bail early if no drag is in progress.
     if (!this._pressData) {
       return;
@@ -746,7 +746,7 @@ export class DockPanel extends Widget {
   /**
    * Handle the `'pointerup'` event for the dock panel.
    */
-  private _evtPointerUp(event: MouseEvent): void {
+  private _evtPointerUp(event: PointerEvent): void {
     // Do nothing if the left mouse button is not released.
     if (event.button !== 0) {
       return;
diff --git a/packages/widgets/tests/src/docklayout.spec.ts b/packages/widgets/tests/src/docklayout.spec.ts
@@ -1,9 +1,8 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-/*-----------------------------------------------------------------------------
-| Copyright (c) 2014-2017, PhosphorJS Contributors
-|
-| Distributed under the terms of the BSD 3-Clause License.
-|
-| The full license is in the file LICENSE, distributed with this software.
-|----------------------------------------------------------------------------*/
+
+describe('@lumino/widgets', () => {
+  describe('DockLayout', () => {
+    it.skip('should have some tests');
+  });
+});
diff --git a/packages/widgets/tests/src/dockpanel.spec.ts b/packages/widgets/tests/src/dockpanel.spec.ts
@@ -57,6 +57,16 @@ describe('@lumino/widgets', () => {
       });
     });
 
+    describe('#handles()', () => {
+      it('should return the handles within the dock panel', () => {
+        let dock = new DockPanel();
+        dock.addWidget(new Widget());
+        dock.addWidget(new Widget(), { mode: 'split-bottom' });
+        expect(Array.from(dock.handles())).to.have.lengthOf(2); // one is hidden
+        dock.dispose();
+      });
+    });
+
     describe('hiddenMode', () => {
       let panel: DockPanel;
       let widgets: Widget[] = [];
