kitchen-simulator 3.1.15 → 4.0.0-alpha.12

package/es/catalog/utils/item-loader.js

@@ -4,28 +4,27 @@ 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 { convert } from "../../utils/convert-units-lite";
-import { fromJS, Map } from "immutable";
-import React, { useState } from "react";
-import * as Three from "three";
+import { fromJS, Map } from 'immutable';
+import React, { useState } from 'react';
+import * as Three from 'three';
 import * as SceneCreator from "../../components/viewer3d/scene-creator";
 import { ARROW_COLOR, BASE_CABINET_LAYOUTPOS, OBJTYPE_GROUP, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, SHAPE_SVG_DEPTH, SHAPE_SVG_PADDING, SHAPE_SVG_WIDTH, STATUS_WARNING_COLOR, STATUS_WARNING_LIGHT_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, UNIT_INCH, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { Item } from "../../models";
 import * as GeomUtils from "./geom-utils";
 import { loadGLTF } from "./load-obj";
 import { animateDoor, isEmpty, translateDrawer } from "../../utils/helper";
-import { isWarningItem } from "../../components/viewer2d/utils";
-var INITIAL_NORMAL_MAP = "";
+var INITIAL_NORMAL_MAP = '';
 
 // env Map ///////////////
 var paramsCounter = {
-  envMap: "HDR",
+  envMap: 'HDR',
   roughness: 0.6,
   metalness: 0.3,
   exposure: 1
   // debug: true
 };
 var params = {
-  envMap: "HDR",
+  envMap: 'HDR',
   roughness: 0.9,
   metalness: 0.1,
   metalness_glossy: 0.2,
@@ -33,18 +32,18 @@ var params = {
   // debug: false
 };
 var paramsModel = {
-  envMap: "HDR",
+  envMap: 'HDR',
   roughness: 0.9,
   metalness: 0.2,
   exposure: 1.0
   // debug: false
 };
 var buttons = [{
-  name: "Edit",
-  thumbnail: "/assets/img/svg/3d_item_warning_edit.svg"
+  name: 'Edit',
+  thumbnail: '/assets/img/svg/3d_item_warning_edit.svg'
 }, {
-  name: "Info",
-  thumbnail: "/assets/img/svg/3d_item_warning_info.svg"
+  name: 'Info',
+  thumbnail: '/assets/img/svg/3d_item_warning_info.svg'
 }];
 
 // /////////////////////////
@@ -60,7 +59,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   var x = element.x,
     y = element.y,
     rotation = element.rotation;
-  var el_DSN = "el_DSN",
+  var el_DSN = 'el_DSN',
     doorStylesKeys = [];
   var _element = element.toJS();
   if (_element.doorStyle !== undefined) {
@@ -68,10 +67,10 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
       doorStylesKeys = Object.keys(_element.doorStyle.doorStyles);
     }
   }
-  if ((doorStylesKeys.includes("euro_length") || doorStylesKeys.includes("euro_width") || doorStylesKeys.includes("euro_shape_svg")) && _element.doorStyle.doorStyles.is_euro_cds) {
+  if ((doorStylesKeys.includes('euro_length') || doorStylesKeys.includes('euro_width') || doorStylesKeys.includes('euro_shape_svg')) && _element.doorStyle.doorStyles.is_euro_cds) {
     el_DSN = _element.doorStyle.door_style_name;
   } else {
-    el_DSN = "el_DSN";
+    el_DSN = 'el_DSN';
   }
   var width, depth, el_euro_length, el_euro_width, el_euro_length_unit, el_euro_width_unit, el_is_euro_cds, el_euro_shape_svg;
   if (doorStylesKeys.length > 0) {
@@ -81,41 +80,41 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     el_euro_shape_svg = _element.doorStyle.doorStyles.euro_shape_svg;
   }
   if (el_euro_length === undefined && el_euro_width === undefined) {
-    el_DSN = "el_DSN";
+    el_DSN = 'el_DSN';
   }
-  if (el_DSN === "Euro & Frameless") {
+  if (el_DSN === 'Euro & Frameless') {
     // sizeinfo["depth"] = el_euro_length;
     // sizeinfo["width"] = el_euro_width;
   }
-  var tempWidth = element.properties.get("width");
-  var tempDepth = element.properties.get("depth");
+  var tempWidth = element.properties.get('width');
+  var tempDepth = element.properties.get('depth');
   width = tempWidth && {
-    length: tempWidth.get("_length"),
-    unit: tempWidth.get("_unit")
+    length: tempWidth.get('_length'),
+    unit: tempWidth.get('_unit')
   };
   depth = tempDepth && {
-    length: tempDepth.get("_length"),
-    unit: tempDepth.get("_unit")
+    length: tempDepth.get('_length'),
+    unit: tempDepth.get('_unit')
   };
-  var originalWidth = convert(sizeinfo.width).from("in").to("cm");
-  var originalDepth = convert(sizeinfo.depth).from("in").to("cm");
-  var newWidth = convert(width.length).from(width.unit).to("cm");
-  var newDepth = convert(depth.length).from(depth.unit).to("cm");
+  var originalWidth = convert(sizeinfo.width).from('in').to('cm');
+  var originalDepth = convert(sizeinfo.depth).from('in').to('cm');
+  var newWidth = convert(width.length).from(width.unit).to('cm');
+  var newDepth = convert(depth.length).from(depth.unit).to('cm');
   var padding = convert(SHAPE_SVG_PADDING).from(UNIT_INCH).to(UNIT_CENTIMETER);
   var angle = element.rotation + 90;
   var textRotation = 0;
   if (Math.sin(angle * Math.PI / 180) < 0) {
     textRotation = 180;
   }
-  var color = "#eee";
+  var color = '#eee';
   if (layoutpos == BASE_CABINET_LAYOUTPOS) {
-    color = "#3f8db3";
+    color = '#3f8db3';
   }
   if (layoutpos == TALL_CABINET_LAYOUTPOS) {
-    color = "#93b3be";
+    color = '#93b3be';
   }
   if (layoutpos == WALL_CABINET_LAYOUTPOS) {
-    color = "#48b08dcc";
+    color = '#48b08dcc';
   }
   var splitStr = [];
   var txtContent = [];
@@ -129,7 +128,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     var dcId,
       doorStyle = element.doorStyle;
     if (doorStyle instanceof Map) {
-      dcId = doorStyle.get("id");
+      dcId = doorStyle.get('id');
     } else {
       dcId = doorStyle.id;
     }
@@ -148,7 +147,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   splitStr.push(type.slice(lineCount * rowCount));
   splitStr.forEach(function (el, key) {
     txtContent.push(/*#__PURE__*/React.createElement("text", {
-      key: "text" + key,
+      key: 'text' + key,
       x: "0",
       y: newDepth / 2 - 12,
       dy: 16 * key,
@@ -158,16 +157,16 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
       ,
       style: {
         fontWeight: 500,
-        fontSize: "7px",
-        textAnchor: "middle",
-        fill: "#FFF",
-        display: "block"
+        fontSize: '7px',
+        textAnchor: 'middle',
+        fill: '#FFF',
+        display: 'block'
       }
     }, el));
   });
   var style = {
-    stroke: element.selected ? "#565658" : "#565658",
-    strokeWidth: "2px",
+    stroke: element.selected ? '#565658' : '#565658',
+    strokeWidth: '2px',
     fill: color
   };
   // let arrow_style = { stroke: element.selected ? '#0096fd' : null, strokeWidth: "2px", fill: "#84e1ce" };
@@ -175,8 +174,9 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   var rendered = null;
   var svg_url, svg_width, svg_depth;
   if (shape_svg || el_euro_shape_svg) {
-    if (typeof shape_svg == "string" || typeof el_euro_shape_svg == "string") {
-      if (el_DSN === "Euro & Frameless" && el_is_euro_cds) {
+    var _element$toJS$doorSty;
+    if (typeof shape_svg == 'string' || typeof el_euro_shape_svg == 'string') {
+      if (el_DSN === 'Euro & Frameless' && el_is_euro_cds) {
         svg_url = el_euro_shape_svg;
         svg_width = newWidth;
         svg_depth = newDepth;
@@ -203,21 +203,17 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     var warning_buttons = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("g", {
       id: "warning_info_2d",
       style: {
-        cursor: "pointer",
+        cursor: 'pointer',
         transform: "translate(".concat(-transX, "px, ").concat(-transY, "px)")
       },
       onMouseEnter: function onMouseEnter(event) {
         var bbox = event.target.getBoundingClientRect();
-        if (document.getElementById("warning_box_2d")) {
-          document.getElementById("warning_box_2d").style.display = "flex";
-          document.getElementById("warning_box_2d").style.top = "".concat(bbox.top - 60, "px");
-          document.getElementById("warning_box_2d").style.left = "".concat(bbox.left, "px");
-        }
+        document.getElementById('warning_box_2d').style.display = 'flex';
+        document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
+        document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
       },
       onMouseLeave: function onMouseLeave() {
-        if (document.getElementById("warning_box_2d")) {
-          document.getElementById("warning_box_2d").style.display = "none";
-        }
+        document.getElementById('warning_box_2d').style.display = 'none';
       }
     }, /*#__PURE__*/React.createElement("circle", {
       cx: 0,
@@ -235,7 +231,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
       href: buttons[1].thumbnail
     })), /*#__PURE__*/React.createElement("g", {
       style: {
-        cursor: "pointer",
+        cursor: 'pointer',
         transform: "translate(".concat(transX, "px, ").concat(transY, "px)")
       },
       "data-element-root": true,
@@ -281,7 +277,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     }, /*#__PURE__*/React.createElement("image", {
       preserveAspectRatio: "none",
       style: {
-        pointerEvents: "none"
+        pointerEvents: 'none'
       },
       href: svg_url,
       width: "".concat(newWidth + 2 * padding_width),
@@ -294,16 +290,18 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
       y: "".concat(padding_depth),
       width: "".concat(newWidth),
       height: "".concat(newDepth),
-      visibility: "hidden",
+      visibility: 'hidden',
       style: {
-        pointerEvents: "all",
+        pointerEvents: 'all',
         opacity: 0.7,
-        postion: "relative"
+        postion: 'relative'
       }
     }), /*#__PURE__*/React.createElement("g", {
       transform: "translate(".concat(padding_width, ",").concat(padding_depth, ")")
-    }, txtContent)), element.category === "cabinet" && /*#__PURE__*/React.createElement("g", {
-      visibility: isWarningItem(element) ? "visible" : "hidden"
+    }, txtContent)), element.category === 'cabinet' && /*#__PURE__*/React.createElement("g", {
+      visibility: (element === null || element === void 0 || (_element$toJS$doorSty = element.toJS().doorStyle) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.doorStyles) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.cds) === null || _element$toJS$doorSty === void 0 ? void 0 : _element$toJS$doorSty.filter(function (cd) {
+        return cd.itemID == (element === null || element === void 0 ? void 0 : element.getIn(['itemID']));
+      }).length) > 0 ? 'hidden' : 'visible'
     }, warning_buttons)));
   } else {
     rendered = /*#__PURE__*/React.createElement("g", {
@@ -390,38 +388,38 @@ var assignUVs = function assignUVs(geometry) {
 export function render3DItem(element, layer, scene, sizeinfo, structure_json, is_corner) {
   var mode = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   if (element.doorStyle.constructor !== Map) {
-    element = element.set("doorStyle", fromJS(element.doorStyle));
+    element = element.set('doorStyle', fromJS(element.doorStyle));
   }
-  if (element.doorStyle.toJS().handle_gltf !== "") {
+  if (element.doorStyle.toJS().handle_gltf !== '') {
     // Check element has doorHandle
     for (var i = 1; i < 10; i++) {
-      element = element.setIn(["doorStyle", "doorStyles", "door_handle_" + i + "_gltf"], element.doorStyle.toJS().handle_gltf);
-      element = element.setIn(["doorStyle", "doorStyles", "fixed_drawer_door_handle_" + i + "_gltf"], element.doorStyle.toJS().handle_gltf);
-      element = element.setIn(["doorStyle", "doorStyles", "drawer_door_handle_" + i + "_gltf"], element.doorStyle.toJS().handle_gltf);
+      element = element.setIn(['doorStyle', 'doorStyles', 'door_handle_' + i + '_gltf'], element.doorStyle.toJS().handle_gltf);
+      element = element.setIn(['doorStyle', 'doorStyles', 'fixed_drawer_door_handle_' + i + '_gltf'], element.doorStyle.toJS().handle_gltf);
+      element = element.setIn(['doorStyle', 'doorStyles', 'drawer_door_handle_' + i + '_gltf'], element.doorStyle.toJS().handle_gltf);
     }
   }
   var width = {
     length: sizeinfo.width,
-    unit: "in"
+    unit: 'in'
   };
   var depth = {
     length: sizeinfo.depth,
-    unit: "in"
+    unit: 'in'
   };
   var height = {
     length: sizeinfo.height,
-    unit: "in"
+    unit: 'in'
   };
-  var newWidth = convert(width.length).from(width.unit).to("in");
-  var newDepth = convert(depth.length).from(depth.unit).to("in");
-  var newHeight = convert(height.length).from(height.unit).to("in");
-  var mainName = ""; // to get name structure//
-  if (element.properties.get("width")) newWidth = element.getIn(["properties", "width", "_length"]);
-  if (element.properties.get("depth")) newDepth = element.getIn(["properties", "depth", "_length"]);
-  if (element.properties.get("height")) newHeight = element.getIn(["properties", "height", "_length"]);
+  var newWidth = convert(width.length).from(width.unit).to('in');
+  var newDepth = convert(depth.length).from(depth.unit).to('in');
+  var newHeight = convert(height.length).from(height.unit).to('in');
+  var mainName = ''; // to get name structure//
+  if (element.properties.get('width')) newWidth = element.getIn(['properties', 'width', '_length']);
+  if (element.properties.get('depth')) newDepth = element.getIn(['properties', 'depth', '_length']);
+  if (element.properties.get('height')) newHeight = element.getIn(['properties', 'height', '_length']);
   var structure = structure_json;
   // structure.push({name:'model', url: '/assets/model/DCM.gltf'});
-  structure.model = "/assets/model/DCM.gltf";
+  structure.model = '/assets/model/DCM.gltf';
   var placeholders = structure.placeholders;
   var doorStyles = null;
   var color = 0xffffff,
@@ -431,26 +429,25 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
   if (layer.toJS().counterTop.uri) {
     counterTop.uri = layer.toJS().counterTop.uri;
   }
-  if ("name" in element.doorStyle) {
+  if ('name' in element.doorStyle) {
     doorStyles = new Map(element.doorStyle.doorStyles);
     color = element.doorStyle.color;
     glossness = element.doorStyle.glossness;
     handleMaterial.metalness = element.doorStyle.metalness;
     handleMaterial.roughness = element.doorStyle.roughness;
   } else if (element.doorStyle != null && element.doorStyle) {
-    doorStyles = element.doorStyle.get("doorStyles");
-    color = element.doorStyle.get("color");
-    glossness = element.doorStyle.get("glossness");
-    handleMaterial.metalness = element.doorStyle.get("metalness");
-    handleMaterial.roughness = element.doorStyle.get("roughness");
+    doorStyles = element.doorStyle.get('doorStyles');
+    color = element.doorStyle.get('color');
+    glossness = element.doorStyle.get('glossness');
+    handleMaterial.metalness = element.doorStyle.get('metalness');
+    handleMaterial.roughness = element.doorStyle.get('roughness');
   }
-  if (color === undefined) color = "#ffffff";
+  if (color === undefined) color = '#ffffff';
   if (glossness === undefined) glossness = 1;
   var tempDoorStyles = doorStyles.toJS();
   var tempPlaceholders = structure.tempPlaceholders;
   var tPlaceholders = tempPlaceholders.find(function (el) {
     return el.id === tempDoorStyles.cabinet_door_style_id;
-    // return el.id === tempDoorStyles.cds[0].cabinet_door_style_id;
   });
   if (tPlaceholders !== undefined) {
     placeholders = tPlaceholders.placeholders;
@@ -469,13 +466,13 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
     areaMaterial.side = Three.DoubleSide;
     // areaMaterial.envMap = textureCube;
     if (isEmpty(doorStyles)) {
-      var normalMap = doorStyles.get("base") || INITIAL_NORMAL_MAP;
+      var normalMap = doorStyles.get('base') || INITIAL_NORMAL_MAP;
       var interiortexture = loadTexture(normalMap);
       applyTexture(areaMaterial, interiortexture, 100, 100);
     }
     var object1 = object;
-    var newAltitude = element.properties.get("altitude").get("_length");
-    var newUnit = element.properties.get("altitude").get("_unit") || "in";
+    var newAltitude = element.properties.get('altitude').get('_length');
+    var newUnit = element.properties.get('altitude').get('_unit') || 'in';
     newAltitude = convert(newAltitude).from(newUnit).to(scene.unit);
     var _element = element.toJS();
     if (!_element.doorStyle.doorStyles.is_euro_cds) {
@@ -492,27 +489,27 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       var door_match = child.name.match(matchStr);
       if (door_match && door_match.length > 2) {
         var _child$children$;
-        var rotate_match_text = element.properties.toJS().flip_doorhandle ? "rotate_L" : "rotate_R";
-        if (door_match[2] === "_L") {
-          rotate_match_text = element.properties.toJS().flip_doorhandle ? "rotate_R" : "rotate_L";
+        var rotate_match_text = element.properties.toJS().flip_doorhandle ? 'rotate_L' : 'rotate_R';
+        if (door_match[2] === '_L') {
+          rotate_match_text = element.properties.toJS().flip_doorhandle ? 'rotate_R' : 'rotate_L';
         }
         var isDoubleDoor = door_match && door_match[2] !== undefined;
         (_child$children$ = child.children[0]) === null || _child$children$ === void 0 || _child$children$.children.forEach(function (it) {
           var _it$name, _it$children;
-          if (it !== null && it !== void 0 && (_it$name = it.name) !== null && _it$name !== void 0 && _it$name.includes("handle") && (_it$children = it.children) !== null && _it$children !== void 0 && _it$children.length && is_corner === 1 && isDoubleDoor) {
+          if (it !== null && it !== void 0 && (_it$name = it.name) !== null && _it$name !== void 0 && _it$name.includes('handle') && (_it$children = it.children) !== null && _it$children !== void 0 && _it$children.length && is_corner === 1 && isDoubleDoor) {
             var _child$name, _child$name2, _object1$children, _t0$name, _t0$children;
-            var tname = child !== null && child !== void 0 && (_child$name = child.name) !== null && _child$name !== void 0 && _child$name.endsWith("_L") ? child.name.replace("_L", "_R") : child === null || child === void 0 || (_child$name2 = child.name) === null || _child$name2 === void 0 ? void 0 : _child$name2.replace("_R", "_L");
+            var tname = child !== null && child !== void 0 && (_child$name = child.name) !== null && _child$name !== void 0 && _child$name.endsWith('_L') ? child.name.replace('_L', '_R') : child === null || child === void 0 || (_child$name2 = child.name) === null || _child$name2 === void 0 ? void 0 : _child$name2.replace('_R', '_L');
             var tmp = (object1 === null || object1 === void 0 || (_object1$children = object1.children) === null || _object1$children === void 0 ? void 0 : _object1$children.filter(function (item) {
               return (item === null || item === void 0 ? void 0 : item.name) === tname;
             })) || [];
             var t0 = tmp[0];
-            var filterStr = t0 !== null && t0 !== void 0 && (_t0$name = t0.name) !== null && _t0$name !== void 0 && _t0$name.endsWith("_L") ? "rotate_L" : "rotate_R";
+            var filterStr = t0 !== null && t0 !== void 0 && (_t0$name = t0.name) !== null && _t0$name !== void 0 && _t0$name.endsWith('_L') ? 'rotate_L' : 'rotate_R';
             var tposArr = (t0 === null || t0 === void 0 || (_t0$children = t0.children) === null || _t0$children === void 0 || (_t0$children = _t0$children[0]) === null || _t0$children === void 0 || (_t0$children = _t0$children.children) === null || _t0$children === void 0 ? void 0 : _t0$children.filter(function (item) {
               var _item$name;
               return item === null || item === void 0 || (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.endsWith(filterStr);
             })) || [];
             var tpos0 = tposArr[0];
-            if (it.name.includes("base_end")) {
+            if (it.name.includes('base_end')) {
               var _it$position$x, _it$position, _it$position$y, _it$position2, _tpos0$position$x, _tpos0$position;
               door_animate_offset[child.name] = {
                 x: -2 * ((_it$position$x = (_it$position = it.position) === null || _it$position === void 0 ? void 0 : _it$position.x) !== null && _it$position$x !== void 0 ? _it$position$x : 0) - 0.12,
@@ -580,16 +577,16 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       // vertical line - 4 lines around object//////////////////////////
       var vLineGeom = new Three.BufferGeometry();
       var vertices = [(max.x - min.x) / 2 + min.x, 0, max.z, (max.x - min.x) / 2 + min.x, 0, max.z + 1.3];
-      vLineGeom.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices), 3));
+      vLineGeom.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices), 3));
       var vLineGeom1 = new Three.BufferGeometry();
       var vertices1 = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z - 1.3];
-      vLineGeom1.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices1), 3));
+      vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices1), 3));
       var vLineGeom2 = new Three.BufferGeometry();
       var vertices2 = [max.x, 0, max.z - (max.z - min.z) / 2, max.x + 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom2.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices2), 3));
+      vLineGeom2.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices2), 3));
       var vLineGeom3 = new Three.BufferGeometry();
       var vertices3 = [min.x, 0, max.z - (max.z - min.z) / 2, min.x - 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom3.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices3), 3));
+      vLineGeom3.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices3), 3));
       // ///////////////////////////////////////
 
       // set names of transform object
