@nookuio/iframe 1.0.0 → 1.0.1-beta.0

package/dist/drag-drop/helpers.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findNearestLine = findNearestLine;
+exports.getDOMNodeFromNodeId = getDOMNodeFromNodeId;
+exports.getInsertAreas = getInsertAreas;
+exports.getNodeType = getNodeType;
+exports.isElementInViewport = isElementInViewport;
+exports.rectHasPoint = rectHasPoint;
+exports.tryStartViewTransition = tryStartViewTransition;
+var _constants = require("../constants");
+function isElementInViewport(i, t = 0) {
+  const n = i.getBoundingClientRect(),
+    s = window.innerHeight || document.documentElement.clientHeight,
+    e = window.innerWidth || document.documentElement.clientWidth;
+  return n.top >= 0 - t && n.left >= 0 - t && n.bottom <= s + t && n.right <= e + t;
+}
+function rectHasPoint(i, {
+  x: t,
+  y: n
+}) {
+  return t >= i.left && t <= i.right && n >= i.top && n <= i.bottom;
+}
+function tryStartViewTransition(i, t) {
+  const n = document.startViewTransition;
+  return !n || t?.skipPrefersReducedMotionCheck !== !0 && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? (i(), {
+    finished: Promise.resolve()
+  }) : n.call(document, i);
+}
+function getDOMNodeFromNodeId(i, t) {
+  const n = `[${_constants.ATTRIBUTES.id}="${t}"][${_constants.ATTRIBUTES.path}="${i}"]`;
+  return document.querySelector(n);
+}
+function getNodeType(i) {
+  return i.getAttribute(_constants.ATTRIBUTES.type);
+}
+function getInsertAreas(i) {
+  const t = [];
+  return Array.from(document.querySelectorAll(`[${_constants.ATTRIBUTES.id}]:not([${_constants.ATTRIBUTES.id}=""]):not([${_constants.ATTRIBUTES.component}])[data-node-path="${i}"]`)).filter(n => !n.hasAttribute(_constants.ATTRIBUTES.index)).map(n => n.getAttribute(_constants.ATTRIBUTES.id)).forEach(n => {
+    const s = getDOMNodeFromNodeId(i, n);
+    if (!s) {
+      console.warn(`Element with path ${n} not found`);
+      return;
+    }
+    const e = s.getBoundingClientRect(),
+      o = s.parentElement;
+    if (!o) return;
+    const c = Array.from(o.children).filter(l => l.hasAttribute(_constants.ATTRIBUTES.id) && l.hasAttribute(_constants.ATTRIBUTES.path) && !l.hasAttribute(_constants.ATTRIBUTES.index)),
+      r = c.indexOf(s),
+      u = c[r + 1]?.getBoundingClientRect(),
+      h = c[r - 1]?.getBoundingClientRect();
+    c.length > 1 && c.map(l => l.getBoundingClientRect()).every((l, f, p) => f === 0 || l.width + l.height === 0 || p[f - 1].bottom <= l.top) ? (h ? h.bottom >= e.top && t.push({
+      layout: "block",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.top
+      },
+      size: e.width,
+      direction: -1
+    }) : c.length > 0 && t.push({
+      layout: "block",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.top
+      },
+      size: e.width,
+      direction: -1
+    }), u ? u.top > e.bottom ? t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: (e.bottom + u.top) / 2
+      },
+      size: e.width,
+      direction: 1
+    }) : t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.bottom
+      },
+      size: e.width,
+      direction: 1
+    }) : c.length > 0 && t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.bottom
+      },
+      size: e.width,
+      direction: 1
+    })) : (h ? h.right >= e.left && t.push({
+      layout: "inline",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: -1
+    }) : c.length > 0 && t.push({
+      layout: "inline",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: -1
+    }), u ? u.left > e.right ? t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: (e.right + u.left) / 2,
+        y: u.top + u.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }) : t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.right,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }) : c.length > 0 && t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.right,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }));
+  }), y(t);
+}
+function y(i) {
+  return i.map(t => t.layout === "block" ? {
+    ...t,
+    point: {
+      ...t.center,
+      y: t.center.y - i.filter(n => t.parent !== n.parent && n.layout === "block" && n.center.y === t.center.y && n.parent.contains(t.parent)).length * t.direction
+    }
+  } : {
+    ...t,
+    point: {
+      ...t.center,
+      x: t.center.x - i.filter(n => t.parent !== n.parent && n.layout === "inline" && n.center.x === t.center.x && n.parent.contains(t.parent)).length * t.direction
+    }
+  });
+}
+function findNearestLine(i, t) {
+  let n = 1 / 0,
+    s = null,
+    e = 0;
+  for (const o of i) {
+    const {
+      distSquared: c,
+      projectionPoint: r
+    } = m(t, o);
+    c < n && (n = c, s = o, e = r);
+  }
+  return {
+    nearestLine: s,
+    dist: Math.sqrt(n),
+    projectionPoint: e
+  };
+}
+function m(i, t) {
+  const n = t.x2 - t.x1,
+    s = t.y2 - t.y1,
+    e = n * n + s * s;
+  if (e === 0) return {
+    distSquared: (i.x - t.x1) * (i.x - t.x1) + (i.y - t.y1) * (i.y - t.y1),
+    projectionPoint: .5
+  };
+  let o = ((i.x - t.x1) * n + (i.y - t.y1) * s) / e;
+  o = Math.max(0, Math.min(1, o));
+  const c = t.x1 + o * n,
+    r = t.y1 + o * s;
+  return {
+    distSquared: (i.x - c) * (i.x - c) + (i.y - r) * (i.y - r),
+    projectionPoint: o
+  };
+}

