gepic
Version:
基于vue3的设计器,可视化开发页面表单
193 lines (192 loc) • 9.13 kB
JavaScript
import { defineComponent as ae, inject as w, ref as h, computed as D, watch as P, createElementBlock as j, openBlock as A, Fragment as ue, withDirectives as Z, createElementVNode as m, normalizeClass as de, createCommentVNode as fe, toDisplayString as pe, unref as p, createVNode as z, vShow as q } from "vue";
import { pluginManager as H } from "../../../../../../utils/manager/pluginManager.js";
import { useTimedQuery as ve } from "../../../../../../hooks/common/element.js";
import { useResizeObserver as G } from "@vueuse/core";
import { useStore as he } from "../../../../../../hooks/store/index.js";
import { findSchemaInfoById as R, generateNewSchema as me } from "../../../../../../utils/common/data.js";
import V from "../../../../icon/src/icon.vue.js";
const ge = { class: "epic-widget-action-item whitespace-nowrap" }, ye = {
key: 0,
class: "flex items-center"
}, $e = /* @__PURE__ */ ae({
__name: "previewWidgets",
setup(xe, { expose: J }) {
const T = w("pageManager", {}), x = w("pageSchema"), a = w("designer"), K = w("designerProps"), F = w("revoke"), g = h(null), y = h(null), d = h(null), _ = h(!1), $ = h(!1), B = h(!0), C = h("top"), { canvasScale: k, disabledZoom: M } = he();
let o = null;
const U = D(() => {
const e = a.state.checkedNode;
return !(!(e != null && e.id) || K.value.lockDefaultSchemaEdit && T.defaultComponentIds.value.includes(e == null ? void 0 : e.id));
}), N = D(() => {
var r, i, c, n, u, f;
const e = T.componentInstances.value, l = (r = a.state.checkedNode) == null ? void 0 : r.id;
if ((c = (i = a.state.checkedNode) == null ? void 0 : i.componentProps) != null && c.hidden)
return null;
const s = H.getComponentConfingByType((n = a.state.checkedNode) == null ? void 0 : n.type) ?? null;
if (!l || !(e != null && e[l]))
return null;
if (s != null && s.defaultSchema.input && ((u = a.state.checkedNode) == null ? void 0 : u.noFormItem) !== !0)
return (f = e[l + "formItem"]) == null ? void 0 : f.$el;
const t = e[l];
return !(t != null && t.$el) || (t == null ? void 0 : t.$el.nodeName) === "#text" || !(t != null && t.$el.getBoundingClientRect) ? null : t == null ? void 0 : t.$el;
}), O = D(() => {
var i, c;
const e = T.componentInstances.value, { hoverNode: l } = a.state;
if (!l || (i = l.componentProps) != null && i.hidden)
return null;
const s = l.id, t = H.getComponentConfingByType(l.type) ?? null;
if (!s || !(e != null && e[s]))
return null;
if (t != null && t.defaultSchema.input && l.noFormItem !== !0)
return (c = e[s + "formItem"]) == null ? void 0 : c.$el;
const r = e[s];
return (r == null ? void 0 : r.$el.nodeName) === "#text" ? null : r == null ? void 0 : r.$el;
}), { mutationObserver: I, observerConfig: E } = Y(b), { startTimedQuery: ee, stopTimedQuery: te } = ve(b);
P(() => N.value, (e) => {
if (e) {
_.value = !0, I.observe(e, E);
const l = e.parentNode;
l && (l.ondragstart = () => {
B.value = !1, ee();
}, l.ondragend = () => {
B.value = !0, te();
}), b();
} else
_.value = !1;
});
const { mutationObserver: oe, observerConfig: le } = Y(L);
P(() => O.value, (e) => {
e && (oe.observe(e, le), L());
});
let Q = 0;
P(() => {
var e;
return (e = a.state.hoverNode) == null ? void 0 : e.id;
}, (e) => {
if (e) {
$.value = !0, clearTimeout(Q);
return;
}
Q = setTimeout(() => {
$.value = !1;
}, 300);
});
let W = 0, X = 0;
function b() {
const e = N.value;
if (!e || !o) return;
const { top: l, left: s } = o == null ? void 0 : o.getBoundingClientRect(), { top: t, left: r, width: i, height: c } = e.getBoundingClientRect(), n = M.value ? 1 : k.value, u = t - l + ((o == null ? void 0 : o.scrollTop) ?? 0) * n, f = r - s + ((o == null ? void 0 : o.scrollLeft) ?? 0) * n, v = c / n;
g.value && (g.value.style.width = `${i / n}px`, g.value.style.height = `${v}px`, g.value.style.top = `${u / n}px`, g.value.style.left = `${f / n}px`, se(u, f)), d.value && (u < 45 && v < 100 ? (d.value.style.top = "", d.value.style.bottom = "-30px", d.value.style["border-radius"] = "0px 0px 4px 4px", C.value = "bottom") : u < 45 ? (d.value.style.top = "0px", d.value.style["border-radius"] = "0px 0px 4px 0", C.value = "center") : (d.value.style.top = "-30px", d.value.style["border-radius"] = "4px 4px 0px 0px", C.value = "top"));
}
function se(e, l) {
const s = N.value;
if (!o || !s) return;
const t = o.getBoundingClientRect(), { width: r } = s.getBoundingClientRect(), i = M.value ? 1 : k.value, c = e / i - t.top;
let n = l / i - t.left + r / i;
n < t.width && (n = 0);
const u = o.scrollTop - t.height / 3 + 60, f = o.scrollTop + t.height / 3 * 2, v = o.scrollLeft - t.width + 200, S = o.scrollLeft + t.width - 200;
Math.abs(c - W) < 10 && Math.abs(n - X) < 10 || (W = c, X = n, !(c > u && c < f && n > v && n < S) && (o.scrollTop = c, o.scrollLeft = n));
}
function L() {
var v, S;
const e = O.value;
if (!e) return;
const { top: l, left: s } = (o == null ? void 0 : o.getBoundingClientRect()) ?? { top: 0, left: 0 }, { top: t, left: r, width: i, height: c } = ((v = e.getBoundingClientRect) == null ? void 0 : v.call(e)) ?? ((S = e.nextElementSibling) == null ? void 0 : S.getBoundingClientRect()), n = M.value ? 1 : k.value, u = t - l + ((o == null ? void 0 : o.scrollTop) ?? 0) * n, f = r - s + ((o == null ? void 0 : o.scrollLeft) ?? 0) * n;
y.value && (y.value.style.width = `${i / n}px`, y.value.style.height = `${c / n}px`, y.value.style.top = `${u / n}px`, y.value.style.left = `${f / n}px`);
}
function Y(e) {
const l = window.MutationObserver, s = {
childList: !0,
attributes: !0,
subtree: !0
};
return {
mutationObserver: new l(e),
observerConfig: s
};
}
function re() {
var t;
const e = R(x.schemas, ((t = a.state.checkedNode) == null ? void 0 : t.id) ?? "root");
if (!e)
return !1;
const { parentSchema: l, schema: s } = e;
a.setCheckedNode(l);
}
function ne() {
var i;
const e = R(x.schemas, ((i = a.state.checkedNode) == null ? void 0 : i.id) ?? "root");
if (!e)
return !1;
const { list: l, schema: s, index: t } = e, r = me(s);
l.splice(t + 1, 0, r), a.setCheckedNode(r), F.push(x.schemas, "复制组件");
}
function ie() {
var r;
const e = R(x.schemas, ((r = a.state.checkedNode) == null ? void 0 : r.id) ?? "root");
if (!e)
return !1;
let { list: l, schema: s, index: t } = e;
l.splice(t, 1), t === l.length && t--, a.setCheckedNode(l[t]), F.push(x.schemas, "删除组件");
}
function ce(e) {
o = e, o == null || o.addEventListener("scroll", () => {
b();
}), G(N, b), G(O, L);
}
return J({
handleInit: ce
}), (e, l) => {
var s, t, r, i, c;
return A(), j(ue, null, [
Z(m("div", {
ref_key: "selectorRef",
ref: g,
class: de(["epic-checked-widget absolute pointer-events-none z-999", C.value + " " + (B.value ? "transition-all" : "")])
}, [
m("div", {
ref_key: "actionBoxRef",
ref: d,
class: "epic-widget-action-box"
}, [
m("div", ge, pe((t = p(H).getComponentConfingByType(((s = p(a).state.checkedNode) == null ? void 0 : s.type) ?? "")) == null ? void 0 : t.defaultSchema.label), 1),
U.value ? (A(), j("div", ye, [
m("div", {
title: "选择父节点",
class: "epic-widget-action-item pointer-events-auto",
onClick: re
}, [
z(p(V), { name: "icon--epic--upward" })
]),
m("div", {
title: "复制",
class: "epic-widget-action-item pointer-events-auto",
onClick: ne
}, [
z(p(V), { name: "icon--epic--copy-all-outline-rounded" })
]),
m("div", {
title: "删除",
class: "epic-widget-action-item pointer-events-auto",
onClick: ie
}, [
z(p(V), { name: "icon--epic--delete-outline-rounded" })
])
])) : fe("", !0)
], 512)
], 2), [
[q, _.value && ((r = p(a).state.checkedNode) == null ? void 0 : r.id) !== "root"]
]),
Z(m("div", {
ref_key: "hoverWidgetRef",
ref: y,
class: "epic-hover-widget absolute transition-all pointer-events-none z-998"
}, null, 512), [
[q, $.value && ((i = p(a).state.checkedNode) == null ? void 0 : i.id) !== ((c = p(a).state.hoverNode) == null ? void 0 : c.id)]
])
], 64);
};
}
});
export {
$e as default
};