@nookuio/iframe 1.0.1-beta.0 → 1.0.1

package/dist/drag-drop backup/dragDropManager.mjs

@@ -1,183 +0,0 @@
-import {
-  getElement as p,
-  getDropZones as f,
-  canAcceptDrop as h,
-  getElementAtPosition as b,
-  calculateInsertIndex as u,
-  createDropIndicator as m,
-  positionDropIndicator as g,
-  getParentContainer as D
-} from "./utils.mjs";
-export class DragDropManager {
-  activeDrags = /* @__PURE__ */ new Map();
-  dropIndicator = null;
-  onDragStartCallback;
-  onDragEndCallback;
-  constructor() {
-    this.dropIndicator = m();
-  }
-  /**
-   * Set event callbacks
-   */
-  setCallbacks(r) {
-    this.onDragStartCallback = r.onDragStart, this.onDragEndCallback = r.onDragEnd;
-  }
-  /**
-   * Start dragging an element
-   */
-  async startDrag(r) {
-    const { elementId: a, path: i, x: e, y: t } = r, o = p(a, i);
-    if (!o)
-      throw new Error(`Element not found: ${a} at ${i}`);
-    const d = `drag-${Date.now()}-${Math.random()}`, n = o.getBoundingClientRect(), s = o.cloneNode(!0);
-    s.classList.add("__nooku-drag-clone"), s.style.cssText = `
-      position: fixed;
-      left: ${n.left}px;
-      top: ${n.top}px;
-      width: ${n.width}px;
-      height: ${n.height}px;
-      pointer-events: none;
-      z-index: 10000;
-      opacity: 0.8;
-      transition: none;
-    `, document.body.appendChild(s), o.style.opacity = "0.3", o.classList.add("__nooku-dragging");
-    const c = D(o), I = {
-      dragId: d,
-      elementId: a,
-      path: i,
-      startX: e,
-      startY: t,
-      currentX: e,
-      currentY: t,
-      element: o,
-      clone: s,
-      initialRect: n,
-      currentDropZone: c || void 0,
-      mode: "reorder"
-    };
-    return this.activeDrags.set(d, I), this.onDragStartCallback?.({ elementId: a, path: i }), { dragId: d };
-  }
-  /**
-   * Update drag position
-   */
-  async updateDragPosition(r) {
-    const { dragId: a, x: i, y: e } = r, t = this.activeDrags.get(a);
-    if (!t)
-      throw new Error(`Drag not found: ${a}`);
-    const o = i - t.startX, d = e - t.startY;
-    t.currentX = i, t.currentY = e, t.clone.style.left = `${t.initialRect.left + o}px`, t.clone.style.top = `${t.initialRect.top + d}px`;
-    const n = this.findDropZoneAtPosition(i, e, t.path), s = D(t.element);
-    n === s ? t.mode = "reorder" : n && (t.mode = "move"), n !== t.currentDropZone ? (t.currentDropZone && t.currentDropZone.classList.remove("__nooku-drop-zone-active"), t.currentDropZone = n, n ? (n.classList.add("__nooku-drop-zone-active"), this.showDropIndicator(n, i, e, t)) : this.hideDropIndicator()) : n && this.showDropIndicator(n, i, e, t);
-  }
-  /**
-   * End drag operation
-   */
-  async endDrag(r) {
-    const { dragId: a, canceled: i = !1 } = r, e = this.activeDrags.get(a);
-    if (!e)
-      throw new Error(`Drag not found: ${a}`);
-    e.element.classList.remove("__nooku-dragging"), e.element.style.opacity = "", e.clone.remove(), e.currentDropZone && e.currentDropZone.classList.remove("__nooku-drop-zone-active"), this.hideDropIndicator();
-    let t;
-    if (i || !e.currentDropZone)
-      t = { dropped: !1 };
-    else {
-      const o = e.currentDropZone.getAttribute("data-node-id") || void 0, d = e.currentDropZone.getAttribute("data-node-path") || void 0, { index: n } = u(e.currentDropZone, e.currentX, e.currentY, e.element);
-      t = {
-        dropped: !0,
-        targetId: o,
-        targetPath: d,
-        insertIndex: n
-      };
-    }
-    return this.activeDrags.delete(a), this.onDragEndCallback?.(t), t;
-  }
-  /**
-   * Get drop zones at position
-   */
-  async getDropZones(r) {
-    const { x: a, y: i } = r;
-    return f().map((t) => {
-      const o = t.getBoundingClientRect(), d = t.getAttribute("data-node-id") || "", n = t.getAttribute("data-node-path") || "", s = a >= o.left && a <= o.right && i >= o.top && i <= o.bottom;
-      return {
-        elementId: d,
-        path: n,
-        rect: {
-          top: o.top,
-          left: o.left,
-          width: o.width,
-          height: o.height
-        },
-        canDrop: s && h(t)
-      };
-    }).filter((t) => t.canDrop);
-  }
-  /**
-   * Highlight drop zone
-   */
-  async highlightDropZone(r) {
-    const { elementId: a, path: i, clear: e = !1 } = r;
-    if (document.querySelectorAll(".__nooku-drop-zone-highlight").forEach((o) => {
-      o.classList.remove("__nooku-drop-zone-highlight");
-    }), e || !a || !i) {
-      this.hideDropIndicator();
-      return;
-    }
-    const t = p(a, i);
-    t && t.classList.add("__nooku-drop-zone-highlight");
-  }
-  /**
-   * Find drop zone at position
-   */
-  findDropZoneAtPosition(r, a, i) {
-    const e = b(r, a, i);
-    if (!e) return;
-    let t = e;
-    for (; t; ) {
-      if (t.hasAttribute("data-node-id") && h(t))
-        return t;
-      t = t.parentElement;
-    }
-  }
-  /**
-   * Show drop indicator
-   */
-  showDropIndicator(r, a, i, e) {
-    this.dropIndicator || (this.dropIndicator = m()), this.dropIndicator.parentElement || document.body.appendChild(this.dropIndicator);
-    const { index: t, before: o, layout: d } = u(r, a, i, e.element), n = Array.from(r.children).filter(
-      (s) => s.hasAttribute("data-node-id") && s !== e.element && !s.classList.contains("__nooku-drag-clone")
-    );
-    if (e.currentInsertIndex = t, n.length === 0) {
-      const s = r.getBoundingClientRect();
-      g(this.dropIndicator, s, d);
-    } else if (t < n.length) {
-      const c = n[t].getBoundingClientRect();
-      d === "block" ? g(this.dropIndicator, { ...c, height: 2 }, d) : g(this.dropIndicator, { ...c, width: 2 }, d);
-    } else {
-      const c = n[n.length - 1].getBoundingClientRect();
-      d === "block" ? g(this.dropIndicator, { ...c, top: c.bottom, height: 2 }, d) : g(this.dropIndicator, { ...c, left: c.right, width: 2 }, d);
-    }
-    this.dropIndicator.style.display = "block";
-  }
-  /**
-   * Hide drop indicator
-   */
-  hideDropIndicator() {
-    this.dropIndicator && (this.dropIndicator.style.display = "none");
-  }
-  /**
-   * Clean up
-   */
-  destroy() {
-    this.activeDrags.clear(), this.dropIndicator?.remove(), this.dropIndicator = null;
-  }
-}
-export function createDragDropContext() {
-  const l = new DragDropManager();
-  return {
-    startDrag: (r) => l.startDrag(r),
-    updateDragPosition: (r) => l.updateDragPosition(r),
-    endDrag: (r) => l.endDrag(r),
-    getDropZones: (r) => l.getDropZones(r),
-    highlightDropZone: (r) => l.highlightDropZone(r)
-  };
-}

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

