gepic
Version:
基于vue3的设计器,可视化开发页面表单
121 lines (120 loc) • 4.31 kB
JavaScript
import { defineComponent as L, inject as _, ref as s, computed as D, shallowRef as q, watchEffect as F, onMounted as G, watch as H, nextTick as W, createElementBlock as I, openBlock as J, createVNode as K, createElementVNode as u, unref as r, normalizeClass as k, normalizeStyle as S, renderSlot as Q } from "vue";
import { useElementSize as U, watchOnce as X, useResizeObserver as M } from "@vueuse/core";
import { debounce as Y } from "../../../../../../utils/common/common.js";
import { useElementDrag as ee, useElementZoom as te } from "../../../../../../hooks/common/element.js";
import { useStore as le } from "../../../../../../hooks/store/index.js";
import ne from "./toolbar.vue.js";
const ae = { class: "h-full flex flex-col relative" }, oe = ["draggable"], he = /* @__PURE__ */ L({
__name: "editScreenContainer",
setup(ie) {
const w = _("designerProps"), x = _("pageSchema"), a = s(null), d = s(null), v = s(null), { pressSpace: T, disabledZoom: Z } = le(), {
handleElementDragStart: j,
handleElementDrag: A,
handleElementDragEnd: b
} = ee(a), { width: y, height: N } = U(a), { canvasScale: C, handleZoom: E } = te(d), c = D(() => T.value && w.value.draggable);
let h = 0, f = 0;
const R = s({}), B = s({}), m = s({}), n = q({ width: 0, height: 0 }), O = D(() => w.value.draggable ? R.value : {
width: "100%",
height: "100%"
});
F(V), G(() => {
H(m, () => {
W(P);
}, { immediate: !0 });
});
function P() {
v.value && (n.value = {
width: v.value.clientWidth,
height: v.value.clientHeight
});
}
function V() {
var l, e;
m.value = {
width: ((l = x.canvas) == null ? void 0 : l.width) ?? "0",
height: ((e = x.canvas) == null ? void 0 : e.height) ?? "0"
};
}
X(y, p), H(n, p);
function p() {
let l = n.value.width || h, e = n.value.height || f;
R.value = {
width: y.value + l + "px",
// 滚动容器宽度
height: N.value + e + "px"
// 滚动容器高度
}, B.value = {
width: l + "px",
// 画布宽度
height: e + "px"
// 画布高度
}, $();
}
function $() {
W(() => {
var g;
let l = n.value.width || h;
const t = (n.value.height || f) / 2, o = l / 2;
(g = a.value) == null || g.scrollTo(o, t);
});
}
M(a, z), M(d, z);
function z() {
var e;
if (!a.value) return;
const l = a.value.getBoundingClientRect();
if (h = l.width - 60, f = l.height - 80, !Z.value)
if (n.value.width === 0)
C.value = 1;
else {
const t = (h - 20) / n.value.width, o = f / (n.value.height || ((e = d.value) == null ? void 0 : e.clientHeight) || 1), g = Math.abs(t - 1) < Math.abs(o - 1);
let i = 1;
g ? i = t : i = o, (t < 1 || o < 1) && (i = Math.min(t, o)), i < 1.4 && i > 0.5 && (C.value = i);
}
Y(p, 50)();
}
return (l, e) => (J(), I("div", ae, [
K(ne),
u("div", {
ref_key: "editScreenContainerRef",
ref: a,
class: k(["epic-edit-screen-container flex-1 overflow-auto overflow-y-hidden", { "cursor-grab": c.value }]),
draggable: c.value,
onWheel: e[0] || (e[0] = //@ts-ignore
(...t) => r(E) && r(E)(...t)),
onDragstart: e[1] || (e[1] = (t) => r(j)(t, c.value)),
onDrag: e[2] || (e[2] = (t) => r(A)(t, c.value)),
onDragend: e[3] || (e[3] = //@ts-ignore
(...t) => r(b) && r(b)(...t))
}, [
u("div", {
id: "canvasContainer",
class: "flex items-center justify-center",
style: S(O.value)
}, [
u("div", {
ref_key: "draggableElRef",
ref: d,
class: "transition-all"
}, [
u("div", {
class: k({ "pointer-events-none": c.value }),
style: S(B.value)
}, [
Q(l.$slots, "default")
], 6)
], 512)
], 4)
], 42, oe),
u("div", {
ref_key: "sizeBoxRef",
ref: v,
class: "absolute top-0 pointer-events-none",
style: S(m.value)
}, null, 4)
]));
}
});
export {
he as default
};