kitchen-simulator 1.0.0-alin.8 → 1.0.0-clark.54

package/es/class/item.js

@@ -48,65 +48,19 @@ var Item = /*#__PURE__*/function () {
         isDuplication: isDuplication
       }, null, state);
       if (item.category === 'cabinet') {
+        var _state$doorStyle;
         var layer = state.getIn(['scene', 'layers', layerID]);
-        if (state.doorStyle !== null && state.doorStyle !== undefined) {
-          var _state$doorStyle, _temp$doorStyles;
-          var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
-          var cds = temp === null || temp === void 0 || (_temp$doorStyles = temp.doorStyles) === null || _temp$doorStyles === void 0 || (_temp$doorStyles = _temp$doorStyles.cds) === null || _temp$doorStyles === void 0 ? void 0 : _temp$doorStyles.find(function (elem) {
-            return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
+        var temp = layer.doorStyle || ((_state$doorStyle = state.doorStyle) === null || _state$doorStyle === void 0 ? void 0 : _state$doorStyle.toJS());
+        var cds = state.catalog.getIn(['elements', type, 'cds']);
+        if (cds) {
+          var updatedDoorStyles = _objectSpread(_objectSpread({}, temp.doorStyles), {}, {
+            cds: [cds]
+          });
+          item = item.merge({
+            doorStyle: fromJS(_objectSpread(_objectSpread({}, temp), {}, {
+              doorStyles: updatedDoorStyles
+            }))
           });
-          if (cds) {
-            var updatedDoorStyles = _objectSpread(_objectSpread(_objectSpread({}, temp.doorStyles), cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
-              cabinet_door_style_id: cds.cabinet_door_style_id
-            });
-            item = item.merge({
-              doorStyle: fromJS(_objectSpread(_objectSpread({}, temp), {}, {
-                doorStyles: updatedDoorStyles
-              }))
-            });
-          } else {
-            var _state$oStyle;
-            var styleObj = (_state$oStyle = state.oStyle) === null || _state$oStyle === void 0 || (_state$oStyle = _state$oStyle.toJS()) === null || _state$oStyle === void 0 ? void 0 : _state$oStyle.oStyle;
-            if (styleObj) {
-              for (var _x in styleObj) {
-                cds = styleObj[_x].data.doorStyles.cds.find(function (elem) {
-                  return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
-                });
-                if (cds) {
-                  var tmpDS = styleObj[_x].data;
-                  tmpDS.doorStyles = _objectSpread(_objectSpread(_objectSpread({}, tmpDS.doorStyles), cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
-                    cabinet_door_style_id: cds.cabinet_door_style_id
-                  });
-                  item = item.merge({
-                    doorStyle: fromJS(tmpDS)
-                  });
-                  break;
-                }
-              }
-            }
-          }
-        } else {
-          var _state$oStyle2;
-          var _styleObj = (_state$oStyle2 = state.oStyle) === null || _state$oStyle2 === void 0 || (_state$oStyle2 = _state$oStyle2.toJS()) === null || _state$oStyle2 === void 0 ? void 0 : _state$oStyle2.oStyle;
-          if (_styleObj) {
-            for (var _x2 in _styleObj) {
-              var _styleObj$_x;
-              var _cds = (_styleObj$_x = _styleObj[_x2]) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.data) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.doorStyles) === null || _styleObj$_x === void 0 || (_styleObj$_x = _styleObj$_x.cds) === null || _styleObj$_x === void 0 ? void 0 : _styleObj$_x.find(function (elem) {
-                return elem.itemID === state.catalog.getIn(['elements', type, 'itemID']);
-              });
-              if (_cds) {
-                var _styleObj$_x2;
-                var _tmpDS = (_styleObj$_x2 = _styleObj[_x2]) === null || _styleObj$_x2 === void 0 ? void 0 : _styleObj$_x2.data;
-                _tmpDS.doorStyles = _objectSpread(_objectSpread(_objectSpread({}, _tmpDS.doorStyles), _cds.data && _cds.data[0] ? _cds.data[0] : {}), {}, {
-                  cabinet_door_style_id: _cds.cabinet_door_style_id
-                });
-                item = item.merge({
-                  doorStyle: fromJS(_tmpDS)
-                });
-                break;
-              }
-            }
-          }
         }
       }
       if (item.get('type') === 'cabinet' && item.get('doorStyle').size === 0) {
@@ -116,15 +70,11 @@ var Item = /*#__PURE__*/function () {
         };
       }
       var setSizeOfItemByDoorStyle = function setSizeOfItemByDoorStyle() {
-        var _doorStyle$doorStyles, _cds$data;
         var doorStyle = item.get('doorStyle').toJS();
-        var cds = doorStyle === null || doorStyle === void 0 || (_doorStyle$doorStyles = doorStyle.doorStyles) === null || _doorStyle$doorStyles === void 0 || (_doorStyle$doorStyles = _doorStyle$doorStyles.cds) === null || _doorStyle$doorStyles === void 0 ? void 0 : _doorStyle$doorStyles.find(function (elem) {
-          return elem.itemID === item.itemID;
-        });
-        var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
+        var euroCDS = state.catalog.getIn(['elements', type, 'cds']).data.filter(function (element) {
           return element && element.is_euro_cds;
-        })) || [];
-        if (doorStyle.door_style_name === 'Euro & Frameless' && euro_cds.length > 0) {
+        });
+        if (doorStyle.door_style_name === 'Euro & Frameless' && euroCDS.length > 0) {
           var newProperties = item.get('properties').toJS();
           if (newProperties.hasOwnProperty('depth')) {
             if (!newProperties.hasOwnProperty('oldDepth')) {
@@ -135,8 +85,8 @@ var Item = /*#__PURE__*/function () {
               });
             }
             newProperties['depth'] = new Map({
-              length: convert(euro_cds[0].euro_length).from('in').to('cm'),
-              _length: euro_cds[0].euro_length,
+              length: convert(euroCDS[0].euro_length).from('in').to('cm'),
+              _length: euroCDS[0].euro_length,
               _unit: 'in'
             });
           }
