mine-h5-ui/es/MeDrag/hooks.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { ref as z, computed as Y, watch as b } from "vue";
import { DeepCopyRA as W } from "../MeAPI/function.js";
import w, { getSymmPoint as p } from "./calcSize.js";
/*!
          * mine-h5-ui v2.15.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const O = ({ emit: h, listModel: r, currentModel: i }) => {
  const v = z([]), l = Object.freeze([
    { start: 338, end: 23, cursor: "nw" },
    { start: 23, end: 68, cursor: "n" },
    { start: 68, end: 113, cursor: "ne" },
    { start: 113, end: 158, cursor: "e" },
    { start: 158, end: 203, cursor: "se" },
    { start: 203, end: 248, cursor: "s" },
    { start: 248, end: 293, cursor: "sw" },
    { start: 293, end: 338, cursor: "w" }
  ]), o = Y(() => {
    var e;
    return ((e = v.value[i.value]) == null ? void 0 : e.rect) ?? {};
  }), a = Y(() => (e) => {
    const { r: n } = o.value || {};
    if (!n) return "";
    const u = l.length;
    let c = l.findIndex(({ start: d, end: y }, x) => x ? n > d && n < y : n < y || n > d) + e;
    return c >= u && (c -= u), `new-${l[c].cursor}`;
  }), m = (e) => {
    h("change", v.value, e);
  }, g = () => {
    r.value = v.value;
  }, R = () => {
    v.value.splice(i.value, 1), g(), m("delete");
  }, s = (e) => {
    i.value = e;
  };
  return b(
    r,
    (e) => {
      v.value = W(e);
    },
    { deep: !0, immediate: !0 }
  ), {
    listData: v,
    angleToCursor: l,
    getCursor: a,
    onDelete: R,
    onClick: s,
    getCurItem: o,
    onEmitChange: m,
    onUpdate: g
  };
}, k = ({ listData: h, getCurItem: r, onEmitChange: i, onUpdate: v, currentModel: l }) => {
  let o, a;
  const m = (e) => {
    const n = e.x - o.x, u = e.y - o.y, t = a.x + n, c = a.y + u;
    return { distX: t, distY: c };
  };
  return { onTouchstart: (e) => {
    const { clientX: n, clientY: u } = e.changedTouches[0];
    o = { x: n, y: u }, a = { ...r.value };
  }, onTouchmove: (e) => {
    const { clientX: n, clientY: u } = e.changedTouches[0], { distX: t, distY: c } = m({ x: n, y: u });
    h.value[l.value].rect.x = t, h.value[l.value].rect.y = c, i("translate"), v();
  }, onMousedown: (e) => {
    const { clientX: n, clientY: u } = e;
    o = { x: n, y: u }, a = { ...r.value }, document.onmousemove = (t) => {
      const { distX: c, distY: d } = m({ x: t.clientX, y: t.clientY });
      h.value[l.value].rect.x = c, h.value[l.value].rect.y = d, i("translate"), v();
    }, document.onmouseup = () => {
      document.onmousemove = null, document.onmouseup = null;
    };
  } };
}, A = ({ listData: h, getCurItem: r, onEmitChange: i, onUpdate: v, currentModel: l }) => {
  let o, a, m;
  const g = z(), R = Y(() => {
    var t;
    return (t = g.value) == null ? void 0 : t.getBoundingClientRect();
  }), s = () => {
    const { x: t, y: c } = R.value, { w: d, h: y, x, y: f } = r.value, T = d / 2 + x + t, X = y / 2 + f + c;
    return { x: T, y: X };
  };
  return { dragRef: g, onResizeTouchstart: (t) => {
    const { clientX: c, clientY: d } = t.changedTouches[0];
    o = { x: c, y: d }, a = s(), m = p(o, a);
  }, onResizeTouchmove: (t, c) => {
    const { clientX: d, clientY: y } = t.changedTouches[0], x = { x: d, y }, f = w(c.cursor, { startPoint: o, centerPoint: a, symmPoint: m, curPoint: x, rect: r.value }), { x: T, y: X } = R.value;
    f.x -= T, f.y -= X, h.value[l.value].rect = f, v(), i("resize");
  }, onResizeMousedown: (t, c) => {
    const { clientX: d, clientY: y } = t;
    o = { x: d, y }, a = s(), m = p(o, a), document.onmousemove = (x) => {
      const f = { x: x.clientX, y: x.clientY }, T = w(c.cursor, { startPoint: o, centerPoint: a, symmPoint: m, curPoint: f, rect: r.value }), { x: X, y: P } = R.value;
      T.x -= X, T.y -= P, Object.assign(h.value[l.value].rect, T), v(), i("resize");
    }, document.onmouseup = () => {
      document.onmousemove = null, document.onmouseup = null;
    };
  }, getCenterPoint: s };
}, S = (h, r) => {
  const { getCurItem: i, getCenterPoint: v, onUpdate: l, onEmitChange: o } = r, a = (s) => [0, 90, 180, 270, 360, s].find((e) => Math.abs(s - e) < h.angleRange), m = (s) => {
    const e = v();
    if (s.x === e.x)
      return s.y >= e.y ? 0 : 180;
    if (s.y === e.y)
      return s.x < e.x ? 90 : 270;
    const n = s.x - e.x, u = s.y - e.y;
    let t = Math.atan(Math.abs(n / u)) / Math.PI * 180;
    return n < 0 && u < 0 ? t = 180 - t : n > 0 && u < 0 ? t += 180 : n > 0 && u > 0 && (t = 360 - t), a(t);
  };
  return { onRotateTouchmove: (s) => {
    const { clientX: e, clientY: n } = s.changedTouches[0];
    i.value.r = m({ x: e, y: n }), l(), o("rotate");
  }, onRotateMousedown: () => {
    document.onmousemove = (s) => {
      const { clientX: e, clientY: n } = s;
      i.value.r = m({ x: e, y: n }), l(), o("rotate");
    }, document.onmouseup = () => {
      document.onmousemove = null, document.onmouseup = null;
    };
  } };
}, H = ({ props: h, listData: r, getCurItem: i, onEmitChange: v, onUpdate: l, currentModel: o }) => {
  let a, m;
  const g = (e) => {
    const n = e[0], u = e[1], t = Math.abs(n.clientX - u.clientX), c = Math.abs(n.clientY - u.clientY);
    return Math.sqrt(t ** 2 + c ** 2);
  };
  return { onTouchstartWrap: (e) => {
    e.touches.length !== 2 || !h.scale || !Object.keys(i.value).length || (a = g(e.touches), m = { ...i.value });
  }, onTouchmoveWrap: (e) => {
    if (e.touches.length !== 2 || !h.scale || !Object.keys(i.value).length) return;
    const { x: n, y: u, w: t, h: c } = m, d = (g(e.touches) - a) / h.scale + 1, y = t * d, x = c * d;
    r.value[o.value].rect.x = n + (t - y) / 2, r.value[o.value].rect.y = u + (c - x) / 2, r.value[o.value].rect.w = y, r.value[o.value].rect.h = x, v("scale"), l();
  } };
};
export {
  O as useHandler,
  k as useMove,
  A as useResize,
  S as useRotate,
  H as useScale
};