Skip to content

Commit

Permalink
Remove mouse event handlers from SplitPanel and leave only pointer ev…
Browse files Browse the repository at this point in the history 
…ents (#327)
  • Loading branch information
@afshin
afshin authored Aug 4, 2022
1 parent bbc29cf commit b89af36
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 72 deletions.
39 changes: 12 additions & 27 deletions packages/widgets/src/splitpanel.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,23 +166,14 @@ export class SplitPanel extends Panel {
*/
handleEvent(event: Event): void {
switch (event.type) {
case 'mousedown':
this._evtMouseDown(event as MouseEvent);
break;
case 'mousemove':
this._evtMouseMove(event as MouseEvent);
break;
case 'mouseup':
this._evtMouseUp(event as MouseEvent);
break;
case 'pointerdown':
this._evtMouseDown(event as MouseEvent);
this._evtPointerDown(event as PointerEvent);
break;
case 'pointermove':
this._evtMouseMove(event as MouseEvent);
this._evtPointerMove(event as PointerEvent);
break;
case 'pointerup':
this._evtMouseUp(event as MouseEvent);
this._evtPointerUp(event as PointerEvent);
break;
case 'keydown':
this._evtKeyDown(event as KeyboardEvent);
Expand All @@ -198,15 +189,13 @@ export class SplitPanel extends Panel {
* A message handler invoked on a `'before-attach'` message.
*/
protected onBeforeAttach(msg: Message): void {
this.node.addEventListener('mousedown', this);
this.node.addEventListener('pointerdown', this);
}

/**
* A message handler invoked on an `'after-detach'` message.
*/
protected onAfterDetach(msg: Message): void {
this.node.removeEventListener('mousedown', this);
this.node.removeEventListener('pointerdown', this);
this._releaseMouse();
}
Expand Down Expand Up @@ -244,15 +233,15 @@ export class SplitPanel extends Panel {
}

/**
* Handle the `'mousedown'` event for the split panel.
* Handle the `'pointerdown'` event for the split panel.
*/
private _evtMouseDown(event: MouseEvent): void {
// Do nothing if the left mouse button is not pressed.
private _evtPointerDown(event: PointerEvent): void {
// Do nothing if the primary button is not pressed.
if (event.button !== 0) {
return;
}

// Find the handle which contains the mouse target, if any.
// Find the handle which contains the target, if any.
let layout = this.layout as SplitLayout;
let index = ArrayExt.findFirstIndex(layout.handles, handle => {
return handle.contains(event.target as HTMLElement);
Expand All @@ -268,8 +257,6 @@ export class SplitPanel extends Panel {
event.stopPropagation();

// Add the extra document listeners.
document.addEventListener('mouseup', this, true);
document.addEventListener('mousemove', this, true);
document.addEventListener('pointerup', this, true);
document.addEventListener('pointermove', this, true);
document.addEventListener('keydown', this, true);
Expand All @@ -292,9 +279,9 @@ export class SplitPanel extends Panel {
}

/**
* Handle the `'mousemove'` event for the split panel.
* Handle the `'pointermove'` event for the split panel.
*/
private _evtMouseMove(event: MouseEvent): void {
private _evtPointerMove(event: PointerEvent): void {
// Stop the event when dragging a split handle.
event.preventDefault();
event.stopPropagation();
Expand All @@ -314,10 +301,10 @@ export class SplitPanel extends Panel {
}

/**
* Handle the `'mouseup'` event for the split panel.
* Handle the `'pointerup'` event for the split panel.
*/
private _evtMouseUp(event: MouseEvent): void {
// Do nothing if the left mouse button is not released.
private _evtPointerUp(event: PointerEvent): void {
// Do nothing if the primary button is not released.
if (event.button !== 0) {
return;
}
Expand Down Expand Up @@ -347,8 +334,6 @@ export class SplitPanel extends Panel {
this._handleMoved.emit();

// Remove the extra document listeners.
document.removeEventListener('mouseup', this, true);
document.removeEventListener('mousemove', this, true);
document.removeEventListener('keydown', this, true);
document.removeEventListener('pointerup', this, true);
document.removeEventListener('pointermove', this, true);
Expand Down
94 changes: 49 additions & 45 deletions packages/widgets/tests/src/splitpanel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,10 @@ function dragHandle(panel: LogSplitPanel): void {
let handle = panel.handles[0];
let rect = handle.getBoundingClientRect();
let args = { bubbles, clientX: rect.left + 1, clientY: rect.top + 1 };
handle.dispatchEvent(new MouseEvent('mousedown', args));
handle.dispatchEvent(new PointerEvent('pointerdown', args));
args = { bubbles, clientX: rect.left + 10, clientY: rect.top + 1 };
document.body.dispatchEvent(new MouseEvent('mousemove', args));
document.body.dispatchEvent(new MouseEvent('mouseup', { bubbles }));
document.body.dispatchEvent(new PointerEvent('pointermove', args));
document.body.dispatchEvent(new PointerEvent('pointerup', { bubbles }));
}

class LogSplitPanel extends SplitPanel {
Expand Down Expand Up @@ -96,8 +96,8 @@ describe('@lumino/widgets', () => {
});
Widget.attach(panel, document.body);
let handle = layout.handles[0];
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
panel.node.dispatchEvent(new KeyboardEvent('keydown', { bubbles }));
expect(panel.events).to.contain('keydown');
let node = panel.node;
Expand Down Expand Up @@ -228,42 +228,44 @@ describe('@lumino/widgets', () => {
panel.dispose();
});

context('mousedown', () => {
context('pointerdown', () => {
it('should attach other event listeners', () => {
let handle = layout.handles[0];
let body = document.body;
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
body.dispatchEvent(new MouseEvent('mousemove', { bubbles }));
expect(panel.events).to.contain('mousemove');
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
body.dispatchEvent(new PointerEvent('pointermove', { bubbles }));
expect(panel.events).to.contain('pointermove');
body.dispatchEvent(new KeyboardEvent('keydown', { bubbles }));
expect(panel.events).to.contain('keydown');
body.dispatchEvent(new MouseEvent('contextmenu', { bubbles }));
expect(panel.events).to.contain('contextmenu');
body.dispatchEvent(new MouseEvent('mouseup', { bubbles }));
expect(panel.events).to.contain('mouseup');
body.dispatchEvent(new PointerEvent('pointerup', { bubbles }));
expect(panel.events).to.contain('pointerup');
});

it('should be a no-op if it is not the left button', () => {
layout.handles[0].dispatchEvent(
new MouseEvent('mousedown', {
new PointerEvent('pointerdown', {
bubbles,
button: 1
})
);
expect(panel.events).to.contain('mousedown');
document.body.dispatchEvent(new MouseEvent('mousemove', { bubbles }));
expect(panel.events).to.not.contain('mousemove');
expect(panel.events).to.contain('pointerdown');
document.body.dispatchEvent(
new PointerEvent('pointermove', { bubbles })
);
expect(panel.events).to.not.contain('pointermove');
});
});

context('mousemove', () => {
context('pointermove', () => {
it('should move the handle right', done => {
let handle = layout.handles[1];
let rect = handle.getBoundingClientRect();
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
document.body.dispatchEvent(
new MouseEvent('mousemove', {
new PointerEvent('pointermove', {
bubbles,
clientX: rect.left + 10,
clientY: rect.top
Expand All @@ -283,9 +285,9 @@ describe('@lumino/widgets', () => {
});
let handle = layout.handles[1];
let rect = handle.getBoundingClientRect();
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
document.body.dispatchEvent(
new MouseEvent('mousemove', {
new PointerEvent('pointermove', {
bubbles,
clientX: rect.left,
clientY: rect.top - 2
Expand All @@ -299,16 +301,16 @@ describe('@lumino/widgets', () => {
});
});

context('mouseup', () => {
context('pointerup', () => {
it('should remove the event listeners', () => {
let handle = layout.handles[0];
let body = document.body;
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
body.dispatchEvent(new MouseEvent('mouseup', { bubbles }));
expect(panel.events).to.contain('mouseup');
body.dispatchEvent(new MouseEvent('mousemove', { bubbles }));
expect(panel.events).to.not.contain('mousemove');
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
body.dispatchEvent(new PointerEvent('pointerup', { bubbles }));
expect(panel.events).to.contain('pointerup');
body.dispatchEvent(new PointerEvent('pointermove', { bubbles }));
expect(panel.events).to.not.contain('pointermove');
body.dispatchEvent(new KeyboardEvent('keydown', { bubbles }));
expect(panel.events).to.not.contain('keydown');
body.dispatchEvent(new MouseEvent('contextmenu', { bubbles }));
Expand All @@ -318,40 +320,42 @@ describe('@lumino/widgets', () => {
it('should be a no-op if not the left button', () => {
let handle = layout.handles[0];
let body = document.body;
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
body.dispatchEvent(
new MouseEvent('mouseup', {
new PointerEvent('pointerup', {
bubbles,
button: 1
})
);
expect(panel.events).to.contain('mouseup');
body.dispatchEvent(new MouseEvent('mousemove', { bubbles }));
expect(panel.events).to.contain('mousemove');
expect(panel.events).to.contain('pointerup');
body.dispatchEvent(new PointerEvent('pointermove', { bubbles }));
expect(panel.events).to.contain('pointermove');
});
});

context('keydown', () => {
it('should release the mouse if `Escape` is pressed', () => {
let handle = layout.handles[0];
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
panel.node.dispatchEvent(
new KeyboardEvent('keydown', {
bubbles,
keyCode: 27
})
);
expect(panel.events).to.contain('keydown');
panel.node.dispatchEvent(new MouseEvent('mousemove', { bubbles }));
expect(panel.events).to.not.contain('mousemove');
panel.node.dispatchEvent(
new PointerEvent('pointermove', { bubbles })
);
expect(panel.events).to.not.contain('pointermove');
});
});

context('contextmenu', () => {
it('should prevent events during drag', () => {
let handle = layout.handles[0];
handle.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
handle.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
let event = new MouseEvent('contextmenu', {
bubbles,
cancelable: true
Expand All @@ -364,11 +368,11 @@ describe('@lumino/widgets', () => {
});

describe('#onAfterAttach()', () => {
it('should attach a mousedown listener to the node', () => {
it('should attach a pointerdown listener to the node', () => {
let panel = new LogSplitPanel();
Widget.attach(panel, document.body);
panel.node.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
panel.node.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
panel.dispose();
});
});
Expand All @@ -377,12 +381,12 @@ describe('@lumino/widgets', () => {
it('should remove all listeners', () => {
let panel = new LogSplitPanel();
Widget.attach(panel, document.body);
panel.node.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.contain('mousedown');
panel.node.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.contain('pointerdown');
Widget.detach(panel);
panel.events = [];
panel.node.dispatchEvent(new MouseEvent('mousedown', { bubbles }));
expect(panel.events).to.not.contain('mousedown');
panel.node.dispatchEvent(new PointerEvent('pointerdown', { bubbles }));
expect(panel.events).to.not.contain('pointerdown');
document.body.dispatchEvent(new KeyboardEvent('keyup', { bubbles }));
expect(panel.events).to.not.contain('keyup');
});
Expand Down

0 comments on commit b89af36

Please sign in to comment.