package/dist/drag-drop/helpers.mjs

@@ -0,0 +1,188 @@
+import { ATTRIBUTES as d } from "../constants.mjs";
+export function isElementInViewport(i, t = 0) {
+  const n = i.getBoundingClientRect(), s = window.innerHeight || document.documentElement.clientHeight, e = window.innerWidth || document.documentElement.clientWidth;
+  return n.top >= 0 - t && n.left >= 0 - t && n.bottom <= s + t && n.right <= e + t;
+}
+export function rectHasPoint(i, { x: t, y: n }) {
+  return t >= i.left && t <= i.right && n >= i.top && n <= i.bottom;
+}
+export function tryStartViewTransition(i, t) {
+  const n = document.startViewTransition;
+  return !n || t?.skipPrefersReducedMotionCheck !== !0 && window.matchMedia("(prefers-reduced-motion: reduce)").matches ? (i(), {
+    finished: Promise.resolve()
+  }) : n.call(document, i);
+}
+export function getDOMNodeFromNodeId(i, t) {
+  const n = `[${d.id}="${t}"][${d.path}="${i}"]`;
+  return document.querySelector(n);
+}
+export function getNodeType(i) {
+  return i.getAttribute(d.type);
+}
+export function getInsertAreas(i) {
+  const t = [];
+  return Array.from(
+    document.querySelectorAll(
+      `[${d.id}]:not([${d.id}=""]):not([${d.component}])[data-node-path="${i}"]`
+    )
+  ).filter((n) => !n.hasAttribute(d.index)).map((n) => n.getAttribute(d.id)).forEach((n) => {
+    const s = getDOMNodeFromNodeId(i, n);
+    if (!s) {
+      console.warn(`Element with path ${n} not found`);
+      return;
+    }
+    const e = s.getBoundingClientRect(), o = s.parentElement;
+    if (!o)
+      return;
+    const c = Array.from(o.children).filter(
+      (l) => l.hasAttribute(d.id) && l.hasAttribute(d.path) && !l.hasAttribute(d.index)
+    ), r = c.indexOf(s), u = c[r + 1]?.getBoundingClientRect(), h = c[r - 1]?.getBoundingClientRect();
+    c.length > 1 && c.map((l) => l.getBoundingClientRect()).every((l, f, p) => f === 0 || l.width + l.height === 0 || p[f - 1].bottom <= l.top) ? (h ? h.bottom >= e.top && t.push({
+      layout: "block",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.top
+      },
+      size: e.width,
+      direction: -1
+    }) : c.length > 0 && t.push({
+      layout: "block",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.top
+      },
+      size: e.width,
+      direction: -1
+    }), u ? u.top > e.bottom ? t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: (e.bottom + u.top) / 2
+      },
+      size: e.width,
+      direction: 1
+    }) : t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.bottom
+      },
+      size: e.width,
+      direction: 1
+    }) : c.length > 0 && t.push({
+      layout: "block",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.left + e.width / 2,
+        y: e.bottom
+      },
+      size: e.width,
+      direction: 1
+    })) : (h ? h.right >= e.left && t.push({
+      layout: "inline",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: -1
+    }) : c.length > 0 && t.push({
+      layout: "inline",
+      parent: o,
+      index: r,
+      center: {
+        x: e.left,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: -1
+    }), u ? u.left > e.right ? t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: (e.right + u.left) / 2,
+        y: u.top + u.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }) : t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.right,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }) : c.length > 0 && t.push({
+      layout: "inline",
+      parent: o,
+      index: r + 1,
+      center: {
+        x: e.right,
+        y: e.top + e.height / 2
+      },
+      size: e.height,
+      direction: 1
+    }));
+  }), y(t);
+}
+function y(i) {
+  return i.map((t) => t.layout === "block" ? {
+    ...t,
+    point: {
+      ...t.center,
+      y: t.center.y - i.filter(
+        (n) => t.parent !== n.parent && n.layout === "block" && n.center.y === t.center.y && n.parent.contains(t.parent)
+      ).length * t.direction
+    }
+  } : {
+    ...t,
+    point: {
+      ...t.center,
+      x: t.center.x - i.filter(
+        (n) => t.parent !== n.parent && n.layout === "inline" && n.center.x === t.center.x && n.parent.contains(t.parent)
+      ).length * t.direction
+    }
+  });
+}
+export function findNearestLine(i, t) {
+  let n = 1 / 0, s = null, e = 0;
+  for (const o of i) {
+    const { distSquared: c, projectionPoint: r } = m(t, o);
+    c < n && (n = c, s = o, e = r);
+  }
+  return {
+    nearestLine: s,
+    dist: Math.sqrt(n),
+    projectionPoint: e
+  };
+}
+function m(i, t) {
+  const n = t.x2 - t.x1, s = t.y2 - t.y1, e = n * n + s * s;
+  if (e === 0)
+    return {
+      distSquared: (i.x - t.x1) * (i.x - t.x1) + (i.y - t.y1) * (i.y - t.y1),
+      projectionPoint: 0.5
+    };
+  let o = ((i.x - t.x1) * n + (i.y - t.y1) * s) / e;
+  o = Math.max(0, Math.min(1, o));
+  const c = t.x1 + o * n, r = t.y1 + o * s;
+  return {
+    distSquared: (i.x - c) * (i.x - c) + (i.y - r) * (i.y - r),
+    projectionPoint: o
+  };
+}

