@nookuio/iframe 1.0.1-beta.0 → 1.0.1

package/dist/drag-drop/highlight.mjs

@@ -1,22 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,106 +0,0 @@
-"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

@@ -1,83 +0,0 @@
-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)
-  };
-}

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

@@ -1,123 +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;
-}
-export type DragState = {
-    /**
-     * Dragging elements within the initial container is a reorder operation while dragging elements outside the initial container is an insert operation.
-     * While they share some common properties, we need to differentiate between the two to handle them differently.
-     */
-    mode: 'reorder' | 'insert';
-    elementPath: string;
-    elementType: 'element' | 'component' | 'text';
-    copy?: HTMLElement;
-    element: HTMLElement;
-    repeatedNodes: HTMLElement[];
-    offset: Point;
-    lastCursorPosition: Point;
-    initialContainer: HTMLElement;
-    initialNextSibling: Element | null;
-    initialRect: DOMRect;
-    reorderPermutations: Array<{
-        nextSibling: Node | null;
-        rect: DOMRect;
-    }>;
-    isTransitioning: boolean;
-    selectedInsertAreaIndex?: number;
-    insertAreas?: Array<InsertArea>;
-    destroying: boolean;
-};
-export type InsertArea = {
-    layout: 'block' | 'inline';
-    parent: Element;
-    index: number;
-    center: Point;
-    size: number;
-    direction: 1 | -1;
-};
-export type Point = {
-    x: number;
-    y: number;
-};
-export type Line = {
-    x1: number;
-    y1: number;
-    x2: number;
-    y2: number;
-};

package/dist/drag-drop/types.js

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

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

@@ -1,101 +0,0 @@
-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 backup/dragDropManager.js

@@ -1,204 +0,0 @@
-"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: a,
-        path: i,
-        x: e,
-        y: t
-      } = r,
-      o = (0, _utils.getElement)(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 = (0, _utils.getParentContainer)(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
-    };
-  }
-  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 = (0, _utils.getParentContainer)(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);
-  }
-  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
-        } = (0, _utils.calculateInsertIndex)(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;
-  }
-  async getDropZones(r) {
-    const {
-      x: a,
-      y: i
-    } = r;
-    return (0, _utils.getDropZones)().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 && (0, _utils.canAcceptDrop)(t)
-      };
-    }).filter(t => t.canDrop);
-  }
-  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 = (0, _utils.getElement)(a, i);
-    t && t.classList.add("__nooku-drop-zone-highlight");
-  }
-  findDropZoneAtPosition(r, a, i) {
-    const e = (0, _utils.getElementAtPosition)(r, a, i);
-    if (!e) return;
-    let t = e;
-    for (; t;) {
-      if (t.hasAttribute("data-node-id") && (0, _utils.canAcceptDrop)(t)) return t;
-      t = t.parentElement;
-    }
-  }
-  showDropIndicator(r, a, i, e) {
-    this.dropIndicator || (this.dropIndicator = (0, _utils.createDropIndicator)()), this.dropIndicator.parentElement || document.body.appendChild(this.dropIndicator);
-    const {
-        index: t,
-        before: o,
-        layout: d
-      } = (0, _utils.calculateInsertIndex)(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();
-      (0, _utils.positionDropIndicator)(this.dropIndicator, s, d);
-    } else if (t < n.length) {
-      const c = n[t].getBoundingClientRect();
-      d === "block" ? (0, _utils.positionDropIndicator)(this.dropIndicator, {
-        ...c,
-        height: 2
-      }, d) : (0, _utils.positionDropIndicator)(this.dropIndicator, {
-        ...c,
-        width: 2
-      }, d);
-    } else {
-      const c = n[n.length - 1].getBoundingClientRect();
-      d === "block" ? (0, _utils.positionDropIndicator)(this.dropIndicator, {
-        ...c,
-        top: c.bottom,
-        height: 2
-      }, d) : (0, _utils.positionDropIndicator)(this.dropIndicator, {
-        ...c,
-        left: c.right,
-        width: 2
-      }, d);
-    }
-    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 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)
-  };
-}