@nookuio/iframe 1.0.0 → 1.0.2-beta.0

package/dist/constants.d.ts

@@ -6,3 +6,12 @@ export declare const COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview
 export declare const VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor";
 export declare const IFRAME_SOURCE_NAME = "nooku-frame";
 export declare const EDITOR_SOURCE_NAME = "nooku-editor";
+export declare const ATTRIBUTES: {
+    id: string;
+    path: string;
+    type: string;
+    index: string;
+    component: string;
+    forceRender: string;
+    selected: string;
+};

package/dist/constants.js

@@ -3,9 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.IFRAME_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = exports.EDITOR_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = void 0;
+exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.IFRAME_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = exports.EDITOR_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = exports.ATTRIBUTES = void 0;
 const EDITOR_PAGE_PATH = exports.EDITOR_PAGE_PATH = "/__nooku__/editor",
   COMPONENT_PREVIEW_PAGE_PATH = exports.COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview",
   VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = exports.VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor",
   IFRAME_SOURCE_NAME = exports.IFRAME_SOURCE_NAME = "nooku-frame",
-  EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor";
+  EDITOR_SOURCE_NAME = exports.EDITOR_SOURCE_NAME = "nooku-editor",
+  ATTRIBUTES = exports.ATTRIBUTES = {
+    id: "data-node-id",
+    path: "data-node-path",
+    type: "data-node-type",
+    index: "data-node-index",
+    component: "data-node-component",
+    forceRender: "data-node-force-render",
+    selected: "data-node-selected"
+  };

package/dist/constants.mjs

@@ -1 +1,9 @@
-export const EDITOR_PAGE_PATH = "/__nooku__/editor", COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview", VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor", IFRAME_SOURCE_NAME = "nooku-frame", EDITOR_SOURCE_NAME = "nooku-editor";
+export const EDITOR_PAGE_PATH = "/__nooku__/editor", COMPONENT_PREVIEW_PAGE_PATH = "/__nooku__/component-preview", VIRTUAL_VUE_SFC_RENDERER_PAGE_PATH = "/__nooku__/virtual-sfc-editor", IFRAME_SOURCE_NAME = "nooku-frame", EDITOR_SOURCE_NAME = "nooku-editor", ATTRIBUTES = {
+  id: "data-node-id",
+  path: "data-node-path",
+  type: "data-node-type",
+  index: "data-node-index",
+  component: "data-node-component",
+  forceRender: "data-node-force-render",
+  selected: "data-node-selected"
+};

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

@@ -0,0 +1,2 @@
+import type { DragState } from './types';
+export declare function dragEnded(dragState: DragState, canceled: boolean): Promise<void>;

package/dist/drag-drop/dragEnd.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragEnded = dragEnded;
+var _helpers = require("./helpers");
+var _ = require("./");
+var _highlight = require("./highlight");
+async function dragEnded(e, o) {
+  e.destroying = !0;
+  const t = e.insertAreas?.[e.selectedInsertAreaIndex ?? -1],
+    n = (e.mode === "insert" && !o ? t?.parent : e.initialContainer)?.querySelectorAll(`[data-node-id][data-node-path="${e.elementPath}"]`) ?? [];
+  e.element.style.setProperty("view-transition-name", "dropped-item-self"), n.forEach((r, i) => {
+    r instanceof HTMLElement && (0, _helpers.isElementInViewport)(r) && r.style.setProperty("view-transition-name", "dropped-item-sibling-" + i);
+  }), e.repeatedNodes.filter(_helpers.isElementInViewport).forEach((r, i) => {
+    r.style.setProperty("view-transition-name", "dropped-item-repeated-" + i);
+  }), await (0, _helpers.tryStartViewTransition)(() => {
+    o ? (e.copy?.remove(), e.initialContainer.insertBefore(e.element, e.initialNextSibling)) : e.mode === "insert" && t?.parent.insertBefore(e.element, t.parent.childNodes[t.index]), e.element.classList.remove(_.DRAG_REORDER_CLASSNAME), e.element.classList.remove(_.DRAG_MOVE_CLASSNAME), e.element.style.removeProperty("translate"), e.repeatedNodes.toReversed().forEach(r => {
+      e.element.insertAdjacentElement("afterend", r), r.classList.remove("drag-repeat-node"), r.style.removeProperty("rotate"), r.style.removeProperty("--drag-repeat-node-width"), r.style.removeProperty("--drag-repeat-node-height"), r.style.removeProperty("--drag-repeat-node-translate"), r.style.removeProperty("--drag-repeat-node-rotate"), r.style.removeProperty("--drag-repeat-node-opacity");
+    }), (0, _highlight.removeDropHighlight)();
+  }).finished.then(() => {
+    e.element.style.removeProperty("view-transition-name"), n.forEach(r => {
+      r instanceof HTMLElement && r.style.removeProperty("view-transition-name");
+    });
+  });
+}

