@mk-drag-and-drop/dom 0.1.0

package/dist/targeting/constraints.js

@@ -0,0 +1,58 @@
+export function maxPointerDistanceToRect(options) {
+    return ({ pointerPosition, dropTarget }) => isPointWithinMaxDistanceToRect({
+        point: pointerPosition,
+        rect: dropTarget.dropTargetRect,
+        options,
+    });
+}
+export function maxOverlayCenterDistanceToRect(options) {
+    return ({ overlayRect, dropTarget }) => {
+        if (!overlayRect) {
+            return false;
+        }
+        return isPointWithinMaxDistanceToRect({
+            point: getRectCenter(overlayRect),
+            rect: dropTarget.dropTargetRect,
+            options,
+        });
+    };
+}
+function isPointWithinMaxDistanceToRect(input) {
+    const x = getAxisDistance(input.point.x, input.rect.left, input.rect.right);
+    const y = getAxisDistance(input.point.y, input.rect.top, input.rect.bottom);
+    if (input.options.maxXDistance !== undefined && x > input.options.maxXDistance) {
+        return false;
+    }
+    if (input.options.maxYDistance !== undefined && y > input.options.maxYDistance) {
+        return false;
+    }
+    if (input.options.maxDistance !== undefined &&
+        x * x + y * y > input.options.maxDistance * input.options.maxDistance) {
+        return false;
+    }
+    return true;
+}
+export function getDistanceToRect(point, rect) {
+    const x = getAxisDistance(point.x, rect.left, rect.right);
+    const y = getAxisDistance(point.y, rect.top, rect.bottom);
+    return {
+        x,
+        y,
+        distance: Math.sqrt(x * x + y * y),
+    };
+}
+function getAxisDistance(value, min, max) {
+    if (value < min) {
+        return min - value;
+    }
+    if (value > max) {
+        return value - max;
+    }
+    return 0;
+}
+function getRectCenter(rect) {
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2,
+    };
+}

package/dist/targeting/types.d.ts

@@ -0,0 +1,23 @@
+import type { DragPoint, DragRect } from "../geometry/rects.js";
+export type DropTarget = {
+    dropTargetId: string;
+    dropTargetRect: DragRect;
+};
+export type TargetingAlgorithmInput = {
+    pointerPosition: DragPoint;
+    overlayRect: DragRect | null;
+    dropTargets: readonly DropTarget[];
+};
+export type TargetingAlgorithmMode = "pointer" | "rect";
+export type TargetingAlgorithm = {
+    (input: TargetingAlgorithmInput): DropTarget | null;
+    mode: TargetingAlgorithmMode;
+};
+export type TargetingConstraintInput = {
+    pointerPosition: DragPoint;
+    overlayRect: DragRect | null;
+    dropTarget: DropTarget;
+};
+export type TargetingConstraint = {
+    (input: TargetingConstraintInput): boolean;
+};

package/dist/targeting/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@mk-drag-and-drop/dom",
+  "version": "0.1.0",
+  "description": "Headless DOM drag-and-drop primitives for draggable, droppable, sortable, and grouped interactions.",
+  "license": "MIT",
+  "homepage": "https://mkramer.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mkramerdev/mk-drag-and-drop.git",
+    "directory": "packages/mk-drag-and-drop/dom"
+  },
+  "bugs": {
+    "url": "https://github.com/mkramerdev/mk-drag-and-drop/issues"
+  },
+  "keywords": [
+    "drag-and-drop",
+    "dnd",
+    "sortable",
+    "dom",
+    "headless",
+    "typescript"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./integration": {
+      "types": "./dist/integration/index.d.ts",
+      "import": "./dist/integration/index.js",
+      "default": "./dist/integration/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "jsdom": "^24.1.3",
+    "typescript": "5.5.4",
+    "vitest": "^2.1.9",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
+    "build": "pnpm run clean && tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "lint": "eslint \"src/**/*.ts\"",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}