@@ -602,12 +599,12 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
         color: new Three.Color(0xffffff).convertLinearToSRGB(),
         colorWrite: true
       }));
-      rotFillObj.name = "rotate";
+      rotFillObj.name = 'rotate';
       var upObj = new Three.Mesh(upwardsGeom, new Three.MeshBasicMaterial({
         color: new Three.Color(0xffffff).convertLinearToSRGB(),
         side: Three.DoubleSide
       }));
-      upObj.name = "transUp";
+      upObj.name = 'transUp';
       var mBox = new Three.Mesh(moveBox, new Three.MeshBasicMaterial({
         color: new Three.Color(0xdd6699).convertLinearToSRGB(),
         side: Three.DoubleSide,
@@ -649,7 +646,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       //rotObj.translateOnAxis(uVec, 1);
       upObj.translateOnAxis(uVec, 1);
       upObj.translateY(max.y - min.y);
-      mBox.name = "TransformBox";
+      mBox.name = 'TransformBox';
       mBox.translateOnAxis(new Three.Vector3(uVec.x, uVec.y + (max.y - min.y) / 2, uVec.z), 1);
       mBox.scale.set(1.01, 1.01, 1.01);
 
@@ -678,7 +675,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       asrtObj.add(mBox);
       asrtObj.scale.set(1 / object.scale.x, object.scale.y, 1 / object.scale.z);
       //asrtObj.translateY(newAltitude / scalevec.y);
-      asrtObj.name = "TransformGizmo";
+      asrtObj.name = 'TransformGizmo';
       // add assets Objects Group
       object1.add(asrtObj);
 
@@ -691,7 +688,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
         SceneCreator.getDistances(layer);
       }, 100);
     }
