Improve performance of drag & drop, esp. in Chrome (#502)

Author: krassowski

packages/dragdrop/src/index.ts

@@ -231,8 +231,7 @@ export class Drag implements IDisposable {
       return;
     }
     let style = this.dragImage.style;
-    style.top = `${clientY}px`;
-    style.left = `${clientX}px`;
+    style.transform = `translate(${clientX}px, ${clientY}px)`;
   }
 
   /**
@@ -371,7 +370,7 @@ export class Drag implements IDisposable {
     let prevElem = this._currentElement;
 
     // Find the current indicated element at the given position.
-    let currElem = this.document.elementFromPoint(event.clientX, event.clientY);
+    let currElem = Private.findElementBehidBackdrop(event, this.document);
 
     // Update the current element reference.
     this._currentElement = currElem;
@@ -415,8 +414,7 @@ export class Drag implements IDisposable {
     let style = this.dragImage.style;
     style.pointerEvents = 'none';
     style.position = 'fixed';
-    style.top = `${clientY}px`;
-    style.left = `${clientX}px`;
+    style.transform = `translate(${clientX}px, ${clientY}px)`;
     const body =
       this.document instanceof Document
         ? this.document.body
@@ -789,25 +787,8 @@ export namespace Drag {
     cursor: string,
     doc: Document | ShadowRoot = document
   ): IDisposable {
-    let id = ++overrideCursorID;
-    const body =
-      doc instanceof Document
-        ? doc.body
-        : (doc.firstElementChild as HTMLElement);
-    body.style.cursor = cursor;
-    body.classList.add('lm-mod-override-cursor');
-    return new DisposableDelegate(() => {
-      if (id === overrideCursorID) {
-        body.style.cursor = '';
-        body.classList.remove('lm-mod-override-cursor');
-      }
-    });
+    return Private.overrideCursor(cursor, doc);
   }
-
-  /**
-   * The internal id for the active cursor override.
-   */
-  let overrideCursorID = 0;
 }
 
 /**
@@ -851,6 +832,32 @@ namespace Private {
     distance: number;
   }
 
+  /**
+   * Find the event target using pointer position.
+   */
+  export function findElementBehidBackdrop(
+    event: PointerEvent,
+    root: Document | ShadowRoot = document
+  ) {
+    // Check if we already cached element for this event.
+    if (lastElementSearch && event == lastElementSearch.event) {
+      return lastElementSearch.element;
+    }
+    Private.cursorBackdrop.style.zIndex = '-1000';
+    const element: Element | null = root.elementFromPoint(
+      event.clientX,
+      event.clientY
+    );
+    Private.cursorBackdrop.style.zIndex = '';
+    lastElementSearch = { event, element };
+    return element;
+  }
+
+  let lastElementSearch: {
+    event: PointerEvent;
+    element: Element | null;
+  } | null = null;
+
   /**
    * Find the drag scroll target under the mouse, if any.
    */
@@ -860,7 +867,7 @@ namespace Private {
     let y = event.clientY;
 
     // Get the element under the mouse.
-    let element: Element | null = document.elementFromPoint(x, y);
+    let element: Element | null = findElementBehidBackdrop(event);
 
     // Search for a scrollable target based on the mouse position.
     // The null assert in third clause of for-loop is required due to:
@@ -1211,4 +1218,67 @@ namespace Private {
     'link-move': actionTable['link'] | actionTable['move'],
     all: actionTable['copy'] | actionTable['link'] | actionTable['move']
   };
+
+  /**
+   * Implementation of `Drag.overrideCursor`.
+   */
+  export function overrideCursor(
+    cursor: string,
+    doc: Document | ShadowRoot = document
+  ): IDisposable {
+    let id = ++overrideCursorID;
+    const body =
+      doc instanceof Document
+        ? doc.body
+        : (doc.firstElementChild as HTMLElement);
+    if (!cursorBackdrop.isConnected) {
+      body.appendChild(cursorBackdrop);
+      document.addEventListener('pointermove', alignBackdrop, {
+        capture: true,
+        passive: true
+      });
+    }
+    cursorBackdrop.style.cursor = cursor;
+    return new DisposableDelegate(() => {
+      if (id === overrideCursorID && cursorBackdrop.isConnected) {
+        document.removeEventListener('pointermove', alignBackdrop, true);
+        body.removeChild(cursorBackdrop);
+      }
+    });
+  }
+
+  /**
+   * Move cursor backdrop to match cursor position.
+   */
+  function alignBackdrop(event: PointerEvent) {
+    if (!cursorBackdrop) {
+      return;
+    }
+    cursorBackdrop.style.transform = `translate(${event.clientX}px, ${event.clientY}px)`;
+  }
+
+  /**
+   * Create cursor backdrop node.
+   */
+  function createCursorBackdrop(): HTMLElement {
+    const backdrop = document.createElement('div');
+    backdrop.classList.add('lm-cursor-backdrop');
+    return backdrop;
+  }
+
+  /**
+   * The internal id for the active cursor override.
+   */
+  let overrideCursorID = 0;
+
+  /**
+   * A backdrop node overriding pointer cursor.
+   *
+   * #### Notes
+   * We use a backdrop node rather than setting the cursor directly on the body
+   * because setting it on body requires more extensive style recalculation for
+   * reliable application of the cursor, this is the cursor not being overriden
+   * when over child elements with another style like `cursor: other!important`.
+   */
+  export const cursorBackdrop: HTMLElement = createCursorBackdrop();
 }

packages/dragdrop/style/index.css

