From bca494f7489dbc9eb739f60bc301955ddc5b25dc Mon Sep 17 00:00:00 2001 From: huangwantong <965002107@qq.com> Date: Wed, 13 Dec 2023 15:41:29 +0800 Subject: [PATCH] build: release v1.2.2 --- docs/package.json | 1 + lib/drager/src/use-key-event.d.ts | 10 + lib/index.es.js | 546 ++++++++++++++++-------------- lib/index.umd.js | 2 +- package-lock.json | 20 +- package.json | 2 +- 6 files changed, 308 insertions(+), 273 deletions(-) create mode 100644 lib/drager/src/use-key-event.d.ts diff --git a/docs/package.json b/docs/package.json index cff0741..bcf9d7f 100644 --- a/docs/package.json +++ b/docs/package.json @@ -14,6 +14,7 @@ "color": "^4.2.3", "echarts": "^5.4.2", "element-plus": "^2.3.8", + "es-drager": "^1.2.2", "highlight.js": "^11.8.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", diff --git a/lib/drager/src/use-key-event.d.ts b/lib/drager/src/use-key-event.d.ts new file mode 100644 index 0000000..5d695c7 --- /dev/null +++ b/lib/drager/src/use-key-event.d.ts @@ -0,0 +1,10 @@ +import { Ref, ExtractPropTypes } from 'vue'; +import { DragerProps, DragData } from './drager'; +type UtilFN = { + getBoundary: Function; + fixBoundary: Function; + checkDragerCollision: Function; + emit: Function; +}; +export declare function useKeyEvent(props: ExtractPropTypes, dragData: Ref, selected: Ref, { getBoundary, fixBoundary, checkDragerCollision, emit }: UtilFN): void; +export {}; diff --git a/lib/index.es.js b/lib/index.es.js index c05a4b8..92fe756 100644 --- a/lib/index.es.js +++ b/lib/index.es.js @@ -1,5 +1,5 @@ -import { ref as N, onMounted as Ye, watch as J, onBeforeUnmount as Re, defineComponent as fe, computed as K, openBlock as S, createElementBlock as Q, renderSlot as F, createElementVNode as O, createBlock as le, resolveDynamicComponent as Le, normalizeClass as ze, unref as x, normalizeStyle as ce, withModifiers as Be, withCtx as ue, Fragment as xe, renderList as Ce, normalizeProps as _e, guardReactiveProps as Ne, createCommentVNode as he } from "vue"; -const Se = { +import { watch as q, onBeforeUnmount as Xe, ref as _, onMounted as Ye, defineComponent as de, computed as G, openBlock as T, createElementBlock as J, renderSlot as K, createElementVNode as U, createBlock as re, resolveDynamicComponent as ze, normalizeClass as De, unref as B, normalizeStyle as le, withModifiers as Be, withCtx as ce, Fragment as xe, renderList as Ce, normalizeProps as _e, guardReactiveProps as Ne, createCommentVNode as ue } from "vue"; +const Te = { tag: { type: [String, Object], default: "div" @@ -98,26 +98,26 @@ const Se = { type: Boolean } }; -function H(o, n) { +function Z(n, o) { 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); + o && o(t), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", e), document.removeEventListener("mouseleave", e), document.removeEventListener("touchmove", n), document.removeEventListener("touchend", e); }; - document.addEventListener("mousemove", o), document.addEventListener("mouseup", e), document.addEventListener("mouseleave", e), document.addEventListener("touchmove", o), document.addEventListener("touchend", e); + document.addEventListener("mousemove", n), document.addEventListener("mouseup", e), document.addEventListener("mouseleave", e), document.addEventListener("touchmove", n), document.addEventListener("touchend", e); } -function T(o) { - let n = 0, e = 0; - if (Te(o)) { - const t = o.targetTouches[0]; - n = t.pageX, e = t.pageY; +function S(n) { + let o = 0, e = 0; + if (Se(n)) { + const t = n.targetTouches[0]; + o = t.pageX, e = t.pageY; } else - n = o.clientX, e = o.clientY; - return { clientX: n, clientY: e }; + o = n.clientX, e = n.clientY; + return { clientX: o, clientY: e }; } -function Te(o) { - const n = Object.prototype.toString.call(o); - return n.substring(8, n.length - 1) === "TouchEvent"; +function Se(n) { + const o = Object.prototype.toString.call(n); + return o.substring(8, o.length - 1) === "TouchEvent"; } -const G = (o = 0) => parseInt(o + "") + "px", q = { +const V = (n = 0) => parseInt(n + "") + "px", j = { n: "top", s: "bottom", e: "right", @@ -126,7 +126,7 @@ const G = (o = 0) => parseInt(o + "") + "px", q = { nw: "top-left", se: "bottom-right", sw: "bottom-left" -}, Z = ["n", "ne", "e", "se", "s", "sw", "w", "nw"], Pe = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }, Ie = { +}, Q = ["n", "ne", "e", "se", "s", "sw", "w", "nw"], Pe = { n: 0, ne: 1, e: 2, se: 3, s: 4, sw: 5, w: 6, nw: 7 }, Ie = { 0: 0, 1: 1, 2: 2, @@ -139,236 +139,256 @@ const G = (o = 0) => parseInt(o + "") + "px", q = { 9: 6, 10: 7, 11: 8 -}, $e = (o, n) => { - const e = Ie[Math.floor(o / 30)], s = (Pe[n] + e) % 8; - return Z[s]; -}, de = (o = 0, n) => { +}, $e = (n, o) => { + const e = Ie[Math.floor(n / 30)], s = (Pe[o] + e) % 8; + return Q[s]; +}, he = (n = 0, o) => { let e = []; - for (let t = 0; t < Z.length; t++) { - const s = Z[t], [c, r] = q[s].split("-"), d = $e(o, s), u = { - [c]: "0%", - cursor: d + "-resize", - side: q[s] + for (let t = 0; t < Q.length; t++) { + const s = Q[t], [h, l] = j[s].split("-"), u = $e(n, s), c = { + [h]: "0%", + cursor: u + "-resize", + side: j[s] }; - if (r) - u[r] = "0%"; + if (l) + c[l] = "0%"; else { - const w = ["top", "bottom"].includes(c) ? "left" : "top"; - u[w] = "50%"; + const m = ["top", "bottom"].includes(h) ? "left" : "top"; + c[m] = "50%"; } - n ? n.includes(q[s]) && e.push(u) : e.push(u); + o ? o.includes(j[s]) && e.push(c) : e.push(c); } return e; -}, W = (o) => o * Math.PI / 180, Ve = (o, n) => Math.sqrt(o * o + n * n), M = (o) => Math.cos(W(o)), k = (o) => Math.sin(W(o)), Ge = (o, n, e, t, s, c, r) => { - let { width: d, height: u, centerX: w, centerY: p, rotateAngle: l } = n; - const Y = d < 0 ? -1 : 1, f = u < 0 ? -1 : 1; - switch (d = Math.abs(d), u = Math.abs(u), o) { +}, H = (n) => n * Math.PI / 180, Ve = (n, o) => Math.sqrt(n * n + o * o), y = (n) => Math.cos(H(n)), b = (n) => Math.sin(H(n)), Ge = (n, o, e, t, s, h, l) => { + let { width: u, height: c, centerX: m, centerY: p, rotateAngle: i } = o; + const f = u < 0 ? -1 : 1, g = c < 0 ? -1 : 1; + switch (u = Math.abs(u), c = Math.abs(c), n) { case "right": { - const i = _(d, e, c); - d = i.width, e = i.deltaW, s ? (t = e / s, u = d / s, w += e / 2 * M(l) - t / 2 * k(l), p += e / 2 * k(l) + t / 2 * M(l)) : (w += e / 2 * M(l), p += e / 2 * k(l)); + const r = C(u, e, h); + u = r.width, e = r.deltaW, s ? (t = e / s, c = u / s, m += e / 2 * y(i) - t / 2 * b(i), p += e / 2 * b(i) + t / 2 * y(i)) : (m += e / 2 * y(i), p += e / 2 * b(i)); break; } case "top-right": { t = -t; - const i = _(d, e, c); - d = i.width, e = i.deltaW; - const h = C(u, t, r); - u = h.height, t = h.deltaH, s && (e = t * s, d = u * s), w += e / 2 * M(l) + t / 2 * k(l), p += e / 2 * k(l) - t / 2 * M(l); + const r = C(u, e, h); + u = r.width, e = r.deltaW; + const d = x(c, t, l); + c = d.height, t = d.deltaH, s && (e = t * s, u = c * s), m += e / 2 * y(i) + t / 2 * b(i), p += e / 2 * b(i) - t / 2 * y(i); break; } case "bottom-right": { - const i = _(d, e, c); - d = i.width, e = i.deltaW; - const h = C(u, t, r); - u = h.height, t = h.deltaH, s && (e = t * s, d = u * s), w += e / 2 * M(l) - t / 2 * k(l), p += e / 2 * k(l) + t / 2 * M(l); + const r = C(u, e, h); + u = r.width, e = r.deltaW; + const d = x(c, t, l); + c = d.height, t = d.deltaH, s && (e = t * s, u = c * s), m += e / 2 * y(i) - t / 2 * b(i), p += e / 2 * b(i) + t / 2 * y(i); break; } case "bottom": { - const i = C(u, t, r); - u = i.height, t = i.deltaH, s ? (e = t * s, d = u * s, w += e / 2 * M(l) - t / 2 * k(l), p += e / 2 * k(l) + t / 2 * M(l)) : (w -= t / 2 * k(l), p += t / 2 * M(l)); + const r = x(c, t, l); + c = r.height, t = r.deltaH, s ? (e = t * s, u = c * s, m += e / 2 * y(i) - t / 2 * b(i), p += e / 2 * b(i) + t / 2 * y(i)) : (m -= t / 2 * b(i), p += t / 2 * y(i)); break; } case "bottom-left": { e = -e; - const i = _(d, e, c); - d = i.width, e = i.deltaW; - const h = C(u, t, r); - u = h.height, t = h.deltaH, s && (u = d / s, t = e / s), w -= e / 2 * M(l) + t / 2 * k(l), p -= e / 2 * k(l) - t / 2 * M(l); + const r = C(u, e, h); + u = r.width, e = r.deltaW; + const d = x(c, t, l); + c = d.height, t = d.deltaH, s && (c = u / s, t = e / s), m -= e / 2 * y(i) + t / 2 * b(i), p -= e / 2 * b(i) - t / 2 * y(i); break; } case "left": { e = -e; - const i = _(d, e, c); - d = i.width, e = i.deltaW, s ? (u = d / s, t = e / s, w -= e / 2 * M(l) + t / 2 * k(l), p -= e / 2 * k(l) - t / 2 * M(l)) : (w -= e / 2 * M(l), p -= e / 2 * k(l)); + const r = C(u, e, h); + u = r.width, e = r.deltaW, s ? (c = u / s, t = e / s, m -= e / 2 * y(i) + t / 2 * b(i), p -= e / 2 * b(i) - t / 2 * y(i)) : (m -= e / 2 * y(i), p -= e / 2 * b(i)); break; } case "top-left": { e = -e, t = -t; - const i = _(d, e, c); - d = i.width, e = i.deltaW; - const h = C(u, t, r); - u = h.height, t = h.deltaH, s && (d = u * s, e = t * s), w -= e / 2 * M(l) - t / 2 * k(l), p -= e / 2 * k(l) + t / 2 * M(l); + const r = C(u, e, h); + u = r.width, e = r.deltaW; + const d = x(c, t, l); + c = d.height, t = d.deltaH, s && (u = c * s, e = t * s), m -= e / 2 * y(i) - t / 2 * b(i), p -= e / 2 * b(i) + t / 2 * y(i); break; } case "top": { t = -t; - const i = C(u, t, r); - u = i.height, t = i.deltaH, s ? (d = u * s, e = t * s, w += e / 2 * M(l) + t / 2 * k(l), p += e / 2 * k(l) - t / 2 * M(l)) : (w += t / 2 * k(l), p -= t / 2 * M(l)); + const r = x(c, t, l); + c = r.height, t = r.deltaH, s ? (u = c * s, e = t * s, m += e / 2 * y(i) + t / 2 * b(i), p += e / 2 * b(i) - t / 2 * y(i)) : (m += t / 2 * b(i), p -= t / 2 * y(i)); break; } } return { position: { - centerX: w, + centerX: m, centerY: p }, size: { - width: d * Y, - height: u * f + width: u * f, + height: c * g } }; -}, C = (o, n, e) => { - const t = o + n; - return t > e ? o = t : (n = e - o, o = e), { height: o, deltaH: n }; -}, _ = (o, n, e) => { - const t = o + n; - return t > e ? o = t : (n = e - o, o = e), { width: o, deltaW: n }; +}, x = (n, o, e) => { + const t = n + o; + return t > e ? n = t : (o = e - n, n = e), { height: n, deltaH: o }; +}, C = (n, o, e) => { + const t = n + o; + return t > e ? n = t : (o = e - n, n = e), { width: n, deltaW: o }; }, Ke = ({ - centerX: o, - centerY: n, + centerX: n, + centerY: o, width: e, height: t, angle: s }) => ({ - top: n - t / 2, - left: o - e / 2, + top: o - t / 2, + left: n - e / 2, width: e, height: t, angle: s -}), Fe = (o, n, e) => { - const { width: t, height: s } = o; +}), Ue = (n, o, e) => { + const { width: t, height: s } = n; return { width: Math.abs(t), height: Math.abs(s), - left: n - Math.abs(t) / 2, + left: o - Math.abs(t) / 2, top: e - Math.abs(s) / 2 }; }; -function U(o, n) { - const e = Math.abs(o) % n, t = o > 0 ? n : -n; +function F(n, o) { + const e = Math.abs(n) % o, t = n > 0 ? o : -o; let s = 0; - return e > n / 2 ? s = t * Math.ceil(Math.abs(o) / n) : s = t * Math.floor(Math.abs(o) / n), s; + return e > o / 2 ? s = t * Math.ceil(Math.abs(n) / o) : s = t * Math.floor(Math.abs(n) / o), s; } -function Oe(o, n) { - if (!o || !n) +function Fe(n, o) { + if (!n || !o) return !1; - const e = o.getBoundingClientRect(), t = n.getBoundingClientRect(); + const e = n.getBoundingClientRect(), t = o.getBoundingClientRect(); return e.left < t.left + t.width && e.left + e.width > t.left && e.top < t.top + t.height && e.top + e.height > t.top; } -function Ue(o, n, e) { - const t = N(!1), s = N(!1), c = N({ - width: n.width, - height: n.height, - left: n.left, - top: n.top, - angle: n.angle - }), r = /* @__PURE__ */ new Set(); - function d(f) { - if (r.add(f.button), n.disabled) +function Oe(n, o, e, { + getBoundary: t, + fixBoundary: s, + checkDragerCollision: h, + emit: l +}) { + let u = 0, c = 0; + const m = (i) => { + let { left: f, top: g } = o.value; + if (u || (u = f), c || (c = g), ["ArrowRight", "ArrowLeft"].includes(i.key)) { + const r = i.key === "ArrowRight"; + let d = r ? 1 : -1; + n.snapToGrid && (d = r ? n.gridX : -n.gridX), f = f + d; + } else if (["ArrowUp", "ArrowDown"].includes(i.key)) { + const r = i.key === "ArrowDown"; + let d = r ? 1 : -1; + n.snapToGrid && (d = r ? n.gridY : -n.gridY), g = g + d; + } + if (n.boundary) { + const [r, d, M, A] = t(); + [f, g] = s(f, g, r, d, M, A); + } + o.value.left = f, o.value.top = g, l("change", { ...o.value }); + }, p = (i) => { + ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(i.key) && n.checkCollision && h() && (o.value.left = u, o.value.top = c), u = 0, c = 0; + }; + q(e, (i) => { + n.disabledKeyEvent || (i ? (document.addEventListener("keydown", m), document.addEventListener("keyup", p)) : (document.removeEventListener("keydown", m), document.removeEventListener("keyup", p))); + }), Xe(() => { + document.removeEventListener("keydown", m), document.removeEventListener("keyup", p); + }); +} +function je(n, o, e) { + const t = _(!1), s = _(!1), h = _({ + width: o.width, + height: o.height, + left: o.left, + top: o.top, + angle: o.angle + }), l = /* @__PURE__ */ new Set(); + function u(f) { + if (l.add(f.button), o.disabled) return; t.value = !0, s.value = !0; - let { clientX: i, clientY: h } = T(f); - const { left: m, top: y } = c.value; - let a = 0, g = 0, v = 0, b = 0; - n.boundary && ([a, g, v, b] = u()), e && e("drag-start", c.value), H((D) => { - if (r.size > 1) + let { clientX: g, clientY: r } = S(f); + const { left: d, top: M } = h.value; + let A = 0, a = 0, w = 0, v = 0; + o.boundary && ([A, a, w, v] = c()), e && e("drag-start", h.value), Z((k) => { + if (l.size > 1) return; - const { clientX: X, clientY: R } = T(D); - let A = (X - i) / n.scaleRatio + m, L = (R - h) / n.scaleRatio + y; - if (n.snapToGrid) { - let { left: P, top: I } = c.value; - const z = A - P, j = L - I; - A = P + U(z, n.gridX), L = I + U(j, n.gridY); + const { clientX: E, clientY: D } = S(k); + let R = (E - g) / o.scaleRatio + d, X = (D - r) / o.scaleRatio + M; + if (o.snapToGrid) { + let { left: N, top: P } = h.value; + const O = R - N, Y = X - P; + R = N + F(O, o.gridX), X = P + F(Y, o.gridY); } - n.boundary && ([A, L] = w(A, L, a, g, v, b)), c.value.left = A, c.value.top = L, e && e("drag", c.value); - }, (D) => { - n.checkCollision && p() && (c.value.top = y, c.value.left = m), r.clear(), t.value = !1, document.addEventListener("click", l, { once: !0 }), e && e("drag-end", c.value); + o.boundary && ([R, X] = m(R, X, A, a, w, v)), h.value.left = R, h.value.top = X, e && e("drag", h.value); + }, (k) => { + o.checkCollision && p() && (h.value.top = M, h.value.left = d), l.clear(), t.value = !1, document.addEventListener("click", i, { once: !0 }), e && e("drag-end", h.value); }); } - const u = () => { - let f = 0, i = 0; - const { left: h, top: m, height: y, width: a, angle: g } = c.value, b = (o.value.parentElement || document.body).getBoundingClientRect(); - if (g && n.scaleRatio === 1) { - const X = o.value.getBoundingClientRect(); - f = Math.abs(X.left - (h + b.left)), i = Math.abs(X.top - (m + b.top)); + const c = () => { + let f = 0, g = 0; + const { left: r, top: d, height: M, width: A, angle: a } = h.value, v = (n.value.parentElement || document.body).getBoundingClientRect(); + if (a && o.scaleRatio === 1) { + const E = n.value.getBoundingClientRect(); + f = Math.abs(E.left - (r + v.left)), g = Math.abs(E.top - (d + v.top)); } - const E = b.width / n.scaleRatio - a, D = b.height / n.scaleRatio - y; - return [f, E - f, i, D - i, b.width / n.scaleRatio, b.height / n.scaleRatio]; - }, w = (f, i, h, m, y, a) => (f = f < h ? h : f, f = f > m ? m : f, i = i < y ? y : i, i = i > a ? a : i, [f, i]), p = () => { - const f = o.value.parentElement || document.body, i = Array.from(f.children).filter((h) => h !== o.value && h.classList.contains("es-drager")); - for (let h = 0; h < i.length; h++) { - const m = i[h]; - if (Oe(o.value, m)) + const L = v.width / o.scaleRatio - A, k = v.height / o.scaleRatio - M; + return [f, L - f, g, k - g, v.width / o.scaleRatio, v.height / o.scaleRatio]; + }, m = (f, g, r, d, M, A) => (f = f < r ? r : f, f = f > d ? d : f, g = g < M ? M : g, g = g > A ? A : g, [f, g]), p = () => { + const f = n.value.parentElement || document.body, g = Array.from(f.children).filter((r) => r !== n.value && r.classList.contains("es-drager")); + for (let r = 0; r < g.length; r++) { + const d = g[r]; + if (Fe(n.value, d)) return !0; } - }, l = () => { + }, i = () => { s.value = !1; - }, Y = (f) => { - if (t.value) - return; - let { left: i, top: h } = c.value; - if (["ArrowRight", "ArrowLeft"].includes(f.key)) { - const m = f.key === "ArrowRight"; - let y = m ? 1 : -1; - n.snapToGrid && (y = m ? n.gridX : -n.gridX), i = i + y; - } else if (["ArrowUp", "ArrowDown"].includes(f.key)) { - const m = f.key === "ArrowDown"; - let y = m ? 1 : -1; - n.snapToGrid && (y = m ? n.gridY : -n.gridY), h = h + y; - } - if (n.boundary) { - const [m, y, a, g] = u(); - [i, h] = w(i, h, m, y, a, g); - } - c.value.left = i, c.value.top = h, e("change", { ...c.value }); }; - return Ye(() => { - if (o.value) { - if (!c.value.width && !c.value.height) { - const { width: f, height: i } = o.value.getBoundingClientRect(); - c.value = { - ...c.value, + return Oe( + o, + h, + s, + { + getBoundary: c, + fixBoundary: m, + checkDragerCollision: p, + emit: e + } + ), Ye(() => { + if (n.value) { + if (!h.value.width && !h.value.height) { + const { width: f, height: g } = n.value.getBoundingClientRect(); + h.value = { + ...h.value, width: f || 100, - height: i || 100 - }, e("change", { ...c.value }); + height: g || 100 + }, e("change", { ...h.value }); } - o.value.addEventListener("mousedown", d), o.value.addEventListener("touchstart", d, { + n.value.addEventListener("mousedown", u), n.value.addEventListener("touchstart", u, { passive: !0 }); } - }), J(s, (f) => { - n.disabledKeyEvent || (f ? document.addEventListener("keydown", Y) : document.removeEventListener("keydown", Y)); - }), Re(() => { - document.removeEventListener("keydown", Y); }), { isMousedown: t, selected: s, - dragData: c, - getBoundary: u, + dragData: h, + getBoundary: c, checkDragerCollision: p }; } -const je = /* @__PURE__ */ O("div", { class: "es-drager-rotate-handle" }, [ - /* @__PURE__ */ O("svg", { +const qe = /* @__PURE__ */ U("div", { class: "es-drager-rotate-handle" }, [ + /* @__PURE__ */ U("svg", { viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg" }, [ - /* @__PURE__ */ O("path", { + /* @__PURE__ */ U("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), qe = /* @__PURE__ */ fe({ +], -1), Je = /* @__PURE__ */ de({ __name: "rotate", props: { modelValue: { @@ -385,46 +405,46 @@ const je = /* @__PURE__ */ O("div", { class: "es-drager-rotate-handle" }, [ "rotate-start", "rotate-end" ], - setup(o, { emit: n }) { - const e = o, t = N(null), s = K({ + setup(n, { emit: o }) { + const e = n, t = _(null), s = G({ get: () => e.modelValue, - set: (r) => { - n("update:modelValue", r); + set: (l) => { + o("update:modelValue", l); } }); - function c(r) { + function h(l) { if (!e.element) return console.warn( "[es-drager] rotate component need drag element property" ); - r.stopPropagation(); - const { width: d, height: u, left: w, top: p } = e.element.getBoundingClientRect(), l = w + d / 2, Y = p + u / 2; - n("rotate-start", s.value), H( - (f) => { - const { clientX: i, clientY: h } = T(f), m = l - i, y = Y - h, g = Math.atan2(y, m) * 180 / Math.PI - 90; - s.value = (g + 360) % 360, n("rotate", s.value); + l.stopPropagation(); + const { width: u, height: c, left: m, top: p } = e.element.getBoundingClientRect(), i = m + u / 2, f = p + c / 2; + o("rotate-start", s.value), Z( + (g) => { + const { clientX: r, clientY: d } = S(g), M = i - r, A = f - d, w = Math.atan2(A, M) * 180 / Math.PI - 90; + s.value = (w + 360) % 360, o("rotate", s.value); }, () => { - n("rotate-end", s.value); + o("rotate-end", s.value); } ); } - return (r, d) => (S(), Q("div", { + return (l, u) => (T(), J("div", { ref_key: "rotateRef", ref: t, class: "es-drager-rotate", - onMousedown: c, - onTouchstartPassive: c + onMousedown: h, + onTouchstartPassive: h }, [ - F(r.$slots, "default", {}, () => [ - je + K(l.$slots, "default", {}, () => [ + qe ]) ], 544)); } }); -const Je = ["data-side", "onMousedown", "onTouchstartPassive"], Qe = /* @__PURE__ */ O("div", { class: "es-drager-dot-handle" }, null, -1), ge = /* @__PURE__ */ fe({ +const Qe = ["data-side", "onMousedown", "onTouchstartPassive"], Ze = /* @__PURE__ */ U("div", { class: "es-drager-dot-handle" }, null, -1), fe = /* @__PURE__ */ de({ __name: "drager", - props: Se, + props: Te, emits: [ "change", "drag", @@ -437,147 +457,147 @@ const Je = ["data-side", "onMousedown", "onTouchstartPassive"], Qe = /* @__PURE_ "rotate-start", "rotate-end" ], - setup(o, { emit: n }) { - const e = o, t = (a, ...g) => { - n(a, ...g), n("change", ...g); - }, s = N(null), { selected: c, dragData: r, isMousedown: d, getBoundary: u, checkDragerCollision: w } = Ue( + setup(n, { emit: o }) { + const e = n, t = (a, ...w) => { + o(a, ...w), o("change", ...w); + }, s = _(null), { selected: h, dragData: l, isMousedown: u, getBoundary: c, checkDragerCollision: m } = je( s, e, t - ), p = N(de(0, e.resizeList)), l = K(() => e.resizable && !e.disabled), Y = K( - () => e.rotatable && !e.disabled && c.value - ), f = K(() => { - const { width: a, height: g, left: v, top: b, angle: E } = r.value, D = {}; - return a && (D.width = G(a)), g && (D.height = G(g)), { - ...D, - left: G(v), - top: G(b), + ), p = _(he(0, e.resizeList)), i = G(() => e.resizable && !e.disabled), f = G( + () => e.rotatable && !e.disabled && h.value + ), g = G(() => { + const { width: a, height: w, left: v, top: L, angle: k } = l.value, E = {}; + return a && (E.width = V(a)), w && (E.height = V(w)), { + ...E, + left: V(v), + top: V(L), zIndex: e.zIndex, - transform: `rotate(${E}deg)`, + transform: `rotate(${k}deg)`, "--es-drager-color": e.color }; }); - function i(a) { + function r(a) { s.value || (s.value = a.$el || a); } - function h(a) { - p.value = de(a, e.resizeList), t("rotate-end", r.value); + function d(a) { + p.value = he(a, e.resizeList), t("rotate-end", l.value); } - function m(a, g) { + function M(a, w) { if (e.disabled) return; - g.stopPropagation(); - const { clientX: v, clientY: b } = T(g), E = v, D = b, { width: X, height: R, left: A, top: L } = r.value, P = A + X / 2, I = L + R / 2, z = { - width: X, + w.stopPropagation(); + const { clientX: v, clientY: L } = S(w), k = v, E = L, { width: D, height: R, left: X, top: N } = l.value, P = X + D / 2, O = N + R / 2, Y = { + width: D, height: R, centerX: P, - centerY: I, - rotateAngle: r.value.angle - }, j = a.side, { minWidth: ve, minHeight: we, aspectRatio: ee, equalProportion: me } = e; - t("resize-start", r.value); - let te = []; - e.boundary && (te = u()), H((ne) => { - const { clientX: pe, clientY: ye } = T(ne); - let $ = (pe - E) / e.scaleRatio, V = (ye - D) / e.scaleRatio; - e.snapToGrid && ($ = U($, e.gridX), V = U(V, e.gridY)); - const be = Math.atan2(V, $), oe = Ve($, V), Me = ne.shiftKey, se = be - W(z.rotateAngle), ke = oe * Math.cos(se), Ee = oe * Math.sin(se), ae = (me || Me) && !ee ? z.width / z.height : ee, { - position: { centerX: ie, centerY: re }, - size: { width: De, height: Ae } + centerY: O, + rotateAngle: l.value.angle + }, ge = a.side, { minWidth: ve, minHeight: we, aspectRatio: W, equalProportion: me } = e; + t("resize-start", l.value); + let ee = []; + e.boundary && (ee = c()), Z((te) => { + const { clientX: pe, clientY: ye } = S(te); + let I = (pe - k) / e.scaleRatio, $ = (ye - E) / e.scaleRatio; + e.snapToGrid && (I = F(I, e.gridX), $ = F($, e.gridY)); + const be = Math.atan2($, I), ne = Ve(I, $), Me = te.shiftKey, oe = be - H(Y.rotateAngle), ke = ne * Math.cos(oe), Ee = ne * Math.sin(oe), se = (me || Me) && !W ? Y.width / Y.height : W, { + position: { centerX: ie, centerY: ae }, + size: { width: Ae, height: Le } } = Ge( - j, - { ...z, rotateAngle: z.rotateAngle }, + ge, + { ...Y, rotateAngle: Y.rotateAngle }, ke, Ee, - ae, + se, ve, we - ), Xe = Ke({ + ), Re = Ke({ centerX: ie, - centerY: re, - width: De, - height: Ae, - angle: r.value.angle + centerY: ae, + width: Ae, + height: Le, + angle: l.value.angle }); - let B = { - ...r.value, - ...Fe(Xe, ie, re) + let z = { + ...l.value, + ...Ue(Re, ie, ae) }; - e.maxWidth > 0 && (B.width = Math.min(B.width, e.maxWidth)), e.maxHeight > 0 && (B.height = Math.min(B.height, e.maxHeight)), e.boundary && (B = y(B, te, ae)), r.value = B, t("resize", r.value); + e.maxWidth > 0 && (z.width = Math.min(z.width, e.maxWidth)), e.maxHeight > 0 && (z.height = Math.min(z.height, e.maxHeight)), e.boundary && (z = A(z, ee, se)), l.value = z, t("resize", l.value); }, () => { - e.checkCollision && w() && (r.value = { ...r.value, width: X, height: R, left: A, top: L }), t("resize-end", r.value); + e.checkCollision && m() && (l.value = { ...l.value, width: D, height: R, left: X, top: N }), t("resize-end", l.value); }); } - function y(a, g, v) { - const [b, E, D, X, R, A] = g; - return a.left < b && (a.left = b, a.width = r.value.width, v && (a.height = r.value.height)), a.left + a.width > R && (a.left = r.value.left, a.width = R - a.left, v && (a.height = r.value.height)), a.top < D && (a.top = D, a.height = r.value.height, v && (a.width = r.value.width)), a.top + a.height > A && (a.top = r.value.top, a.height = A - a.top, v && (a.width = r.value.width)), a; + function A(a, w, v) { + const [L, k, E, D, R, X] = w; + return a.left < L && (a.left = L, a.width = l.value.width, v && (a.height = l.value.height)), a.left + a.width > R && (a.left = l.value.left, a.width = R - a.left, v && (a.height = l.value.height)), a.top < E && (a.top = E, a.height = l.value.height, v && (a.width = l.value.width)), a.top + a.height > X && (a.top = l.value.top, a.height = X - a.top, v && (a.width = l.value.width)), a; } - return J( + return q( () => [e.width, e.height, e.left, e.top, e.angle], - ([a, g, v, b, E]) => { - r.value = { - ...r.value, + ([a, w, v, L, k]) => { + l.value = { + ...l.value, width: a, - height: g, + height: w, left: v, - top: b, - angle: E + top: L, + angle: k }; } - ), J( + ), q( () => e.selected, (a) => { - c.value = a; + h.value = a; }, { immediate: !0 } - ), (a, g) => (S(), le(Le(a.tag), { - ref: i, - class: ze([ + ), (a, w) => (T(), re(ze(a.tag), { + ref: r, + class: De([ "es-drager", - { disabled: a.disabled, dragging: x(d), selected: x(c), border: a.border } + { disabled: a.disabled, dragging: B(u), selected: B(h), border: a.border } ]), - style: ce(f.value), - onClick: g[3] || (g[3] = Be(() => { + style: le(g.value), + onClick: w[3] || (w[3] = Be(() => { }, ["stop"])) }, { - default: ue(() => [ - F(a.$slots, "default"), - l.value ? (S(!0), Q(xe, { key: 0 }, Ce(p.value, (v, b) => (S(), Q("div", { - key: b, + default: ce(() => [ + K(a.$slots, "default"), + i.value ? (T(!0), J(xe, { key: 0 }, Ce(p.value, (v, L) => (T(), J("div", { + key: L, class: "es-drager-dot", "data-side": v.side, - style: ce({ ...v }), - onMousedown: (E) => m(v, E), - onTouchstartPassive: (E) => m(v, E) + style: le({ ...v }), + onMousedown: (k) => M(v, k), + onTouchstartPassive: (k) => M(v, k) }, [ - F(a.$slots, "resize", _e(Ne({ side: v.side })), () => [ - Qe + K(a.$slots, "resize", _e(Ne({ side: v.side })), () => [ + Ze ]) - ], 44, Je))), 128)) : he("", !0), - Y.value ? (S(), le(qe, { + ], 44, Qe))), 128)) : ue("", !0), + f.value ? (T(), re(Je, { key: 1, - modelValue: x(r).angle, - "onUpdate:modelValue": g[0] || (g[0] = (v) => x(r).angle = v), + modelValue: B(l).angle, + "onUpdate:modelValue": w[0] || (w[0] = (v) => B(l).angle = v), element: s.value, - onRotate: g[1] || (g[1] = (v) => t("rotate", x(r))), - onRotateStart: g[2] || (g[2] = (v) => t("rotate-start", x(r))), - onRotateEnd: h + onRotate: w[1] || (w[1] = (v) => t("rotate", B(l))), + onRotateStart: w[2] || (w[2] = (v) => t("rotate-start", B(l))), + onRotateEnd: d }, { - default: ue(() => [ - F(a.$slots, "rotate") + default: ce(() => [ + K(a.$slots, "rotate") ]), _: 3 - }, 8, ["modelValue", "element"])) : he("", !0) + }, 8, ["modelValue", "element"])) : ue("", !0) ]), _: 3 }, 8, ["class", "style"])); } }); -const Ze = (o) => { - o.component("es-drager", ge); +const He = (n) => { + n.component("es-drager", fe); }; -ge.install = Ze; +fe.install = He; export { - ge as ESDrager, - ge as default, - Ze as install + fe as ESDrager, + fe as default, + He as install }; diff --git a/lib/index.umd.js b/lib/index.umd.js index a20b9b2..eaa42bb 100644 --- a/lib/index.umd.js +++ b/lib/index.umd.js @@ -1 +1 @@ -(function(Y,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(Y=typeof globalThis<"u"?globalThis:Y||self,s(Y.ESDrager={},Y.Vue))})(this,function(Y,s){"use strict";const ie={tag:{type:[String,Object],default:"div"},resizable:{type:Boolean,default:!0},rotatable:{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},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},equalProportion:{type:Boolean},checkCollision:{type:Boolean}};function K(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 S(o){let n=0,e=0;if(ae(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 ae(o){const n=Object.prototype.toString.call(o);return n.substring(8,n.length-1)==="TouchEvent"}const T=(o=0)=>parseInt(o+"")+"px",O={n:"top",s:"bottom",e:"right",w:"left",ne:"top-right",nw:"top-left",se:"bottom-right",sw:"bottom-left"},q=["n","ne","e","se","s","sw","w","nw"],re={n:0,ne:1,e:2,se:3,s:4,sw:5,w:6,nw:7},le={0:0,1:1,2:2,3:2,4:3,5:4,6:4,7:5,8:6,9:6,10:7,11:8},ce=(o,n)=>{const e=le[Math.floor(o/30)],i=(re[n]+e)%8;return q[i]},J=(o=0,n)=>{let e=[];for(let t=0;to*Math.PI/180,ue=(o,n)=>Math.sqrt(o*o+n*n),v=o=>Math.cos(F(o)),M=o=>Math.sin(F(o)),de=(o,n,e,t,i,u,l)=>{let{width:f,height:d,centerX:w,centerY:b,rotateAngle:c}=n;const R=f<0?-1:1,g=d<0?-1:1;switch(f=Math.abs(f),d=Math.abs(d),o){case"right":{const r=_(f,e,u);f=r.width,e=r.deltaW,i?(t=e/i,d=f/i,w+=e/2*v(c)-t/2*M(c),b+=e/2*M(c)+t/2*v(c)):(w+=e/2*v(c),b+=e/2*M(c));break}case"top-right":{t=-t;const r=_(f,e,u);f=r.width,e=r.deltaW;const h=N(d,t,l);d=h.height,t=h.deltaH,i&&(e=t*i,f=d*i),w+=e/2*v(c)+t/2*M(c),b+=e/2*M(c)-t/2*v(c);break}case"bottom-right":{const r=_(f,e,u);f=r.width,e=r.deltaW;const h=N(d,t,l);d=h.height,t=h.deltaH,i&&(e=t*i,f=d*i),w+=e/2*v(c)-t/2*M(c),b+=e/2*M(c)+t/2*v(c);break}case"bottom":{const r=N(d,t,l);d=r.height,t=r.deltaH,i?(e=t*i,f=d*i,w+=e/2*v(c)-t/2*M(c),b+=e/2*M(c)+t/2*v(c)):(w-=t/2*M(c),b+=t/2*v(c));break}case"bottom-left":{e=-e;const r=_(f,e,u);f=r.width,e=r.deltaW;const h=N(d,t,l);d=h.height,t=h.deltaH,i&&(d=f/i,t=e/i),w-=e/2*v(c)+t/2*M(c),b-=e/2*M(c)-t/2*v(c);break}case"left":{e=-e;const r=_(f,e,u);f=r.width,e=r.deltaW,i?(d=f/i,t=e/i,w-=e/2*v(c)+t/2*M(c),b-=e/2*M(c)-t/2*v(c)):(w-=e/2*v(c),b-=e/2*M(c));break}case"top-left":{e=-e,t=-t;const r=_(f,e,u);f=r.width,e=r.deltaW;const h=N(d,t,l);d=h.height,t=h.deltaH,i&&(f=d*i,e=t*i),w-=e/2*v(c)-t/2*M(c),b-=e/2*M(c)+t/2*v(c);break}case"top":{t=-t;const r=N(d,t,l);d=r.height,t=r.deltaH,i?(f=d*i,e=t*i,w+=e/2*v(c)+t/2*M(c),b+=e/2*M(c)-t/2*v(c)):(w+=t/2*M(c),b-=t/2*v(c));break}}return{position:{centerX:w,centerY:b},size:{width:f*R,height:d*g}}},N=(o,n,e)=>{const t=o+n;return t>e?o=t:(n=e-o,o=e),{height:o,deltaH:n}},_=(o,n,e)=>{const t=o+n;return t>e?o=t:(n=e-o,o=e),{width:o,deltaW:n}},he=({centerX:o,centerY:n,width:e,height:t,angle:i})=>({top:n-t/2,left:o-e/2,width:e,height:t,angle:i}),fe=(o,n,e)=>{const{width:t,height:i}=o;return{width:Math.abs(t),height:Math.abs(i),left:n-Math.abs(t)/2,top:e-Math.abs(i)/2}};function V(o,n){const e=Math.abs(o)%n,t=o>0?n:-n;let i=0;return e>n/2?i=t*Math.ceil(Math.abs(o)/n):i=t*Math.floor(Math.abs(o)/n),i}function ge(o,n){if(!o||!n)return!1;const e=o.getBoundingClientRect(),t=n.getBoundingClientRect();return e.leftt.left&&e.topt.top}function me(o,n,e){const t=s.ref(!1),i=s.ref(!1),u=s.ref({width:n.width,height:n.height,left:n.left,top:n.top,angle:n.angle}),l=new Set;function f(g){if(l.add(g.button),n.disabled)return;t.value=!0,i.value=!0;let{clientX:r,clientY:h}=S(g);const{left:y,top:k}=u.value;let a=0,m=0,p=0,E=0;n.boundary&&([a,m,p,E]=d()),e&&e("drag-start",u.value),K(D=>{if(l.size>1)return;const{clientX:X,clientY:z}=S(D);let A=(X-r)/n.scaleRatio+y,L=(z-h)/n.scaleRatio+k;if(n.snapToGrid){let{left:I,top:$}=u.value;const x=A-I,U=L-$;A=I+V(x,n.gridX),L=$+V(U,n.gridY)}n.boundary&&([A,L]=w(A,L,a,m,p,E)),u.value.left=A,u.value.top=L,e&&e("drag",u.value)},D=>{n.checkCollision&&b()&&(u.value.top=k,u.value.left=y),l.clear(),t.value=!1,document.addEventListener("click",c,{once:!0}),e&&e("drag-end",u.value)})}const d=()=>{let g=0,r=0;const{left:h,top:y,height:k,width:a,angle:m}=u.value,E=(o.value.parentElement||document.body).getBoundingClientRect();if(m&&n.scaleRatio===1){const X=o.value.getBoundingClientRect();g=Math.abs(X.left-(h+E.left)),r=Math.abs(X.top-(y+E.top))}const B=E.width/n.scaleRatio-a,D=E.height/n.scaleRatio-k;return[g,B-g,r,D-r,E.width/n.scaleRatio,E.height/n.scaleRatio]},w=(g,r,h,y,k,a)=>(g=gy?y:g,r=ra?a:r,[g,r]),b=()=>{const g=o.value.parentElement||document.body,r=Array.from(g.children).filter(h=>h!==o.value&&h.classList.contains("es-drager"));for(let h=0;h{i.value=!1},R=g=>{if(t.value)return;let{left:r,top:h}=u.value;if(["ArrowRight","ArrowLeft"].includes(g.key)){const y=g.key==="ArrowRight";let k=y?1:-1;n.snapToGrid&&(k=y?n.gridX:-n.gridX),r=r+k}else if(["ArrowUp","ArrowDown"].includes(g.key)){const y=g.key==="ArrowDown";let k=y?1:-1;n.snapToGrid&&(k=y?n.gridY:-n.gridY),h=h+k}if(n.boundary){const[y,k,a,m]=d();[r,h]=w(r,h,y,k,a,m)}u.value.left=r,u.value.top=h,e("change",{...u.value})};return s.onMounted(()=>{if(o.value){if(!u.value.width&&!u.value.height){const{width:g,height:r}=o.value.getBoundingClientRect();u.value={...u.value,width:g||100,height:r||100},e("change",{...u.value})}o.value.addEventListener("mousedown",f),o.value.addEventListener("touchstart",f,{passive:!0})}}),s.watch(i,g=>{n.disabledKeyEvent||(g?document.addEventListener("keydown",R):document.removeEventListener("keydown",R))}),s.onBeforeUnmount(()=>{document.removeEventListener("keydown",R)}),{isMousedown:t,selected:i,dragData:u,getBoundary:d,checkDragerCollision:b}}const pe=s.createElementVNode("div",{class:"es-drager-rotate-handle"},[s.createElementVNode("svg",{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[s.createElementVNode("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),we=s.defineComponent({__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=s.ref(null),i=s.computed({get:()=>e.modelValue,set:l=>{n("update:modelValue",l)}});function u(l){if(!e.element)return console.warn("[es-drager] rotate component need drag element property");l.stopPropagation();const{width:f,height:d,left:w,top:b}=e.element.getBoundingClientRect(),c=w+f/2,R=b+d/2;n("rotate-start",i.value),K(g=>{const{clientX:r,clientY:h}=S(g),y=c-r,k=R-h,m=Math.atan2(k,y)*180/Math.PI-90;i.value=(m+360)%360,n("rotate",i.value)},()=>{n("rotate-end",i.value)})}return(l,f)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"rotateRef",ref:t,class:"es-drager-rotate",onMousedown:u,onTouchstartPassive:u},[s.renderSlot(l.$slots,"default",{},()=>[pe])],544))}}),xe="",ye=["data-side","onMousedown","onTouchstartPassive"],be=s.createElementVNode("div",{class:"es-drager-dot-handle"},null,-1),P=s.defineComponent({__name:"drager",props:ie,emits:["change","drag","drag-start","drag-end","resize","resize-start","resize-end","rotate","rotate-start","rotate-end"],setup(o,{emit:n}){const e=o,t=(a,...m)=>{n(a,...m),n("change",...m)},i=s.ref(null),{selected:u,dragData:l,isMousedown:f,getBoundary:d,checkDragerCollision:w}=me(i,e,t),b=s.ref(J(0,e.resizeList)),c=s.computed(()=>e.resizable&&!e.disabled),R=s.computed(()=>e.rotatable&&!e.disabled&&u.value),g=s.computed(()=>{const{width:a,height:m,left:p,top:E,angle:B}=l.value,D={};return a&&(D.width=T(a)),m&&(D.height=T(m)),{...D,left:T(p),top:T(E),zIndex:e.zIndex,transform:`rotate(${B}deg)`,"--es-drager-color":e.color}});function r(a){i.value||(i.value=a.$el||a)}function h(a){b.value=J(a,e.resizeList),t("rotate-end",l.value)}function y(a,m){if(e.disabled)return;m.stopPropagation();const{clientX:p,clientY:E}=S(m),B=p,D=E,{width:X,height:z,left:A,top:L}=l.value,I=A+X/2,$=L+z/2,x={width:X,height:z,centerX:I,centerY:$,rotateAngle:l.value.angle},U=a.side,{minWidth:ve,minHeight:Me,aspectRatio:Z,equalProportion:ke}=e;t("resize-start",l.value);let H=[];e.boundary&&(H=d()),K(W=>{const{clientX:Ee,clientY:Be}=S(W);let G=(Ee-B)/e.scaleRatio,j=(Be-D)/e.scaleRatio;e.snapToGrid&&(G=V(G,e.gridX),j=V(j,e.gridY));const De=Math.atan2(j,G),ee=ue(G,j),Ae=W.shiftKey,te=De-F(x.rotateAngle),Xe=ee*Math.cos(te),Ye=ee*Math.sin(te),ne=(ke||Ae)&&!Z?x.width/x.height:Z,{position:{centerX:oe,centerY:se},size:{width:Re,height:ze}}=de(U,{...x,rotateAngle:x.rotateAngle},Xe,Ye,ne,ve,Me),Le=he({centerX:oe,centerY:se,width:Re,height:ze,angle:l.value.angle});let C={...l.value,...fe(Le,oe,se)};e.maxWidth>0&&(C.width=Math.min(C.width,e.maxWidth)),e.maxHeight>0&&(C.height=Math.min(C.height,e.maxHeight)),e.boundary&&(C=k(C,H,ne)),l.value=C,t("resize",l.value)},()=>{e.checkCollision&&w()&&(l.value={...l.value,width:X,height:z,left:A,top:L}),t("resize-end",l.value)})}function k(a,m,p){const[E,B,D,X,z,A]=m;return a.leftz&&(a.left=l.value.left,a.width=z-a.left,p&&(a.height=l.value.height)),a.topA&&(a.top=l.value.top,a.height=A-a.top,p&&(a.width=l.value.width)),a}return s.watch(()=>[e.width,e.height,e.left,e.top,e.angle],([a,m,p,E,B])=>{l.value={...l.value,width:a,height:m,left:p,top:E,angle:B}}),s.watch(()=>e.selected,a=>{u.value=a},{immediate:!0}),(a,m)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(a.tag),{ref:r,class:s.normalizeClass(["es-drager",{disabled:a.disabled,dragging:s.unref(f),selected:s.unref(u),border:a.border}]),style:s.normalizeStyle(g.value),onClick:m[3]||(m[3]=s.withModifiers(()=>{},["stop"]))},{default:s.withCtx(()=>[s.renderSlot(a.$slots,"default"),c.value?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(b.value,(p,E)=>(s.openBlock(),s.createElementBlock("div",{key:E,class:"es-drager-dot","data-side":p.side,style:s.normalizeStyle({...p}),onMousedown:B=>y(p,B),onTouchstartPassive:B=>y(p,B)},[s.renderSlot(a.$slots,"resize",s.normalizeProps(s.guardReactiveProps({side:p.side})),()=>[be])],44,ye))),128)):s.createCommentVNode("",!0),R.value?(s.openBlock(),s.createBlock(we,{key:1,modelValue:s.unref(l).angle,"onUpdate:modelValue":m[0]||(m[0]=p=>s.unref(l).angle=p),element:i.value,onRotate:m[1]||(m[1]=p=>t("rotate",s.unref(l))),onRotateStart:m[2]||(m[2]=p=>t("rotate-start",s.unref(l))),onRotateEnd:h},{default:s.withCtx(()=>[s.renderSlot(a.$slots,"rotate")]),_:3},8,["modelValue","element"])):s.createCommentVNode("",!0)]),_:3},8,["class","style"]))}}),Ce="",Q=o=>{o.component("es-drager",P)};P.install=Q,Y.ESDrager=P,Y.default=P,Y.install=Q,Object.defineProperties(Y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); +(function(Y,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(Y=typeof globalThis<"u"?globalThis:Y||self,s(Y.ESDrager={},Y.Vue))})(this,function(Y,s){"use strict";const se={tag:{type:[String,Object],default:"div"},resizable:{type:Boolean,default:!0},rotatable:{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},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},equalProportion:{type:Boolean},checkCollision:{type:Boolean}};function K(n,o){const e=t=>{o&&o(t),document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",e),document.removeEventListener("mouseleave",e),document.removeEventListener("touchmove",n),document.removeEventListener("touchend",e)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",e),document.addEventListener("mouseleave",e),document.addEventListener("touchmove",n),document.addEventListener("touchend",e)}function _(n){let o=0,e=0;if(ie(n)){const t=n.targetTouches[0];o=t.pageX,e=t.pageY}else o=n.clientX,e=n.clientY;return{clientX:o,clientY:e}}function ie(n){const o=Object.prototype.toString.call(n);return o.substring(8,o.length-1)==="TouchEvent"}const T=(n=0)=>parseInt(n+"")+"px",j={n:"top",s:"bottom",e:"right",w:"left",ne:"top-right",nw:"top-left",se:"bottom-right",sw:"bottom-left"},O=["n","ne","e","se","s","sw","w","nw"],re={n:0,ne:1,e:2,se:3,s:4,sw:5,w:6,nw:7},ae={0:0,1:1,2:2,3:2,4:3,5:4,6:4,7:5,8:6,9:6,10:7,11:8},le=(n,o)=>{const e=ae[Math.floor(n/30)],i=(re[o]+e)%8;return O[i]},F=(n=0,o)=>{let e=[];for(let t=0;tn*Math.PI/180,ce=(n,o)=>Math.sqrt(n*n+o*o),b=n=>Math.cos(U(n)),k=n=>Math.sin(U(n)),ue=(n,o,e,t,i,h,c)=>{let{width:d,height:u,centerX:y,centerY:v,rotateAngle:r}=o;const g=d<0?-1:1,m=u<0?-1:1;switch(d=Math.abs(d),u=Math.abs(u),n){case"right":{const l=x(d,e,h);d=l.width,e=l.deltaW,i?(t=e/i,u=d/i,y+=e/2*b(r)-t/2*k(r),v+=e/2*k(r)+t/2*b(r)):(y+=e/2*b(r),v+=e/2*k(r));break}case"top-right":{t=-t;const l=x(d,e,h);d=l.width,e=l.deltaW;const f=C(u,t,c);u=f.height,t=f.deltaH,i&&(e=t*i,d=u*i),y+=e/2*b(r)+t/2*k(r),v+=e/2*k(r)-t/2*b(r);break}case"bottom-right":{const l=x(d,e,h);d=l.width,e=l.deltaW;const f=C(u,t,c);u=f.height,t=f.deltaH,i&&(e=t*i,d=u*i),y+=e/2*b(r)-t/2*k(r),v+=e/2*k(r)+t/2*b(r);break}case"bottom":{const l=C(u,t,c);u=l.height,t=l.deltaH,i?(e=t*i,d=u*i,y+=e/2*b(r)-t/2*k(r),v+=e/2*k(r)+t/2*b(r)):(y-=t/2*k(r),v+=t/2*b(r));break}case"bottom-left":{e=-e;const l=x(d,e,h);d=l.width,e=l.deltaW;const f=C(u,t,c);u=f.height,t=f.deltaH,i&&(u=d/i,t=e/i),y-=e/2*b(r)+t/2*k(r),v-=e/2*k(r)-t/2*b(r);break}case"left":{e=-e;const l=x(d,e,h);d=l.width,e=l.deltaW,i?(u=d/i,t=e/i,y-=e/2*b(r)+t/2*k(r),v-=e/2*k(r)-t/2*b(r)):(y-=e/2*b(r),v-=e/2*k(r));break}case"top-left":{e=-e,t=-t;const l=x(d,e,h);d=l.width,e=l.deltaW;const f=C(u,t,c);u=f.height,t=f.deltaH,i&&(d=u*i,e=t*i),y-=e/2*b(r)-t/2*k(r),v-=e/2*k(r)+t/2*b(r);break}case"top":{t=-t;const l=C(u,t,c);u=l.height,t=l.deltaH,i?(d=u*i,e=t*i,y+=e/2*b(r)+t/2*k(r),v+=e/2*k(r)-t/2*b(r)):(y+=t/2*k(r),v-=t/2*b(r));break}}return{position:{centerX:y,centerY:v},size:{width:d*g,height:u*m}}},C=(n,o,e)=>{const t=n+o;return t>e?n=t:(o=e-n,n=e),{height:n,deltaH:o}},x=(n,o,e)=>{const t=n+o;return t>e?n=t:(o=e-n,n=e),{width:n,deltaW:o}},de=({centerX:n,centerY:o,width:e,height:t,angle:i})=>({top:o-t/2,left:n-e/2,width:e,height:t,angle:i}),he=(n,o,e)=>{const{width:t,height:i}=n;return{width:Math.abs(t),height:Math.abs(i),left:o-Math.abs(t)/2,top:e-Math.abs(i)/2}};function V(n,o){const e=Math.abs(n)%o,t=n>0?o:-o;let i=0;return e>o/2?i=t*Math.ceil(Math.abs(n)/o):i=t*Math.floor(Math.abs(n)/o),i}function fe(n,o){if(!n||!o)return!1;const e=n.getBoundingClientRect(),t=o.getBoundingClientRect();return e.leftt.left&&e.topt.top}function ge(n,o,e,{getBoundary:t,fixBoundary:i,checkDragerCollision:h,emit:c}){let d=0,u=0;const y=r=>{let{left:g,top:m}=o.value;if(d||(d=g),u||(u=m),["ArrowRight","ArrowLeft"].includes(r.key)){const l=r.key==="ArrowRight";let f=l?1:-1;n.snapToGrid&&(f=l?n.gridX:-n.gridX),g=g+f}else if(["ArrowUp","ArrowDown"].includes(r.key)){const l=r.key==="ArrowDown";let f=l?1:-1;n.snapToGrid&&(f=l?n.gridY:-n.gridY),m=m+f}if(n.boundary){const[l,f,M,B]=t();[g,m]=i(g,m,l,f,M,B)}o.value.left=g,o.value.top=m,c("change",{...o.value})},v=r=>{["ArrowRight","ArrowLeft","ArrowUp","ArrowDown"].includes(r.key)&&n.checkCollision&&h()&&(o.value.left=d,o.value.top=u),d=0,u=0};s.watch(e,r=>{n.disabledKeyEvent||(r?(document.addEventListener("keydown",y),document.addEventListener("keyup",v)):(document.removeEventListener("keydown",y),document.removeEventListener("keyup",v)))}),s.onBeforeUnmount(()=>{document.removeEventListener("keydown",y),document.removeEventListener("keyup",v)})}function me(n,o,e){const t=s.ref(!1),i=s.ref(!1),h=s.ref({width:o.width,height:o.height,left:o.left,top:o.top,angle:o.angle}),c=new Set;function d(g){if(c.add(g.button),o.disabled)return;t.value=!0,i.value=!0;let{clientX:m,clientY:l}=_(g);const{left:f,top:M}=h.value;let B=0,a=0,w=0,p=0;o.boundary&&([B,a,w,p]=u()),e&&e("drag-start",h.value),K(E=>{if(c.size>1)return;const{clientX:A,clientY:N}=_(E);let R=(A-m)/o.scaleRatio+f,X=(N-l)/o.scaleRatio+M;if(o.snapToGrid){let{left:S,top:I}=h.value;const q=R-S,z=X-I;R=S+V(q,o.gridX),X=I+V(z,o.gridY)}o.boundary&&([R,X]=y(R,X,B,a,w,p)),h.value.left=R,h.value.top=X,e&&e("drag",h.value)},E=>{o.checkCollision&&v()&&(h.value.top=M,h.value.left=f),c.clear(),t.value=!1,document.addEventListener("click",r,{once:!0}),e&&e("drag-end",h.value)})}const u=()=>{let g=0,m=0;const{left:l,top:f,height:M,width:B,angle:a}=h.value,p=(n.value.parentElement||document.body).getBoundingClientRect();if(a&&o.scaleRatio===1){const A=n.value.getBoundingClientRect();g=Math.abs(A.left-(l+p.left)),m=Math.abs(A.top-(f+p.top))}const L=p.width/o.scaleRatio-B,E=p.height/o.scaleRatio-M;return[g,L-g,m,E-m,p.width/o.scaleRatio,p.height/o.scaleRatio]},y=(g,m,l,f,M,B)=>(g=gf?f:g,m=mB?B:m,[g,m]),v=()=>{const g=n.value.parentElement||document.body,m=Array.from(g.children).filter(l=>l!==n.value&&l.classList.contains("es-drager"));for(let l=0;l{i.value=!1};return ge(o,h,i,{getBoundary:u,fixBoundary:y,checkDragerCollision:v,emit:e}),s.onMounted(()=>{if(n.value){if(!h.value.width&&!h.value.height){const{width:g,height:m}=n.value.getBoundingClientRect();h.value={...h.value,width:g||100,height:m||100},e("change",{...h.value})}n.value.addEventListener("mousedown",d),n.value.addEventListener("touchstart",d,{passive:!0})}}),{isMousedown:t,selected:i,dragData:h,getBoundary:u,checkDragerCollision:v}}const pe=s.createElementVNode("div",{class:"es-drager-rotate-handle"},[s.createElementVNode("svg",{viewBox:"0 0 1024 1024",xmlns:"http://www.w3.org/2000/svg"},[s.createElementVNode("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),we=s.defineComponent({__name:"rotate",props:{modelValue:{type:Number,default:0},element:{type:Object}},emits:["update:modelValue","rotate","rotate-start","rotate-end"],setup(n,{emit:o}){const e=n,t=s.ref(null),i=s.computed({get:()=>e.modelValue,set:c=>{o("update:modelValue",c)}});function h(c){if(!e.element)return console.warn("[es-drager] rotate component need drag element property");c.stopPropagation();const{width:d,height:u,left:y,top:v}=e.element.getBoundingClientRect(),r=y+d/2,g=v+u/2;o("rotate-start",i.value),K(m=>{const{clientX:l,clientY:f}=_(m),M=r-l,B=g-f,w=Math.atan2(B,M)*180/Math.PI-90;i.value=(w+360)%360,o("rotate",i.value)},()=>{o("rotate-end",i.value)})}return(c,d)=>(s.openBlock(),s.createElementBlock("div",{ref_key:"rotateRef",ref:t,class:"es-drager-rotate",onMousedown:h,onTouchstartPassive:h},[s.renderSlot(c.$slots,"default",{},()=>[pe])],544))}}),xe="",ye=["data-side","onMousedown","onTouchstartPassive"],ve=s.createElementVNode("div",{class:"es-drager-dot-handle"},null,-1),P=s.defineComponent({__name:"drager",props:se,emits:["change","drag","drag-start","drag-end","resize","resize-start","resize-end","rotate","rotate-start","rotate-end"],setup(n,{emit:o}){const e=n,t=(a,...w)=>{o(a,...w),o("change",...w)},i=s.ref(null),{selected:h,dragData:c,isMousedown:d,getBoundary:u,checkDragerCollision:y}=me(i,e,t),v=s.ref(F(0,e.resizeList)),r=s.computed(()=>e.resizable&&!e.disabled),g=s.computed(()=>e.rotatable&&!e.disabled&&h.value),m=s.computed(()=>{const{width:a,height:w,left:p,top:L,angle:E}=c.value,A={};return a&&(A.width=T(a)),w&&(A.height=T(w)),{...A,left:T(p),top:T(L),zIndex:e.zIndex,transform:`rotate(${E}deg)`,"--es-drager-color":e.color}});function l(a){i.value||(i.value=a.$el||a)}function f(a){v.value=F(a,e.resizeList),t("rotate-end",c.value)}function M(a,w){if(e.disabled)return;w.stopPropagation();const{clientX:p,clientY:L}=_(w),E=p,A=L,{width:N,height:R,left:X,top:S}=c.value,I=X+N/2,q=S+R/2,z={width:N,height:R,centerX:I,centerY:q,rotateAngle:c.value.angle},be=a.side,{minWidth:ke,minHeight:Me,aspectRatio:Q,equalProportion:Ee}=e;t("resize-start",c.value);let Z=[];e.boundary&&(Z=u()),K(H=>{const{clientX:Ae,clientY:Be}=_(H);let $=(Ae-E)/e.scaleRatio,G=(Be-A)/e.scaleRatio;e.snapToGrid&&($=V($,e.gridX),G=V(G,e.gridY));const Le=Math.atan2(G,$),W=ce($,G),Re=H.shiftKey,ee=Le-U(z.rotateAngle),Xe=W*Math.cos(ee),Ye=W*Math.sin(ee),te=(Ee||Re)&&!Q?z.width/z.height:Q,{position:{centerX:ne,centerY:oe},size:{width:ze,height:De}}=ue(be,{...z,rotateAngle:z.rotateAngle},Xe,Ye,te,ke,Me),Ce=de({centerX:ne,centerY:oe,width:ze,height:De,angle:c.value.angle});let D={...c.value,...he(Ce,ne,oe)};e.maxWidth>0&&(D.width=Math.min(D.width,e.maxWidth)),e.maxHeight>0&&(D.height=Math.min(D.height,e.maxHeight)),e.boundary&&(D=B(D,Z,te)),c.value=D,t("resize",c.value)},()=>{e.checkCollision&&y()&&(c.value={...c.value,width:N,height:R,left:X,top:S}),t("resize-end",c.value)})}function B(a,w,p){const[L,E,A,N,R,X]=w;return a.leftR&&(a.left=c.value.left,a.width=R-a.left,p&&(a.height=c.value.height)),a.topX&&(a.top=c.value.top,a.height=X-a.top,p&&(a.width=c.value.width)),a}return s.watch(()=>[e.width,e.height,e.left,e.top,e.angle],([a,w,p,L,E])=>{c.value={...c.value,width:a,height:w,left:p,top:L,angle:E}}),s.watch(()=>e.selected,a=>{h.value=a},{immediate:!0}),(a,w)=>(s.openBlock(),s.createBlock(s.resolveDynamicComponent(a.tag),{ref:l,class:s.normalizeClass(["es-drager",{disabled:a.disabled,dragging:s.unref(d),selected:s.unref(h),border:a.border}]),style:s.normalizeStyle(m.value),onClick:w[3]||(w[3]=s.withModifiers(()=>{},["stop"]))},{default:s.withCtx(()=>[s.renderSlot(a.$slots,"default"),r.value?(s.openBlock(!0),s.createElementBlock(s.Fragment,{key:0},s.renderList(v.value,(p,L)=>(s.openBlock(),s.createElementBlock("div",{key:L,class:"es-drager-dot","data-side":p.side,style:s.normalizeStyle({...p}),onMousedown:E=>M(p,E),onTouchstartPassive:E=>M(p,E)},[s.renderSlot(a.$slots,"resize",s.normalizeProps(s.guardReactiveProps({side:p.side})),()=>[ve])],44,ye))),128)):s.createCommentVNode("",!0),g.value?(s.openBlock(),s.createBlock(we,{key:1,modelValue:s.unref(c).angle,"onUpdate:modelValue":w[0]||(w[0]=p=>s.unref(c).angle=p),element:i.value,onRotate:w[1]||(w[1]=p=>t("rotate",s.unref(c))),onRotateStart:w[2]||(w[2]=p=>t("rotate-start",s.unref(c))),onRotateEnd:f},{default:s.withCtx(()=>[s.renderSlot(a.$slots,"rotate")]),_:3},8,["modelValue","element"])):s.createCommentVNode("",!0)]),_:3},8,["class","style"]))}}),Ne="",J=n=>{n.component("es-drager",P)};P.install=J,Y.ESDrager=P,Y.default=P,Y.install=J,Object.defineProperties(Y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}); diff --git a/package-lock.json b/package-lock.json index d3eafc9..a5ae6e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "es-drager", - "version": "1.2.1", + "version": "1.2.2", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "es-drager", - "version": "1.2.1", + "version": "1.2.2", "license": "MIT", "workspaces": [ "docs" @@ -37,6 +37,7 @@ "color": "^4.2.3", "echarts": "^5.4.2", "element-plus": "^2.3.8", + "es-drager": "^1.2.2", "highlight.js": "^11.8.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", @@ -1457,10 +1458,11 @@ } }, "node_modules/es-drager": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-drager/-/es-drager-1.2.1.tgz", - "integrity": "sha512-IQB/vPW/tVgd51z8SWOXcy1dVaa0hDc3udiDEUblZywI7pGtxEsMl6Vuv+tuAyTaTlUnUcVxzP1HWh7zShfRaQ==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/es-drager/-/es-drager-1.2.2.tgz", + "integrity": "sha512-6O1OBb/LKKhm3Ro1oukhRgFX2DjQBgVM7S1MnaYgUw1dBRuOHfbLekljvc07kPaD8+qh93Vy3k+w/DvTcU0M6g==", "dependencies": { + "es-drager": "^1.2.1", "vue": ">=3.2.0" }, "peerDependencies": { @@ -3545,6 +3547,7 @@ "color": "^4.2.3", "echarts": "^5.4.2", "element-plus": "^2.3.8", + "es-drager": "^1.2.2", "highlight.js": "^11.8.0", "html2canvas": "^1.4.1", "jspdf": "^2.5.1", @@ -3599,10 +3602,11 @@ } }, "es-drager": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-drager/-/es-drager-1.2.1.tgz", - "integrity": "sha512-IQB/vPW/tVgd51z8SWOXcy1dVaa0hDc3udiDEUblZywI7pGtxEsMl6Vuv+tuAyTaTlUnUcVxzP1HWh7zShfRaQ==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/es-drager/-/es-drager-1.2.2.tgz", + "integrity": "sha512-6O1OBb/LKKhm3Ro1oukhRgFX2DjQBgVM7S1MnaYgUw1dBRuOHfbLekljvc07kPaD8+qh93Vy3k+w/DvTcU0M6g==", "requires": { + "es-drager": "^1.2.1", "vue": ">=3.2.0" } }, diff --git a/package.json b/package.json index 94ce86e..04acd59 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "es-drager", - "version": "1.2.1", + "version": "1.2.2", "description": "A draggable, resizable, rotatable component based on vue3", "keywords": [ "drag",