package/dist/drag-drop/dragEnd.mjs

@@ -0,0 +1,23 @@
+import { isElementInViewport as s, tryStartViewTransition as l } from "./helpers.mjs";
+import { DRAG_MOVE_CLASSNAME as m, DRAG_REORDER_CLASSNAME as p } from ".//index.mjs";
+import { removeDropHighlight as a } from "./highlight.mjs";
+export async function dragEnded(e, o) {
+  e.destroying = !0;
+  const t = e.insertAreas?.[e.selectedInsertAreaIndex ?? -1], n = (e.mode === "insert" && !o ? t?.parent : e.initialContainer)?.querySelectorAll(`[data-node-id][data-node-path="${e.elementPath}"]`) ?? [];
+  e.element.style.setProperty("view-transition-name", "dropped-item-self"), n.forEach((r, i) => {
+    r instanceof HTMLElement && s(r) && r.style.setProperty("view-transition-name", "dropped-item-sibling-" + i);
+  }), e.repeatedNodes.filter(s).forEach((r, i) => {
+    r.style.setProperty("view-transition-name", "dropped-item-repeated-" + i);
+  }), await l(() => {
+    o ? (e.copy?.remove(), e.initialContainer.insertBefore(e.element, e.initialNextSibling)) : e.mode === "insert" && t?.parent.insertBefore(
+      e.element,
+      t.parent.childNodes[t.index]
+    ), e.element.classList.remove(p), e.element.classList.remove(m), e.element.style.removeProperty("translate"), e.repeatedNodes.toReversed().forEach((r) => {
+      e.element.insertAdjacentElement("afterend", r), r.classList.remove("drag-repeat-node"), r.style.removeProperty("rotate"), r.style.removeProperty("--drag-repeat-node-width"), r.style.removeProperty("--drag-repeat-node-height"), r.style.removeProperty("--drag-repeat-node-translate"), r.style.removeProperty("--drag-repeat-node-rotate"), r.style.removeProperty("--drag-repeat-node-opacity");
+    }), a();
+  }).finished.then(() => {
+    e.element.style.removeProperty("view-transition-name"), n.forEach((r) => {
+      r instanceof HTMLElement && r.style.removeProperty("view-transition-name");
+    });
+  });
+}

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

@@ -0,0 +1,2 @@
+import type { DragState } from './types';
+export declare function dragMove(dragState: DragState | null, exclude: HTMLElement[]): void;

