kitchen-simulator 1.0.0-alin.4 → 1.0.0-alin.40

package/es/LiteKitchenConfigurator.js

@@ -103,7 +103,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       redirectURL: '',
       snackBarMessage: '',
       isSaved: false,
-      isLeaving: false
+      isLeaving: false,
+      stateCatalog: _this.props.catalog
     };
 
     // For UTM tracking
@@ -467,6 +468,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
+      var _oldState$catalog, _plannerState$catalog;
       var stateExtractor = nextProps.stateExtractor,
         state = nextProps.state,
         projectActions = nextProps.projectActions,
@@ -475,9 +477,18 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
 
       // handle external events
       if (this.props.externalEvent !== externalEvent) {
-        handleExternalEvent(externalEvent, this.props);
+        handleExternalEvent(nextProps);
       }
       var plannerState = stateExtractor(state);
+      var oldState = stateExtractor(this.props.state);
+      if ((oldState === null || oldState === void 0 || (_oldState$catalog = oldState.catalog) === null || _oldState$catalog === void 0 ? void 0 : _oldState$catalog.elements) !== (plannerState === null || plannerState === void 0 || (_plannerState$catalog = plannerState.catalog) === null || _plannerState$catalog === void 0 ? void 0 : _plannerState$catalog.elements)) {
+        // copy state.catalog to the props.catalog
+        // let catalog = this.state.stateCatalog;
+        // console.log('111111', plannerState?.catalog?.elements.toJS());
+        // catalog.elements = plannerState?.catalog?.elements.toJS();
+        // console.log('222222', catalog);
+        // this.setState({ stateCatalog: catalog });
+      }
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
       if (!catalogReady) {
         projectActions.initCatalog(catalog);
@@ -573,7 +584,7 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Content, _extends({
         width: contentW,
         height: contentH,
-        catalog: this.props.catalog,
+        catalog: this.state.stateCatalog,
         state: extractedState,
         toolBar: this.state.toolbar,
         setToolbar: this.setToolbar,

package/es/LiteRenderer.js

@@ -249,8 +249,6 @@ export default function LiteRenderer(props) {
     colorAlias = _ref.colorAlias,
     subgroups = _ref.subgroups;
   var _ref2 = dataBundle || {},
-    _ref2$data = _ref2.data,
-    data = _ref2$data === void 0 ? [] : _ref2$data,
     _ref2$appliances = _ref2.appliances,
     appliances = _ref2$appliances === void 0 ? [] : _ref2$appliances,
     _ref2$furnishing = _ref2.furnishing,
@@ -262,14 +260,10 @@ export default function LiteRenderer(props) {
   var id = configData.id,
     logoImg = configData.logoImg,
     companyUrl = configData.companyUrl;
-  var _React$useState = React.useState([]),
+  var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    outlineSVGData = _React$useState2[0],
-    setOutlineSVGData = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    catalogInitiated = _React$useState4[0],
-    setCatalogInitiated = _React$useState4[1];
+    catalogInitiated = _React$useState2[0],
+    setCatalogInitiated = _React$useState2[1];
   useEffect(function () {
     var initMyCatalog = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -388,103 +382,27 @@ export default function LiteRenderer(props) {
         return _ref4.apply(this, arguments);
       };
     }();
-    var loadSVGs = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-        var svgLoadPromises, outlineData;
-        return _regeneratorRuntime.wrap(function (_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
-            case 0:
-              svgLoadPromises = data.map(/*#__PURE__*/function () {
-                var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(item) {
-                  var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
-                  return _regeneratorRuntime.wrap(function (_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
-                      case 0:
-                        if (item.outline) {
-                          _context3.next = 1;
-                          break;
-                        }
-                        return _context3.abrupt("return", null);
-                      case 1:
-                        _context3.prev = 1;
-                        _context3.next = 2;
-                        return fetch(item.outline, {
-                          cache: 'no-store'
-                        });
-                      case 2:
-                        response = _context3.sent;
-                        _context3.next = 3;
-                        return response.text();
-                      case 3:
-                        svgText = _context3.sent;
-                        loader = new SVGLoader();
-                        parsed = loader.parse(svgText);
-                        if (!isEmpty(parsed.paths)) {
-                          _context3.next = 4;
-                          break;
-                        }
-                        return _context3.abrupt("return", null);
-                      case 4:
-                        return _context3.abrupt("return", {
-                          paths: parsed.paths,
-                          svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
-                          svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
-                          reverse: !parseFloat(parsed.xml.getAttribute('height'))
-                        });
-                      case 5:
-                        _context3.prev = 5;
-                        _t = _context3["catch"](1);
-                        console.error('Failed to load SVG:', item.outline, _t);
-                        return _context3.abrupt("return", null);
-                      case 6:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }, _callee3, null, [[1, 5]]);
-                }));
-                return function (_x3) {
-                  return _ref6.apply(this, arguments);
-                };
-              }());
-              _context4.next = 1;
-              return Promise.all(svgLoadPromises);
-            case 1:
-              outlineData = _context4.sent;
-              setOutlineSVGData(outlineData);
-            case 2:
-            case "end":
-              return _context4.stop();
-          }
-        }, _callee4);
-      }));
-      return function loadSVGs() {
-        return _ref5.apply(this, arguments);
-      };
-    }();
     var initCatalog = /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
