Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Basic Touch Events #123

Merged
merged 9 commits into from
Sep 30, 2021
Merged

Basic Touch Events #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0014b5d
feat(touch): Add basic touch support to tabbar :children_crossing:
bign8 Sep 7, 2020
a2ad28a
refactor(touch): Expose convertTouchToMouseEvent for DRY :recycle:
bign8 Sep 7, 2020
04c630c
feat(touch): Add touch resize handlers :point_up:
bign8 Sep 7, 2020
c5b8e68
test(touch): verify touch to mouse conversion :white_check_mark:
bign8 Sep 8, 2020
df3b286
Merge branch 'master' of github.com:jupyterlab/lumino into touch-events
bign8 Sep 26, 2021
2432f56
remove eslint exceptions
bign8 Sep 26, 2021
5135519
Use PointerEvents instead of TouchEvents
bign8 Sep 26, 2021
3754c7b
Restoring MouseEvents (marked as deprecated)
bign8 Sep 26, 2021
0aad95b
Merge branch 'master' of oss-github.com:jupyterlab/lumino into touch-…
Sep 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand All @@ -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.

56 changes: 38 additions & 18 deletions packages/dragdrop/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down Expand Up @@ -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.
Expand All @@ -257,10 +257,16 @@ export class Drag implements IDisposable {
*/
handleEvent(event: Event): void {
switch (event.type) {
case 'mousemove':
case 'mousemove': // <DEPRECATED>
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
case 'mouseup': // <DEPRECATED>
this._evtMouseUp(event as MouseEvent);
break;
case 'pointermove':
this._evtMouseMove(event as MouseEvent);
break;
case 'pointerup':
this._evtMouseUp(event as MouseEvent);
break;
case 'keydown':
Expand Down Expand Up @@ -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); // <DEPRECATED>
document.addEventListener('mousemove', this, true); // <DEPRECATED>
document.addEventListener('mouseup', this, true); // <DEPRECATED>
document.addEventListener('mouseenter', this, true); // <DEPRECATED>
document.addEventListener('mouseleave', this, true); // <DEPRECATED>
document.addEventListener('mouseover', this, true); // <DEPRECATED>
document.addEventListener('mouseout', this, true); // <DEPRECATED>
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);
Expand All @@ -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); // <DEPRECATED>
document.removeEventListener('mousemove', this, true); // <DEPRECATED>
document.removeEventListener('mouseup', this, true); // <DEPRECATED>
document.removeEventListener('mouseenter', this, true); // <DEPRECATED>
document.removeEventListener('mouseleave', this, true); // <DEPRECATED>
document.removeEventListener('mouseover', this, true); // <DEPRECATED>
document.removeEventListener('mouseout', this, true); // <DEPRECATED>
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);
Expand Down
33 changes: 24 additions & 9 deletions packages/widgets/src/dockpanel.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -428,13 +428,22 @@ export class DockPanel extends Widget {
case 'lm-drop':
this._evtDrop(event as IDragEvent);
break;
case 'mousedown':
case 'mousedown': // <DEPRECATED>
this._evtMouseDown(event as MouseEvent);
break;
case 'mousemove':
case 'mousemove': // <DEPRECATED>
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
case 'mouseup': // <DEPRECATED>
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':
Expand All @@ -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); // <DEPRECATED>
this.node.addEventListener('pointerdown', this);
}

/**
Expand All @@ -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); // <DEPRECATED>
this.node.removeEventListener('pointerdown', this);
this._releaseMouse();
}

Expand Down Expand Up @@ -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); // <DEPRECATED>
document.addEventListener('mousemove', this, true); // <DEPRECATED>
document.addEventListener('pointerup', this, true);
document.addEventListener('pointermove', this, true);
document.addEventListener('contextmenu', this, true);

// Compute the offset deltas for the handle press.
Expand Down Expand Up @@ -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); // <DEPRECATED>
document.removeEventListener('mousemove', this, true); // <DEPRECATED>
document.removeEventListener('pointerup', this, true);
document.removeEventListener('pointermove', this, true);
document.removeEventListener('contextmenu', this, true);
}

Expand Down
39 changes: 28 additions & 11 deletions packages/widgets/src/tabbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -580,13 +580,22 @@ export class TabBar<T> extends Widget {
*/
handleEvent(event: Event): void {
switch (event.type) {
case 'mousedown':
case 'mousedown': // <DEPRECATED>
this._evtMouseDown(event as MouseEvent);
break;
case 'mousemove':
case 'mousemove': // <DEPRECATED>
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
case 'mouseup': // <DEPRECATED>
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':
Expand All @@ -606,15 +615,17 @@ export class TabBar<T> 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); // <DEPRECATED>
this.node.addEventListener('pointerdown', this);
this.node.addEventListener('dblclick', this);
}

/**
* A message handler invoked on an `'after-detach'` message.
*/
protected onAfterDetach(msg: Message): void {
this.node.removeEventListener('mousedown', this);
this.node.removeEventListener('mousedown', this); // <DEPRECATED>
this.node.removeEventListener('pointerdown', this);
this.node.removeEventListener('dblclick', this);
this._releaseMouse();
}
Expand Down Expand Up @@ -768,7 +779,8 @@ export class TabBar<T> extends Widget {
};

// Add the document mouse up listener.
document.addEventListener('mouseup', this, true);
document.addEventListener('mouseup', this, true); // <DEPRECATED>
document.addEventListener('pointerup', this, true);

// Do nothing else if the middle button or add button is clicked.
if (event.button === 1 || addButtonClicked) {
Expand All @@ -783,7 +795,8 @@ export class TabBar<T> extends Widget {

// Add the extra listeners if the tabs are movable.
if (this.tabsMovable) {
document.addEventListener('mousemove', this, true);
document.addEventListener('mousemove', this, true); // <DEPRECATED>
document.addEventListener('pointermove', this, true);
document.addEventListener('keydown', this, true);
document.addEventListener('contextmenu', this, true);
}
Expand Down Expand Up @@ -903,8 +916,10 @@ export class TabBar<T> 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); // <DEPRECATED>
document.removeEventListener('mouseup', this, true); // <DEPRECATED>
document.removeEventListener('pointermove', this, true);
document.removeEventListener('pointerup', this, true);
document.removeEventListener('keydown', this, true);
document.removeEventListener('contextmenu', this, true);

Expand Down Expand Up @@ -1036,8 +1051,10 @@ export class TabBar<T> 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); // <DEPRECATED>
document.removeEventListener('mouseup', this, true); // <DEPRECATED>
document.removeEventListener('pointermove', this, true);
document.removeEventListener('pointerup', this, true);
document.removeEventListener('keydown', this, true);
document.removeEventListener('contextmenu', this, true);

Expand Down
1 change: 1 addition & 0 deletions packages/widgets/style/tabbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@
flex-direction: row;
box-sizing: border-box;
overflow: hidden;
touch-action: none; /* Disable native Drag/Drop */
}

/* <DEPRECATED> */
Expand Down