Skip to content

Commit

Permalink
Merge pull request #123 from bign8/touch-events
Browse files Browse the repository at this point in the history 
Basic Touch Events
  • Loading branch information
Steven Silvester authored Sep 30, 2021
2 parents 57fd0e4 + 0aad95b commit e6612f6
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 40 deletions.
2 changes: 0 additions & 2 deletions README.md
View file
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
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
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
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
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

0 comments on commit e6612f6

Please sign in to comment.