@@ -149,8 +99,8 @@ var Item = /*#__PURE__*/function () {
               });
             }
             newProperties['height'] = new Map({
-              length: convert(euro_cds[0].euro_height).from('in').to('cm'),
-              _length: euro_cds[0].euro_height,
+              length: convert(euroCDS[0].euro_height).from('in').to('cm'),
+              _length: euroCDS[0].euro_height,
               _unit: 'in'
             });
           }
@@ -163,8 +113,8 @@ var Item = /*#__PURE__*/function () {
               });
             }
             newProperties['width'] = new Map({
-              length: convert(euro_cds[0].euro_width).from('in').to('cm') - 10,
-              _length: euro_cds[0].euro_width,
+              length: convert(euroCDS[0].euro_width).from('in').to('cm') - 10,
+              _length: euroCDS[0].euro_width,
               _unit: 'in'
             });
           }
@@ -1123,48 +1073,37 @@ var Item = /*#__PURE__*/function () {
     }
   }, {
     key: "setInitialDoorStyle",
-    value: function setInitialDoorStyle(state, doorStyle, oStyle) {
-      if (doorStyle === undefined) {
-        state = state.merge({
-          oStyle: new Map({
-            oStyle: oStyle
-          })
-        });
-      } else {
-        state = state.merge({
-          doorStyle: doorStyle,
-          oStyle: new Map({
-            oStyle: oStyle
-          })
-        });
-        var _state8 = state,
-          scene = _state8.scene;
-        var layerID = scene.get('selectedLayer');
-        var layers = scene.layers.get(layerID);
-        var items = layers.items;
-        items.forEach(function (data) {
-          {
-            var itemID = data.id;
-            var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
-              doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
-                counttop: doorStyle.doorStyles.counttop
-              })
-            });
-            data = data.mergeIn(['doorStyle'], fromJS(tmpDS));
-            layers = layers.mergeIn(['items', itemID], data);
-            state = state.merge({
-              scene: scene.mergeIn(['layers', layerID], layers)
-            });
-          }
-        });
-      }
+    value: function setInitialDoorStyle(state, doorStyle) {
+      state = state.merge({
+        doorStyle: doorStyle
+      });
+      var _state8 = state,
+        scene = _state8.scene;
+      var layerID = scene.get('selectedLayer');
+      var layers = scene.layers.get(layerID);
+      var items = layers.items;
+      items.forEach(function (data) {
+        {
+          var itemID = data.id;
+          var tmpDS = _objectSpread(_objectSpread({}, data.doorStyle), {}, {
+            doorStyles: _objectSpread(_objectSpread({}, data.doorStyle.doorStyles), {}, {
+              counttop: doorStyle.doorStyles.counttop
+            })
+          });
+          data = data.mergeIn(['doorStyle'], fromJS(tmpDS));
+          layers = layers.mergeIn(['items', itemID], data);
+          state = state.merge({
+            scene: scene.mergeIn(['layers', layerID], layers)
+          });
+        }
+      });
       return {
         updatedState: state
       };
     }
   }, {
     key: "setDoorStyle",
-    value: function setDoorStyle(state, doorStyle, pathes, isAll) {
+    value: function setDoorStyle(state, doorStyle, itemCDS, isAll) {
       var _this2 = this;
       var keys = Object.keys(doorStyle.doorStyles);
       keys = keys.filter(function (elem) {
@@ -1181,14 +1120,14 @@ var Item = /*#__PURE__*/function () {
       var layerID = state.scene.get('selectedLayer');
       var temp_layer_molding = state.scene.getIn(['layers', layerID, 'molding']);
       temp_layer_molding = temp_layer_molding.filter(function (md) {
-        return doorStyle.doorStyles.cds.some(function (ds) {
+        return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
           return md.itemID === ds.itemID;
         });
       });
       state = state.setIn(['scene', 'layers', layerID, 'molding'], temp_layer_molding);
       var itemIDs = state.scene.layers.getIn([layerID, 'selected', 'items']).toJS();
       var setDoorStyleOfItem = function setDoorStyleOfItem(data) {
-        var _cds$data2;
+        var _cds$data;
         if (data.category !== 'cabinet') return; //CDS should effect to cabinets
         var itemID = data.id;
         var curItem = state.getIn(['scene', 'layers', layerID, 'items', itemID]);
@@ -1196,7 +1135,7 @@ var Item = /*#__PURE__*/function () {
         var tmpMolding = _toConsumableArray(curItem.molding);
         var temp_item_molding = _toConsumableArray(curItem.molding);
         temp_item_molding = temp_item_molding.filter(function (md) {
-          return doorStyle.doorStyles.cds.some(function (ds) {
+          return itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.some(function (ds) {
             return ds.itemID === md.itemID;
           });
         });
@@ -1206,17 +1145,16 @@ var Item = /*#__PURE__*/function () {
             state = state.setIn(['scene', 'layers', layerID, 'items', it.id, 'molding'], temp_item_molding);
           });
         });
-        var cds = doorStyle.doorStyles.cds.find(function (elem) {
+        var cds = itemCDS === null || itemCDS === void 0 ? void 0 : itemCDS.find(function (elem) {
           return elem.itemID === data.itemID;
         });
-        var euro_cds = (cds === null || cds === void 0 || (_cds$data2 = cds.data) === null || _cds$data2 === void 0 ? void 0 : _cds$data2.filter(function (element) {
+        var euro_cds = (cds === null || cds === void 0 || (_cds$data = cds.data) === null || _cds$data === void 0 ? void 0 : _cds$data.filter(function (element) {
           return element && element.is_euro_cds;
         })) || [];
-        var cds_data;
-        if (doorStyle.door_style_name === 'Euro & Frameless' && euro_cds.length > 0) {
-          cds_data = cds ? _objectSpread(_objectSpread({}, euro_cds[0]), {}, {
-            cabinet_door_style_id: cds.cabinet_door_style_id
-          }) : {};
+        var cds_data = cds ? [cds] : [];
+        if (
+        // doorStyle.door_style_name === 'Euro & Frameless' &&
+        euro_cds.length > 0) {
           var newProperties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
           if (newProperties.hasOwnProperty('depth')) {
             if (!newProperties.hasOwnProperty('oldDepth')) {
@@ -1262,9 +1200,6 @@ var Item = /*#__PURE__*/function () {
           }
           state = _this2.setJsProperties(state, layerID, itemID, newProperties).updatedState;
         } else {
-          cds_data = cds ? _objectSpread(_objectSpread({}, cds.data && cds.data[0] ? cds.data[0] : {}), {}, {
-            cabinet_door_style_id: cds.cabinet_door_style_id
-          }) : {};
           var properties = state.scene.getIn(['layers', layerID, 'items', itemID, 'properties']).toJS();
           if (properties.hasOwnProperty('oldDepth')) {
             properties['depth'] = new Map({
@@ -1303,7 +1238,9 @@ var Item = /*#__PURE__*/function () {
           color_sku_alias: doorStyle.color_sku_alias,
           // alias name of color_sku for the current dealer
           install: getInstallationSuffix(INSTALLATION_SUFFIX_TYPE.NAME, doorStyle),
-          doorStyles: _objectSpread(_objectSpread({}, tmp), cds_data)
+          doorStyles: _objectSpread(_objectSpread({}, tmp), {}, {
+            cds: cds_data
+          })
         };
         state = state.mergeIn(['scene', 'layers', layerID, 'items', itemID, 'doorStyle'], fromJS(tmpDS));
       };

package/es/class/project.js

@@ -34,7 +34,6 @@ var Project = /*#__PURE__*/function () {
     key: "newProject",
     value: function newProject(state) {
       var doorStyle = state.toJS().doorStyle === null ? null : state.toJS().doorStyle;
-      var oStyle = state.oStyle;
       // let counterTop = state.getIn(['scene', 'layers', layerID, 'counterTop']);
       // let floorStyle = state.getIn(['scene', 'layers', layerID, 'floorStyle']);
       var _viewer2D = state.viewer2D;
@@ -48,7 +47,6 @@ var Project = /*#__PURE__*/function () {
       state = new State({});
       state = state.merge({
         doorStyle: doorStyle,
-        oStyle: oStyle,
         viewer2D: _viewer2D
       });
       // state = Item.setCounterTop(state, counterTop).updatedState;
@@ -59,9 +57,8 @@ var Project = /*#__PURE__*/function () {
     }
   }, {
     key: "loadProject",
-    value: function loadProject(state, sceneJSON, categoryData) {
+    value: function loadProject(state, sceneJSON) {
       var doorStyle = state.doorStyle;
-      var oStyle = state.oStyle;
       var layerID = state.scene.selectedLayer;
       var _viewer2D = state.viewer2D;
       var viewer = state.viewer2D.toJS();
@@ -161,28 +158,10 @@ var Project = /*#__PURE__*/function () {
       }
       state = state.merge({
         doorStyle: doorStyle,
-        oStyle: oStyle,
         viewer2D: _viewer2D
       });
       state = Item.setCounterTop(state, counterTop).updatedState;
       state = Area.setFloorStyles(state, floorStyle).updatedState;
-      if (state.getIn(['scene', 'layers', layerID, 'doorStyle']) && !state.getIn(['scene', 'layers', layerID, 'doorStyle', 'install'])) {
-        var layerDoorStyle = state.getIn(['scene', 'layers', layerID, 'doorStyle']);
-        var install = '';
-        categoryData.data.doorStyles.items.forEach(function (category) {
-          category.items.forEach(function (element) {
-            if (element.items.filter(function (it) {
-              return it.id === layerDoorStyle.id && (layerDoorStyle.install ? category.name === layerDoorStyle.install : true);
-            }).length) {
-              install = category.name;
-            }
-          });
-        });
-        layerDoorStyle = _objectSpread(_objectSpread({}, layerDoorStyle), {}, {
-          install: install
-        });
-        state = state.mergeIn(['scene', 'layers', layerID, 'doorStyle'], layerDoorStyle);
-      }
       this.updateZoomScale(state, a);
       viewer2DActions.updateCameraView(_viewer2D);
       return {
@@ -478,6 +457,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 +503,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 +590,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,