-    var flip_doorhandle = element.properties.get("flip_doorhandle");
+    var flip_doorhandle = element.properties.get('flip_doorhandle');
     if (flip_doorhandle) {
       SceneCreator.updateDoorHandleMesh(element, object1, true);
     }
@@ -707,14 +704,14 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
             transparency: 0.8
           });
           obj.material = material;
-        } else if (name.startsWith("sink_")) {
+        } else if (name.startsWith('sink_')) {
           // texture = loadTexture('/assets/img/texture/steel.jpg');
 
           var _material;
           // Get color from name
-          if (name.includes("black") || name.includes("white")) {
+          if (name.includes('black') || name.includes('white')) {
             var _color2;
-            if (name.includes("black")) {
+            if (name.includes('black')) {
               _color2 = new Three.Color(0x555555).convertLinearToSRGB();
             } else {
               _color2 = 0xffffff;
@@ -747,14 +744,14 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
         var open_doors = element.toJS().properties.open_doors;
         var object_match = obj.name.match(/\d_(interior_drawer[^LR1-9]*)(_[LR1-9])?$/) || obj.name.match(matchStr);
         if (object_match && object_match.length > 2) {
-          var isDoor = object_match[1] === "door";
+          var isDoor = object_match[1] === 'door';
           if (isDoor) {
             var offsetData = object1.userData.door_animate_offset[obj.name];
             // Open Door
-            animateDoor(offsetData, obj, open_doors, element.toJS(), is_corner, "Opened2D");
+            animateDoor(offsetData, obj, open_doors, element.toJS(), is_corner, 'Opened2D');
           } else {
             // Open Drawer
-            translateDrawer(element.toJS(), obj, open_doors, "Opened2D");
+            translateDrawer(element.toJS(), obj, open_doors, 'Opened2D');
           }
         }
       }
@@ -764,30 +761,30 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
   // keys in structure
   var keys = Object.keys(structure);
   // if exist in cached Objects
-  if (element.type + color + "doorStyle" + JSON.stringify(doorStyles.toJS()) + element.counterTop.uri in cachedObject) {
-    var _objGroup = cachedObject[element.type + color + "doorStyle" + JSON.stringify(doorStyles.toJS())].clone();
+  if (element.type + color + 'doorStyle' + JSON.stringify(doorStyles.toJS()) + element.counterTop.uri in cachedObject) {
+    var _objGroup = cachedObject[element.type + color + 'doorStyle' + JSON.stringify(doorStyles.toJS())].clone();
     return Promise.resolve(onLoadItem(_objGroup.clone()));
   }
 
   // base Object/////
   var objGroup = null;
   var _loadGLTFs = function loadGLTFs(i) {
-    if (keys[i] === "animation") {
+    if (keys[i] === 'animation') {
       // if animation info
       i++;
       return _loadGLTFs(i);
     }
-    if (keys[i] === "placeholders") {
+    if (keys[i] === 'placeholders') {
       // if placeholders group
       i++;
       return _loadGLTFs(i);
     }
     if (i === keys.length) {
       // if end of keys
-      cachedObject[element.type + color + "doorStyle" + JSON.stringify(doorStyles.toJS())] = objGroup.clone(); //register to cachedObject
-      return onLoadItem(cachedObject[element.type + color + "doorStyle" + JSON.stringify(doorStyles.toJS())].clone());
+      cachedObject[element.type + color + 'doorStyle' + JSON.stringify(doorStyles.toJS())] = objGroup.clone(); //register to cachedObject
+      return onLoadItem(cachedObject[element.type + color + 'doorStyle' + JSON.stringify(doorStyles.toJS())].clone());
     }
-    if (keys[i] === "base") {
+    if (keys[i] === 'base') {
       // if base Objects
       i++;
       return _loadGLTFs(i);
@@ -800,15 +797,15 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
     }
     for (var j = 0; j < placeholderStructure.length; j++) {
       var phData = placeholderStructure[j];
-      var phs = phData.split("/");
-      var temp = phData.split("/");
+      var phs = phData.split('/');
+      var temp = phData.split('/');
       // placeholder remake////////////////
       for (var k = 0; k < phs.length; k++) {
         if (phs[k] in placeholders) {
           var placeholderphs = placeholders[phs[k]];
           var key = placeholderStructure.length / placeholderphs.length;
           phs[k] = placeholderphs[Math.floor(j / key)];
-          var splitedData = phs[k].split("/");
+          var splitedData = phs[k].split('/');
           if (splitedData.length > 1) {
             phs[k] = splitedData[splitedData.length - 1];
             for (var m = splitedData.length - 2; m >= 0; m--) {
@@ -819,41 +816,41 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
           k = -1;
           continue;
         }
-        if (phs[k].indexOf("ph") == -1) {
+        if (phs[k].indexOf('ph') == -1) {
           var _url = structure[temp[k - 1]];
-          if (temp[k - 1] + "_doorStyle" + element.type + "doorStyle" + JSON.stringify(doorStyles.toJS()) in structure) {
-            if (structure[temp[k - 1] + "_doorStyle" + element.type + "doorStyle" + JSON.stringify(doorStyles.toJS())] != null) {
-              _url = structure[temp[k - 1] + "_doorStyle" + element.type + "doorStyle" + JSON.stringify(doorStyles.toJS())];
+          if (temp[k - 1] + '_doorStyle' + element.type + 'doorStyle' + JSON.stringify(doorStyles.toJS()) in structure) {
+            if (structure[temp[k - 1] + '_doorStyle' + element.type + 'doorStyle' + JSON.stringify(doorStyles.toJS())] != null) {
+              _url = structure[temp[k - 1] + '_doorStyle' + element.type + 'doorStyle' + JSON.stringify(doorStyles.toJS())];
             }
           }
           if (_typeof(_url) == Array) _url = _url[0];
-          var uData = _url.split("/");
+          var uData = _url.split('/');
           uData = uData[uData.length - 1];
           uData = uData.slice(0, -5);
-          var datas = uData.split("_");
+          var datas = uData.split('_');
           uData = datas[1];
           for (var _i = 2; _i < datas.length; _i++) {
-            uData += "_";
+            uData += '_';
             uData += datas[_i];
           }
-          uData = mainName.replace("main", uData);
-          phs[k] = "ph_" + uData + "_" + phs[k];
+          uData = mainName.replace('main', uData);
+          phs[k] = 'ph_' + uData + '_' + phs[k];
         }
       }
       phsArray.push(phs);
     }
     var url = structure[keys[i]];
-    var normalMap = "";
-    var urlData = url.split("/");
+    var normalMap = '';
+    var urlData = url.split('/');
     for (var _j = 0; _j < element.submodule.size; _j++) {
-      var replaceUrlData = element.submodule.get(_j).split("/");
+      var replaceUrlData = element.submodule.get(_j).split('/');
       if (urlData.includes(replaceUrlData[replaceUrlData.length - 2])) {
         url = element.submodule.get(_j);
         break;
       }
     }
     for (var _j2 = 0; _j2 < element.normalMap.size; _j2++) {
-      var normalMapData = element.normalMap.get(_j2).split("/");
+      var normalMapData = element.normalMap.get(_j2).split('/');
       if (urlData.includes(normalMapData[normalMapData.length - 2])) {
         normalMap = element.normalMap.get(_j2);
         break;
@@ -865,15 +862,15 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
     if (phsArray.length > 0) {
       // let loadUrl = dirName + url;
       var loadUrl = url;
-      if (doorStyles.get(keys[i] + "_gltf") != undefined) {
-        loadUrl = doorStyles.get(keys[i] + "_gltf");
-        structure[keys[i] + "_doorStyle" + element.type + "doorStyle" + JSON.stringify(doorStyles.toJS())] = loadUrl;
+      if (doorStyles.get(keys[i] + '_gltf') != undefined) {
+        loadUrl = doorStyles.get(keys[i] + '_gltf');
+        structure[keys[i] + '_doorStyle' + element.type + 'doorStyle' + JSON.stringify(doorStyles.toJS())] = loadUrl;
       } else {
-        structure[keys[i] + "_doorStyle" + element.type + "doorStyle" + JSON.stringify(doorStyles.toJS())] = null;
+        structure[keys[i] + '_doorStyle' + element.type + 'doorStyle' + JSON.stringify(doorStyles.toJS())] = null;
       }
       return loadGLTF(loadUrl).then(function (object) {
-        if (normalMap !== "") {
-          var normalUrl = normalMap.split(".")[0] + "-normal." + normalMap.split(".")[1];
+        if (normalMap !== '') {
+          var normalUrl = normalMap.split('.')[0] + '-normal.' + normalMap.split('.')[1];
           var t = loadTexture(normalMap);
           var _m = loadTexture(normalUrl);
           var mat2 = new Three.MeshStandardMaterial({
@@ -897,7 +894,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
           // let normalMap = "catalog/items/doorstyle/" + doorStyles.get(keys[i]);
           var _normalMap = doorStyles.get(keys[i]) || INITIAL_NORMAL_MAP;
           var _mat;
-          if (_normalMap === "") {
+          if (_normalMap === '') {
             var examplecolor = new Three.Color(parseInt(color.slice(1), 16)).convertLinearToSRGB();
             _mat = new Three.MeshStandardMaterial({
               color: examplecolor,
@@ -921,8 +918,8 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
               object.children[_j4].material = _mat;
               object.children[_j4].receiveShadow = true;
               object.children[_j4].castShadow = true;
-              !object.children[_j4].name.includes("handle") && addEdgesToMesh(object.children[_j4]);
-            } else if (!object.children[_j4].name.startsWith("ph_") && object.children[_j4].type === OBJTYPE_GROUP) {
+              !object.children[_j4].name.includes('handle') && addEdgesToMesh(object.children[_j4]);
+            } else if (!object.children[_j4].name.startsWith('ph_') && object.children[_j4].type === OBJTYPE_GROUP) {
               object.children[_j4].traverse(function (prim) {
                 prim.material = _mat;
                 prim.receiveShadow = true;
@@ -962,10 +959,10 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
               } else {
                 if (parent.children[_k].name == placeholder) {
                   var tmp = object.clone();
-                  if (placeholder.includes("drawer_door") && placeholder.includes("_handle")) {
+                  if (placeholder.includes('drawer_door') && placeholder.includes('_handle')) {
                     tmp.rotateZ(Math.PI / 2);
                   }
-                  if (placeholder.includes("_handle") && tmp.children[0].type === OBJTYPE_MESH) {
+                  if (placeholder.includes('_handle') && tmp.children[0].type === OBJTYPE_MESH) {
                     // NOTE: change metalness of handle
                     tmp.children[0].material.metalness = 1;
                     // handleMaterial.metalness || 0.2;
@@ -979,25 +976,23 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
           }
         }
       }, function (reason) {
-        console.log("loadGLTF failed for reason:", reason);
+        console.log('loadGLTF failed for reason:', reason);
       }).then(function () {
         i++;
         return _loadGLTFs(i);
       });
     }
   };
-  return loadGLTF(structure["base"]).then(function (object) {
-    object.name = "MainObject";
+  return loadGLTF(structure['base']).then(function (object) {
+    object.name = 'MainObject';
     object.receiveShadow = true;
     objGroup = object;
     if (!isEmpty(doorStyles)) {
-      var normalMap = doorStyles.get("base") || INITIAL_NORMAL_MAP;
+      var normalMap = doorStyles.get('base') || INITIAL_NORMAL_MAP;
       if (counterTop.uri === undefined) {
         try {
           counterTop = counterTop.toJS();
         } catch (error) {
-          //@todo THIS IS A TEMPORARY FIX FOR COUNTERTOP TEXTURE UNDEFINED ISSUE
-          counterTop.uri = "https://media.test.diydesignspace.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg";
           console.log(error);
         }
       }
@@ -1005,7 +1000,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
         counterTop.uri = layer.toJS().counterTop.uri;
       }
       var countTopMap = counterTop.uri;
-      var interiorMap = doorStyles.get("interior");
+      var interiorMap = doorStyles.get('interior');
       var countT = loadTexture(countTopMap);
       countT.wrapS = Three.RepeatWrapping;
       countT.wrapT = Three.RepeatWrapping;
@@ -1014,7 +1009,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       var mat2 = null,
         mat3 = null,
         mat4 = null;
-      if (normalMap === "") {
+      if (normalMap === '') {
         mat2 = new Three.MeshStandardMaterial({
           color: examplecolor,
           metalness: glossness === 1 ? params.metalness : params.metalness_glossy,
@@ -1031,11 +1026,11 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       }
       // mat2.envMap = textureCube;
 
-      if (normalMap !== "") {
+      if (normalMap !== '') {
         var t = loadTexture(normalMap);
         mat2.map = t;
       }
-      if (normalMap === "") {
+      if (normalMap === '') {
         mat3 = new Three.MeshStandardMaterial({
           // color: examplecolor,
           metalness: counterTop.metalness,
@@ -1057,13 +1052,13 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       });
       mat4.map = loadTexture(interiorMap);
       for (var j = 0; j < object.children.length; j++) {
-        if (object.children[j].name.includes("main")) {}
-        if (object.children[j].name.includes("countertop")) {
+        if (object.children[j].name.includes('main')) {}
+        if (object.children[j].name.includes('countertop')) {
           object.children[j].material = mat3;
           object.children[j].receiveShadow = true;
           object.children[j].castShadow = true;
           addEdgesToMesh(object.children[j]);
-        } else if (object.children[j].name.includes("_interior_")) {
+        } else if (object.children[j].name.includes('_interior_')) {
           object.children[j].material = mat4;
         } else if (object.children[j].type === OBJTYPE_MESH) {
           object.children[j].material = mat2;
@@ -1073,7 +1068,7 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       }
     }
   }, function (reason) {
-    console.log("loadGLTF failed for reason:", reason);
+    console.log('loadGLTF failed for reason:', reason);
     objGroup = GeomUtils.emptyBoxHolder(newWidth, newHeight, newDepth);
   }).then(function () {
     return _loadGLTFs(0);
@@ -1087,18 +1082,18 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
   var applianceMaterial = element.applianceMaterial;
   if (applianceMaterial.metalness == undefined) applianceMaterial = applianceMaterial.toJS();
   var onLoadItem = function onLoadItem(object) {
-    var newAltitude = element.properties.get("altitude").get("_length");
-    var newUnit = element.properties.get("altitude").get("_unit") || "in";
+    var newAltitude = element.properties.get('altitude').get('_length');
+    var newUnit = element.properties.get('altitude').get('_unit') || 'in';
     newAltitude = convert(newAltitude).from(newUnit).to(scene.unit);
-    var newWidth = element.properties.get("width").get("_length");
-    var newWidthUnit = element.properties.get("width").get("_unit") || "in";
-    newWidth = convert(newWidth).from(newWidthUnit).to("in");
-    var newHeight = element.properties.get("height").get("_length");
-    var newHeightUnit = element.properties.get("height").get("_unit") || "in";
-    newHeight = convert(newHeight).from(newHeightUnit).to("in");
-    var newDepth = element.properties.get("depth").get("_length");
-    var newDepthUnit = element.properties.get("depth").get("_unit") || "in";
-    newDepth = convert(newDepth).from(newDepthUnit).to("in");
+    var newWidth = element.properties.get('width').get('_length');
+    var newWidthUnit = element.properties.get('width').get('_unit') || 'in';
+    newWidth = convert(newWidth).from(newWidthUnit).to('in');
+    var newHeight = element.properties.get('height').get('_length');
+    var newHeightUnit = element.properties.get('height').get('_unit') || 'in';
+    newHeight = convert(newHeight).from(newHeightUnit).to('in');
+    var newDepth = element.properties.get('depth').get('_length');
+    var newDepthUnit = element.properties.get('depth').get('_unit') || 'in';
+    newDepth = convert(newDepth).from(newDepthUnit).to('in');
     object.scale.set(100 * newWidth / sizeinfo.width, 100 * newHeight / sizeinfo.height, 100 * newDepth / sizeinfo.depth);
     // Normalize the origin of the object
     var boundingBox = new Three.Box3().setFromObject(object);
@@ -1113,16 +1108,16 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
         var name = obj.name;
         var texture,
           textureLoader = new Three.TextureLoader();
-        if (name.includes("_black")) {
+        if (name.includes('_black')) {
           obj.material.roughness = 0.4;
           obj.material.metalness = 1.0;
           obj.material.color = new Three.Color(0, 0, 0);
           obj.castShadow = true;
           obj.receiveShadow = true;
           return object;
-        } else if (name.includes("_wood")) {
-          texture = loadTexture("/assets/img/texture/wood.jpg");
-        } else if (name.includes("_glass")) {
+        } else if (name.includes('_wood')) {
+          texture = loadTexture('/assets/img/texture/wood.jpg');
+        } else if (name.includes('_glass')) {
           // texture = loadTexture('/assets/img/texture/glass.jpg');
           var material = new Three.MeshPhysicalMaterial({
             transparent: true,
@@ -1137,7 +1132,7 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
           obj.castShadow = true;
           obj.receiveShadow = true;
           return object;
-        } else if (name.includes("_steel")) {
+        } else if (name.includes('_steel')) {
           // texture = loadTexture('/assets/img/texture/steel.jpg');
           var _material2 = new Three.MeshPhysicalMaterial({
             roughness: 0.2,
@@ -1187,16 +1182,16 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
       // vertical line - 4 lines around object//////////////////////////
       var vLineGeom = new Three.BufferGeometry();
       var vertices = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z + 1.3];
-      vLineGeom.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices), 3));
+      vLineGeom.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices), 3));
       var vLineGeom1 = new Three.BufferGeometry();
       var vertices1 = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z - 1.3];
-      vLineGeom1.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices1), 3));
+      vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices1), 3));
       var vLineGeom2 = new Three.BufferGeometry();
       var vertices2 = [max.x, 0, max.z - (max.z - min.z) / 2, max.x + 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom1.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices2), 3));
+      vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices2), 3));
       var vLineGeom3 = new Three.BufferGeometry();
       var vertices3 = [min.x, 0, max.z - (max.z - min.z) / 2, min.x - 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom1.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices3), 3));
+      vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices3), 3));
       // ///////////////////////////////////////
 
       // set names of transform object
@@ -1209,12 +1204,12 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
         color: 0xffffff,
         colorWrite: true
       }));
-      rotFillObj.name = "rotate";
+      rotFillObj.name = 'rotate';
       var upObj = new Three.Mesh(upwardsGeom, new Three.MeshBasicMaterial({
         color: 0xffffff,
         side: Three.DoubleSide
       }));
-      upObj.name = "transUp";
+      upObj.name = 'transUp';
       var mBox = new Three.Mesh(moveBox, new Three.MeshBasicMaterial({
         color: new Three.Color(0xdd6699).convertLinearToSRGB(),
         side: Three.DoubleSide,
@@ -1254,7 +1249,7 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
       vLine3.translateY(0.1);
       upObj.translateOnAxis(uVec, 1);
       upObj.translateY(max.y - min.y + 0.05);
-      mBox.name = "TransformBox";
+      mBox.name = 'TransformBox';
       mBox.translateOnAxis(new Three.Vector3(uVec.x, uVec.y + (max.y - min.y) / 2, uVec.z), 1);
       mBox.scale.set(1.01, 1.01, 1.01);
 
@@ -1282,7 +1277,7 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
       asrtObj.add(mBox);
       asrtObj.scale.set(1 / object.scale.x, object.scale.y, 1 / object.scale.z);
       // asrtObj.translateY(newAltitude / scalevec.y);
-      asrtObj.name = "TransformGizmo";
+      asrtObj.name = 'TransformGizmo';
       // add assets Objects Group
       object.add(asrtObj);
 
@@ -1312,7 +1307,7 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
       cachedObject[element.type] = objGroup.clone(); //register to cachedObject
       return onLoadItem(cachedObject[element.type].clone());
     }
-    if (keys[i] === "base") {
+    if (keys[i] === 'base') {
       // if base Objects
       i++;
       return _loadGLTFs2(i);
@@ -1321,13 +1316,13 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
 
   // load base to start //
   // return loadGLTF(dirName + structure["base"])
-  return loadGLTF(structure["base"]).then(function (object) {
+  return loadGLTF(structure['base']).then(function (object) {
     // let textureURL = `${API_SERVER_URL}/uploads/assets/default/steel.jpg`;
     // let texture = loadTexture(textureURL);
     // texture.wrapS = Three.MirroredRepeatWrapping;
     // texture.wrapT = Three.MirroredRepeatWrapping;
 
-    object.name = "MainObject";
+    object.name = 'MainObject';
     // NOTE: changed appliance emissive color to black
     var mat2 = new Three.MeshStandardMaterial({
       emissive: new Three.Color(0x0d0d0d).convertLinearToSRGB(),
@@ -1345,7 +1340,7 @@ export function render3DApplianceItem(element, layer, scene, sizeinfo, structure
     }
     objGroup = object;
   }, function (reason) {
-    console.log("loadGLTF failed for reason:", reason);
+    console.log('loadGLTF failed for reason:', reason);
     objGroup = GeomUtils.emptyBoxHolder(newWidth, newHeight, newDepth);
   }).then(function () {
     return _loadGLTFs2(0);
@@ -1358,21 +1353,21 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
   var onLoadItem = function onLoadItem(object) {
     var width = {
       length: sizeinfo.width,
-      unit: "in"
+      unit: 'in'
     };
     var depth = {
       length: sizeinfo.depth,
-      unit: "in"
+      unit: 'in'
     };
     var height = {
       length: sizeinfo.height,
-      unit: "in"
+      unit: 'in'
     };
-    var newWidth = convert(width.length).from(width.unit).to("cm");
-    var newDepth = convert(depth.length).from(depth.unit).to("cm");
-    var newHeight = convert(height.length).from(height.unit).to("cm");
-    var newAltitude = element.properties.get("altitude").get("_length");
-    var newUnit = element.properties.get("altitude").get("_unit") || "in";
+    var newWidth = convert(width.length).from(width.unit).to('cm');
+    var newDepth = convert(depth.length).from(depth.unit).to('cm');
+    var newHeight = convert(height.length).from(height.unit).to('cm');
+    var newAltitude = element.properties.get('altitude').get('_length');
+    var newUnit = element.properties.get('altitude').get('_unit') || 'in';
     newAltitude = convert(newAltitude).from(newUnit).to(scene.unit);
 
     //object.scale.set(newWidth, newHeight, newDepth);
@@ -1419,16 +1414,16 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
       // vertical line - 4 lines around object//////////////////////////
       var vLineGeom = new Three.BufferGeometry();
       var vertices = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z + 1.3];
-      vLineGeom.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices), 3));
+      vLineGeom.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices), 3));
       var vLineGeom1 = new Three.BufferGeometry();
       var vertices1 = [(max.x - min.x) / 2 + min.x, 0, min.z, (max.x - min.x) / 2 + min.x, 0, min.z - 1.3];
-      vLineGeom1.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices1), 3));
+      vLineGeom1.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices1), 3));
       var vLineGeom2 = new Three.BufferGeometry();
       var vertices2 = [min.x, 0, max.z - (max.z - min.z) / 2, min.x + 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom2.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices2), 3));
+      vLineGeom2.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices2), 3));
       var vLineGeom3 = new Three.BufferGeometry();
       var vertices3 = [min.x, 0, max.z - (max.z - min.z) / 2, min.x - 1.3, 0, max.z - (max.z - min.z) / 2];
-      vLineGeom3.setAttribute("position", new Three.BufferAttribute(new Float32Array(vertices3), 3));
+      vLineGeom3.setAttribute('position', new Three.BufferAttribute(new Float32Array(vertices3), 3));
       // ///////////////////////////////////////
 
       // set names of transform object
@@ -1441,12 +1436,12 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
         color: 0xffffff,
         colorWrite: true
       }));
-      rotFillObj.name = "rotate";
+      rotFillObj.name = 'rotate';
       var upObj = new Three.Mesh(upwardsGeom, new Three.MeshBasicMaterial({
         color: 0xffffff,
         side: Three.DoubleSide
       }));
-      upObj.name = "transUp";
+      upObj.name = 'transUp';
       var mBox = new Three.Mesh(moveBox, new Three.MeshBasicMaterial({
         color: 0xdd6699,
         side: Three.DoubleSide,
@@ -1488,7 +1483,7 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
       //rotObj.translateOnAxis(uVec, 1);
       upObj.translateOnAxis(uVec, 1);
       upObj.translateY(max.y - min.y);
-      mBox.name = "TransformBox";
+      mBox.name = 'TransformBox';
       mBox.translateOnAxis(new Three.Vector3(uVec.x, uVec.y + (max.y - min.y) / 2, uVec.z), 1);
       mBox.scale.set(1.01, 1.01, 1.01);
 
@@ -1517,7 +1512,7 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
       asrtObj.add(mBox);
       asrtObj.scale.set(1, 1, 1);
       //asrtObj.translateY(newAltitude / scalevec.y);
-      asrtObj.name = "TransformGizmo";
+      asrtObj.name = 'TransformGizmo';
       // add assets Objects Group
       object.add(asrtObj);
 
@@ -1550,7 +1545,7 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
       cachedObject[element.type] = objGroup.clone(); //register to cachedObject
       return onLoadItem(cachedObject[element.type].clone());
     }
-    if (keys[i] === "base") {
+    if (keys[i] === 'base') {
       // if base Objects
       i++;
       return _loadGLTFs3(i);
@@ -1559,13 +1554,13 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
 
   // load base to start //
   // return loadGLTF(dirName + structure["base"])
-  return loadGLTF(structure["base"]).then(function (object) {
+  return loadGLTF(structure['base']).then(function (object) {
     // let textureURL = `${API_SERVER_URL}/uploads/assets/default/steel.jpg`;
     // let texture = loadTexture(textureURL);
     // texture.wrapS = Three.MirroredRepeatWrapping;
     // texture.wrapT = Three.MirroredRepeatWrapping;
 
-    object.name = "MainObject";
+    object.name = 'MainObject';
     var mat2 = new Three.MeshStandardMaterial({
       emissive: new Three.Color(0x666666).convertLinearToSRGB(),
       metalness: 0.7,
@@ -1581,7 +1576,7 @@ export function render3DLightingItem(element, layer, scene, sizeinfo, structure_
     }
     objGroup = object;
   }, function (reason) {
-    console.log("loadGLTF failed for reason:", reason);
+    console.log('loadGLTF failed for reason:', reason);
     objGroup = GeomUtils.emptyBoxHolder(newWidth, newHeight, newDepth);
   }).then(function () {
     return _loadGLTFs3(0);