npm - @dnd-kit/dom - Versions diffs - 0.0.1 - Mend

@dnd-kit/dom 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (31) hide show

package/plugins/debug.cjs ADDED Viewed

@@ -0,0 +1,95 @@
+'use strict';
+var state = require('@dnd-kit/state');
+var abstract = require('@dnd-kit/abstract');
+// src/plugins/debug/debug.ts
+var Debug = class extends abstract.Plugin {
+  constructor(manager) {
+    super(manager);
+    if (process.env.NODE_ENV !== "production") {
+      const elements = /* @__PURE__ */ new Map();
+      let draggableElement = null;
+      this.destroy = state.effect(() => {
+        const { dragOperation } = manager;
+        dragOperation.status;
+        const { collisions } = manager.collisionObserver;
+        const draggable = dragOperation.source;
+        const topCollisions = collisions.slice(1, 3);
+        const collidingIds = topCollisions.map(({ id }) => id);
+        if (draggable && dragOperation.shape) {
+          const element = draggableElement ?? createDebugElement("dialog");
+          const { boundingRectangle } = dragOperation.shape.current;
+          if (!draggableElement) {
+            draggableElement = element;
+            const style = document.createElement("style");
+            style.innerText = `dialog[data-dnd-kit-debug]::backdrop {display: none;}`;
+            element.innerText = `${draggable.id}`;
+            element.setAttribute("data-dnd-kit-debug", "");
+            element.appendChild(style);
+            element.style.backgroundColor = "rgba(118, 190, 250, 0.5)";
+            element.style.color = "rgba(0,0,0,0.9)";
+            document.body.appendChild(element);
+          }
+          if (element instanceof HTMLDialogElement) {
+            element.showModal();
+          }
+          element.style.top = `${boundingRectangle.top}px`;
+          element.style.left = `${boundingRectangle.left}px`;
+          element.style.width = `${boundingRectangle.width}px`;
+          element.style.height = `${boundingRectangle.height}px`;
+        } else {
+          draggableElement?.remove();
+          draggableElement = null;
+        }
+        for (const [id, element] of elements) {
+          if (!manager.registry.droppables.has(id)) {
+            element.remove();
+            elements.delete(id);
+          }
+        }
+        for (const droppable of manager.registry.droppables) {
+          const element = elements.get(droppable.id);
+          if (droppable.shape) {
+            const { boundingRectangle } = droppable.shape;
+            const debugElement = element ?? createDebugElement();
+            if (!element) {
+              elements.set(droppable.id, debugElement);
+              document.body.appendChild(debugElement);
+            }
+            debugElement.style.backgroundColor = droppable.isDropTarget ? "rgba(13, 210, 36, 0.6)" : collidingIds.includes(droppable.id) ? "rgba(255, 193, 7, 0.5)" : "rgba(0, 0, 0, 0.1)";
+            debugElement.style.top = `${boundingRectangle.top}px`;
+            debugElement.style.left = `${boundingRectangle.left}px`;
+            debugElement.style.width = `${boundingRectangle.width}px`;
+            debugElement.style.height = `${boundingRectangle.height}px`;
+            debugElement.innerText = `${droppable.id}`;
+          } else if (element) {
+            element.remove();
+            elements.delete(droppable.id);
+          }
+        }
+      });
+    }
+  }
+};
+function createDebugElement(tagName = "div") {
+  const element = document.createElement(tagName);
+  element.style.all = "initial";
+  element.style.position = "fixed";
+  element.style.display = "flex";
+  element.style.alignItems = "center";
+  element.style.justifyContent = "center";
+  element.style.border = "1px solid rgba(0, 0, 0, 0.1)";
+  element.style.boxSizing = "border-box";
+  element.style.pointerEvents = "none";
+  element.style.zIndex = "9999";
+  element.style.color = "rgba(0,0,0,0.5)";
+  element.style.fontFamily = "sans-serif";
+  element.style.textShadow = "0 0 3px rgba(255,255,255,0.8)";
+  element.style.pointerEvents = "none";
+  return element;
+}
+exports.Debug = Debug;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=debug.cjs.map

