grapesjs-click/dist/plugin.js

GrapesJS click plugin (no more drag-and-drop)

const S = "grapesjs-click", c = "[GrapesJS::ClickPlugin]", u = "click", E = `${u}:grab-block`, b = `${u}:drop-block`, B = `${u}:grab-component`, f = `${u}:drop-component`;
function y(o, n) {
  try {
    const t = o.Canvas.getBody();
    if (!t)
      throw new Error('"bodyElement" is empty');
    t.style.cursor = n;
  } catch (e) {
    const { message: t } = e;
    console.warn(`${c} changeBodyCursor - ${t}`);
  }
}
function D(o, n) {
  var e;
  try {
    const r = o.Components.getWrapper();
    if (!r)
      throw new Error('"wrapperComponent" is empty');
    const s = (e = r.find(`#${n}`)) == null ? void 0 : e[0];
    if (!s)
      throw new Error('"component" is empty');
    return s;
  } catch (t) {
    const { message: r } = t;
    console.warn(`${c} getComponentById - ${r}`);
  }
}
function v(o) {
  try {
    const { droppable: n } = o.props();
    if (n !== !1)
      return o;
    const e = o.parent();
    return e ? v(e) : void 0;
  } catch (n) {
    const { message: e } = n;
    console.warn(`${c} getDroppableComponent - ${e}`);
  }
}
function M(o, n, e = 500) {
  const t = window.setTimeout(() => {
    o.select(n), window.clearTimeout(t);
  }, e);
}
const C = `${S}-block`;
function N() {
  return window.sessionStorage.getItem(C);
}
function k(o, n) {
  window.sessionStorage.removeItem(C), o.trigger("block:drag:stop", n), y(o, "auto");
}
function P(o, n, e) {
  try {
    const { isDebugging: t, id: r } = e;
    if (t && console.log(`${c} onGrabBlock`, {
      editor: o,
      sender: n,
      options: e
    }), !r)
      throw new Error('"blockId" is required');
    const i = o.Blocks.get(r);
    if (!i)
      throw new Error('"block" is empty');
    const { disable: a } = i.attributes;
    if (a)
      throw new Error('"block" is disable');
    window.sessionStorage.setItem(C, r), o.trigger(E, i), y(o, "grabbing");
    const p = o.getSelected();
    if (!p)
      return;
    o.selectRemove(p);
  } catch (t) {
    const { message: r } = t;
    console.warn(`${c} onGrabBlock - ${r}`), k(o);
  }
}
function q(o, n, e) {
  var t;
  try {
    const { isDebugging: r, id: s } = e;
    r && console.log(`${c} onDropBlock`, {
      editor: o,
      sender: n,
      options: e
    });
    const a = window.sessionStorage.getItem(C) || s;
    if (!a)
      throw new Error('"blockId" is required');
    const l = o.Blocks.get(a);
    if (!l)
      throw new Error('"block" is empty');
    const d = o.getSelected() || o.getWrapper();
    if (!d)
      throw new Error('"selectedComponent" is empty');
    const w = v(d);
    if (!w)
      throw new Error('"droppableComponent" is empty');
    const m = l.getContent();
    if (!m)
      throw new Error('"component" is empty');
    const g = (t = w.append(m)) == null ? void 0 : t[0];
    g && M(o, g), o.trigger(b, l, g), k(o, l);
  } catch (r) {
    const { message: s } = r;
    console.warn(`${c} onDropBlock - ${s}`), k(o);
  }
}
const h = `${S}-component`;
function H() {
  return window.sessionStorage.getItem(h);
}
function I(o, n) {
  window.sessionStorage.removeItem(h), o.trigger("component:drag:stop", n), y(o, "auto");
}
function T(o, n, e) {
  try {
    const { isDebugging: t, id: r } = e;
    t && console.log(`${c} onGrabComponent`, {
      editor: o,
      sender: n,
      options: e
    });
    const s = o.getSelected(), i = r || (s == null ? void 0 : s.getId());
    if (!i)
      throw new Error('"componentId" is required');
    const a = D(o, i);
    if (!a)
      throw new Error('"component" is empty');
    const { draggable: p } = a.props();
    if (p === !1)
      throw new Error('"component" is not draggable');
    window.sessionStorage.setItem(h, i), o.trigger(B, a), y(o, "grabbing");
  } catch (t) {
    const { message: r } = t;
    console.warn(`${c} onGrabComponent - ${r}`), I(o);
  }
}
function W(o, n, e) {
  var t;
  try {
    const { isDebugging: r, id: s } = e;
    r && console.log(`${c} onDropComponent`, {
      editor: o,
      sender: n,
      options: e
    });
    const a = window.sessionStorage.getItem(h) || s;
    if (!a)
      throw new Error('"componentId" is required');
    const p = D(o, a);
    if (!p)
      throw new Error('"component" is empty');
    const { draggable: l, copyable: d, removable: w } = p.props();
    if (l === !1 || d === !1 || w === !1)
      throw new Error('"component" is not draggable, copyable or removable');
    const m = o.getSelected() || o.getWrapper();
    if (!m)
      throw new Error('"selectedComponent" is empty');
    const g = v(m);
    if (!g)
      throw new Error('"droppableComponent" is empty');
    const x = p.clone(), $ = (t = g.append(x)) == null ? void 0 : t[0];
    $ && (p.remove(), M(o, $)), o.trigger(f, $), I(o, p);
  } catch (r) {
    const { message: s } = r;
    console.warn(`${c} onDropComponent - ${s}`), I(o);
  }
}
function G(o) {
  return (o == null ? void 0 : o.isConnected) === !0;
}
const z = 24;
function A(o, n) {
  return n.isTrusted ? {
    x: n.clientX,
    y: n.clientY
  } : o.Canvas.getMouseRelativeCanvas(n, {});
}
function L(o, n, e = z) {
  return (t) => {
    try {
      if (!o)
        throw new Error("No editor");
      if (!n || !G(n))
        throw new Error("No element");
      const r = A(o, t), s = n.clientHeight / 1.3, i = r.x + e, a = r.y + s;
      n.style.top = `${a}px`, n.style.left = `${i}px`;
    } catch (r) {
      const { message: s } = r;
      console.warn(`${c} onMouseMove - ${s}`);
    }
  };
}
function R(o, n) {
  try {
    if (!o || !G(o))
      throw new Error("No element");
    const e = window.getComputedStyle(o);
    e.display === "none" && (o.style.display = "block"), e.position !== "fixed" && (o.style.position = "fixed"), ["0", "auto"].includes(e.zIndex) && (o.style.zIndex = "99999");
  } catch (e) {
    const { message: t } = e;
    console.warn(`${c} showGrabbedInfo - ${t}`);
  } finally {
    if (!n)
      return;
    window.addEventListener("mousemove", n);
  }
}
function j(o, n) {
  try {
    if (!o || !G(o))
      throw new Error("No element");
    o.style.display !== "none" && (o.style.display = "none");
  } catch (e) {
    const { message: t } = e;
    console.warn(`${c} hideGrabbedInfo - ${t}`);
  } finally {
    if (!n)
      return;
    window.removeEventListener("mousemove", n);
  }
}
function J(o, n) {
  const e = L(o, n), t = () => R(n, e), r = () => j(n, e);
  o.on(`run:${E}`, t), o.on(`run:${b}`, r), o.on(`run:${B}`, t), o.on(`run:${f}`, r);
}
const X = (o, n = {}) => {
  const { hasAutoDropped: e = !0 } = n, t = o.Commands;
  t.add(E, P), t.add(b, q), t.add(B, T), t.add(f, W), e && o.on("component:selected", () => {
    if (N()) {
      t.run(b);
      return;
    }
    H() && t.run(f);
  });
};
export {
  y as changeBodyCursor,
  X as default,
  L as getMouseListener,
  A as getMousePosition,
  j as hideGrabbedInfo,
  J as initGrabbedInfo,
  R as showGrabbedInfo
};