kitchen-simulator 4.0.6 → 4.0.7-measurement-unit-payload

package/es/components/viewer3d/scene-creator.js

@@ -12,7 +12,7 @@ import { disposeObject } from "./three-memory-cleaner";
 import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, UNIT_FOOT, UNIT_INCH, UNIT_METER, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
 import { convert } from "../../utils/convert-units-lite";
-import { verticesDistance } from "../../utils/geometry";
+import { calcDistancesFromItemToWalls, verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
@@ -479,19 +479,19 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
         if (modifiedPath[keyIndex] == 'rotation') {
           item3D.rotation.set(0, value * Math.PI / 180 + Math.PI, 0);
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'x') {
           item3D.position.x = value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'y') {
           item3D.position.z = -value;
           setTimeout(function () {
-            getDistances(layer);
+            getDistances(layer, item);
           }, 50);
           removeSelItemMesh(tmpMoldings, item, planData, mode);
         } else if (modifiedPath[keyIndex] == 'selected') {
@@ -717,7 +717,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
               return actions.itemsActions.selectItem(layer.id, modifiedPath[4]);
             });
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
         } else if (modifiedPath[keyIndex] == 'length') {
@@ -845,7 +845,7 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
             removeItemWithoutItem(planData, layer.id, modifiedPath[4]);
             promises.push(addItem(sceneData, planData, layer, modifiedPath[4], catalog, actions.itemsActions, mode, null, rItem));
             setTimeout(function () {
-              getDistances(layer);
+              getDistances(layer, item);
             }, 100);
           }
           break;
@@ -891,10 +891,169 @@ function replaceObject(modifiedPath, layer, planData, actions, sceneData, oldSce
     promise: p1
   };
 }
