react-planner-viewer/es/components/viewer2d/area.js

react-planner-viewer is a React Component for view plans builded with react-planner in 2D mode

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

import React from 'react';
import PropTypes from 'prop-types';
import polylabel from 'polylabel';
import areapolygon from 'area-polygon';
import _ from 'lodash';

var STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: '12px',
  fontFamily: '"Courier New", Courier, monospace',
  pointerEvents: 'none',
  fontWeight: 'bold',
  zIndex: 100,

  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
  WebkitTouchCallout: 'none', /* iOS Safari */
  WebkitUserSelect: 'none', /* Chrome/Safari/Opera */
  MozUserSelect: 'none', /* Firefox */
  MsUserSelect: 'none', /* Internet Explorer/Edge */
  userSelect: 'none'
};

export default function Area(_ref) {
  var layer = _ref.layer,
      area = _ref.area,
      catalog = _ref.catalog,
      fontSize = _ref.fontSize;


  var rendered = catalog.getElement(area.type).render2D(area, layer);
  var center = void 0;

  var polygon = area.vertices.toArray().map(function (vertexID) {
    var _layer$vertices$get = layer.vertices.get(vertexID),
        x = _layer$vertices$get.x,
        y = _layer$vertices$get.y;

    return [x, y];
  });

  var polygonWithHoles = polygon;

  area.holes.forEach(function (holeID) {

    var polygonHole = layer.areas.get(holeID).vertices.toArray().map(function (vertexID) {
      var _layer$vertices$get2 = layer.vertices.get(vertexID),
          x = _layer$vertices$get2.x,
          y = _layer$vertices$get2.y;

      return [x, y];
    });

    polygonWithHoles = polygonWithHoles.concat(polygonHole.reverse());
  });

  center = polylabel([polygonWithHoles], 1.0);
  var renderAreaName = React.createElement(
    'text',
    { x: '0', y: '0', transform: 'translate(' + center[0] + ' ' + center[1] + ') scale(1, -1)', style: _extends({}, STYLE_TEXT, { fontSize: fontSize + 'px' }) },
    area.getIn(['properties', 'name'])
  );

  return React.createElement(
    'g',
    {
      'data-element-root': true,
      'data-prototype': area.prototype,
      'data-id': area.id,
      'data-selected': area.selected,
      'data-layer': layer.id,
      'data-name': area.properties.get('name')
    },
    rendered,
    renderAreaName,
    ');'
  );
}

