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.16.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(() => v.value[i.value]?.rect ?? {}), a = Y(() => (e) => {
    const { r: t } = o.value || {};
    if (!t) return "";
    const u = l.length;
    let c = l.findIndex(({ start: d, end: y }, x) => x ? t > d && t < y : t < y || t > 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 t = e.x - o.x, u = e.y - o.y, n = a.x + t, c = a.y + u;
    return { distX: n, distY: c };
  };
  return { onTouchstart: (e) => {
    const { clientX: t, clientY: u } = e.changedTouches[0];
    o = { x: t, y: u }, a = { ...r.value };
  }, onTouchmove: (e) => {
    const { clientX: t, clientY: u } = e.changedTouches[0], { distX: n, distY: c } = m({ x: t, y: u });
    h.value[l.value].rect.x = n, h.value[l.value].rect.y = c, i("translate"), v();
  }, onMousedown: (e) => {
    const { clientX: t, clientY: u } = e;
    o = { x: t, y: u }, a = { ...r.value }, document.onmousemove = (n) => {
      const { distX: c, distY: d } = m({ x: n.clientX, y: n.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(() => g.value?.getBoundingClientRect()), s = () => {
    const { x: n, y: c } = R.value, { w: d, h: y, x, y: f } = r.value, T = d / 2 + x + n, X = y / 2 + f + c;
    return { x: T, y: X };
  };
  return { dragRef: g, onResizeTouchstart: (n) => {
    const { clientX: c, clientY: d } = n.changedTouches[0];
    o = { x: c, y: d }, a = s(), m = p(o, a);
  }, onResizeTouchmove: (n, c) => {
    const { clientX: d, clientY: y } = n.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: (n, c) => {
    const { clientX: d, clientY: y } = n;
    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 t = s.x - e.x, u = s.y - e.y;
    let n = Math.atan(Math.abs(t / u)) / Math.PI * 180;
    return t < 0 && u < 0 ? n = 180 - n : t > 0 && u < 0 ? n += 180 : t > 0 && u > 0 && (n = 360 - n), a(n);
  };
  return { onRotateTouchmove: (s) => {
    const { clientX: e, clientY: t } = s.changedTouches[0];
    i.value.r = m({ x: e, y: t }), l(), o("rotate");
  }, onRotateMousedown: () => {
    document.onmousemove = (s) => {
      const { clientX: e, clientY: t } = s;
      i.value.r = m({ x: e, y: t }), 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 t = e[0], u = e[1], n = Math.abs(t.clientX - u.clientX), c = Math.abs(t.clientY - u.clientY);
    return Math.sqrt(n ** 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: t, y: u, w: n, h: c } = m, d = (g(e.touches) - a) / h.scale + 1, y = n * d, x = c * d;
    r.value[o.value].rect.x = t + (n - 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
};