@@ -1,3 +0,0 @@
-export * from './types';
-export * from './utils';
-export * from './dragDropManager';

package/dist/drag-drop backup/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _types = require("./types");
-Object.keys(_types).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _types[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _types[key];
-    }
-  });
-});
-var _utils = require("./utils");
-Object.keys(_utils).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _utils[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _utils[key];
-    }
-  });
-});
-var _dragDropManager = require("./dragDropManager");
-Object.keys(_dragDropManager).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _dragDropManager[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _dragDropManager[key];
-    }
-  });
-});

package/dist/drag-drop backup/index.mjs

@@ -1,3 +0,0 @@
-export * from "./types.mjs";
-export * from "./utils.mjs";
-export * from "./dragDropManager.mjs";

package/dist/drag-drop backup/types.d.ts

@@ -1,80 +0,0 @@
-export interface DragDropContext {
-    /**
-     * Start dragging an element
-     */
-    startDrag: (options: {
-        elementId: string;
-        path: string;
-        x: number;
-        y: number;
-    }) => Promise<{
-        dragId: string;
-    }>;
-    /**
-     * Update drag position
-     */
-    updateDragPosition: (options: {
-        dragId: string;
-        x: number;
-        y: number;
-    }) => Promise<void>;
-    /**
-     * End drag operation
-     */
-    endDrag: (options: {
-        dragId: string;
-        canceled?: boolean;
-    }) => Promise<{
-        dropped: boolean;
-        targetId?: string;
-        targetPath?: string;
-        insertIndex?: number;
-    }>;
-    /**
-     * Get drop zones at current position
-     */
-    getDropZones: (options: {
-        x: number;
-        y: number;
-    }) => Promise<Array<{
-        elementId: string;
-        path: string;
-        rect: {
-            top: number;
-            left: number;
-            width: number;
-            height: number;
-        };
-        canDrop: boolean;
-    }>>;
-    /**
-     * Highlight drop zone
-     */
-    highlightDropZone: (options: {
-        elementId?: string;
-        path?: string;
-        clear?: boolean;
-    }) => Promise<void>;
-}
-export interface DragDropEvents {
-    'drag-start': (data: {
-        elementId: string;
-        path: string;
-    }) => void;
-    'drag-move': (data: {
-        x: number;
-        y: number;
-    }) => void;
-    'drag-end': (data: {
-        dropped: boolean;
-        targetId?: string;
-    }) => void;
-    'drop-zone-enter': (data: {
-        elementId: string;
-        path: string;
-    }) => void;
-    'drop-zone-leave': (data: {
-        elementId: string;
-        path: string;
-    }) => void;
-}