Area.propTypes = {
  area: PropTypes.object.isRequired,
  layer: PropTypes.object.isRequired,
  catalog: PropTypes.object.isRequired
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ZpZXdlcjJkL2FyZWEuanN4Il0sIm5hbWVzIjpbIlJlYWN0IiwiUHJvcFR5cGVzIiwicG9seWxhYmVsIiwiYXJlYXBvbHlnb24iLCJfIiwiU1RZTEVfVEVYVCIsInRleHRBbmNob3IiLCJmb250U2l6ZSIsImZvbnRGYW1pbHkiLCJwb2ludGVyRXZlbnRzIiwiZm9udFdlaWdodCIsInpJbmRleCIsIldlYmtpdFRvdWNoQ2FsbG91dCIsIldlYmtpdFVzZXJTZWxlY3QiLCJNb3pVc2VyU2VsZWN0IiwiTXNVc2VyU2VsZWN0IiwidXNlclNlbGVjdCIsIkFyZWEiLCJsYXllciIsImFyZWEiLCJjYXRhbG9nIiwicmVuZGVyZWQiLCJnZXRFbGVtZW50IiwidHlwZSIsInJlbmRlcjJEIiwiY2VudGVyIiwicG9seWdvbiIsInZlcnRpY2VzIiwidG9BcnJheSIsIm1hcCIsImdldCIsInZlcnRleElEIiwieCIsInkiLCJwb2x5Z29uV2l0aEhvbGVzIiwiaG9sZXMiLCJmb3JFYWNoIiwicG9seWdvbkhvbGUiLCJhcmVhcyIsImhvbGVJRCIsImNvbmNhdCIsInJldmVyc2UiLCJyZW5kZXJBcmVhTmFtZSIsImdldEluIiwicHJvdG90eXBlIiwiaWQiLCJzZWxlY3RlZCIsInByb3BlcnRpZXMiLCJwcm9wVHlwZXMiLCJvYmplY3QiLCJpc1JlcXVpcmVkIl0sIm1hcHBpbmdzIjoiOztBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFDQSxPQUFPQyxTQUFQLE1BQXNCLFlBQXRCO0FBQ0EsT0FBT0MsU0FBUCxNQUFzQixXQUF0QjtBQUNBLE9BQU9DLFdBQVAsTUFBd0IsY0FBeEI7QUFDQSxPQUFPQyxDQUFQLE1BQWMsUUFBZDs7QUFFQSxJQUFNQyxhQUFhO0FBQ2pCQyxjQUFZLFFBREs7QUFFakJDLFlBQVUsTUFGTztBQUdqQkMsY0FBWSxtQ0FISztBQUlqQkMsaUJBQWUsTUFKRTtBQUtqQkMsY0FBWSxNQUxLO0FBTWpCQyxVQUFRLEdBTlM7O0FBUWpCO0FBQ0FDLHNCQUFvQixNQVRILEVBU1c7QUFDNUJDLG9CQUFrQixNQVZELEVBVVM7QUFDMUJDLGlCQUFlLE1BWEUsRUFXTTtBQUN2QkMsZ0JBQWMsTUFaRyxFQVlLO0FBQ3RCQyxjQUFZO0FBYkssQ0FBbkI7O0FBaUJBLGVBQWUsU0FBU0MsSUFBVCxPQUFrRDtBQUFBLE1BQWxDQyxLQUFrQyxRQUFsQ0EsS0FBa0M7QUFBQSxNQUEzQkMsSUFBMkIsUUFBM0JBLElBQTJCO0FBQUEsTUFBckJDLE9BQXFCLFFBQXJCQSxPQUFxQjtBQUFBLE1BQVpiLFFBQVksUUFBWkEsUUFBWTs7O0FBRS9ELE1BQUljLFdBQVdELFFBQVFFLFVBQVIsQ0FBbUJILEtBQUtJLElBQXhCLEVBQThCQyxRQUE5QixDQUF1Q0wsSUFBdkMsRUFBNkNELEtBQTdDLENBQWY7QUFDQSxNQUFJTyxlQUFKOztBQUdBLE1BQUlDLFVBQVVQLEtBQUtRLFFBQUwsQ0FBY0MsT0FBZCxHQUF3QkMsR0FBeEIsQ0FBNEIsb0JBQVk7QUFBQSw4QkFDckNYLE1BQU1TLFFBQU4sQ0FBZUcsR0FBZixDQUFtQkMsUUFBbkIsQ0FEcUM7QUFBQSxRQUM5Q0MsQ0FEOEMsdUJBQzlDQSxDQUQ4QztBQUFBLFFBQzNDQyxDQUQyQyx1QkFDM0NBLENBRDJDOztBQUVwRCxXQUFPLENBQUNELENBQUQsRUFBSUMsQ0FBSixDQUFQO0FBQ0QsR0FIYSxDQUFkOztBQUtBLE1BQUlDLG1CQUFtQlIsT0FBdkI7O0FBRUFQLE9BQUtnQixLQUFMLENBQVdDLE9BQVgsQ0FBbUIsa0JBQVU7O0FBRTNCLFFBQUlDLGNBQWNuQixNQUFNb0IsS0FBTixDQUFZUixHQUFaLENBQWdCUyxNQUFoQixFQUF3QlosUUFBeEIsQ0FBaUNDLE9BQWpDLEdBQTJDQyxHQUEzQyxDQUErQyxvQkFBWTtBQUFBLGlDQUM1RFgsTUFBTVMsUUFBTixDQUFlRyxHQUFmLENBQW1CQyxRQUFuQixDQUQ0RDtBQUFBLFVBQ3JFQyxDQURxRSx3QkFDckVBLENBRHFFO0FBQUEsVUFDbEVDLENBRGtFLHdCQUNsRUEsQ0FEa0U7O0FBRTNFLGFBQU8sQ0FBQ0QsQ0FBRCxFQUFJQyxDQUFKLENBQVA7QUFDRCxLQUhpQixDQUFsQjs7QUFLQUMsdUJBQW1CQSxpQkFBaUJNLE1BQWpCLENBQXdCSCxZQUFZSSxPQUFaLEVBQXhCLENBQW5CO0FBQ0QsR0FSRDs7QUFVQWhCLFdBQVN2QixVQUFVLENBQUNnQyxnQkFBRCxDQUFWLEVBQThCLEdBQTlCLENBQVQ7QUFDQSxNQUFNUSxpQkFDSjtBQUFBO0FBQUEsTUFBTSxHQUFFLEdBQVIsRUFBWSxHQUFFLEdBQWQsRUFBa0IsMEJBQXdCakIsT0FBTyxDQUFQLENBQXhCLFNBQXFDQSxPQUFPLENBQVAsQ0FBckMsbUJBQWxCLEVBQWtGLG9CQUFZcEIsVUFBWixJQUF3QkUsVUFBVUEsV0FBVyxJQUE3QyxHQUFsRjtBQUNHWSxTQUFLd0IsS0FBTCxDQUFXLENBQUMsWUFBRCxFQUFlLE1BQWYsQ0FBWDtBQURILEdBREY7O0FBTUEsU0FFRTtBQUFBO0FBQUE7QUFDRSwrQkFERjtBQUVFLHdCQUFnQnhCLEtBQUt5QixTQUZ2QjtBQUdFLGlCQUFTekIsS0FBSzBCLEVBSGhCO0FBSUUsdUJBQWUxQixLQUFLMkIsUUFKdEI7QUFLRSxvQkFBWTVCLE1BQU0yQixFQUxwQjtBQU1FLG1CQUFXMUIsS0FBSzRCLFVBQUwsQ0FBZ0JqQixHQUFoQixDQUFvQixNQUFwQjtBQU5iO0FBUUdULFlBUkg7QUFTR3FCLGtCQVRIO0FBQUE7QUFBQSxHQUZGO0FBaUJEOztBQUVEekIsS0FBSytCLFNBQUwsR0FBaUI7QUFDZjdCLFFBQU1sQixVQUFVZ0QsTUFBVixDQUFpQkMsVUFEUjtBQUVmaEMsU0FBT2pCLFVBQVVnRCxNQUFWLENBQWlCQyxVQUZUO0FBR2Y5QixXQUFTbkIsVUFBVWdELE1BQVYsQ0FBaUJDO0FBSFgsQ0FBakIiLCJmaWxlIjoiYXJlYS5qcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHBvbHlsYWJlbCBmcm9tICdwb2x5bGFiZWwnO1xuaW1wb3J0IGFyZWFwb2x5Z29uIGZyb20gJ2FyZWEtcG9seWdvbic7XG5pbXBvcnQgXyBmcm9tICdsb2Rhc2gnO1xuXG5jb25zdCBTVFlMRV9URVhUID0ge1xuICB0ZXh0QW5jaG9yOiAnbWlkZGxlJyxcbiAgZm9udFNpemU6ICcxMnB4JyxcbiAgZm9udEZhbWlseTogJ1wiQ291cmllciBOZXdcIiwgQ291cmllciwgbW9ub3NwYWNlJyxcbiAgcG9pbnRlckV2ZW50czogJ25vbmUnLFxuICBmb250V2VpZ2h0OiAnYm9sZCcsXG4gIHpJbmRleDogMTAwLFxuXG4gIC8vaHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL3F1ZXN0aW9ucy84MjY3ODIvaG93LXRvLWRpc2FibGUtdGV4dC1zZWxlY3Rpb24taGlnaGxpZ2h0aW5nLXVzaW5nLWNzc1xuICBXZWJraXRUb3VjaENhbGxvdXQ6ICdub25lJywgLyogaU9TIFNhZmFyaSAqL1xuICBXZWJraXRVc2VyU2VsZWN0OiAnbm9uZScsIC8qIENocm9tZS9TYWZhcmkvT3BlcmEgKi9cbiAgTW96VXNlclNlbGVjdDogJ25vbmUnLCAvKiBGaXJlZm94ICovXG4gIE1zVXNlclNlbGVjdDogJ25vbmUnLCAvKiBJbnRlcm5ldCBFeHBsb3Jlci9FZGdlICovXG4gIHVzZXJTZWxlY3Q6ICdub25lJ1xufTtcblxuXG5leHBvcnQgZGVmYXVsdCBmdW5jdGlvbiBBcmVhKHsgbGF5ZXIsIGFyZWEsIGNhdGFsb2csIGZvbnRTaXplIH0pIHtcblxuICBsZXQgcmVuZGVyZWQgPSBjYXRhbG9nLmdldEVsZW1lbnQoYXJlYS50eXBlKS5yZW5kZXIyRChhcmVhLCBsYXllcik7XG4gIGxldCBjZW50ZXI7XG5cblxuICBsZXQgcG9seWdvbiA9IGFyZWEudmVydGljZXMudG9BcnJheSgpLm1hcCh2ZXJ0ZXhJRCA9PiB7XG4gICAgbGV0IHsgeCwgeSB9ID0gbGF5ZXIudmVydGljZXMuZ2V0KHZlcnRleElEKTtcbiAgICByZXR1cm4gW3gsIHldO1xuICB9KTtcblxuICBsZXQgcG9seWdvbldpdGhIb2xlcyA9IHBvbHlnb247XG5cbiAgYXJlYS5ob2xlcy5mb3JFYWNoKGhvbGVJRCA9PiB7XG5cbiAgICBsZXQgcG9seWdvbkhvbGUgPSBsYXllci5hcmVhcy5nZXQoaG9sZUlEKS52ZXJ0aWNlcy50b0FycmF5KCkubWFwKHZlcnRleElEID0+IHtcbiAgICAgIGxldCB7IHgsIHkgfSA9IGxheWVyLnZlcnRpY2VzLmdldCh2ZXJ0ZXhJRCk7XG4gICAgICByZXR1cm4gW3gsIHldO1xuICAgIH0pO1xuXG4gICAgcG9seWdvbldpdGhIb2xlcyA9IHBvbHlnb25XaXRoSG9sZXMuY29uY2F0KHBvbHlnb25Ib2xlLnJldmVyc2UoKSk7XG4gIH0pO1xuXG4gIGNlbnRlciA9IHBvbHlsYWJlbChbcG9seWdvbldpdGhIb2xlc10sIDEuMCk7XG4gIGNvbnN0IHJlbmRlckFyZWFOYW1lID0gKFxuICAgIDx0ZXh0IHg9XCIwXCIgeT1cIjBcIiB0cmFuc2Zvcm09e2B0cmFuc2xhdGUoJHtjZW50ZXJbMF19ICR7Y2VudGVyWzFdfSkgc2NhbGUoMSwgLTEpYH0gc3R5bGU9e3sgLi4uU1RZTEVfVEVYVCwgZm9udFNpemU6IGZvbnRTaXplICsgJ3B4JyB9fT5cbiAgICAgIHthcmVhLmdldEluKFsncHJvcGVydGllcycsICduYW1lJ10pfVxuICAgIDwvdGV4dD5cbiAgKTtcblxuICByZXR1cm4gKFxuXG4gICAgPGdcbiAgICAgIGRhdGEtZWxlbWVudC1yb290XG4gICAgICBkYXRhLXByb3RvdHlwZT17YXJlYS5wcm90b3R5cGV9XG4gICAgICBkYXRhLWlkPXthcmVhLmlkfVxuICAgICAgZGF0YS1zZWxlY3RlZD17YXJlYS5zZWxlY3RlZH1cbiAgICAgIGRhdGEtbGF5ZXI9e2xheWVyLmlkfVxuICAgICAgZGF0YS1uYW1lPXthcmVhLnByb3BlcnRpZXMuZ2V0KCduYW1lJyl9XG4gICAgPlxuICAgICAge3JlbmRlcmVkfVxuICAgICAge3JlbmRlckFyZWFOYW1lfVxuXG4gICAgICApO1xuICAgIDwvZz5cbiAgKVxuXG59XG5cbkFyZWEucHJvcFR5cGVzID0ge1xuICBhcmVhOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG4gIGxheWVyOiBQcm9wVHlwZXMub2JqZWN0LmlzUmVxdWlyZWQsXG4gIGNhdGFsb2c6IFByb3BUeXBlcy5vYmplY3QuaXNSZXF1aXJlZCxcbn07XG5cblxuIl19