@madup-inc/react-imagemarker/dist/index.modern.js

Awesome react image marker

import React, { useRef } from 'react';

function DefaultMarker(_ref) {
  var id = _ref.id;
  return React.createElement("div", {
    className: 'default-marker'
  }, React.createElement("div", null, id));
}

var index = (function (_ref) {
  var src = _ref.src,
      markers = _ref.markers,
      onImageClick = _ref.onImageClick;
  var wrapperRef = useRef(null);

  var handleClick = function handleClick(clickEvent) {
    var nativeEvent = clickEvent.nativeEvent;

    if (!wrapperRef || !wrapperRef.current) {
      throw Error('image wrapper is not found');
    }

    var newLocation = {
      x: nativeEvent.offsetX / wrapperRef.current.clientWidth * 100,
      y: nativeEvent.offsetY / wrapperRef.current.clientHeight * 100
    };
    onImageClick(newLocation, clickEvent, wrapperRef.current);
  };

  return React.createElement("div", {
    className: "react-imagemarker",
    style: {
      background: "url(" + src + ") center center / contain no-repeat"
    },
    ref: wrapperRef,
    onClick: handleClick
  }, markers.map(function (marker) {
    return React.createElement("div", {
      className: "marker",
      style: {
        top: "calc(" + marker.y + "% - 10px)",
        left: "calc(" + marker.x + "% - 10px)"
      },
      onClick: function onClick(e) {
        return e.stopPropagation();
      },
      key: marker.id
    }, typeof marker.render === 'function' ? marker.render({
      id: marker.id,
      x: marker.x,
      y: marker.y
    }) : React.createElement(DefaultMarker, {
      id: marker.id
    }));
  }));
});

export default index;
export { DefaultMarker };
//# sourceMappingURL=index.modern.js.map