package/dist/drag-drop backup/types.js

@@ -1 +0,0 @@
-"use strict";

package/dist/drag-drop backup/utils.d.ts

@@ -1,41 +0,0 @@
-/**
- * Get element by data attributes (Nooku uses data-node-id and data-node-path)
- */
-export declare function getElement(id: string, path: string): HTMLElement | null;
-/**
- * Get all potential drop zones (elements that can accept drops)
- */
-export declare function getDropZones(): HTMLElement[];
-/**
- * Check if element can accept drops
- */
-export declare function canAcceptDrop(element: HTMLElement): boolean;
-/**
- * Get element at position
- */
-export declare function getElementAtPosition(x: number, y: number, path: string): HTMLElement | null;
-/**
- * Calculate insert index based on cursor position
- */
-export declare function calculateInsertIndex(container: HTMLElement, x: number, y: number, draggedElement?: HTMLElement): {
-    index: number;
-    before: boolean;
-    layout: 'block' | 'inline';
-};
-/**
- * Create drop indicator element
- */
-export declare function createDropIndicator(color?: string): HTMLElement;
-/**
- * Position drop indicator
- */
-export declare function positionDropIndicator(indicator: HTMLElement, rect: {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}, layout?: 'block' | 'inline'): void;
-/**
- * Get parent container of an element
- */
-export declare function getParentContainer(element: HTMLElement): HTMLElement | null;

package/dist/drag-drop backup/utils.js

