kitchen-simulator 10.3.0 → 11.0.0-react-18

package/es/LiteKitchenConfigurator.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
@@ -314,41 +313,20 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       var el = document.getElementById('add_appliances_inactive');
       if (el !== null && el !== void 0 && (_el$parentElement0 = el.parentElement) !== null && _el$parentElement0 !== void 0 && _el$parentElement0.parentElement) el.parentElement.parentElement.style.zIndex = 6;
     }
-  }, {
-    key: "getChildContext",
-    value: function getChildContext() {
-      var _this2 = this;
-      return _objectSpread(_objectSpread({}, objectsMap(actions, function (actionNamespace) {
-        return _this2.props[actionNamespace];
-      })), {}, {
-        translator: this.props.translator,
-        catalog: this.props.catalog
-      });
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       window.forRedo = [];
-      var store = this.context.store;
-      var _this$props = this.props,
-        stateExtractor = _this$props.stateExtractor,
-        plugins = _this$props.plugins;
-
-      // keep old behavior: run plugins once on mount
-      var newplugins = _toConsumableArray(plugins);
-      newplugins.forEach(function (newplugin) {
-        return newplugin(store, stateExtractor);
-      });
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _extractedState$getIn;
-      var _this$props2 = this.props,
-        externalEvent = _this$props2.externalEvent,
-        extractedState = _this$props2.extractedState,
-        projectActions = _this$props2.projectActions,
-        catalog = _this$props2.catalog;
+      var _this$props = this.props,
+        externalEvent = _this$props.externalEvent,
+        extractedState = _this$props.extractedState,
+        projectActions = _this$props.projectActions,
+        catalog = _this$props.catalog;
 
       // same behavior: handle external event when it changes
       if (prevProps.externalEvent !== externalEvent) {
@@ -407,11 +385,11 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        width = _this$props3.width,
-        height = _this$props3.height,
-        extractedState = _this$props3.extractedState,
-        props = _objectWithoutProperties(_this$props3, _excluded);
+      var _this$props2 = this.props,
+        width = _this$props2.width,
+        height = _this$props2.height,
+        extractedState = _this$props2.extractedState,
+        props = _objectWithoutProperties(_this$props2, _excluded);
       var _this$state = this.state,
         savePopupVisible = _this$state.savePopupVisible,
         quotePopupVisible = _this$state.quotePopupVisible,
@@ -477,15 +455,6 @@ LiteKitchenConfigurator.propTypes = {
   // ✅ injected by connect
   externalEvent: PropTypes.object
 };
-LiteKitchenConfigurator.contextTypes = {
-  store: PropTypes.object.isRequired
-};
-LiteKitchenConfigurator.childContextTypes = _objectSpread(_objectSpread({}, objectsMap(actions, function () {
-  return PropTypes.object;
-})), {}, {
-  translator: PropTypes.object,
-  catalog: PropTypes.object
-});
 LiteKitchenConfigurator.defaultProps = {
   translator: new Translator(),
   catalog: new Catalog(),

package/es/LiteRenderer.js

@@ -11,7 +11,7 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { createStore } from 'redux';
+import { createStore, bindActionCreators } from 'redux';
 import { Map } from 'immutable';
 import * as Sentry from '@sentry/react';
 import * as THREE from 'three';
@@ -20,11 +20,14 @@ import { State } from "./models";
 import PlannerReducer from "./reducers/reducer";
 import AppContext from "./AppContext";
 import Catalog from "./catalog/catalog";
+import actions from "./actions/export";
+import Translator from "./translator/translator";
 import * as Areas from "./catalog/areas/area/planner-element";
 import * as Lines from "./catalog/lines/wall/planner-element";
 import { buildHoleElements, registerDynamicHoles } from "./mappings/holesToCatalog";
 import { ConsoleDebugger, Keyboard } from "./plugins/export";
 import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
+import { objectsMap } from "./utils/objects-utils";
 var isBrowser = typeof window !== 'undefined';
 if (isBrowser) window.THREE = THREE;
 
@@ -274,7 +277,26 @@ export default function LiteRenderer(props) {
   var _ref = configData || {},
     logoImg = _ref.logoImg,
     companyUrl = _ref.companyUrl;
-  return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
+
+  // Build the context value with bound action creators + translator + catalog
+  var translatorRef = useRef(null);
+  if (!translatorRef.current) translatorRef.current = new Translator();
+  var contextValue = useMemo(function () {
+    var store = storeRef.current;
+    var boundActions = objectsMap(actions, function (actionNamespace) {
+      return bindActionCreators(actions[actionNamespace], store.dispatch);
+    });
+    return _objectSpread(_objectSpread({}, boundActions), {}, {
+      translator: translatorRef.current,
+      catalog: catalogRef.current
+    });
+  }, []);
+
+  // Update catalog in context when it changes
+  contextValue.catalog = catalogRef.current;
+  return /*#__PURE__*/React.createElement(AppContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Provider, {
     store: storeRef.current
   }, /*#__PURE__*/React.createElement(LiteKitchenConfigurator, _extends({
     catalog: catalogRef.current,

package/es/actions/export.js

@@ -8,29 +8,16 @@ import * as verticesActions from "./vertices-actions";
 import * as itemsActions from "./items-actions";
 import * as areaActions from "./area-actions";
 import * as groupsActions from "./groups-actions";
-
-export {
-  projectActions,
-  viewer2DActions,
-  viewer3DActions,
-  linesActions,
-  holesActions,
-  sceneActions,
-  verticesActions,
-  itemsActions,
-  areaActions,
-  groupsActions
-};
-
+export { projectActions, viewer2DActions, viewer3DActions, linesActions, holesActions, sceneActions, verticesActions, itemsActions, areaActions, groupsActions };
 export default {
-  projectActions,
-  viewer2DActions,
-  viewer3DActions,
-  linesActions,
-  holesActions,
-  sceneActions,
-  verticesActions,
-  itemsActions,
-  areaActions,
-  groupsActions
-};
+  projectActions: projectActions,
+  viewer2DActions: viewer2DActions,
+  viewer3DActions: viewer3DActions,
+  linesActions: linesActions,
+  holesActions: holesActions,
+  sceneActions: sceneActions,
+  verticesActions: verticesActions,
+  itemsActions: itemsActions,
+  areaActions: areaActions,
+  groupsActions: groupsActions
+};

package/es/components/content.js

@@ -131,7 +131,4 @@ Content.propTypes = {
   height: PropTypes.number.isRequired,
   replaceCabinet: PropTypes.func.isRequired,
   onInternalEvent: PropTypes.func.isRequired
-};
-Content.contextTypes = {
-  projectActions: PropTypes.object.isRequired
 };

package/es/components/export.js

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

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

@@ -3,12 +3,14 @@ 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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 AppContext from "../../AppContext";
 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";
@@ -38,8 +40,8 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
       }
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
         this.setState({
           showedValue: nextProps.value,
@@ -153,6 +155,7 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(FormNumberInput, "contextType", AppContext);
 export { FormNumberInput as default };
 FormNumberInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -167,11 +170,6 @@ FormNumberInput.propTypes = {
   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: {},

package/es/components/viewer2d/group.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import AppContext from "../../AppContext";
 import If from "../../utils/react-if";
 import * as sharedStyles from "../../shared-style";
 var cx = 0;
@@ -10,12 +11,13 @@ var STYLE_CIRCLE = {
   stroke: sharedStyles.MATERIAL_COLORS[500].orange,
   cursor: 'default'
 };
-export default function Group(_ref, _ref2) {
+export default function Group(_ref) {
   var layer = _ref.layer,
     group = _ref.group,
     scene = _ref.scene,
     catalog = _ref.catalog;
-  var translator = _ref2.translator;
+  var _useContext = useContext(AppContext),
+    translator = _useContext.translator;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": group.prototype,
@@ -47,7 +49,4 @@ Group.propTypes = {
   layer: PropTypes.object.isRequired,
   scene: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired
-};
-Group.contextTypes = {
-  translator: PropTypes.object.isRequired
 };

package/es/components/viewer2d/item.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
+import AppContext from "../../AppContext";
 import RulerDist from "./rulerDist";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
@@ -21,14 +22,15 @@ var STYLE_CIRCLE2 = {
   stroke: '#0096fd',
   cursor: 'ew-resize'
 };
-export default function Item(_ref, _ref2) {
+export default function Item(_ref) {
   var _element$render2D;
   var layer = _ref.layer,
     item = _ref.item,
     scene = _ref.scene,
     catalog = _ref.catalog,
     mode = _ref.mode;
-  var itemsActions = _ref2.itemsActions;
+  var _useContext = useContext(AppContext),
+    itemsActions = _useContext.itemsActions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clockRotateState = _useState2[0],
@@ -229,7 +231,4 @@ Item.propTypes = {
   layer: PropTypes.object.isRequired,
   scene: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired
-};
-Item.contextTypes = {
-  itemsActions: PropTypes.object.isRequired
 };

package/es/components/viewer2d/line.js

@@ -247,11 +247,13 @@ export default function Line(_ref) {
   if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
     wallSpace = 0;
   }
-  wallRuler = wall_posAndwidth.map(function (pAw) {
+  wallRuler = wall_posAndwidth.map(function (pAw, pAwIdx) {
     if (pAw.length > 1) {
       if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
-          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", {
+            key: "wall_".concat(pAwIdx)
+          }, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -273,7 +275,9 @@ export default function Line(_ref) {
             style: STYLE_DASH
           }));
         } else {
-          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", {
+            key: "wall_".concat(pAwIdx)
+          }, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -298,7 +302,9 @@ export default function Line(_ref) {
       } else {
         if (y1 - y2 > 0) {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "wall_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
               x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
@@ -320,7 +326,9 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "wall_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
               x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
@@ -344,7 +352,9 @@ export default function Line(_ref) {
           }
         } else {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "wall_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
               x2: pAw.pos.x - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
@@ -366,7 +376,9 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "wall_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
               x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + wallSpace) * Math.sin(angle / 180 * Math.PI),
@@ -459,11 +471,13 @@ export default function Line(_ref) {
   if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
     baseSpace -= STEP;
   }
-  baseRuler = base_posAndwidth.map(function (pAw) {
+  baseRuler = base_posAndwidth.map(function (pAw, pAwIdx) {
     if (pAw.length > 1) {
       if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
-          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", {
+            key: "base_".concat(pAwIdx)
+          }, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -485,7 +499,9 @@ export default function Line(_ref) {
             style: STYLE_DASH
           }));
         } else {
-          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", {
+            key: "base_".concat(pAwIdx)
+          }, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -510,7 +526,9 @@ export default function Line(_ref) {
       } else {
         if (y1 - y2 > 0) {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "base_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y - pAw.length * Math.sin(angle / 180 * Math.PI),
               x2: pAw.pos.x - pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
@@ -532,7 +550,9 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "base_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
               x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
@@ -556,7 +576,9 @@ export default function Line(_ref) {
           }
         } else {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "base_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x,
               y1: pAw.pos.y,
               x2: pAw.pos.x - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
@@ -578,7 +600,9 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", {
+              key: "base_".concat(pAwIdx)
+            }, /*#__PURE__*/React.createElement("line", {
               x1: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI),
               y1: pAw.pos.y + pAw.length * Math.sin(angle / 180 * Math.PI),
               x2: pAw.pos.x + pAw.length * Math.cos(angle / 180 * Math.PI) - (thickness / 2 + baseSpace) * Math.sin(angle / 180 * Math.PI),
@@ -652,14 +676,15 @@ export default function Line(_ref) {
   //the space from the dimensioning line to the bottom
   var lineSpacedimension2 = 14;
   if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
-    renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    renderedRuler.push(/*#__PURE__*/React.createElement("g", {
+      key: "ruler-a"
+    }, /*#__PURE__*/React.createElement("line", {
       x1: length,
       y1: lineSpace + lineSpacedimension1,
       x2: length,
       y2: lineSpace + lineSpacedimension2,
       style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/React.createElement(Ruler, {
-      key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
@@ -674,14 +699,15 @@ export default function Line(_ref) {
       style: STYLE_ROOM_SHAPE
     })));
   } else {
-    renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+    renderedRuler.push(/*#__PURE__*/React.createElement("g", {
+      key: "ruler-b"
+    }, /*#__PURE__*/React.createElement("line", {
       x1: 0,
       y1: lineSpace + lineSpacedimension1,
       x2: 0,
       y2: lineSpace + lineSpacedimension2,
       style: STYLE_ROOM_SHAPE
     }), /*#__PURE__*/React.createElement(Ruler, {
-      key: 0,
       layer: layer,
       unit: scene.unit,
       rulerUnit: scene.rulerUnit,
@@ -723,6 +749,7 @@ export default function Line(_ref) {
         }
         if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
           renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
+            key: "allRuler_a_".concat(index),
             transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
           }, /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index],
@@ -747,6 +774,7 @@ export default function Line(_ref) {
           })));
         } else {
           renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
+            key: "allRuler_b_".concat(index),
             transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
           }, /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index],
@@ -846,6 +874,7 @@ export default function Line(_ref) {
 
     // Angle SVG Path
     lines.push(/*#__PURE__*/React.createElement("path", {
+      key: "angle-path-".concat(index),
       style: STYLE_ANGLE,
       d: "\n          M ".concat(vertex[0].x, ",").concat(vertex[0].y, "           L ").concat(pos1.x, ",").concat(pos1.y, "           A ").concat(minLineLength, " ").concat(minLineLength, " ").concat(angle, " 0 ").concat(t > 0 ? 1 : 0, " ").concat(pos2.x, ",").concat(pos2.y, " z\n        ")
     }));

package/es/components/viewer2d/rulerX.js

@@ -1,15 +1,16 @@
-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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 AppContext from "../../AppContext";
 import * as SharedStyle from "../../shared-style";
 var RulerX = /*#__PURE__*/function (_Component) {
   function RulerX(props, context) {
@@ -45,7 +46,7 @@ var RulerX = /*#__PURE__*/function (_Component) {
       };
       var markerStyle = {
         position: 'absolute',
-        left: this.props.zeroLeftPosition + this.props.mouseX * this.props.zoom - 6.5,
+        left: (this.props.zeroLeftPosition || 0) + (this.props.mouseX || 0) * (this.props.zoom || 1) - 6.5,
         top: 8,
         width: 0,
         height: 0,
@@ -65,12 +66,12 @@ var RulerX = /*#__PURE__*/function (_Component) {
         grdAutoColumns: "".concat(elementW, "px")
       };
       var positiveRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
-        width: this.props.positiveUnitsNumber * elementW,
-        left: this.props.zeroLeftPosition
+        width: (this.props.positiveUnitsNumber || 0) * elementW,
+        left: this.props.zeroLeftPosition || 0
       });
       var negativeRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
-        width: this.props.negativeUnitsNumber * elementW,
-        left: this.props.zeroLeftPosition - this.props.negativeUnitsNumber * elementW
+        width: (this.props.negativeUnitsNumber || 0) * elementW,
+        left: (this.props.zeroLeftPosition || 0) - (this.props.negativeUnitsNumber || 0) * elementW
       });
       var positiveDomElements = [];
       if (elementW <= 200) {
@@ -120,6 +121,7 @@ var RulerX = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(RulerX, "contextType", AppContext);
 export { RulerX as default };
 RulerX.propTypes = {
   unitPixelSize: PropTypes.number.isRequired,
@@ -139,7 +141,4 @@ RulerX.defaultProps = {
   backgroundColor: SharedStyle.PRIMARY_COLOR.main,
   fontColor: SharedStyle.COLORS.white,
   markerColor: SharedStyle.SECONDARY_COLOR.main
-};
-RulerX.contextTypes = {
-  translator: PropTypes.object.isRequired
 };

package/es/components/viewer2d/rulerY.js

@@ -1,15 +1,16 @@
-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 _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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 AppContext from "../../AppContext";
 import * as SharedStyle from "../../shared-style";
 var RulerY = /*#__PURE__*/function (_Component) {
   function RulerY(props, context) {
@@ -49,7 +50,7 @@ var RulerY = /*#__PURE__*/function (_Component) {
       };
       var markerStyle = {
         position: 'absolute',
-        top: this.props.zeroTopPosition - this.props.mouseY * this.props.zoom - 6.5,
+        top: (this.props.zeroTopPosition || 0) - (this.props.mouseY || 0) * (this.props.zoom || 1) - 6.5,
         left: 8,
         width: 0,
         height: 0,
@@ -69,12 +70,12 @@ var RulerY = /*#__PURE__*/function (_Component) {
         paddingLeft: '5px'
       };
       var positiveRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
-        top: this.props.zeroTopPosition - this.props.positiveUnitsNumber * elementH,
-        height: this.props.positiveUnitsNumber * elementH
+        top: (this.props.zeroTopPosition || 0) - (this.props.positiveUnitsNumber || 0) * elementH,
+        height: (this.props.positiveUnitsNumber || 0) * elementH
       });
       var negativeRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
-        top: this.props.zeroTopPosition + this.props.negativeUnitsNumber * elementH,
-        height: this.props.negativeUnitsNumber * elementH
+        top: (this.props.zeroTopPosition || 0) + (this.props.negativeUnitsNumber || 0) * elementH,
+        height: (this.props.negativeUnitsNumber || 0) * elementH
       });
       var positiveDomElements = [];
       if (elementH <= 200) {
@@ -124,6 +125,7 @@ var RulerY = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+_defineProperty(RulerY, "contextType", AppContext);
 export { RulerY as default };
 RulerY.propTypes = {
   unitPixelSize: PropTypes.number.isRequired,
@@ -141,7 +143,4 @@ RulerY.defaultProps = {
   backgroundColor: SharedStyle.PRIMARY_COLOR.main,
   fontColor: SharedStyle.COLORS.white,
   markerColor: SharedStyle.SECONDARY_COLOR.main
-};
-RulerY.contextTypes = {
-  translator: PropTypes.object.isRequired
 };