package/dist/drag-drop/dragMove.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragMove = dragMove;
+var _ = require("./");
+var _highlight = require("./highlight");
+var _helpers = require("./helpers");
+function dragMove(e, m) {
+  if (!e) return;
+  if (e.mode === "reorder") {
+    e.mode = "insert", e.element.style.setProperty("display", "none"), e.insertAreas ??= (0, _helpers.getInsertAreas)(e.elementPath).filter(s => m.every(i => !i?.contains(s.parent) && i !== s.parent) && s.parent !== document.body), e.element.style.removeProperty("display");
+    const t = e.element.style.getPropertyValue("translate");
+    e.element.style.setProperty("translate", "0");
+    const n = e.element.getBoundingClientRect();
+    document.body.appendChild(e.element), e.element.classList.add(_.DRAG_MOVE_CLASSNAME), e.element.classList.remove(_.DRAG_REORDER_CLASSNAME), e.element.style.setProperty("--drag-mode--move-left", `${n.left}px`), e.element.style.setProperty("--drag-mode--move-top", `${n.top}px`), e.element.style.setProperty("--drag-mode--move-width", `${e.initialRect.width}px`), e.element.style.setProperty("translate", t);
+  }
+  e.repeatedNodes.forEach((t, n) => {
+    t.style.setProperty("--drag-repeat-node-opacity", n < 3 ? "0.2" : "0");
+  });
+  const o = e.insertAreas?.map(t => t.layout === "block" ? {
+      x1: t.center.x - t.size / 2,
+      y1: t.center.y,
+      x2: t.center.x + t.size / 2,
+      y2: t.center.y
+    } : {
+      x1: t.center.x,
+      y1: t.center.y - t.size / 2,
+      x2: t.center.x,
+      y2: t.center.y + t.size / 2
+    }),
+    {
+      nearestLine: l,
+      projectionPoint: p
+    } = (0, _helpers.findNearestLine)(o ?? [], e.lastCursorPosition);
+  if (!l || !e.insertAreas || !o) return;
+  const r = e.insertAreas.at(o.indexOf(l));
+  r ? (e.selectedInsertAreaIndex = e.insertAreas?.indexOf(r), (0, _highlight.setExternalDropHighlight)({
+    layout: r.layout,
+    center: r.center,
+    length: r.size,
+    color: e.elementType === "component" ? "D946EF" : "2563EB",
+    projectionPoint: p
+  })) : (0, _highlight.removeDropHighlight)();
+}

package/dist/drag-drop/dragMove.mjs

@@ -0,0 +1,40 @@
+import { DRAG_REORDER_CLASSNAME as y, DRAG_MOVE_CLASSNAME as c } from ".//index.mjs";
+import { removeDropHighlight as f, setExternalDropHighlight as A } from "./highlight.mjs";
+import { getInsertAreas as u, findNearestLine as x } from "./helpers.mjs";
+export function dragMove(e, m) {
+  if (!e)
+    return;
+  if (e.mode === "reorder") {
+    e.mode = "insert", e.element.style.setProperty("display", "none"), e.insertAreas ??= u(e.elementPath).filter(
+      (s) => m.every((i) => !i?.contains(s.parent) && i !== s.parent) && s.parent !== document.body
+    ), e.element.style.removeProperty("display");
+    const t = e.element.style.getPropertyValue("translate");
+    e.element.style.setProperty("translate", "0");
+    const n = e.element.getBoundingClientRect();
+    document.body.appendChild(e.element), e.element.classList.add(c), e.element.classList.remove(y), e.element.style.setProperty("--drag-mode--move-left", `${n.left}px`), e.element.style.setProperty("--drag-mode--move-top", `${n.top}px`), e.element.style.setProperty("--drag-mode--move-width", `${e.initialRect.width}px`), e.element.style.setProperty("translate", t);
+  }
+  e.repeatedNodes.forEach((t, n) => {
+    t.style.setProperty("--drag-repeat-node-opacity", n < 3 ? "0.2" : "0");
+  });
+  const o = e.insertAreas?.map((t) => t.layout === "block" ? {
+    x1: t.center.x - t.size / 2,
+    y1: t.center.y,
+    x2: t.center.x + t.size / 2,
+    y2: t.center.y
+  } : {
+    x1: t.center.x,
+    y1: t.center.y - t.size / 2,
+    x2: t.center.x,
+    y2: t.center.y + t.size / 2
+  }), { nearestLine: l, projectionPoint: p } = x(o ?? [], e.lastCursorPosition);
+  if (!l || !e.insertAreas || !o)
+    return;
+  const r = e.insertAreas.at(o.indexOf(l));
+  r ? (e.selectedInsertAreaIndex = e.insertAreas?.indexOf(r), A({
+    layout: r.layout,
+    center: r.center,
+    length: r.size,
+    color: e.elementType === "component" ? "D946EF" : "2563EB",
+    projectionPoint: p
+  })) : f();
+}

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

