kitchen-simulator 1.1.1-test.75 → 1.1.1-test.77

package/es/class/line.js

@@ -79,7 +79,7 @@ var Line = /*#__PURE__*/function () {
   }, {
     key: "select",
     value: function select(state, layerID, lineID) {
-      var _line$vertices, _line$vertices$get, _line$vertices2, _line$vertices2$get;
+      var _line$toJS, _line$vertices, _line$vertices$get, _line$vertices2, _line$vertices2$get;
       // Try selecting the layer first
       var layerResult = Layer.select(state, layerID);
       if (!layerResult || !layerResult.updatedState) {
@@ -91,7 +91,7 @@ var Line = /*#__PURE__*/function () {
 
       // Try getting the line
       var line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
-      if (!line) {
+      if (!line || isEmpty((_line$toJS = line.toJS) === null || _line$toJS === void 0 ? void 0 : _line$toJS.call(line))) {
         return {
           updatedState: state
         }; // no update if line not found
@@ -127,8 +127,9 @@ var Line = /*#__PURE__*/function () {
   }, {
     key: "remove",
     value: function remove(state, layerID, lineID) {
+      var _line$toJS2;
       var line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
-      if (line) {
+      if (line && !isEmpty((_line$toJS2 = line.toJS) === null || _line$toJS2 === void 0 ? void 0 : _line$toJS2.call(line))) {
         state = this.unselect(state, layerID, lineID).updatedState;
         line.holes.forEach(function (holeID) {
           return state = Hole.remove(state, layerID, holeID).updatedState;
@@ -511,18 +512,25 @@ var Line = /*#__PURE__*/function () {
 
       // get the angle of two lines and check the angle
       if (drawingLine.vertices[0] !== drawingLine.vertices[1]) {
-        relatedLines.forEach(function (line) {
-          // get the points of two lines(drawing line and related line)
-          if (!isEmpty(line)) {
-            // the angle between two lines(line, drawingLine)
-            lineAngle = GeometryUtils.angleBetweenTwoLines(line, drawingLine, vertices);
-            // check whether the angle is less than or bigger than specific value.
-            absAngle = Math.abs(lineAngle);
-            if (absAngle < MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
-              moveFlag = false;
-            } else moveFlag = true;
-          }
-        });
+        if (!isEmpty(relatedLines)) {
+          relatedLines.forEach(function (line) {
+            // get the points of two lines(drawing line and related line)
+            if (!isEmpty(line)) {
+              // the angle between two lines(line, drawingLine)
+              lineAngle = GeometryUtils.angleBetweenTwoLines(line, drawingLine, vertices);
+              // check whether the angle is less than or bigger than specific value.
+              absAngle = Math.abs(lineAngle);
+              if (absAngle < MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - MIN_ANGLE_DISALLOW_DRAW_WALL) {
+                moveFlag = false;
+              } else moveFlag = true;
+            }
+          });
+        } else {
+          var px = vertices[drawingLine.vertices[0]].x;
+          var py = vertices[drawingLine.vertices[0]].y;
+          lineAngle = GeometryUtils.angleBetweenTwoPointsAndOrigin(px, py, x, y);
+          absAngle = Math.abs(lineAngle);
+        }
       }
 
       // if the angle is bigger or less than specific value, the wall mustn't be drawn at new position
@@ -608,9 +616,10 @@ var Line = /*#__PURE__*/function () {
       var _this3 = this;
       var layer = state.getIn(['scene', 'layers', layerID]);
       var allVertices = state.getIn(['scene', 'layers', layerID, 'vertices']);
-      selectedLineInfo.points.forEach(function (vertex, index) {
-        vertex = vertex.toJS();
-        if (vertex.lines.length === 2) {
+      selectedLineInfo.points.forEach(function (tvertex, index) {
+        var _tvertex$toJS, _vertex$lines;
+        var vertex = tvertex === null || tvertex === void 0 || (_tvertex$toJS = tvertex.toJS) === null || _tvertex$toJS === void 0 ? void 0 : _tvertex$toJS.call(tvertex);
+        if (vertex && !isEmpty(vertex) && ((_vertex$lines = vertex.lines) === null || _vertex$lines === void 0 ? void 0 : _vertex$lines.length) === 2) {
           var relatedLineID = vertex.lines.filter(function (lineID) {
             return !selectedLineInfo.mergelines.some(function (mgline) {
               return mgline.id === lineID;
@@ -618,27 +627,33 @@ var Line = /*#__PURE__*/function () {
           });
           if (!isEmpty(relatedLineID)) {
             var relatedLine = layer.lines.get(relatedLineID[0]);
-            var intersectionPoint = vertex;
-            var startPoint, endPoint;
-            if (relatedLine.vertices.get(0) === intersectionPoint.id) {
-              endPoint = allVertices.get(relatedLine.vertices.get(1));
-              startPoint = selectedLineInfo.points[1 - index];
-            } else {
-              startPoint = allVertices.get(relatedLine.vertices.get(0));
-              endPoint = selectedLineInfo.points[1 - index];
-            }
-            var tline1 = {
-              vertices: [startPoint.id, intersectionPoint.id]
-            };
-            var tline2 = {
-              vertices: [intersectionPoint.id, endPoint.id]
-            };
-            var angle = Math.abs(GeometryUtils.angleBetweenTwoLines(tline1, tline2, allVertices.toJS()));
-            if (Math.abs(angle - 180) <= EPSILON) {
-              selectedLineInfo.mergelines.push(relatedLine);
-              selectedLineInfo.points[0] = startPoint;
-              selectedLineInfo.points[1] = endPoint;
-              return _this3.mergeAllLines(state, selectedLineInfo, layerID);
+            if (!isEmpty(relatedLine)) {
+              var intersectionPoint = vertex;
+              var startPoint, endPoint;
+              var tstPoint = allVertices.get(relatedLine.vertices.get(0)).toJS();
+              var tedPoint = allVertices.get(relatedLine.vertices.get(1)).toJS();
+              if (!isEmpty(tstPoint) && !isEmpty(tedPoint)) {
+                if (relatedLine.vertices.get(0) === intersectionPoint.id) {
+                  endPoint = allVertices.get(relatedLine.vertices.get(1));
+                  startPoint = selectedLineInfo.points[1 - index];
+                } else {
+                  startPoint = allVertices.get(relatedLine.vertices.get(0));
+                  endPoint = selectedLineInfo.points[1 - index];
+                }
+                var tline1 = {
+                  vertices: [startPoint.id, intersectionPoint.id]
+                };
+                var tline2 = {
+                  vertices: [intersectionPoint.id, endPoint.id]
+                };
+                var angle = Math.abs(GeometryUtils.angleBetweenTwoLines(tline1, tline2, allVertices.toJS()));
+                if (Math.abs(angle - 180) <= EPSILON) {
+                  selectedLineInfo.mergelines.push(relatedLine);
+                  selectedLineInfo.points[0] = startPoint;
+                  selectedLineInfo.points[1] = endPoint;
+                  return _this3.mergeAllLines(state, selectedLineInfo, layerID);
+                }
+              }
             }
           }
         }
@@ -653,9 +668,7 @@ var Line = /*#__PURE__*/function () {
       var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
       var line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
       if (isEmpty(line)) {
-        return {
-          updatedState: state
-        };
+        return null;
       }
       var tmpStPoint = allVertices.get(line.vertices.get(0));
       var tmpEdPoint = allVertices.get(line.vertices.get(1));
@@ -677,7 +690,12 @@ var Line = /*#__PURE__*/function () {
     key: "createLines",
     value: function createLines(state, actionType, mergeInfo) {
       var _this4 = this,
-        _ret;
+        _ret2;
+      if (isEmpty(mergeInfo)) {
+        return {
+          updatedState: state
+        };
+      }
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
       var lineGroups = [];
@@ -690,6 +708,7 @@ var Line = /*#__PURE__*/function () {
         };
       }
       mergeInfo.mergelines.forEach(function (line) {
+        var _nv0$toJS, _nv1$toJS;
         if ([END_DRAGGING_LINE, END_DRAGGING_VERTEX].includes(actionType)) {
           var tmpGroups = state //get groups membership if present
           .getIn(['scene', 'groups']).filter(function (group) {
@@ -702,10 +721,12 @@ var Line = /*#__PURE__*/function () {
         }
         var nv0 = layer.getIn(['vertices', line.vertices.get(0)]);
         var nv1 = layer.getIn(['vertices', line.vertices.get(1)]);
-        var tmpholeposition = _this4.getHolePosition(layer, line.id, nv0, nv1);
-        tmpholeposition.forEach(function (holeInfo) {
-          return holesWithOffsetPosition.push(holeInfo);
-        });
+        if (!isEmpty(nv0 === null || nv0 === void 0 || (_nv0$toJS = nv0.toJS) === null || _nv0$toJS === void 0 ? void 0 : _nv0$toJS.call(nv0)) && !isEmpty(nv1 === null || nv1 === void 0 || (_nv1$toJS = nv1.toJS) === null || _nv1$toJS === void 0 ? void 0 : _nv1$toJS.call(nv1))) {
+          var tmpholeposition = _this4.getHolePosition(layer, line.id, nv0, nv1);
+          tmpholeposition.forEach(function (holeInfo) {
+            return holesWithOffsetPosition.push(holeInfo);
+          });
+        }
         state = Line.remove(state, layerID, line.id).updatedState;
       });
       var ret;
@@ -714,16 +735,18 @@ var Line = /*#__PURE__*/function () {
         state = ret.updatedState;
       }
       if ([END_DRAGGING_LINE, END_DRAGGING_VERTEX].includes(actionType)) {
+        var _ret;
         //re-add to old line's groups if present
-        ret.lines.forEach(function (addedLine) {
+        (_ret = ret) === null || _ret === void 0 || _ret.lines.forEach(function (addedLine) {
           lineGroups.forEach(function (oldLineGroup) {
             state = Group.addElement(state, oldLineGroup.id, layerID, 'lines', addedLine.id).updatedState;
           });
         });
       }
       state = Layer.removeZeroLengthLines(state, layerID).updatedState;
-      if (!isEmpty((_ret = ret) === null || _ret === void 0 ? void 0 : _ret.newline)) {
-        state = this.select(state, layerID, ret.newline.get('id')).updatedState;
+      if (!isEmpty((_ret2 = ret) === null || _ret2 === void 0 ? void 0 : _ret2.newline)) {
+        var _ret3;
+        state = this.select(state, layerID, (_ret3 = ret) === null || _ret3 === void 0 ? void 0 : _ret3.newline.get('id')).updatedState;
       }
       return {
         updatedState: state
@@ -767,11 +790,13 @@ var Line = /*#__PURE__*/function () {
           updatedState: state
         };
       }
-      if (!isEmpty(v0)) {
+      var tv0 = state.getIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(0)]).toJS();
+      var tv1 = state.getIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(1)]).toJS();
+      if (!isEmpty(v0) && !isEmpty(tv0)) {
         state = state.setIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(0), 'x'], v0.x);
         state = state.setIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(0), 'y'], v0.y);
       }
-      if (!isEmpty(v1)) {
+      if (!isEmpty(v1) && !isEmpty(tv1)) {
         state = state.setIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(1), 'x'], v1.x);
         state = state.setIn(['scene', 'layers', layerID, 'vertices', line.vertices.get(1), 'y'], v1.y);
       }
@@ -795,6 +820,11 @@ var Line = /*#__PURE__*/function () {
       var layerID = state.getIn(['drawingSupport', 'layerID']);
       var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
       var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
+      if (isEmpty(drawingLine)) {
+        return {
+          updatedState: state
+        };
+      }
       if (drawingLine.vertices[0] === drawingLine.vertices[1]) {
         state = Line.remove(state, layerID, lineID).updatedState;
         state = state.merge({
@@ -987,6 +1017,11 @@ var Line = /*#__PURE__*/function () {
       var line = layer.lines.get(lineID);
       var drawedLine = line.toJS();
       var allVertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+      if (isEmpty(drawedLine)) {
+        return {
+          updatedState: state
+        };
+      }
       var diffX = x - draggingSupport.get('startPointX');
       var diffY = y - draggingSupport.get('startPointY');
       var newVertex0X = draggingSupport.get('startVertex0X') + diffX;

package/es/class/project.js

@@ -3,12 +3,12 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 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; }
-import { List, Map } from 'immutable';
+import { Map, List } from 'immutable';
+import { MODE_VIEWING_CATALOG, MODE_CONFIGURING_PROJECT, MODE_IDLE, MODE_DRAWING_ITEM_3D, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_LINE, MODE_WAITING_DRAWING_LINE, MODE_DRAWING_HOLE, ARRAY_3D_MODES, END_DRAWING_LINE } from "../constants";
 import * as constants from "../constants";
-import { ARRAY_3D_MODES, END_DRAWING_LINE, MODE_CONFIGURING_PROJECT, MODE_DRAWING_HOLE, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_DRAWING_LINE, MODE_IDLE, MODE_IDLE_3D, MODE_VIEWING_CATALOG, MODE_WAITING_DRAWING_LINE } from "../constants";
-import { Catalog, Scene, State } from "../models";
+import { State, Catalog, Scene } from "../models";
 import { GeometryUtils, history } from "../utils/export";
-import { Area, Group, Hole, HorizontalGuide, Item, Layer, Line, VerticalGuide } from "../class/export";
+import { Layer, Group, Line, Hole, Item, Area, HorizontalGuide, VerticalGuide } from "../class/export";
 import * as viewer2DActions from "../actions/viewer2d-actions";
 import { isEmpty } from "../utils/helper";
 var Project = /*#__PURE__*/function () {
@@ -327,7 +327,7 @@ var Project = /*#__PURE__*/function () {
       var delLine = !isEmpty(lineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', lineID]).toJS();
       var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
       var relatedLines = [];
-      delLine && GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
+      !isEmpty(delLine) && GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
       selectedLines.forEach(function (lineID) {
         state = Line.remove(state, selectedLayer, lineID).updatedState;
       });
@@ -337,12 +337,14 @@ var Project = /*#__PURE__*/function () {
       selectedItems.forEach(function (itemID) {
         state = Item.remove(state, selectedLayer, itemID).updatedState;
       });
-      if (!isEmpty(relatedLines)) {
+      if (!isEmpty(selectedLines) && !isEmpty(relatedLines)) {
         state = state.setIn(['mode'], MODE_DRAWING_LINE);
         relatedLines.forEach(function (relLine, index) {
           state = Line.select(state, selectedLayer, relLine.id).updatedState;
           state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState;
         });
+      } else {
+        state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState;
       }
       state = Layer.unselectAll(state, selectedLayer).updatedState;
       var mode = state.getIn(['mode']);

package/es/class/vertex.js

@@ -171,7 +171,7 @@ var Vertex = /*#__PURE__*/function () {
       var layerID = draggingSupport.get('layerID');
       var vertexID = draggingSupport.get('vertexID');
       var lines = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, 'lines']);
-      if (lines) {
+      if (!isEmpty(lines)) {
         state = lines.reduce(function (reducedState, lineID) {
           var eachLine = reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]);
           if (isEmpty(eachLine)) return reducedState;

package/es/components/content.js

@@ -3,6 +3,8 @@ 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, _ref2) {
@@ -17,7 +19,6 @@ export default function Content(_ref, _ref2) {
     catalog = _ref.catalog;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
-  console.log('mode =>', mode);
   switch (mode) {
     // this mode is when view elevation
     case constants.MODE_ELEVATION_VIEW:
@@ -47,6 +48,14 @@ export default function Content(_ref, _ref2) {
         width: width,
         height: height
       });
+    case constants.MODE_VIEWING_CATALOG:
+      return /*#__PURE__*/React.createElement(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:
@@ -83,6 +92,12 @@ export default function Content(_ref, _ref2) {
         keyDownEnable: keyDownEnable,
         downloadFlag: false
       });
+    case constants.MODE_CONFIGURING_PROJECT:
+      return /*#__PURE__*/React.createElement(ProjectConfigurator, {
+        width: width,
+        height: height,
+        state: state
+      });
     default:
       if (customContents.hasOwnProperty(mode)) {
         var CustomContent = customContents[mode];

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

@@ -1,39 +1,18 @@
-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";
-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; }
+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 { DEFAULT_FONT_FAMILY, KEYBOARD_BUTTON_CODE, SECONDARY_PURPLE_COLOR, TEXT_COLOR_NEUTRAL_0 } from "../../constants";
+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 styles = {
-  input: {
-    display: 'block',
-    padding: '15px 25px 12px 0px',
-    width: 120,
-    color: TEXT_COLOR_NEUTRAL_0,
-    backgroundColor: 'rgb(255, 255, 255)',
-    border: '2px solid',
-    textAlign: 'right',
-    "float": 'right',
-    fontFamily: DEFAULT_FONT_FAMILY,
-    fontSize: 16,
-    fontWeight: 600,
-    lineHeight: '17px',
-    borderRadius: 5,
-    outline: 0,
-    transition: 'border-color 0.2s'
-  },
-  inputFocus: {
-    borderColor: SECONDARY_PURPLE_COLOR
-  }
-};
+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;
@@ -125,16 +104,13 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
           });
         }
       };
-
-      // Merge base style, focus style, and custom style
-      var inputStyle = _objectSpread(_objectSpread(_objectSpread({}, styles.input), this.state.focusOn ? styles.inputFocus : {}), style);
-      return /*#__PURE__*/React.createElement("input", {
+      return /*#__PURE__*/React.createElement(StyledInput, {
         id: "form_number_input",
         autoFocus: this.state.focusOn,
         readOnly: !!this.props.disabled,
         type: "text",
         value: currValue,
-        style: inputStyle,
+        style: style,
         onChange: function onChange(evt) {
           _this2.context.projectActions.copyProperties('ddddd');
           var valid = regexp.test(evt.nativeEvent.target.value);

package/es/components/style/form-select.js

@@ -1,59 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["children", "style"];
-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; }
+var _templateObject;
 import React from 'react';
-import { DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR, TEXT_COLOR_NEUTRAL_3 } from "../../constants";
-var styles = {
-  select: {
-    display: 'block',
-    width: 120,
-    "float": 'right',
-    padding: '15px 10px 12px 0px',
-    color: TEXT_COLOR_NEUTRAL_3,
-    border: '2px solid',
-    fontFamily: DEFAULT_FONT_FAMILY,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: '17px',
-    textAlign: 'right',
-    outline: 'none',
-    borderRadius: 5,
-    transition: 'border-color 0.2s'
-  }
-};
+import * as SharedStyle from "../../shared-style";
+import styled from 'styled-components';
+import { TEXT_COLOR_NEUTRAL_3, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR } from "../../constants";
+var StyledSelect = styled.select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 120px;\n  float: right;\n  padding: 15px 10px 12px 0px;\n  color: ", ";\n  border: 2px solid;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 17px;\n  text-align: right;\n  outline: none;\n  border-radius: 5px;\n  :hover {\n    border-color: ", ";\n  }\n  :focus {\n    border-color: ", ";\n  }\n"])), TEXT_COLOR_NEUTRAL_3, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR, SECONDARY_PURPLE_COLOR);
 export default function FormSelect(_ref) {
   var children = _ref.children,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    focus = _React$useState2[0],
-    setFocus = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    hover = _React$useState4[0],
-    setHover = _React$useState4[1];
-  var borderColor = focus || hover ? SECONDARY_PURPLE_COLOR : undefined;
-  return /*#__PURE__*/React.createElement("select", _extends({
+  return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     type: "text",
-    style: _objectSpread(_objectSpread({}, styles.select), {}, {
-      borderColor: borderColor
-    }, style),
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
-    onBlur: function onBlur() {
-      return setFocus(false);
-    },
-    onMouseEnter: function onMouseEnter() {
-      return setHover(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return setHover(false);
-    }
+    style: style
   }, rest), children);
 }

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

@@ -1,37 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-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";
 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 _excluded = ["style"];
-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; }
+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 { BG_COLOR_0, DEFAULT_FONT_FAMILY, PROJECT_NAME_LENGTH_LIMIT, SECONDARY_PURPLE_COLOR, TEXT_COLOR_NEUTRAL_3 } from "../../constants";
-var styles = {
-  input: {
-    display: 'block',
-    padding: '15px 10px 12px 0px',
-    width: 120,
-    fontFamily: DEFAULT_FONT_FAMILY,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: '17px',
-    color: TEXT_COLOR_NEUTRAL_3,
-    backgroundColor: BG_COLOR_0,
-    border: '2px solid',
-    textAlign: 'right',
-    "float": 'right',
-    borderRadius: 5,
-    outline: 0,
-    transition: 'border-color 0.2s'
-  }
-};
+import * as SharedStyle from "../../shared-style";
+import { PROJECT_NAME_LENGTH_LIMIT, TEXT_COLOR_NEUTRAL_3, BG_COLOR_0, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR } from "../../constants";
+import styled from 'styled-components';
+var StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  padding: 15px 10px 12px 0px;\n  width: 120px;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 17px;\n  color: ", ";\n  background-color: ", ";\n  border: 2px solid;\n  text-align: right;\n  float: right;\n  border-radius: 5px;\n  outline: 0;\n  :focus {\n    border-color: ", ";\n  }\n"])), DEFAULT_FONT_FAMILY, TEXT_COLOR_NEUTRAL_3, BG_COLOR_0, SECONDARY_PURPLE_COLOR);
 var FormTextInput = /*#__PURE__*/function (_Component) {
   function FormTextInput(props) {
     var _this;
@@ -58,23 +41,21 @@ var FormTextInput = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         style = _this$props.style,
         rest = _objectWithoutProperties(_this$props, _excluded);
-      var focus = this.state.focus;
-      var inputStyle = _objectSpread(_objectSpread({}, styles.input), {}, {
-        borderColor: focus ? SECONDARY_PURPLE_COLOR : undefined
-      }, style);
-      return /*#__PURE__*/React.createElement("input", _extends({
+      return /*#__PURE__*/React.createElement(StyledInput, _extends({
         ref: this.input,
-        onFocus: function onFocus() {
+        onFocus: function onFocus(e) {
           return _this2.setState({
             focus: true
           });
         },
-        onBlur: function onBlur() {
+        onBlur: function onBlur(e) {
           return _this2.setState({
             focus: false
           });
         },
-        style: inputStyle,
+        style: style
+        // autoFocus
+        ,
         type: "text"
       }, rest, {
         maxLength: PROJECT_NAME_LENGTH_LIMIT

package/es/components/viewer2d/area.js

@@ -1,10 +1,10 @@
 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";
-import { areaPolygon } from "./utils";
 var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '12px',

package/es/components/viewer2d/line.js

@@ -5,6 +5,7 @@ import Ruler from "./ruler";
 import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import * as Three from 'three';
 import { isEmpty } from "./utils";
+import Tooltip from '@material-ui/core/Tooltip';
 var STYLE = {
   stroke: 'rgb(77, 77, 77)',
   strokeWidth: '1px'
@@ -147,7 +148,14 @@ export default function Line(_ref) {
     var r1 = itemRect.rect[1];
     var r2 = itemRect.rect[2];
     var r3 = itemRect.rect[3];
-    var delta23 = GeometryUtils.verticesDistance(l2, r3) + GeometryUtils.verticesDistance(r3, r2) + GeometryUtils.verticesDistance(r2, l3) - GeometryUtils.verticesDistance(l3, l2);
+    var tverArray = [l2, l3, r2, r3].sort(function (_ref2, _ref3) {
+      var x1 = _ref2.x,
+        y1 = _ref2.y;
+      var x2 = _ref3.x,
+        y2 = _ref3.y;
+      return x1 === x2 ? y1 - y2 : x1 - x2;
+    });
+    var delta23 = GeometryUtils.verticesDistance(tverArray[0], tverArray[1]) + GeometryUtils.verticesDistance(tverArray[1], tverArray[2]) + GeometryUtils.verticesDistance(tverArray[2], tverArray[3]) - GeometryUtils.verticesDistance(tverArray[0], tverArray[3]);
     if (delta23 < 0.1) {
       return true;
     } else {
@@ -794,7 +802,9 @@ export default function Line(_ref) {
     } : {}
   }, renderedLine, /*#__PURE__*/React.createElement("g", {
     transform: "translate(".concat(x1, ", ").concat(y1, ") rotate(").concat(angle, ", 0, 0)")
-  }, renderedHoles)), line.selected && /*#__PURE__*/React.createElement("g", {
+  }, renderedHoles)), line.selected && /*#__PURE__*/React.createElement(Tooltip, {
+    title: "Elevation View"
+  }, /*#__PURE__*/React.createElement("g", {
     id: 'elevation-button',
     key: 1,
     transform: "translate(".concat(x1 + 35, ", ").concat(y1 - 15, ")"),
@@ -824,7 +834,7 @@ export default function Line(_ref) {
     style: {
       transform: 'rotateX(180deg)'
     }
-  })), line.selected && /*#__PURE__*/React.createElement("g", {
+  }))), line.selected && /*#__PURE__*/React.createElement("g", {
     id: 'remove-button',
     key: 2,
     transform: "translate(".concat(x1 + 10, ", ").concat(y1, ")"),

package/es/components/viewer2d/scene.js

@@ -10,7 +10,8 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 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 { Grids, Layer } from "./export";
+import { Layer, Grids } from "./export";
+import { searchForSkuValue } from "./utils";
 var Scene = /*#__PURE__*/function (_Component) {
   function Scene() {
     _classCallCheck(this, Scene);
@@ -29,7 +30,6 @@ var Scene = /*#__PURE__*/function (_Component) {
               if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
                 scene = nextProps.scene, catalog = nextProps.catalog;
                 height = scene.height, layers = scene.layers;
-                console.log(layers.toJS());
                 selectedLayer = layers.get(scene.selectedLayer);
                 msg = '';
                 isNotFoundInElements = false;

package/es/components/viewer2d/utils.js

@@ -161,12 +161,6 @@ export var getToeKickSKU = function getToeKickSKU() {
   if (!skuData) return false;
   return skuData;
 };
-
-// ESM version of "area-polygon" with default + named export.
-// Same behavior: takes an array of [x,y] tuples or {x,y} objects.
-// If `signed` is truthy, returns signed area; otherwise absolute area.
-// Does not mutate the input array.
-
 function normalize(point) {
   if (Array.isArray(point)) {
     return {