epic-designer-gold 0.0.1 → 0.0.2

package/dist/index-C78D4bvx.js

@@ -0,0 +1,682 @@
+import { defineComponent as K, inject as L, ref as C, computed as j, watch as Y, openBlock as M, createElementBlock as W, Fragment as X, withDirectives as de, createElementVNode as w, normalizeClass as q, toDisplayString as _e, unref as h, createVNode as z, createCommentVNode as se, vShow as ue, createBlock as te, mergeProps as Se, withCtx as oe, useAttrs as we, provide as Ce, onUnmounted as ke, resolveComponent as Ne, createSlots as $e, renderList as ve, shallowRef as Re, watchEffect as Te, nextTick as pe, normalizeStyle as le, renderSlot as Be, onMounted as Oe } from "vue";
+import { p as U } from "./pluginManager-D8PM7ICc.js";
+import { u as fe, a as Me, f as me, g as Le, b as ae, _ as De, d as ce, c as He, e as Ve, h as We, i as ze, w as Ae, j as Pe } from "./index-Bo1Sw1k6.js";
+import { _ as ie } from "./icon.vue_vue_type_script_setup_true_lang-D3QdcReY.js";
+import { d as Ee } from "./vuedraggable.umd-D2S7Eo7p.js";
+const Fe = { class: "epic-widget-action-item whitespace-nowrap" }, Ie = {
+  key: 0,
+  class: "flex items-center"
+}, je = /* @__PURE__ */ K({
+  __name: "previewWidgets",
+  setup(J, { expose: D }) {
+    const u = L("pageManager", {}), _ = L("pageSchema"), a = L("designer"), g = L("designerProps"), r = L("revoke"), v = C(null), k = C(null), x = C(null), H = C(!1), n = C(!1), l = C(!0), i = C("top"), { canvasScale: s, disabledZoom: S } = fe();
+    let t = null;
+    const E = j(() => {
+      const e = a.state.checkedNode;
+      return !(!(e != null && e.id) || g.value.lockDefaultSchemaEdit && u.defaultComponentIds.value.includes(e == null ? void 0 : e.id));
+    }), V = j(() => {
+      var R, T, O, f, A, I;
+      const e = u.componentInstances.value, d = (R = a.state.checkedNode) == null ? void 0 : R.id;
+      if ((O = (T = a.state.checkedNode) == null ? void 0 : T.componentProps) != null && O.hidden)
+        return null;
+      const b = U.getComponentConfingByType((f = a.state.checkedNode) == null ? void 0 : f.type) ?? null;
+      if (!d || !(e != null && e[d]))
+        return null;
+      if (b != null && b.defaultSchema.input && ((A = a.state.checkedNode) == null ? void 0 : A.noFormItem) !== !0)
+        return (I = e[d + "formItem"]) == null ? void 0 : I.$el;
+      const o = e[d];
+      return !(o != null && o.$el) || (o == null ? void 0 : o.$el.nodeName) === "#text" || !(o != null && o.$el.getBoundingClientRect) ? null : o == null ? void 0 : o.$el;
+    }), B = j(() => {
+      var R, T, O, f;
+      const e = u.componentInstances.value, d = (R = a.state.hoverNode) == null ? void 0 : R.id, b = U.getComponentConfingByType((T = a.state.hoverNode) == null ? void 0 : T.type) ?? null;
+      if (!d || !(e != null && e[d]))
+        return null;
+      if (b != null && b.defaultSchema.input && ((O = a.state.hoverNode) == null ? void 0 : O.noFormItem) !== !0)
+        return (f = e[d + "formItem"]) == null ? void 0 : f.$el;
+      const o = e[d];
+      return (o == null ? void 0 : o.$el.nodeName) === "#text" ? null : o == null ? void 0 : o.$el;
+    }), { mutationObserver: G, observerConfig: ee } = he(P), { startTimedQuery: c, stopTimedQuery: y } = Me(P);
+    Y(() => V.value, (e) => {
+      if (e) {
+        H.value = !0, G.observe(e, ee);
+        const d = e.parentNode;
+        d && (d.ondragstart = () => {
+          l.value = !1, c();
+        }, d.ondragend = () => {
+          l.value = !0, y();
+        }), P();
+      } else
+        H.value = !1;
+    });
+    const { mutationObserver: p, observerConfig: N } = he(re);
+    Y(() => B.value, (e) => {
+      e && (p.observe(e, N), re());
+    });
+    let m = 0;
+    Y(() => {
+      var e;
+      return (e = a.state.hoverNode) == null ? void 0 : e.id;
+    }, (e) => {
+      if (e) {
+        n.value = !0, clearTimeout(m);
+        return;
+      }
+      m = setTimeout(() => {
+        n.value = !1;
+      }, 300);
+    });
+    let $ = 0, F = 0;
+    function P() {
+      const e = V.value;
+      if (!e || !t) return;
+      const { top: d, left: b } = t == null ? void 0 : t.getBoundingClientRect(), { top: o, left: R, width: T, height: O } = e.getBoundingClientRect(), f = S.value ? 1 : s.value, A = o - d + ((t == null ? void 0 : t.scrollTop) ?? 0) * f, I = R - b + ((t == null ? void 0 : t.scrollLeft) ?? 0) * f, Q = O / f;
+      v.value && (v.value.style.width = `${T / f}px`, v.value.style.height = `${Q}px`, v.value.style.top = `${A / f}px`, v.value.style.left = `${I / f}px`, Z(A, I)), x.value && (A < 45 && Q < 100 ? (x.value.style.top = "", x.value.style.bottom = "-30px", x.value.style["border-radius"] = "0px 0px 4px 4px", i.value = "bottom") : A < 45 ? (x.value.style.top = "0px", x.value.style["border-radius"] = "0px 0px 4px 0", i.value = "center") : (x.value.style.top = "-30px", x.value.style["border-radius"] = "4px 4px 0px 0px", i.value = "top"));
+    }
+    function Z(e, d) {
+      const b = V.value;
+      if (!t || !b) return;
+      const o = t.getBoundingClientRect(), { width: R } = b.getBoundingClientRect(), T = S.value ? 1 : s.value, O = e / T - o.top;
+      let f = d / T - o.left + R / T;
+      f < o.width && (f = 0);
+      const A = t.scrollTop - o.height / 3 + 60, I = t.scrollTop + o.height / 3 * 2, Q = t.scrollLeft - o.width + 200, ne = t.scrollLeft + o.width - 200;
+      Math.abs(O - $) < 10 && Math.abs(f - F) < 10 || ($ = O, F = f, !(O > A && O < I && f > Q && f < ne) && (t.scrollTop = O, t.scrollLeft = f));
+    }
+    function re() {
+      var Q, ne;
+      const e = B.value;
+      if (!e) return;
+      const { top: d, left: b } = (t == null ? void 0 : t.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: o, left: R, width: T, height: O } = ((Q = e.getBoundingClientRect) == null ? void 0 : Q.call(e)) ?? ((ne = e.nextElementSibling) == null ? void 0 : ne.getBoundingClientRect()), f = S.value ? 1 : s.value, A = o - d + ((t == null ? void 0 : t.scrollTop) ?? 0) * f, I = R - b + ((t == null ? void 0 : t.scrollLeft) ?? 0) * f;
+      k.value && (k.value.style.width = `${T / f}px`, k.value.style.height = `${O / f}px`, k.value.style.top = `${A / f}px`, k.value.style.left = `${I / f}px`);
+    }
+    function he(e) {
+      const d = window.MutationObserver, b = {
+        childList: !0,
+        attributes: !0,
+        subtree: !0
+      };
+      return {
+        mutationObserver: new d(e),
+        observerConfig: b
+      };
+    }
+    function xe() {
+      var T;
+      const e = me(_.schemas, ((T = a.state.checkedNode) == null ? void 0 : T.id) ?? "root");
+      if (!e)
+        return !1;
+      const { list: d, schema: b, index: o } = e, R = Le(b);
+      d.splice(o + 1, 0, R), a.setCheckedNode(R), r.push(_.schemas, "复制组件");
+    }
+    function ye() {
+      var R;
+      const e = me(_.schemas, ((R = a.state.checkedNode) == null ? void 0 : R.id) ?? "root");
+      if (!e)
+        return !1;
+      let { list: d, schema: b, index: o } = e;
+      d.splice(o, 1), o === d.length && o--, a.setCheckedNode(d[o]), r.push(_.schemas, "删除组件");
+    }
+    function be(e) {
+      t = e, t == null || t.addEventListener("scroll", () => {
+        P();
+      }), ae(V, P), ae(B, re);
+    }
+    return D({
+      handleInit: be
+    }), (e, d) => {
+      var b, o, R, T, O;
+      return M(), W(X, null, [
+        de(w("div", {
+          ref_key: "selectorRef",
+          ref: v,
+          class: q(["epic-checked-widget absolute pointer-events-none z-20", i.value + " " + (l.value ? "transition-all" : "")])
+        }, [
+          w("div", {
+            class: "epic-widget-action-box",
+            ref_key: "actionBoxRef",
+            ref: x
+          }, [
+            w("div", Fe, _e((o = h(U).getComponentConfingByType(((b = h(a).state.checkedNode) == null ? void 0 : b.type) ?? "")) == null ? void 0 : o.defaultSchema.label), 1),
+            E.value ? (M(), W("div", Ie, [
+              w("div", {
+                title: "复制",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: xe
+              }, [
+                z(h(ie), { name: "icon--epic--copy-all-outline-rounded" })
+              ]),
+              w("div", {
+                title: "删除",
+                class: "epic-widget-action-item pointer-events-auto",
+                onClick: ye
+              }, [
+                z(h(ie), { name: "icon--epic--delete-outline-rounded" })
+              ])
+            ])) : se("", !0)
+          ], 512)
+        ], 2), [
+          [ue, H.value && ((R = h(a).state.checkedNode) == null ? void 0 : R.id) !== "root"]
+        ]),
+        de(w("div", {
+          ref_key: "hoverWidgetRef",
+          ref: k,
+          class: "epic-hover-widget absolute transition-all pointer-events-none z-998"
+        }, null, 512), [
+          [ue, n.value && ((T = h(a).state.checkedNode) == null ? void 0 : T.id) !== ((O = h(a).state.hoverNode) == null ? void 0 : O.id)]
+        ])
+      ], 64);
+    };
+  }
+}), Ue = /* @__PURE__ */ K({
+  name: "EditNodeItem",
+  __name: "editNodeItem",
+  props: {
+    schemas: {}
+  },
+  emits: ["update:schemas"],
+  setup(J, { emit: D }) {
+    const u = L("designer"), _ = L("pageSchema"), a = L("revoke"), g = J, r = D, v = j({
+      get() {
+        return g.schemas;
+      },
+      set(l) {
+        r("update:schemas", l);
+      }
+    });
+    function k(l) {
+      u.setCheckedNode(v.value[l]), u.setDisableHover(!0);
+    }
+    function x() {
+      u.setDisableHover(), a.push(_.schemas, "拖拽组件");
+    }
+    function H() {
+      a.push(_.schemas, "插入组件");
+    }
+    function n(l) {
+      var i, s, S;
+      return l.id === ((i = _.schemas[0]) == null ? void 0 : i.id) || (S = (s = U.getComponentConfingByType(l.type)) == null ? void 0 : s.editConstraints) != null && S.immovable ? "unmover-item" : "draggable-item";
+    }
+    return (l, i) => (M(), te(h(Ee), Se({
+      modelValue: v.value,
+      "onUpdate:modelValue": i[0] || (i[0] = (s) => v.value = s),
+      "item-key": "id",
+      "component-data": {
+        type: "transition-group"
+      },
+      class: "epic-draggable-range"
+    }, {
+      animation: 200,
+      group: "edit-draggable",
+      handle: ".draggable-item",
+      ghostClass: "moveing"
+    }, {
+      onStart: i[1] || (i[1] = (s) => k(s.oldIndex)),
+      onEnd: i[2] || (i[2] = (s) => x()),
+      onAdd: i[3] || (i[3] = (s) => {
+        k(s.newIndex), H();
+      })
+    }), {
+      item: oe(({ element: s, index: S }) => [
+        (M(), W("div", {
+          class: q(["widget-box", n(s)]),
+          key: S
+        }, [
+          z(ge, { schema: s }, null, 8, ["schema"])
+        ], 2))
+      ]),
+      _: 1
+    }, 16, ["modelValue"]));
+  }
+}), ge = /* @__PURE__ */ K({
+  name: "ENodeItem",
+  __name: "nodeItem",
+  props: {
+    schema: {},
+    name: {}
+  },
+  setup(J) {
+    const D = we(), u = L("designer"), _ = L("pageManager", {}), a = L("pageSchema", {}), g = C(null);
+    Ce("nodeAttrs", D);
+    const r = J, v = j(() => {
+      var S, t, E, V, B;
+      const n = _.componentInstances.value, l = (S = r.schema) == null ? void 0 : S.id, i = U.getComponentConfingByType((t = r.schema) == null ? void 0 : t.type) ?? null;
+      if (!l || !(n != null && n[l]))
+        return null;
+      if (i != null && i.defaultSchema.input && ((E = r.schema) == null ? void 0 : E.noFormItem) !== !0)
+        return (V = n[l + "formItem"]) == null ? void 0 : V.$el;
+      const s = n[l];
+      return ((B = s == null ? void 0 : s.$el) == null ? void 0 : B.nodeName) === "#text" ? null : s == null ? void 0 : s.$el;
+    });
+    Y(() => v.value, (n) => {
+      n == null || n.addEventListener("click", k, !1), n == null || n.addEventListener("mouseover", x, !1), n == null || n.addEventListener("mouseout", H, !1);
+    }), ke(() => {
+      var n, l, i;
+      (n = v.value) == null || n.removeEventListener("click", k, !1), (l = v.value) == null || l.removeEventListener("mouseover", x, !1), (i = v.value) == null || i.removeEventListener("mouseout", H, !1);
+    });
+    function k(n) {
+      n.stopPropagation(), u.setCheckedNode(r.schema);
+    }
+    function x(n) {
+      var l;
+      r.schema.id !== ((l = a.schemas[0]) == null ? void 0 : l.id) && (n.stopPropagation(), u.setHoverNode(r.schema));
+    }
+    function H(n) {
+      n.stopPropagation(), u.setHoverNode(null);
+    }
+    return (n, l) => {
+      var s, S;
+      const i = Ne("ENodeItem");
+      return M(), te(h(De), {
+        ref_key: "nodeRef",
+        ref: g,
+        componentSchema: r.schema
+      }, $e({ _: 2 }, [
+        (S = (s = h(U).getComponentConfingByType(r.schema.type)) == null ? void 0 : s.editConstraints) != null && S.childImmovable ? {
+          name: "edit-node",
+          fn: oe(() => [
+            (M(!0), W(X, null, ve(r.schema.children, (t) => (M(), te(i, {
+              key: t.id,
+              schema: t
+            }, null, 8, ["schema"]))), 128))
+          ]),
+          key: "0"
+        } : {
+          name: "edit-node",
+          fn: oe(() => [
+            r.schema.children ? (M(), te(Ue, {
+              key: 0,
+              schemas: r.schema.children,
+              "onUpdate:schemas": l[0] || (l[0] = (t) => r.schema.children = t)
+            }, null, 8, ["schemas"])) : se("", !0)
+          ]),
+          key: "1"
+        }
+      ]), 1032, ["componentSchema"]);
+    };
+  }
+}), Je = { class: "min-w-750px rounded h-full" }, Ze = /* @__PURE__ */ K({
+  __name: "previewJson",
+  setup(J, { expose: D }) {
+    const u = U.getComponent("modal"), _ = U.getComponent("monacoEditor"), a = {
+      theme: "vs-light",
+      selectOnLineNumbers: !0,
+      minimap: {
+        enabled: !1
+      },
+      readOnly: !0
+    }, g = C(null), r = C(!1), v = L("pageSchema");
+    function k() {
+      r.value = !1;
+    }
+    function x() {
+      r.value = !0, g.value ? g.value.setValue(JSON.stringify(v, null, 2)) : setTimeout(() => {
+        x();
+      }, 300);
+    }
+    function H(n = "epic-data.json") {
+      const l = JSON.stringify(v, null, 2);
+      var i = `data:text/json;charset=utf-8,${encodeURIComponent(l)}`, s = document.createElement("a");
+      s.setAttribute("href", i), s.setAttribute("download", n), s.click();
+    }
+    return D({
+      handleOpen: x
+    }), (n, l) => (M(), te(h(u), {
+      modelValue: r.value,
+      "onUpdate:modelValue": l[0] || (l[0] = (i) => r.value = i),
+      title: "查看数据",
+      class: "w-900px",
+      width: "900px",
+      onClose: k,
+      onOk: H,
+      okText: "导出数据"
+    }, {
+      default: oe(() => [
+        w("div", Je, [
+          z(h(_), {
+            ref_key: "monacoEditorRef",
+            ref: g,
+            class: "editor h-full",
+            autoToggleTheme: "",
+            readOnly: "",
+            config: a,
+            language: "json"
+          }, null, 512)
+        ])
+      ]),
+      _: 1
+    }, 8, ["modelValue"]));
+  }
+}), Qe = { class: "epic-edit-toolbar flex items-center justify-between px-2" }, Ke = { class: "flex-1 h-full flex items-center" }, Xe = {
+  key: 0,
+  class: "epic-divider"
+}, Ye = ["title", "onClick"], qe = { class: "flex-1 h-full flex items-center justify-end" }, Ge = {
+  key: 0,
+  class: "flex items-center ml-12px"
+}, et = { class: "pr-8px w-82px cursor-pointer" }, tt = { class: "epic-device h-28px items-center gap-1 rounded-md border p-2px flex" }, ot = ["title", "onClick"], nt = /* @__PURE__ */ K({
+  __name: "toolbar",
+  setup(J) {
+    const D = U.getComponent("select"), { canvasScale: u, disabledZoom: _ } = fe(), a = C("pc"), g = L("pageSchema"), r = L("designer"), v = L("revoke"), k = C(null), x = [
+      {
+        icon: "icon--epic--computer-outline-rounded",
+        title: "pc",
+        key: "pc"
+      },
+      {
+        icon: "icon--epic--tablet-android-outline-rounded",
+        title: "平板",
+        key: "pad"
+      },
+      {
+        icon: "icon--epic--phone-iphone-outline-sharp",
+        title: "手机",
+        key: "mobile"
+      }
+    ], H = j(() => [
+      {
+        icon: "icon--epic--code",
+        title: "查看数据",
+        on: () => E()
+      },
+      {
+        icon: "icon--epic--exit-to-app-rounded",
+        title: "导入数据",
+        on: V
+      },
+      {
+        icon: "icon--epic--trash",
+        title: "清空",
+        on: t
+      },
+      {
+        icon: "icon--epic--undo",
+        title: "撤销",
+        on: s,
+        disabled: !v.recordList.value.length,
+        divider: !0
+      },
+      {
+        icon: "icon--epic--redo",
+        title: "重做",
+        on: S,
+        disabled: !v.undoList.value.length
+      }
+    ]), n = C(null), l = j({
+      get() {
+        return `${(u.value * 100).toFixed(0)}%`;
+      },
+      set(c) {
+        const y = parseFloat(c);
+        u.value = y / 100;
+      }
+    }), i = [
+      {
+        label: "60%",
+        value: "60%"
+      },
+      {
+        label: "80%",
+        value: "80%"
+      },
+      {
+        label: "100%",
+        value: "100%"
+      },
+      {
+        label: "120%",
+        value: "120%"
+      },
+      {
+        label: "140%",
+        value: "140%"
+      }
+    ];
+    function s() {
+      const c = v.undo();
+      c && (ce(g.schemas, c), r.setCheckedNode(g.schemas[0]));
+    }
+    function S() {
+      const c = v.redo();
+      c && (ce(g.schemas, c), r.setCheckedNode(g.schemas[0]));
+    }
+    function t() {
+      r.reset();
+    }
+    function E() {
+      k.value.handleOpen();
+    }
+    function V() {
+      var c;
+      (c = n.value) == null || c.click();
+    }
+    function B(c) {
+      var N;
+      const y = (N = c.target.files) == null ? void 0 : N[0];
+      if (!y) return;
+      c.target.value = null;
+      const p = new FileReader();
+      p.readAsText(y), p.onload = (m) => {
+        var $;
+        G(($ = m.target) == null ? void 0 : $.result);
+      };
+    }
+    function G(c) {
+      try {
+        let y = JSON.parse(c ?? "");
+        y.schemas || (y = He(y)), ce(g, y);
+      } catch (y) {
+        console.error(y);
+      }
+    }
+    function ee(c) {
+      r.handleToggleDeviceMode(c), a.value = c;
+      const y = {
+        pc: {},
+        pad: {
+          width: "780px",
+          mode: c
+        },
+        mobile: {
+          width: "390px",
+          mode: c
+        }
+      };
+      g.canvas = y[c];
+    }
+    return (c, y) => (M(), W(X, null, [
+      w("div", Qe, [
+        w("div", Ke, [
+          (M(!0), W(X, null, ve(H.value, (p, N) => (M(), W(X, { key: N }, [
+            p.divider ? (M(), W("div", Xe)) : se("", !0),
+            w("div", {
+              title: p.title,
+              class: q(["epic-action-item text-base h-90% px-10px flex items-center cursor-pointer", { disabled: p.disabled }]),
+              onClick: p.on
+            }, [
+              z(h(ie), {
+                name: p.icon
+              }, null, 8, ["name"])
+            ], 10, Ye)
+          ], 64))), 128))
+        ]),
+        de(w("input", {
+          type: "file",
+          ref_key: "fileRef",
+          ref: n,
+          accept: ".json,.txt",
+          onChange: B
+        }, null, 544), [
+          [ue, !1]
+        ]),
+        w("div", qe, [
+          h(_) ? se("", !0) : (M(), W("div", Ge, [
+            w("div", et, [
+              z(h(D), {
+                value: l.value,
+                "onUpdate:value": y[0] || (y[0] = (p) => l.value = p),
+                modelValue: l.value,
+                "onUpdate:modelValue": y[1] || (y[1] = (p) => l.value = p),
+                options: i,
+                size: "small"
+              }, null, 8, ["value", "modelValue"])
+            ])
+          ])),
+          w("div", tt, [
+            (M(), W(X, null, ve(x, (p) => w("div", {
+              key: p.key,
+              title: p.title,
+              class: q(["epic-device-item h-full px-1 flex items-center cursor-pointer text-base transition-colors rounded-sm", { checked: p.key === a.value }]),
+              onClick: (N) => ee(p.key)
+            }, [
+              z(h(ie), {
+                name: p.icon
+              }, null, 8, ["name"])
+            ], 10, ot)), 64))
+          ])
+        ])
+      ]),
+      z(Ze, {
+        ref_key: "previewJson",
+        ref: k
+      }, null, 512)
+    ], 64));
+  }
+}), lt = { class: "h-full flex flex-col relative" }, st = ["draggable"], at = /* @__PURE__ */ K({
+  __name: "editScreenContainer",
+  setup(J) {
+    const D = L("pageSchema"), u = C(null), _ = C(null), a = C(null), { pressSpace: g, disabledZoom: r } = fe(), {
+      handleElementDragStart: v,
+      handleElementDrag: k,
+      handleElementDragEnd: x
+    } = Ve(u), { width: H, height: n } = We(u), { canvasScale: l, handleZoom: i } = ze(_);
+    let s = 0, S = 0;
+    const t = C({}), E = C({}), V = C({}), B = Re({ width: 0, height: 0 });
+    Te(ee), Y(V, () => {
+      pe(G);
+    });
+    function G() {
+      a.value && (B.value = {
+        width: a.value.clientWidth,
+        height: a.value.clientHeight
+      });
+    }
+    function ee() {
+      var N, m;
+      V.value = {
+        width: ((N = D.canvas) == null ? void 0 : N.width) ?? "0",
+        height: ((m = D.canvas) == null ? void 0 : m.height) ?? "0"
+      };
+    }
+    Ae(H, c), Y(B, c);
+    function c() {
+      let N = B.value.width || s, m = B.value.height || S;
+      t.value = {
+        width: H.value + N + "px",
+        // 滚动框宽度，包含额外的宽度
+        height: n.value + m + "px"
+        // 滚动框高度，包含额外的高度
+      }, E.value = {
+        width: N + "px",
+        // 画布宽度
+        height: m + "px"
+        // 画布高度
+      }, y();
+    }
+    function y() {
+      pe(() => {
+        var P;
+        let N = B.value.width || s;
+        const $ = (B.value.height || S) / 2, F = N / 2;
+        (P = u.value) == null || P.scrollTo(F, $);
+      });
+    }
+    ae(u, p), ae(_, p);
+    function p() {
+      var m;
+      if (!u.value) return;
+      const N = u.value.getBoundingClientRect();
+      if (s = N.width - 60, S = N.height - 80, !r.value)
+        if (B.value.width === 0)
+          l.value = 1;
+        else {
+          const $ = (s - 20) / B.value.width, F = S / (B.value.height || ((m = _.value) == null ? void 0 : m.clientHeight) || 1), P = Math.abs($ - 1) < Math.abs(F - 1);
+          let Z = 1;
+          P ? Z = $ : Z = F, ($ < 1 || F < 1) && (Z = Math.min($, F)), Z < 1.4 && Z > 0.5 && (l.value = Z);
+        }
+      Pe(c, 50)();
+    }
+    return (N, m) => (M(), W("div", lt, [
+      z(nt),
+      w("div", {
+        ref_key: "editScreenContainerRef",
+        ref: u,
+        class: q(["flex-1 overflow-auto overflow-y-hidden epic-edit-screen-container", { "cursor-grab": h(g) }]),
+        draggable: h(g),
+        onWheel: m[0] || (m[0] = //@ts-ignore
+        (...$) => h(i) && h(i)(...$)),
+        onDragstart: m[1] || (m[1] = //@ts-ignore
+        (...$) => h(v) && h(v)(...$)),
+        onDragend: m[2] || (m[2] = //@ts-ignore
+        (...$) => h(x) && h(x)(...$)),
+        onDrag: m[3] || (m[3] = //@ts-ignore
+        (...$) => h(k) && h(k)(...$))
+      }, [
+        w("div", {
+          id: "canvasContainer",
+          class: "flex items-center justify-center",
+          style: le(t.value)
+        }, [
+          w("div", {
+            ref_key: "draggableElRef",
+            ref: _,
+            class: "transition-all"
+          }, [
+            w("div", {
+              class: q({ "pointer-events-none": h(g) }),
+              style: le(E.value)
+            }, [
+              Be(N.$slots, "default")
+            ], 6)
+          ], 512)
+        ], 4)
+      ], 42, st),
+      w("div", {
+        ref_key: "sizeBoxRef",
+        ref: a,
+        class: "absolute top-0 pointer-events-none",
+        style: le(V.value)
+      }, null, 4)
+    ]));
+  }
+}), it = { class: "epic-edit-canvas" }, ft = /* @__PURE__ */ K({
+  __name: "index",
+  setup(J) {
+    const D = C(null), u = C(null), _ = L("pageSchema"), a = j(() => _.schemas[0]), g = j(() => ({
+      width: "100%",
+      height: "100%"
+    }));
+    return Oe(() => {
+      var r;
+      (r = u.value) == null || r.handleInit(D.value);
+    }), (r, v) => (M(), W("section", it, [
+      z(at, null, {
+        default: oe(() => [
+          w("div", {
+            ref_key: "epicEditRangeRef",
+            ref: D,
+            class: "epic-edit-range rounded-md overflow-auto relative",
+            style: le(g.value)
+          }, [
+            z(ge, { schema: a.value }, null, 8, ["schema"]),
+            z(je, {
+              ref_key: "ePreviewWidgetsRef",
+              ref: u
+            }, null, 512)
+          ], 4)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  ft as default
+};