Merge pull request #782 from jasongrout/splitpanel-pointercapture

In #760, it was reported that dragging a handle near an iframe can lose the drag events when the mouse goes over the iframe. This attempts to use the pointer capture semantics to ensure that the drag events continue to go to the splitpanel or dockpanel. It is similar to the solution at eclipse-theia/theia#15643.

We make the pointer capture optional to de-risk releasing this in a patch release and to make the testing (where we manually construct pointer events) still pass.

Author: jasongrout

packages/widgets/src/dockpanel.ts

@@ -721,6 +721,17 @@ export class DockPanel extends Widget {
     this._document.addEventListener('pointermove', this, true);
     this._document.addEventListener('contextmenu', this, true);
 
+    // Set the pointer capture to this split panel, ensuring the document
+    // listeners above will be triggered even if the pointer drifts over another
+    // document, like an iframe.
+    let pointerId = event.pointerId;
+    try {
+      this.node.setPointerCapture(pointerId);
+    } catch (e) {
+      // Pointer capture is nice to try, but may fail. In that case, ignore the
+      // failure.
+    }
+
     // Compute the offset deltas for the handle press.
     let rect = handle.getBoundingClientRect();
     let deltaX = event.clientX - rect.left;
@@ -729,7 +740,7 @@ export class DockPanel extends Widget {
     // Override the cursor and store the press data.
     let style = window.getComputedStyle(handle);
     let override = Drag.overrideCursor(style.cursor!, this._document);
-    this._pressData = { handle, deltaX, deltaY, override };
+    this._pressData = { handle, deltaX, deltaY, override, pointerId };
   }
 
   /**
@@ -784,6 +795,12 @@ export class DockPanel extends Widget {
       return;
     }
 
+    // Release the pointer capture if it is set.
+    let pointerId = this._pressData.pointerId;
+    if (this.node.hasPointerCapture(pointerId)) {
+      this.node.releasePointerCapture(pointerId);
+    }
+
     // Clear the override cursor.
     this._pressData.override.dispose();
     this._pressData = null;
@@ -1466,6 +1483,11 @@ namespace Private {
      * The disposable which will clear the override cursor.
      */
     override: IDisposable;
+
+    /**
+     * Pointer ID of the press event.
+     */
+    pointerId: number;
   }
 
   /**

packages/widgets/src/splitpanel.ts

@@ -262,6 +262,17 @@ export class SplitPanel extends Panel {
     document.addEventListener('keydown', this, true);
     document.addEventListener('contextmenu', this, true);
 
+    // Set the pointer capture to this split panel, ensuring the document
+    // listeners above will be triggered even if the pointer drifts over another
+    // document, like an iframe.
+    let pointerId = event.pointerId;
+    try {
+      this.node.setPointerCapture(pointerId);
+    } catch (e) {
+      // Pointer capture is nice to try, but may fail. In that case, ignore the
+      // failure.
+    }
+
     // Compute the offset delta for the handle press.
     let delta: number;
     let handle = layout.handles[index];
@@ -275,7 +286,7 @@ export class SplitPanel extends Panel {
     // Override the cursor and store the press data.
     let style = window.getComputedStyle(handle);
     let override = Drag.overrideCursor(style.cursor!);
-    this._pressData = { index, delta, override };
+    this._pressData = { index, delta, override, pointerId };
   }
 
   /**
@@ -326,8 +337,16 @@ export class SplitPanel extends Panel {
       return;
     }
 
+    // Release the pointer capture if it is set.
+    let pointerId = this._pressData.pointerId;
+    if (this.node.hasPointerCapture(pointerId)) {
+      this.node.releasePointerCapture(pointerId);
+    }
+
     // Clear the override cursor.
     this._pressData.override.dispose();
+
+    // Clear the press data.
     this._pressData = null;
 
     // Emit the handle moved signal.
@@ -471,6 +490,11 @@ namespace Private {
      * The disposable which will clear the override cursor.
      */
     override: IDisposable;
+
+    /**
+     * Pointer ID of the press event.
+     */
+    pointerId: number;
   }
 
   /**