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

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

import { ref as R, nextTick as B, computed as b, onMounted as M, watch as y } from "vue";
import { useUtils as T } from "../MeComposable/useUtils/index.js";
/*!
          * mine-h5-ui v2.15.0
          * Copyright (c) 2025 biaov
          * @license MIT
          */
const { generateRandom: j } = T(), C = {
  list: () => [],
  direction: "horizontal",
  color: "#d9d9d9",
  // '#409eff'
  strokeWidth: 1,
  arrow: !0
}, L = (i) => {
  const d = R([]), u = i.arrow ? 10 : 0, g = R();
  let v = {};
  const c = ({ sx: t, sy: n, sw: a, sh: l, ex: r, ey: e, ew: h, eh: f }, m, $) => {
    let w, k, x;
    return m === C.direction ? (e += l / 2, n += l / 2, t < r ? (t += a, r -= u) : r += u + h, w = t + (r - t) / 2, x = $ ? `${w},${e}` : `${w},${n}`) : (r += a / 2, t += a / 2, n < e ? (n += l, e -= u) : e += u + f, k = n + (e - n) / 2, x = $ ? `${r},${k}` : `${t},${k}`), { sx: t, sy: n, ex: r, ey: e, text: x };
  }, s = b(() => {
    const [t = C.direction, n = C.direction] = Array.isArray(i.direction) ? i.direction : [i.direction, i.direction];
    return [t, n];
  }), o = () => {
    const t = structuredClone(i.list);
    if (!t.length) {
      d.value = [];
      return;
    }
    if (!g.value) return;
    const { x: n, y: a, width: l } = v;
    if (l === void 0) return;
    const r = [];
    t.forEach((e) => {
      e.sx -= n, e.sy -= a, e.ex -= n, e.ey -= a;
      const [{ sx: h, sy: f, text: m }, { ex: $, ey: w, text: k }] = s.value.map((x, p) => c(e, x, p));
      r.push(`M ${h},${f} C ${m} ${k} ${$},${w}`);
    }), d.value = r;
  };
  return M(() => {
    v = g.value.getBoundingClientRect(), o();
  }), y(() => i.list, o, { deep: !0, immediate: !0 }), { lines: d, besselCurveRef: g };
}, O = (i) => {
  const d = () => ({ markerWidth: 10, markerHeight: 8, refY: 4 }), u = b(() => {
    const v = d();
    return Object.keys(v).forEach((s) => {
      v[s] /= i.strokeWidth;
    }), v;
  }), g = j();
  return { marker: u, triangleId: g };
}, P = () => {
  const i = (c) => {
    const s = { x: 0, y: 0 };
    let o = c.parentNode;
    for (; o !== document.body; )
      s.y += o.scrollTop, s.x += o.scrollLeft, o = o.parentNode;
    return s;
  }, d = R([]), u = [], g = () => {
    const c = [];
    u.forEach(({ sx: s, sy: o, sw: t, sh: n, ex: a, ey: l, ew: r, eh: e, group: h }) => {
      const f = { sx: s, sy: o, sw: t, sh: n, ex: a, ey: l, ew: r, eh: e, group: h };
      !Object.values(f).some((m) => !m) && c.push(f);
    }), d.value.length = 0, d.value.push(...c);
  };
  return { renderBesselCurve: d, calcTargetRef: (c, { type: s, group: o }) => new Promise((t) => {
    if (!c) {
      t(!0);
      return;
    }
    B(() => {
      const { x: n, y: a, width: l, height: r } = c.getBoundingClientRect();
      if (!(l && r)) {
        t(!0);
        return;
      }
      const e = i(c), h = n + e.x, f = a + e.y, m = u.find((k) => k.group === o);
      let $;
      s === "start" ? $ = { sx: h, sy: f, sw: l, sh: r } : $ = { ex: h, ey: f, ew: l, eh: r };
      const w = Object.assign(m ?? {}, $, { group: o });
      !m && u.push(w), g(), t(!0);
    });
  }) };
};
export {
  C as defaultProps,
  L as useHandler,
  O as useMarker,
  P as useMeBesselCurve
};