kitchen-simulator 1.0.0-DIY-1119

package/es/class/vertex.js

@@ -0,0 +1,204 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { List, Map } from 'immutable';
+import { Vertex as VertexModel } from "../models";
+import { GeometryUtils, IDBroker, SnapSceneUtils, SnapUtils } from "../utils/export";
+import { END_DRAGGING_VERTEX, MODE_DRAGGING_VERTEX } from "../constants";
+import { Layer, Line } from "../class/export";
+import { isEmpty } from "../utils/helper";
+var Vertex = /*#__PURE__*/function () {
+  function Vertex() {
+    _classCallCheck(this, Vertex);
+  }
+  return _createClass(Vertex, null, [{
+    key: "add",
+    value: function add(state, layerID, x, y, relatedPrototype, relatedID) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices']).find(function (vertex) {
+        return GeometryUtils.samePoints(vertex, {
+          x: x,
+          y: y
+        });
+      });
+      if (vertex) {
+        vertex = vertex.update(relatedPrototype, function (related) {
+          return related.push(relatedID);
+        });
+      } else {
+        vertex = new VertexModel(_defineProperty({
+          id: IDBroker.acquireID(),
+          name: 'Vertex',
+          x: x,
+          y: y
+        }, relatedPrototype, new List([relatedID])));
+      }
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertex.id], vertex);
+      return {
+        updatedState: state,
+        vertex: vertex
+      };
+    }
+  }, {
+    key: "setAttributes",
+    value: function setAttributes(state, layerID, vertexID, vertexAttributes) {
+      state = state.mergeIn(['scene', 'layers', layerID, 'vertices', vertexID], vertexAttributes);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "addElement",
+    value: function addElement(state, layerID, vertexID, elementPrototype, elementID) {
+      state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+        return list.push(elementID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "removeElement",
+    value: function removeElement(state, layerID, vertexID, elementPrototype, elementID) {
+      var elementIndex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype]).findIndex(function (el) {
+        return el === elementID;
+      });
+      if (elementIndex !== -1) {
+        state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+          return list.remove(elementIndex);
+        });
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "select",
+    value: function select(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], true);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.push(vertexID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "unselect",
+    value: function unselect(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], false);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.filter(function (el) {
+          return el.id !== vertexID;
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "remove",
+    value: function remove(state, layerID, vertexID, relatedPrototype, relatedID, forceRemove) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+      if (vertex) {
+        if (relatedPrototype && relatedID) vertex = vertex.update(relatedPrototype, function (related) {
+          var index = related.findIndex(function (ID) {
+            return relatedID === ID;
+          });
+          return related["delete"](index);
+        });
+        var inUse = vertex.areas.size || vertex.lines.size;
+        if (inUse && !forceRemove) {
+          state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID], vertex);
+        } else {
+          state = state.deleteIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginDraggingVertex",
+    value: function beginDraggingVertex(state, layerID, vertexID, x, y) {
+      var snapElements = SnapSceneUtils.sceneSnapElements(state.scene, new List(), state.snapMask);
+      state = state.merge({
+        mode: MODE_DRAGGING_VERTEX,
+        snapElements: snapElements,
+        draggingSupport: Map({
+          layerID: layerID,
+          vertexID: vertexID,
+          previousMode: state.get('mode')
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingVertex",
+    value: function updateDraggingVertex(state, x, y) {
+      var _state = state,
+        draggingSupport = _state.draggingSupport,
+        snapElements = _state.snapElements,
+        scene = _state.scene;
+      var snap = null;
+      if (state.snapMask && !state.snapMask.isEmpty()) {
+        snap = SnapUtils.nearestSnap(snapElements, x, y, state.snapMask);
+        if (snap) {
+          var _snap$point = snap.point;
+          x = _snap$point.x;
+          y = _snap$point.y;
+        }
+      }
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      state = state.merge({
+        activeSnapElement: snap ? snap.snap : null,
+        scene: scene.mergeIn(['layers', layerID, 'vertices', vertexID], {
+          x: x,
+          y: y
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDraggingVertex",
+    value: function endDraggingVertex(state, x, y) {
+      var _state2 = state,
+        draggingSupport = _state2.draggingSupport;
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      var lines = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, 'lines']);
+      if (!isEmpty(lines)) {
+        state = lines.reduce(function (reducedState, lineID) {
+          var eachLine = reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]);
+          if (isEmpty(eachLine)) return reducedState;
+          reducedState = Layer.removeZeroLengthLines(reducedState, layerID).updatedState;
+          reducedState = Layer.mergeEqualsVertices(reducedState, layerID, vertexID).updatedState;
+
+          // reducedState = Line.select(
+          //   reducedState,
+          //   layerID,
+          //   eachLine.id
+          // ).updatedState;
+
+          reducedState = reducedState.setIn(['mode'], MODE_DRAGGING_VERTEX);
+          reducedState = Line.applyWallChanges(reducedState, END_DRAGGING_VERTEX).updatedState;
+          return reducedState;
+        }, state);
+      }
+      state = state.merge({
+        mode: draggingSupport.get('previousMode'),
+        draggingSupport: null,
+        activeSnapElement: null,
+        snapElements: new List()
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }]);
+}();
+export { Vertex as default };

package/es/components/content.js

@@ -0,0 +1,149 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import Viewer2D from "./viewer2d/viewer2d";
+import Viewer3D from "./viewer3d/viewer3d";
+import Viewer3DFirstPerson from "./viewer3d/viewer3d-first-person";
+// import CatalogList from './catalog-view/catalog-list';
+// import ProjectConfigurator from './configurator/project-configurator';
+import * as constants from "../constants";
+import Front3D from "./viewer3d/front3D";
+export default function Content(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    state = _ref.state,
+    customContents = _ref.customContents,
+    setToolbar = _ref.setToolbar,
+    replaceCabinet = _ref.replaceCabinet,
+    keyDownEnable = _ref.keyDownEnable,
+    catalog = _ref.catalog,
+    onInternalEvent = _ref.onInternalEvent;
+  var mode = state.get('mode');
+
+  // Internal Event for unselect_all
+  var prevSelectedCountRef = useRef(null);
+  useEffect(function () {
+    var selectedCount = state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size;
+
+    // Skip the initial mount/hydration; only emit when selection transitions from non-empty -> empty.
+    if (prevSelectedCountRef.current === null) {
+      prevSelectedCountRef.current = selectedCount;
+      return;
+    }
+    var prevSelectedCount = prevSelectedCountRef.current;
+    prevSelectedCountRef.current = selectedCount;
+    if (prevSelectedCount > 0 && selectedCount < 1) {
+      onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+        type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+        value: null
+      });
+    }
+  }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
+  switch (mode) {
+    // this mode is when view elevation
+    case constants.MODE_ELEVATION_VIEW:
+      return /*#__PURE__*/React.createElement(Front3D, {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        catalog: catalog
+      });
+    case constants.MODE_3D_VIEW:
+      return /*#__PURE__*/React.createElement(Viewer3D, {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
+      });
+    case constants.MODE_3D_FIRST_PERSON:
+      return /*#__PURE__*/React.createElement(Viewer3DFirstPerson, {
+        state: state,
+        width: width,
+        height: height
+      });
+
+    // case constants.MODE_VIEWING_CATALOG:
+    //   return (
+    //     <CatalogList
+    //       state={state}
+    //       param={match}
+    //       width={width}
+    //       height={height}
+    //       categoryData={this.props.categoryData}
+    //     />
+    //   );
+
+    case constants.MODE_IDLE:
+    case constants.MODE_2D_ZOOM_IN:
+    case constants.MODE_2D_ZOOM_OUT:
+    case constants.MODE_2D_PAN:
+    case constants.MODE_WAITING_DRAWING_LINE:
+    case constants.MODE_DRAGGING_LINE:
+    case constants.MODE_DRAGGING_VERTEX:
+    case constants.MODE_DRAGGING_ITEM:
+    case constants.MODE_DRAWING_LINE:
+    case constants.MODE_DRAWING_HOLE:
+    case constants.MODE_DRAWING_ITEM:
+    case constants.MODE_DRAGGING_HOLE:
+    case constants.MODE_ROTATING_ITEM:
+      return /*#__PURE__*/React.createElement(Viewer2D, {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        onInternalEvent: onInternalEvent
+      });
+    case constants.MODE_ROTATING_ITEM_3D:
+    case constants.MODE_DRAGGING_ITEM_3D:
+    case constants.MODE_IDLE_3D:
+    case constants.MODE_DRAWING_ITEM_3D:
+    case constants.MODE_DRAWING_HOLE_3D:
+    case constants.MODE_DRAGGING_HOLE_3D:
+      return /*#__PURE__*/React.createElement(Viewer3D, {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
+      });
+
+    // case constants.MODE_CONFIGURING_PROJECT:
+    //   return (
+    //     <ProjectConfigurator width={width} height={height} state={state} />
+    //   );
+
+    default:
+      if (customContents.hasOwnProperty(mode)) {
+        var CustomContent = customContents[mode];
+        return /*#__PURE__*/React.createElement(CustomContent, {
+          width: width,
+          height: height,
+          state: state
+        });
+      } else {
+        throw new Error("Mode ".concat(mode, " doesn't have a mapped content"));
+      }
+  }
+}
+Content.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  replaceCabinet: PropTypes.func.isRequired,
+  onInternalEvent: PropTypes.func.isRequired
+};
+Content.contextTypes = {
+  projectActions: PropTypes.object.isRequired
+};

package/es/components/export.js

@@ -0,0 +1,7 @@
+import Content from "./content";
+import Viewer2DComponents from "./viewer2d/export";
+import StyleComponents from "./style/export";
+
+export { Content, Viewer2DComponents, StyleComponents };
+
+export default { Content, Viewer2DComponents, StyleComponents };

package/es/components/style/export.js

@@ -0,0 +1,5 @@
+import FormNumberInput from "./form-number-input";
+export { FormNumberInput };
+export default {
+  FormNumberInput: FormNumberInput
+};

package/es/components/style/form-number-input.js

@@ -0,0 +1,183 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { KEYBOARD_BUTTON_CODE, TEXT_COLOR_NEUTRAL_0, SECONDARY_PURPLE_COLOR, DEFAULT_FONT_FAMILY } from "../../constants";
+import styled from 'styled-components';
+import { isValidNumber } from "../../utils/helper";
+var StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  padding: 15px 25px 12px 0px;\n  width: 120px;\n  color: ", ";\n  background-color: rgb(255, 255, 255);\n  border: 2px solid;\n  text-align: right;\n  float: right;\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 17px;\n  border-radius: 5px;\n  outline: 0;\n  :focus {\n    border-color: ", ";\n  }\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR);
+var FormNumberInput = /*#__PURE__*/function (_Component) {
+  function FormNumberInput(props, context) {
+    var _this;
+    _classCallCheck(this, FormNumberInput);
+    _this = _callSuper(this, FormNumberInput, [props, context]);
+    _this.state = {
+      focus: false,
+      valid: true,
+      showedValue: props.value,
+      focusOn: false,
+      flag: true
+    };
+    _this.input = /*#__PURE__*/React.createRef(null);
+    return _this;
+  }
+  _inherits(FormNumberInput, _Component);
+  return _createClass(FormNumberInput, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.input.current && ['width', 'length'].includes(this.props.labelName.toLowerCase())) {
+        this.input.current.focus();
+        this.input.current.select();
+      }
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
+        this.setState({
+          showedValue: nextProps.value,
+          focusOn: nextProps.focus
+        });
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, preprevState) {
+      if (this.props.value !== prevProps.value && prevProps.labelName !== 'Ceiling Height') {
+        this.input.current.focus();
+        this.input.current.select();
+      }
+      var showedValue = this.state.showedValue;
+      var _this$props = this.props,
+        min = _this$props.min,
+        max = _this$props.max,
+        isCeiling = _this$props.isCeiling;
+      if (!isCeiling) {
+        if (isValidNumber(min) && showedValue < min) {
+          this.setState({
+            showedValue: min
+          });
+        } else if (isValidNumber(max) && showedValue > max) {
+          this.setState({
+            showedValue: max
+          });
+        }
+      }
+      return null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        value = _this$props2.value,
+        min = _this$props2.min,
+        max = _this$props2.max,
+        precision = _this$props2.precision,
+        onChange = _this$props2.onChange,
+        onValid = _this$props2.onValid,
+        onInvalid = _this$props2.onInvalid,
+        style = _this$props2.style,
+        placeholder = _this$props2.placeholder,
+        isCeiling = _this$props2.isCeiling;
+      var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,".concat(precision, "})?$"));
+      var currValue = regexp.test(this.state.showedValue) ? this.state.showedValue : parseFloat(this.state.showedValue).toFixed(precision);
+      var different = parseFloat(this.props.value).toFixed(precision) !== parseFloat(this.state.showedValue).toFixed(precision);
+      var saveFn = function saveFn(e) {
+        e.stopPropagation();
+        if (_this2.state.valid) {
+          var savedValue = _this2.state.showedValue !== '' && _this2.state.showedValue !== '-' ? parseFloat(_this2.state.showedValue) : 0;
+          _this2.setState({
+            showedValue: savedValue
+          });
+          onChange({
+            target: {
+              value: savedValue
+            }
+          });
+        }
+      };
+      return /*#__PURE__*/React.createElement(StyledInput, {
+        id: "form_number_input",
+        autoFocus: this.state.focusOn,
+        readOnly: !!this.props.disabled,
+        type: "text",
+        value: currValue,
+        style: style,
+        onChange: function onChange(evt) {
+          _this2.context.projectActions.copyProperties('ddddd');
+          var valid = regexp.test(evt.nativeEvent.target.value);
+          if (valid) {
+            _this2.setState({
+              showedValue: evt.nativeEvent.target.value,
+              flag: false
+            });
+            if (onValid) onValid(evt.nativeEvent);
+          } else {
+            if (onInvalid) onInvalid(evt.nativeEvent);
+          }
+          _this2.setState({
+            valid: valid
+          });
+        },
+        onFocus: function onFocus(e) {
+          return _this2.setState({
+            focusOn: true
+          });
+        },
+        onBlur: function onBlur(e) {
+          return _this2.setState({
+            focusOn: false
+          });
+        },
+        ref: this.input,
+        onKeyDown: function onKeyDown(e) {
+          var keyCode = e.keyCode || e.which;
+          if (keyCode == KEYBOARD_BUTTON_CODE.ENTER || keyCode == KEYBOARD_BUTTON_CODE.TAB) {
+            saveFn(e);
+            _this2.input.current.blur();
+          }
+          if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
+            _this2.context.projectActions.rollback();
+          }
+        },
+        placeholder: placeholder
+      });
+    }
+  }]);
+}(Component);
+export { FormNumberInput as default };
+FormNumberInput.propTypes = {
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  style: PropTypes.object,
+  onChange: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  onInvalid: PropTypes.func,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  precision: PropTypes.number,
+  placeholder: PropTypes.string,
+  labelName: PropTypes.string,
+  isCeiling: PropTypes.string
+};
+FormNumberInput.contextTypes = {
+  translator: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired
+};
+FormNumberInput.defaultProps = {
+  value: 0,
+  style: {},
+  min: Number.MIN_SAFE_INTEGER,
+  max: Number.MAX_SAFE_INTEGER,
+  precision: 2,
+  disabled: false,
+  labelName: 'default'
+};

