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

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

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