package/dist/drag-drop/highlight.d.ts

@@ -0,0 +1,16 @@
+import type { Point } from './types';
+/**
+ * Visual representation of where a dragged node will be dropped.
+ */
+export declare function setDropHighlight(element: HTMLElement, targetContainer: HTMLElement, color: string): void;
+/**
+ * Visual representation of where a dragged node will be dropped outside of its own container.
+ */
+export declare function setExternalDropHighlight({ layout, center, length, color, projectionPoint }: {
+    layout: 'block' | 'inline';
+    center: Point;
+    length: number;
+    color: string;
+    projectionPoint: number;
+}): void;
+export declare function removeDropHighlight(): void;

package/dist/drag-drop/highlight.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeDropHighlight = removeDropHighlight;
+exports.setDropHighlight = setDropHighlight;
+exports.setExternalDropHighlight = setExternalDropHighlight;
+let e = null;
+function setDropHighlight(t, r, o) {
+  if (e?.remove(), !t || !r) return;
+  e = document.createElement("div"), e.classList.add("__drop-area");
+  const {
+    top: p,
+    left: s
+  } = r.getBoundingClientRect();
+  e.style.setProperty("position", "fixed"), e.style.setProperty("--drop-area-left", `${t.offsetLeft + s}px`), e.style.setProperty("--drop-area-top", `${t.offsetTop + p}px`), e.style.setProperty("--drop-area-width", `${t.offsetWidth}px`), e.style.setProperty("--drop-area-height", `${t.offsetHeight}px`), e.style.setProperty("--drop-area-outline-color", `#${o}`), e.style.setProperty("--drop-area-border-radius", window.getComputedStyle(t).borderRadius), e.style.setProperty("--dashed-line-color", `color-mix(in srgb, #${o} 33%, transparent)`), document.body.append(e);
+}
+function setExternalDropHighlight({
+  layout: t,
+  center: r,
+  length: o,
+  color: p,
+  projectionPoint: s
+}) {
+  e?.remove(), e = document.createElement("div"), e.classList.add("__drop-area-line"), e.style.setProperty("--drop-area-left", `${r.x}px`), e.style.setProperty("--drop-area-top", `${r.y}px`), t === "block" ? (e.style.setProperty("--drop-area-width", `${o}px`), e.style.setProperty("--drop-area-height", "4px"), e.style.setProperty("--drop-area-translate", "-50% -2px")) : (e.style.setProperty("--drop-area-width", "4px"), e.style.setProperty("--drop-area-height", `${o}px`), e.style.setProperty("--drop-area-translate", "-2px -50%"));
+  const a = `radial-gradient(circle at ${s * 100}% ${s * 100}%, #${p} 0%, #${p}55 max(100%, 75px))`;
+  e.style.setProperty("--drop-area-background", a), document.body.appendChild(e);
+}
+function removeDropHighlight() {
+  e?.remove(), e = null;
+}

