@lumino/widgets - npm Package Compare versions

Comparing version 1.34.1 to 1.35.0

package.json

 {
   "name": "@lumino/widgets",
-  "version": "1.34.1",
+  "version": "1.35.0",
   "description": "Lumino Widgets",
@@ -60,12 +60,12 @@ "homepage": "https://github.com/jupyterlab/lumino",
     "@lumino/algorithm": "^1.9.2",
-    "@lumino/commands": "^1.20.1",
+    "@lumino/commands": "^1.21.0",
     "@lumino/coreutils": "^1.12.1",
-    "@lumino/disposable": "^1.10.2",
+    "@lumino/disposable": "^1.10.3",
     "@lumino/domutils": "^1.8.2",
-    "@lumino/dragdrop": "^1.14.2",
+    "@lumino/dragdrop": "^1.14.3",
     "@lumino/keyboard": "^1.8.2",
     "@lumino/messaging": "^1.10.3",
     "@lumino/properties": "^1.8.2",
-    "@lumino/signaling": "^1.10.2",
-    "@lumino/virtualdom": "^1.14.2"
+    "@lumino/signaling": "^1.11.0",
+    "@lumino/virtualdom": "^1.14.3"
   },
@@ -72,0 +72,0 @@ "devDependencies": {

src/commandpalette.ts

@@ -1042,5 +1042,3 @@ // Copyright (c) Jupyter Development Team.
       let kb = data.item.keyBinding;
-      return kb
-        ? kb.keys.map(CommandRegistry.formatKeystroke).join(', ')
-        : null;
+      return kb ? CommandRegistry.formatKeystroke(kb.keys) : null;
     }
@@ -1047,0 +1045,0 @@

src/contextmenu.ts

@@ -81,2 +81,5 @@ // Copyright (c) Jupyter Development Team.
   open(event: MouseEvent): boolean {
+    // Prior to any DOM modifications update the window data.
+    Menu.saveWindowData();
+
     // Clear the current contents of the context menu.
@@ -83,0 +86,0 @@ this.menu.clearItems();

src/menu.ts

@@ -35,2 +35,9 @@ // Copyright (c) Jupyter Development Team.
 
+interface IWindowData {
+  pageXOffset: number;
+  pageYOffset: number;
+  clientWidth: number;
+  clientHeight: number;
+}
+
 /**
@@ -833,2 +840,5 @@ * A widget which displays items as a canonical menu.
 
+    // Prior to any DOM modifications save window data
+    Menu.saveWindowData();
+
     // Ensure the current child menu is closed.
@@ -916,2 +926,15 @@ this._closeChildMenu();
 
+  /**
+   * Save window data used for menu positioning in transient cache.
+   *
+   * In order to avoid layout trashing it is recommended to invoke this
+   * method immediately prior to opening the menu and any DOM modifications
+   * (like closing previously visible menu, or adding a class to menu widget).
+   *
+   * The transient cache will be released upon `open()` call.
+   */
+  static saveWindowData(): void {
+    Private.saveWindowData();
+  }
+
   private _childIndex = -1;
@@ -1419,5 +1442,3 @@ private _activeIndex = -1;
       let kb = data.item.keyBinding;
-      return kb
-        ? kb.keys.map(CommandRegistry.formatKeystroke).join(', ')
-        : null;
+      return kb ? CommandRegistry.formatKeystroke(kb.keys) : null;
     }
@@ -1446,3 +1467,29 @@ }
 
+  let transientWindowDataCache: IWindowData | null = null;
+  let transientCacheCounter: number = 0;
+
+  function getWindowData(): IWindowData {
+    // if transient cache is in use, take one from it
+    if (transientCacheCounter > 0) {
+      transientCacheCounter--;
+      return transientWindowDataCache!;
+    }
+    return _getWindowData();
+  }
+
   /**
+   * Store window data in transient cache.
+   *
+   * The transient cache will be released upon `getWindowData()` call.
+   * If this function is called multiple times, the cache will be
+   * retained until as many calls to `getWindowData()` were made.
+   *
+   * Note: should be called before any DOM modifications.
+   */
+  export function saveWindowData(): void {
+    transientWindowDataCache = _getWindowData();
+    transientCacheCounter++;
+  }
+
+  /**
    * Create the DOM node for a menu.
@@ -1549,2 +1596,11 @@ */
 