@@ -0,0 +1,3 @@
+import type { DragState } from './types';
+export declare const DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+export declare function dragReorder(dragState: DragState | null): void;

package/dist/drag-drop/dragReorder.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DRAG_REORDER_CLASSNAME = void 0;
+exports.dragReorder = dragReorder;
+var _helpers = require("./helpers");
+var _ = require("./");
+var _highlight = require("./highlight");
+const DRAG_REORDER_CLASSNAME = exports.DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+const c = 100;
+function dragReorder(e) {
+  if (!e || e.isTransitioning) return;
+  if (e.mode === "insert") {
+    e.mode = "reorder";
+    const o = e.element.getBoundingClientRect();
+    e.element.classList.add(DRAG_REORDER_CLASSNAME), e.element.classList.remove(_.DRAG_MOVE_CLASSNAME), e.initialContainer.insertBefore(e.element, e.initialNextSibling), e.repeatedNodes.forEach((r, l) => {
+      r.style.setProperty("--drag-repeat-node-opacity", l < 3 ? "1" : "0");
+    });
+    const s = e.element.getBoundingClientRect();
+    e.offset.x += s.left - o.left, e.offset.y += s.top - o.top, (0, _highlight.setDropHighlight)(e.element, e.initialContainer, e.elementType === "component" ? "D946EF" : "2563EB");
+  }
+  const f = T(e);
+  if (f && e.element.nextElementSibling !== f.nextSibling) {
+    e.isTransitioning = !0;
+    const o = Array.from(e.initialContainer.childNodes);
+    o.filter(t => t instanceof HTMLElement).filter(_helpers.isElementInViewport).forEach((t, i) => {
+      t.style.setProperty("view-transition-name", "item-" + i);
+    }), e.element.style.setProperty("view-transition-name", "__drag-item");
+    const s = e.element.offsetLeft,
+      r = e.element.offsetTop;
+    (0, _helpers.tryStartViewTransition)(() => {
+      e && (e.initialContainer.insertBefore(e.element, f.nextSibling), e.offset.x += e.element.offsetLeft - s, e.offset.y += e.element.offsetTop - r, e?.element.style.setProperty("translate", `${e.lastCursorPosition.x - e.offset.x}px ${e.lastCursorPosition.y - e.offset.y}px`), (0, _highlight.setDropHighlight)(e.element, e.initialContainer, e.elementType === "component" ? "D946EF" : "2563EB"));
+    }).finished.then(() => {
+      o.forEach(t => {
+        t instanceof HTMLElement && t.style.removeProperty("view-transition-name");
+      }), e && (e.isTransitioning = !1);
+    }).catch(() => {});
+  }
+}
+function T(e) {
+  const {
+      left: f,
+      top: o,
+      width: s,
+      height: r
+    } = e.element.getBoundingClientRect(),
+    l = f + s / 2,
+    t = o + r / 2;
+  return e.reorderPermutations.reduce((i, n) => {
+    if (Math.abs(n.rect.left + n.rect.width / 2 - l) < n.rect.width / 2 + c && Math.abs(n.rect.top + n.rect.height / 2 - t) < n.rect.height / 2 + c) {
+      if (!i) return n;
+      const p = Math.hypot(i.rect.left + i.rect.width / 2 - l, i.rect.top + i.rect.height / 2 - t),
+        h = Math.hypot(n.rect.left + n.rect.width / 2 - l, n.rect.top + n.rect.height / 2 - t);
+      return p < h ? i : n;
+    }
+    return i;
+  }, null);
+}

package/dist/drag-drop/dragReorder.mjs