package/plugins/debug.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/plugins/debug/debug.ts"],"names":[],"mappings":"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","sourcesContent":["import {effect} from '@dnd-kit/state';\nimport {Plugin} from '@dnd-kit/abstract';\nimport type {UniqueIdentifier} from '@dnd-kit/abstract';\nimport type {DragDropManager} from '@dnd-kit/dom';\n\nexport class Debug extends Plugin<DragDropManager> {\n constructor(manager: DragDropManager) {\n super(manager);\n\n if (process.env.NODE_ENV !== 'production') {\n const elements = new Map<UniqueIdentifier, HTMLElement>();\n let draggableElement: HTMLElement | null = null;\n\n this.destroy = effect(() => {\n const {dragOperation} = manager;\n const {current: _} = dragOperation.status;\n\n const {collisions} = manager.collisionObserver;\n const draggable = dragOperation.source;\n const topCollisions = collisions.slice(1, 3);\n const collidingIds = topCollisions.map(({id}) => id);\n\n if (draggable && dragOperation.shape) {\n const element = draggableElement ?? createDebugElement('dialog');\n const {boundingRectangle} = dragOperation.shape.current;\n\n if (!draggableElement) {\n draggableElement = element;\n\n const style = document.createElement('style');\n style.innerText = `dialog[data-dnd-kit-debug]::backdrop {display: none;}`;\n\n element.innerText = `${draggable.id}`;\n element.setAttribute('data-dnd-kit-debug', '');\n element.appendChild(style);\n element.style.backgroundColor = 'rgba(118, 190, 250, 0.5)';\n element.style.color = 'rgba(0,0,0,0.9)';\n\n document.body.appendChild(element);\n }\n\n if (element instanceof HTMLDialogElement) {\n element.showModal();\n }\n\n element.style.top = `${boundingRectangle.top}px`;\n element.style.left = `${boundingRectangle.left}px`;\n element.style.width = `${boundingRectangle.width}px`;\n element.style.height = `${boundingRectangle.height}px`;\n } else {\n draggableElement?.remove();\n draggableElement = null;\n }\n\n for (const [id, element] of elements) {\n if (!manager.registry.droppables.has(id)) {\n element.remove();\n elements.delete(id);\n }\n }\n\n for (const droppable of manager.registry.droppables) {\n const element = elements.get(droppable.id);\n\n if (droppable.shape) {\n const {boundingRectangle} = droppable.shape;\n const debugElement = element ?? createDebugElement();\n\n if (!element) {\n elements.set(droppable.id, debugElement);\n document.body.appendChild(debugElement);\n }\n\n debugElement.style.backgroundColor = droppable.isDropTarget\n ? 'rgba(13, 210, 36, 0.6)'\n : collidingIds.includes(droppable.id)\n ? 'rgba(255, 193, 7, 0.5)'\n : 'rgba(0, 0, 0, 0.1)';\n\n debugElement.style.top = `${boundingRectangle.top}px`;\n debugElement.style.left = `${boundingRectangle.left}px`;\n debugElement.style.width = `${boundingRectangle.width}px`;\n debugElement.style.height = `${boundingRectangle.height}px`;\n debugElement.innerText = `${droppable.id}`;\n } else if (element) {\n element.remove();\n elements.delete(droppable.id);\n }\n }\n });\n }\n }\n}\n\nfunction createDebugElement(tagName = 'div') {\n const element = document.createElement(tagName);\n\n element.style.all = 'initial';\n element.style.position = 'fixed';\n element.style.display = 'flex';\n element.style.alignItems = 'center';\n element.style.justifyContent = 'center';\n element.style.border = '1px solid rgba(0, 0, 0, 0.1)';\n element.style.boxSizing = 'border-box';\n element.style.pointerEvents = 'none';\n element.style.zIndex = '9999';\n element.style.color = 'rgba(0,0,0,0.5)';\n element.style.fontFamily = 'sans-serif';\n element.style.textShadow = '0 0 3px rgba(255,255,255,0.8)';\n element.style.pointerEvents = 'none';\n\n return element;\n}\n"]}

package/plugins/debug.d.cts ADDED Viewed

@@ -0,0 +1,8 @@
+import { Plugin } from '@dnd-kit/abstract';
+import { DragDropManager } from '@dnd-kit/dom';
+declare class Debug extends Plugin<DragDropManager> {
+    constructor(manager: DragDropManager);
+}
+export { Debug };

