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

package/lib/class/item.js

@@ -15,6 +15,7 @@ var _export2 = require("../utils/export");
 var _immutable = require("immutable");
 var _constants = require("../constants");
 var _helper = require("../utils/helper");
+var _util = require("util");
 var _molding = require("../utils/molding");
 var _utils = require("../components/viewer2d/utils");
 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; }
@@ -598,6 +599,10 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         })
       });
       state = state.mergeIn(['scene', 'loadFlag'], false);
+
+      // place the item at random position
+      var layerID = state.scene.get('selectedLayer');
+      state = this.updateDrawingItem(state, layerID, 0, 0).updatedState;
       return {
         updatedState: state
       };
@@ -722,7 +727,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
     value: function beginDraggingItem(state, layerID, itemID, x, y) {
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
       time1 = (0, _helper.debugUtil)();
-      if (!item) return;
+      if ((0, _util.isUndefined)(item)) return;
       state = state.merge({
         mode: _constants.MODE_DRAGGING_ITEM,
         draggingSupport: (0, _immutable.Map)({
@@ -743,7 +748,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
     value: function beginDraggingItem3D(state, layerID, itemID, x, y) {
       var item = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
       state = state.setIn(['scene', 'isEndDragging'], false);
-      if (!item) return {
+      if ((0, _util.isUndefined)(item)) return {
         updatedState: state
       };
       state = state.merge({
@@ -776,7 +781,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       var diffX = startPointX - x;
       var diffY = startPointY - y;
       var item = scene.getIn(['layers', layerID, 'items', itemID]);
-      if (!item) return {
+      if ((0, _util.isUndefined)(item)) return {
         updatedState: state
       };
       var tX = originalX - diffX;

package/lib/class/line.js

@@ -88,7 +88,7 @@ var Line = exports["default"] = /*#__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 = _export.Layer.select(state, layerID);
       if (!layerResult || !layerResult.updatedState) {
@@ -100,7 +100,7 @@ var Line = exports["default"] = /*#__PURE__*/function () {
 
       // Try getting the line
       var line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
-      if (!line) {
+      if (!line || (0, _helper.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
@@ -136,8 +136,9 @@ var Line = exports["default"] = /*#__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 && !(0, _helper.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 = _export.Hole.remove(state, layerID, holeID).updatedState;
@@ -520,18 +521,25 @@ var Line = exports["default"] = /*#__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 (!(0, _helper.isEmpty)(line)) {
-            // the angle between two lines(line, drawingLine)
-            lineAngle = _export2.GeometryUtils.angleBetweenTwoLines(line, drawingLine, vertices);
-            // check whether the angle is less than or bigger than specific value.
-            absAngle = Math.abs(lineAngle);
-            if (absAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - _constants.MIN_ANGLE_DISALLOW_DRAW_WALL) {
-              moveFlag = false;
-            } else moveFlag = true;
-          }
-        });
+        if (!(0, _helper.isEmpty)(relatedLines)) {
+          relatedLines.forEach(function (line) {
+            // get the points of two lines(drawing line and related line)
+            if (!(0, _helper.isEmpty)(line)) {
+              // the angle between two lines(line, drawingLine)
+              lineAngle = _export2.GeometryUtils.angleBetweenTwoLines(line, drawingLine, vertices);
+              // check whether the angle is less than or bigger than specific value.
+              absAngle = Math.abs(lineAngle);
+              if (absAngle < _constants.MIN_ANGLE_DISALLOW_DRAW_WALL || absAngle > 360 - _constants.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 = _export2.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
@@ -617,9 +625,10 @@ var Line = exports["default"] = /*#__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 && !(0, _helper.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;
@@ -627,27 +636,33 @@ var Line = exports["default"] = /*#__PURE__*/function () {
           });
           if (!(0, _helper.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(_export2.GeometryUtils.angleBetweenTwoLines(tline1, tline2, allVertices.toJS()));
-            if (Math.abs(angle - 180) <= _constants.EPSILON) {
-              selectedLineInfo.mergelines.push(relatedLine);
-              selectedLineInfo.points[0] = startPoint;
-              selectedLineInfo.points[1] = endPoint;
-              return _this3.mergeAllLines(state, selectedLineInfo, layerID);
+            if (!(0, _helper.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 (!(0, _helper.isEmpty)(tstPoint) && !(0, _helper.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(_export2.GeometryUtils.angleBetweenTwoLines(tline1, tline2, allVertices.toJS()));
+                if (Math.abs(angle - 180) <= _constants.EPSILON) {
+                  selectedLineInfo.mergelines.push(relatedLine);
+                  selectedLineInfo.points[0] = startPoint;
+                  selectedLineInfo.points[1] = endPoint;
+                  return _this3.mergeAllLines(state, selectedLineInfo, layerID);
+                }
+              }
             }
           }
         }
@@ -662,9 +677,7 @@ var Line = exports["default"] = /*#__PURE__*/function () {
       var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
       var line = state.getIn(['scene', 'layers', layerID, 'lines', lineID]);
       if ((0, _helper.isEmpty)(line)) {
-        return {
-          updatedState: state
-        };
+        return null;
       }
       var tmpStPoint = allVertices.get(line.vertices.get(0));
       var tmpEdPoint = allVertices.get(line.vertices.get(1));
@@ -686,7 +699,12 @@ var Line = exports["default"] = /*#__PURE__*/function () {
     key: "createLines",
     value: function createLines(state, actionType, mergeInfo) {
       var _this4 = this,
-        _ret;
+        _ret2;
+      if ((0, _helper.isEmpty)(mergeInfo)) {
+        return {
+          updatedState: state
+        };
+      }
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
       var lineGroups = [];
@@ -699,6 +717,7 @@ var Line = exports["default"] = /*#__PURE__*/function () {
         };
       }
       mergeInfo.mergelines.forEach(function (line) {
+        var _nv0$toJS, _nv1$toJS;
         if ([_constants.END_DRAGGING_LINE, _constants.END_DRAGGING_VERTEX].includes(actionType)) {
           var tmpGroups = state //get groups membership if present
           .getIn(['scene', 'groups']).filter(function (group) {
@@ -711,10 +730,12 @@ var Line = exports["default"] = /*#__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 (!(0, _helper.isEmpty)(nv0 === null || nv0 === void 0 || (_nv0$toJS = nv0.toJS) === null || _nv0$toJS === void 0 ? void 0 : _nv0$toJS.call(nv0)) && !(0, _helper.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;
@@ -723,16 +744,18 @@ var Line = exports["default"] = /*#__PURE__*/function () {
         state = ret.updatedState;
       }
       if ([_constants.END_DRAGGING_LINE, _constants.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 = _export.Group.addElement(state, oldLineGroup.id, layerID, 'lines', addedLine.id).updatedState;
           });
         });
       }
       state = _export.Layer.removeZeroLengthLines(state, layerID).updatedState;
-      if (!(0, _helper.isEmpty)((_ret = ret) === null || _ret === void 0 ? void 0 : _ret.newline)) {
-        state = this.select(state, layerID, ret.newline.get('id')).updatedState;
+      if (!(0, _helper.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
@@ -776,11 +799,13 @@ var Line = exports["default"] = /*#__PURE__*/function () {
           updatedState: state
         };
       }
-      if (!(0, _helper.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 (!(0, _helper.isEmpty)(v0) && !(0, _helper.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 (!(0, _helper.isEmpty)(v1)) {
+      if (!(0, _helper.isEmpty)(v1) && !(0, _helper.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);
       }
@@ -804,6 +829,11 @@ var Line = exports["default"] = /*#__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 ((0, _helper.isEmpty)(drawingLine)) {
+        return {
+          updatedState: state
+        };
+      }
       if (drawingLine.vertices[0] === drawingLine.vertices[1]) {
         state = Line.remove(state, layerID, lineID).updatedState;
         state = state.merge({
@@ -996,6 +1026,11 @@ var Line = exports["default"] = /*#__PURE__*/function () {
       var line = layer.lines.get(lineID);
       var drawedLine = line.toJS();
       var allVertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+      if ((0, _helper.isEmpty)(drawedLine)) {
+        return {
+          updatedState: state
+        };
+      }
       var diffX = x - draggingSupport.get('startPointX');
       var diffY = y - draggingSupport.get('startPointY');
       var newVertex0X = draggingSupport.get('startVertex0X') + diffX;

package/lib/class/project.js

@@ -336,7 +336,7 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       var delLine = !(0, _helper.isEmpty)(lineID) && state.getIn(['scene', 'layers', selectedLayer, 'lines', lineID]).toJS();
       var allLines = state.getIn(['scene', 'layers', selectedLayer, 'lines']).toJS();
       var relatedLines = [];
-      delLine && _export.GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
+      !(0, _helper.isEmpty)(delLine) && _export.GeometryUtils.getRelatedLines(relatedLines, delLine, allVertices, allLines);
       selectedLines.forEach(function (lineID) {
         state = _export2.Line.remove(state, selectedLayer, lineID).updatedState;
       });
@@ -346,12 +346,14 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       selectedItems.forEach(function (itemID) {
         state = _export2.Item.remove(state, selectedLayer, itemID).updatedState;
       });
-      if (!(0, _helper.isEmpty)(relatedLines)) {
+      if (!(0, _helper.isEmpty)(selectedLines) && !(0, _helper.isEmpty)(relatedLines)) {
         state = state.setIn(['mode'], _constants.MODE_DRAWING_LINE);
         relatedLines.forEach(function (relLine, index) {
           state = _export2.Line.select(state, selectedLayer, relLine.id).updatedState;
           state = _export2.Line.applyWallChanges(state, _constants.END_DRAWING_LINE).updatedState;
         });
+      } else {
+        state = _export2.Line.applyWallChanges(state, _constants.END_DRAWING_LINE).updatedState;
       }
       state = _export2.Layer.unselectAll(state, selectedLayer).updatedState;
       var mode = state.getIn(['mode']);

package/lib/class/vertex.js

@@ -178,7 +178,7 @@ var Vertex = exports["default"] = /*#__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 (!(0, _helper.isEmpty)(lines)) {
         state = lines.reduce(function (reducedState, lineID) {
           var eachLine = reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]);
           if ((0, _helper.isEmpty)(eachLine)) return reducedState;

package/lib/components/content.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _viewer2d = _interopRequireDefault(require("./viewer2d/viewer2d"));
 var _viewer3d = _interopRequireDefault(require("./viewer3d/viewer3d"));
 var _viewer3dFirstPerson = _interopRequireDefault(require("./viewer3d/viewer3d-first-person"));
+var _catalogList = _interopRequireDefault(require("./catalog-view/catalog-list"));
+var _projectConfigurator = _interopRequireDefault(require("./configurator/project-configurator"));
 var constants = _interopRequireWildcard(require("../constants"));
 var _front3D = _interopRequireDefault(require("./viewer3d/front3D"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -26,7 +28,6 @@ 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:
@@ -56,6 +57,14 @@ function Content(_ref, _ref2) {
         width: width,
         height: height
       });
+    case constants.MODE_VIEWING_CATALOG:
+      return /*#__PURE__*/_react["default"].createElement(_catalogList["default"], {
+        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:
@@ -92,6 +101,12 @@ function Content(_ref, _ref2) {
         keyDownEnable: keyDownEnable,
         downloadFlag: false
       });
+    case constants.MODE_CONFIGURING_PROJECT:
+      return /*#__PURE__*/_react["default"].createElement(_projectConfigurator["default"], {
+        width: width,
+        height: height,
+        state: state
+      });
     default:
       if (customContents.hasOwnProperty(mode)) {
         var CustomContent = customContents[mode];

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

@@ -6,43 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("../../constants");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _helper = require("../../utils/helper");
+var _templateObject;
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
-var styles = {
-  input: {
-    display: 'block',
-    padding: '15px 25px 12px 0px',
-    width: 120,
-    color: _constants.TEXT_COLOR_NEUTRAL_0,
-    backgroundColor: 'rgb(255, 255, 255)',
-    border: '2px solid',
-    textAlign: 'right',
-    "float": 'right',
-    fontFamily: _constants.DEFAULT_FONT_FAMILY,
-    fontSize: 16,
-    fontWeight: 600,
-    lineHeight: '17px',
-    borderRadius: 5,
-    outline: 0,
-    transition: 'border-color 0.2s'
-  },
-  inputFocus: {
-    borderColor: _constants.SECONDARY_PURPLE_COLOR
-  }
-};
+var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY, _constants.SECONDARY_PURPLE_COLOR);
 var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
   function FormNumberInput(props, context) {
     var _this;
@@ -134,16 +113,13 @@ var FormNumberInput = exports["default"] = /*#__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["default"].createElement("input", {
+      return /*#__PURE__*/_react["default"].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/lib/components/style/form-select.js

@@ -1,67 +1,29 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = FormSelect;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _constants = require("../../constants");
 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) { (0, _defineProperty2["default"])(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 styles = {
-  select: {
-    display: 'block',
-    width: 120,
-    "float": 'right',
-    padding: '15px 10px 12px 0px',
-    color: _constants.TEXT_COLOR_NEUTRAL_3,
-    border: '2px solid',
-    fontFamily: _constants.DEFAULT_FONT_FAMILY,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: '17px',
-    textAlign: 'right',
-    outline: 'none',
-    borderRadius: 5,
-    transition: 'border-color 0.2s'
-  }
-};
+var _templateObject;
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var StyledSelect = _styledComponents["default"].select(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), _constants.TEXT_COLOR_NEUTRAL_3, _constants.DEFAULT_FONT_FAMILY, _constants.SECONDARY_PURPLE_COLOR, _constants.SECONDARY_PURPLE_COLOR);
 function FormSelect(_ref) {
   var children = _ref.children,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    focus = _React$useState2[0],
-    setFocus = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState(false),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    hover = _React$useState4[0],
-    setHover = _React$useState4[1];
-  var borderColor = focus || hover ? _constants.SECONDARY_PURPLE_COLOR : undefined;
-  return /*#__PURE__*/_react["default"].createElement("select", (0, _extends2["default"])({
+  return /*#__PURE__*/_react["default"].createElement(StyledSelect, (0, _extends2["default"])({
     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);
 }
 module.exports = exports.default;

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

@@ -7,40 +7,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _constants = require("../../constants");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _excluded = ["style"];
+var _templateObject;
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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) { (0, _defineProperty2["default"])(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 = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
-var styles = {
-  input: {
-    display: 'block',
-    padding: '15px 10px 12px 0px',
-    width: 120,
-    fontFamily: _constants.DEFAULT_FONT_FAMILY,
-    fontSize: 12,
-    fontWeight: 600,
-    lineHeight: '17px',
-    color: _constants.TEXT_COLOR_NEUTRAL_3,
-    backgroundColor: _constants.BG_COLOR_0,
-    border: '2px solid',
-    textAlign: 'right',
-    "float": 'right',
-    borderRadius: 5,
-    outline: 0,
-    transition: 'border-color 0.2s'
-  }
-};
+var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\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"])), _constants.DEFAULT_FONT_FAMILY, _constants.TEXT_COLOR_NEUTRAL_3, _constants.BG_COLOR_0, _constants.SECONDARY_PURPLE_COLOR);
 var FormTextInput = exports["default"] = /*#__PURE__*/function (_Component) {
   function FormTextInput(props) {
     var _this;
@@ -67,23 +50,21 @@ var FormTextInput = exports["default"] = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         style = _this$props.style,
         rest = (0, _objectWithoutProperties2["default"])(_this$props, _excluded);
-      var focus = this.state.focus;
-      var inputStyle = _objectSpread(_objectSpread({}, styles.input), {}, {
-        borderColor: focus ? _constants.SECONDARY_PURPLE_COLOR : undefined
-      }, style);
-      return /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(StyledInput, (0, _extends2["default"])({
         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: _constants.PROJECT_NAME_LENGTH_LIMIT

package/lib/components/viewer2d/area.js

@@ -8,10 +8,10 @@ exports["default"] = Area;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _polylabel = _interopRequireDefault(require("polylabel"));
+var _utils = require("./utils");
 var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _math = require("../../utils/math");
 var _constants = require("../../constants");
-var _utils = require("./utils");
 var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '12px',