kitchen-simulator 1.0.0-alin.5 → 1.0.0-alin.51

package/es/LiteKitchenConfigurator.js

@@ -1,15 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["width", "height", "state", "stateExtractor"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -42,23 +40,6 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
     _this = _callSuper(this, LiteKitchenConfigurator, [props]);
 
     // utm tracking
-    _defineProperty(_this, "handleBeforeUnload", function (e) {
-      var areas = _this.props.stateExtractor(_this.props.state).getIn(['scene', 'layers', _this.props.stateExtractor(_this.props.state).scene.selectedLayer, 'areas']);
-      if (!_this.state.isSaved && areas.size > 0) {
-        setTimeout(function () {
-          _this.setState({
-            savePromptVisible: true,
-            isLeaving: true
-          });
-        }, 500);
-        _this.saveProjectToStorage();
-
-        // This line is required to trigger the browser confirmation dialog
-        e.preventDefault();
-        e.returnValue = '';
-        return '';
-      }
-    });
     var utmDetailParams = new URLSearchParams(_this.props.location && _this.props.location.search);
     var utmStrEncoded = utmDetailParams.get('details');
     var utmRequestData = null;
@@ -103,7 +84,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
       redirectURL: '',
       snackBarMessage: '',
       isSaved: false,
-      isLeaving: false
+      isLeaving: false,
+      stateCatalog: _this.props.catalog
     };
 
     // For UTM tracking
@@ -344,129 +326,20 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
-      window.addEventListener('beforeunload', this.handleBeforeUnload);
-      console.log('context =>', this.context);
       window.forRedo = [];
       var store = this.context.store;
       var _this$props2 = this.props,
-        projectActions = _this$props2.projectActions,
-        catalog = _this$props2.catalog,
         stateExtractor = _this$props2.stateExtractor,
-        state = _this$props2.state,
         plugins = _this$props2.plugins;
-      projectActions.initCatalog(catalog);
-      var match = this.props.match;
-      if (sessionStorage.getItem(window.location.href)) {
-        var jsonData = sessionStorage.getItem(window.location.href);
-        projectActions.loadProject(JSON.parse(jsonData), this.props.categoryData);
-        sessionStorage.removeItem(window.location.href);
-        return;
-      }
       var newplugins = _toConsumableArray(plugins);
       newplugins.forEach(function (newplugin) {
         return newplugin(store, stateExtractor);
       });
-      if (match && match.params.pid === undefined) {
-        projectActions.newProject();
-        sessionStorage.setItem('projectTitle', 'Untitled');
-        projectActions.rename('Untitled');
-        sessionStorage.removeItem('projectId');
-        sessionStorage.removeItem('email');
-        sessionStorage.removeItem('firstName');
-        sessionStorage.removeItem('lastName');
-        sessionStorage.removeItem('usedObjects');
-        return;
-      }
-      if (match && match.params.pid !== undefined) {
-        if (match.params.pid === 'new') {
-          projectActions.newProject();
-          sessionStorage.setItem('projectTitle', 'Untitled');
-          projectActions.rename('Untitled');
-          sessionStorage.removeItem('projectId');
-          sessionStorage.removeItem('email');
-          sessionStorage.removeItem('firstName');
-          sessionStorage.removeItem('lastName');
-          sessionStorage.removeItem('usedObjects');
-        } else {
-          axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidProject"), {
-            pid: match.params.pid,
-            visualizerName: sessionStorage.getItem('visualizerName')
-          }).then(/*#__PURE__*/function () {
-            var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
-              var projectElement, jsonData, _t;
-              return _regeneratorRuntime.wrap(function (_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    projectElement = response.data.projectElement;
-                    if (!(projectElement.length === 0)) {
-                      _context.next = 1;
-                      break;
-                    }
-                    return _context.abrupt("return");
-                  case 1:
-                    sessionStorage.setItem('projectTitle', projectElement[0].title);
-                    projectActions.rename(projectElement[0].title);
-                    sessionStorage.setItem('projectId', projectElement[0].id);
-                    sessionStorage.setItem('email', projectElement[0].email);
-                    sessionStorage.setItem('firstName', projectElement[0].firstName);
-                    sessionStorage.setItem('lastName', projectElement[0].lastName);
-                    sessionStorage.setItem('phone', projectElement[0].phone);
-                    if (!projectElement[0].project_data) {
-                      _context.next = 2;
-                      break;
-                    }
-                    jsonData = JSON.parse(projectElement[0].project_data);
-                    _context.next = 5;
-                    break;
-                  case 2:
-                    _context.prev = 2;
-                    _context.next = 3;
-                    return axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidData"), {
-                      pid: match.params.pid
-                    }).data.data;
-                  case 3:
-                    jsonData = _context.sent;
-                    _context.next = 5;
-                    break;
-                  case 4:
-                    _context.prev = 4;
-                    _t = _context["catch"](2);
-                    _this3.setState({
-                      isSnackBarOpen: true,
-                      snackBarMessage: _t
-                    });
-                  case 5:
-                    jsonData.isLoadingCabinet = false;
-                    projectActions.loadProject(jsonData, _this3.props.categoryData);
-                  case 6:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee, null, [[2, 4]]);
-            }));
-            return function (_x) {
-              return _ref.apply(this, arguments);
-            };
-          }());
-        }
-        sessionStorage.removeItem('user_type');
-        sessionStorage.removeItem('project_type');
-        sessionStorage.removeItem('project_timeline');
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.addEventListener('beforeunload', this.handleBeforeUnload);
-      window.onbeforeunload = null;
     }