package/plugins/debug.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { Plugin } from '@dnd-kit/abstract';
+import { DragDropManager } from '@dnd-kit/dom';
+declare class Debug extends Plugin<DragDropManager> {
+    constructor(manager: DragDropManager);
+}
+export { Debug };

package/plugins/debug.js ADDED Viewed

@@ -0,0 +1,93 @@
+import { effect } from '@dnd-kit/state';
+import { Plugin } from '@dnd-kit/abstract';
+// src/plugins/debug/debug.ts
+var Debug = class extends Plugin {
+  constructor(manager) {
+    super(manager);
+    if (process.env.NODE_ENV !== "production") {
+      const elements = /* @__PURE__ */ new Map();
+      let draggableElement = null;
+      this.destroy = effect(() => {
+        const { dragOperation } = manager;
+        dragOperation.status;
+        const { collisions } = manager.collisionObserver;
+        const draggable = dragOperation.source;
+        const topCollisions = collisions.slice(1, 3);
+        const collidingIds = topCollisions.map(({ id }) => id);
+        if (draggable && dragOperation.shape) {
+          const element = draggableElement ?? createDebugElement("dialog");
+          const { boundingRectangle } = dragOperation.shape.current;
+          if (!draggableElement) {
+            draggableElement = element;
+            const style = document.createElement("style");
+            style.innerText = `dialog[data-dnd-kit-debug]::backdrop {display: none;}`;
+            element.innerText = `${draggable.id}`;
+            element.setAttribute("data-dnd-kit-debug", "");
+            element.appendChild(style);
+            element.style.backgroundColor = "rgba(118, 190, 250, 0.5)";
+            element.style.color = "rgba(0,0,0,0.9)";
+            document.body.appendChild(element);
+          }
+          if (element instanceof HTMLDialogElement) {
+            element.showModal();
+          }
+          element.style.top = `${boundingRectangle.top}px`;
+          element.style.left = `${boundingRectangle.left}px`;
+          element.style.width = `${boundingRectangle.width}px`;
+          element.style.height = `${boundingRectangle.height}px`;
+        } else {
+          draggableElement?.remove();
+          draggableElement = null;
+        }
+        for (const [id, element] of elements) {
+          if (!manager.registry.droppables.has(id)) {
+            element.remove();
+            elements.delete(id);
+          }
+        }
+        for (const droppable of manager.registry.droppables) {
+          const element = elements.get(droppable.id);
+          if (droppable.shape) {
+            const { boundingRectangle } = droppable.shape;
+            const debugElement = element ?? createDebugElement();
+            if (!element) {
+              elements.set(droppable.id, debugElement);
+              document.body.appendChild(debugElement);
+            }
+            debugElement.style.backgroundColor = droppable.isDropTarget ? "rgba(13, 210, 36, 0.6)" : collidingIds.includes(droppable.id) ? "rgba(255, 193, 7, 0.5)" : "rgba(0, 0, 0, 0.1)";
+            debugElement.style.top = `${boundingRectangle.top}px`;
+            debugElement.style.left = `${boundingRectangle.left}px`;
+            debugElement.style.width = `${boundingRectangle.width}px`;
+            debugElement.style.height = `${boundingRectangle.height}px`;
+            debugElement.innerText = `${droppable.id}`;
+          } else if (element) {
+            element.remove();
+            elements.delete(droppable.id);
+          }
+        }
+      });
+    }
+  }
+};
+function createDebugElement(tagName = "div") {
+  const element = document.createElement(tagName);
+  element.style.all = "initial";
+  element.style.position = "fixed";
+  element.style.display = "flex";
+  element.style.alignItems = "center";
+  element.style.justifyContent = "center";
+  element.style.border = "1px solid rgba(0, 0, 0, 0.1)";
+  element.style.boxSizing = "border-box";
+  element.style.pointerEvents = "none";
+  element.style.zIndex = "9999";
+  element.style.color = "rgba(0,0,0,0.5)";
+  element.style.fontFamily = "sans-serif";
+  element.style.textShadow = "0 0 3px rgba(255,255,255,0.8)";
+  element.style.pointerEvents = "none";
+  return element;
+}
+export { Debug };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=debug.js.map

package/plugins/debug.js.map ADDED Viewed

@@ -0,0 +1 @@