removes all dropzone typings from main index types and moves them exc…

…lusively to dropzone plugin.
formkit · Jan 22, 2024 · d89e3f5 · d89e3f5
1 parent 03ac66f
commit d89e3f5
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 169 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -10,8 +10,8 @@ import type {
   ParentObservers,
   ParentsData,
   NodesData,
-  DNDState,
-  DNDNodeState,
+  DragState,
+  DragStateNodes,
   NodeData,
   ParentData,
 } from "./types";
@@ -42,7 +42,7 @@ export const parentObservers: ParentObservers = new WeakMap<
   MutationObserver
 >();
 
-export let State: DNDState = {
+export let dragState: DragState = {
   direction: undefined,
   enterCount: 0,
   lastCoordinates: { x: 0, y: 0 },
@@ -67,9 +67,9 @@ export let State: DNDState = {
  *
  * @returns void
  */
-export function setDragState(nodeState: DNDNodeState): void {
-  State = {
-    ...State,
+export function setDragState(nodeState: DragStateNodes): void {
+  dragState = {
+    ...dragState,
     ...nodeState,
   };
 }
@@ -245,7 +245,7 @@ function remapNodes(parent: HTMLElement) {
     config.setupNode({ node, parent, parentData });
     //config.tearDownNode(child, parent, parentData);
 
-    if (!State?.draggedNodes || !config) continue;
+    if (!dragState?.draggedNodes || !config) continue;
 
     //const hasSelections = State.selectedValues.includes(values[x]);
 
@@ -269,7 +269,7 @@ function remapNodes(parent: HTMLElement) {
     //    : config?.dropZoneClass;
     //}
 
-    handleClass([node], dropZoneClass, State, false, true);
+    handleClass([node], dropZoneClass, dragState, false, true);
   }
 
   parents.set(parent, { ...parentData, enabledNodes });

diff --git a/src/plugins/dropZones/index.ts b/src/plugins/dropZones/index.ts
@@ -1,14 +1,14 @@
 import type {
   NodeEventData,
-  DropZoneConfig,
-  DropZoneEventData,
   SetupNodeData,
   TearDownNodeData,
 } from "../../types";
 
-import { parents, nodes } from "../../index";
+import type { DropZoneConfig, DropZoneEventData } from "./types";
 
-import { addDropZoneEvents } from "../../utils";
+import { parents, nodes, dragState } from "../../index";
+
+import { addDropZoneEvents } from "./utils";
 
 export const dropZones = new WeakMap<HTMLElement, DropZoneConfig>();
 
@@ -64,13 +64,13 @@ export function dropZone(dzConfig: Partial<DropZoneConfig>) {
  *
  */
 export function transfer(eventData: NodeEventData | DropZoneEventData): void {
-  const lastParent = State.lastParent;
+  const lastParent = dragState.lastParent;
 
   if (!lastParent) return;
 
   let lastParentValues = [...lastParent.data.getValues(lastParent.el)];
 
-  const draggedNodeValues = State.draggedNodes.map((x) => x.data.value);
+  const draggedNodeValues = dragState.draggedNodes.map((x) => x.data.value);
 
   // TODO:
   lastParentValues = [
@@ -119,15 +119,13 @@ export function initDropZone(
   parent: HTMLElement,
   dzConfig: Partial<DropZoneConfig>
 ) {
-  if (!Data.dropZones) Data.dropZones = new WeakMap();
-
-  Data.dropZones.set(dropZone, {
+  dropZones.set(dropZone, {
     parent: parent,
     config: dzConfig,
     eventListeners: {},
   });
 
-  const parentData = Data.parents.get(parent);
+  const parentData = parents.get(parent);
   if (!parentData) return;
 
   if (
@@ -139,7 +137,7 @@ export function initDropZone(
       config: dzConfig,
     });
 
-    Data.parents.set(parent, parentData);
+    parents.set(parent, parentData);
   }
 
   //events(dropZone, dzEvents, dzEvent);
@@ -148,8 +146,8 @@ export function initDropZone(
 }
 
 function handleTransfer(eventData: DropZoneEventData) {
-  if (State.lastParent?.el !== eventData.targetData.parent.el)
+  if (dragState.lastParent?.el !== eventData.targetData.parent.el)
     transfer(eventData);
 
-  State.lastParent = eventData.targetData.parent;
+  dragState.lastParent = eventData.targetData.parent;
 }
diff --git a/src/plugins/dropZones/types.ts b/src/plugins/dropZones/types.ts
@@ -1,8 +1,30 @@
-import type { DropZoneConfig, DNDGlobals } from "../../types";
+import type { ParentRecord } from "../../types";
 
-export interface InitDropZone {
-  dropZone: HTMLElement;
-  parent: HTMLElement;
-  globals: DNDGlobals;
-  config?: Partial<DropZoneConfig>;
+export type DropZoneEventToHandler = Array<
+  [keyof HTMLElementEventMap, DropZoneEvent]
+>;
+
+export type DropZoneEvent = (data: DropZoneEventData) => void;
+
+export interface DropZoneEventData {
+  e: Event;
+  targetData: DropZoneTargetData;
+}
+
+export interface DropZoneTargetData {
+  parent: ParentRecord;
+  dropZone?: DropZoneRecord;
+}
+
+export interface DropZoneRecord {
+  el: HTMLElement;
+  config: DropZoneConfig;
+}
+
+export interface DropZoneConfig {
+  group?: string;
+  parentDropZone?: HTMLElement | boolean;
+  name?: string;
+  accepts?: (any: any) => boolean;
+  disabled?: boolean;
 }
diff --git a/src/plugins/dropZones/utils.ts b/src/plugins/dropZones/utils.ts
@@ -0,0 +1,78 @@
+import type { DropZoneEventToHandler, DropZoneEventData } from "./types";
+
+import { dropZones } from "./index";
+
+import { parents } from "../../index";
+
+export function addDropZoneEvents(
+  dropZone: HTMLElement,
+  events: DropZoneEventToHandler,
+  abortControllerKey: string
+): void {
+  const dropZoneData = dropZones.get(dropZone);
+
+  console.log("dropZoneData", dropZoneData);
+
+  if (!dropZoneData) return;
+
+  const abortController = new AbortController();
+
+  function handleEvent(e: Event, cb: (eventData: DropZoneEventData) => void) {
+    const eventData = dzEventData(e);
+
+    if (eventData) cb(eventData);
+  }
+
+  for (const event of events) {
+    dropZone.addEventListener(event[0], (e) => handleEvent(e, event[1]), {
+      signal: abortController.signal,
+    });
+  }
+
+  dropZoneData.abortControllers[abortControllerKey] = abortController;
+}
+
+/**
+ * Event listener used for all parents and dropzones.
+ */
+export function dzEventData(e: Event): DropZoneEventData | undefined {
+  if (!(e.currentTarget instanceof HTMLElement)) return;
+
+  const parentData = parents.get(e.currentTarget);
+
+  if (parentData) {
+    return {
+      e,
+      targetData: {
+        parent: {
+          el: e.currentTarget,
+          data: parentData,
+        },
+      },
+    };
+  }
+
+  const dzData = dropZones.get(e.currentTarget);
+
+  if (dzData) {
+    const parentData = dzData.parent && parents.get(dzData.parent);
+
+    if (!parentData) return;
+
+    return {
+      e,
+
+      targetData: {
+        parent: {
+          el: dzData.parent,
+          data: parentData,
+        },
+
+        dropZone: {
+          el: e.currentTarget,
+          config: dzData.config,
+        },
+      },
+    };
+  }
+}
diff --git a/src/types.ts b/src/types.ts
@@ -43,7 +43,7 @@ export type SetupNode = (data: SetupNodeData) => void;
 
 export type TearDownNode = (data: TearDownNodeData) => void;
 
-export interface ParentConfig extends DropZoneConfig {
+export interface ParentConfig {
   [key: string]: any;
   disabled?: boolean;
   dragHandles?: boolean;
@@ -69,15 +69,6 @@ export interface ParentConfig extends DropZoneConfig {
   touchSelectionDropZoneClass?: string | undefined;
 }
 
-export interface DropZoneConfig {
-  group?: string;
-  parentDropZone?: HTMLElement | boolean;
-  name?: string;
-  accepts?: (any: any) => boolean;
-  disabled?: boolean;
-  transfer?: DNDAction;
-}
-
 export interface ParentData {
   getValues: (parent: HTMLElement) => Array<any>;
   setValues: (parent: HTMLElement, values: Array<any>) => void;
@@ -99,11 +90,6 @@ export interface NodeEventData {
   targetData: NodeTargetData;
 }
 
-export interface DropZoneEventData {
-  e: Event;
-  targetData: DropZoneTargetData;
-}
-
 //export interface NodeEventData {
 //  e: Event;
 //  targetData: NodeTargetData;
@@ -118,11 +104,6 @@ export interface NodeTargetData extends DropZoneTargetData {
   node: NodeRecord;
 }
 
-export interface DropZoneTargetData {
-  parent: ParentRecord;
-  dropZone?: DropZoneRecord;
-}
-
 export interface DropZone {
   dropZone: HTMLElement;
   config: DropZoneConfig;
@@ -138,11 +119,6 @@ export interface ParentRecord {
   data: ParentData;
 }
 
-export interface DropZoneRecord {
-  el: HTMLElement;
-  config: DropZoneConfig;
-}
-
 export type DropZoneElement = HTMLElement;
 
 export interface DNDDragState {
@@ -170,7 +146,7 @@ export interface DNDTouchState extends DNDDragState {
 
 //export type DNDState = DNDDragState | DNDTouchState;
 
-export interface DNDState extends DNDNodeState {
+export interface DragState extends DragStateNodes {
   direction: number | undefined;
   enterCount: number;
   lastCoordinates: {
@@ -188,7 +164,7 @@ export interface DNDState extends DNDNodeState {
   touchedNode: HTMLElement | undefined;
 }
 
-export interface DNDNodeState {
+export interface DragStateNodes {
   draggedNodes: Array<NodeRecord>;
   initialParent: ParentRecord | undefined;
   lastParent: ParentRecord | undefined;
@@ -523,8 +499,6 @@ export interface NodeData {
 
 export type NodeEvent = (data: NodeEventData) => void;
 
-export type DropZoneEvent = (data: DropZoneEventData) => void;
-
 export interface Node extends HTMLElement {
   parentNode: HTMLElement;
 }
@@ -547,10 +521,6 @@ export interface TouchOverNodeEvent extends Event {
 
 export type NodeEventToHandler = Array<[keyof HTMLElementEventMap, NodeEvent]>;
 
-export type DropZoneEventToHandler = Array<
-  [keyof HTMLElementEventMap, DropZoneEvent]
->;
-
 export interface DropZoneData {
   config: DropZoneConfig;
   parent: HTMLElement;