@@ -0,0 +1,64 @@
+import { isElementInViewport as y, tryStartViewTransition as E } from "./helpers.mjs";
+import { DRAG_MOVE_CLASSNAME as x } from ".//index.mjs";
+import { setDropHighlight as m } from "./highlight.mjs";
+export const DRAG_REORDER_CLASSNAME = "__drag-mode--reorder";
+const c = 100;
+export function dragReorder(e) {
+  if (!e || e.isTransitioning)
+    return;
+  if (e.mode === "insert") {
+    e.mode = "reorder";
+    const o = e.element.getBoundingClientRect();
+    e.element.classList.add(DRAG_REORDER_CLASSNAME), e.element.classList.remove(x), e.initialContainer.insertBefore(e.element, e.initialNextSibling), e.repeatedNodes.forEach((r, l) => {
+      r.style.setProperty("--drag-repeat-node-opacity", l < 3 ? "1" : "0");
+    });
+    const s = e.element.getBoundingClientRect();
+    e.offset.x += s.left - o.left, e.offset.y += s.top - o.top, m(
+      e.element,
+      e.initialContainer,
+      e.elementType === "component" ? "D946EF" : "2563EB"
+    );
+  }
+  const f = T(e);
+  if (f && e.element.nextElementSibling !== f.nextSibling) {
+    e.isTransitioning = !0;
+    const o = Array.from(e.initialContainer.childNodes);
+    o.filter((t) => t instanceof HTMLElement).filter(y).forEach((t, i) => {
+      t.style.setProperty("view-transition-name", "item-" + i);
+    }), e.element.style.setProperty("view-transition-name", "__drag-item");
+    const s = e.element.offsetLeft, r = e.element.offsetTop;
+    E(() => {
+      e && (e.initialContainer.insertBefore(e.element, f.nextSibling), e.offset.x += e.element.offsetLeft - s, e.offset.y += e.element.offsetTop - r, e?.element.style.setProperty(
+        "translate",
+        `${e.lastCursorPosition.x - e.offset.x}px ${e.lastCursorPosition.y - e.offset.y}px`
+      ), m(
+        e.element,
+        e.initialContainer,
+        e.elementType === "component" ? "D946EF" : "2563EB"
+      ));
+    }).finished.then(() => {
+      o.forEach((t) => {
+        t instanceof HTMLElement && t.style.removeProperty("view-transition-name");
+      }), e && (e.isTransitioning = !1);
+    }).catch(() => {
+    });
+  }
+}
+function T(e) {
+  const { left: f, top: o, width: s, height: r } = e.element.getBoundingClientRect(), l = f + s / 2, t = o + r / 2;
+  return e.reorderPermutations.reduce((i, n) => {
+    if (Math.abs(n.rect.left + n.rect.width / 2 - l) < n.rect.width / 2 + c && Math.abs(n.rect.top + n.rect.height / 2 - t) < n.rect.height / 2 + c) {
+      if (!i)
+        return n;
+      const p = Math.hypot(
+        i.rect.left + i.rect.width / 2 - l,
+        i.rect.top + i.rect.height / 2 - t
+      ), h = Math.hypot(
+        n.rect.left + n.rect.width / 2 - l,
+        n.rect.top + n.rect.height / 2 - t
+      );
+      return p < h ? i : n;
+    }
+    return i;
+  }, null);
+}

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

@@ -0,0 +1,9 @@
+import type { DragState, Point } from './types';
+export declare function dragStarted({ element, lastCursorPosition, repeatedNodes, asCopy, initialContainer, initialNextSibling }: {
+    element: HTMLElement;
+    lastCursorPosition: Point;
+    repeatedNodes: HTMLElement[];
+    asCopy: boolean;
+    initialContainer?: HTMLElement;
+    initialNextSibling?: Element | null;
+}): DragState;

