feat: adds place plugin

dist/index.cjs

@@ -490,39 +490,39 @@ function stackNodes({
 }
 
 // src/plugins/animations/index.ts
-var slideUp = [
-  {
-    transform: "translateY(100%)"
-  },
-  {
-    transform: "translateY(0)"
-  }
-];
-var slideDown = [
-  {
-    transform: "translateY(-100%)"
-  },
-  {
-    transform: "translateY(0)"
-  }
-];
-var slideLeft = [
-  {
-    transform: "translateX(100%)"
-  },
-  {
-    transform: "translateX(0)"
-  }
-];
-var slideRight = [
-  {
-    transform: "translateX(-100%)"
-  },
-  {
-    transform: "translateX(0)"
-  }
-];
 function animations(animationsConfig = {}) {
+  const slideUp = [
+    {
+      transform: `translateY(${animationsConfig.yScale || 50}%)`
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`
+    }
+  ];
+  const slideDown = [
+    {
+      transform: `translateY(-${animationsConfig.yScale || 50}%)`
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`
+    }
+  ];
+  const slideLeft = [
+    {
+      transform: `translateX(${animationsConfig.xScale || 50}%)`
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`
+    }
+  ];
+  const slideRight = [
+    {
+      transform: `translateX(-${animationsConfig.xScale || 50}%)`
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`
+    }
+  ];
   return (parent) => {
     const parentData = parents.get(parent);
     if (!parentData)

dist/index.d.cts

@@ -728,6 +728,8 @@ declare function multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (p
 interface AnimationsConfig {
     duration?: number;
     remapFinished?: () => void;
+    yScale?: number;
+    xScale?: number;
 }
 
 declare function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {

dist/index.d.ts

@@ -728,6 +728,8 @@ declare function multiDrag<T>(multiDragConfig?: Partial<MultiDragConfig<T>>): (p
 interface AnimationsConfig {
     duration?: number;
     remapFinished?: () => void;
+    yScale?: number;
+    xScale?: number;
 }
 
 declare function animations(animationsConfig?: Partial<AnimationsConfig>): (parent: HTMLElement) => {

dist/index.mjs

@@ -408,39 +408,39 @@ function stackNodes({
 }
 
 // src/plugins/animations/index.ts
-var slideUp = [
-  {
-    transform: "translateY(100%)"
-  },
-  {
-    transform: "translateY(0)"
-  }
-];
-var slideDown = [
-  {
-    transform: "translateY(-100%)"
-  },
-  {
-    transform: "translateY(0)"
-  }
-];
-var slideLeft = [
-  {
-    transform: "translateX(100%)"
-  },
-  {
-    transform: "translateX(0)"
-  }
-];
-var slideRight = [
-  {
-    transform: "translateX(-100%)"
-  },
-  {
-    transform: "translateX(0)"
-  }
-];
 function animations(animationsConfig = {}) {
+  const slideUp = [
+    {
+      transform: `translateY(${animationsConfig.yScale || 50}%)`
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`
+    }
+  ];
+  const slideDown = [
+    {
+      transform: `translateY(-${animationsConfig.yScale || 50}%)`
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`
+    }
+  ];
+  const slideLeft = [
+    {
+      transform: `translateX(${animationsConfig.xScale || 50}%)`
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`
+    }
+  ];
+  const slideRight = [
+    {
+      transform: `translateX(-${animationsConfig.xScale || 50}%)`
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`
+    }
+  ];
   return (parent) => {
     const parentData = parents.get(parent);
     if (!parentData)

dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formkit/drag-and-drop",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Drag and drop package.",
   "main": "./index.cjs",
   "types": "./index.d.cts",

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "description": "Drag and drop package.",
   "main": "./index.cjs",

src/index.ts

@@ -42,6 +42,7 @@ export { multiDrag } from "./plugins/multiDrag";
 export { animations } from "./plugins/animations";
 export { selections } from "./plugins/multiDrag/plugins/selections";
 export { swap } from "./plugins/swap";
+export { place } from "./plugins/place";
 export * from "./utils";
 
 const scrollConfig: {

src/plugins/place/index.ts

@@ -0,0 +1,167 @@
+import type {
+  NodeDragEventData,
+  ParentConfig,
+  DragState,
+  NodeTouchEventData,
+  NodeRecord,
+  TouchOverNodeEvent,
+  ParentEventData,
+  TouchOverParentEvent,
+} from "../../types";
+import {
+  state,
+  parents,
+  handleEnd as originalHandleEnd,
+  parentValues,
+  setParentValues,
+} from "../../index";
+import { addClass, removeClass } from "../../utils";
+
+export const placeState = {
+  draggedOverNodes: Array<NodeRecord<any>>(),
+};
+
+interface PlaceConfig<T> extends ParentConfig<T> {}
+
+export function place<T>(placeConfig: Partial<PlaceConfig<T>> = {}) {
+  return (parent: HTMLElement) => {
+    const parentData = parents.get(parent);
+
+    if (!parentData) return;
+
+    const placeParentConfig = {
+      ...parentData.config,
+      placeConfig: placeConfig,
+    } as PlaceConfig<T>;
+
+    return {
+      setup() {
+        placeParentConfig.handleDragoverNode =
+          placeConfig.handleDragoverNode || handleDragoverNode;
+
+        placeParentConfig.handleTouchOverNode =
+          placeConfig.handleTouchOverNode || handleTouchOverNode;
+
+        placeParentConfig.handleTouchOverParent =
+          placeConfig.handleTouchOverParent || handleTouchOverParent;
+
+        placeParentConfig.handleEnd = placeConfig.handleEnd || handleEnd;
+
+        parentData.config = placeParentConfig;
+      },
+    };
+  };
+}
+
+function handleDragoverNode<T>(data: NodeDragEventData<T>) {
+  if (!state) return;
+
+  dragoverNode(data, state);
+}
+
+export function handleDragoverParent<T>(_data: ParentEventData<T>) {}
+
+export function handleTouchOverParent<T>(_data: TouchOverParentEvent<T>) {}
+
+function handleTouchOverNode<T>(data: TouchOverNodeEvent<T>) {
+  if (!state) return;
+
+  if (data.detail.targetData.parent.el !== state.lastParent.el) return;
+
+  const dropZoneClass =
+    data.detail.targetData.parent.data.config.touchDropZoneClass;
+
+  removeClass(
+    placeState.draggedOverNodes.map((node) => node.el),
+    dropZoneClass
+  );
+
+  const enabledNodes = data.detail.targetData.parent.data.enabledNodes;
+
+  placeState.draggedOverNodes = enabledNodes.slice(
+    data.detail.targetData.node.data.index,
+    data.detail.targetData.node.data.index + state.draggedNodes.length
+  );
+
+  addClass(
+    placeState.draggedOverNodes.map((node) => node.el),
+    dropZoneClass,
+    true
+  );
+
+  state.lastTargetValue = data.detail.targetData.node.data.value;
+
+  state.lastParent = data.detail.targetData.parent;
+}
+
+function dragoverNode<T>(data: NodeDragEventData<T>, state: DragState<T>) {
+  data.e.preventDefault();
+
+  data.e.stopPropagation();
+
+  if (data.targetData.parent.el !== state.lastParent.el) return;
+
+  const dropZoneClass = data.targetData.parent.data.config.dropZoneClass;
+
+  removeClass(
+    placeState.draggedOverNodes.map((node) => node.el),
+    dropZoneClass
+  );
+
+  const enabledNodes = data.targetData.parent.data.enabledNodes;
+
+  if (!enabledNodes) return;
+
+  placeState.draggedOverNodes = enabledNodes.slice(
+    data.targetData.node.data.index,
+    data.targetData.node.data.index + state.draggedNodes.length
+  );
+
+  addClass(
+    placeState.draggedOverNodes.map((node) => node.el),
+    dropZoneClass,
+    true
+  );
+
+  state.lastTargetValue = data.targetData.node.data.value;
+
+  state.lastParent = data.targetData.parent;
+}
+
+function handleEnd<T>(data: NodeDragEventData<T> | NodeTouchEventData<T>) {
+  if (!state) return;
+
+  if (state.transferred || state.lastParent.el !== state.initialParent.el)
+    return;
+
+  const draggedParentValues = parentValues(
+    state.initialParent.el,
+    state.initialParent.data
+  );
+
+  const draggedValues = state.draggedNodes.map((node) => node.data.value);
+
+  const newParentValues = [
+    ...draggedParentValues.filter((x) => !draggedValues.includes(x)),
+  ];
+
+  const index = placeState.draggedOverNodes[0].data.index;
+
+  newParentValues.splice(index, 0, ...draggedValues);
+
+  setParentValues(data.targetData.parent.el, data.targetData.parent.data, [
+    ...newParentValues,
+  ]);
+
+  const dropZoneClass =
+    "touchedNode" in state
+      ? data.targetData.parent.data.config.touchDropZoneClass
+      : data.targetData.parent.data.config.dropZoneClass;
+
+  removeClass(
+    placeState.draggedOverNodes.map((node) => node.el),
+    dropZoneClass
+  );
+
+  originalHandleEnd(data);
+}