355 lines
15 KiB
JavaScript
355 lines
15 KiB
JavaScript
import { defineComponent as Fe, inject as he, ref as pe, reactive as we, toRef as Ae, onBeforeMount as Pe, onMounted as Ye, watchEffect as Le, onBeforeUnmount as Oe, computed as N, watch as b, createElementBlock as be, openBlock as ze, normalizeStyle as Xe, normalizeClass as ve, renderSlot as _e, createCommentVNode as $e } from "vue";
|
|
import { isNull as x, nextTickOnce as f, throttle as ye } from "@vexip-ui/utils";
|
|
import { LAYOUT_KEY as Ge, EMITTER_KEY as je, useNameHelper as Ke, setTransformRtl as Ve, setTransform as qe, setTopRight as Je, setTopLeft as Qe } from "../helpers/common.mjs";
|
|
import { getControlPosition as Re, createCoreData as xe } from "../helpers/draggable.mjs";
|
|
import { getColsFromBreakpoint as Ze } from "../helpers/responsive.mjs";
|
|
import { getDocumentDir as He } from "../helpers/dom.mjs";
|
|
import Se from "interactjs";
|
|
const ot = /* @__PURE__ */ Fe({
|
|
__name: "grid-item",
|
|
props: {
|
|
isDraggable: { type: Boolean, default: void 0 },
|
|
isResizable: { type: Boolean, default: void 0 },
|
|
isBounded: { type: Boolean, default: void 0 },
|
|
static: { type: Boolean, default: !1 },
|
|
minH: { default: 1 },
|
|
minW: { default: 1 },
|
|
maxH: { default: 1 / 0 },
|
|
maxW: { default: 1 / 0 },
|
|
x: {},
|
|
y: {},
|
|
w: {},
|
|
h: {},
|
|
i: {},
|
|
dragIgnoreFrom: { default: "a, button" },
|
|
dragAllowFrom: { default: void 0 },
|
|
resizeIgnoreFrom: { default: "a, button" },
|
|
preserveAspectRatio: { type: Boolean, default: !1 },
|
|
dragOption: { default: () => ({}) },
|
|
resizeOption: { default: () => ({}) }
|
|
},
|
|
emits: ["container-resized", "resize", "resized", "move", "moved"],
|
|
setup(Me, { expose: We, emit: Be }) {
|
|
const i = Me, M = Be, l = he(Ge), g = he(je);
|
|
if (!l)
|
|
throw new Error("[grid-layout-plus]: missing layout store, GridItem must under a GridLayout.");
|
|
const d = pe(null), e = we({
|
|
cols: 1,
|
|
containerWidth: 100,
|
|
rowHeight: 30,
|
|
margin: [10, 10],
|
|
maxRows: 1 / 0,
|
|
draggable: void 0,
|
|
resizable: void 0,
|
|
bounded: void 0,
|
|
transformScale: 1,
|
|
useCssTransforms: !0,
|
|
useStyleCursor: !0,
|
|
isDragging: !1,
|
|
dragging: {
|
|
top: -1,
|
|
left: -1
|
|
},
|
|
isResizing: !1,
|
|
resizing: {
|
|
width: -1,
|
|
height: -1
|
|
},
|
|
style: {},
|
|
rtl: !1
|
|
});
|
|
let X = !1, _ = !1, $ = NaN, G = NaN, k = NaN, E = NaN, j = -1, K = -1, V = -1, q = -1, h = i.x, v = i.y, p = i.w, y = i.h;
|
|
const W = pe(), J = we({
|
|
i: Ae(i, "i"),
|
|
state: e,
|
|
wrapper: W,
|
|
calcXY: A
|
|
});
|
|
function Q(t) {
|
|
Ie(t);
|
|
}
|
|
function Z() {
|
|
de();
|
|
}
|
|
function U(t) {
|
|
x(i.isDraggable) && (e.draggable = t);
|
|
}
|
|
function ee(t) {
|
|
x(i.isResizable) && (e.resizable = t);
|
|
}
|
|
function te(t) {
|
|
x(i.isBounded) && (e.bounded = t);
|
|
}
|
|
function ie(t) {
|
|
e.transformScale = t;
|
|
}
|
|
function ae(t) {
|
|
e.rowHeight = t;
|
|
}
|
|
function re(t) {
|
|
e.maxRows = t;
|
|
}
|
|
function ne() {
|
|
e.rtl = He() === "rtl", de();
|
|
}
|
|
function oe(t) {
|
|
e.cols = Math.floor(t);
|
|
}
|
|
l.increaseItem(J), Pe(() => {
|
|
e.rtl = He() === "rtl";
|
|
}), Ye(() => {
|
|
l.responsive && l.lastBreakpoint ? e.cols = Ze(l.lastBreakpoint, l.cols) : e.cols = l.colNum, e.rowHeight = l.rowHeight, e.containerWidth = l.width !== null ? l.width : 100, e.margin = l.margin !== void 0 ? l.margin.map(Number) : [10, 10], e.maxRows = l.maxRows, x(i.isDraggable) ? e.draggable = l.isDraggable : e.draggable = i.isDraggable, x(i.isResizable) ? e.resizable = l.isResizable : e.resizable = i.isResizable, x(i.isBounded) ? e.bounded = l.isBounded : e.bounded = i.isBounded, e.transformScale = l.transformScale, e.useCssTransforms = l.useCssTransforms, e.useStyleCursor = l.useStyleCursor, Le(() => {
|
|
h = i.x, v = i.y, y = i.h, p = i.w, f(H);
|
|
}), g.on("updateWidth", Q), g.on("compact", Z), g.on("setDraggable", U), g.on("setResizable", ee), g.on("setBounded", te), g.on("setTransformScale", ie), g.on("setRowHeight", ae), g.on("setMaxRows", re), g.on("directionchange", ne), g.on("setColNum", oe);
|
|
}), Oe(() => {
|
|
g.off("updateWidth", Q), g.off("compact", Z), g.off("setDraggable", U), g.off("setResizable", ee), g.off("setBounded", te), g.off("setTransformScale", ie), g.off("setRowHeight", ae), g.off("setMaxRows", re), g.off("directionchange", ne), g.off("setColNum", oe), d.value && (d.value.unset(), d.value = null), l.decreaseItem(J);
|
|
}), We({ state: e, wrapper: W });
|
|
const Ce = typeof navigator < "u" ? navigator.userAgent.toLowerCase().includes("android") : !1, se = N(() => e.resizable && !i.static), m = N(() => l.isMirrored ? !e.rtl : e.rtl), De = N(() => (e.draggable || e.resizable) && !i.static), z = Ke("item"), Ne = N(() => ({
|
|
[z.b()]: !0,
|
|
[z.bm("resizable")]: se.value,
|
|
[z.bm("static")]: i.static,
|
|
[z.bm("resizing")]: e.isResizing,
|
|
[z.bm("dragging")]: e.isDragging,
|
|
[z.bm("transform")]: e.useCssTransforms,
|
|
[z.bm("rtl")]: m.value,
|
|
[z.bm("no-touch")]: Ce && De.value
|
|
})), T = N(() => [z.be("resizer"), m.value && z.bem("resizer", "rtl")].filter(Boolean));
|
|
b(
|
|
() => i.isDraggable,
|
|
(t) => {
|
|
e.draggable = t;
|
|
}
|
|
), b(
|
|
() => i.static,
|
|
() => {
|
|
f(ue), f(S);
|
|
}
|
|
), b(
|
|
() => e.draggable,
|
|
() => {
|
|
f(ue);
|
|
}
|
|
), b(
|
|
() => i.isResizable,
|
|
(t) => {
|
|
e.resizable = t;
|
|
}
|
|
), b(
|
|
() => i.isBounded,
|
|
(t) => {
|
|
e.bounded = t;
|
|
}
|
|
), b(
|
|
() => e.resizable,
|
|
() => {
|
|
f(S);
|
|
}
|
|
), b(
|
|
() => e.rowHeight,
|
|
() => {
|
|
f(H), f(F);
|
|
}
|
|
), b([() => e.cols, () => e.containerWidth], () => {
|
|
f(S), f(H), f(F);
|
|
}), b([() => i.minH, () => i.maxH, () => i.minW, () => i.maxW], () => {
|
|
f(S);
|
|
}), b(m, () => {
|
|
f(S), f(H);
|
|
}), b([() => l.margin, () => l.margin[0], () => l.margin[1]], () => {
|
|
const t = l.margin;
|
|
!t || t[0] === e.margin[0] && t[1] === e.margin[1] || (e.margin = t.map(Number), f(H), f(F));
|
|
});
|
|
function H() {
|
|
i.x + i.w > e.cols ? (h = 0, p = i.w > e.cols ? e.cols : i.w) : (h = i.x, p = i.w);
|
|
const t = B(h, v, p, y);
|
|
e.isDragging && (t.top = e.dragging.top, m.value ? t.right = e.dragging.left : t.left = e.dragging.left), e.isResizing && (t.width = e.resizing.width, t.height = e.resizing.height);
|
|
let r;
|
|
e.useCssTransforms ? m.value ? r = Ve(t.top, t.right, t.width, t.height) : r = qe(t.top, t.left, t.width, t.height) : m.value ? r = Je(t.top, t.right, t.width, t.height) : r = Qe(t.top, t.left, t.width, t.height), e.style = r;
|
|
}
|
|
function F() {
|
|
const t = {};
|
|
for (const r of ["width", "height"]) {
|
|
const o = e.style[r].match(/^(\d+)px$/);
|
|
if (!o)
|
|
return;
|
|
t[r] = o[1];
|
|
}
|
|
M("container-resized", i.i, i.h, i.w, t.height, t.width);
|
|
}
|
|
function le(t) {
|
|
if (i.static) return;
|
|
const r = t.type;
|
|
if (r === "resizestart" && e.isResizing || r !== "resizestart" && !e.isResizing)
|
|
return;
|
|
const s = Re(t);
|
|
if (x(s)) return;
|
|
const { x: o, y: c } = s, n = { width: 0, height: 0 };
|
|
let a;
|
|
switch (r) {
|
|
case "resizestart": {
|
|
S(), j = p, K = y, a = B(h, v, p, y), n.width = a.width, n.height = a.height, e.resizing = n, e.isResizing = !0;
|
|
break;
|
|
}
|
|
case "resizemove": {
|
|
!t.edges.right && !t.edges.left && (k = o), !t.edges.top && !t.edges.bottom && (E = c);
|
|
const u = xe(k, E, o, c);
|
|
m.value ? n.width = e.resizing.width - u.deltaX / e.transformScale : n.width = e.resizing.width + u.deltaX / e.transformScale, n.height = e.resizing.height + u.deltaY / e.transformScale, e.resizing = n;
|
|
break;
|
|
}
|
|
case "resizeend": {
|
|
a = B(h, v, p, y), n.width = a.width, n.height = a.height, e.resizing = { width: -1, height: -1 }, e.isResizing = !1;
|
|
break;
|
|
}
|
|
}
|
|
a = Te(n.height, n.width), a.w < i.minW && (a.w = i.minW), a.w > i.maxW && (a.w = i.maxW), a.h < i.minH && (a.h = i.minH), a.h > i.maxH && (a.h = i.maxH), a.h < 1 && (a.h = 1), a.w < 1 && (a.w = 1), k = o, E = c, (p !== a.w || y !== a.h) && M("resize", i.i, a.h, a.w, n.height, n.width), t.type === "resizeend" && (j !== p || K !== y) && M("resized", i.i, a.h, a.w, n.height, n.width), g.emit("resizeEvent", t.type, i.i, h, v, a.h, a.w);
|
|
}
|
|
function ge(t) {
|
|
if (i.static || e.isResizing) return;
|
|
const r = t.type;
|
|
if (r === "dragstart" && e.isDragging || r !== "dragstart" && !e.isDragging)
|
|
return;
|
|
const s = Re(t);
|
|
if (x(s)) return;
|
|
const { x: o, y: c } = s, n = t.target;
|
|
if (!n.offsetParent) return;
|
|
const a = { top: 0, left: 0 };
|
|
switch (r) {
|
|
case "dragstart": {
|
|
V = h, q = v;
|
|
const w = n.offsetParent.getBoundingClientRect(), R = n.getBoundingClientRect(), C = R.left / e.transformScale, D = w.left / e.transformScale, P = R.right / e.transformScale, Y = w.right / e.transformScale, L = R.top / e.transformScale, O = w.top / e.transformScale;
|
|
m.value ? a.left = (P - Y) * -1 : a.left = C - D, a.top = L - O, e.dragging = a, e.isDragging = !0;
|
|
break;
|
|
}
|
|
case "dragmove": {
|
|
const w = xe($, G, o, c);
|
|
if (m.value ? a.left = e.dragging.left - w.deltaX / e.transformScale : a.left = e.dragging.left + w.deltaX / e.transformScale, a.top = e.dragging.top + w.deltaY / e.transformScale, e.bounded) {
|
|
const R = n.offsetParent.clientHeight - ce(i.h, e.rowHeight, e.margin[1]);
|
|
a.top = fe(a.top, 0, R);
|
|
const C = I(), D = e.containerWidth - ce(i.w, C, e.margin[0]);
|
|
a.left = fe(a.left, 0, D);
|
|
}
|
|
e.dragging = a;
|
|
break;
|
|
}
|
|
case "dragend": {
|
|
const w = n.offsetParent.getBoundingClientRect(), R = n.getBoundingClientRect(), C = R.left / e.transformScale, D = w.left / e.transformScale, P = R.right / e.transformScale, Y = w.right / e.transformScale, L = R.top / e.transformScale, O = w.top / e.transformScale;
|
|
m.value ? a.left = (P - Y) * -1 : a.left = C - D, a.top = L - O, e.dragging = { top: -1, left: -1 }, e.isDragging = !1;
|
|
break;
|
|
}
|
|
}
|
|
let u;
|
|
m.value, u = A(a.top, a.left), $ = o, G = c, (h !== u.x || v !== u.y) && M("move", i.i, u.x, u.y), t.type === "dragend" && (V !== h || q !== v) && M("moved", i.i, u.x, u.y), g.emit("dragEvent", t.type, i.i, u.x, u.y, y, p);
|
|
}
|
|
function B(t, r, s, o) {
|
|
const c = I();
|
|
let n;
|
|
return m.value ? n = {
|
|
right: Math.round(c * t + (t + 1) * e.margin[0]),
|
|
top: Math.round(e.rowHeight * r + (r + 1) * e.margin[1]),
|
|
// 0 * Infinity === NaN, which causes problems with resize constraints;
|
|
// Fix this if it occurs.
|
|
// Note we do it here rather than later because Math.round(Infinity) causes depot
|
|
width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
|
|
height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
|
|
} : n = {
|
|
left: Math.round(c * t + (t + 1) * e.margin[0]),
|
|
top: Math.round(e.rowHeight * r + (r + 1) * e.margin[1]),
|
|
// 0 * Infinity === NaN, which causes problems with resize constraints;
|
|
// Fix this if it occurs.
|
|
// Note we do it here rather than later because Math.round(Infinity) causes depot
|
|
width: s === 1 / 0 ? s : Math.round(c * s + Math.max(0, s - 1) * e.margin[0]),
|
|
height: o === 1 / 0 ? o : Math.round(e.rowHeight * o + Math.max(0, o - 1) * e.margin[1])
|
|
}, n;
|
|
}
|
|
function A(t, r) {
|
|
const s = I();
|
|
let o = Math.round((r - e.margin[0]) / (s + e.margin[0])), c = Math.round((t - e.margin[1]) / (e.rowHeight + e.margin[1]));
|
|
return o = Math.max(Math.min(o, e.cols - p), 0), c = Math.max(Math.min(c, e.maxRows - y), 0), { x: o, y: c };
|
|
}
|
|
function I() {
|
|
return (e.containerWidth - e.margin[0] * (e.cols + 1)) / e.cols;
|
|
}
|
|
function ce(t, r, s) {
|
|
return Number.isFinite(t) ? Math.round(r * t + Math.max(0, t - 1) * s) : t;
|
|
}
|
|
function fe(t, r, s) {
|
|
return Math.max(Math.min(t, s), r);
|
|
}
|
|
function Te(t, r, s = !1) {
|
|
const o = I();
|
|
let c = Math.round((r + e.margin[0]) / (o + e.margin[0])), n = 0;
|
|
return s ? n = Math.ceil((t + e.margin[1]) / (e.rowHeight + e.margin[1])) : n = Math.round((t + e.margin[1]) / (e.rowHeight + e.margin[1])), c = Math.max(Math.min(c, e.cols - h), 0), n = Math.max(Math.min(n, e.maxRows - v), 0), { w: c, h: n };
|
|
}
|
|
function Ie(t, r) {
|
|
e.containerWidth = t;
|
|
}
|
|
function de() {
|
|
H();
|
|
}
|
|
function me() {
|
|
!d.value && W.value && (d.value = Se(W.value), e.useStyleCursor || d.value.styleCursor(!1));
|
|
}
|
|
const ke = ye(ge);
|
|
function ue() {
|
|
if (me(), !!d.value)
|
|
if (e.draggable && !i.static) {
|
|
const t = {
|
|
ignoreFrom: i.dragIgnoreFrom,
|
|
allowFrom: i.dragAllowFrom,
|
|
...i.dragOption
|
|
};
|
|
d.value.draggable(t), X || (X = !0, d.value.on("dragstart dragmove dragend", (r) => {
|
|
r.type === "dragmove" ? ke(r) : ge(r);
|
|
}));
|
|
} else
|
|
d.value.draggable({ enabled: !1 });
|
|
}
|
|
const Ee = ye(le);
|
|
function S() {
|
|
if (me(), !!d.value)
|
|
if (e.resizable && !i.static) {
|
|
const t = B(0, 0, i.maxW, i.maxH), r = B(0, 0, i.minW, i.minH), s = {
|
|
edges: {
|
|
left: m.value ? `.${T.value[0]}` : !1,
|
|
right: m.value ? !1 : `.${T.value[0]}`,
|
|
bottom: `.${T.value[0]}`,
|
|
top: !1
|
|
},
|
|
ignoreFrom: i.resizeIgnoreFrom,
|
|
restrictSize: {
|
|
min: {
|
|
height: r.height * e.transformScale,
|
|
width: r.width * e.transformScale
|
|
},
|
|
max: {
|
|
height: t.height * e.transformScale,
|
|
width: t.width * e.transformScale
|
|
}
|
|
},
|
|
...i.resizeOption
|
|
};
|
|
i.preserveAspectRatio && (s.modifiers = [Se.modifiers.aspectRatio({ ratio: "preserve" })]), d.value.resizable(s), _ || (_ = !0, d.value.on("resizestart resizemove resizeend", (o) => {
|
|
o.type === "resizemove" ? Ee(o) : le(o);
|
|
}));
|
|
} else
|
|
d.value.resizable({ enabled: !1 });
|
|
}
|
|
return (t, r) => (ze(), be("section", {
|
|
ref_key: "wrapper",
|
|
ref: W,
|
|
class: ve(Ne.value),
|
|
style: Xe(e.style)
|
|
}, [
|
|
_e(t.$slots, "default"),
|
|
se.value ? (ze(), be("span", {
|
|
key: 0,
|
|
class: ve(T.value)
|
|
}, null, 2)) : $e("", !0)
|
|
], 6));
|
|
}
|
|
});
|
|
export {
|
|
ot as default
|
|
};
|
|
//# sourceMappingURL=grid-item.vue.mjs.map
|