package/dist/drag-drop/highlight.mjs

@@ -0,0 +1,22 @@
+let e = null;
+export function setDropHighlight(t, r, o) {
+  if (e?.remove(), !t || !r)
+    return;
+  e = document.createElement("div"), e.classList.add("__drop-area");
+  const { top: p, left: s } = r.getBoundingClientRect();
+  e.style.setProperty("position", "fixed"), e.style.setProperty("--drop-area-left", `${t.offsetLeft + s}px`), e.style.setProperty("--drop-area-top", `${t.offsetTop + p}px`), e.style.setProperty("--drop-area-width", `${t.offsetWidth}px`), e.style.setProperty("--drop-area-height", `${t.offsetHeight}px`), e.style.setProperty("--drop-area-outline-color", `#${o}`), e.style.setProperty("--drop-area-border-radius", window.getComputedStyle(t).borderRadius), e.style.setProperty("--dashed-line-color", `color-mix(in srgb, #${o} 33%, transparent)`), document.body.append(e);
+}
+export function setExternalDropHighlight({
+  layout: t,
+  center: r,
+  length: o,
+  color: p,
+  projectionPoint: s
+}) {
+  e?.remove(), e = document.createElement("div"), e.classList.add("__drop-area-line"), e.style.setProperty("--drop-area-left", `${r.x}px`), e.style.setProperty("--drop-area-top", `${r.y}px`), t === "block" ? (e.style.setProperty("--drop-area-width", `${o}px`), e.style.setProperty("--drop-area-height", "4px"), e.style.setProperty("--drop-area-translate", "-50% -2px")) : (e.style.setProperty("--drop-area-width", "4px"), e.style.setProperty("--drop-area-height", `${o}px`), e.style.setProperty("--drop-area-translate", "-2px -50%"));
+  const a = `radial-gradient(circle at ${s * 100}% ${s * 100}%, #${p} 0%, #${p}55 max(100%, 75px))`;
+  e.style.setProperty("--drop-area-background", a), document.body.appendChild(e);
+}
+export function removeDropHighlight() {
+  e?.remove(), e = null;
+}

package/dist/drag-drop/index.d.ts

@@ -0,0 +1,24 @@
+export declare const DRAG_MOVE_CLASSNAME = "__drag-mode--move";
+export declare const DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+export interface DragDropContext {
+    startDrag: (options: {
+        elementId: string;
+        path: string;
+        x: number;
+        y: number;
+        altKey: boolean;
+    }) => void;
+    dragMove: (options: {
+        x: number;
+        y: number;
+        metaKey: boolean;
+    }) => void;
+    endDrag: (options: {
+        canceled?: boolean;
+    }) => Promise<{
+        copy: boolean;
+        parent: string;
+        index?: number;
+    } | void>;
+}
+export declare function createDragDropContext(): DragDropContext;

