kitchen-simulator 11.0.0-react.18 → 11.1.0

package/es/components/viewer2d/item.js

@@ -1,30 +1,33 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import RulerDist from "./rulerDist";
 import { convert } from "../../utils/convert-units-lite";
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
-import { isWarningItem } from "./utils";
-import { calcDistancesFromItemToWalls } from "../../utils/geometry";
-import AppContext from "../../AppContext";
-var stableKeyForPointArray = function stableKeyForPointArray(arr) {
-  if (!Array.isArray(arr)) return '';
-  return arr.map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      d = _ref2[0],
-      dir = _ref2[1];
-    return "".concat(Math.round(d * 1000) / 1000, ":").concat(dir);
-  }).join('|');
+import { isWarningCabinet } from "../../shared/domain/cabinet-warning";
+import { calcDistancesFromItemToWalls, findCatalogElement } from "../../utils/geometry";
+var STYLE_LINE = {
+  fill: '#0096fd',
+  stroke: '#0096fd'
 };
-export default function Item(_ref3) {
+var STYLE_CIRCLE = {
+  fill: '#0096fd',
+  stroke: '#0096fd',
+  cursor: 'ew-resize'
+};
+var STYLE_CIRCLE2 = {
+  fill: 'none',
+  stroke: '#0096fd',
+  cursor: 'ew-resize'
+};
+export default function Item(_ref, _ref2) {
   var _element$render2D;
-  var layer = _ref3.layer,
-    item = _ref3.item,
-    scene = _ref3.scene,
-    catalog = _ref3.catalog,
-    mode = _ref3.mode;
-  var _useContext = useContext(AppContext),
-    itemsActions = _useContext.itemsActions;
+  var layer = _ref.layer,
+    item = _ref.item,
+    scene = _ref.scene,
+    catalog = _ref.catalog,
+    mode = _ref.mode;
+  var itemsActions = _ref2.itemsActions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clockRotateState = _useState2[0],
@@ -38,10 +41,8 @@ export default function Item(_ref3) {
     rotation = item.rotation,
     id = item.id;
   var element = catalog.getElement(item.type);
-  var showBaseCabinetMeasure = scene.get('showBaseCabinetMeasure');
-  var showWallCabinetMeasure = scene.get('showWallCabinetMeasure');
-
-  // --- compute width/height exactly like you had ---
+  var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
+    showWallCabinetMeasure = scene.showWallCabinetMeasure;
   var width, height;
   var tempWidth = item.properties.get('width');
   var tempHeight = item.properties.get('depth');
@@ -52,38 +53,23 @@ export default function Item(_ref3) {
     width = convert(element.info.sizeinfo.width).from('in').to('cm');
     height = convert(element.info.sizeinfo.depth).from('in').to('cm');
   }
-  var nw = width / 2;
-  var nh = height / 2;
-
-  // --- compute PointArray (pure) ---
-  var pointArray = useMemo(function () {
-    var _res$PointArray;
-    var res = calcDistancesFromItemToWalls(item, layer);
-    return (_res$PointArray = res === null || res === void 0 ? void 0 : res.PointArray) !== null && _res$PointArray !== void 0 ? _res$PointArray : [];
-  }, [item, layer]);
-
-  // ✅ Immutable access
-  var layerID = scene.get('selectedLayer');
-  var lastKeyRef = useRef('');
-  useEffect(function () {
-    if (!Array.isArray(pointArray)) return;
-    var key = stableKeyForPointArray(pointArray);
-    if (key === lastKeyRef.current) return;
-    lastKeyRef.current = key;
-    itemsActions.storeDistArray(layerID, id, pointArray);
-  }, [itemsActions, layerID, id, pointArray]);
+  var _calcDistancesFromIte = calcDistancesFromItemToWalls(item, layer),
+    PointArray = _calcDistancesFromIte.PointArray;
+  var layerID = scene.selectedLayer;
+  if (Array.isArray(PointArray)) {
+    itemsActions.storeDistArray(layerID, id, PointArray);
+  }
   var catid = item.type;
   var cat = catalog.elements[catid];
-
-  // --- rulers ---
+  var nw = width / 2;
+  var nh = height / 2;
   var renderedRuler = [];
   var ep = 0.1;
   if (item.selected) {
-    pointArray.forEach(function (el, key) {
-      var itemDistanceFromLine = el[0];
-      var dir = el[1];
+    PointArray.forEach(function (element, key) {
+      var itemDistanceFromLine = element[0];
+      var length = itemDistanceFromLine;
       if (itemDistanceFromLine > ep || itemDistanceFromLine < -ep) {
-        var _cat$info;
         renderedRuler.push(/*#__PURE__*/React.createElement("g", {
           "data-element-root": true,
           "data-prototype": "rulerDist",
@@ -91,131 +77,135 @@ export default function Item(_ref3) {
           "data-selected": item.selected,
           "data-layer": layer.id,
           key: key,
-          "data-length": itemDistanceFromLine,
-          "data-direct": dir
+          "data-length": length,
+          "data-direct": element[1]
         }, /*#__PURE__*/React.createElement(RulerDist, {
+          key: key,
           layer: layer,
-          unit: scene.get('unit'),
-          rulerUnit: scene.get('rulerUnit'),
+          unit: scene.unit,
+          rulerUnit: scene.rulerUnit,
           length: itemDistanceFromLine,
           angle: rotation,
-          rotation: dir,
-          transform: "translate(".concat(dir === 180 ? -nw : dir === 0 ? nw : 0, ", ").concat(dir === 90 ? nh : dir === -90 ? (cat === null || cat === void 0 || (_cat$info = cat.info) === null || _cat$info === void 0 ? void 0 : _cat$info.is_corner) !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(dir, ", 0, 0)")
+          rotation: element[1],
+          transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? (item === null || item === void 0 ? void 0 : item.is_corner) !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(element[1], ", 0, 0)")
         })));
       }
     });
   }
   var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
-
-  // --- selection controls (same as you had) ---
+  var isSmall = false;
+  if (width < 40) isSmall = true;
   var parts = [];
-  if (item.selected) {
-    parts = [/*#__PURE__*/React.createElement("g", {
-      key: "rotation-anchor",
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "rotation-anchor",
-      style: {
-        cursor: 'w-resize'
-      }
-    }, /*#__PURE__*/React.createElement("image", {
-      href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
-      style: {
-        transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
-      },
-      height: "20",
-      width: "20",
-      onMouseEnter: function onMouseEnter() {
-        setClockRotateState(true);
-        setAntiClockRotateState(false);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setClockRotateState(mode === MODE_ROTATING_ITEM);
-      }
-    }), /*#__PURE__*/React.createElement("image", {
-      href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
-      style: {
-        transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
-      },
-      height: "20",
-      width: "20",
-      onMouseEnter: function onMouseEnter() {
-        setAntiClockRotateState(true);
-        setClockRotateState(false);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setAntiClockRotateState(mode === MODE_ROTATING_ITEM);
-      }
-    })), /*#__PURE__*/React.createElement("g", {
-      key: "duplicate",
-      style: {
-        cursor: 'pointer',
-        transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, 0px)")
-      },
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "duplicate"
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-      id: "shadow"
-    }, /*#__PURE__*/React.createElement("feDropShadow", {
-      dx: "0",
-      dy: "0",
-      stdDeviation: "0.6"
-    }))), /*#__PURE__*/React.createElement("rect", {
-      rx: "4",
-      ry: "4",
-      height: "22",
-      width: "22",
-      fill: "white",
-      filter: "url(#shadow)"
-    }), /*#__PURE__*/React.createElement("image", {
-      href: "/assets/img/svg/duplicate.svg",
-      x: "3",
-      y: "-19",
-      height: "16",
-      width: "16",
-      style: isWarningItem(item) ? {
-        transform: 'rotateX(180deg)',
-        opacity: 0.5
-      } : {
-        transform: 'rotateX(180deg)'
-      }
-    })), /*#__PURE__*/React.createElement("g", {
-      key: "remove",
-      style: {
-        cursor: 'pointer',
-        transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, -27px)")
-      },
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "remove"
-    }, /*#__PURE__*/React.createElement("rect", {
-      rx: "4",
-      ry: "4",
-      height: "22",
-      width: "22",
-      fill: "white",
-      filter: "url(#shadow)"
-    }), /*#__PURE__*/React.createElement("image", {
-      href: "/assets/img/svg/delete.svg",
-      x: "3",
-      y: "-19",
-      height: "16",
-      width: "16",
-      style: {
-        transform: 'rotateX(180deg)'
-      }
-    }))];
-  }
+  var newWidth = item.toJS().properties.width.length;
+  if (item.selected) parts = [/*#__PURE__*/React.createElement("g", {
+    key: 0,
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "rotation-anchor",
+    style: {
+      cursor: 'w-resize'
+    }
+  }, /*#__PURE__*/React.createElement("image", {
+    href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
+    style: {
+      transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
+    },
+    height: "20",
+    width: "20",
+    onMouseEnter: function onMouseEnter() {
+      setClockRotateState(true);
+      setAntiClockRotateState(false);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
+    }
+  }), /*#__PURE__*/React.createElement("image", {
+    href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
+    style: {
+      transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
+    },
+    height: "20",
+    width: "20",
+    onMouseEnter: function onMouseEnter() {
+      setAntiClockRotateState(true);
+      setClockRotateState(false);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setAntiClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
+    }
+  })), /*#__PURE__*/React.createElement("g", {
+    key: 1
+    // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2 + 40})`}
+    ,
+    style: {
+      cursor: 'pointer',
+      transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ", 0, "px)")
+    },
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "duplicate"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "shadow"
+  }, /*#__PURE__*/React.createElement("feDropShadow", {
+    dx: "0",
+    dy: "0",
+    stdDeviation: "0.6"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/duplicate.svg",
+    x: "3",
+    y: "-19",
+    height: "16",
+    width: "16",
+    style: isWarningCabinet(item) ? {
+      transform: 'rotateX(180deg)',
+      opacity: 0.5
+    } : {
+      transform: 'rotateX(180deg)'
+    }
+  })), /*#__PURE__*/React.createElement("g", {
+    key: 2
+    // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2})`}
+    ,
+    style: {
+      cursor: 'pointer',
+      transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ").concat(-27, "px)")
+    },
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "remove"
+  }, /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/delete.svg",
+    x: "3",
+    y: "-19",
+    height: "16",
+    width: "16",
+    style: {
+      transform: 'rotateX(180deg)'
+    }
+  }))];
   var measure = item.layoutpos === WALL_CABINET_LAYOUTPOS ? showWallCabinetMeasure : showBaseCabinetMeasure;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