-  }, {
-    key: "componentWillMount",
-    value: function componentWillMount() {}
   }, {
     key: "componentWillReceiveProps",
     value: function componentWillReceiveProps(nextProps) {
+      var _oldState$catalog, _plannerState$catalog;
       var stateExtractor = nextProps.stateExtractor,
         state = nextProps.state,
         projectActions = nextProps.projectActions,
@@ -475,9 +348,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 +455,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

@@ -33,7 +33,7 @@ import { render2DItem, render3DApplianceItem, render3DItem, render3DLightingItem
 import { ConsoleDebugger, Keyboard } from "./plugins/export";
 import { Map } from 'immutable';
 import * as Sentry from '@sentry/react';
-import { loadProject, rename } from "./actions/project-actions";
+import { initCatalog, loadProject, rename } from "./actions/project-actions";
 import exporter from "./catalog/utils/exporter";
 import * as THREE from 'three';
 import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
@@ -257,8 +257,6 @@ export default function LiteRenderer(props) {
     furnishing = _ref2$furnishing === void 0 ? [] : _ref2$furnishing,
     _ref2$lighting = _ref2.lighting,
     lighting = _ref2$lighting === void 0 ? [] : _ref2$lighting;
-  var _projectElement = _slicedToArray(projectElement, 1),
-    project_data = _projectElement[0].project_data;
   var id = configData.id,
     logoImg = configData.logoImg,
     companyUrl = configData.companyUrl;
@@ -266,10 +264,6 @@ export default function LiteRenderer(props) {
     _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];
   useEffect(function () {
     var initMyCatalog = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -466,7 +460,6 @@ export default function LiteRenderer(props) {
         return _regeneratorRuntime.wrap(function (_context5) {
           while (1) switch (_context5.prev = _context5.next) {
             case 0:
-              setCatalogInitiated(false);
               _context5.next = 1;
               return initMyCatalog();
             case 1:
@@ -476,8 +469,6 @@ export default function LiteRenderer(props) {
               _context5.next = 3;
               return loadSVGs();
             case 3:
-              setCatalogInitiated(true);
-            case 4:
             case "end":
               return _context5.stop();
           }
@@ -489,7 +480,7 @@ export default function LiteRenderer(props) {
     }();
     initCatalog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [categoryData, data, id, catalogs, colorAlias, subgroups]);
 
   // Register items once SVGs are loaded
   useEffect(function () {
@@ -526,21 +517,6 @@ export default function LiteRenderer(props) {
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
   }, [outlineSVGData, data, appliances, furnishing, lighting]);
-  useEffect(function () {
-    if (projectElement.length === 0) return;
-    if (!catalogInitiated) return;
-    sessionStorage.setItem('projectTitle', projectElement[0].title);
-    store.dispatch(rename(projectElement[0].title));
-    sessionStorage.setItem('projectId', projectElement[0].id);
-    sessionStorage.setItem('email', projectElement[0].email);
-    sessionStorage.setItem('firstName', projectElement[0].firstName);
-    sessionStorage.setItem('lastName', projectElement[0].lastName);
-    sessionStorage.setItem('phone', projectElement[0].phone);
-    var jsonData;
-    jsonData = JSON.parse(projectElement[0].project_data);
-    jsonData.isLoadingCabinet = false;
-    store.dispatch(loadProject(jsonData, categoryData));
-  }, [project_data, catalogInitiated]);
   return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
     store: store
   }, /*#__PURE__*/React.createElement(ToolErrorBoundary, {

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/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,11 +1,10 @@
-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; }
 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 React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT, zoom } from 'react-svg-pan-zoom';
+import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT } from 'react-svg-pan-zoom';
 import * as constants from "../../constants";
 import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE } from "../../constants";
 import State from "./state";
@@ -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;