@@ -1,93 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.calculateInsertIndex = calculateInsertIndex;
-exports.canAcceptDrop = canAcceptDrop;
-exports.createDropIndicator = createDropIndicator;
-exports.getDropZones = getDropZones;
-exports.getElement = getElement;
-exports.getElementAtPosition = getElementAtPosition;
-exports.getParentContainer = getParentContainer;
-exports.positionDropIndicator = positionDropIndicator;
-function getElement(t, e) {
-  return document.querySelector(`[data-node-id="${t}"][data-node-path="${e}"]`);
-}
-function getDropZones() {
-  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
-}
-function canAcceptDrop(t) {
-  return t.getAttribute("data-node-type") !== "text";
-}
-function getElementAtPosition(t, e, i) {
-  let o = document.elementFromPoint(t, e);
-  if (!o) return null;
-  let r = o.getAttribute("data-node-path");
-  for (; o && r !== i;) {
-    if (o = o.parentElement, !o) return null;
-    r = o.getAttribute("data-node-path");
-  }
-  return o;
-}
-function calculateInsertIndex(t, e, i, o) {
-  const r = Array.from(t.children).filter(n => n.hasAttribute("data-node-id") && n !== o && !n.classList.contains("__nooku-drag-clone"));
-  if (r.length === 0) return {
-    index: 0,
-    before: !0,
-    layout: "block"
-  };
-  const s = r.every((n, d) => {
-      if (d === 0) return !0;
-      const l = r[d - 1].getBoundingClientRect(),
-        u = n.getBoundingClientRect();
-      return Math.abs(l.bottom - u.top) < 10;
-    }),
-    a = s ? "block" : "inline";
-  for (let n = 0; n < r.length; n++) {
-    const l = r[n].getBoundingClientRect();
-    if (s) {
-      const u = l.top + l.height / 2;
-      if (i < u) return {
-        index: n,
-        before: !0,
-        layout: a
-      };
-    } else {
-      const u = l.left + l.width / 2;
-      if (e < u) return {
-        index: n,
-        before: !0,
-        layout: a
-      };
-    }
-  }
-  return {
-    index: r.length,
-    before: !1,
-    layout: a
-  };
-}
-function createDropIndicator(t = "2563EB") {
-  const e = document.createElement("div");
-  return e.className = "__nooku-drop-indicator", e.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    z-index: 9999;
-    background: #${t};
-    border-radius: 2px;
-    transition: all 0.1s ease-out;
-    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
-  `, e;
-}
-function positionDropIndicator(t, e, i = "block") {
-  i === "block" ? (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = `${e.width}px`, t.style.height = "2px") : (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = "2px", t.style.height = `${e.height}px`);
-}
-function getParentContainer(t) {
-  let e = t.parentElement;
-  for (; e;) {
-    if (e.hasAttribute("data-node-id") && canAcceptDrop(e)) return e;
-    e = e.parentElement;
-  }
-  return null;
-}

package/dist/drag-drop backup/utils.mjs

@@ -1,68 +0,0 @@
-export function getElement(t, e) {
-  return document.querySelector(`[data-node-id="${t}"][data-node-path="${e}"]`);
-}
-export function getDropZones() {
-  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
-}
-export function canAcceptDrop(t) {
-  return t.getAttribute("data-node-type") !== "text";
-}
-export function getElementAtPosition(t, e, i) {
-  let o = document.elementFromPoint(t, e);
-  if (!o) return null;
-  let r = o.getAttribute("data-node-path");
-  for (; o && r !== i; ) {
-    if (o = o.parentElement, !o) return null;
-    r = o.getAttribute("data-node-path");
-  }
-  return o;
-}
-export function calculateInsertIndex(t, e, i, o) {
-  const r = Array.from(t.children).filter(
-    (n) => n.hasAttribute("data-node-id") && n !== o && !n.classList.contains("__nooku-drag-clone")
-  );
-  if (r.length === 0)
-    return { index: 0, before: !0, layout: "block" };
-  const s = r.every((n, d) => {
-    if (d === 0) return !0;
-    const l = r[d - 1].getBoundingClientRect(), u = n.getBoundingClientRect();
-    return Math.abs(l.bottom - u.top) < 10;
-  }), a = s ? "block" : "inline";
-  for (let n = 0; n < r.length; n++) {
-    const l = r[n].getBoundingClientRect();
-    if (s) {
-      const u = l.top + l.height / 2;
-      if (i < u)
-        return { index: n, before: !0, layout: a };
-    } else {
-      const u = l.left + l.width / 2;
-      if (e < u)
-        return { index: n, before: !0, layout: a };
-    }
-  }
-  return { index: r.length, before: !1, layout: a };
-}
-export function createDropIndicator(t = "2563EB") {
-  const e = document.createElement("div");
-  return e.className = "__nooku-drop-indicator", e.style.cssText = `
-    position: fixed;
-    pointer-events: none;
-    z-index: 9999;
-    background: #${t};
-    border-radius: 2px;
-    transition: all 0.1s ease-out;
-    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
-  `, e;
-}
-export function positionDropIndicator(t, e, i = "block") {
-  i === "block" ? (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = `${e.width}px`, t.style.height = "2px") : (t.style.left = `${e.left}px`, t.style.top = `${e.top}px`, t.style.width = "2px", t.style.height = `${e.height}px`);
-}
-export function getParentContainer(t) {
-  let e = t.parentElement;
-  for (; e; ) {
-    if (e.hasAttribute("data-node-id") && canAcceptDrop(e))
-      return e;
-    e = e.parentElement;
-  }
-  return null;
-}