package/dist/drag-drop/index.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_REORDER_CLASSNAME = exports.DRAG_MOVE_CLASSNAME = void 0;
+exports.createDragDropContext = createDragDropContext;
+var _constants = require("../constants");
+var _dragEnd = require("./dragEnd");
+var _dragMove = require("./dragMove");
+var _dragReorder = require("./dragReorder");
+var _dragStart = require("./dragStart");
+var _helpers = require("./helpers");
+const DRAG_MOVE_CLASSNAME = exports.DRAG_MOVE_CLASSNAME = "__drag-mode--move",
+  DRAG_REORDER_CLASSNAME = exports.DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+class u {
+  state = null;
+  startDrag({
+    elementId: t,
+    altKey: e,
+    path: i,
+    x: r,
+    y: s
+  }) {
+    const n = (0, _helpers.getDOMNodeFromNodeId)(i, t);
+    if (!n || !n.parentElement) return;
+    const o = Array.from(n.parentElement.children).filter(a => a instanceof HTMLElement && a.getAttribute(_constants.ATTRIBUTES.id) === t && a.getAttribute(_constants.ATTRIBUTES.path) === i).slice(1);
+    if (this.state = (0, _dragStart.dragStarted)({
+      element: n,
+      lastCursorPosition: {
+        x: r,
+        y: s
+      },
+      repeatedNodes: o,
+      asCopy: e
+    }), e) {
+      const a = this.state.element.getBoundingClientRect();
+      this.state.offset.x += a.left - this.state.initialRect.left, this.state.offset.y += a.top - this.state.initialRect.top;
+    }
+  }
+  async endDrag({
+    canceled: t
+  }) {
+    switch (this.state?.mode) {
+      case "reorder":
+        const e = this.state?.initialContainer.getAttribute(_constants.ATTRIBUTES.id);
+        if (!e) return;
+        const i = this.state?.element.nextElementSibling,
+          r = parseInt(_constants.ATTRIBUTES.id);
+        if (this.state?.element?.getBoundingClientRect() && !t && (i !== this.state?.initialNextSibling || this.state?.copy)) {
+          await (0, _dragEnd.dragEnded)(this.state, !1);
+          const o = {
+            copy: !!this.state?.copy,
+            parent: e,
+            index: isNaN(r) ? void 0 : r
+          };
+          return this.state = null, o;
+        } else await (0, _dragEnd.dragEnded)(this.state, !0), this.state = null;
+        break;
+      case "insert":
+        const n = this.state?.insertAreas?.[this.state?.selectedInsertAreaIndex ?? -1];
+        if (n && !t) {
+          await (0, _dragEnd.dragEnded)(this.state, !1);
+          const o = n?.parent.getAttribute(_constants.ATTRIBUTES.id);
+          if (!o) return;
+          const a = {
+            copy: !!this.state?.copy,
+            parent: o,
+            index: n?.index
+          };
+          return this.state = null, a;
+        } else await (0, _dragEnd.dragEnded)(this.state, !0), this.state = null;
+        break;
+    }
+  }
+  dragMove({
+    x: t,
+    y: e,
+    metaKey: i
+  }) {
+    if (this.state && !this.state.destroying) {
+      this.state.lastCursorPosition = {
+        x: t,
+        y: e
+      };
+      const r = (0, _helpers.rectHasPoint)(this.state.initialContainer.getBoundingClientRect(), {
+          x: t,
+          y: e
+        }),
+        s = this.state.element.getBoundingClientRect();
+      (0, _helpers.rectHasPoint)(s, {
+        x: t,
+        y: e
+      }) || (this.state.offset.x -= (t - (s.left + s.width / 2)) * .1, this.state.offset.y -= (e - (s.top + s.height / 2)) * .1), r && !i ? (0, _dragReorder.dragReorder)(this.state) : (0, _dragMove.dragMove)(this.state, i ? [this.state.element] : [this.state.element, this.state.initialContainer]), this.state.element.style.setProperty("translate", `${t - this.state.offset.x}px ${e - this.state.offset.y}px`);
+      return;
+    }
+  }
+}
+function createDragDropContext() {
+  const d = new u();
+  return {
+    startDrag: (...t) => d.startDrag(...t),
+    dragMove: (...t) => d.dragMove(...t),
+    endDrag: (...t) => d.endDrag(...t)
+  };
+}