package/dist/drag-drop/dragStart.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dragStarted = dragStarted;
+var _ = require("./");
+var _highlight = require("./highlight");
+var _helpers = require("./helpers");
+var _constants = require("../constants");
+function dragStarted({
+  element: i,
+  lastCursorPosition: l,
+  repeatedNodes: s,
+  asCopy: g,
+  initialContainer: y = i.parentElement,
+  initialNextSibling: p
+}) {
+  s.map(e => [e, e.getBoundingClientRect()]).forEach(([e, r], o) => {
+    e.classList.add("drag-repeat-node"), e.style.setProperty("--drag-repeat-node-width", `${r.width}px`), e.style.setProperty("--drag-repeat-node-height", `${r.height}px`), e.style.setProperty("--drag-repeat-node-translate", `${r.left}px ${r.top}px`), e.style.setProperty("--drag-repeat-node-rotate", `${Math.random() * 9 - 4.5}deg`), e.style.setProperty("--drag-repeat-node-opacity", o < 3 ? "1" : "0");
+  }), p ??= i.nextElementSibling;
+  const t = {
+    destroying: !1,
+    elementPath: i.getAttribute(_constants.ATTRIBUTES.path),
+    elementType: (0, _helpers.getNodeType)(i),
+    element: i,
+    offset: l,
+    lastCursorPosition: l,
+    initialContainer: y,
+    initialNextSibling: p,
+    initialRect: i.getBoundingClientRect(),
+    reorderPermutations: [],
+    isTransitioning: !1,
+    repeatedNodes: s,
+    mode: "reorder"
+  };
+  return g && (t.copy = i.cloneNode(!0), t.copy.style.setProperty("opacity", "0.5"), t.copy.classList.remove(_.DRAG_REORDER_CLASSNAME), t.copy.classList.remove(_.DRAG_MOVE_CLASSNAME), t.initialContainer.insertBefore(t.copy, t.initialNextSibling)), t.initialContainer.childNodes.forEach(e => {
+    e instanceof Element && e.getAttribute(_constants.ATTRIBUTES.id) && e.getAttribute(_constants.ATTRIBUTES.path) === t.elementPath && s.every(r => r !== e) && (t?.initialContainer.insertBefore(i, e), t?.reorderPermutations.push({
+      nextSibling: e,
+      rect: i.getBoundingClientRect()
+    }));
+  }), t.initialContainer.hasAttribute(_constants.ATTRIBUTES.component) || (t.initialContainer.appendChild(i), t?.reorderPermutations.push({
+    nextSibling: null,
+    rect: i.getBoundingClientRect()
+  })), t.initialContainer.insertBefore(i, t.initialNextSibling), function e() {
+    if (t.destroying || !t.element.isConnected) return;
+    const r = t.element.getBoundingClientRect();
+    t.repeatedNodes.forEach(o => {
+      o.style.setProperty("rotate", "0deg");
+      const n = o.getBoundingClientRect();
+      o.style.removeProperty("rotate");
+      const m = r.left + r.width / 2 - n.width / 2,
+        f = r.top + r.height / 2 - n.height / 2,
+        d = .4,
+        h = n.left + (m - n.left) * d,
+        u = n.top + (f - n.top) * d;
+      o.style.setProperty("--drag-repeat-node-translate", `${h}px ${u}px`);
+    }), requestAnimationFrame(e);
+  }(), i.classList.add(_.DRAG_REORDER_CLASSNAME), (0, _highlight.setDropHighlight)(t.element, t.initialContainer, t.elementType === "component" ? "D946EF" : "2563EB"), t;
+}

package/dist/drag-drop/dragStart.mjs

