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

aiot react components

import { jsxs as b, jsx as i, Fragment as ke } from "react/jsx-runtime";
import { forwardRef as dt, useRef as we, useState as a, useEffect as X, useImperativeHandle as gt } from "react";
import "./style.less.mjs";
import "../components/DocumentViewer/style.less.mjs";
import { Iconfont as ht } from "../Iconfont/index.mjs";
import { TrackMap as pt } from "../TrackMap/index.mjs";
import { PassMap as vt } from "../PassMap/index.mjs";
import { Zoom as yt } from "../Zoom/index.mjs";
import Bt from "antd/es/button";
import Ee from "../ConfirmableButton/index.mjs";
import { SaveOutlined as bt } from "@ant-design/icons";
let Pe;
const zt = dt((Se, Te) => {
  var ie, ae, ce, le, re, ue, me, fe, de, ge, he, pe, ve, ye, Be, be, xe, Me, Ie, Ce, Ne;
  const {
    url: ze,
    points: w,
    pointSize: We,
    direction: He,
    activePointId: Ye,
    lineStyle: Xe,
    pointStyle: Re,
    directionStyle: Le,
    onPointClick: $e,
    passes: E,
    activePassId: Oe,
    passStyle: De,
    activePassStyle: je,
    marks: Ue,
    draggable: p = !1,
    offsetEdge: Ve = [50, 50, 50, 50],
    zoomable: D = !1,
    zoomStep: M = 0.02,
    zoomMax: I = 2,
    zoomMin: C = 0,
    onImageLoad: j,
    trackEditable: U,
    trackEditing: R,
    keepRatio: Ze,
    transform: qe,
    onTrackEditingChange: g,
    onTransform: Fe,
    onPointsChange: V,
    actions: e = !0
  } = Se, x = we({}), v = we({}), [Z, Ae] = a(0), [q, Ge] = a(0), [u, L] = a(1), [m, y] = a(0), [f, B] = a(0), [l, $] = a(0), [r, O] = a(0), [F, Je] = a(!1), [A, P] = a(!1), [G, Ke] = a(), [S, T] = a({
    x: 0,
    y: 0
  }), [J, K, Q, _] = Ve, [d, N] = a(R), [ee, Qe] = a(1), [_e, te] = a(!1), [c, et] = a(typeof e != "boolean" ? e : e === !0 ? {} : null);
  X(() => {
    Qe(Math.round(u * 100) / 100);
  }, [u]), X(() => {
    N(R);
  }, [R]), X(() => {
    Pe = new ResizeObserver(oe), Pe.observe(v.current);
    const t = (o) => (o.preventDefault(), !1);
    return v.current.addEventListener("wheel", t), () => {
      v.current.removeEventListener("wheel", t);
    };
  }, []);
  const oe = () => {
    if (!v.current)
      return;
    const t = v.current.clientWidth, o = v.current.clientHeight, n = x.current.naturalWidth, s = x.current.naturalHeight, h = t / n, Y = o / s, k = h < Y ? h : Y, rt = (t - n * k) / 2, ut = (o - s * k) / 2, mt = n * k, ft = s * k;
    Ae(t), Ge(o), L(k), y(rt), B(ut), $(mt), O(ft), Je(!0), j && j(x.current);
  }, z = () => {
    if (!D || u >= I)
      return;
    let t = u * (1 + M), o = M;
    t >= I && (t = I, o = I / u - 1), y(m - l * (o / 2)), B(f - r * (o / 2)), $(l + l * o), O(r + r * o), L(t), H();
  }, W = () => {
    if (!D || u <= C)
      return;
    let t = u * (1 - M), o = M;
    t <= C && (t = C, o = 1 - C / u), y(m - l * (-o / 2)), B(f - r * (-o / 2)), $(l + l * -o), O(r + r * -o), L(t), H();
  };
  gt(Te, () => ({
    zoomIn: z,
    zoomOut: W
  }));
  const tt = (t) => (t.nativeEvent.deltaY < 0 ? z() : W(), !1), ot = (t) => {
    P(!0);
    const {
      pageX: o,
      pageY: n
    } = t;
    T({
      x: o,
      y: n
    });
  }, nt = (t) => {
    if (!A)
      return !1;
    const {
      pageX: o,
      pageY: n
    } = t, s = o - S.x, h = n - S.y;
    T({
      x: o,
      y: n
    }), y(m + s), B(f + h), H();
  }, ne = () => {
    P(!1);
  };
  window.onmouseup = () => {
    P(!1);
  };
  const H = () => {
    m < -l + _ && y(-l + _), f < -r + J && B(-r + J), m > Z - K && y(Z - K), f > q - Q && B(q - Q);
  }, st = () => {
    N(!d), g && g(!d);
  }, it = (t) => {
    const {
      touches: o
    } = t;
    if (console.log("onTouchStart"), console.log(o), P(!0), o.length < 2) {
      const {
        clientX: n,
        clientY: s
      } = o[0];
      T({
        x: n,
        y: s
      });
    } else
      Ke(o);
  }, at = (t) => {
    if (!A || !t.touches)
      return !1;
    const {
      clientX: o,
      clientY: n
    } = t.touches[0];
    if (t.touches.length < 2) {
      const s = o - S.x, h = n - S.y;
      T({
        x: o,
        y: n
      }), y(m + s), B(f + h), H();
    } else {
      console.log("onTouchMove"), console.log(t.touches);
      const s = t.touches, h = se(s[0], s[1]), Y = se(G[0], G[1]);
      h > Y ? z() : W();
    }
  }, se = (t, o) => {
    const n = o.pageX - t.pageX, s = o.pageY - t.pageY;
    return Math.sqrt(n * n + s * s);
  };
  X(() => {
    et(typeof e != "boolean" ? e : e === !0 ? {} : null);
  }, [e]);
  const ct = () => {
    N(!1), g && g(!1);
  }, lt = () => {
    te(!0);
  };
  return /* @__PURE__ */ b("div", {
    className: "image-map",
    ref: v,
    onMouseDown: p ? ot : void 0,
    onMouseMove: p ? nt : void 0,
    onMouseUp: p ? ne : void 0,
    onWheel: p ? tt : void 0,
    onTouchStart: p ? it : void 0,
    onTouchMove: p ? at : void 0,
    onTouchEnd: p ? ne : void 0,
    children: [/* @__PURE__ */ i("img", {
      className: "img",
      style: {
        position: "absolute",
        left: m,
        top: f,
        width: l,
        height: r
      },
      ref: x,
      onLoad: oe,
      src: ze,
      alt: ""
    }), F && (E == null ? void 0 : E.length) && /* @__PURE__ */ i(vt, {
      style: {
        position: "absolute",
        left: m,
        top: f,
        width: l,
        height: r
      },
      passes: E,
      scale: u,
      activePassId: Oe,
      passStyle: De,
      activePassStyle: je
    }), F && !!(w != null && w.length) && /* @__PURE__ */ i(pt, {
      style: {
        position: "absolute",
        left: m,
        top: f,
        width: l,
        height: r,
        overflow: "visible"
      },
      width: x.current.naturalWidth,
      height: x.current.naturalHeight,
      transform: qe,
      movable: d,
      resizable: d,
      points: w,
      scale: u,
      pointSize: We,
      direction: He,
      activePointId: Ye,
      lineStyle: Xe,
      pointStyle: Re,
      directionStyle: Le,
      keepRatio: Ze,
      marks: Ue,
      onPointClick: $e,
      onTransform: Fe,
      onPointsChange: (t) => {
        V && V(t), N(!1), g && g(!1);
      },
      onCancelResize: () => {
        N(!1), g && g(!1);
      },
      actions: e,
      setIsSaved: te,
      isSaved: _e
    }), U && /* @__PURE__ */ b("div", {
      className: "image-map-toolbar",
      children: [/* @__PURE__ */ i(yt, {
        className: "zoom-controller",
        value: ee,
        min: C,
        max: I,
        step: M,
        showText: !0,
        onChange: (t) => {
          ee > t ? W() : z();
        }
      }), U && (d && e ? /* @__PURE__ */ b(ke, {
        children: [/* @__PURE__ */ i("div", {
          className: "line"
        }), /* @__PURE__ */ b("div", {
          className: "editing-controller",
          children: [/* @__PURE__ */ i(Ee, {
            children: typeof e != "boolean" && ((ie = e.cancelButton) == null ? void 0 : ie.children) || void 0,
            name: typeof e != "boolean" && ((ae = e.cancelButton) == null ? void 0 : ae.text) || "退出编辑",
            className: `editing-controller${d ? " active" : ""} ${typeof e != "boolean" && ((ce = e.cancelButton) == null ? void 0 : ce.className) || ""}`,
            confirm: ((le = c == null ? void 0 : c.cancelButton) == null ? void 0 : le.confirm) === !0 ? {
              text: "调整记录将不被保存"
            } : (re = c == null ? void 0 : c.cancelButton) != null && re.confirm ? c.cancelButton.confirm : !1,
            style: typeof e != "boolean" && ((ue = e.cancelButton) == null ? void 0 : ue.style) || void 0,
            onConfirm: ct
          }), /* @__PURE__ */ i(Ee, {
            type: "primary",
            children: typeof e != "boolean" && ((me = e.okButton) == null ? void 0 : me.children) || /* @__PURE__ */ b("div", {
              className: "save-detail",
              children: [/* @__PURE__ */ i(bt, {}), /* @__PURE__ */ i("span", {
                children: "保存"
              })]
            }),
            name: typeof e != "boolean" && ((fe = e.okButton) != null && fe.confirm) ? ((de = e.okButton) == null ? void 0 : de.text) || "保存" : "确定",
            className: `editing-controller${d ? " active" : ""} ${typeof e != "boolean" && ((ge = e.okButton) == null ? void 0 : ge.className) || ""}`,
            confirm: ((he = c == null ? void 0 : c.okButton) == null ? void 0 : he.confirm) === !0 ? {
              text: "调整记录保存后，将改变当前巡检数据状态"
            } : (pe = c == null ? void 0 : c.okButton) != null && pe.confirm ? c.okButton.confirm : !1,
            style: typeof e != "boolean" && ((ve = e.okButton) == null ? void 0 : ve.style) || void 0,
            onConfirm: lt
          })]
        })]
      }) : /* @__PURE__ */ b(ke, {
        children: [/* @__PURE__ */ i("div", {
          className: "line"
        }), /* @__PURE__ */ i("div", {
          className: "moveable-controller",
          children: /* @__PURE__ */ i(Bt, {
            title: d ? typeof e != "boolean" && ((ye = e.editButton) == null ? void 0 : ye.exitTitleText) || "退出编辑" : typeof e != "boolean" && ((Be = e.editButton) == null ? void 0 : Be.titleText) || "调整轨迹",
            className: `moveable-controller-btn${d ? " active" : ""} ${typeof e != "boolean" && ((be = e.editButton) == null ? void 0 : be.className) || ""}`,
            style: typeof e != "boolean" && ((xe = e.editButton) == null ? void 0 : xe.style) || void 0,
            onClick: st,
            children: typeof e != "boolean" ? (Me = e.editButton) != null && Me.children ? (Ie = e.editButton) == null ? void 0 : Ie.children : (Ce = e.editButton) != null && Ce.text ? /* @__PURE__ */ i("span", {
              children: (Ne = e.editButton) == null ? void 0 : Ne.text
            }) : /* @__PURE__ */ b("div", {
              className: "btn-change",
              children: [/* @__PURE__ */ i(ht, {
                type: "icon-tiaozheng"
              }), /* @__PURE__ */ i("span", {
                children: "修改"
              })]
            }) : void 0
          })
        })]
      }))]
    })]
  });
});
export {
  zt as ImageMap
};