-        return _regeneratorRuntime.wrap(function (_context5) {
-          while (1) switch (_context5.prev = _context5.next) {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function (_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               setCatalogInitiated(false);
-              _context5.next = 1;
+              _context3.next = 1;
               return initMyCatalog();
             case 1:
-              _context5.next = 2;
+              _context3.next = 2;
               return loadMoldings();
             case 2:
-              _context5.next = 3;
-              return loadSVGs();
-            case 3:
               setCatalogInitiated(true);
-            case 4:
+            case 3:
             case "end":
-              return _context5.stop();
+              return _context3.stop();
           }
-        }, _callee5);
+        }, _callee3);
       }));
       return function initCatalog() {
-        return _ref7.apply(this, arguments);
+        return _ref5.apply(this, arguments);
       };
     }();
     initCatalog();
@@ -493,16 +411,7 @@ export default function LiteRenderer(props) {
 
   // Register items once SVGs are loaded
   useEffect(function () {
-    if (!outlineSVGData.length) return;
     var Item = [];
-    data.forEach(function (obj, index) {
-      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
-        type: 'cabinet',
-        outlineSVGData: outlineSVGData[index],
-        render2DItem: render2DItem,
-        render3DItem: render3DItem
-      })));
-    });
     appliances.forEach(function (obj) {
       Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
         render2DItem: render2DItem,
@@ -525,7 +434,7 @@ export default function LiteRenderer(props) {
       })));
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
-  }, [outlineSVGData, data, appliances, furnishing, lighting]);
+  }, [appliances, furnishing, lighting]);
   useEffect(function () {
     if (projectElement.length === 0) return;
     if (!catalogInitiated) return;
@@ -556,7 +465,6 @@ export default function LiteRenderer(props) {
       return state.get('KitchenConfigurator');
     },
     categoryData: categoryData,
-    data: data,
     configData: configData,
     externalEvent: externalEvent
   }, passThrough)))));

package/es/actions/items-actions.js

@@ -223,11 +223,10 @@ export function updateItemsAltitude(layerID, itemID, value) {
     value: value
   };
 }