@@ -0,0 +1,55 @@
+import { DRAG_REORDER_CLASSNAME as c, DRAG_MOVE_CLASSNAME as E } from ".//index.mjs";
+import { setDropHighlight as C } from "./highlight.mjs";
+import { getNodeType as R } from "./helpers.mjs";
+import { ATTRIBUTES as a } from "../constants.mjs";
+export function dragStarted({
+  element: i,
+  lastCursorPosition: l,
+  repeatedNodes: s,
+  asCopy: g,
+  initialContainer: y = i.parentElement,
+  initialNextSibling: p
+}) {
+  s.map((e) => [e, e.getBoundingClientRect()]).forEach(([e, r], o) => {
+    e.classList.add("drag-repeat-node"), e.style.setProperty("--drag-repeat-node-width", `${r.width}px`), e.style.setProperty("--drag-repeat-node-height", `${r.height}px`), e.style.setProperty("--drag-repeat-node-translate", `${r.left}px ${r.top}px`), e.style.setProperty("--drag-repeat-node-rotate", `${Math.random() * 9 - 4.5}deg`), e.style.setProperty("--drag-repeat-node-opacity", o < 3 ? "1" : "0");
+  }), p ??= i.nextElementSibling;
+  const t = {
+    destroying: !1,
+    elementPath: i.getAttribute(a.path),
+    elementType: R(i),
+    element: i,
+    offset: l,
+    lastCursorPosition: l,
+    initialContainer: y,
+    initialNextSibling: p,
+    initialRect: i.getBoundingClientRect(),
+    reorderPermutations: [],
+    isTransitioning: !1,
+    repeatedNodes: s,
+    mode: "reorder"
+  };
+  return g && (t.copy = i.cloneNode(!0), t.copy.style.setProperty("opacity", "0.5"), t.copy.classList.remove(c), t.copy.classList.remove(E), t.initialContainer.insertBefore(t.copy, t.initialNextSibling)), t.initialContainer.childNodes.forEach((e) => {
+    e instanceof Element && e.getAttribute(a.id) && e.getAttribute(a.path) === t.elementPath && s.every((r) => r !== e) && (t?.initialContainer.insertBefore(i, e), t?.reorderPermutations.push({
+      nextSibling: e,
+      rect: i.getBoundingClientRect()
+    }));
+  }), t.initialContainer.hasAttribute(a.component) || (t.initialContainer.appendChild(i), t?.reorderPermutations.push({
+    nextSibling: null,
+    rect: i.getBoundingClientRect()
+  })), t.initialContainer.insertBefore(i, t.initialNextSibling), (function e() {
+    if (t.destroying || !t.element.isConnected)
+      return;
+    const r = t.element.getBoundingClientRect();
+    t.repeatedNodes.forEach((o) => {
+      o.style.setProperty("rotate", "0deg");
+      const n = o.getBoundingClientRect();
+      o.style.removeProperty("rotate");
+      const m = r.left + r.width / 2 - n.width / 2, f = r.top + r.height / 2 - n.height / 2, d = 0.4, h = n.left + (m - n.left) * d, u = n.top + (f - n.top) * d;
+      o.style.setProperty("--drag-repeat-node-translate", `${h}px ${u}px`);
+    }), requestAnimationFrame(e);
+  })(), i.classList.add(c), C(
+    t.element,
+    t.initialContainer,
+    t.elementType === "component" ? "D946EF" : "2563EB"
+  ), t;
+}

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

@@ -0,0 +1,42 @@
+import type { Line, Point } from './types';
+export declare function isElementInViewport(element: HTMLElement, thresholdPx?: number): boolean;
+export declare function rectHasPoint(rect: DOMRect, { x, y }: Point): boolean;
+export declare function tryStartViewTransition(updateCallback: () => void, options?: {
+    skipPrefersReducedMotionCheck?: boolean;
+}): {
+    finished: Promise<void>;
+};
+export declare function getDOMNodeFromNodeId(path: string, id: string): Element | null;
+export declare function getNodeType(element: HTMLElement): "element" | "component" | "text";
+/**
+ * Somewhat convoluted function to calculate all possible drop insertion areas, as lines between elements.
+ *
+ * Drop locations follows the following rules:
+ * - All lines for a single container are either horizontal or vertical (block or inline layout)
+ * - If the next sibling of an element follows the expected layout (not wrapped) a line is drawn between the two (taking gap/margin into consideration),
+ * - If the next sibling is wrapped, a line is drawn both after and before the next element. Both lines inserts the dragged element at the same index.
+ */
+export declare function getInsertAreas(path: string): {
+    point: {
+        y: number;
+        x: number;
+    };
+    layout: "block" | "inline";
+    parent: Element;
+    index: number;
+    center: Point;
+    size: number;
+    direction: 1 | -1;
+}[];
+/**
+ * Finds the nearest line to a given point from an array of lines.
+ *
+ * @param lines - An array of line segments defined by their endpoints.
+ * @param point - The point to which the nearest line is to be found.
+ * @returns The line segment nearest to the given point.
+ */
+export declare function findNearestLine(lines: Line[], point: Point): {
+    nearestLine: Line | null;
+    dist: number;
+    projectionPoint: number;
+};