diff --git a/README.md b/README.md index 26aae1c95..761adfe3e 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,6 @@ You can try it live in a web browser (without installing anything) by clicking o ![jupyterlab](https://user-images.githubusercontent.com/591645/133745885-8905be8e-afc0-466d-afda-21ed3cf0d813.png) - ### Examples in the repository This repository contains several examples making use of Lumino Widgets such as the `DockPanel` and the `DataGrid`. @@ -50,4 +49,3 @@ To learn more on how to use Lumino, check out the documentation: https://lumino. See [CONTRIBUTING.md](./CONTRIBUTING.md) to know how to contribute and set up a development environment. - diff --git a/packages/dragdrop/src/index.ts b/packages/dragdrop/src/index.ts index ea498d807..070c2c452 100644 --- a/packages/dragdrop/src/index.ts +++ b/packages/dragdrop/src/index.ts @@ -154,7 +154,7 @@ export class Drag implements IDisposable { // If there is a current target, dispatch a drag leave event. if (this._currentTarget) { - let event = Private.createMouseEvent('mouseup', -1, -1); + let event = Private.createMouseEvent('pointerup', -1, -1); Private.dispatchDragLeave(this, this._currentTarget, null, event); } @@ -238,7 +238,7 @@ export class Drag implements IDisposable { }); // Trigger a fake move event to kick off the drag operation. - let event = Private.createMouseEvent('mousemove', clientX, clientY); + let event = Private.createMouseEvent('pointermove', clientX, clientY); document.dispatchEvent(event); // Return the pending promise for the drag operation. @@ -257,10 +257,16 @@ export class Drag implements IDisposable { */ handleEvent(event: Event): void { switch (event.type) { - case 'mousemove': + case 'mousemove': // this._evtMouseMove(event as MouseEvent); break; - case 'mouseup': + case 'mouseup': // + this._evtMouseUp(event as MouseEvent); + break; + case 'pointermove': + this._evtMouseMove(event as MouseEvent); + break; + case 'pointerup': this._evtMouseUp(event as MouseEvent); break; case 'keydown': @@ -363,13 +369,20 @@ export class Drag implements IDisposable { * Add the document event listeners for the drag object. */ private _addListeners(): void { - document.addEventListener('mousedown', this, true); - document.addEventListener('mousemove', this, true); - document.addEventListener('mouseup', this, true); - document.addEventListener('mouseenter', this, true); - document.addEventListener('mouseleave', this, true); - document.addEventListener('mouseover', this, true); - document.addEventListener('mouseout', this, true); + document.addEventListener('mousedown', this, true); // + document.addEventListener('mousemove', this, true); // + document.addEventListener('mouseup', this, true); // + document.addEventListener('mouseenter', this, true); // + document.addEventListener('mouseleave', this, true); // + document.addEventListener('mouseover', this, true); // + document.addEventListener('mouseout', this, true); // + document.addEventListener('pointerdown', this, true); + document.addEventListener('pointermove', this, true); + document.addEventListener('pointerup', this, true); + document.addEventListener('pointerenter', this, true); + document.addEventListener('pointerleave', this, true); + document.addEventListener('pointerover', this, true); + document.addEventListener('pointerout', this, true); document.addEventListener('keydown', this, true); document.addEventListener('keyup', this, true); document.addEventListener('keypress', this, true); @@ -380,13 +393,20 @@ export class Drag implements IDisposable { * Remove the document event listeners for the drag object. */ private _removeListeners(): void { - document.removeEventListener('mousedown', this, true); - document.removeEventListener('mousemove', this, true); - document.removeEventListener('mouseup', this, true); - document.removeEventListener('mouseenter', this, true); - document.removeEventListener('mouseleave', this, true); - document.removeEventListener('mouseover', this, true); - document.removeEventListener('mouseout', this, true); + document.removeEventListener('mousedown', this, true); // + document.removeEventListener('mousemove', this, true); // + document.removeEventListener('mouseup', this, true); // + document.removeEventListener('mouseenter', this, true); // + document.removeEventListener('mouseleave', this, true); // + document.removeEventListener('mouseover', this, true); // + document.removeEventListener('mouseout', this, true); // + document.removeEventListener('pointerdown', this, true); + document.removeEventListener('pointermove', this, true); + document.removeEventListener('pointerup', this, true); + document.removeEventListener('pointerenter', this, true); + document.removeEventListener('pointerleave', this, true); + document.removeEventListener('pointerover', this, true); + document.removeEventListener('pointerout', this, true); document.removeEventListener('keydown', this, true); document.removeEventListener('keyup', this, true); document.removeEventListener('keypress', this, true); diff --git a/packages/widgets/src/dockpanel.ts b/packages/widgets/src/dockpanel.ts index 889a461e9..03c1fcd88 100644 --- a/packages/widgets/src/dockpanel.ts +++ b/packages/widgets/src/dockpanel.ts @@ -428,13 +428,22 @@ export class DockPanel extends Widget { case 'lm-drop': this._evtDrop(event as IDragEvent); break; - case 'mousedown': + case 'mousedown': // this._evtMouseDown(event as MouseEvent); break; - case 'mousemove': + case 'mousemove': // this._evtMouseMove(event as MouseEvent); break; - case 'mouseup': + case 'mouseup': // + this._evtMouseUp(event as MouseEvent); + break; + case 'pointerdown': + this._evtMouseDown(event as MouseEvent); + break; + case 'pointermove': + this._evtMouseMove(event as MouseEvent); + break; + case 'pointerup': this._evtMouseUp(event as MouseEvent); break; case 'keydown': @@ -455,7 +464,8 @@ export class DockPanel extends Widget { this.node.addEventListener('lm-dragleave', this); this.node.addEventListener('lm-dragover', this); this.node.addEventListener('lm-drop', this); - this.node.addEventListener('mousedown', this); + this.node.addEventListener('mousedown', this); // + this.node.addEventListener('pointerdown', this); } /** @@ -466,7 +476,8 @@ export class DockPanel extends Widget { this.node.removeEventListener('lm-dragleave', this); this.node.removeEventListener('lm-dragover', this); this.node.removeEventListener('lm-drop', this); - this.node.removeEventListener('mousedown', this); + this.node.removeEventListener('mousedown', this); // + this.node.removeEventListener('pointerdown', this); this._releaseMouse(); } @@ -694,8 +705,10 @@ export class DockPanel extends Widget { // Add the extra document listeners. document.addEventListener('keydown', this, true); - document.addEventListener('mouseup', this, true); - document.addEventListener('mousemove', this, true); + document.addEventListener('mouseup', this, true); // + document.addEventListener('mousemove', this, true); // + document.addEventListener('pointerup', this, true); + document.addEventListener('pointermove', this, true); document.addEventListener('contextmenu', this, true); // Compute the offset deltas for the handle press. @@ -767,8 +780,10 @@ export class DockPanel extends Widget { // Remove the extra document listeners. document.removeEventListener('keydown', this, true); - document.removeEventListener('mouseup', this, true); - document.removeEventListener('mousemove', this, true); + document.removeEventListener('mouseup', this, true); // + document.removeEventListener('mousemove', this, true); // + document.removeEventListener('pointerup', this, true); + document.removeEventListener('pointermove', this, true); document.removeEventListener('contextmenu', this, true); } diff --git a/packages/widgets/src/tabbar.ts b/packages/widgets/src/tabbar.ts index 19d4df787..72a9a5e15 100644 --- a/packages/widgets/src/tabbar.ts +++ b/packages/widgets/src/tabbar.ts @@ -580,13 +580,22 @@ export class TabBar extends Widget { */ handleEvent(event: Event): void { switch (event.type) { - case 'mousedown': + case 'mousedown': // this._evtMouseDown(event as MouseEvent); break; - case 'mousemove': + case 'mousemove': // this._evtMouseMove(event as MouseEvent); break; - case 'mouseup': + case 'mouseup': // + this._evtMouseUp(event as MouseEvent); + break; + case 'pointerdown': + this._evtMouseDown(event as MouseEvent); + break; + case 'pointermove': + this._evtMouseMove(event as MouseEvent); + break; + case 'pointerup': this._evtMouseUp(event as MouseEvent); break; case 'dblclick': @@ -606,7 +615,8 @@ export class TabBar extends Widget { * A message handler invoked on a `'before-attach'` message. */ protected onBeforeAttach(msg: Message): void { - this.node.addEventListener('mousedown', this); + this.node.addEventListener('mousedown', this); // + this.node.addEventListener('pointerdown', this); this.node.addEventListener('dblclick', this); } @@ -614,7 +624,8 @@ export class TabBar extends Widget { * A message handler invoked on an `'after-detach'` message. */ protected onAfterDetach(msg: Message): void { - this.node.removeEventListener('mousedown', this); + this.node.removeEventListener('mousedown', this); // + this.node.removeEventListener('pointerdown', this); this.node.removeEventListener('dblclick', this); this._releaseMouse(); } @@ -768,7 +779,8 @@ export class TabBar extends Widget { }; // Add the document mouse up listener. - document.addEventListener('mouseup', this, true); + document.addEventListener('mouseup', this, true); // + document.addEventListener('pointerup', this, true); // Do nothing else if the middle button or add button is clicked. if (event.button === 1 || addButtonClicked) { @@ -783,7 +795,8 @@ export class TabBar extends Widget { // Add the extra listeners if the tabs are movable. if (this.tabsMovable) { - document.addEventListener('mousemove', this, true); + document.addEventListener('mousemove', this, true); // + document.addEventListener('pointermove', this, true); document.addEventListener('keydown', this, true); document.addEventListener('contextmenu', this, true); } @@ -903,8 +916,10 @@ export class TabBar extends Widget { event.stopPropagation(); // Remove the extra mouse event listeners. - document.removeEventListener('mousemove', this, true); - document.removeEventListener('mouseup', this, true); + document.removeEventListener('mousemove', this, true); // + document.removeEventListener('mouseup', this, true); // + document.removeEventListener('pointermove', this, true); + document.removeEventListener('pointerup', this, true); document.removeEventListener('keydown', this, true); document.removeEventListener('contextmenu', this, true); @@ -1036,8 +1051,10 @@ export class TabBar extends Widget { this._dragData = null; // Remove the extra mouse listeners. - document.removeEventListener('mousemove', this, true); - document.removeEventListener('mouseup', this, true); + document.removeEventListener('mousemove', this, true); // + document.removeEventListener('mouseup', this, true); // + document.removeEventListener('pointermove', this, true); + document.removeEventListener('pointerup', this, true); document.removeEventListener('keydown', this, true); document.removeEventListener('contextmenu', this, true); diff --git a/packages/widgets/style/tabbar.css b/packages/widgets/style/tabbar.css index 2e9edaa35..6f64eab47 100644 --- a/packages/widgets/style/tabbar.css +++ b/packages/widgets/style/tabbar.css @@ -62,6 +62,7 @@ flex-direction: row; box-sizing: border-box; overflow: hidden; + touch-action: none; /* Disable native Drag/Drop */ } /* */