package/es/components/style/form-submit-button.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Button from "./button";
+import * as SharedStyle from "../../shared-style";
+var STYLE = {
+  borderColor: '#415375',
+  backgroundColor: '#415375',
+  color: SharedStyle.COLORS.white
+};
+var STYLE_HOVER = {
+  borderColor: '#1f3149',
+  backgroundColor: '#1f3149',
+  color: SharedStyle.COLORS.white
+};
+export default function FormSubmitButton(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    type: "submit",
+    style: STYLE,
+    styleHover: STYLE_HOVER
+  }, rest), children);
+}

package/es/components/viewer2d/area.js

@@ -0,0 +1,81 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import polylabel from 'polylabel';
+import { areaPolygon } from "./utils";
+import { convert } from "../../utils/convert-units-lite";
+import { formatNumber } from "../../utils/math";
+import { DECIMAL_PLACES_2 } from "../../constants";
+var STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '12px',
+  fontFamily: '"Courier New", Courier, monospace',
+  pointerEvents: 'none',
+  fontWeight: 'bold',
+  //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;
+  var rendered = catalog.getElement(area.type).render2D(area, layer);
+  // let element = catalog.getElement(item.type);
+  // let renderedItem = element.render2D(item, layer, scene);
+  var renderedAreaSize = null;
+  if (area.selected) {
+    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());
+    });
+    var center = polylabel([polygonWithHoles], 1.0);
+    var areaSize = areaPolygon(polygon, false);
+    //subtract holes area
+    area.holes.forEach(function (areaID) {
+      var hole = layer.areas.get(areaID);
+      var holePolygon = hole.vertices.toArray().map(function (vertexID) {
+        var _layer$vertices$get3 = layer.vertices.get(vertexID),
+          x = _layer$vertices$get3.x,
+          y = _layer$vertices$get3.y;
+        return [x, y];
+      });
+      areaSize -= areaPolygon(holePolygon, false);
+    });
+    renderedAreaSize = /*#__PURE__*/React.createElement("text", {
+      x: "0",
+      y: "0",
+      transform: "translate(".concat(center[0], " ").concat(center[1], ") scale(1, -1)"),
+      style: STYLE_TEXT
+    }, formatNumber(convert(areaSize).from('cm2').to('ft2'), DECIMAL_PLACES_2), ' ', "ft", String.fromCharCode(0xb2));
+  }
+  return /*#__PURE__*/React.createElement("g", {
+    "data-element-root": true,
+    "data-prototype": area.prototype,
+    "data-id": area.id,
+    "data-selected": area.selected,
+    "data-layer": layer.id,
+    style: {
+      opacity: 1
+    }
+  }, rendered, renderedAreaSize);
+}
+Area.propTypes = {
+  area: PropTypes.object.isRequired,
+  layer: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};

package/es/components/viewer2d/export.js

@@ -0,0 +1,31 @@
+import Viewer2D from "./viewer2d";
+import Vertex from "./vertex";
+import State from "./state";
+import Snap from "./snap";
+import Scene from "./scene";
+import Ruler from "./ruler";
+import Line from "./line";
+import Layer from "./layer";
+import Item from "./item";
+import Area from "./area";
+import Grids from "./grids/grids";
+import Group from "./group";
+import RulerX from "./rulerX";
+import RulerY from "./rulerY";
+export { Viewer2D, Vertex, State, Snap, Scene, Ruler, Line, Layer, Item, Area, Grids, Group, RulerX, RulerY };
+export default {
+  Viewer2D: Viewer2D,
+  Vertex: Vertex,
+  State: State,
+  Snap: Snap,
+  Scene: Scene,
+  Ruler: Ruler,
+  Line: Line,
+  Layer: Layer,
+  Item: Item,
+  Area: Area,
+  Grids: Grids,
+  Group: Group,
+  RulerX: RulerX,
+  RulerY: RulerY
+};