@nookuio/iframe 0.9.8 → 1.0.0-beta.0

package/dist/constants.mjs

@@ -1 +1 @@
-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";

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

@@ -0,0 +1,101 @@
+import type { DragDropContext } from './types';
+/**
+ * Drag and drop manager for iframe
+ * Manages drag state and provides methods for RPC communication
+ */
+export declare class DragDropManager {
+    private activeDrags;
+    private dropIndicator;
+    private onDragStartCallback?;
+    private onDragEndCallback?;
+    constructor();
+    /**
+     * Set event callbacks
+     */
+    setCallbacks(callbacks: {
+        onDragStart?: (data: {
+            elementId: string;
+            path: string;
+        }) => void;
+        onDragEnd?: (data: {
+            dropped: boolean;
+            targetId?: string;
+        }) => void;
+    }): void;
+    /**
+     * 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 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>;
+    /**
+     * Find drop zone at position
+     */
+    private findDropZoneAtPosition;
+    /**
+     * Show drop indicator
+     */
+    private showDropIndicator;
+    /**
+     * Hide drop indicator
+     */
+    private hideDropIndicator;
+    /**
+     * Clean up
+     */
+    destroy(): void;
+}
+/**
+ * Create drag-drop context for iframe client
+ */
+export declare function createDragDropContext(): DragDropContext;

package/dist/drag-drop/dragDropManager.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragDropManager = void 0;
+exports.createDragDropContext = createDragDropContext;
+var _utils = require("./utils");
+class DragDropManager {
+  activeDrags = new Map();
+  dropIndicator = null;
+  onDragStartCallback;
+  onDragEndCallback;
+  constructor() {
+    this.dropIndicator = (0, _utils.createDropIndicator)();
+  }
+  setCallbacks(r) {
+    this.onDragStartCallback = r.onDragStart, this.onDragEndCallback = r.onDragEnd;
+  }
+  async startDrag(r) {
+    const {
+        elementId: o,
+        path: i,
+        x: n,
+        y: t
+      } = r,
+      e = (0, _utils.getElement)(o, i);
+    if (!e) throw new Error(`Element not found: ${o} at ${i}`);
+    const a = `drag-${Date.now()}-${Math.random()}`,
+      d = {
+        dragId: a,
+        elementId: o,
+        path: i,
+        startX: n,
+        startY: t,
+        currentX: n,
+        currentY: t,
+        element: e
+      };
+    return this.activeDrags.set(a, d), e.classList.add("__nooku-dragging"), e.style.opacity = "0.5", this.onDragStartCallback?.({
+      elementId: o,
+      path: i
+    }), {
+      dragId: a
+    };
+  }
+  async updateDragPosition(r) {
+    const {
+        dragId: o,
+        x: i,
+        y: n
+      } = r,
+      t = this.activeDrags.get(o);
+    if (!t) throw new Error(`Drag not found: ${o}`);
+    t.currentX = i, t.currentY = n;
+    const e = this.findDropZoneAtPosition(i, n, t.path);
+    e !== t.currentDropZone ? (t.currentDropZone && t.currentDropZone.classList.remove("__nooku-drop-zone-active"), t.currentDropZone = e, e ? (e.classList.add("__nooku-drop-zone-active"), this.showDropIndicator(e, i, n)) : this.hideDropIndicator()) : e && this.showDropIndicator(e, i, n);
+  }
+  async endDrag(r) {
+    const {
+        dragId: o,
+        canceled: i = !1
+      } = r,
+      n = this.activeDrags.get(o);
+    if (!n) throw new Error(`Drag not found: ${o}`);
+    n.element.classList.remove("__nooku-dragging"), n.element.style.opacity = "", n.currentDropZone && n.currentDropZone.classList.remove("__nooku-drop-zone-active"), this.hideDropIndicator();
+    let t;
+    if (i || !n.currentDropZone) t = {
+      dropped: !1
+    };else {
+      const e = n.currentDropZone.getAttribute("data-node-id") || void 0,
+        a = n.currentDropZone.getAttribute("data-node-path") || void 0,
+        {
+          index: d
+        } = (0, _utils.calculateInsertIndex)(n.currentDropZone, n.currentX, n.currentY);
+      t = {
+        dropped: !0,
+        targetId: e,
+        targetPath: a,
+        insertIndex: d
+      };
+    }
+    return this.activeDrags.delete(o), this.onDragEndCallback?.(t), t;
+  }
+  async getDropZones(r) {
+    const {
+      x: o,
+      y: i
+    } = r;
+    return (0, _utils.getDropZones)().map(t => {
+      const e = t.getBoundingClientRect(),
+        a = t.getAttribute("data-node-id") || "",
+        d = t.getAttribute("data-node-path") || "",
+        u = o >= e.left && o <= e.right && i >= e.top && i <= e.bottom;
+      return {
+        elementId: a,
+        path: d,
+        rect: {
+          top: e.top,
+          left: e.left,
+          width: e.width,
+          height: e.height
+        },
+        canDrop: u && (0, _utils.canAcceptDrop)(t)
+      };
+    }).filter(t => t.canDrop);
+  }
+  async highlightDropZone(r) {
+    const {
+      elementId: o,
+      path: i,
+      clear: n = !1
+    } = r;
+    if (document.querySelectorAll(".__nooku-drop-zone-highlight").forEach(e => {
+      e.classList.remove("__nooku-drop-zone-highlight");
+    }), n || !o || !i) {
+      this.hideDropIndicator();
+      return;
+    }
+    const t = (0, _utils.getElement)(o, i);
+    t && t.classList.add("__nooku-drop-zone-highlight");
+  }
+  findDropZoneAtPosition(r, o, i) {
+    const n = (0, _utils.getElementAtPosition)(r, o, i);
+    if (!n) return;
+    let t = n;
+    for (; t;) {
+      if (t.hasAttribute("data-node-id") && (0, _utils.canAcceptDrop)(t)) return t;
+      t = t.parentElement;
+    }
+  }
+  showDropIndicator(r, o, i) {
+    this.dropIndicator || (this.dropIndicator = (0, _utils.createDropIndicator)()), this.dropIndicator.parentElement || document.body.appendChild(this.dropIndicator);
+    const {
+        index: n,
+        before: t
+      } = (0, _utils.calculateInsertIndex)(r, o, i),
+      e = Array.from(r.children).filter(a => a.hasAttribute("data-node-id"));
+    if (e.length === 0) {
+      const a = r.getBoundingClientRect();
+      (0, _utils.positionDropIndicator)(this.dropIndicator, a, "block");
+    } else if (n < e.length) {
+      const d = e[n].getBoundingClientRect();
+      (0, _utils.positionDropIndicator)(this.dropIndicator, {
+        ...d,
+        height: 3
+      }, "block");
+    } else {
+      const d = e[e.length - 1].getBoundingClientRect();
+      (0, _utils.positionDropIndicator)(this.dropIndicator, {
+        ...d,
+        top: d.bottom,
+        height: 3
+      }, "block");
+    }
+    this.dropIndicator.style.display = "block";
+  }
+  hideDropIndicator() {
+    this.dropIndicator && (this.dropIndicator.style.display = "none");
+  }
+  destroy() {
+    this.activeDrags.clear(), this.dropIndicator?.remove(), this.dropIndicator = null;
+  }
+}
+exports.DragDropManager = DragDropManager;
+function createDragDropContext() {
+  const s = new DragDropManager();
+  return {
+    startDrag: r => s.startDrag(r),
+    updateDragPosition: r => s.updateDragPosition(r),
+    endDrag: r => s.endDrag(r),
+    getDropZones: r => s.getDropZones(r),
+    highlightDropZone: r => s.highlightDropZone(r)
+  };
+}

