more typing fixes in plugins

src/index.ts

@@ -106,7 +106,7 @@ export function resetState() {
  */
 export function setDragState<T>(
   dragStateProps:
-    | (SynthDragStateProps<T> & DragStateProps<T>)
+    | (SynthDragStateProps & DragStateProps<T>)
     | DragStateProps<T>
     | undefined
 ): DragState<T> | SynthDragState<T> {
@@ -140,6 +140,10 @@ export function dragAndDrop<T>({
     setValues,
     config: {
       deepCopyStyles: false,
+      handleClickNode,
+      handleClickParent,
+      handleKeydownNode,
+      handleKeydownParent,
       handleDragstart,
       handleDragoverNode,
       handleDragoverParent,
@@ -236,6 +240,7 @@ export function dragStateProps<T>(
   return {
     affectedNodes: [],
     ascendingDirection: false,
+    clonedDraggedEls: [],
     dynamicValues: [],
     pointerMoved: false,
     coordinates: {
@@ -559,19 +564,23 @@ export function tearDown(parent: HTMLElement) {
     parentData.abortControllers.mainParent.abort();
 }
 
-function isDragState<T>(
+export function isDragState<T>(
   state: BaseDragState
 ): state is DragState<T> | SynthDragState<T> {
   return "draggedNode" in state;
 }
 
-function isSynthDragState<T>(state: BaseDragState): state is SynthDragState<T> {
-  return "clonedDraggedNode" in state;
+export function isSynthDragState<T>(
+  state: BaseDragState
+): state is SynthDragState<T> {
+  return "pointerId" in state;
 }
 
 function setup<T>(parent: HTMLElement, parentData: ParentData<T>): void {
   if (state) on("dragStarted", () => {});
   parentData.abortControllers.mainParent = addEvents(parent, {
+    click: parentEventData(parentData.config.handleClickParent),
+    keydown: parentEventData(parentData.config.handleKeydownParent),
     dragover: parentEventData(parentData.config.handleDragoverParent),
     handlePointeroverParent: parentData.config.handlePointeroverParent,
     drop: parentEventData(parentData.config.handleDropParent),
@@ -591,6 +600,8 @@ export function setupNode<T>(data: SetupNodeData<T>) {
   data.node.draggable = true;
 
   data.nodeData.abortControllers.mainNode = addEvents(data.node, {
+    click: nodeEventData(config.handleClickParent),
+    keydown: nodeEventData(config.handleKeydownNode),
     dragstart: nodeEventData(config.handleDragstart),
     dragover: nodeEventData(config.handleDragoverNode),
     dragenter: nodeEventData(config.handleDragenterNode),
@@ -919,6 +930,14 @@ export function validateDragHandle<T>(data: NodeEventData<T>): boolean {
   return false;
 }
 
+export function handleClickNode<T>(_data: NodeEventData<T>) {}
+
+export function handleClickParent<T>(_data: ParentEventData<T>) {}
+
+export function handleKeydownNode<T>(_data: NodeEventData<T>) {}
+
+export function handleKeydownParent<T>(_data: ParentEventData<T>) {}
+
 export function pointerdown<T>(
   data: NodePointerEventData<T>,
   _state: BaseDragState
@@ -1197,7 +1216,7 @@ function pointermoveClasses<T>(
 function getScrollData<T>(
   e: DragEvent | PointerEvent,
   state: DragState<T> | SynthDragState<T>
-): ScrollData<T> | undefined {
+): ScrollData | undefined {
   if (!(e.currentTarget instanceof HTMLElement)) return;
 
   const { x, y, width, height } = e.currentTarget.getBoundingClientRect();
@@ -1327,7 +1346,7 @@ function shouldScroll<T>(
 
 function shouldScrollRight<T>(
   state: DragState<T> | SynthDragState<T>,
-  data: ScrollData<T>
+  data: ScrollData
 ): DragState<T> | DragState<T> | void {
   return;
   const diff = data.scrollParent.clientWidth + data.x - state.coordinates.x;
@@ -1346,7 +1365,7 @@ function shouldScrollRight<T>(
 
 function shouldScrollLeft<T>(
   state: DragState<T>,
-  data: ScrollData<T>
+  data: ScrollData
 ): DragState<T> | void {
   return;
   const diff = data.scrollParent.clientWidth + data.x - state.coordinates.x;
@@ -1360,7 +1379,7 @@ function shouldScrollLeft<T>(
     return state;
 }
 
-function shouldScrollUp<T>(state: DragState<T>, data: ScrollData<T>): boolean {
+function shouldScrollUp<T>(state: DragState<T>, data: ScrollData): boolean {
   const diff = data.scrollParent.clientHeight + data.y - state.coordinates.y;
 
   if (!data.scrollOutside && diff > data.scrollParent.clientHeight)
@@ -1376,10 +1395,7 @@ function shouldScrollUp<T>(state: DragState<T>, data: ScrollData<T>): boolean {
   return false;
 }
 
-function shouldScrollDown<T>(
-  state: DragState<T>,
-  data: ScrollData<T>
-): boolean {
+function shouldScrollDown<T>(state: DragState<T>, data: ScrollData): boolean {
   const diff = data.scrollParent.clientHeight + data.y - state.coordinates.y;
 
   if (!data.scrollOutside && diff < 0) return false;

src/plugins/animations/index.ts

@@ -1,6 +1,6 @@
 import type { SetupNodeData, Node } from "../../types";
 import type { AnimationsConfig } from "./types";
-import { state, parents } from "../../index";
+import { state, parents, isDragState } from "../../index";
 
 export function animations(animationsConfig: Partial<AnimationsConfig> = {}) {
   const slideUp = [
@@ -49,7 +49,7 @@ export function animations(animationsConfig: Partial<AnimationsConfig> = {}) {
       },
 
       setupNodeRemap<T>(data: SetupNodeData<T>) {
-        if (!state) return;
+        if (!isDragState(state)) return;
 
         const duration = animationsConfig.duration || 150;
 

src/plugins/insertion/index.ts

@@ -9,16 +9,17 @@ import type {
   ParentRecord,
   Coordinates,
 } from "../../types";
+
 import {
   dragstart,
-  handleScroll,
   handleEnd as originalHandleEnd,
   parents,
   parentValues,
   setParentValues,
   state,
   addParentClass,
   pointerdown,
+  isDragState,
 } from "../../index";
 import { eventCoordinates, removeClass, getRealCoords } from "../../utils";
 
@@ -111,7 +112,7 @@ export function insertion<T>(
 }
 
 function checkPosition(e: DragEvent | PointerEvent) {
-  if (!state) return;
+  if (!isDragState(state)) return;
 
   const el = document.elementFromPoint(e.clientX, e.clientY);
 
@@ -139,13 +140,19 @@ function checkPosition(e: DragEvent | PointerEvent) {
   }
 }
 
-export function handleDragstart<T>(data: NodeDragEventData<T>) {
+export function handleDragstart<T>(
+  data: NodeDragEventData<T>,
+  state: DragState<T>
+) {
   if (!(data.e instanceof DragEvent)) return;
 
-  dragstart({
-    e: data.e,
-    targetData: data.targetData,
-  });
+  dragstart(
+    {
+      e: data.e,
+      targetData: data.targetData,
+    },
+    state
+  );
 
   setTimeout(() => {
     if (data.targetData.parent.data.config.sortable === false) return;
@@ -154,13 +161,19 @@ export function handleDragstart<T>(data: NodeDragEventData<T>) {
   });
 }
 
-export function handlePointerdown<T>(data: NodePointerEventData<T>) {
+export function handlePointerdown<T>(
+  data: NodePointerEventData<T>,
+  state: DragState<T>
+) {
   if (!(data.e instanceof PointerEvent)) return;
 
-  pointerdown({
-    e: data.e,
-    targetData: data.targetData,
-  });
+  pointerdown(
+    {
+      e: data.e,
+      targetData: data.targetData,
+    },
+    state
+  );
 
   setTimeout(() => {
     if (data.targetData.parent.data.config.sortable === false) return;
@@ -283,8 +296,6 @@ function defineRanges(parent: HTMLElement) {
   const enabledNodes = parentData.enabledNodes;
 
   enabledNodes.forEach((node, index) => {
-    node.data.range = {};
-
     let aboveOrBelowPrevious = false;
 
     let aboveOrBelowAfter = false;
@@ -316,6 +327,8 @@ function defineRanges(parent: HTMLElement) {
     const fullishWidth =
       parent.getBoundingClientRect().width * 0.8 < nodeCoords.width;
 
+    if (!node.data.range) return;
+
     if (fullishWidth) {
       node.data.range.ascending = ascendingVertical(nodeCoords, nextNodeCoords);
       node.data.range.descending = descendingVertical(
@@ -358,8 +371,11 @@ export function handleDragoverNode<T>(data: NodeDragEventData<T>) {
   data.e.preventDefault();
 }
 
-export function handleDragoverParent<T>(data: ParentEventData<T>) {
-  if (!state || !insertionState) return;
+export function handleDragoverParent<T>(
+  data: ParentEventData<T>,
+  state: DragState<T>
+) {
+  if (!insertionState) return;
 
   data.e.stopPropagation();
 
@@ -417,7 +433,10 @@ export function moveBetween<T>(data: ParentRecord<T>) {
 
   if (!foundRange) return;
 
-  const position = foundRange[0].data.range[foundRange[1]];
+  const position =
+    foundRange[0].data.range![foundRange[1] as "ascending" | "descending"];
+
+  if (!position) return;
 
   positionInsertionPoint(
     position,
@@ -471,7 +490,10 @@ function moveOutside<T>(data: ParentRecord<T>, state: DragState<T>) {
 
     if (!foundRange) return;
 
-    const position = foundRange[0].data.range[foundRange[1]];
+    const position =
+      foundRange[0].data.range![foundRange[1] as "ascending" | "descending"];
+
+    if (!position) return;
 
     positionInsertionPoint(
       position,
@@ -485,27 +507,33 @@ function findClosest<T>(enabledNodes: NodeRecord<T>[]) {
   let foundRange: [NodeRecord<T>, string] | null = null;
 
   for (let x = 0; x < enabledNodes.length; x++) {
-    if (!state || !enabledNodes[x].data.range) continue;
+    if (!isDragState(state) || !enabledNodes[x].data.range) continue;
+
+    const ascending = enabledNodes[x].data.range!.ascending;
+
+    const descending = enabledNodes[x].data.range!.descending;
 
-    if (enabledNodes[x].data.range.ascending) {
+    if (!ascending && !descending) continue;
+
+    if (ascending) {
       if (
-        state.coordinates.y > enabledNodes[x].data.range.ascending.y[0] &&
-        state.coordinates.y < enabledNodes[x].data.range.ascending.y[1] &&
-        state.coordinates.x > enabledNodes[x].data.range.ascending.x[0] &&
-        state.coordinates.x < enabledNodes[x].data.range.ascending.x[1]
+        state.coordinates.y > ascending.y[0] &&
+        state.coordinates.y < ascending.y[1] &&
+        state.coordinates.x > ascending.x[0] &&
+        state.coordinates.x < ascending.x[1]
       ) {
         foundRange = [enabledNodes[x], "ascending"];
 
         return foundRange;
       }
     }
 
-    if (enabledNodes[x].data.range.descending) {
+    if (descending) {
       if (
-        state.coordinates.y > enabledNodes[x].data.range.descending.y[0] &&
-        state.coordinates.y < enabledNodes[x].data.range.descending.y[1] &&
-        state.coordinates.x > enabledNodes[x].data.range.descending.x[0] &&
-        state.coordinates.x < enabledNodes[x].data.range.descending.x[1]
+        state.coordinates.y > descending.y[0] &&
+        state.coordinates.y < descending.y[1] &&
+        state.coordinates.x > descending.x[0] &&
+        state.coordinates.x < descending.x[1]
       ) {
         foundRange = [enabledNodes[x], "descending"];
 
@@ -515,8 +543,11 @@ function findClosest<T>(enabledNodes: NodeRecord<T>[]) {
   }
 }
 
-export function handlePointeroverParent<T>(data: PointeroverParentEvent<T>) {
-  if (!state || !insertionState) return;
+export function handlePointeroverParent<T>(
+  data: PointeroverParentEvent<T>,
+  state: DragState<T>
+) {
+  if (!insertionState) return;
 
   data.detail.e.stopPropagation();
 
@@ -526,8 +557,6 @@ export function handlePointeroverParent<T>(data: PointeroverParentEvent<T>) {
 
   state.coordinates.x = x;
 
-  handleScroll();
-
   const nestedParent = data.detail.targetData.parent.data.nestedParent;
 
   let realTargetParent = data.detail.targetData.parent;
@@ -545,7 +574,8 @@ export function handlePointeroverParent<T>(data: PointeroverParentEvent<T>) {
 
   if (!foundRange) return;
 
-  const position = foundRange[0].data.range[foundRange[1]];
+  const position =
+    foundRange[0].data.range![foundRange[1] as "ascending" | "descending"];
 
   positionInsertionPoint(
     position,
@@ -616,12 +646,11 @@ function positionInsertionPoint<T>(
 export function handleParentDrop<T>(_data: NodeDragEventData<T>) {}
 
 export function handleEnd<T>(
-  data: NodeDragEventData<T> | NodePointerEventData<T>
+  data: NodeDragEventData<T> | NodePointerEventData<T>,
+  state: DragState<T>
 ) {
   data.e.stopPropagation();
 
-  if (!state) return;
-
   const insertionPoint = document.getElementById("insertion-point");
 
   if (!insertionState.draggedOverParent) {
@@ -803,5 +832,5 @@ export function handleEnd<T>(
 
   insertionState.draggedOverNodes = [];
 
-  originalHandleEnd(data);
+  originalHandleEnd(data, state);
 }