@@ -237,7 +227,8 @@ Item.propTypes = {
   item: PropTypes.object.isRequired,
   layer: PropTypes.object.isRequired,
   scene: PropTypes.object.isRequired,
-  // Immutable Map is still object
-  catalog: PropTypes.object.isRequired,
-  mode: PropTypes.any
+  catalog: PropTypes.object.isRequired
+};
+Item.contextTypes = {
+  itemsActions: PropTypes.object.isRequired
 };

package/es/components/viewer2d/line.js

@@ -5,7 +5,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { GeometryUtils } from "../../utils/export";
 import Ruler from "./ruler";
-import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS, MAX_ANGLE_SCALE, ROOM_SHAPE_MEASUREMENT_LINE_COLOR, ROOM_ELEMENT_MEASUREMENT_LINE_COLOR, BASE_ITEM_MEASUREMENT_LINE_COLOR, WALL_ITEM_MEASUREMENT_LINE_COLOR, DISTANCE_MEASUREMENT_LINE_COLOR, DASH_LINE_COLOR, TALL_CABINET_LAYOUTPOS, VANITY_CABINET_LAYOUTPOS } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS, MAX_ANGLE_SCALE, ROOM_SHAPE_MEASUREMENT_LINE_COLOR, ROOM_ELEMENT_MEASUREMENT_LINE_COLOR, BASE_ITEM_MEASUREMENT_LINE_COLOR, WALL_ITEM_MEASUREMENT_LINE_COLOR, DISTANCE_MEASUREMENT_LINE_COLOR, DASH_LINE_COLOR, TALL_CABINET_LAYOUTPOS, VANITY_CABINET_LAYOUTPOS, ACCESSORIES_LAYOUTPOS } from "../../constants";
 import * as Three from 'three';
 import { isEmpty } from "./utils";
 var STYLE = {
@@ -247,14 +247,11 @@ export default function Line(_ref) {
   if (!showWallCabinetMeasure || wall_posArray.length <= 2) {
     wallSpace = 0;
   }
-  wallRuler = wall_posAndwidth.map(function (pAw, idx) {
-    if (pAw.length <= 1) return null;
+  wallRuler = wall_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
       if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
-          return /*#__PURE__*/React.createElement("g", {
-            key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-          }, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -276,9 +273,7 @@ export default function Line(_ref) {
             style: STYLE_DASH
           }));
         } else {
-          return /*#__PURE__*/React.createElement("g", {
-            key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-          }, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -303,9 +298,7 @@ export default function Line(_ref) {
       } else {
         if (y1 - y2 > 0) {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -327,9 +320,7 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -353,9 +344,7 @@ export default function Line(_ref) {
           }
         } else {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -377,9 +366,7 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "wall-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -408,7 +395,7 @@ export default function Line(_ref) {
 
   //base cabinet
   var baseSpace = wallSpace + STEP;
-  var base_item = GeometryUtils.getAllItemSpecified(scene, catalog, [BASE_CABINET_LAYOUTPOS, VANITY_CABINET_LAYOUTPOS]);
+  var base_item = GeometryUtils.getAllItemSpecified(scene, catalog, [BASE_CABINET_LAYOUTPOS, VANITY_CABINET_LAYOUTPOS, ACCESSORIES_LAYOUTPOS]);
 
   // base cabinet
   var baseRuler = [];
@@ -472,14 +459,11 @@ export default function Line(_ref) {
   if (!showBaseCabinetMeasure || base_posArray.length <= 2) {
     baseSpace -= STEP;
   }
-  baseRuler = base_posAndwidth.map(function (pAw, idx) {
-    if (pAw.length <= 1) return null;
+  baseRuler = base_posAndwidth.map(function (pAw) {
     if (pAw.length > 1) {
       if (Math.sin(angle) === 0 || GeometryUtils.almostEqual(y1, y2)) {
         if (x1 - x2 > 0) {
-          return /*#__PURE__*/React.createElement("g", {
-            key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-          }, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -501,9 +485,7 @@ export default function Line(_ref) {
             style: STYLE_DASH
           }));
         } else {
-          return /*#__PURE__*/React.createElement("g", {
-            key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-          }, /*#__PURE__*/React.createElement("line", {
+          return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
             x1: pAw.pos.x + pAw.length,
             y1: pAw.pos.y,
             x2: pAw.pos.x + pAw.length,
@@ -528,9 +510,7 @@ export default function Line(_ref) {
       } else {
         if (y1 - y2 > 0) {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -552,9 +532,7 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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,9 +556,7 @@ export default function Line(_ref) {
           }
         } else {
           if (x1 - x2 < 0 || GeometryUtils.almostEqual(x1, x2)) {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -602,9 +578,7 @@ export default function Line(_ref) {
               style: STYLE_DASH
             }));
           } else {
-            return /*#__PURE__*/React.createElement("g", {
-              key: "base-".concat(idx, "-").concat(pAw.pos.x, "-").concat(pAw.pos.y, "-").concat(pAw.length)
-            }, /*#__PURE__*/React.createElement("line", {
+            return /*#__PURE__*/React.createElement("g", null, /*#__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),
@@ -678,9 +652,7 @@ 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", {
-      key: "wall-length"
-    }, /*#__PURE__*/React.createElement("line", {
+    renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
       x1: length,
       y1: lineSpace + lineSpacedimension1,
       x2: length,
@@ -702,9 +674,7 @@ export default function Line(_ref) {
       style: STYLE_ROOM_SHAPE
     })));
   } else {
-    renderedRuler.push(/*#__PURE__*/React.createElement("g", {
-      key: "wall-length"
-    }, /*#__PURE__*/React.createElement("line", {
+    renderedRuler.push(/*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
       x1: 0,
       y1: lineSpace + lineSpacedimension1,
       x2: 0,
@@ -753,7 +723,6 @@ export default function Line(_ref) {
         }
         if (compareVertices(vertex0, vertex1) >= 0 && vertex0.x !== vertex1.x) {
           renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
-            key: "allRuler_".concat(index),
             transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
           }, /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index],
@@ -778,7 +747,6 @@ export default function Line(_ref) {
           })));
         } else {
           renderedAllRuler.push(/*#__PURE__*/React.createElement("g", {
-            key: "allRuler_".concat(index),
             transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
           }, /*#__PURE__*/React.createElement("line", {
             x1: allRuler[index],
@@ -878,7 +846,6 @@ export default function Line(_ref) {
 
     // Angle SVG Path
     lines.push(/*#__PURE__*/React.createElement("path", {
-      key: 'angle-line-' + vertex[0].id + '-' + vertex[1].id + '-' + rotDir,
       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

@@ -139,4 +139,7 @@ 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

@@ -141,4 +141,7 @@ RulerY.defaultProps = {
   backgroundColor: SharedStyle.PRIMARY_COLOR.main,
   fontColor: SharedStyle.COLORS.white,
   markerColor: SharedStyle.SECONDARY_COLOR.main
+};
+RulerY.contextTypes = {
+  translator: PropTypes.object.isRequired
 };