@glodon-aiot/react-components/dist/es/TrackMap/index.mjs

aiot react components

var Tt = Object.defineProperty, $t = Object.defineProperties;
var Ft = Object.getOwnPropertyDescriptors;
var ht = Object.getOwnPropertySymbols;
var zt = Object.prototype.hasOwnProperty, Dt = Object.prototype.propertyIsEnumerable;
var yt = (x, l, y) => l in x ? Tt(x, l, { enumerable: !0, configurable: !0, writable: !0, value: y }) : x[l] = y, b = (x, l) => {
  for (var y in l || (l = {}))
    zt.call(l, y) && yt(x, y, l[y]);
  if (ht)
    for (var y of ht(l))
      Dt.call(l, y) && yt(x, y, l[y]);
  return x;
}, X = (x, l) => $t(x, Ft(l));
import { jsx as d, jsxs as Y } from "react/jsx-runtime";
import { useRef as D, useState as u, useEffect as h } from "react";
import Mt from "antd/es/tooltip";
import Ot from "react-moveable";
import "./style.less.mjs";
import mt from "./TrackPoint.mjs";
import { ConfigProvider as Ct } from "antd";
const Ut = (x) => {
  var ft;
  const {
    width: l,
    height: y,
    points: T,
    scale: a,
    pointSize: $ = 6,
    direction: q,
    activePointId: M,
    style: g,
    lineStyle: O,
    pointStyle: k,
    directionStyle: xt,
    marks: ot,
    resizable: H,
    transform: r,
    keepRatio: it = !1,
    onPointClick: J,
    onTransform: N,
    onPointsChange: C,
    onCancelResize: Wt,
    actions: B = !0,
    setIsSaved: st,
    isSaved: ct = !1
  } = x, S = D(null), w = D(null), s = D(null), E = D(null), K = D(null), [F, pt] = u(null), [Q, U] = u((r == null ? void 0 : r.scale) || [1, 1]), [V, Z] = u((r == null ? void 0 : r.rotate) || 0), [W, _] = u((r == null ? void 0 : r.translate) || [0, 0, 0, 0]), [bt, vt] = u([]), [f, Rt] = u(), [kt, at] = u(), [P, G] = u(H), [lt, tt] = u([]), [v, dt] = u(T), [I, Pt] = u(!0), [R, j] = u(), [m, z] = u(), [It, Nt] = u(typeof B != "boolean" ? B : B === !0 ? {} : null), A = ($ - $ / 4 * 0.9) * 2 / a;
  h(() => {
    Nt(typeof B != "boolean" ? B : B === !0 ? {} : null);
  }, [B]);
  const Bt = (t, e) => {
    if (!t.length)
      return;
    let i;
    return t.map((o) => {
      var p;
      if (!i) {
        i = o;
        return;
      }
      const c = /* @__PURE__ */ d("line", {
        x1: Number.isFinite(i.x) ? i.x : 0,
        y1: Number.isFinite(i.y) ? i.y : 0,
        x2: Number.isFinite(o.x) ? o.x : 0,
        y2: Number.isFinite(o.y) ? o.y : 0,
        style: X(b(b({
          stroke: "#1F66E1BF"
        }, O), i.lineStyle), {
          strokeWidth: Number((O == null ? void 0 : O.strokeWidth) || ((p = i.lineStyle) == null ? void 0 : p.strokeWidth) || 2) / e
        })
      }, o.id);
      return i = o, c;
    });
  }, ut = new ResizeObserver(() => {
    S.current && (w.current && (w.current.style.transform = "none", w.current.style.width = "auto", w.current.style.height = "100%"), w.current && (w.current.style.width = "100%", w.current.style.height = "100%"));
  });
  h(() => {
    var t;
    z((t = s.current) == null ? void 0 : t.getBoundingClientRect());
  }, [g == null ? void 0 : g.left, g == null ? void 0 : g.top, g == null ? void 0 : g.width, g == null ? void 0 : g.height, a]), h(() => {
    G(H);
  }, [H]), h(() => {
    dt(T || []);
  }, [T, lt]), h(() => {
    var t;
    (!((t = s.current) != null && t.style.transform) || s.current.style.transform === "none") && (U((r == null ? void 0 : r.scale) || [1, 1]), Z((r == null ? void 0 : r.rotate) || 0), _((r == null ? void 0 : r.translate) || [0, 0, 0, 0]));
  }, [(ft = s.current) == null ? void 0 : ft.style.transform]), h(() => {
    !s.current || P || (s.current.style.transform = "none", U((r == null ? void 0 : r.scale) || [1, 1]), Z((r == null ? void 0 : r.rotate) || 0), _((r == null ? void 0 : r.translate) || [0, 0, 0, 0]));
  }, [P]), h(() => {
    if (S.current)
      return ut.observe(S.current), () => {
        S.current && ut.unobserve(S.current);
      };
  }, [S.current]), h(() => {
    !F || !r || (F.throttleDragRotate = r.rotate, F.throttleScale = r.scale, F.throttleDrag = r.translate);
  }, [F, r]), h(() => {
    Rt(v == null ? void 0 : v.find((e) => e.id === M));
    let t = v.map((e) => {
      var p, nt, L;
      const i = e.x, n = e.y, o = e.id === M, c = $ * (o ? 1.2 : 1) / a;
      return /* @__PURE__ */ d(mt, {
        open: I,
        id: e.id,
        point: e,
        getTooltipContainer: () => K.current || document.body,
        x: i,
        y: n,
        r: k != null && k.r || (p = e.pointStyle) != null && p.r ? Number((k == null ? void 0 : k.r) || ((nt = e.pointStyle) == null ? void 0 : nt.r)) / a : c / 2,
        hidden: o,
        style: X(b(b({
          stroke: "#1F66E1BF",
          fill: "#fff",
          cursor: J ? "pointer" : "unset"
        }, k), e.pointStyle), {
          strokeWidth: Number(((L = e.pointStyle) == null ? void 0 : L.strokeWidth) || 2) / a,
          r: void 0
        }),
        onPointClick: J
      }, e.id);
    }) || [];
    vt(t);
  }, [v, M, a, I]), h(() => {
    var o, c, p;
    if (!f) {
      at(void 0);
      return;
    }
    const t = f.x, e = f.y, i = f.id === M, n = $ * (i ? 1.2 : 1) / a;
    at(/* @__PURE__ */ Y("g", {
      children: [q !== void 0 && /* @__PURE__ */ d("circle", {
        id: `mark-${f.id}`,
        cx: t,
        cy: e,
        r: `${A}`,
        strokeDasharray: A * 2 * Math.PI,
        strokeDashoffset: A * 2 * Math.PI / 360 * (360 - 60),
        style: b({
          transform: `rotate(${q + 240}deg)`,
          transformOrigin: `${t}px ${e}px`,
          strokeWidth: A * 2,
          stroke: "#1F66E1BF",
          fill: "transparent",
          pointerEvents: "none"
        }, xt)
      }), /* @__PURE__ */ d(mt, {
        open: I,
        point: f,
        getTooltipContainer: () => K.current || document.body,
        x: t,
        y: e,
        r: (o = f.pointStyle) != null && o.r ? Number((c = f.pointStyle) == null ? void 0 : c.r) / a : n / 2,
        style: X(b(b({
          stroke: "#1F66E1BF",
          fill: "#fff"
        }, k), f.pointStyle), {
          strokeWidth: Number(((p = f.pointStyle) == null ? void 0 : p.strokeWidth) || 2) / a,
          r: void 0
        }),
        onPointClick: J
      }, f.id)]
    }, f.id));
  }, [f, q, a, I]), h(() => {
    s.current && setTimeout(() => {
      var t, e;
      j((t = s.current) == null ? void 0 : t.getBBox()), z((e = s.current) == null ? void 0 : e.getBoundingClientRect());
    }, 100);
  }, [r]), h(() => {
    var e, i;
    if (!s.current)
      return;
    j((e = s.current) == null ? void 0 : e.getBBox()), z((i = s.current) == null ? void 0 : i.getBoundingClientRect()), new ResizeObserver(() => {
      var n, o;
      j((n = s.current) == null ? void 0 : n.getBBox()), z((o = s.current) == null ? void 0 : o.getBoundingClientRect());
    }).observe(s.current);
  }, [s.current]), h(() => {
    ct && (St(), st && st(!1));
  }, [ct]);
  const St = () => {
    var n;
    const t = (n = E.current) == null ? void 0 : n.getBoundingClientRect();
    if (!t) {
      C && C(T), G(!1);
      return;
    }
    const e = lt.map((o) => {
      const c = o.getBoundingClientRect();
      return {
        id: o.id.split("-")[1],
        x: (c.x + c.width / 2 - t.x) / a,
        y: (c.y + c.height / 2 - t.y) / a
      };
    }), i = T.map((o) => {
      const c = e == null ? void 0 : e.find((p) => p.id.toString() === o.id.toString());
      return c ? b(b({}, o), c) : o;
    });
    dt(i), C && C(i.length ? i.map((o, c) => ({
      id: o.id,
      x: o.x,
      y: o.y,
      order: c
    })) : T), G(!1);
  }, wt = (t) => t.map((e) => {
    const {
      render: i,
      renderData: n
    } = e, o = e.x * a, c = e.y * a;
    return /* @__PURE__ */ d(Mt, {
      className: "track-map-marker-tooltip",
      placement: "top",
      title: i(n, b({}, e)),
      open: !!n,
      style: {
        zIndex: 9999
      },
      children: /* @__PURE__ */ d("circle", {
        id: `mark-${e.id}`,
        cx: o,
        cy: c,
        r: $ / 2,
        style: {
          stroke: "#1F66E100",
          strokeWidth: 2,
          fill: "#fff0"
        },
        children: /* @__PURE__ */ d("span", {
          children: n.label
        })
      })
    }, e.id);
  }), gt = R ? {
    x: R.x + R.width / 2,
    y: R.y + R.height / 2
  } : {
    x: 0,
    y: 0
  }, et = v.reduce((t, e) => [Math.min(t[0], e.x), Math.max(t[1], e.x)], [0, 0]), rt = v.reduce((t, e) => [Math.min(t[0], e.y), Math.max(t[1], e.y)], [0, 0]);
  return /* @__PURE__ */ d(Ct, {
    prefixCls: "g-rc",
    children: /* @__PURE__ */ Y("div", {
      className: "track-map",
      style: {
        width: "100%",
        height: "100%"
      },
      ref: S,
      children: [/* @__PURE__ */ d("svg", {
        style: g,
        ref: E,
        viewBox: `0 0 ${l} ${y}`,
        children: /* @__PURE__ */ Y("g", {
          ref: s,
          x: et[0],
          y: rt[0],
          width: et[1] - et[0],
          height: rt[1] - rt[0],
          style: {
            transformOrigin: `${gt.x}px ${gt.y}px`,
            cursor: P ? "url('./images/icon-move.svg') 16 16, move" : "unset",
            transform: r && r.scale ? `${r.translate ? ` translate(${r.translate[0]}px, ${r.translate[1]}px)` : ""} rotate(${r.rotate}rad)${r.scale ? ` scale(${r.scale[0]}, ${r.scale[1]})` : ""}` : "none"
          },
          children: [R && /* @__PURE__ */ d("rect", {
            x: R.x,
            y: R.y,
            width: R.width,
            height: R.height,
            fill: "#ff000004"
          }), /* @__PURE__ */ d("g", {
            className: "track-lines",
            children: Bt((v == null ? void 0 : v.filter((t) => t.order > -1)) || [], a)
          }), /* @__PURE__ */ Y("g", {
            className: "track-points",
            children: [bt, kt]
          }), ot && /* @__PURE__ */ d("g", {
            children: wt(ot)
          })]
        })
      }), /* @__PURE__ */ d("div", {
        className: "tooltip-container",
        ref: K,
        style: {
          position: "fixed",
          top: (m == null ? void 0 : m.y) || 0,
          left: (m == null ? void 0 : m.x) || 0,
          width: (m == null ? void 0 : m.width) || 0,
          height: (m == null ? void 0 : m.height) || 0
        }
      }), P && s.current && E.current && /* @__PURE__ */ d(Ot, {
        className: "path-moveable-control-box",
        ref: (t) => {
          pt(t);
        },
        keepRatio: it,
        target: [s.current],
        draggable: !0,
        scalable: !0,
        rotatable: !0,
        padding: {
          left: 10,
          right: 10,
          top: 10,
          bottom: 10
        },
        onDrag: ({
          target: t,
          beforeDelta: e,
          beforeDist: i,
          left: n,
          top: o,
          right: c,
          bottom: p,
          delta: nt,
          dist: L,
          transform: Et,
          clientX: jt,
          clientY: At
        }) => {
          _(L), t.style.transform = Et;
        },
        onDragStart: ({
          inputEvent: t
        }) => {
          t.stopPropagation();
        },
        onDragEnd: () => {
          var e;
          const t = (e = s.current) == null ? void 0 : e.getElementsByTagName("circle");
          tt(t != null && t.length ? [...t] : []), N && N({
            rotate: V,
            translate: W,
            scale: Q
          }, t != null && t.length ? [...t] : [], E.current || void 0);
        },
        renderDirections: it ? ["nw", "ne", "sw", "se"] : ["n", "w", "e", "s", "nw", "ne", "sw", "se"],
        onScale: ({
          target: t,
          scale: e,
          transform: i
        }) => {
          var o;
          U(e), t.style.transform = i;
          const n = (o = s.current) == null ? void 0 : o.getElementsByTagName("circle");
          tt(n != null && n.length ? [...n] : []), N && N({
            rotate: V,
            translate: W,
            scale: e
          }, n != null && n.length ? [...n] : [], E.current || void 0);
        },
        onRotate: ({
          target: t,
          dist: e,
          transform: i
        }) => {
          var o;
          Z(e), t.style.transform = i;
          const n = (o = s.current) == null ? void 0 : o.getElementsByTagName("circle");
          tt(n != null && n.length ? [...n] : []), N && N({
            rotate: e,
            translate: W,
            scale: Q
          }, n != null && n.length ? [...n] : [], E.current || void 0);
        },
        onRenderEnd: () => {
          var e, i, n;
          const t = (e = s.current) == null ? void 0 : e.getElementsByTagName("circle");
          N && N({
            rotate: V,
            translate: W,
            scale: Q
          }, t != null && t.length ? [...t] : [], E.current || void 0), j((i = s.current) == null ? void 0 : i.getBBox()), z((n = s.current) == null ? void 0 : n.getBoundingClientRect());
        }
      })]
    })
  });
};
export {
  Ut as TrackMap
};