-export function setDoorStyle(doorStyle, pathes, isAll) {
+export function setDoorStyle(doorStyle, isAll) {
   return {
     type: SET_DOOR_STYLE,
     doorStyle: doorStyle,
-    pathes: pathes,
     isAll: isAll
   };
 }

package/es/catalog/catalog.js

@@ -247,7 +247,10 @@ var Catalog = /*#__PURE__*/function () {
       if (name === '') {
         throw new Error('Category has empty name');
       }
-      return !this.hasCategory(name);
+      if (this.hasCategory(name)) {
+        throw new Error('Category has already been registered');
+      }
+      return true;
     }
 
     /**

package/es/class/item.js

@@ -1164,7 +1164,7 @@ var Item = /*#__PURE__*/function () {
     }
   }, {
     key: "setDoorStyle",
-    value: function setDoorStyle(state, doorStyle, pathes, isAll) {
+    value: function setDoorStyle(state, doorStyle, isAll) {
       var _this2 = this;
       var keys = Object.keys(doorStyle.doorStyles);
       keys = keys.filter(function (elem) {

package/es/class/project.js

@@ -478,6 +478,10 @@ var Project = /*#__PURE__*/function () {
         };
       }
       var mode;
+      var isLineAction = false;
+      if (state.mode.includes('LINE')) {
+        isLineAction = true;
+      }
       if (state.mode == MODE_DRAWING_ITEM_3D) {
         mode = MODE_IDLE_3D;
         if (state.drawingSupport.has('currentID')) state = Layer.removeElement(state, state.scene.selectedLayer, 'items', state.drawingSupport.get('currentID')).updatedState;
@@ -520,6 +524,9 @@ var Project = /*#__PURE__*/function () {
         draggingSupport: new Map(),
         rotatingSupport: new Map()
       });
+      if (isLineAction) {
+        state = Line.applyWallChanges(state, END_DRAWING_LINE).updatedState;
+      }
       return {
         updatedState: state
       };
@@ -604,7 +611,7 @@ var Project = /*#__PURE__*/function () {
           updatedState: state
         };
       } catch (error) {
-        console.log('initCatalogError', error);
+        console.log('addElementToCatalogError', error);
         return {
           updatedState: state
         };

package/es/components/viewer2d/item.js

@@ -6,6 +6,7 @@ import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { isEmpty, returnReplaceableDeepSearchType } from "./utils";
+import { findCatalogElement } from "../../utils/geometry";
 var STYLE_LINE = {
   fill: '#0096fd',
   stroke: '#0096fd'
@@ -21,6 +22,7 @@ var STYLE_CIRCLE2 = {
   cursor: 'ew-resize'
 };
 export default function Item(_ref, _ref2) {
+  var _element$render2D;
   var layer = _ref.layer,
     item = _ref.item,
     scene = _ref.scene,
@@ -29,7 +31,8 @@ export default function Item(_ref, _ref2) {
   var itemsActions = _ref2.itemsActions;
   var x = item.x,
     y = item.y,
-    rotation = item.rotation;
+    rotation = item.rotation,
+    id = item.id;
   var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
     showWallCabinetMeasure = scene.showWallCabinetMeasure;
   var vertices = layer.vertices;
@@ -116,12 +119,7 @@ export default function Item(_ref, _ref2) {
     if (layer.selected.items.size > 0) {
       selectedItem = layer.getIn(['items', layer.selected.items.get(0)]);
       var catid = selectedItem.type;
-      var cat = catalog.elements[catid];
-      if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
-      if (cat === undefined || cat === null) {
-        cat = catalog.getIn(['elements', catid]);
-        if (!cat) cat = catalog.getIn(['elements', returnReplaceableDeepSearchType(catid)]);
-      }
+      var cat = findCatalogElement(catalog, catid);
       currentItem = {
         selectedItem: selectedItem,
         cat: cat
@@ -136,8 +134,7 @@ export default function Item(_ref, _ref2) {
         rotRad: item.rotation / 180 * Math.PI
       };
       var catid = item.type;
-      var cat = catalog.elements[catid];
-      if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
+      var cat = findCatalogElement(catalog, catid);
       var width = convert(item.properties.getIn(['width', '_length'])).from('in').to('cm');
       var height = convert(item.properties.getIn(['depth', '_length'])).from('in').to('cm');
       // let width = cat.info.sizeinfo.width;
@@ -281,6 +278,9 @@ export default function Item(_ref, _ref2) {
   PointArray.forEach(function (pointElement, index) {
     if (pointElement[0] == undefined) PointArray[index][0] = 0;
   });
+  if (Array.isArray(PointArray)) {
+    itemsActions.storeDistArray(layerID, id, PointArray);
+  }
   var renderedRuler = [];
   var ep = 0.1;
   if (item.selected) {
@@ -310,7 +310,7 @@ export default function Item(_ref, _ref2) {
       }
     });
   }
-  var renderedItem = element.render2D.call(element, item, layer, scene);
+  var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
   var isSmall = false;
   if (width < 40) isSmall = true;
   var parts = [];

package/es/components/viewer2d/layer.js

@@ -137,7 +137,7 @@ export default function Layer(_ref) {
       unit: unit,
       catalog: catalog
     });
-  }), lineData, itemData, itemWall, itemSelected, mode !== MODE_DRAWING_LINE && vertices.valueSeq().filter(function (v) {
+  }), itemData, itemWall, lineData, itemSelected, mode !== MODE_DRAWING_LINE && vertices.valueSeq().filter(function (v) {
     return v.selected;
   }).map(function (vertex) {
     return /*#__PURE__*/React.createElement(Vertex, {

package/es/components/viewer2d/line.js

@@ -2,7 +2,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, WALL_CABINET_LAYOUTPOS } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, LINE_THICKNESS, MODE_DRAGGING_LINE, MODE_DRAWING_LINE, WALL_CABINET_LAYOUTPOS, MAX_ANGLE_SCALE } from "../../constants";
 import * as Three from 'three';
 import { isEmpty } from "./utils";
 var STYLE = {
@@ -21,7 +21,7 @@ var STYLE_TEXT = {
   textAnchor: 'middle',
   fontSize: '7px',
   fontWeight: 'middle',
-  fontFamily: "'Microsoft YaHei UI', Courier, monospace"
+  fontFamily: "'Courier New', Courier, monospace"
 };
 export function compareVertices(v0, v1) {
   return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
@@ -710,22 +710,32 @@ export default function Line(_ref) {
     "data-layer": layer.id,
     "data-length": length
   }, showWallLengthMeasure ? renderedRuler : null), line.selected && angleVertices.map(function (vertex, index) {
+    var _relateLineLengthArra2;
     var lineGroup = vertex[0].lines;
     var angles = [];
     var thickness = [];
     var vectories = [];
+    var relateLineLengthArray = [];
+
     // get the vector of lines
     lineGroup.forEach(function (line) {
+      var _relateLineLengthArra;
       line = layer.lines.get(line);
       var vertex0 = layer.vertices.get(line.vertices.get(0));
       var vertex1 = layer.vertices.get(line.vertices.get(1));
       var vec = vertex0 === vertex[0] ? new Three.Vector2(vertex1.x - vertex0.x, vertex1.y - vertex0.y) : new Three.Vector2(vertex0.x - vertex1.x, vertex0.y - vertex1.y);
+      (_relateLineLengthArra = relateLineLengthArray) === null || _relateLineLengthArra === void 0 || _relateLineLengthArra.push(GeometryUtils.verticesDistance(vertex0, vertex1));
       var angle = vec.angle();
       var thick = 15;
       angles.push(angle);
       thickness.push(thick);
       vectories.push(vec.normalize());
     });
+    relateLineLengthArray = (_relateLineLengthArra2 = relateLineLengthArray) === null || _relateLineLengthArra2 === void 0 ? void 0 : _relateLineLengthArra2.sort(function (a, b) {
+      return a - b;
+    });
+    var minLineLength = relateLineLengthArray[0] < MAX_ANGLE_SCALE * 2 ? relateLineLengthArray[0] / 2 //  scale down to half of the smallest adjacent surface
+    : MAX_ANGLE_SCALE;
 
     // calculate the angle between two lines
     var center = new Three.Vector2(vertex[0].x, vertex[0].y);
@@ -744,16 +754,15 @@ export default function Line(_ref) {
     var rotDir = vec1.cross(vec2) > 0; // true: rotate CCW, false: rotate CW
 
     // Angle Text Position
-
     var angleTextO = center.clone();
-    var textTranslation = vec1.clone().add(vec2).normalize().multiplyScalar(25);
+    var textTranslation = vec1.clone().add(vec2).normalize().multiplyScalar(minLineLength * 2 / 3);
     angleTextO.add(textTranslation);
-    angleTextO.y -= 5; // half the height of text `angle`
-
+    angleTextO.y -= minLineLength / 10; // half the height of text `angle`
+    angleTextO.x += minLineLength / 10;
     var tx = 0;
     var ty = 0;
-    vec = vec.multiplyScalar(35);
-    vec1 = vec1.multiplyScalar(35);
+    vec = vec.multiplyScalar(minLineLength);
+    vec1 = vec1.multiplyScalar(minLineLength);
     var cen1 = center.clone(),
       cen2 = center.clone();
     center = center.add(vec);
@@ -766,7 +775,7 @@ export default function Line(_ref) {
     // Angle SVG Path
     lines.push(/*#__PURE__*/React.createElement("path", {
       style: STYLE_ANGLE,
-      d: "\n          M ".concat(vertex[0].x, ",").concat(vertex[0].y, "           L ").concat(pos1.x, ",").concat(pos1.y, "           A 30,30 ").concat(angle, " 0 ").concat(t > 0 ? 1 : 0, " ").concat(pos2.x, ",").concat(pos2.y, " z\n        ")
+      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        ")
     }));
     var length = angle;
     // draw angle and angle text
@@ -780,15 +789,9 @@ export default function Line(_ref) {
       "data-id": [vertex[0].id, vertex[1].id, rotDir],
       "data-length": length
     }, lines, /*#__PURE__*/React.createElement("text", {
-      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") scale(1.5, -1.5)"),
+      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") scale(").concat(minLineLength / 20, ", ").concat(-minLineLength / 20, ")"),
       style: STYLE_TEXT
-    }, angle), /*#__PURE__*/React.createElement("circle", {
-      transform: "translate(".concat(angleTextO.x, ", ").concat(angleTextO.y, ") translate(10, 9)"),
-      fill: "transparent",
-      stroke: "rgb(77, 77, 77)",
-      strokeWidth: 1,
-      r: 2
-    }));
+    }, angle + '° '));
   }), showWindowDoorMeasure ? renderedAllRuler : null, showBaseCabinetMeasure ? baseRuler : null, showWallCabinetMeasure ? wallRuler : null, /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": line.prototype,

package/es/components/viewer2d/viewer2d.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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; }
@@ -536,48 +535,18 @@ export default function Viewer2D(_ref, _ref2) {
       rectCenterPoint: [[point(mx, my), 180], [point(m1x, m1y), -90], [point(m2x, m2y), 0], [point(m3x, m3y), 90]]
     };
   };
-  var calcDistanceArray = function calcDistanceArray() {
-    var items = layer === null || layer === void 0 ? void 0 : layer.get('items');
-    if (!items) return;
-    items.forEach(function (item) {
-      if ((item === null || item === void 0 ? void 0 : item.selected) === true) {
-        var x = item.x,
-          y = item.y,
-          rotation = item.rotation,
-          id = item.id;
-        if (x == null || y == null) return;
-        var val = {
-          pos: {
-            x: x,
-            y: y
-          },
-          rotRad: rotation / 180 * Math.PI
-        };
-        var _width = getProperties(item, 'width');
-        var depth = getProperties(item, 'depth');
-        val.size = {
-          width: _width,
-          height: depth
-        };
-
-        // collect geometry
-        var _allLines = GeometryUtils.getAllLines(layer) || [];
-        var _allLineRects = GeometryUtils.buildRectFromLines(layer, _allLines) || [];
-        var _allItemRect = GeometryUtils.getAllItems(scene, catalog, _allLineRects) || {
-          others: []
-        };
-        var _allRect = [].concat(_toConsumableArray(_allItemRect.others || []), _toConsumableArray(_allLineRects));
-
-        // current item
-        var curItemInfo = getCalcRectFromItem(val);
-        var pointArray = getDistant(x, y, val.rotRad, curItemInfo, _allRect);
-
-        // store results safely
-        if (Array.isArray(pointArray)) {
-          itemsActions.storeDistArray(layerID, id, pointArray);
-        }
-      }
-    });
+  var getConnectedLines = function getConnectedLines() {
+    var _state$getIn;
+    var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+    var lines = state.getIn(['scene', 'layers', layerID, 'lines']).toJS();
+    var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
+    var drawingLine = (_state$getIn = state.getIn(['scene', 'layers', layerID, 'lines', lineID])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.toJS();
+    // get the lines that have same points with drawing line.
+    if (!isEmpty(drawingLine)) {
+      var tlines = [];
+      getRelatedLines(tlines, drawingLine, vertices, lines);
+      setRelatedLines(tlines);
+    }
   };
   var onMouseMove = function onMouseMove(viewerEvent) {
     //workaround that allow imageful component to work
@@ -627,7 +596,6 @@ export default function Viewer2D(_ref, _ref2) {
         holesActions.updateDrawingHole(layerID, x, y);
         break;
       case constants.MODE_DRAWING_ITEM:
-        calcDistanceArray();
         var _layer = scene.layers.get(layerID);
         var flag = false;
         _layer.items.some(function (item) {
@@ -713,11 +681,11 @@ export default function Viewer2D(_ref, _ref2) {
         break;
       case constants.MODE_DRAGGING_VERTEX:
         var vertices = state.getIn(['scene', 'layers', layerID, 'vertices']).toJS();
+        getConnectedLines();
         var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
         verticesActions.updateDraggingVertex(result.x, result.y, state.snapMask);
         break;
       case constants.MODE_DRAGGING_ITEM:
-        calcDistanceArray();
         prepareSnap();
         var _GeometryUtils$calcSn2 = GeometryUtils.calcSnap(allItemRect, allItemSnap, allLineRects, allLineSnap, allRect, x, y, allArea),
           nx = _GeometryUtils$calcSn2.nx,
@@ -889,10 +857,10 @@ export default function Viewer2D(_ref, _ref2) {
               projectActions.setMode(_mode);
               break;
             } else {
-              var _tlines = [];
-              var _drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
-              getRelatedLines(_tlines, _drawingLine, vertices, lines);
-              setRelatedLines(_tlines);
+              var tlines = [];
+              var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', elementData.id]).toJS();
+              getRelatedLines(tlines, drawingLine, vertices, lines);
+              setRelatedLines(tlines);
               linesActions.selectLine(elementData.layer, elementData.id);
               break;
             }
@@ -1178,12 +1146,7 @@ export default function Viewer2D(_ref, _ref2) {
         // if (dx > dy) y = prevVertex.y
         // else x = prevVertex.x;
         setdrawStart(true);
-        var lineID = state.getIn(['scene', 'layers', layerID, 'selected', 'lines']).first();
-        var drawingLine = state.getIn(['scene', 'layers', layerID, 'lines', lineID]).toJS();
-        // get the lines that have same points with drawing line.
-        var tlines = [];
-        getRelatedLines(tlines, drawingLine, vertices, lines);
-        setRelatedLines(tlines);
+        getConnectedLines();
         var endInfor = getEndPoint(vertices, x, y, 'END_DRAWIN_LINE');
         linesActions.endDrawingLine(endInfor.x, endInfor.y, state.snapMask);
         linesActions.beginDrawingLine(layerID, endInfor.x, endInfor.y, state.snapMask);
@@ -1198,6 +1161,7 @@ export default function Viewer2D(_ref, _ref2) {
         linesActions.endDraggingLine(x, y, relatedLines, state.snapMask);
         break;
       case constants.MODE_DRAGGING_VERTEX:
+        getConnectedLines();
         var result = getEndPoint(vertices, x, y, 'DRAGGING_VERTEX');
         verticesActions.endDraggingVertex(result.x, result.y, state.snapMask);
         break;

package/es/components/viewer3d/viewer3d.js

@@ -2559,7 +2559,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }));
         } else {
           document.getElementById('front') && (document.getElementById('front').style.display = 'none');
-          document.getElementById('error').style.display = 'none';
           this.renderer.domElement.style.display = 'none';
           return /*#__PURE__*/React.createElement("div", {
             style: {
@@ -2594,7 +2593,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           alt: "img"
         }));
       } else {
-        !this.props.downloadFlag && (document.getElementById('error').style.display = 'block');
         this.renderer.domElement.style.pointerEvents = 'auto';
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');

package/es/constants.js

@@ -579,6 +579,7 @@ export var ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT = 0.1;
 export var DIFFERENT_VALUES_PATH_LENGTH = 5;
 export var MIN_ANGLE_DISALLOW_DRAW_WALL = 45;
 export var UNIT_ANGLE = 5;
+export var MAX_ANGLE_SCALE = 30;
 export var HDR_URLS = ['px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr'];
 export var SUBMIT_REQUEST_ASSIST = 'submit';
 export var SUBMIT_ADD_CART = 'addCart';
@@ -650,4 +651,9 @@ export var EXTERNAL_EVENT_TOGGLE_TO_ELEVATION = 'EXTERNAL_EVENT_TOGGLE_TO_ELEVAT
 export var EXTERNAL_EVENT_ADD_WALL = 'EXTERNAL_EVENT_ADD_WALL';
 export var EXTERNAL_EVENT_ADD_ITEM = 'EXTERNAL_EVENT_ADD_ITEM';
 export var EXTERNAL_EVENT_MOVE_PAN = 'EXTERNAL_EVENT_MOVE_PAN';
-export var EXTERNAL_EVENT_NEW_PROJECT = 'EXTERNAL_EVENT_NEW_PROJECT';
+export var EXTERNAL_EVENT_NEW_PROJECT = 'EXTERNAL_EVENT_NEW_PROJECT';
+export var EXTERNAL_EVENT_CHANGE_DOORSTYLE = 'EXTERNAL_EVENT_CHANGE_DOORSTYLE';
+export var EXTERNAL_EVENT_SET_INITIAL_DATA = 'EXTERNAL_EVENT_SET_INITIAL_DATA';
+export var EXTERNAL_EVENT_ADD_ROOM_SHAPE = 'EXTERNAL_EVENT_ADD_ROOM_SHAPE';
+export var EXTERNAL_EVENT_ZOOM_IN = 'EXTERNAL_EVENT_ZOOM_IN';
+export var EXTERNAL_EVENT_ZOOM_OUT = 'EXTERNAL_EVENT_ZOOM_OUT';