package/dist/drag-drop/dragDropManager.mjs

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

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

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

package/dist/drag-drop/index.js

@@ -0,0 +1,38 @@
+"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/index.mjs

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

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

@@ -0,0 +1,80 @@
+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/types.js

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

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

@@ -0,0 +1,36 @@
+/**
+ * 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): {
+    index: number;
+    before: boolean;
+};
+/**
+ * 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;

package/dist/drag-drop/utils.js

@@ -0,0 +1,79 @@
+"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.positionDropIndicator = positionDropIndicator;
+function getElement(e, t) {
+  return document.querySelector(`[data-node-id="${e}"][data-node-path="${t}"]`);
+}
+function getDropZones() {
+  return Array.from(document.querySelectorAll('[data-node-id]:not([data-node-id=""])'));
+}
+function canAcceptDrop(e) {
+  return e.getAttribute("data-node-type") !== "text";
+}
+function getElementAtPosition(e, t, l) {
+  let n = document.elementFromPoint(e, t);
+  if (!n) return null;
+  let u = n.getAttribute("data-node-path");
+  for (; n && u !== l;) {
+    if (n = n.parentElement, !n) return null;
+    u = n.getAttribute("data-node-path");
+  }
+  return n;
+}
+function calculateInsertIndex(e, t, l) {
+  const n = Array.from(e.children).filter(o => o.hasAttribute("data-node-id"));
+  if (n.length === 0) return {
+    index: 0,
+    before: !0
+  };
+  const u = e.getBoundingClientRect(),
+    c = n.every((o, d) => {
+      if (d === 0) return !0;
+      const r = n[d - 1].getBoundingClientRect(),
+        i = o.getBoundingClientRect();
+      return r.bottom <= i.top;
+    });
+  for (let o = 0; o < n.length; o++) {
+    const r = n[o].getBoundingClientRect();
+    if (c) {
+      const i = r.top + r.height / 2;
+      if (l < i) return {
+        index: o,
+        before: !0
+      };
+    } else {
+      const i = r.left + r.width / 2;
+      if (t < i) return {
+        index: o,
+        before: !0
+      };
+    }
+  }
+  return {
+    index: n.length,
+    before: !1
+  };
+}
+function createDropIndicator(e = "2563EB") {
+  const t = document.createElement("div");
+  return t.className = "__nooku-drop-indicator", t.style.cssText = `
+    position: fixed;
+    pointer-events: none;
+    z-index: 9999;
+    background: #${e};
+    opacity: 0.5;
+    transition: all 0.15s ease;
+  `, t;
+}
+function positionDropIndicator(e, t, l = "block") {
+  l === "block" ? (e.style.left = `${t.left}px`, e.style.top = `${t.top}px`, e.style.width = `${t.width}px`, e.style.height = "3px") : (e.style.left = `${t.left}px`, e.style.top = `${t.top}px`, e.style.width = "3px", e.style.height = `${t.height}px`);
+}