feat: improve dnd (#300)

* feat: improve dnd

* chore: cleanup

* fix: bugs

* chore: cleanup

* feat: get closest canvas parent

* chore: cleanup

* feat: optimization

* chore: cleanup

Author: prevwong

cypress/support/dnd.ts

@@ -199,14 +199,14 @@ Cypress.Commands.add(
         });
 
       if (position === 'inside') {
-        cy.get('@target').trigger('dragenter', {
+        cy.get('@target').trigger('dragover', {
           clientX: Math.floor(x),
           clientY: Math.floor(y),
           dataTransfer,
           force: true,
         });
       } else {
-        cy.get('@parent').trigger('dragenter', {
+        cy.get('@parent').trigger('dragover', {
           clientX: Math.floor(x),
           clientY: Math.floor(y),
           dataTransfer,

packages/core/src/editor/query.tsx

@@ -44,6 +44,8 @@ export function QueryMethods(state: EditorState) {
   return {
     /**
      * Determine the best possible location to drop the source Node relative to the target Node
+     *
+     * TODO: replace with Positioner.computeIndicator();
      */
     getDropPlaceholder: (
       source: NodeSelector,
@@ -93,7 +95,7 @@ export function QueryMethods(state: EditorState) {
           ...dropAction,
           currentNode,
         },
-        error: false,
+        error: null,
       };
 
       const sourceNodes = getNodesFromSelector(state.nodes, source);
@@ -122,6 +124,10 @@ export function QueryMethods(state: EditorState) {
       return options;
     },
 
+    getNodes() {
+      return state.nodes;
+    },
+
     /**
      * Helper methods to describe the specified Node
      * @param id

packages/core/src/editor/useInternalEditor.ts

@@ -3,9 +3,9 @@ import {
   useCollectorReturnType,
   QueryCallbacksFor,
   wrapConnectorHooks,
-  ChainableConnectors,
+  EventHandlerConnectors,
 } from '@craftjs/utils';
-import { useContext, useMemo } from 'react';
+import { useContext, useEffect, useMemo } from 'react';
 
 import { EditorContext } from './EditorContext';
 import { QueryMethods } from './query';
@@ -26,22 +26,34 @@ export type useInternalEditorReturnType<C = null> = useCollectorReturnType<
 > & {
   inContext: boolean;
   store: EditorStore;
-  connectors: ChainableConnectors<
-    CoreEventHandlers['connectors'],
-    React.ReactElement
-  >;
+  connectors: EventHandlerConnectors<CoreEventHandlers, React.ReactElement>;
 };
 
 export function useInternalEditor<C>(
   collector?: EditorCollector<C>
 ): useInternalEditorReturnType<C> {
-  const handlers = useEventHandler();
+  const handler = useEventHandler();
   const store = useContext(EditorContext);
   const collected = useCollector(store, collector);
 
+  const connectorsUsage = useMemo(
+    () => handler && handler.createConnectorsUsage(),
+    [handler]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (!connectorsUsage) {
+        return;
+      }
+
+      connectorsUsage.cleanup();
+    };
+  }, [connectorsUsage]);
+
   const connectors = useMemo(
-    () => handlers && wrapConnectorHooks(handlers.connectors),
-    [handlers]
+    () => connectorsUsage && wrapConnectorHooks(connectorsUsage.connectors),
+    [connectorsUsage]
   );
 
   return {

packages/core/src/events/DefaultEventHandlers.ts

@@ -1,11 +1,10 @@
 import { isFunction } from 'lodash';
 
 import { CoreEventHandlers, CreateHandlerOptions } from './CoreEventHandlers';
+import { Positioner } from './Positioner';
 import { createShadow } from './createShadow';
 
-import { Indicator, NodeId, NodeTree, Node } from '../interfaces';
-
-type DraggedElement = NodeId[] | NodeTree;
+import { Indicator, NodeId, DragTarget } from '../interfaces';
 
 export type DefaultEventHandlersOptions = {
   isMultiSelectEnabled: (e: MouseEvent) => boolean;
@@ -18,10 +17,14 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
   DefaultEventHandlersOptions & O
 > {
   static draggedElementShadow: HTMLElement;
-  static draggedElement: DraggedElement;
-  static indicator: Indicator = null;
+  dragTarget: DragTarget;
+  positioner: Positioner | null = null;
   currentSelectedElementIds = [];
 
+  onDisable() {
+    this.options.store.actions.clearEvents();
+  }
+
   handlers() {
     const store = this.options.store;
 
@@ -108,7 +111,6 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
         });
 
         return () => {
-          store.actions.setNodeEvent('selected', null);
           unbindOnMouseDown();
           unbindOnClick();
         };
@@ -124,50 +126,41 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
         );
 
         return () => {
-          store.actions.setNodeEvent('hovered', null);
           unbindMouseover();
         };
       },
       drop: (el: HTMLElement, targetId: NodeId) => {
         const unbindDragOver = this.addCraftEventListener(
           el,
           'dragover',
-          (e) => {
-            e.craft.stopPropagation();
-            e.preventDefault();
-          }
-        );
-
-        const unbindDragEnter = this.addCraftEventListener(
-          el,
-          'dragenter',
           (e) => {
             e.craft.stopPropagation();
             e.preventDefault();
 
-            const draggedElement = DefaultEventHandlers.draggedElement;
-            if (!draggedElement) {
+            if (!this.positioner) {
               return;
             }
 
-            let node = (draggedElement as unknown) as Node;
-
-            if ((draggedElement as NodeTree).rootNodeId) {
-              const nodeTree = draggedElement as NodeTree;
-              node = nodeTree.nodes[nodeTree.rootNodeId];
-            }
-
-            const { clientX: x, clientY: y } = e;
-            const indicator = store.query.getDropPlaceholder(node, targetId, {
-              x,
-              y,
-            });
+            const indicator = this.positioner.computeIndicator(
+              targetId,
+              e.clientX,
+              e.clientY
+            );
 
             if (!indicator) {
               return;
             }
+
             store.actions.setIndicator(indicator);
-            DefaultEventHandlers.indicator = indicator;
+          }
+        );
+
+        const unbindDragEnter = this.addCraftEventListener(
+          el,
+          'dragenter',
+          (e) => {
+            e.craft.stopPropagation();
+            e.preventDefault();
           }
         );
 
@@ -203,18 +196,36 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
               query.node(id).get().dom,
               selectedDOMs
             );
-            DefaultEventHandlers.draggedElement = selectedElementIds;
+            this.dragTarget = {
+              type: 'existing',
+              nodes: selectedElementIds,
+            };
+
+            this.positioner = new Positioner(
+              this.options.store,
+              this.dragTarget
+            );
           }
         );
 
         const unbindDragEnd = this.addCraftEventListener(el, 'dragend', (e) => {
           e.craft.stopPropagation();
-          const onDropElement = (draggedElement, placement) => {
+
+          this.dropElement((dragTarget, indicator) => {
+            if (dragTarget.type === 'new') {
+              return;
+            }
+
             const index =
-              placement.index + (placement.where === 'after' ? 1 : 0);
-            store.actions.move(draggedElement, placement.parent.id, index);
-          };
-          this.dropElement(onDropElement);
+              indicator.placement.index +
+              (indicator.placement.where === 'after' ? 1 : 0);
+
+            store.actions.move(
+              dragTarget.nodes,
+              indicator.placement.parent.id,
+              index
+            );
+          });
         });
 
         return () => {
@@ -240,30 +251,41 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
               .toNodeTree();
 
             const dom = e.currentTarget as HTMLElement;
-
             DefaultEventHandlers.draggedElementShadow = createShadow(e, dom, [
-              dom,
+              el,
             ]);
-            DefaultEventHandlers.draggedElement = tree;
+            this.dragTarget = {
+              type: 'new',
+              tree,
+            };
+
+            this.positioner = new Positioner(
+              this.options.store,
+              this.dragTarget
+            );
           }
         );
 
         const unbindDragEnd = this.addCraftEventListener(el, 'dragend', (e) => {
           e.craft.stopPropagation();
-          const onDropElement = (draggedElement, placement) => {
+          this.dropElement((dragTarget, indicator) => {
+            if (dragTarget.type === 'existing') {
+              return;
+            }
+
             const index =
-              placement.index + (placement.where === 'after' ? 1 : 0);
+              indicator.placement.index +
+              (indicator.placement.where === 'after' ? 1 : 0);
             store.actions.addNodeTree(
-              draggedElement,
-              placement.parent.id,
+              dragTarget.tree,
+              indicator.placement.parent.id,
               index
             );
 
             if (options && isFunction(options.onCreate)) {
-              options.onCreate(draggedElement);
+              options.onCreate(dragTarget.tree);
             }
-          };
-          this.dropElement(onDropElement);
+          });
         });
 
         return () => {
@@ -276,32 +298,33 @@ export class DefaultEventHandlers<O = {}> extends CoreEventHandlers<
   }
 
   private dropElement(
-    onDropNode: (
-      draggedElement: DraggedElement,
-      placement: Indicator['placement']
-    ) => void
+    onDropNode: (dragTarget: DragTarget, placement: Indicator) => void
   ) {
     const store = this.options.store;
 
-    const {
-      draggedElement,
-      draggedElementShadow,
-      indicator,
-    } = DefaultEventHandlers;
-    if (draggedElement && indicator && !indicator.error) {
-      const { placement } = indicator;
-      onDropNode(draggedElement, placement);
+    if (!this.positioner) {
+      return;
+    }
+
+    const { draggedElementShadow } = DefaultEventHandlers;
+
+    const indicator = this.positioner.getIndicator();
+
+    if (this.dragTarget && indicator && !indicator.error) {
+      onDropNode(this.dragTarget, indicator);
     }
 
     if (draggedElementShadow) {
       draggedElementShadow.parentNode.removeChild(draggedElementShadow);
       DefaultEventHandlers.draggedElementShadow = null;
     }
 
-    DefaultEventHandlers.draggedElement = null;
-    DefaultEventHandlers.indicator = null;
+    this.dragTarget = null;
 
     store.actions.setIndicator(null);
     store.actions.setNodeEvent('dragged', null);
+    this.positioner.cleanup();
+
+    this.positioner = null;
   }
 }