@lumino/widgets
Advanced tools
Comparing version 1.29.0 to 1.30.0
{ | ||
"name": "@lumino/widgets", | ||
"version": "1.29.0", | ||
"version": "1.30.0", | ||
"description": "Lumino Widgets", | ||
@@ -43,3 +43,3 @@ "homepage": "https://github.com/jupyterlab/lumino", | ||
"minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js", | ||
"test": "npm run test:firefox", | ||
"test": "npm run test:firefox-headless", | ||
"test:chrome": "npm run test:nobrowser -- --browsers=Chrome", | ||
@@ -51,4 +51,6 @@ "test:chrome-headless": "npm run test:nobrowser -- --browsers=ChromeHeadless", | ||
"test:debug:firefox": "npm run test:debug:nobrowser -- --browsers=Firefox", | ||
"test:debug:firefox-headless": "npm run test:debug:nobrowser -- --browsers=FirefoxHeadless", | ||
"test:debug:nobrowser": "cd tests && karma start --singleRun=false --debug=true --browserNoActivityTimeout=10000000 --browserDisconnectTimeout=10000000", | ||
"test:firefox": "npm run test:nobrowser -- --browsers=Firefox", | ||
"test:firefox-headless": "npm run test:nobrowser -- --browsers=FirefoxHeadless", | ||
"test:ie": "npm run test:nobrowser -- --browsers=IE", | ||
@@ -59,13 +61,13 @@ "test:nobrowser": "cd tests && karma start", | ||
"dependencies": { | ||
"@lumino/algorithm": "^1.9.0", | ||
"@lumino/commands": "^1.18.0", | ||
"@lumino/coreutils": "^1.11.0", | ||
"@lumino/disposable": "^1.10.0", | ||
"@lumino/domutils": "^1.8.0", | ||
"@lumino/dragdrop": "^1.13.0", | ||
"@lumino/keyboard": "^1.8.0", | ||
"@lumino/messaging": "^1.10.0", | ||
"@lumino/properties": "^1.8.0", | ||
"@lumino/signaling": "^1.10.0", | ||
"@lumino/virtualdom": "^1.14.0" | ||
"@lumino/algorithm": "^1.9.1", | ||
"@lumino/commands": "^1.19.0", | ||
"@lumino/coreutils": "^1.11.1", | ||
"@lumino/disposable": "^1.10.1", | ||
"@lumino/domutils": "^1.8.1", | ||
"@lumino/dragdrop": "^1.13.1", | ||
"@lumino/keyboard": "^1.8.1", | ||
"@lumino/messaging": "^1.10.1", | ||
"@lumino/properties": "^1.8.1", | ||
"@lumino/signaling": "^1.10.1", | ||
"@lumino/virtualdom": "^1.14.1" | ||
}, | ||
@@ -72,0 +74,0 @@ "devDependencies": { |
@@ -56,2 +56,6 @@ // Copyright (c) Jupyter Development Team. | ||
} | ||
this._hiddenMode = | ||
options.hiddenMode !== undefined | ||
? options.hiddenMode | ||
: Widget.HiddenMode.Display; | ||
} | ||
@@ -94,2 +98,26 @@ | ||
/** | ||
* The method for hiding child widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
get hiddenMode(): Widget.HiddenMode { | ||
return this._hiddenMode; | ||
} | ||
set hiddenMode(v: Widget.HiddenMode) { | ||
if (this._hiddenMode === v) { | ||
return; | ||
} | ||
this._hiddenMode = v; | ||
each(this.tabBars(), bar => { | ||
if (bar.titles.length > 1) { | ||
bar.titles.forEach(title => { | ||
title.owner.hiddenMode = this._hiddenMode; | ||
}); | ||
} | ||
}); | ||
} | ||
/** | ||
* Get the inter-element spacing for the dock layout. | ||
@@ -656,2 +684,9 @@ */ | ||
tabNode.tabBar.removeTab(widget.title); | ||
if ( | ||
this._hiddenMode === Widget.HiddenMode.Scale && | ||
tabNode.tabBar.titles.length == 1 | ||
) { | ||
const existingWidget = tabNode.tabBar.titles[0].owner; | ||
existingWidget.hiddenMode = Widget.HiddenMode.Display; | ||
} | ||
return; | ||
@@ -814,2 +849,18 @@ } | ||
// Using transform create an additional layer in the pixel pipeline | ||
// to limit the number of layer, it is set only if there is more than one widget. | ||
if ( | ||
this._hiddenMode === Widget.HiddenMode.Scale && | ||
refNode.tabBar.titles.length > 0 | ||
) { | ||
if (refNode.tabBar.titles.length == 1) { | ||
const existingWidget = refNode.tabBar.titles[0].owner; | ||
existingWidget.hiddenMode = Widget.HiddenMode.Scale; | ||
} | ||
widget.hiddenMode = Widget.HiddenMode.Scale; | ||
} else { | ||
widget.hiddenMode = Widget.HiddenMode.Display; | ||
} | ||
// Insert the widget's tab relative to the target index. | ||
@@ -1096,2 +1147,3 @@ refNode.tabBar.insertTab(index + (after ? 1 : 0), widget.title); | ||
private _box: ElementExt.IBoxSizing | null = null; | ||
private _hiddenMode: Widget.HiddenMode; | ||
private _items: Private.ItemMap = new Map<Widget, LayoutItem>(); | ||
@@ -1109,2 +1161,9 @@ } | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
/** | ||
* The renderer to use for the dock layout. | ||
@@ -1111,0 +1170,0 @@ */ |
@@ -70,3 +70,7 @@ // Copyright (c) Jupyter Development Team. | ||
// Set up the dock layout for the panel. | ||
this.layout = new DockLayout({ renderer, spacing: options.spacing }); | ||
this.layout = new DockLayout({ | ||
renderer, | ||
spacing: options.spacing, | ||
hiddenMode: options.hiddenMode | ||
}); | ||
@@ -98,2 +102,16 @@ // Set up the overlay drop indicator. | ||
/** | ||
* The method for hiding widgets. | ||
*/ | ||
get hiddenMode(): Widget.HiddenMode { | ||
return (this.layout as DockLayout).hiddenMode; | ||
} | ||
/** | ||
* Set the method for hiding widgets. | ||
*/ | ||
set hiddenMode(v: Widget.HiddenMode) { | ||
(this.layout as DockLayout).hiddenMode = v; | ||
} | ||
/** | ||
* A signal emitted when the layout configuration is modified. | ||
@@ -1115,2 +1133,9 @@ * | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
/** | ||
* Allow tabs to be draggable / movable by user. | ||
@@ -1117,0 +1142,0 @@ * |
@@ -16,3 +16,3 @@ // Copyright (c) Jupyter Development Team. | ||
import { LayoutItem } from './layout'; | ||
import { Layout, LayoutItem } from './layout'; | ||
@@ -30,3 +30,41 @@ import { PanelLayout } from './panellayout'; | ||
export class StackedLayout extends PanelLayout { | ||
constructor(options: StackedLayout.IOptions = {}) { | ||
super(options); | ||
this._hiddenMode = | ||
options.hiddenMode !== undefined | ||
? options.hiddenMode | ||
: Widget.HiddenMode.Display; | ||
} | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
get hiddenMode(): Widget.HiddenMode { | ||
return this._hiddenMode; | ||
} | ||
/** | ||
* Set the method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
set hiddenMode(v: Widget.HiddenMode) { | ||
if (this._hiddenMode === v) { | ||
return; | ||
} | ||
this._hiddenMode = v; | ||
if (this.widgets.length > 1) { | ||
this.widgets.forEach(w => { | ||
w.hiddenMode = this._hiddenMode; | ||
}); | ||
} | ||
} | ||
/** | ||
* Dispose of the resources held by the layout. | ||
@@ -59,2 +97,16 @@ */ | ||
protected attachWidget(index: number, widget: Widget): void { | ||
// Using transform create an additional layer in the pixel pipeline | ||
// to limit the number of layer, it is set only if there is more than one widget. | ||
if ( | ||
this._hiddenMode === Widget.HiddenMode.Scale && | ||
this._items.length > 0 | ||
) { | ||
if (this._items.length === 1) { | ||
this.widgets[0].hiddenMode = Widget.HiddenMode.Scale; | ||
} | ||
widget.hiddenMode = Widget.HiddenMode.Scale; | ||
} else { | ||
widget.hiddenMode = Widget.HiddenMode.Display; | ||
} | ||
// Create and add a new layout item for the widget. | ||
@@ -134,2 +186,12 @@ ArrayExt.insert(this._items, index, new LayoutItem(widget)); | ||
// Reset the hidden mode for the widget. | ||
if (this._hiddenMode === Widget.HiddenMode.Scale) { | ||
widget.hiddenMode = Widget.HiddenMode.Display; | ||
// Reset the hidden mode for the first widget if necessary. | ||
if (this._items.length === 1) { | ||
this._items[0].widget.hiddenMode = Widget.HiddenMode.Display; | ||
} | ||
} | ||
// Dispose of the layout item. | ||
@@ -311,2 +373,20 @@ item!.dispose(); | ||
private _box: ElementExt.IBoxSizing | null = null; | ||
private _hiddenMode: Widget.HiddenMode; | ||
} | ||
/** | ||
* The namespace for the `StackedLayout` class statics. | ||
*/ | ||
export namespace StackedLayout { | ||
/** | ||
* An options object for initializing a stacked layout. | ||
*/ | ||
export interface IOptions extends Layout.IOptions { | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
} | ||
} |
@@ -39,2 +39,24 @@ // Copyright (c) Jupyter Development Team. | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
get hiddenMode(): Widget.HiddenMode { | ||
return (this.layout as StackedLayout).hiddenMode; | ||
} | ||
/** | ||
* Set the method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
set hiddenMode(v: Widget.HiddenMode) { | ||
(this.layout as StackedLayout).hiddenMode = v; | ||
} | ||
/** | ||
* A signal emitted when a widget is removed from a stacked panel. | ||
@@ -41,0 +63,0 @@ */ |
@@ -170,2 +170,43 @@ /* eslint-disable @typescript-eslint/no-empty-function */ | ||
/** | ||
* Get the method for hiding the widget. | ||
*/ | ||
get hiddenMode(): Widget.HiddenMode { | ||
return this._hiddenMode; | ||
} | ||
/** | ||
* Set the method for hiding the widget. | ||
*/ | ||
set hiddenMode(value: Widget.HiddenMode) { | ||
if (this._hiddenMode === value) { | ||
return; | ||
} | ||
this._hiddenMode = value; | ||
switch (value) { | ||
case Widget.HiddenMode.Display: | ||
this.node.style.willChange = 'auto'; | ||
break; | ||
case Widget.HiddenMode.Scale: | ||
this.node.style.willChange = 'transform'; | ||
break; | ||
} | ||
if (this.isHidden) { | ||
if (value === Widget.HiddenMode.Display) { | ||
this.addClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.addClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
this.node.style.transform = ''; | ||
} else { | ||
this.node.style.transform = 'scale(0)'; | ||
this.removeClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.removeClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
} | ||
} | ||
} | ||
/** | ||
* Get the parent of the widget. | ||
@@ -393,6 +434,12 @@ */ | ||
this.clearFlag(Widget.Flag.IsHidden); | ||
this.removeClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.removeClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
this.node.removeAttribute('aria-hidden'); | ||
if (this.hiddenMode === Widget.HiddenMode.Display) { | ||
this.removeClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.removeClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
} else { | ||
this.node.style.transform = ''; | ||
} | ||
if (this.isAttached && (!this.parent || this.parent.isVisible)) { | ||
@@ -423,6 +470,12 @@ MessageLoop.sendMessage(this, Widget.Msg.AfterShow); | ||
this.setFlag(Widget.Flag.IsHidden); | ||
this.addClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.addClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
this.node.setAttribute('aria-hidden', 'true'); | ||
if (this.hiddenMode === Widget.HiddenMode.Display) { | ||
this.addClass('lm-mod-hidden'); | ||
/* <DEPRECATED> */ | ||
this.addClass('p-mod-hidden'); | ||
/* </DEPRECATED> */ | ||
} else { | ||
this.node.style.transform = 'scale(0)'; | ||
} | ||
if (this.isAttached && (!this.parent || this.parent.isVisible)) { | ||
@@ -713,2 +766,3 @@ MessageLoop.sendMessage(this, Widget.Msg.AfterHide); | ||
private _disposed = new Signal<this, void>(this); | ||
private _hiddenMode: Widget.HiddenMode = Widget.HiddenMode.Display; | ||
} | ||
@@ -744,2 +798,31 @@ | ||
/** | ||
* The method for hiding the widget. | ||
* | ||
* The default is Display. | ||
* | ||
* Using `Scale` will often increase performance as most browsers will not | ||
* trigger style computation for the `transform` action. This should be used | ||
* sparingly and tested, since increasing the number of composition layers | ||
* may slow things down. | ||
* | ||
* To ensure the transformation does not trigger style recomputation, you | ||
* may need to set the widget CSS style `will-change: transform`. This | ||
* should be used only when needed as it may overwhelm the browser with a | ||
* high number of layers. See | ||
* https://developer.mozilla.org/en-US/docs/Web/CSS/will-change | ||
*/ | ||
export enum HiddenMode { | ||
/** | ||
* Set a `lm-mod-hidden` CSS class to hide the widget using `display:none` | ||
* CSS from the standard Lumino CSS. | ||
*/ | ||
Display = 0, | ||
/** | ||
* Hide the widget by setting the `transform` to `'scale(0)'`. | ||
*/ | ||
Scale | ||
} | ||
/** | ||
* An enum of widget bit flags. | ||
@@ -746,0 +829,0 @@ */ |
@@ -33,2 +33,10 @@ import { IIterator } from '@lumino/algorithm'; | ||
/** | ||
* The method for hiding child widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
hiddenMode: Widget.HiddenMode; | ||
/** | ||
* Get the inter-element spacing for the dock layout. | ||
@@ -271,2 +279,3 @@ */ | ||
private _box; | ||
private _hiddenMode; | ||
private _items; | ||
@@ -283,2 +292,8 @@ } | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
/** | ||
* The renderer to use for the dock layout. | ||
@@ -285,0 +300,0 @@ */ |
@@ -22,2 +22,9 @@ import { IIterator } from '@lumino/algorithm'; | ||
/** | ||
* The method for hiding widgets. | ||
*/ | ||
/** | ||
* Set the method for hiding widgets. | ||
*/ | ||
hiddenMode: Widget.HiddenMode; | ||
/** | ||
* A signal emitted when the layout configuration is modified. | ||
@@ -337,2 +344,8 @@ * | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
/** | ||
* Allow tabs to be draggable / movable by user. | ||
@@ -339,0 +352,0 @@ * |
import { Message } from '@lumino/messaging'; | ||
import { Layout } from './layout'; | ||
import { PanelLayout } from './panellayout'; | ||
@@ -11,3 +12,19 @@ import { Widget } from './widget'; | ||
export declare class StackedLayout extends PanelLayout { | ||
constructor(options?: StackedLayout.IOptions); | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
/** | ||
* Set the method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
hiddenMode: Widget.HiddenMode; | ||
/** | ||
* Dispose of the resources held by the layout. | ||
@@ -92,3 +109,20 @@ */ | ||
private _box; | ||
private _hiddenMode; | ||
} | ||
/** | ||
* The namespace for the `StackedLayout` class statics. | ||
*/ | ||
export declare namespace StackedLayout { | ||
/** | ||
* An options object for initializing a stacked layout. | ||
*/ | ||
interface IOptions extends Layout.IOptions { | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* The default is `Widget.HiddenMode.Display`. | ||
*/ | ||
hiddenMode?: Widget.HiddenMode; | ||
} | ||
} | ||
//# sourceMappingURL=stackedlayout.d.ts.map |
@@ -19,2 +19,17 @@ import { ISignal } from '@lumino/signaling'; | ||
/** | ||
* The method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
/** | ||
* Set the method for hiding widgets. | ||
* | ||
* #### Notes | ||
* If there is only one child widget, `Display` hiding mode will be used | ||
* regardless of this setting. | ||
*/ | ||
hiddenMode: Widget.HiddenMode; | ||
/** | ||
* A signal emitted when a widget is removed from a stacked panel. | ||
@@ -21,0 +36,0 @@ */ |
@@ -83,2 +83,9 @@ import { IIterator } from '@lumino/algorithm'; | ||
/** | ||
* Get the method for hiding the widget. | ||
*/ | ||
/** | ||
* Set the method for hiding the widget. | ||
*/ | ||
hiddenMode: Widget.HiddenMode; | ||
/** | ||
* Get the parent of the widget. | ||
@@ -380,2 +387,3 @@ */ | ||
private _disposed; | ||
private _hiddenMode; | ||
} | ||
@@ -408,2 +416,29 @@ /** | ||
/** | ||
* The method for hiding the widget. | ||
* | ||
* The default is Display. | ||
* | ||
* Using `Scale` will often increase performance as most browsers will not | ||
* trigger style computation for the `transform` action. This should be used | ||
* sparingly and tested, since increasing the number of composition layers | ||
* may slow things down. | ||
* | ||
* To ensure the transformation does not trigger style recomputation, you | ||
* may need to set the widget CSS style `will-change: transform`. This | ||
* should be used only when needed as it may overwhelm the browser with a | ||
* high number of layers. See | ||
* https://developer.mozilla.org/en-US/docs/Web/CSS/will-change | ||
*/ | ||
enum HiddenMode { | ||
/** | ||
* Set a `lm-mod-hidden` CSS class to hide the widget using `display:none` | ||
* CSS from the standard Lumino CSS. | ||
*/ | ||
Display = 0, | ||
/** | ||
* Hide the widget by setting the `transform` to `'scale(0)'`. | ||
*/ | ||
Scale = 1 | ||
} | ||
/** | ||
* An enum of widget bit flags. | ||
@@ -410,0 +445,0 @@ */ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
4755935
58521
1
Updated@lumino/algorithm@^1.9.1
Updated@lumino/commands@^1.19.0
Updated@lumino/coreutils@^1.11.1
Updated@lumino/disposable@^1.10.1
Updated@lumino/domutils@^1.8.1
Updated@lumino/dragdrop@^1.13.1
Updated@lumino/keyboard@^1.8.1
Updated@lumino/messaging@^1.10.1
Updated@lumino/properties@^1.8.1
Updated@lumino/signaling@^1.10.1
Updated@lumino/virtualdom@^1.14.1