@mint-ui/map/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.js

- React map library - Control various map with one interface - Google, Naver, Kakao map supported now - Typescript supported - Canvas marker supported

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
require('../../../../types/MapDrawables.js');
var MapTypes = require('../../../../types/MapTypes.js');
require('../../../../types/MapEventTypes.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function SVGPolygon(_a) {
  var path = _a.path,
      _b = _a.innerPath,
      innerPath = _b === void 0 ? [] : _b,
      _c = _a.background,
      background = _c === void 0 ? 'lightblue' : _c,
      _d = _a.svgProperties,
      svgProperties = _d === void 0 ? {} : _d,
      _e = _a.shapeProperties,
      shapeProperties = _e === void 0 ? {} : _e,
      _f = _a.mode,
      mode = _f === void 0 ? 'POLYGON' : _f,
      children = _a.children;
  var getPolygonInfo = React.useCallback(function (path) {
    var maxX, minX, maxY, minY;

    for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
      var offset = path_1[_i];

      if (maxX === undefined || offset.x > maxX) {
        maxX = offset.x;
      }

      if (minX === undefined || offset.x < minX) {
        minX = offset.x;
      }

      if (maxY === undefined || offset.y > maxY) {
        maxY = offset.y;
      }

      if (minY === undefined || offset.y < minY) {
        minY = offset.y;
      }
    }

    if (!maxX || !minX || !maxY || !minY) {
      return {
        containerLeft: 0,
        containerTop: 0,
        containerWidth: 0,
        containerHeight: 0
      };
    }

    var width = maxX - minX;
    var height = maxY - minY;
    return {
      containerLeft: minX,
      containerTop: minY,
      containerWidth: width,
      containerHeight: height
    };
  }, []);
  var getD = React.useCallback(function (path, innerPath, mode) {
    var isPolygon = mode === 'POLYGON';
    var out = ''; //path

    out += getLine(path, isPolygon); //inner path

    for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
      var inner = innerPath_1[_i];
      out += ' ' + getLine(inner, isPolygon);
    }

    return out;
  }, []);
  var getLine = React.useCallback(function (path, isPolygon) {
    return path.map(function (offset, idx) {
      if (idx === 0) {
        return "M ".concat(offset.x, ",").concat(offset.y);
      } else if (idx === 1) {
        return "L ".concat(offset.x, ",").concat(offset.y);
      } else {
        if (offset.equals(path[idx - 1])) {
          return '';
        } else {
          return "".concat(offset.x, ",").concat(offset.y);
        }
      }
    }).join(' ') + " ".concat(isPolygon ? 'Z' : "".concat(path[0].x, ",").concat(path[0].y));
  }, []);

  var _g = React.useState(0),
      width = _g[0],
      setWidth = _g[1];

  var _h = React.useState(0),
      height = _h[0],
      setHeight = _h[1];

  var _j = React.useState('M0 0'),
      d = _j[0],
      setD = _j[1];

  var _k = React.useState(new MapTypes.Offset(0, 0)),
      polygonAreaInfo = _k[0],
      setPolygonAreaInfo = _k[1];

  React.useEffect(function () {
    var info = getPolygonInfo(path);
    setPolygonAreaInfo(new MapTypes.Offset(Math.round(info.containerLeft), Math.round(info.containerTop)));
    setWidth(Math.round(info.containerWidth));
    setHeight(Math.round(info.containerHeight));
    setD(getD(path, innerPath, mode));
  }, [path, innerPath, mode]);
  return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
    pointerEvents: "none",
    overflow: 'visible',
    width: width,
    height: height,
    viewBox: "".concat(polygonAreaInfo.x, " ").concat(polygonAreaInfo.y, " ").concat(width, " ").concat(height)
  }, svgProperties), React__default["default"].createElement("path", tslib.__assign({
    fillRule: "evenodd",
    pointerEvents: "visiblepainted",
    fill: mode === 'POLYLINE' ? 'none' : background,
    stroke: mode === 'POLYLINE' ? 'black' : 'green',
    strokeLinejoin: "miter",
    strokeLinecap: "butt",
    d: d
  }, shapeProperties))), React__default["default"].createElement("div", {
    style: {
      pointerEvents: 'none',
      position: 'absolute',
      left: '0px',
      top: '0px',
      width: "".concat(width, "px"),
      height: "".concat(height, "px")
    }
  }, children));
}

exports.SVGPolygon = SVGPolygon;