es-drager
Version:
A draggable, resizable, rotatable component based on vue3
840 lines (839 loc) • 26.8 kB
JavaScript
import { computed as $, ref as D, onMounted as me, watch as G, onBeforeUnmount as Re, nextTick as De, defineComponent as ae, openBlock as I, createElementBlock as J, withModifiers as le, renderSlot as K, pushScopeId as ye, popScopeId as ke, createElementVNode as P, createBlock as W, resolveDynamicComponent as Ne, normalizeClass as Ie, unref as z, normalizeStyle as ge, withCtx as ee, Fragment as Pe, renderList as Ve, normalizeProps as Ke, guardReactiveProps as Fe, createCommentVNode as te } from "vue";
const Ge = {
type: {
type: String,
default: "rect"
},
tag: {
type: [String, Object],
default: "div"
},
resizable: {
type: Boolean,
default: !0
},
rotatable: {
type: Boolean,
default: !1
},
skewable: {
type: Boolean,
default: !1
},
boundary: {
// 边界
type: Boolean
},
disabled: Boolean,
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
},
left: {
type: Number,
default: 0
},
top: {
type: Number,
default: 0
},
zIndex: {
type: Number,
default: 0
},
angle: {
type: Number,
default: 0
},
skew: {
type: Array,
default: () => [0, 0]
},
color: {
type: String,
default: "#3a7afe"
},
minWidth: {
type: Number,
default: -1 / 0
},
minHeight: {
type: Number,
default: -1 / 0
},
maxWidth: {
type: Number,
default: 0
},
maxHeight: {
type: Number,
default: 0
},
aspectRatio: {
// 缩放比例
type: Number
},
selected: Boolean,
snapToGrid: Boolean,
gridX: {
type: Number,
default: 50
},
gridY: {
type: Number,
default: 50
},
scaleRatio: {
type: Number,
default: 1
},
disabledKeyEvent: Boolean,
border: {
type: Boolean,
default: !0
// 兼容默认
},
resizeList: {
type: Array
// 要显示的缩放handle列表，默认显示全部
},
equalProportion: {
// 是否等比例缩放
type: Boolean
},
checkCollision: {
// 是否开启碰撞检查
type: Boolean
},
snap: Boolean,
// 是否开启吸附
snapThreshold: {
// 吸附阈值，默认10px
type: Number,
default: 10
},
markline: [Boolean, Function],
extraLines: Function
};
function Z(o, n) {
const e = (t) => {
n && n(t), document.removeEventListener("mousemove", o), document.removeEventListener("mouseup", e), document.removeEventListener("mouseleave", e), document.removeEventListener("touchmove", o), document.removeEventListener("touchend", e);
};
document.addEventListener("mousemove", o), document.addEventListener("mouseup", e), document.addEventListener("mouseleave", e), document.addEventListener("touchmove", o), document.addEventListener("touchend", e);
}
function V(o) {
let n = 0, e = 0;
if (qe(o)) {
const t = o.targetTouches[0];
n = t.pageX, e = t.pageY;
} else
n = o.clientX, e = o.clientY;
return { clientX: n, clientY: e };
}
function qe(o) {
const n = Object.prototype.toString.call(o);
return n.substring(8, n.length - 1) === "TouchEvent";
}
const j = (o = 0) => parseInt(o + "") + "px", ne = {
n: "top",
s: "bottom",
e: "right",
w: "left",
ne: "top-right",
nw: "top-left",
se: "bottom-right",
sw: "bottom-left"
}, ie = ["n", "ne", "e", "se", "s", "sw", "w", "nw"], Oe = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }, Ue = {
0: 0,
1: 1,
2: 2,
3: 2,
4: 3,
5: 4,
6: 4,
7: 5,
8: 6,
9: 6,
10: 7,
11: 8
}, je = (o, n) => {
const e = Ue[Math.floor(o / 30)], l = (Oe[n] + e) % 8;
return ie[l];
}, ve = (o = 0, n) => {
let e = [];
for (let t = 0; t < ie.length; t++) {
const l = ie[t], [r, d] = ne[l].split("-"), s = je(o, l), u = {
[r]: "0%",
cursor: s + "-resize",
side: ne[l]
};
if (d)
u[d] = "0%";
else {
const v = ["top", "bottom"].includes(r) ? "left" : "top";
u[v] = "50%";
}
n ? n.includes(ne[l]) && e.push(u) : e.push(u);
}
return e;
}, re = (o) => o * Math.PI / 180, Je = (o, n) => Math.sqrt(o * o + n * n), L = (o) => Math.cos(re(o)), x = (o) => Math.sin(re(o)), Qe = (o, n, e, t, l, r, d) => {
let { width: s, height: u, centerX: v, centerY: y, rotateAngle: i } = n;
const M = s < 0 ? -1 : 1, h = u < 0 ? -1 : 1;
if (s = Math.abs(s), u = Math.abs(u), ["top-left", "top-right", "bottom-left", "bottom-right"].includes(o)) {
o === "top-right" ? t = -t : o === "bottom-left" ? e = -e : o === "top-left" && (e = -e, t = -t);
const f = se(s, e, r);
s = f.width, e = f.deltaW;
const a = oe(u, t, d);
u = a.height, t = a.deltaH, l && (t = e / l, u = s / l);
}
switch (o) {
case "right": {
const f = se(s, e, r);
s = f.width, e = f.deltaW, l ? (t = e / l, u = s / l, v += e / 2 * L(i) - t / 2 * x(i), y += e / 2 * x(i) + t / 2 * L(i)) : (v += e / 2 * L(i), y += e / 2 * x(i));
break;
}
case "top-right": {
v += e / 2 * L(i) + t / 2 * x(i), y += e / 2 * x(i) - t / 2 * L(i);
break;
}
case "bottom-right": {
v += e / 2 * L(i) - t / 2 * x(i), y += e / 2 * x(i) + t / 2 * L(i);
break;
}
case "bottom": {
const f = oe(u, t, d);
u = f.height, t = f.deltaH, l ? (e = t * l, s = u * l, v += e / 2 * L(i) - t / 2 * x(i), y += e / 2 * x(i) + t / 2 * L(i)) : (v -= t / 2 * x(i), y += t / 2 * L(i));
break;
}
case "bottom-left": {
v -= e / 2 * L(i) + t / 2 * x(i), y -= e / 2 * x(i) - t / 2 * L(i);
break;
}
case "left": {
e = -e;
const f = se(s, e, r);
s = f.width, e = f.deltaW, l ? (u = s / l, t = e / l, v -= e / 2 * L(i) + t / 2 * x(i), y -= e / 2 * x(i) - t / 2 * L(i)) : (v -= e / 2 * L(i), y -= e / 2 * x(i));
break;
}
case "top-left": {
v -= e / 2 * L(i) - t / 2 * x(i), y -= e / 2 * x(i) + t / 2 * L(i);
break;
}
case "top": {
t = -t;
const f = oe(u, t, d);
u = f.height, t = f.deltaH, l ? (s = u * l, e = t * l, v += e / 2 * L(i) + t / 2 * x(i), y += e / 2 * x(i) - t / 2 * L(i)) : (v += t / 2 * x(i), y -= t / 2 * L(i));
break;
}
}
return {
position: {
centerX: v,
centerY: y
},
size: {
width: s * M,
height: u * h
}
};
}, oe = (o, n, e) => {
const t = o + n;
return t > e ? o = t : (n = e - o, o = e), { height: o, deltaH: n };
}, se = (o, n, e) => {
const t = o + n;
return t > e ? o = t : (n = e - o, o = e), { width: o, deltaW: n };
}, Ze = ({
centerX: o,
centerY: n,
width: e,
height: t,
angle: l
}) => ({
top: n - t / 2,
left: o - e / 2,
width: e,
height: t,
angle: l
}), He = (o, n, e) => {
const { width: t, height: l } = o;
return {
width: Math.abs(t),
height: Math.abs(l),
left: n - Math.abs(t) / 2,
top: e - Math.abs(l) / 2
};
};
function Q(o, n) {
const e = Math.abs(o) % n, t = o > 0 ? n : -n;
let l = 0;
return e > n / 2 ? l = t * Math.ceil(Math.abs(o) / n) : l = t * Math.floor(Math.abs(o) / n), l;
}
function We(o, n, e) {
if (!o || !n)
return !1;
const t = R(o, e), l = R(n, e);
return t.left < l.left + l.width && t.left + t.width > l.left && t.top < l.top + l.height && t.top + t.height > l.top;
}
const R = (o, n) => {
var e = o.getBoundingClientRect();
return {
...e,
left: e.left / n,
top: e.top / n,
right: e.right / n,
bottom: e.bottom / n,
width: e.width / n,
height: e.height / n
};
}, we = (o) => typeof o == "function";
function et(o, n) {
let e = null, t = null;
const l = $(() => o.value.offsetParent || document.body), r = $(() => R(l.value, n.scaleRatio)), d = D({ x: [], y: [] }), s = () => {
n.markline && !we(n.markline) && (e || (e = document.querySelector(".es-drager-markline-x") || pe("x", l.value, n.color)), t || (t = document.querySelector(".es-drager-markline-y") || pe("y", l.value, n.color)));
}, u = (h = {}) => {
if (n.markline) {
if ((!e || !t) && s(), we(n.markline))
return n.markline(h);
h.left === null ? e.style.display = "none" : (e.style.left = h.left + "px", e.style.backgroundColor = n.color, e.style.display = "block"), h.top === null ? t.style.display = "none" : (t.style.top = h.top + "px", t.style.backgroundColor = n.color, t.style.display = "block");
}
}, v = () => {
const h = R(o.value, n.scaleRatio), f = Array.from(document.querySelectorAll(".es-drager"));
if (n.extraLines) {
const b = n.extraLines(h) || [];
f.push(...b);
}
const a = [], w = [], p = [];
for (let b = 0; b < f.length; b++) {
const k = f[b];
k.nodeType === 1 ? k !== o.value && a.push(R(k, n.scaleRatio)) : k.showTop || k.showTop === 0 ? p.push(k) : (k.showLeft || k.showLeft === 0) && w.push(k);
}
d.value = tt(a, h), d.value.x.push(...w), d.value.y.push(...p);
}, y = () => {
const h = {
top: null,
left: null,
diffX: 0,
diffY: 0
}, f = R(o.value, n.scaleRatio);
for (let a = 0; a < d.value.y.length; a++) {
const { top: w, showTop: p } = d.value.y[a];
if (Math.abs(w - f.top) < n.snapThreshold) {
h.diffY = w - f.top, h.top = p - r.value.top;
break;
}
}
for (let a = 0; a < d.value.x.length; a++) {
const { left: w, showLeft: p } = d.value.x[a];
if (Math.abs(w - f.left) < n.snapThreshold) {
h.diffX = w - f.left, h.left = p - r.value.left;
break;
}
}
return u(h), h;
}, i = () => {
u({ left: null, top: null });
}, M = (h) => {
if (!(!n.snap && !n.markline))
switch (h) {
case "drag-start":
v();
break;
case "drag":
return y();
case "drag-end":
i();
break;
}
};
return me(() => {
s();
}), {
marklineEmit: M
};
}
function pe(o = "x", n, e = "") {
const t = document.createElement("div");
return t.classList.add(`es-drager-markline-${o}`), t.style.position = "absolute", t.style.top = "0px", t.style.left = "0px", t.style.zIndex = "9999", t.style.backgroundColor = e, t.style.display = "none", o === "x" ? (t.style.height = "100%", t.style.width = "1px") : (t.style.height = "1px", t.style.width = "100%"), n.appendChild(t), t;
}
function tt(o, n) {
const e = { x: [], y: [] }, { width: t = 0, height: l = 0 } = n;
return o.forEach((r) => {
const {
top: d,
left: s,
width: u,
height: v
} = r;
e.y.push({ showTop: d, top: d }), e.y.push({ showTop: d, top: d - l }), e.y.push({
showTop: d + v / 2,
top: d + v / 2 - l / 2
}), e.y.push({ showTop: d + v, top: d + v }), e.y.push({ showTop: d + v, top: d + v - l }), e.x.push({ showLeft: s, left: s }), e.x.push({ showLeft: s + u, left: s + u }), e.x.push({
showLeft: s + u / 2,
left: s + u / 2 - t / 2
}), e.x.push({ showLeft: s + u, left: s + u - t }), e.x.push({ showLeft: s, left: s - t });
}), e;
}
function nt(o, n, e, {
getBoundary: t,
fixBoundary: l,
checkDragerCollision: r,
emit: d
}) {
let s = 0, u = 0;
return {
onKeydown: (i) => {
let { left: M, top: h } = n.value;
if (s || (s = M), u || (u = h), ["ArrowRight", "ArrowLeft"].includes(i.key)) {
const f = i.key === "ArrowRight";
let a = f ? 1 : -1;
o.snapToGrid && (a = f ? o.gridX : -o.gridX), M = M + a;
} else if (["ArrowUp", "ArrowDown"].includes(i.key)) {
const f = i.key === "ArrowDown";
let a = f ? 1 : -1;
o.snapToGrid && (a = f ? o.gridY : -o.gridY), h = h + a;
}
if (o.boundary) {
const [f, a, w, p] = t();
[M, h] = l(M, h, f, a, w, p);
}
n.value.left = M, n.value.top = h;
},
onKeyup: (i) => {
["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(i.key) && o.checkCollision && r() && (n.value.left = s, n.value.top = u), s = 0, u = 0;
}
};
}
function ot(o, n, e) {
const t = D(!1), l = D(!1), r = D({
width: n.width,
height: n.height,
left: n.left,
top: n.top,
angle: n.angle,
skew: n.skew
}), { marklineEmit: d } = et(o, n), s = /* @__PURE__ */ new Set();
function u(a) {
if (s.add(a.button), n.disabled)
return;
t.value = !0, l.value = !0;
let { clientX: w, clientY: p } = V(a);
const { left: b, top: k } = r.value;
let c = 0, g = 0, m = 0, X = 0;
n.boundary && ([c, g, m, X] = v()), d("drag-start"), e && e("drag-start", r.value), Z((S) => {
if (s.size > 1)
return;
const { clientX: Y, clientY: A } = V(S);
let _ = (Y - w) / n.scaleRatio + b, T = (A - p) / n.scaleRatio + k;
if (n.snapToGrid) {
let { left: B, top: q } = r.value;
const C = _ - B, N = T - q;
_ = B + Q(C, n.gridX), T = q + Q(N, n.gridY);
}
n.boundary && ([_, T] = y(_, T, c, g, m, X)), r.value.left = _, r.value.top = T, e && e("drag", r.value), De(() => {
const B = d("drag");
n.snap && (B.diffX && (r.value.left += B.diffX), B.diffY && (r.value.top += B.diffY));
});
}, (S) => {
n.checkCollision && i() && (r.value.top = k, r.value.left = b), s.clear(), t.value = !1, d("drag-end"), e && e("drag-end", r.value);
});
}
const v = () => {
let a = 0, w = 0;
const { left: p, top: b, height: k, width: c, angle: g } = r.value, m = o.value.offsetParent || document.body, X = R(
m,
n.scaleRatio
);
if (g) {
const Y = R(
o.value,
n.scaleRatio
);
a = Y.left - Math.floor(p - (Y.width - c) + X.left), w = Y.top - Math.floor(b - (Y.height - k) + X.top);
}
const E = X.width - c, S = X.height - k;
return [
a,
E - a,
w,
S - w,
X.width,
X.height
];
}, y = (a, w, p, b, k, c) => (a = a < p ? p : a, a = a > b ? b : a, w = w < k ? k : w, w = w > c ? c : w, [a, w]), i = () => {
const a = o.value.offsetParent || document.body, w = Array.from(a.children).filter((p) => p !== o.value && p.classList.contains("es-drager"));
for (let p = 0; p < w.length; p++) {
const b = w[p];
if (We(o.value, b, n.scaleRatio))
return !0;
}
}, M = () => {
l.value = !1;
}, { onKeydown: h, onKeyup: f } = nt(n, r, l, {
getBoundary: v,
fixBoundary: y,
checkDragerCollision: i,
emit: e
});
return G(l, (a) => {
a ? (e("focus", a), document.addEventListener("click", M, { once: !0 })) : e("blur", a), !n.disabledKeyEvent && (a ? (document.addEventListener("keydown", h), document.addEventListener("keyup", f)) : (document.removeEventListener("keydown", h), document.removeEventListener("keyup", f)));
}), me(() => {
if (o.value) {
if (!r.value.width && !r.value.height) {
const { width: a, height: w } = R(
o.value,
n.scaleRatio
);
r.value = {
...r.value,
width: a + 2,
height: w + 2
};
}
if (o.value.addEventListener("mousedown", u), o.value.addEventListener("touchstart", u, {
passive: !0
}), n.type === "text") {
const a = window.getComputedStyle(o.value);
r.value.height = parseInt(a.fontSize);
}
}
}), Re(() => {
document.removeEventListener("click", M), document.removeEventListener("keydown", h), document.removeEventListener("keyup", f);
}), {
isMousedown: t,
selected: l,
dragData: r,
getBoundary: v,
checkDragerCollision: i
};
}
const st = (o) => (ye("data-v-1b6d4877"), o = o(), ke(), o), lt = /* @__PURE__ */ st(() => /* @__PURE__ */ P("div", { class: "es-drager-rotate-handle" }, [
/* @__PURE__ */ P("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ P("path", {
fill: "currentColor",
d: "M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"
})
])
], -1)), it = /* @__PURE__ */ ae({
__name: "rotate",
props: {
modelValue: {
type: Number,
default: 0
},
element: {
type: Object
}
},
emits: [
"update:modelValue",
"rotate",
"rotate-start",
"rotate-end"
],
setup(o, { emit: n }) {
const e = o, t = n, l = D(null), r = $({
get: () => e.modelValue,
set: (s) => {
t("update:modelValue", s);
}
});
function d(s) {
if (!e.element)
return console.warn(
"[es-drager] rotate component need drag element property"
);
s.stopPropagation();
const { width: u, height: v, left: y, top: i } = e.element.getBoundingClientRect(), M = y + u / 2, h = i + v / 2;
t("rotate-start", r.value), Z(
(f) => {
const { clientX: a, clientY: w } = V(f), p = M - a, b = h - w, c = Math.atan2(b, p) * 180 / Math.PI - 90;
r.value = (c + 360) % 360, t("rotate", r.value);
},
() => {
t("rotate-end", r.value);
}
);
}
return (s, u) => (I(), J("div", {
ref_key: "rotateRef",
ref: l,
class: "es-drager-rotate",
onMousedown: le(d, ["stop"]),
onTouchstartPassive: d
}, [
K(s.$slots, "default", {}, () => [
lt
], !0)
], 544));
}
});
const be = (o, n) => {
const e = o.__vccOpts || o;
for (const [t, l] of n)
e[t] = l;
return e;
}, at = /* @__PURE__ */ be(it, [["__scopeId", "data-v-1b6d4877"]]), rt = (o) => (ye("data-v-68f41cf2"), o = o(), ke(), o), ut = /* @__PURE__ */ rt(() => /* @__PURE__ */ P("div", { class: "es-drager-skew-handle" }, [
/* @__PURE__ */ P("svg", {
viewBox: "0 0 1024 1024",
xmlns: "http://www.w3.org/2000/svg"
}, [
/* @__PURE__ */ P("path", {
fill: "currentColor",
d: "M870.679273 271.378618L520.946036 65.489455a16.384 16.384 0 0 0-16.644654 0L154.568145 271.378618a16.290909 16.290909 0 0 0 0 28.094837l349.733237 205.889163a16.384 16.384 0 0 0 16.644654 0L870.679273 299.473455a16.290909 16.290909 0 0 0 0-28.094837zM512.623709 452.673164L228.528873 285.426036l284.094836-167.247127 284.094836 167.247127z m-22.574545 71.68L135.521745 322.615855a16.346764 16.346764 0 0 0-24.482909 14.270836l2.485528 405.820509a16.309527 16.309527 0 0 0 8.257163 14.075345l354.518109 201.728a16.346764 16.346764 0 0 0 24.482909-14.270836l-2.485527-405.820509a16.300218 16.300218 0 0 0-8.247854-14.093964z m-326.888728 198.842181l-2.020072-328.927418 287.529891 163.607273 2.020072 328.936727z m725.336437-400.607418L533.969455 524.325236a16.300218 16.300218 0 0 0-8.247855 14.066037l-2.485527 405.820509a16.365382 16.365382 0 0 0 24.4736 14.270836l354.546036-201.728a16.309527 16.309527 0 0 0 8.257164-14.075345l2.485527-405.820509a16.374691 16.374691 0 0 0-24.501527-14.270837z m-41.890909 373.462109L605.016436 838.683927v-57.902545l241.626764-142.671127v57.902545z m0-98.434327L605.016436 740.2496v-57.911855l241.626764-142.63389v57.911854z m0-98.443636L605.016436 641.833891v-57.902546l241.626764-142.63389v57.902545z"
})
])
], -1)), ct = /* @__PURE__ */ ae({
__name: "skew",
props: {
modelValue: {
type: Array,
default: () => [0, 0]
},
element: {
type: Object
}
},
emits: [
"update:modelValue",
"skew",
"skew-start",
"skew-end"
],
setup(o, { emit: n }) {
const e = o, t = n, l = D(null), r = $({
get: () => e.modelValue,
set: (s) => {
t("update:modelValue", s);
}
});
function d(s) {
if (!e.element)
return console.warn("[es-drager] skew component need drag element property");
s.stopPropagation();
const { width: u, height: v } = e.element.getBoundingClientRect(), { clientX: y, clientY: i } = V(s), [M, h] = r.value;
t("skew-start", r.value), Z(
(f) => {
const { clientX: a, clientY: w } = V(f), p = y - a, b = i - w, k = M + p / u * 45, c = h + b / v * 45;
r.value = [+k.toFixed(2), +c.toFixed(2)], t("skew", r.value);
},
() => {
t("skew-end", r.value);
}
);
}
return (s, u) => (I(), J("div", {
ref_key: "skewRef",
ref: l,
class: "es-drager-skew",
onMousedown: d,
onTouchstartPassive: d
}, [
K(s.$slots, "default", {}, () => [
ut
], !0)
], 544));
}
});
const dt = /* @__PURE__ */ be(ct, [["__scopeId", "data-v-68f41cf2"]]), ft = ["data-side", "onMousedown", "onTouchstartPassive"], ht = /* @__PURE__ */ P("div", { class: "es-drager-dot-handle" }, null, -1), Le = /* @__PURE__ */ ae({
__name: "drager",
props: Ge,
emits: [
"change",
"drag",
"drag-start",
"drag-end",
"resize",
"resize-start",
"resize-end",
"rotate",
"rotate-start",
"rotate-end",
"skew",
"skew-start",
"skew-end",
"focus",
"blur"
],
setup(o, { emit: n }) {
const e = o, t = n, l = (c, ...g) => {
t(c, ...g);
}, r = D(null), { selected: d, dragData: s, isMousedown: u, getBoundary: v, checkDragerCollision: y } = ot(
r,
e,
l
), i = D(ve(0, e.resizeList)), M = $(() => e.resizable && !e.disabled), h = $(
() => e.rotatable && !e.disabled && d.value
), f = $(
() => e.skewable && !e.disabled && d.value
), a = $(() => e.type != "text" ? i.value : i.value.filter((c) => !["top", "bottom"].includes(c.side))), w = $(() => {
const { width: c, height: g, left: m, top: X, angle: E, skew: S } = s.value, Y = {};
c && (Y.width = j(c)), g && (e.type === "text" ? Y.fontSize = g + "px" : Y.height = j(g));
let A = [
`translateX(${j(m)})`,
`translateY(${j(X)})`,
`rotate(${E}deg)`
];
if (S && S.length) {
let _ = `skewX(${S[0]}deg)`;
_ += ` skewY(${S[1] ?? 0}deg)`, A.push(_);
}
return {
...Y,
// left: withUnit(left),
// top: withUnit(top),
zIndex: e.zIndex,
transform: A.join(" "),
"--es-drager-color": e.color
};
});
function p(c) {
r.value || (r.value = c.$el || c);
}
function b(c) {
i.value = ve(c, e.resizeList), l("rotate-end", s.value);
}
function k(c, g) {
if (e.disabled)
return;
g.stopPropagation();
const { clientX: m, clientY: X } = V(g), E = m, S = X, { width: Y, height: A, left: _, top: T } = s.value, B = _ + Y / 2, q = T + A / 2, C = {
width: Y,
height: A,
centerX: B,
centerY: q,
rotateAngle: s.value.angle
}, N = c.side;
let { minWidth: xe, minHeight: Me, aspectRatio: H, equalProportion: Xe } = e;
l("resize-start", s.value, N), e.boundary && v(), ["text", "image"].includes(e.type) && N.includes("-") && (H = C.width / C.height), Z((ue) => {
const { clientX: Ye, clientY: Ee } = V(ue);
let O = (Ye - E) / e.scaleRatio, U = (Ee - S) / e.scaleRatio;
e.snapToGrid && (O = Q(O, e.gridX), U = Q(U, e.gridY));
const Se = Math.atan2(U, O), ce = Je(O, U), _e = ue.shiftKey, de = Se - re(C.rotateAngle), ze = ce * Math.cos(de), Ae = ce * Math.sin(de), Te = (Xe || _e) && !H ? C.width / C.height : H, {
position: { centerX: fe, centerY: he },
size: { width: Be, height: Ce }
} = Qe(
N,
{ ...C, rotateAngle: C.rotateAngle },
ze,
Ae,
Te,
xe,
Me
), $e = Ze({
centerX: fe,
centerY: he,
width: Be,
height: Ce,
angle: s.value.angle
});
let F = {
...s.value,
...He($e, fe, he)
};
e.maxWidth > 0 && (F.width = Math.min(F.width, e.maxWidth)), e.maxHeight > 0 && (F.height = Math.min(F.height, e.maxHeight)), s.value = F, l("resize", s.value, N);
}, () => {
e.checkCollision && y() && (s.value = { ...s.value, width: Y, height: A, left: _, top: T }), l("resize-end", s.value, N);
});
}
return G(
() => [e.width, e.height, e.left, e.top, e.angle],
([c, g, m, X, E], [S, Y, A, _, T]) => {
c !== S && (s.value.width = c), g !== Y && (s.value.height = g), m !== A && (s.value.left = m), X !== _ && (s.value.top = X), E !== T && (s.value.angle = E);
}
), G(
() => s.value,
(c) => {
t("change", { ...c });
},
{ deep: !0 }
), G(
() => e.skew,
(c, g) => {
s.value.skew = c ?? [];
},
{
deep: !0
}
), G(
() => e.selected,
(c) => {
d.value = c;
},
{ immediate: !0 }
), (c, g) => (I(), W(Ne(c.tag), {
ref: p,
class: Ie([
"es-drager",
`es-drager-${c.type}`,
{ disabled: c.disabled, dragging: z(u), selected: z(d), border: c.border }
]),
style: ge(w.value),
onClick: g[7] || (g[7] = le(() => {
}, ["stop"])),
onMousedown: g[8] || (g[8] = le(() => {
}, ["stop"]))
}, {
default: ee(() => [
K(c.$slots, "default"),
M.value ? (I(!0), J(Pe, { key: 0 }, Ve(a.value, (m, X) => (I(), J("div", {
key: X,
class: "es-drager-dot",
"data-side": m.side,
style: ge({ ...m }),
onMousedown: (E) => k(m, E),
onTouchstartPassive: (E) => k(m, E)
}, [
K(c.$slots, "resize", Ke(Fe({ side: m.side })), () => [
ht
])
], 44, ft))), 128)) : te("", !0),
h.value ? (I(), W(at, {
key: 1,
modelValue: z(s).angle,
"onUpdate:modelValue": g[0] || (g[0] = (m) => z(s).angle = m),
element: r.value,
onRotate: g[1] || (g[1] = (m) => l("rotate", z(s))),
onRotateStart: g[2] || (g[2] = (m) => l("rotate-start", z(s))),
onRotateEnd: b
}, {
default: ee(() => [
K(c.$slots, "rotate")
]),
_: 3
}, 8, ["modelValue", "element"])) : te("", !0),
f.value ? (I(), W(dt, {
key: 2,
modelValue: z(s).skew,
"onUpdate:modelValue": g[3] || (g[3] = (m) => z(s).skew = m),
element: r.value,
onSkew: g[4] || (g[4] = (m) => l("skew", z(s))),
onSkewStart: g[5] || (g[5] = (m) => l("skew-start", z(s))),
onSkewEnd: g[6] || (g[6] = (m) => l("skew-end", z(s)))
}, {
default: ee(() => [
K(c.$slots, "skew")
]),
_: 3
}, 8, ["modelValue", "element"])) : te("", !0)
]),
_: 3
}, 40, ["class", "style"]));
}
});
const gt = (o) => {
o.component("es-drager", Le);
};
Le.install = gt;
export {
Ge as DragerProps,
Le as ESDrager,
Le as default,
gt as install
};