Refactor event handler to add more unit tests and make it more readab…

…le (#11)

* couple small style improvements

* refactor event handlers

* sort the query methods by name

packages/core/src/editor/query.tsx

@@ -41,44 +41,22 @@ export function QueryMethods(Editor: EditorState) {
     typeof node === "string" ? Editor.nodes[node] : node;
 
   return {
-    /**
-     * Get the current Editor options
-     */
-    getOptions(): Options {
-      return options;
-    },
     /**
      * Get a Node representing the specified React Element
-     * @param child
+     * @param reactElement
      * @param extras
      */
-    createNode(child: React.ReactElement | string, extras?: any) {
-      const node = transformJSXToNode(child, extras);
+    createNode(reactElement: React.ReactElement | string, extras?: any) {
+      const node = transformJSXToNode(reactElement, extras);
+
       const name = resolveComponent(options.resolver, node.data.type);
       invariant(name !== null, ERRROR_NOT_IN_RESOLVER);
-      node.data.displayName = node.data.displayName
-        ? node.data.displayName
-        : name;
-
+      node.data.displayName = node.data.displayName || name;
       node.data.name = name;
+
       return node;
     },
 
-    getState(): Record<NodeId, SerializedNodeData> {
-      return Object.keys(Editor.nodes).reduce((result: any, id: NodeId) => {
-        const {
-          data: { ...data },
-        } = Editor.nodes[id];
-        result[id] = serializeNode({ ...data }, options.resolver);
-        return result;
-      }, {});
-    },
-    /**
-     * Retrieve the JSON representation of the editor's Nodes
-     */
-    serialize(): string {
-      return JSON.stringify(this.getState());
-    },
     /**
      * Determine the best possible location to drop the source Node relative to the target Node
      */
@@ -124,9 +102,9 @@ export function QueryMethods(Editor: EditorState) {
         pos.x,
         pos.y
       );
-      const currentNode = targetParentNodes.length
-        ? Editor.nodes[targetParentNodes[dropAction.index]]
-        : null;
+      const currentNode =
+        targetParentNodes.length &&
+        Editor.nodes[targetParentNodes[dropAction.index]];
 
       const output: Indicator = {
         placement: {
@@ -150,6 +128,24 @@ export function QueryMethods(Editor: EditorState) {
 
       return output;
     },
+
+    /**
+     * Get the current Editor options
+     */
+    getOptions(): Options {
+      return options;
+    },
+
+    getState(): Record<NodeId, SerializedNodeData> {
+      return Object.keys(Editor.nodes).reduce((result: any, id: NodeId) => {
+        const {
+          data: { ...data },
+        } = Editor.nodes[id];
+        result[id] = serializeNode({ ...data }, options.resolver);
+        return result;
+      }, {});
+    },
+
     /**
      * Helper methods to describe the specified Node
      * @param id
@@ -256,5 +252,12 @@ export function QueryMethods(Editor: EditorState) {
         },
       };
     },
+
+    /**
+     * Retrieve the JSON representation of the editor's Nodes
+     */
+    serialize(): string {
+      return JSON.stringify(this.getState());
+    },
   };
 }

packages/core/src/events/EventContext.ts

@@ -3,6 +3,4 @@ import { EventHandlers } from "./EventHandlers";
 
 export const EventHandlerContext = createContext<EventHandlers>(null);
 
-export const useEventHandler = () => {
-  return useContext(EventHandlerContext);
-};
+export const useEventHandler = () => useContext(EventHandlerContext);

packages/core/src/events/EventHandlers.ts

@@ -1,10 +1,22 @@
+import { createShadow } from "./createShadow";
 import { NodeId, Node, Indicator } from "../interfaces";
 import { Handlers, ConnectorsForHandlers } from "@candulabs/craft-utils";
 import { debounce } from "debounce";
 import { EditorStore } from "../editor/store";
 
 type DraggedElement = NodeId | Node;
 
+const event = ({
+  name,
+  handler,
+  capture,
+}: {
+  name: string;
+  handler: (e: MouseEvent, id: any) => void;
+  capture?: boolean;
+}) => (capture ? [name, handler, capture] : [name, handler]);
+const rapidDebounce = (f) => debounce(f, 1);
+
 /**
  * Specifies Editor-wide event handlers and connectors
  */
@@ -16,145 +28,139 @@ export class EventHandlers extends Handlers<
   static events: { indicator: Indicator };
 
   handlers() {
-    let handlers = {
+    return {
       select: {
-        init: () => {
-          return () => {
-            this.store.actions.setNodeEvent("selected", null);
-          };
-        },
+        init: () => () => this.store.actions.setNodeEvent("selected", null),
         events: [
-          [
-            "mousedown",
-            debounce((_, id: NodeId) => {
-              this.store.actions.setNodeEvent("selected", id);
-            }, 1),
-            true,
-          ],
+          event({
+            name: "mousedown",
+            handler: rapidDebounce((_, id: NodeId) =>
+              this.store.actions.setNodeEvent("selected", id)
+            ),
+            capture: true,
+          }),
         ],
       },
       hover: {
-        init: () => {
-          return () => {
-            this.store.actions.setNodeEvent("hovered", null);
-          };
-        },
+        init: () => () => this.store.actions.setNodeEvent("hovered", null),
         events: [
-          [
-            "mouseover",
-            debounce((_, id: NodeId) => {
-              this.store.actions.setNodeEvent("hovered", id);
-            }, 1),
-            true,
-          ],
+          event({
+            name: "mouseover",
+            handler: rapidDebounce((_, id: NodeId) =>
+              this.store.actions.setNodeEvent("hovered", id)
+            ),
+            capture: true,
+          }),
         ],
       },
       drop: {
         events: [
-          [
-            "dragover",
-            (e: MouseEvent, id: NodeId) => {
+          event({
+            name: "dragover",
+            handler: (e: MouseEvent) => {
               e.preventDefault();
               e.stopPropagation();
             },
-          ],
-          [
-            "dragenter",
-            (e: MouseEvent, id: NodeId) => {
+          }),
+          event({
+            name: "dragenter",
+            handler: (e: MouseEvent, id: NodeId) => {
               e.preventDefault();
               e.stopPropagation();
 
-              if (!EventHandlers.draggedElement) return;
+              if (!EventHandlers.draggedElement) {
+                return;
+              }
 
-              const getPlaceholder = this.store.query.getDropPlaceholder(
+              const { clientX: x, clientY: y } = e;
+              const indicator = this.store.query.getDropPlaceholder(
                 EventHandlers.draggedElement,
                 id,
-                {
-                  x: e.clientX,
-                  y: e.clientY,
-                }
+                { x, y }
               );
 
-              if (getPlaceholder) {
-                this.store.actions.setIndicator(getPlaceholder);
-                EventHandlers.events = {
-                  indicator: getPlaceholder,
-                };
+              if (!indicator) {
+                return;
               }
+              this.store.actions.setIndicator(indicator);
+              EventHandlers.events = { indicator };
             },
-          ],
+          }),
         ],
       },
 
       drag: {
-        init: (node) => {
-          node.setAttribute("draggable", true);
-          return () => {
-            node.setAttribute("draggable", false);
-          };
+        init: (el) => {
+          el.setAttribute("draggable", true);
+          return () => el.setAttribute("draggable", false);
         },
         events: [
-          [
-            "dragstart",
-            (e: DragEvent, id: NodeId) => {
+          event({
+            name: "dragstart",
+            handler: (e: DragEvent, id: NodeId) => {
               e.stopPropagation();
               e.stopImmediatePropagation();
+
               this.store.actions.setNodeEvent("dragged", id);
-              EventHandlers.createShadow(e, id);
+
+              EventHandlers.draggedElementShadow = createShadow(e);
+              EventHandlers.draggedElement = id;
             },
-          ],
-          [
-            "dragend",
-            (e: DragEvent) => {
+          }),
+          event({
+            name: "dragend",
+            handler: (e: DragEvent) => {
               e.stopPropagation();
-              this.dropElement((draggedElement, placement) => {
+
+              const onDropElement = (draggedElement, placement) =>
                 this.store.actions.move(
                   draggedElement as NodeId,
                   placement.parent.id,
                   placement.index + (placement.where === "after" ? 1 : 0)
                 );
-              });
+              this.dropElement(onDropElement);
             },
-          ],
+          }),
         ],
       },
       create: {
         init: (el) => {
           el.setAttribute("draggable", true);
-          return () => {
-            el.removeAttribute("draggable");
-          };
+          return () => el.removeAttribute("draggable");
         },
         events: [
-          [
-            "dragstart",
-            (e: DragEvent, userElement: React.ElementType) => {
+          event({
+            name: "dragstart",
+            handler: (e: DragEvent, userElement: React.ElementType) => {
               e.stopPropagation();
               e.stopImmediatePropagation();
+
               const node = this.store.query.createNode(userElement);
-              EventHandlers.createShadow(e, node);
+
+              EventHandlers.draggedElementShadow = createShadow(e);
+              EventHandlers.draggedElement = node;
             },
-          ],
-          [
-            "dragend",
-            (e: DragEvent) => {
+          }),
+          event({
+            name: "dragend",
+            handler: (e: DragEvent) => {
               e.stopPropagation();
-              this.dropElement((draggedElement, placement) => {
+
+              const onDropElement = (draggedElement, placement) => {
                 const index =
                   placement.index + (placement.where === "after" ? 1 : 0);
                 this.store.actions.addNodeAtIndex(
                   draggedElement,
                   placement.parent.id,
                   index
                 );
-              });
+              };
+              this.dropElement(onDropElement);
             },
-          ],
+          }),
         ],
       },
     };
-
-    return handlers;
   }
 
   private dropElement(
@@ -163,20 +169,14 @@ export class EventHandlers extends Handlers<
       placement: Indicator["placement"]
     ) => void
   ) {
-    const events = EventHandlers.events;
-    if (
-      EventHandlers.draggedElement &&
-      events.indicator &&
-      !events.indicator.error
-    ) {
+    const { draggedElement, draggedElementShadow, events } = EventHandlers;
+    if (draggedElement && events.indicator && !events.indicator.error) {
       const { placement } = events.indicator;
-      onDropNode(EventHandlers.draggedElement, placement);
+      onDropNode(draggedElement, placement);
     }
 
-    if (EventHandlers.draggedElementShadow) {
-      EventHandlers.draggedElementShadow.parentNode.removeChild(
-        EventHandlers.draggedElementShadow
-      );
+    if (draggedElementShadow) {
+      draggedElementShadow.parentNode.removeChild(draggedElementShadow);
       EventHandlers.draggedElementShadow = null;
     }
 
@@ -185,22 +185,6 @@ export class EventHandlers extends Handlers<
     this.store.actions.setNodeEvent("dragged", null);
   }
 
-  static createShadow(e: DragEvent, node?: DraggedElement) {
-    const shadow = (e.target as HTMLElement).cloneNode(true) as HTMLElement;
-    const { width, height } = (e.target as HTMLElement).getBoundingClientRect();
-    shadow.style.width = `${width}px`;
-    shadow.style.height = `${height}px`;
-    shadow.style.position = "fixed";
-    shadow.style.left = "-100%";
-    shadow.style.top = "-100%";
-
-    document.body.appendChild(shadow);
-    e.dataTransfer.setDragImage(shadow, 0, 0);
-
-    EventHandlers.draggedElementShadow = shadow;
-    EventHandlers.draggedElement = node;
-  }
-
   /**
    * Create a new instance of Handlers with reference to the current EventHandlers
    * @param type A class that extends DerivedEventHandlers