perf: dont trigger repaint when starting to drag items

Author: mattlewis92

projects/angular-draggable-droppable/src/lib/draggable.directive.spec.ts

@@ -764,21 +764,6 @@ describe('draggable directive', () => {
       .true;
   });
 
-  it('should make all elements on the page unable to select text while dragging', () => {
-    const tmp = document.createElement('div');
-    tmp.innerHTML = 'foo';
-    document.body.appendChild(tmp);
-    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
-    const draggableElement =
-      fixture.componentInstance.draggableElement.nativeElement;
-    triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
-    expect(getComputedStyle(tmp).userSelect).to.equal('none');
-    triggerDomEvent('mousemove', draggableElement, { clientX: 7, clientY: 10 });
-    expect(getComputedStyle(tmp).userSelect).to.equal('none');
-    triggerDomEvent('mouseup', draggableElement, { clientX: 7, clientY: 8 });
-    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
-  });
-
   it('should cancel the drag', () => {
     const draggableElement =
       fixture.componentInstance.draggableElement.nativeElement;
@@ -817,19 +802,13 @@ describe('draggable directive', () => {
       fixture.componentInstance.draggableElement.nativeElement;
     triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
     triggerDomEvent('mousemove', draggableElement, { clientX: 7, clientY: 10 });
-    expect(getComputedStyle(document.body.children[0]).userSelect).to.equal(
-      'none'
-    );
     triggerDomEvent('mousemove', draggableElement, { clientX: 7, clientY: 8 });
     fixture.destroy();
     expect(fixture.componentInstance.dragEnd).to.have.been.calledWith({
       x: 2,
       y: -2,
       dragCancelled: false
     });
-    expect(getComputedStyle(document.body.children[0]).userSelect).to.equal(
-      'auto'
-    );
   });
 
   it('should use the contents of the ghost element template as the inner html of the ghost element', () => {
@@ -884,17 +863,27 @@ describe('draggable directive', () => {
     });
   });
 
-  it('should allow elements to be selected if clicking but not dragging the element', () => {
+  it('should prevent text from being selected while dragging', () => {
     const tmp = document.createElement('div');
     tmp.innerHTML = 'foo';
     document.body.appendChild(tmp);
-    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
+    const preventDefault = sinon.spy();
+    triggerDomEvent('selectstart', tmp, {
+      preventDefault
+    });
+    expect(preventDefault).not.to.have.been.called;
     const draggableElement =
       fixture.componentInstance.draggableElement.nativeElement;
     triggerDomEvent('mousedown', draggableElement, { clientX: 5, clientY: 10 });
-    expect(getComputedStyle(tmp).userSelect).to.equal('none');
+    triggerDomEvent('selectstart', tmp, {
+      preventDefault
+    });
+    expect(preventDefault).to.have.been.calledOnce;
     triggerDomEvent('mouseup', draggableElement, { clientX: 5, clientY: 10 });
-    expect(getComputedStyle(tmp).userSelect).to.equal('auto');
+    triggerDomEvent('selectstart', tmp, {
+      preventDefault
+    });
+    expect(preventDefault).to.have.been.calledOnce;
   });
 
   it('should allow for draggable elements to be inside other draggable elements', () => {

projects/angular-draggable-droppable/src/lib/draggable.directive.ts

@@ -250,24 +250,6 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
           pointerDownEvent.event.stopPropagation();
         }
 
-        // hack to prevent text getting selected in safari while dragging
-        const globalDragStyle: HTMLStyleElement = this.renderer.createElement(
-          'style'
-        );
-        this.renderer.setAttribute(globalDragStyle, 'type', 'text/css');
-        this.renderer.appendChild(
-          globalDragStyle,
-          this.renderer.createText(`
-          body * {
-           -moz-user-select: none;
-           -ms-user-select: none;
-           -webkit-user-select: none;
-           user-select: none;
-          }
-        `)
-        );
-        this.document.head.appendChild(globalDragStyle);
-
         const startScrollPosition = this.getScrollPosition();
 
         const scrollContainerScroll$ = new Observable(observer => {
@@ -494,10 +476,17 @@ export class DraggableDirective implements OnInit, OnChanges, OnDestroy {
             currentDrag$.complete();
           });
 
-        merge(dragComplete$, dragEnded$)
-          .pipe(take(1))
-          .subscribe(() => {
-            this.document.head.removeChild(globalDragStyle);
+        const selectionStart$ = new Observable<Event>(observer => {
+          return this.renderer.listen('document', 'selectstart', e =>
+            observer.next(e)
+          );
+        });
+
+        // hack to prevent text getting selected in safari while dragging
+        selectionStart$
+          .pipe(takeUntil(merge(dragComplete$, dragEnded$)))
+          .subscribe(event => {
+            event.preventDefault();
           });
 
         return pointerMove;