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

aiot react components

import { jsx as l } from "react/jsx-runtime";
import { useSize as f } from "ahooks";
import { useRef as g, useState as d, useEffect as p } from "react";
function N(i) {
  const {
    url: s,
    onScaleChange: c,
    onLoad: n
  } = i, e = g(null), t = f(e), r = t == null ? void 0 : t.width, a = t == null ? void 0 : t.height, [o, u] = d();
  return p(() => {
    r && a && o && c(r / o.width, r, a);
  }, [r, a, o]), /* @__PURE__ */ l("img", {
    ref: e,
    src: s,
    className: "select-none",
    style: {
      maxWidth: "100%",
      maxHeight: "100%",
      cursor: "crosshair"
    },
    alt: "",
    onLoad: () => {
      if (e.current) {
        n && n(e.current);
        const {
          naturalWidth: h,
          naturalHeight: m
        } = e.current;
        u({
          width: h,
          height: m
        });
      }
    }
  });
}
export {
  N as default
};