fix: drag shadow (#304)

* feat: improve dnd

* chore: cleanup

* fix: bugs

* chore: cleanup

* fix: initial canvas dnd

* fix: drag shadow

* chore: cleanup

* feat: get closest canvas parent

* chore: cleanup

* feat: optimization

* chore: comment

Author: prevwong

packages/core/src/events/DefaultEventHandlers.ts

@@ -1,3 +1,4 @@
+import { isChromium, isLinux } from '@craftjs/utils';
 import { isFunction } from 'lodash';
 
 import { CoreEventHandlers, CreateHandlerOptions } from './CoreEventHandlers';
@@ -16,7 +17,14 @@ export type DefaultEventHandlersOptions = {
 export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
   DefaultEventHandlersOptions & O
 > {
-  static draggedElementShadow: HTMLElement;
+  /**
+   * Note: Multiple drag shadows (ie: via multiselect in v0.2 and higher) do not look good on Linux Chromium due to way it renders drag shadows in general,
+   * so will have to fallback to the single shadow approach above for the time being
+   * see: https://bugs.chromium.org/p/chromium/issues/detail?id=550999
+   */
+  static forceSingleDragShadow = isChromium() && isLinux();
+
+  draggedElementShadow: HTMLElement;
   dragTarget: DragTarget;
   positioner: Positioner | null = null;
   currentSelectedElementIds = [];
@@ -191,11 +199,12 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
               (id) => query.node(id).get().dom
             );
 
-            DefaultEventHandlers.draggedElementShadow = createShadow(
+            this.draggedElementShadow = createShadow(
               e,
-              query.node(id).get().dom,
-              selectedDOMs
+              selectedDOMs,
+              DefaultEventHandlers.forceSingleDragShadow
             );
+
             this.dragTarget = {
               type: 'existing',
               nodes: selectedElementIds,
@@ -251,9 +260,11 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
               .toNodeTree();
 
             const dom = e.currentTarget as HTMLElement;
-            DefaultEventHandlers.draggedElementShadow = createShadow(e, dom, [
-              el,
-            ]);
+            this.draggedElementShadow = createShadow(
+              e,
+              [dom],
+              DefaultEventHandlers.forceSingleDragShadow
+            );
             this.dragTarget = {
               type: 'new',
               tree,
@@ -306,7 +317,7 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
       return;
     }
 
-    const { draggedElementShadow } = DefaultEventHandlers;
+    const draggedElementShadow = this.draggedElementShadow;
 
     const indicator = this.positioner.getIndicator();
 
@@ -316,7 +327,7 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
 
     if (draggedElementShadow) {
       draggedElementShadow.parentNode.removeChild(draggedElementShadow);
-      DefaultEventHandlers.draggedElementShadow = null;
+      this.draggedElementShadow = null;
     }
 
     this.dragTarget = null;

packages/core/src/events/createShadow.ts

@@ -1,18 +1,32 @@
+// TODO: this approach does not work with Safari
+// Works partially with Linux (except on Chrome)
+// We'll need an alternate way to create drag shadows
 export const createShadow = (
   e: DragEvent,
-  targetDOM: HTMLElement,
-  shadowsToCreate: HTMLElement[]
+  shadowsToCreate: HTMLElement[],
+  forceSingleShadow: boolean = false
 ) => {
-  const selectorDOM = e.currentTarget as HTMLElement;
-  const {
-    top: targetTop,
-    left: targetLeft,
-  } = targetDOM.getBoundingClientRect();
-
-  if (!selectorDOM) {
-    return;
+  if (shadowsToCreate.length === 1 || forceSingleShadow) {
+    const { width, height } = shadowsToCreate[0].getBoundingClientRect();
+    const shadow = shadowsToCreate[0].cloneNode(true) as HTMLElement;
+
+    shadow.style.position = `fixed`;
+    shadow.style.left = `-100%`;
+    shadow.style.top = `-100%`;
+    shadow.style.width = `${width}px`;
+    shadow.style.height = `${height}px`;
+    shadow.style.pointerEvents = 'none';
+
+    document.body.appendChild(shadow);
+    e.dataTransfer.setDragImage(shadow, 0, 0);
+
+    return shadow;
   }
 
+  /**
+   * If there's supposed to be multiple drag shadows, we will create a single container div to store them
+   * That container will be used as the drag shadow for the current drag event
+   */
   const container = document.createElement('div');
   container.style.position = 'fixed';
   container.style.left = '-100%';
@@ -22,19 +36,20 @@ export const createShadow = (
   container.style.pointerEvents = 'none';
 
   shadowsToCreate.forEach((dom) => {
-    const shadow = dom.cloneNode(true) as HTMLElement;
     const { width, height, top, left } = dom.getBoundingClientRect();
+    const shadow = dom.cloneNode(true) as HTMLElement;
+
     shadow.style.position = `absolute`;
-    shadow.style.width = `${width}px`;
-    shadow.style.height = `${height}px`;
     shadow.style.left = `${left}px`;
     shadow.style.top = `${top}px`;
+    shadow.style.width = `${width}px`;
+    shadow.style.height = `${height}px`;
 
     container.appendChild(shadow);
   });
 
   document.body.appendChild(container);
-  e.dataTransfer.setDragImage(container, targetLeft, targetTop);
+  e.dataTransfer.setDragImage(container, e.clientX, e.clientY);
 
   return container;
 };

packages/utils/src/index.ts

@@ -9,3 +9,4 @@ export * from './deprecate';
 export * from './utilityTypes';
 export * from './History';
 export * from './getRandomId';
+export * from './platform';

packages/utils/src/platform.ts

@@ -0,0 +1,7 @@
+export const isClientSide = () => typeof window !== 'undefined';
+
+export const isLinux = () =>
+  isClientSide() && /Linux/i.test(window.navigator.userAgent);
+
+export const isChromium = () =>
+  isClientSide() && /Chrome/i.test(window.navigator.userAgent);