@@ -12,6 +12,16 @@
 | The full license is in the file LICENSE, distributed with this software.
 |----------------------------------------------------------------------------*/
 
-body.lm-mod-override-cursor * {
-  cursor: inherit !important;
+.lm-cursor-backdrop {
+  position: fixed;
+  width: 200px;
+  height: 200px;
+  margin-top: -100px;
+  margin-left: -100px;
+  will-change: transform;
+  z-index: 100;
+}
+
+.lm-mod-drag-image {
+  will-change: transform;
 }

packages/dragdrop/tests/src/index.spec.ts

@@ -215,8 +215,7 @@ describe('@lumino/dragdrop', () => {
         dragImage.style.minWidth = '10px';
         let drag = new Drag({ mimeData: new MimeData(), dragImage });
         drag.start(10, 20);
-        expect(dragImage.style.top).to.equal('20px');
-        expect(dragImage.style.left).to.equal('10px');
+        expect(dragImage.style.transform).to.equal(`translate(10px, 20px)`);
         drag.dispose();
       });
 
@@ -308,8 +307,9 @@ describe('@lumino/dragdrop', () => {
             })
           );
           let image = drag.dragImage!;
-          expect(image.style.top).to.equal(`${rect.top + 1}px`);
-          expect(image.style.left).to.equal(`${rect.left + 1}px`);
+          expect(image.style.transform).to.equal(
+            `translate(${rect.left + 1}px, ${rect.top + 1}px)`
+          );
         });
       });
 
@@ -554,93 +554,62 @@ describe('@lumino/dragdrop', () => {
     });
 
     describe('.overrideCursor()', () => {
-      it('should update the body `cursor` style', () => {
-        expect(document.body.style.cursor).to.equal('');
-        let override = Drag.overrideCursor('wait');
-        expect(document.body.style.cursor).to.equal('wait');
-        override.dispose();
-      });
-
-      it('should add the `lm-mod-override-cursor` class to the body', () => {
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(false);
-        let override = Drag.overrideCursor('wait');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
-        override.dispose();
-      });
-
-      it('should clear the override when disposed', () => {
-        expect(document.body.style.cursor).to.equal('');
+      it('should attach a backdrop with `cursor` style', () => {
+        expect(document.querySelector('.lm-cursor-backdrop')).to.equal(null);
         let override = Drag.overrideCursor('wait');
-        expect(document.body.style.cursor).to.equal('wait');
+        const backdrop = document.querySelector(
+          '.lm-cursor-backdrop'
+        ) as HTMLElement;
+        expect(backdrop.style.cursor).to.equal('wait');
         override.dispose();
-        expect(document.body.style.cursor).to.equal('');
       });
 
-      it('should remove the `lm-mod-override-cursor` class when disposed', () => {
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(false);
+      it('should detach the backdrop when disposed', () => {
+        expect(document.querySelector('.lm-cursor-backdrop')).to.equal(null);
         let override = Drag.overrideCursor('wait');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        expect(document.querySelector('.lm-cursor-backdrop')).to.not.equal(
+          null
+        );
         override.dispose();
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(false);
+        expect(document.querySelector('.lm-cursor-backdrop')).to.equal(null);
       });
 
       it('should respect the most recent override', () => {
-        expect(document.body.style.cursor).to.equal('');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(false);
         let one = Drag.overrideCursor('wait');
-        expect(document.body.style.cursor).to.equal('wait');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        const backdrop = document.querySelector(
+          '.lm-cursor-backdrop'
+        ) as HTMLElement;
+        expect(backdrop.style.cursor).to.equal('wait');
+        expect(backdrop.isConnected).to.equal(true);
         let two = Drag.overrideCursor('default');
-        expect(document.body.style.cursor).to.equal('default');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        expect(backdrop.style.cursor).to.equal('default');
+        expect(backdrop.isConnected).to.equal(true);
         let three = Drag.overrideCursor('cell');
-        expect(document.body.style.cursor).to.equal('cell');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        expect(backdrop.style.cursor).to.equal('cell');
+        expect(backdrop.isConnected).to.equal(true);
         two.dispose();
-        expect(document.body.style.cursor).to.equal('cell');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        expect(backdrop.style.cursor).to.equal('cell');
+        expect(backdrop.isConnected).to.equal(true);
         one.dispose();
-        expect(document.body.style.cursor).to.equal('cell');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(true);
+        expect(backdrop.style.cursor).to.equal('cell');
+        expect(backdrop.isConnected).to.equal(true);
         three.dispose();
-        expect(document.body.style.cursor).to.equal('');
-        expect(
-          document.body.classList.contains('lm-mod-override-cursor')
-        ).to.equal(false);
+        expect(backdrop.isConnected).to.equal(false);
       });
 
-      it('should override the computed cursor for a node', () => {
-        let div = document.createElement('div');
-        div.style.cursor = 'cell';
-        document.body.appendChild(div);
-        expect(window.getComputedStyle(div).cursor).to.equal('cell');
+      it('should move backdrop with pointer', () => {
         let override = Drag.overrideCursor('wait');
-        expect(window.getComputedStyle(div).cursor).to.equal('wait');
+        const backdrop = document.querySelector(
+          '.lm-cursor-backdrop'
+        ) as HTMLElement;
+        document.dispatchEvent(
+          new PointerEvent('pointermove', {
+            clientX: 100,
+            clientY: 500
+          })
+        );
+        expect(backdrop.style.transform).to.equal('translate(100px, 500px)');
         override.dispose();
-        expect(window.getComputedStyle(div).cursor).to.equal('cell');
-        document.body.removeChild(div);
       });
     });
   });