package/dist/drag-drop/index.mjs

@@ -0,0 +1,83 @@
+import { ATTRIBUTES as l } from "../constants.mjs";
+import { dragEnded as g } from "./dragEnd.mjs";
+import { dragMove as c } from "./dragMove.mjs";
+import { dragReorder as h } from "./dragReorder.mjs";
+import { dragStarted as p } from "./dragStart.mjs";
+import { getDOMNodeFromNodeId as f, rectHasPoint as m } from "./helpers.mjs";
+export const DRAG_MOVE_CLASSNAME = "__drag-mode--move", DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+class u {
+  state = null;
+  startDrag({
+    elementId: t,
+    altKey: e,
+    path: i,
+    x: r,
+    y: s
+  }) {
+    const n = f(i, t);
+    if (!n || !n.parentElement)
+      return;
+    const o = Array.from(n.parentElement.children).filter(
+      (a) => a instanceof HTMLElement && a.getAttribute(l.id) === t && a.getAttribute(l.path) === i
+    ).slice(1);
+    if (this.state = p({
+      element: n,
+      lastCursorPosition: { x: r, y: s },
+      repeatedNodes: o,
+      asCopy: e
+    }), e) {
+      const a = this.state.element.getBoundingClientRect();
+      this.state.offset.x += a.left - this.state.initialRect.left, this.state.offset.y += a.top - this.state.initialRect.top;
+    }
+  }
+  async endDrag({ canceled: t }) {
+    switch (this.state?.mode) {
+      case "reorder":
+        const e = this.state?.initialContainer.getAttribute(l.id);
+        if (!e) return;
+        const i = this.state?.element.nextElementSibling, r = parseInt(l.id);
+        if (this.state?.element?.getBoundingClientRect() && !t && (i !== this.state?.initialNextSibling || this.state?.copy)) {
+          await g(this.state, !1);
+          const o = {
+            copy: !!this.state?.copy,
+            parent: e,
+            index: isNaN(r) ? void 0 : r
+          };
+          return this.state = null, o;
+        } else
+          await g(this.state, !0), this.state = null;
+        break;
+      case "insert":
+        const n = this.state?.insertAreas?.[this.state?.selectedInsertAreaIndex ?? -1];
+        if (n && !t) {
+          await g(this.state, !1);
+          const o = n?.parent.getAttribute(l.id);
+          if (!o) return;
+          const a = {
+            copy: !!this.state?.copy,
+            parent: o,
+            index: n?.index
+          };
+          return this.state = null, a;
+        } else
+          await g(this.state, !0), this.state = null;
+        break;
+    }
+  }
+  dragMove({ x: t, y: e, metaKey: i }) {
+    if (this.state && !this.state.destroying) {
+      this.state.lastCursorPosition = { x: t, y: e };
+      const r = m(this.state.initialContainer.getBoundingClientRect(), { x: t, y: e }), s = this.state.element.getBoundingClientRect();
+      m(s, { x: t, y: e }) || (this.state.offset.x -= (t - (s.left + s.width / 2)) * 0.1, this.state.offset.y -= (e - (s.top + s.height / 2)) * 0.1), r && !i ? h(this.state) : c(this.state, i ? [this.state.element] : [this.state.element, this.state.initialContainer]), this.state.element.style.setProperty("translate", `${t - this.state.offset.x}px ${e - this.state.offset.y}px`);
+      return;
+    }
+  }
+}
+export function createDragDropContext() {
+  const d = new u();
+  return {
+    startDrag: (...t) => d.startDrag(...t),
+    dragMove: (...t) => d.dragMove(...t),
+    endDrag: (...t) => d.endDrag(...t)
+  };
+}