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

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

import { computed as K, ref as j, useTemplateRef as p, onMounted as tt } from "vue";
import { useMoveHandle as et } from "../MeComposable/useMoveHandle/index.js";
const s = (e, n) => ({ x: e, y: n }), nt = (e, n, t, i, M) => {
  const v = 1 - M, P = v ** 2, b = v ** 3, w = M ** 3, q = M ** 2, g = 3 * M * P, U = 3 * q * v;
  return s(Math.round(b * e.x + g * n.x + U * t.x + w * i.x), Math.round(b * e.y + g * n.y + U * t.y + w * i.y));
}, Z = (e, { width: n, height: t }) => ({ tl: s(n * 2, 0), tr: s(-n, 0), bl: s(n * 2, t), br: s(-n, t) })[e], Q = ({ point: e, width: n, height: t }) => {
  let i = {}, M = {}, v = {}, P = {}, b = {}, w = {};
  const q = (a, c, k, X) => {
    const z = Array.from({ length: X }, (B, O) => {
      const [V, A] = k[O];
      return `color-stop(${V}, ${A})`;
    });
    return { "background-image": `-webkit-gradient(linear, ${a.x}% ${a.y}%,  ${c.x}% ${c.y}%, ${z.join(",")} )` };
  }, g = (a) => a / Math.PI * 180, U = (a, c = 0) => ({ tl: s(c, c), tr: s(n - c, c), bl: s(c, t - c), br: s(n - c, t - c) })[a], u = (a, c) => ` translate(${a}px, ${c}px) `;
  let I = 0, y = 0, C, R, E, l, r, x, f = s(0, 0), S = s(0, 0), o = s(0, 0);
  const m = Math.round(Math.sqrt(n ** 2 + t ** 2)), d = U(e.corner), h = e.corner[0] === "t", $ = e.corner[1] === "l", D = Math.PI, H = D / 2, T = (a) => ` rotate(${a}deg) `, F = (a, c) => ({
    transform: a,
    transformOrigin: c
  }), W = () => {
    const a = s(d.x ? d.x - e.x : e.x, d.y ? d.y - e.y : e.y), c = Math.atan2(a.y, a.x);
    y = H - c, I = g(y);
    const k = s($ ? n - a.x / 2 : e.x + a.x / 2, a.y / 2), X = y - Math.atan2(k.y, k.x), z = Math.max(0, Math.sin(X) * Math.sqrt(k.x ** 2 + k.y ** 2));
    if (o = s(z * Math.sin(y), z * Math.cos(y)), y > H) {
      if (o.x += Math.abs(o.y * Math.tan(c)), o.y = 0, Math.round(o.x * Math.tan(D - y)) < t)
        return e.y = Math.sqrt(t ** 2 + 2 * k.x * a.x), h && (e.y = t - e.y), W();
      const J = D - y, N = m - t / Math.sin(J);
      f = s(Math.round(N * Math.cos(J)), Math.round(N * Math.sin(J))), $ && (f.x = -f.x), h && (f.y = -f.y);
    }
    C = Math.round(o.y / Math.tan(y) + o.x);
    const B = n - C, O = B * Math.cos(y * 2), V = B * Math.sin(y * 2);
    S = s(Math.round($ ? B - O : C + O), Math.round(h ? V : t - V)), r = B * Math.sin(y);
    const A = Z(e.corner, { width: n, height: t }), L = Math.sqrt((A.x - e.x) ** 2 + (A.y - e.y) ** 2);
    return x = L < n ? L / n : 1, l = r > 100 ? (r - 100) / r : 0, R = s(r * Math.sin(H - y) / t * 100, r * Math.cos(H - y) / n * 100), h && (R.y = 100 - R.y), $ && (R.x = 100 - R.x), E = s(r * Math.sin(y) / n * 100, r * Math.cos(y) / t * 100), !$ && (E.x = 100 - E.x), !h && (E.y = 100 - E.y), o.x = Math.round(o.x), o.y = Math.round(o.y), !0;
  }, _ = (a, c) => ({
    width: `${a}px`,
    height: `${c}px`
  }), G = (a, c, [k, X], z) => {
    const B = (n - m) * k / 100, O = (t - m) * X / 100, V = z !== 90 && z !== -90 ? $ ? -1 : 1 : 0, A = `${k}% ${X}%`;
    v = {
      ...F(T(z) + u(a.x + V, a.y), A),
      ..._(n, t),
      inset: c
    }, i = {
      ...F(u(-a.x + B - V, -a.y + O) + T(-z), A),
      ..._(m, m)
    }, M = {
      ...F(u(-a.x + f.x + B, -a.y + f.y + O) + T(-z), A),
      ..._(m, m)
    }, b = {
      ...F(T(z) + u(a.x + S.x - f.x, a.y + S.y - f.y), A),
      ..._(n, t),
      inset: c
    }, w = q(
      s($ ? 100 : 0, h ? 100 : 0),
      s(R.x, R.y),
      [
        [l, "transparent"],
        [(1 - l) * 0.8 + l, `rgba(0,0,0,${0.2 * x})`],
        [1, `rgba(255,255,255,${0.2 * x})`]
      ],
      3
    ), P = q(
      s($ ? 0 : 100, h ? 0 : 100),
      s(E.x, E.y),
      [
        [0.8, "transparent"],
        [1, `rgba(0,0,0,${0.3 * x})`],
        [1, "transparent"]
      ],
      3
    );
  };
  let Y = null;
  switch (e.corner) {
    // 上左
    case "tl":
      e.x = Math.max(e.x, 1), W(), G(o, "0 0 auto auto", [100, 0], I), Y = F(u(-t, -n) + T(90 - I * 2), "100% 100%");
      break;
    // 上右
    case "tr":
      e.x = Math.min(e.x, n - 1), W(), G(s(-o.x, o.y), "0 0 auto 0", [0, 0], -I), Y = F(u(0, -n) + T(-90 + I * 2), "0% 100%");
      break;
    // 下左
    case "bl":
      e.x = Math.max(e.x, 1), W(), G(s(o.x, -o.y), "auto 0 0 auto", [100, 100], -I), Y = F(u(-t, 0) + T(-90 + I * 2), "100% 0%");
      break;
    // 下右
    case "br":
      e.x = Math.min(e.x, n - 1), W(), G(s(-o.x, -o.y), "auto auto 0 0", [0, 100], I), Y = F(T(90 - I * 2), "0% 0%");
      break;
  }
  return w = {
    ...w || {},
    ...Y,
    width: `${t}px`,
    height: `${n}px`
  }, { wrapStyle: i, fwrapStyle: M, itemStyle: v, shadowStyle: P, turnItemStyle: b, turnShadowStyle: w };
}, at = () => {
  const e = {};
  return { animateFrame: (t) => {
    if (!t) return;
    clearInterval(e.effect), !t.easing && (t.easing = (b, w, q, g) => q * Math.sqrt(1 - (b / g - 1) ** 2) + w);
    const i = t.to - t.from, M = t.fps || 30;
    let v = -M;
    const P = () => {
      v = Math.min(t.duration, v + M);
      const b = t.easing(v, t.from, i, t.duration);
      t.frame(b), v === t.duration && (clearInterval(e.effect), t.complete && t.complete());
    };
    P(), e.effect = setInterval(P, M);
  } };
}, lt = (e, n) => {
  const t = j({}), i = j({}), M = j({}), v = j({}), P = j({}), b = j({}), w = (l, r) => l === n.value ? r : "", q = p("turnPage"), g = K(() => {
    const l = q.value?.getBoundingClientRect?.();
    if (!l) return;
    const { x: r, y: x, width: f, height: S } = l, o = f / 2, m = S / 2, d = r + o, h = x + m, $ = r + f, D = x + S;
    return {
      hot: [{
        corner: "tl",
        start: [r, x],
        end: [d, h]
      }, {
        corner: "tr",
        start: [d, x],
        end: [$, h]
      }, {
        corner: "bl",
        start: [r, h],
        end: [d, D]
      }, {
        corner: "br",
        start: [d, h],
        end: [$, D]
      }],
      size: {
        width: f,
        height: S
      },
      point: {
        x: r,
        y: x
      }
    };
  }), U = () => {
    t.value = {}, M.value = {}, v.value = {}, P.value = {}, b.value = {};
  };
  let u;
  const I = ({ x: l, y: r }) => {
    if (!g.value) throw new Error("turnPageRect is required");
    const { point: x } = g.value;
    return l -= x.x, r -= x.y, { x: l, y: r };
  }, y = (l) => !(l.includes("l") && !n.value || !l.includes("l") && n.value >= e.list.length - 1), C = j(!1), R = {
    start({ x: l, y: r }, x = !1) {
      if (C.value || !g.value) return;
      const { size: f, hot: S } = g.value;
      if (x || (u = S.find((d) => {
        const [h, $] = d.start, [D, H] = d.end;
        return l >= h && l <= D && r >= $ && r <= H;
      })?.corner), !u || !y(u)) return;
      const o = I({ x: l, y: r }), m = Q({
        ...f,
        point: { ...o, corner: u }
      });
      t.value = m.wrapStyle, i.value = m.fwrapStyle, M.value = m.itemStyle, v.value = m.shadowStyle, P.value = m.turnItemStyle, b.value = m.turnShadowStyle;
    },
    move(l) {
      this.start(l, !0);
    },
    end(l) {
      if (!u || !g.value || C.value || !y(u)) return;
      C.value = !0;
      const { size: r } = g.value, x = Z(u, r), { animateFrame: f } = at(), S = { ...I(l), corner: u };
      f({
        from: 0,
        to: 1,
        frame: (o) => {
          const m = nt(S, S, x, x, o);
          S.x = m.x, S.y = m.y;
          const d = Q({ point: S, ...r });
          t.value = d.wrapStyle, i.value = d.fwrapStyle, M.value = d.itemStyle, v.value = d.shadowStyle, P.value = d.turnItemStyle, b.value = d.turnShadowStyle;
        },
        complete: () => {
          n.value += u.includes("l") ? -1 : 1, U(), C.value = !1, u = "";
        },
        duration: Math.abs(x.x)
      });
    }
  };
  return tt(() => {
    et(q.value, R);
  }), { getItemStyle: K(() => (l) => u ? { zIndex: +(l === n.value + (u.includes("l") ? -1 : 1)) } : {}), wrapStyle: t, fwrapStyle: i, itemStyle: M, shadowStyle: v, turnItemStyle: P, turnShadowStyle: b, current: n, showValue: w };
}, ot = (e) => {
  const n = (i) => `${+i}` == `${i}` ? `${i}px` : i;
  return { getStyle: K(() => ({
    width: n(e.width),
    height: n(e.height),
    "--max-z-index": e.list.length + 1
  })) };
};
export {
  Q as useComputeStyle,
  ot as useStyle,
  lt as useTurnPage
};