-export function getDistances(layer, isCalcWall) {
+export function getDistances(layer, curItem, isCalcWall) {
+  // matching fvLine distance with OP
+  var pointArray = calcDistancesFromItemToWalls(curItem, layer).PointArray;
+  if ((pointArray === null || pointArray === void 0 ? void 0 : pointArray.length) > 0) {
+    var _loop2 = function _loop2() {
+      var direction = i === 0 ? 90 : i === 1 ? -90 : i === 2 ? 180 : 0;
+      if (fVLine[i].userData) {
+        var _pointArray$filter$;
+        var opDist = (_pointArray$filter$ = pointArray.filter(function (v) {
+          return v[1] === direction;
+        })[0]) !== null && _pointArray$filter$ !== void 0 ? _pointArray$filter$ : fVLine[i].userData.distance;
+        fVLine[i].userData.opDist = opDist[0];
+      }
+    };
+    for (var i = 0; i < ((_fVLine = fVLine) === null || _fVLine === void 0 ? void 0 : _fVLine.length); i++) {
+      var _fVLine;
+      _loop2();
+    }
+  }
   fVLine.forEach(function (line, index) {
-    getLineDistance(line, layer, isCalcWall === undefined ? false : isCalcWall, index);
+    getLineDistance2(line, layer, isEmpty(isCalcWall) ? false : isCalcWall, index);
+  });
+}
+function getLineDistance2(obj, layer, isCalcWall, index) {
+  var _obj$userData$opDist, _obj$userData, _obj$userData2, _obj$userData$opDist2, _obj$userData3, _obj$userData4;
+  if (obj === undefined) return;
+  var positionAttribute = obj.geometry.attributes.position;
+  if (positionAttribute === undefined) return;
+  var wPoint0 = new Three.Vector3().fromBufferAttribute(positionAttribute, 0).applyMatrix4(obj.matrixWorld);
+  var wPoint1 = new Three.Vector3().fromBufferAttribute(positionAttribute, 1).applyMatrix4(obj.matrixWorld);
+  var raycaster = new Three.Raycaster(wPoint0, new Three.Vector3(wPoint1.x - wPoint0.x, wPoint1.y - wPoint0.y, wPoint1.z - wPoint0.z));
+  var rayDirection = raycaster.ray.direction;
+  raycaster.camera = new Three.Camera();
+  rayDirection.normalize();
+  var meshes = [];
+  planData.plan.traverse(function (child) {
+    if (child.isMesh && child.geometry) {
+      meshes.push(child);
+    }
   });
+  var dx = wPoint0.x - wPoint1.x;
+  var dy = wPoint0.y - wPoint1.y;
+  var dz = wPoint0.z - wPoint1.z;
+  var length = Math.sqrt(dx * dx + dy * dy + dz * dz);
+  var scale = 1;
+  var extrudeSettings = {
+    steps: 2,
+    depth: 0.01,
+    bevelEnabled: false
+  };
+  var w = 0.2;
+  var h = w * (Math.sqrt(3) / 2);
+  var shape = new Three.Shape();
+  shape.moveTo(0, 0);
+  shape.lineTo(-w / 4, h / 2);
+  shape.lineTo(w / 4, h / 2);
+  var geom = new Three.ExtrudeGeometry(shape, extrudeSettings);
+  geom.center();
+  var opDist = (_obj$userData$opDist = (_obj$userData = obj.userData) === null || _obj$userData === void 0 ? void 0 : _obj$userData.opDist) !== null && _obj$userData$opDist !== void 0 ? _obj$userData$opDist : (_obj$userData2 = obj.userData) === null || _obj$userData2 === void 0 ? void 0 : _obj$userData2.distance;
+  scale = opDist / length;
+  if (opDist <= 0.1) {
+    scale = 0.1 / length;
+  }
+  obj.userData.distance = (_obj$userData$opDist2 = (_obj$userData3 = obj.userData) === null || _obj$userData3 === void 0 ? void 0 : _obj$userData3.opDist) !== null && _obj$userData$opDist2 !== void 0 ? _obj$userData$opDist2 : (_obj$userData4 = obj.userData) === null || _obj$userData4 === void 0 ? void 0 : _obj$userData4.distance;
+  // obj.userData.target = intersects[i].object;
+  var originPoint = obj.geometry.attributes.position.array.slice(0, 3);
+  var lx = obj.geometry.attributes.position.array[3] - obj.geometry.attributes.position.array[0];
+  var ly = obj.geometry.attributes.position.array[4] - obj.geometry.attributes.position.array[1];
+  var lz = obj.geometry.attributes.position.array[5] - obj.geometry.attributes.position.array[2];
+  var newVec = new Three.Vector3(originPoint[0] + lx * scale, originPoint[1] + ly * scale, originPoint[2] + lz * scale);
+  obj.geometry.attributes.position.array[3] = newVec.x;
+  obj.geometry.attributes.position.array[4] = newVec.y;
+  obj.geometry.attributes.position.array[5] = newVec.z;
+  obj.geometry.attributes.position.needsUpdate = true;
+  obj.geometry.computeBoundingSphere();
+  obj.geometry.computeBoundingBox();
+  var dist = convert(opDist).from('cm').to('in');
+  if (dist > 3) {
+    var _canvas = getDistanceCanvas(dist, layer);
+    var wid = _canvas.width / window.innerWidth * 30;
+    var hei = _canvas.height / window.innerHeight * 30;
+    var texture = new Three.Texture(_canvas);
+    texture.minFilter = Three.LinearFilter;
+    texture.needsUpdate = true;
+    var geometry = new Three.PlaneGeometry(wid / 5, hei / 5);
+    geometry.computeBoundingBox();
+    var material = new Three.MeshBasicMaterial({
+      map: texture,
+      side: Three.DoubleSide
+    });
+    var textMesh = new Three.Mesh(geometry, material);
+    for (; obj.children.length != 0;) {
+      var temp = obj.children.pop();
+      disposeObject(temp);
+    }
+    textMesh.rotation.set(Math.PI / 2, Math.PI, 0);
+    // obj.add(textMesh);
+    textMesh.position.set((obj.geometry.attributes.position.array[0] + obj.geometry.attributes.position.array[3]) / 2, 0.01, (obj.geometry.attributes.position.array[2] + obj.geometry.attributes.position.array[5]) / 2);
+    textMesh.name = 'lineText';
+    textMesh.renderOrder = 2;
+    textMesh.material.depthTest = false;
+    textMesh.material.transparent = true;
+    var sprite1 = new Three.Sprite(new Three.SpriteMaterial({
+      map: texture
+    }));
+    sprite1.position.set((obj.geometry.attributes.position.array[0] + obj.geometry.attributes.position.array[3]) / 2, 0.01, (obj.geometry.attributes.position.array[2] + obj.geometry.attributes.position.array[5]) / 2);
+    sprite1.name = 'lineText';
+    sprite1.renderOrder = 2;
+    sprite1.scale.set(0.2, 0.1, 0.2);
+    sprite1.layers.set(1);
+    sprite1.material.depthTest = false;
+    obj.add(sprite1);
+    if (obj.parent != null) {
+      // is not lighting
+      var item3D = obj.parent.parent.parent;
+      var max = item3D.children[0].userData.max;
+      var min = item3D.children[0].userData.min;
+      var objW = (max.x - min.x) / 100,
+        objL = (max.z - min.z) / 100;
+      var triangle = new Three.Mesh(geom, new Three.MeshBasicMaterial({
+        color: SHADE_DARK_PURPLE_COLOR
+      }));
+      var triangle1 = new Three.Mesh(geom, new Three.MeshBasicMaterial({
+        color: SHADE_DARK_PURPLE_COLOR
+      }));
+      triangle.position.set((index < 2 ? 0 : Math.sin((index === 2 ? 1 : -1) * Math.PI / 2)) * (obj.geometry.attributes.position.array[0] + h / 4 + (index % 2 === 0 ? 0 : objW)), newVec.y, (index < 2 ? Math.cos(index * Math.PI) : 0) * (obj.geometry.attributes.position.array[2] + h / 4 + (index % 2 === 0 ? 0 : objL)));
+      triangle1.position.set(newVec.x - (index < 2 ? 0 : Math.sin((index === 2 ? 1 : -1) * Math.PI / 2)) * h / 4, newVec.y, newVec.z - (index < 2 ? Math.cos(index * Math.PI) : 0) * h / 4);
+      if (index < 2) {
+        triangle.rotation.x = Math.cos(index * Math.PI) * Math.PI / 2;
+        triangle1.rotation.x = -Math.cos(index * Math.PI) * Math.PI / 2;
+      } else {
+        triangle.rotation.x = -Math.PI / 2;
+        triangle.rotation.z = -(index === 2 ? 1 : -1) * Math.PI / 2;
+        triangle1.rotation.x = Math.PI / 2;
+        triangle1.rotation.z = (index === 2 ? 1 : -1) * Math.PI / 2;
+      }
+      triangle.name = 'lineText';
+      triangle1.name = 'lineText';
+      triangle.renderOrder = 2;
+      triangle1.renderOrder = 2;
+      triangle.material.transparent = true;
+      triangle1.material.transparent = true;
+      triangle.material.depthTest = false;
+      triangle1.material.depthTest = false;
+      obj.add(triangle);
+      obj.add(triangle1);
+    }
+  }
+
+  // if (obj.userData.distance <= 50 && obj.userData.distance >= 0.5) {
+  var real_target = obj.userData.target;
+  for (; ((_real_target = real_target) === null || _real_target === void 0 ? void 0 : _real_target.name) != 'pivot';) {
+    var _real_target, _real_target2, _real_target3;
+    if (((_real_target2 = real_target) === null || _real_target2 === void 0 ? void 0 : _real_target2.parent) == null) break;
+    real_target = (_real_target3 = real_target) === null || _real_target3 === void 0 ? void 0 : _real_target3.parent;
+  }
+  // let item3D = obj.parent.parent.parent;
+  // let origin = obj.geometry.vertices[0].clone().applyMatrix4(obj.matrixWorld);
+  // let target = obj.geometry.vertices[1].clone().applyMatrix4(obj.matrixWorld);
+  // let uVec = new Three.Vector3(target.x - origin.x - 0.2, target.y - origin.y - 0.2, target.z - origin.z - 0.2);
+  obj.visible = true;
+  if (dist < 3) obj.visible = false;
+  return obj;
 }
 function getLineDistance(obj, layer, isCalcWall, index) {
   if (obj === undefined) return;
@@ -953,10 +1112,10 @@ function getLineDistance(obj, layer, isCalcWall, index) {
         obj.geometry.computeBoundingBox();
         var dist = convert(intersects[i].distance).from('cm').to('in');
         if (dist > 3) {
-          var _canvas = getDistanceCanvas(dist, layer);
-          var wid = _canvas.width / window.innerWidth * 30;
-          var hei = _canvas.height / window.innerHeight * 30;
-          var texture = new Three.Texture(_canvas);
+          var _canvas2 = getDistanceCanvas(dist, layer);
+          var wid = _canvas2.width / window.innerWidth * 30;
+          var hei = _canvas2.height / window.innerHeight * 30;
+          var texture = new Three.Texture(_canvas2);
           texture.minFilter = Three.LinearFilter;
           texture.needsUpdate = true;
           var geometry = new Three.PlaneGeometry(wid / 5, hei / 5);
@@ -985,6 +1144,7 @@ function getLineDistance(obj, layer, isCalcWall, index) {
           sprite1.renderOrder = 2;
           sprite1.scale.set(0.2, 0.1, 0.2);
           sprite1.layers.set(1);
+          sprite1.material.depthTest = false;
           obj.add(sprite1);
           if (obj.parent != null) {
             // is not lighting
@@ -1073,12 +1233,12 @@ function getLineDistance(obj, layer, isCalcWall, index) {
       obj.geometry.attributes.position.array[4] = _newVec.y;
       obj.geometry.attributes.position.array[5] = _newVec.z;
       obj.geometry.attributes.position.needsUpdate = true;
-      var _dist = formatNumber(distance, DECIMAL_PLACES_2);
+      var _dist = convert(formatNumber(distance, DECIMAL_PLACES_2)).from('cm').to('in');
       if (_dist > 3) {
-        var _canvas2 = getDistanceCanvas(_dist, layer);
-        var _wid = _canvas2.width / window.innerWidth * 30;
-        var _hei = _canvas2.height / window.innerHeight * 30;
-        var _texture = new Three.Texture(_canvas2);
+        var _canvas3 = getDistanceCanvas(_dist, layer);
+        var _wid = _canvas3.width / window.innerWidth * 30;
+        var _hei = _canvas3.height / window.innerHeight * 30;
+        var _texture = new Three.Texture(_canvas3);
         _texture.needsUpdate = true;
         var _geometry = new Three.PlaneGeometry(_wid / 2, _hei / 2);
         _geometry.computeBoundingBox();
@@ -1808,7 +1968,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
     layer.lines.forEach(function (data) {
       lines.push(data);
     });
-    var _loop2 = function _loop2() {
+    var _loop3 = function _loop3() {
       var data = lines[i];
       var realVec = [];
       data.vertices.forEach(function (vec) {
@@ -1821,7 +1981,7 @@ function addArea(sceneData, planData, layer, areaID, catalog, areaActions, mode)
       }
     };
     for (var i = 0; i < lines.length; i++) {
-      if (_loop2()) break;
+      if (_loop3()) break;
     }
     ceil.translateZ(convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER));
     pivot.name = 'pivot';
@@ -1876,6 +2036,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
   if (!catalogElement) catalogElement = catalog.getElement(returnReplaceableDeepSearchType(item.type));
   if (!catalogElement) return false;
   return catalogElement.render3D(item, layer, sceneData, mode).then(function (item3D) {
+    var _item$properties$getI, _item$properties$getI2, _item$properties$getI3;
     if (item3D instanceof Three.LOD) {
       planData.sceneGraph.LODs[itemID] = item3D;
     }
@@ -1932,7 +2093,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
         if (child.type === 'Line' && child.geometry.attributes !== undefined) fVLine.push(child);
       });
       setTimeout(function () {
-        getDistances();
+        getDistances(layer, item);
       }, 50);
     }
     applyOpacity(pivot, opacity);
@@ -1991,9 +2152,9 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
     var catid = item.type;
     var cat = catalog.elements[catid];
     if (!cat) cat = catalog.elements[returnReplaceableDeepSearchType(catid)];
-    var width = convert(item.properties.getIn(['width', '_length'])).from('in').to(sceneData.unit);
-    var height = convert(item.properties.getIn(['height', '_length'])).from('in').to(sceneData.unit);
-    var depth = convert(item.properties.getIn(['depth', '_length'])).from('in').to(sceneData.unit);
+    var width = convert(item.properties.getIn(['width', '_length'])).from((_item$properties$getI = item.properties.getIn(['width', '_unit'])) !== null && _item$properties$getI !== void 0 ? _item$properties$getI : 'in').to(sceneData.unit);
+    var height = convert(item.properties.getIn(['height', '_length'])).from((_item$properties$getI2 = item.properties.getIn(['height', '_unit'])) !== null && _item$properties$getI2 !== void 0 ? _item$properties$getI2 : 'in').to(sceneData.unit);
+    var depth = convert(item.properties.getIn(['depth', '_length'])).from((_item$properties$getI3 = item.properties.getIn(['depth', '_unit'])) !== null && _item$properties$getI3 !== void 0 ? _item$properties$getI3 : 'in').to(sceneData.unit);
     val.size = {
       width: width,
       height: height,
@@ -2047,7 +2208,7 @@ function addItem(sceneData, planData, layer, itemID, catalog, itemsActions) {
       return itemsActions.selectItem(layer.id, item.id);
     });
     setTimeout(function () {
-      return getDistances(layer);
+      return getDistances(layer, item);
     }, 100);
     if (!sceneData.loadFlag && scene_mode == MODE_DRAWING_ITEM_3D) {
       itemsActions.endLoading();
@@ -2874,19 +3035,23 @@ export function createBacksplash(item, layer, planData, scene) {
   var altItems = [],
     flag = false;
   wallItems.map(function (wallItem) {
-    var altitude = wallItem.itemInfo.properties.get('altitude').get('_length');
-    var altitudeUnit = wallItem.itemInfo.properties.get('altitude').get('_unit') || 'cm';
-    altitude = convert(altitude).from(altitudeUnit).to('cm');
-    altItems.push({
-      x: wallItem.pos.x,
-      width: wallItem.size.width,
-      altitude: altitude
-    });
+    var _wallItem$itemInfo, _wallItem$itemInfo2;
+    var altitude = (_wallItem$itemInfo = wallItem.itemInfo) === null || _wallItem$itemInfo === void 0 || (_wallItem$itemInfo = _wallItem$itemInfo.properties) === null || _wallItem$itemInfo === void 0 ? void 0 : _wallItem$itemInfo.get('altitude').get('_length');
+    var altitudeUnit = ((_wallItem$itemInfo2 = wallItem.itemInfo) === null || _wallItem$itemInfo2 === void 0 || (_wallItem$itemInfo2 = _wallItem$itemInfo2.properties) === null || _wallItem$itemInfo2 === void 0 ? void 0 : _wallItem$itemInfo2.get('altitude').get('_unit')) || 'cm';
+    if (!isEmpty(altitude) && !isEmpty(altitudeUnit)) {
+      altitude = convert(altitude).from(altitudeUnit).to('cm');
+      altItems.push({
+        x: wallItem.pos.x,
+        width: wallItem.size.width,
+        altitude: altitude
+      });
+    }
   });
   layer.holes.map(function (hole) {
-    var width = hole.properties.getIn(['width', 'length']);
-    var altitude = hole.properties.getIn(['altitude', 'length']);
-    altItems.push({
+    var _hole$properties, _hole$properties2;
+    var width = (_hole$properties = hole.properties) === null || _hole$properties === void 0 ? void 0 : _hole$properties.getIn(['width', 'length']);
+    var altitude = (_hole$properties2 = hole.properties) === null || _hole$properties2 === void 0 ? void 0 : _hole$properties2.getIn(['altitude', 'length']);
+    if (!isEmpty(width) && !isEmpty(altitude)) altItems.push({
       x: hole.x,
       width: width,
       altitude: altitude
@@ -3064,23 +3229,18 @@ function _addMGMesh(molding, planData, layer, data, svg_width, svg_height, flag)
   // let layoutType = molding.items[0].layoutpos;
   // let visible = molding.items[0];
   molding.pointGroups.forEach(function (pointGroup) {
+    var _child$width_unit, _child$height_unit, _child$length_unit;
     var geometry = new Three.BufferGeometry();
     var length = data.length; //point array
-    var temp_unit = child.height_unit;
-    if (temp_unit === 'inch') {
-      child.height = convert(child.height).from('in').to('cm');
-      child.height_unit = 'cm';
-    }
-    temp_unit = child.width_unit;
-    if (temp_unit === 'inch') {
-      child.width = convert(child.width).from('in').to('cm');
-      child.width_unit = 'cm';
-    }
-    temp_unit = child.length_unit;
-    if (temp_unit === 'inch') {
-      child.length = convert(child.length).from('in').to('cm');
-      child.length_unit = 'cm';
-    }
+    var widthUnit = child.width_unit === 'inch' ? 'in' : (_child$width_unit = child.width_unit) !== null && _child$width_unit !== void 0 ? _child$width_unit : 'in';
+    var heightUnit = child.height_unit === 'inch' ? 'in' : (_child$height_unit = child.height_unit) !== null && _child$height_unit !== void 0 ? _child$height_unit : 'in';
+    var lengthUnit = child.length_unit === 'inch' ? 'in' : (_child$length_unit = child.length_unit) !== null && _child$length_unit !== void 0 ? _child$length_unit : 'in';
+    child.height = convert(child.height).from(heightUnit).to('cm');
+    child.height_unit = 'cm';
+    child.width = convert(child.width).from(widthUnit).to('cm');
+    child.width_unit = 'cm';
+    child.length = convert(child.length).from(lengthUnit).to('cm');
+    child.length_unit = 'cm';
     geometry.needsUpdate = true;
     geometry = moldingVertices(pointGroup, geometry, data, child, svg_width, svg_height, molding.pointGroups.length);
     var total = geometry.attributes.position.count;
@@ -3390,7 +3550,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
       if (isEmpty(filteredNewMGList)) {
         return true;
       }
-      var _loop3 = function _loop3() {
+      var _loop4 = function _loop4() {
           var newMG = filteredNewMGList[k];
           if (oldMG.items.some(function (it) {
             return it.id === selItem.id;
@@ -3443,7 +3603,7 @@ export function updateMoldingGroupArray(MGArray, selItem, planData, layer) {
         },
         _ret;
       for (var k = 0; k < filteredNewMGList.length; k++) {
-        _ret = _loop3();
+        _ret = _loop4();
         if (_ret) return _ret.v;
       }
       return true;
@@ -3612,7 +3772,7 @@ export function addWarningBox(itemId, altitude, planData) {
   deleteSpecifiedMeshObjects('WarningBox' + itemId);
   var item3D = planData.sceneGraph.layers[planData.sceneData.selectedLayer].items[itemId];
   if (item3D == undefined) return;
-  var altitudeLength = convert(altitude).from('in').to('cm');
+  var altitudeLength = altitude;
   var sBounding = item3D.children[0].userData;
   var width = sBounding.max.x - sBounding.min.x;
   var height = sBounding.max.y - sBounding.min.y;

package/es/components/viewer3d/viewer3d.js

@@ -816,17 +816,19 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       this.snap = function (obj, layer) {
         // snap operation
         var target = obj.userData.target;
+        if (isEmpty(target)) return;
         for (; target.parent != null;) {
           if (target.name == 'pivot') break;
           target = target.parent;
         }
         var source = obj.parent.parent.parent;
         if (target.userData.type == 'item') {
+          var _item$properties$getI;
           var sRot = layer.getIn(['items', source.userData.itemId]).rotation;
           var tRot = layer.getIn(['items', target.userData.itemId]) ? layer.getIn(['items', target.userData.itemId]).rotation : 0;
           var item = layer.getIn(['items', source.userData.itemId]);
           var layoutType = item.layoutpos;
-          var altitudeLength = convert(item.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+          var altitudeLength = convert(item.properties.getIn(['altitude', '_length'])).from((_item$properties$getI = item.properties.getIn(['altitude', '_unit'])) !== null && _item$properties$getI !== void 0 ? _item$properties$getI : 'in').to('cm');
           var sBounding = source.children[0].userData;
           var tBounding = target.children[0].userData;
           var tPos = target.position.clone();
@@ -926,8 +928,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             snapFlag = false;
             return;
           } else {
+            var _item3$properties$get;
             var _layoutType = _item3.layoutpos;
-            var _altitudeLength = convert(_item3.properties.getIn(['altitude', '_length'])).from('in').to('cm');
+            var _altitudeLength = convert(_item3.properties.getIn(['altitude', '_length'])).from((_item3$properties$get = _item3.properties.getIn(['altitude', '_unit'])) !== null && _item3$properties$get !== void 0 ? _item3$properties$get : 'in').to('cm');
             var _sBounding = source.children[0].userData;
             var _width = _sBounding.max.x - _sBounding.min.x;
             var _height = _sBounding.max.y - _sBounding.min.y;
@@ -1359,10 +1362,12 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
       };
       this.mouseUpEvent = function (event) {
+        var _selectedObject;
         var internalType = ''; // internalEvent type - select/drag/draw
         var selectedElement; // internalEvent data
         firstMove = 0;
         var altitude = 0;
+        var curLayer = _this2.props.state.scene.getIn(['layers', (_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.layerID]);
         if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
           var properties = allItemRect.cur.itemInfo.properties;
           altitude = properties.getIn(['altitude', '_length']);
@@ -1383,7 +1388,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
           } else {
             removeSnapBox();
-            var polygon = GeometryUtils.getPoylgonPoints(layer);
+            var polygon = GeometryUtils.getPoylgonPoints(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             // if cursor is outside of room
             if (polygon.length > 0 && !GeometryUtils.ContainsPoint(polygon, Point.x, Point.y)) {
               actions.itemsActions.endDrawingItem(_this2.props.state.scene.selectedLayer, sPoint.x, sPoint.y);
@@ -1477,8 +1482,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }
           gridMatrix.copy(gridPlane.matrixWorld).invert();
           var addItemToolObj = function addItemToolObj() {
-            var _planData$sceneGraph, _selectedObject, _intersects$_i;
-            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject = selectedObject) === null || _selectedObject === void 0 ? void 0 : _selectedObject.itemID];
+            var _planData$sceneGraph, _selectedObject2, _intersects$_i;
+            var selectedItem = (_planData$sceneGraph = planData.sceneGraph) === null || _planData$sceneGraph === void 0 || (_planData$sceneGraph = _planData$sceneGraph.layers[selectedObject.layerID]) === null || _planData$sceneGraph === void 0 ? void 0 : _planData$sceneGraph.items[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.itemID];
             if (isUndefined(selectedItem)) return;
             selectedElement = _this2.props.state.scene.layers.get(selectedObject.layerID).items.get(selectedObject.itemID);
             var itemPos = selectedItem.position.clone();
@@ -1511,8 +1516,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 }
                 isSelected = true;
                 setTimeout(function () {
-                  getDistances(layer);
+                  var _curLayer$id;
                   addItemToolObj();
+                  getDistances(curLayer !== null && curLayer !== void 0 ? curLayer : layer, selectedElement);
                   _this2.setState({
                     toolObj: toolObj
                   });
@@ -1522,8 +1528,8 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   // pointArray.push([fVLine[1].userData.distance, -90]);
                   // pointArray.push([fVLine[2].userData.distance, 180]);
                   // pointArray.push([fVLine[3].userData.distance, 0]);
-                  pointArray = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, layer).PointArray;
-                  actions.itemsActions.storeDistArray(layer.id, selectedObject.itemID, pointArray);
+                  pointArray = GeometryUtils.calcDistancesFromItemToWalls(selectedElement, curLayer !== null && curLayer !== void 0 ? curLayer : layer).PointArray;
+                  actions.itemsActions.storeDistArray((_curLayer$id = curLayer === null || curLayer === void 0 ? void 0 : curLayer.id) !== null && _curLayer$id !== void 0 ? _curLayer$id : layer.id, selectedObject.itemID, pointArray);
                   internalType = internalType ? internalType : INTERNAL_EVENT_SELECT_ELEMENT;
                   sendInternalEvent(internalType, selectedElement, pointArray);
                 });
@@ -1575,11 +1581,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             bRotate = false;
             bMoveUP = false;
             if (isSelected) {
-              prepareSnap(layer);
+              prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
               selectedObj = allItemRect.cur;
             }
           } else {
-            var _planData$sceneGraph2, _selectedObject2, _selectedObject3;
+            var _planData$sceneGraph2, _selectedObject3, _selectedObject4;
             visibleTransformBox(false);
             var alti = 0;
             if (allItemRect && allItemRect.cur && allItemRect.cur.itemInfo !== undefined) {
@@ -1589,7 +1595,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               alti = convert(alti).from(_unit2).to(_this2.props.state.scene.unit);
             }
             getPoint(event, alti);
-            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject2 = selectedObject) === null || _selectedObject2 === void 0 ? void 0 : _selectedObject2.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.itemID];
+            var _selectedItem = planData === null || planData === void 0 || (_planData$sceneGraph2 = planData.sceneGraph) === null || _planData$sceneGraph2 === void 0 || (_planData$sceneGraph2 = _planData$sceneGraph2.layers[(_selectedObject3 = selectedObject) === null || _selectedObject3 === void 0 ? void 0 : _selectedObject3.layerID]) === null || _planData$sceneGraph2 === void 0 ? void 0 : _planData$sceneGraph2.items[(_selectedObject4 = selectedObject) === null || _selectedObject4 === void 0 ? void 0 : _selectedObject4.itemID];
             if (isSelected && !isEmpty(_selectedItem)) addItemToolObj();
             if (bRotate) {
               _this2.setState({
@@ -1627,7 +1633,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           removeSnapBox();
           actions.sceneActions.updateMovingState(true);
           if (isSelected === true) {
-            prepareSnap(layer);
+            prepareSnap(curLayer !== null && curLayer !== void 0 ? curLayer : layer);
             selectedObj = allItemRect.cur;
           }
         }
@@ -2026,8 +2032,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       // handle snapBox, distArray, backsplash
       this.handleAfterMovingItem = function () {
         var layer = _this2.props.state.scene.getIn(['layers', selectedObject.layerID]);
+        var item = layer.getIn(['items', selectedObject.itemID]);
         var item3D = planData.sceneGraph.layers[selectedObject.layerID].items[selectedObject.itemID];
-        getDistances(layer);
+        getDistances(layer, item);
         var pointArray = [],
           cnt = 0;
         pointArray.push([fVLine[0].userData.distance, 90]);
@@ -2066,7 +2073,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          getDistances(layer);
+          getDistances(layer, item);
           var _i13 = 0;
           for (_i13 = 0; _i13 < fVLine.length; _i13++) {
             if (fVLine[_i13].userData.distance < snapDelta) {

package/es/constants.js

@@ -751,6 +751,7 @@ export var INTERNAL_EVENT_DRAW_ELEMENT = 'INTERNAL_EVENT_DRAW_ELEMENT';
 export var INTERNAL_EVENT_ROTATE_ELEMENT = 'INTERNAL_EVENT_ROTATE_ELEMENT';
 export var INTERNAL_EVENT_REPLACE_CABINET = 'INTERNAL_EVENT_REPLACE_CABINET';
 export var INTERNAL_EVENT_START_DRAW_WALL = 'INTERNAL_EVENT_START_DRAW_WALL';
+export var INTERNAL_EVENT_TOGGLE_TO_ELEVATION = 'INTERNAL_EVENT_TOGGLE_TO_ELEVATION';
 
 // room shape type
 export var ROOM_SHAPE_TYPE = {

package/es/index.js

@@ -12,6 +12,7 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
+import * as Three from 'three';
 import LiteRenderer from "./LiteRenderer";
 import { createRoot } from 'react-dom/client';
 var ROOT_KEY = '__kitchenSimulatorRoot__';
@@ -22,6 +23,18 @@ function nextFrame() {
   });
 }
 
+// DIY-714 [Temp Fix] Rewrite API URLs
+var API_HOST_REGEX = /(https?:\/\/)?(api\.diydesignspace\.com|api\.addovisuals\.com|127\.0\.0\.1:4002)/;
+var API_HOST_REPLACEMENT = 'https://api-old.diydesignspace.com';
+function rewriteApiUrl(url) {
+  return typeof url === 'string' ? url.replace(API_HOST_REGEX, API_HOST_REPLACEMENT) : url;
+}
+var originalTextureLoad = Three.TextureLoader.prototype.load;
+Three.TextureLoader.prototype.load = function (url, onLoad, onProgress, onError) {
+  var newUrl = rewriteApiUrl(url);
+  return originalTextureLoad.call(this, newUrl, onLoad, onProgress, onError);
+};
+
 /**
  * Track 3D asset network activity (gltf/glb/bin/textures/hdr/etc)
  * Ref-counted global install so multiple instances don't clobber each other.
@@ -144,7 +157,9 @@ function installGltfTracker() {
         var _len3,
           args,
           _key3,
-          url,
+          input,
+          init,
+          newUrl,
           track,
           _args2 = arguments;
         return _regeneratorRuntime.wrap(function (_context2) {
@@ -153,19 +168,25 @@ function installGltfTracker() {
               for (_len3 = _args2.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
                 args[_key3] = _args2[_key3];
               }
-              url = args === null || args === void 0 ? void 0 : args[0];
-              track = is3dAssetUrl(url);
+              input = args[0], init = args[1]; // DIY-714 [Temp Fix] Rewrite API URLs
+              if (typeof input === 'string') {
+                input = rewriteApiUrl(input);
+              } else if (input instanceof Request) {
+                newUrl = rewriteApiUrl(input.url);
+                input = new Request(newUrl, input);
+              }
+              track = is3dAssetUrl(input);
               if (track) {
                 _context2.next = 1;
                 break;
               }
-              return _context2.abrupt("return", g.originalFetch.apply(this, args));
+              return _context2.abrupt("return", g.originalFetch.call(this, input, init));
             case 1:
               g.inFlight += 1;
               notify();
               _context2.prev = 2;
               _context2.next = 3;
-              return g.originalFetch.apply(this, args);
+              return g.originalFetch.call(this, input, init);
             case 3:
               return _context2.abrupt("return", _context2.sent);
             case 4: