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