kitchen-simulator 7.0.9-react-18 → 10.0.0

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
 };

package/es/components/viewer2d/scene.js

@@ -1,14 +1,17 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 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 { Layer, Grids } from "./export";
+import { searchForSkuValue } from "./utils";
 var Scene = /*#__PURE__*/function (_Component) {
   function Scene() {
     _classCallCheck(this, Scene);
@@ -16,53 +19,68 @@ var Scene = /*#__PURE__*/function (_Component) {
   }
   _inherits(Scene, _Component);
   return _createClass(Scene, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var prevScene = prevProps.scene;
-      var nextScene = this.props.scene;
-      if (!prevScene || !nextScene) return;
+    key: "componentWillReceiveProps",
+    value: function () {
+      var _componentWillReceiveProps = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(nextProps) {
+        var scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // console.log("componentDidMount", this.props.scene.hashCode(), nextProps.scene.hashCode());
+              if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
+                scene = nextProps.scene, catalog = nextProps.catalog;
+                height = scene.height, layers = scene.layers;
+                selectedLayer = layers.get(scene.selectedLayer);
+                msg = '';
+                isNotFoundInElements = false;
+                itemType = '';
+                selectedLayer.items.valueSeq().forEach(function (item) {
+                  if (!catalog.elements.hasOwnProperty(item.type)) {
+                    itemType = item.type;
+                    isNotFoundInElements = true;
+                  }
+                });
+                // if(isNotFoundInElements){
+                //   const deepSearchResult = await searchForSkuValue(catalog, selectedLayer, itemType)
+                //   if(!deepSearchResult.isAvailable){
+                //     msg += (`Element ${itemType} does not exist in catalog.\n`);
+                //   }
+                // }
 
-      // Only run when scene actually changes
-      if (prevScene.hashCode() !== nextScene.hashCode()) {
-        var _this$props = this.props,
-          scene = _this$props.scene,
-          catalog = _this$props.catalog;
-        var layers = scene.layers;
-        var selectedLayer = layers.get(scene.selectedLayer);
-        if (!selectedLayer) return;
-        var isNotFoundInElements = false;
-        var itemType = '';
-        selectedLayer.items.valueSeq().forEach(function (item) {
-          if (!catalog.elements || !Object.prototype.hasOwnProperty.call(catalog.elements, item.type)) {
-            itemType = item.type;
-            isNotFoundInElements = true;
+                // if(msg !== '') {
+                //   msg += `Do you want to initialize?`;
+                //   confirm(msg)
+                //   ? this.context.projectActions.newProject()
+                //   : null
+                // }
+              }
+            case 1:
+            case "end":
+              return _context.stop();
           }
-        });
-        void isNotFoundInElements;
-        void itemType;
+        }, _callee, this);
+      }));
+      function componentWillReceiveProps(_x) {
+        return _componentWillReceiveProps.apply(this, arguments);
       }
-    }
+      return componentWillReceiveProps;
+    }()
   }, {
     key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      var curr = this.props.scene;
-      var next = nextProps.scene;
-
-      // Be safe if scene is temporarily undefined/null
-      if (!curr || !next) return true;
-      return curr.hashCode() !== next.hashCode();
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      return this.props.scene.hashCode() !== nextProps.scene.hashCode();
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        scene = _this$props2.scene,
-        catalog = _this$props2.catalog,
-        state = _this$props2.state,
-        relatedLines = _this$props2.relatedLines;
-      var layers = scene.layers;
+      var _this = this;
+      // console.log("scene", this);
+      var _this$props = this.props,
+        scene = _this$props.scene,
+        catalog = _this$props.catalog;
+      var height = scene.height,
+        layers = scene.layers;
       var selectedLayer = layers.get(scene.selectedLayer);
-      var mode = this.props.state.get('mode');
       return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Grids, {
         scene: scene
       }), /*#__PURE__*/React.createElement("g", {
@@ -83,19 +101,19 @@ var Scene = /*#__PURE__*/function (_Component) {
           layer: layer,
           scene: scene,
           catalog: catalog,
-          mode: mode,
-          state: state,
-          relatedLines: relatedLines
+          mode: _this.props.state.mode,
+          state: _this.props.state,
+          relatedLines: _this.props.relatedLines
         });
-      })), selectedLayer ? /*#__PURE__*/React.createElement(Layer, {
+      })), /*#__PURE__*/React.createElement(Layer, {
         key: selectedLayer.id,
         layer: selectedLayer,
         scene: scene,
         catalog: catalog,
-        mode: mode,
-        state: state,
-        relatedLines: relatedLines
-      }) : null);
+        mode: this.props.state.mode,
+        state: this.props.state,
+        relatedLines: this.props.relatedLines
+      }));
     }
   }]);
 }(Component);
@@ -103,6 +121,8 @@ export { Scene as default };
 Scene.propTypes = {
   scene: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired,
-  relatedLines: PropTypes.array.isRequired,
-  state: PropTypes.object.isRequired
+  relatedLines: PropTypes.object.isRequired
+};
+Scene.contextTypes = {
+  projectActions: PropTypes.object.isRequired
 };

package/es/components/viewer2d/state.js

@@ -69,5 +69,5 @@ export default function State(_ref) {
 State.propTypes = {
   state: PropTypes.object.isRequired,
   catalog: PropTypes.object.isRequired,
-  relatedLines: PropTypes.array.isRequired
+  relatedLines: PropTypes.object.isRequired
 };