+  function _getWindowData(): IWindowData {
+    return {
+      pageXOffset: window.pageXOffset,
+      pageYOffset: window.pageYOffset,
+      clientWidth: document.documentElement.clientWidth,
+      clientHeight: document.documentElement.clientHeight
+    };
+  }
+
   /**
@@ -1560,11 +1616,12 @@ * Open a menu as a root menu at the target location.
   ): void {
+    // Get the current position and size of the main viewport.
+    const windowData = getWindowData();
+    let px = windowData.pageXOffset;
+    let py = windowData.pageYOffset;
+    let cw = windowData.clientWidth;
+    let ch = windowData.clientHeight;
+
     // Ensure the menu is updated before attaching and measuring.
     MessageLoop.sendMessage(menu, Widget.Msg.UpdateRequest);
 
-    // Get the current position and size of the main viewport.
-    let px = window.pageXOffset;
-    let py = window.pageYOffset;
-    let cw = document.documentElement.clientWidth;
-    let ch = document.documentElement.clientHeight;
-
     // Compute the maximum allowed height for the menu.
@@ -1578,7 +1635,3 @@ let maxHeight = ch - (forceY ? y : 0);
     // Clear the menu geometry and prepare it for measuring.
-    style.top = '';
-    style.left = '';
-    style.width = '';
-    style.height = '';
-    style.visibility = 'hidden';
+    style.opacity = '0';
     style.maxHeight = `${maxHeight}px`;
@@ -1607,7 +1660,6 @@
     // Update the position of the menu to the computed position.
-    style.top = `${Math.max(0, y)}px`;
-    style.left = `${Math.max(0, x)}px`;
+    style.transform = `translate(${Math.max(0, x)}px, ${Math.max(0, y)}px`;
 
     // Finally, make the menu visible on the screen.
-    style.visibility = '';
+    style.opacity = '1';
   }
@@ -1619,11 +1671,12 @@
   export function openSubmenu(submenu: Menu, itemNode: HTMLElement): void {
+    // Get the current position and size of the main viewport.
+    const windowData = getWindowData();
+    let px = windowData.pageXOffset;
+    let py = windowData.pageYOffset;
+    let cw = windowData.clientWidth;
+    let ch = windowData.clientHeight;
+
     // Ensure the menu is updated before opening.
     MessageLoop.sendMessage(submenu, Widget.Msg.UpdateRequest);
 
-    // Get the current position and size of the main viewport.
-    let px = window.pageXOffset;
-    let py = window.pageYOffset;
-    let cw = document.documentElement.clientWidth;
-    let ch = document.documentElement.clientHeight;
-
     // Compute the maximum allowed height for the menu.
@@ -1637,7 +1690,3 @@ let maxHeight = ch;
     // Clear the menu geometry and prepare it for measuring.
-    style.top = '';
-    style.left = '';
-    style.width = '';
-    style.height = '';
-    style.visibility = 'hidden';
+    style.opacity = '0';
     style.maxHeight = `${maxHeight}px`;
@@ -1674,7 +1723,6 @@
     // Update the position of the menu to the computed position.
-    style.top = `${Math.max(0, y)}px`;
-    style.left = `${Math.max(0, x)}px`;
+    style.transform = `translate(${Math.max(0, x)}px, ${Math.max(0, y)}px`;
 
     // Finally, make the menu visible on the screen.
-    style.visibility = '';
+    style.opacity = '1';
   }
@@ -1681,0 +1729,0 @@

src/menubar.ts

@@ -424,11 +424,19 @@ // Copyright (c) Jupyter Development Team.
    * Handle the `'keydown'` event for the menu bar.
+   *
+   * #### Notes
+   * All keys are trapped except the tab key that is ignored.
    */
   private _evtKeyDown(event: KeyboardEvent): void {
-    // A menu bar handles all keydown events.
+    // Fetch the key code for the event.
+    let kc = event.keyCode;
+
+    // Do not trap the tab key.
+    if (kc === 9) {
+      return;
+    }
+
+    // A menu bar handles all other keydown events.
     event.preventDefault();
     event.stopPropagation();
 
-    // Fetch the key code for the event.
-    let kc = event.keyCode;
-
     // Enter, Up Arrow, Down Arrow
@@ -527,4 +535,7 @@ if (kc === 13 || kc === 38 || kc === 40) {
     } else {
+      const position = this._positionForMenu(index);
+      Menu.saveWindowData();
+      // Begin DOM modifications.
       this.activeIndex = index;
-      this._openChildMenu();
+      this._openChildMenu(position);
     }
@@ -554,2 +565,10 @@ }
 
+    // Get position for the new menu >before< updating active index.
+    const position = this._positionForMenu(index);
+
+    // Before any modification, update window data.
+    Menu.saveWindowData();
+
+    // Begin DOM modifications.
+
     // Update the active index to the hovered item.
@@ -560,3 +579,3 @@ this.activeIndex = index;
     if (this._childMenu) {
-      this._openChildMenu();
+      this._openChildMenu(position);
     }
@@ -566,2 +585,18 @@ }
   /**
+   * Find initial position for the menu based on menubar item position.
+   *
+   * NOTE: this should be called before updating active index to avoid
+   * an additional layout and style invalidation as changing active
+   * index modifies DOM.
+   */
+  private _positionForMenu(index: number): Private.IPosition {
+    let itemNode = this.contentNode.children[index];
+    let { left, bottom } = (itemNode as HTMLElement).getBoundingClientRect();
+    return {
+      top: bottom,
+      left
+    };
+  }
+
+  /**
    * Handle the `'mouseleave'` event for the menu bar.
@@ -582,3 +617,3 @@ */
    */
-  private _openChildMenu(): void {
+  private _openChildMenu(options: { left?: number; top?: number } = {}): void {
     // If there is no active menu, close the current menu.
@@ -604,6 +639,2 @@ let newMenu = this.activeMenu;
     } else {
-      this.addClass('lm-mod-active');
-      /* <DEPRECATED> */
-      this.addClass('p-mod-active');
-      /* </DEPRECATED> */
       document.addEventListener('mousedown', this, true);
@@ -614,10 +645,21 @@ }
     MessageLoop.sendMessage(this, Widget.Msg.UpdateRequest);
-    let itemNode = this.contentNode.children[this._activeIndex];
 
     // Get the positioning data for the new menu.
-    let { left, bottom } = (itemNode as HTMLElement).getBoundingClientRect();
+    let { left, top } = options;
+    if (typeof left === 'undefined' || typeof top === 'undefined') {
+      ({ left, top } = this._positionForMenu(this._activeIndex));
+    }
+    // Begin DOM modifications
 
+    if (!oldMenu) {
+      // Continue setup for new menu
+      this.addClass('lm-mod-active');
+      /* <DEPRECATED> */
+      this.addClass('p-mod-active');
+      /* </DEPRECATED> */
+    }
+
     // Open the new menu at the computed location.
     if (newMenu.items.length > 0) {
-      newMenu.open(left, bottom, this._forceItemsPosition);
+      newMenu.open(left, top, this._forceItemsPosition);
     }
@@ -973,2 +1015,16 @@ }
   /**
+   * Position for the menu relative to top-left screen corner.
+   */
+  export interface IPosition {
+    /**
+     * Pixels right from screen origin.
+     */
+    left: number;
+    /**
+     * Pixels down from screen origin.
+     */
+    top: number;
+  }
+
+  /**
    * The results of a mnemonic search.
@@ -975,0 +1031,0 @@ */

types/menu.d.ts

@@ -301,2 +301,12 @@ import { CommandRegistry } from '@lumino/commands';
     private _cancelCloseTimer;
+    /**
+     * Save window data used for menu positioning in transient cache.
+     *
+     * In order to avoid layout trashing it is recommended to invoke this
+     * method immediately prior to opening the menu and any DOM modifications
+     * (like closing previously visible menu, or adding a class to menu widget).
+     *
+     * The transient cache will be released upon `open()` call.
+     */
+    static saveWindowData(): void;
     private _childIndex;
@@ -303,0 +313,0 @@ private _activeIndex;

types/menubar.d.ts

@@ -147,2 +147,5 @@ import { Message } from '@lumino/messaging';
      * Handle the `'keydown'` event for the menu bar.
+     *
+     * #### Notes
+     * All keys are trapped except the tab key that is ignored.
      */
@@ -159,2 +162,10 @@ private _evtKeyDown;
     /**
+     * Find initial position for the menu based on menubar item position.
+     *
+     * NOTE: this should be called before updating active index to avoid
+     * an additional layout and style invalidation as changing active
+     * index modifies DOM.
+     */
+    private _positionForMenu;
+    /**
      * Handle the `'mouseleave'` event for the menu bar.
@@ -161,0 +172,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4840659

increased by0.46%

Lines of code

59499

increased by0.44%

Dependency changes

• Updated@lumino/commands@^1.21.0

• Updated@lumino/disposable@^1.10.3

• Updated@lumino/dragdrop@^1.14.3

• Updated@lumino/signaling@^1.11.0

• Updated@lumino/virtualdom@^1.14.3