kitchen-simulator 2.0.0 → 2.0.1-test.1

package/es/catalog/factories/wall-factory-3d.js

@@ -0,0 +1,202 @@
+import * as Three from 'three';
+import { BoxGeometry, Group, Mesh, MeshBasicMaterial, MeshStandardMaterial, RepeatWrapping, TextureLoader, Vector2 } from 'three';
+import { verticesDistance } from "../../utils/geometry";
+import { isElevationView } from "../../utils/helper";
+import * as SharedStyle from "../../shared-style";
+import { LINE_THICKNESS, UNIT_CENTIMETER } from "../../constants";
+import { convert } from "../../utils/convert-units-lite";
+import ThreeBSP from "../../utils/threeCSG.es6";
+var params = {
+  envMap: 'HDR',
+  roughness: 0.1,
+  metalness: 0.1,
+  exposure: 0.1
+  // debug: false
+};
+var halfPI = Math.PI / 2;
+
+/**
+ * Apply a texture to a wall face
+ * @param material: The material of the face
+ * @param texture: The texture to load
+ * @param length: The lenght of the face
+ * @param height: The height of the face
+ */
+var applyTexture = function applyTexture(material, texture, length, height) {
+  var loader = new TextureLoader();
+  if (texture) {
+    material.map = loader.load(texture.uri);
+    material.map.colorSpace = Three.SRGBColorSpace, material.needsUpdate = true;
+    material.map.wrapS = RepeatWrapping;
+    material.map.wrapT = RepeatWrapping;
+    material.map.repeat.set(length * texture.lengthRepeatScale, height * texture.heightRepeatScale);
+    if (texture.normal) {
+      material.normalMap = loader.load(texture.normal.uri);
+      material.normalScale = new Vector2(texture.normal.normalScaleX, texture.normal.normalScaleY);
+      material.normalMap.wrapS = RepeatWrapping;
+      material.normalMap.wrapT = RepeatWrapping;
+      material.normalMap.repeat.set(length * texture.normal.lengthRepeatScale, height * texture.normal.heightRepeatScale);
+    }
+  }
+};
+export function buildWall(element, layer, scene, textures, mode) {
+  // Get the two vertices of the wall
+  var vetName0 = element.vertices.get(0);
+  var vetName1 = element.vertices.get(1);
+  // let invert = element.toJS().invert;
+
+  // As long as its two ending points is same. This is no longer a line.
+  if (vetName0 === vetName1) {
+    return Promise.resolve(null);
+  }
+  var wallColor;
+  layer.lines.forEach(function (data) {
+    wallColor = data.wallColor;
+  });
+  var vertex0 = layer.vertices.get(vetName0);
+  var vertex1 = layer.vertices.get(vetName1);
+
+  // Get height and thickness of the wall converting them into the current scene units
+  // let height = element.properties.getIn(['height', 'length']);
+  // let thickness = element.properties.getIn(['thickness', 'length']);
+  var height = convert(layer.ceilHeight).from(layer.unit).to(UNIT_CENTIMETER);
+  var thickness = 2.0;
+  var distance = verticesDistance(vertex0, vertex1);
+  var soulMaterial = new Three.MeshPhongMaterial({
+    color: new Three.Color(wallColor).convertLinearToSRGB()
+  }); //element.selected ? SharedStyle.MESH_SELECTED : 0xD3D3D3
+  var soulVertices = [];
+  soulVertices.push(new Three.Vector2(-distance / 2, height / 2));
+  soulVertices.push(new Three.Vector2(distance / 2, height / 2));
+  soulVertices.push(new Three.Vector2(distance / 2, -height / 2));
+  soulVertices.push(new Three.Vector2(-distance / 2, -height / 2));
+  var soulShape = new Three.Shape(soulVertices);
+  var soulMesh = new Mesh(new BoxGeometry(distance, height, thickness), soulMaterial);
+  if (element.userData.stateMode !== 'MODE_DRAWING_HOLE_3D') {
+    element.holes.forEach(function (holeID) {
+      var holeData = layer.holes.get(holeID);
+      if (holeData !== undefined) {
+        var holeWidth = holeData.properties.getIn(['width', 'length']);
+        var holeHeight = holeData.properties.getIn(['height', 'length']);
+        var holeAltitude = holeData.properties.getIn(['altitude', 'length']);
+        var offset = holeData.offset;
+        // if (vertex0.x > vertex1.x) offset = 1 - offset;
+        // if (invert) offset = 1 - offset;
+        var holeDistance = offset * distance;
+        var holeVertices = [];
+        holeVertices.push(new Three.Vector2(0, holeHeight));
+        holeVertices.push(new Three.Vector2(holeWidth, holeHeight));
+        holeVertices.push(new Three.Vector2(holeWidth, 0));
+        holeVertices.push(new Three.Vector2(0, 0));
+        for (var i = 0; i < holeVertices.length; i++) {
+          holeVertices[i].x += holeDistance - distance / 2 - holeWidth / 2;
+          holeVertices[i].y -= height / 2 - holeAltitude;
+        }
+        var shapeHole = new Three.Shape(holeVertices);
+        soulShape.holes.push(shapeHole);
+        var holeGeometry = new BoxGeometry(holeWidth, holeHeight, thickness);
+        var holeMesh = new Mesh(holeGeometry);
+        holeMesh.position.x += holeWidth / 2;
+        holeMesh.position.y += holeHeight / 2;
+        holeMesh.position.x += holeDistance - distance / 2 - holeWidth / 2;
+        holeMesh.position.y -= height / 2 - holeAltitude;
+        var wallBSP = new ThreeBSP(soulMesh);
+        var holeBSP = new ThreeBSP(holeMesh);
+        var wallWithHoleBSP = wallBSP.subtract(holeBSP);
+        soulMesh = wallWithHoleBSP.toMesh(soulMaterial);
+      }
+    });
+  }
+  var cAlpha = new Three.Vector2(vertex0.x - vertex1.x, vertex0.y - vertex1.y).angle();
+  var soulGeometry = new Three.ShapeGeometry(soulShape);
+  var soul = new Mesh(soulGeometry, soulMaterial);
+  soul.receiveShadow = true;
+  soul.castShadow = true;
+  soul.position.y += height / 2;
+  soul.rotation.y = cAlpha + Math.PI;
+  soul.name = 'soulFace';
+  soulMesh.position.y += height / 2;
+  soulMesh.rotation.y = cAlpha + Math.PI;
+  soulMesh.name = 'soul';
+  soulMesh.castShadow = true;
+  var frontMaterial = new MeshStandardMaterial({
+    color: new Three.Color(wallColor).convertLinearToSRGB(),
+    metalness: 0.1,
+    roughness: 0.9
+    // envMap: textureCube,
+  });
+  var backMaterial = new MeshStandardMaterial({
+    color: new Three.Color(wallColor).convertLinearToSRGB(),
+    metalness: 0.1,
+    roughness: 0.9
+    // envMap: textureCube,
+  });
+  applyTexture(frontMaterial, textures[element.properties.get('textureB')], distance, height);
+  applyTexture(backMaterial, textures[element.properties.get('textureB')], distance, height);
+  var frontFace = soul.clone();
+  frontFace.material = frontMaterial;
+  frontFace.name = 'frontFace';
+  soulMesh.material = frontMaterial;
+  var merged = new Group();
+  merged.add(frontFace, soulMesh);
+
+  // if this wall is front of camera, show/hide
+  if (!isElevationView(mode)) {
+    frontFace.onBeforeRender = function (renderer, scene, camera, geometry, material, group) {
+      var soulMesh = this.parent.getObjectByName('soul');
+      if (geometry.attributes.normal === undefined) return soulMesh.visible = false;
+      geometry.computeVertexNormals();
+      var normals = geometry.attributes.normal.array;
+      var pos = new Three.Vector4(0, 0, 0, 1);
+      pos = pos.applyMatrix4(this.matrixWorld);
+      pos = pos.applyMatrix4(camera.matrixWorldInverse);
+      var normal = new Three.Vector4(normals[0], normals[1], normals[2], 0);
+      normal = normal.applyMatrix4(this.matrixWorld);
+      normal = normal.applyMatrix4(camera.matrixWorldInverse);
+      if (soulMesh) {
+        if (pos.dot(normal) >= 0) soulMesh.visible = false;else soulMesh.visible = true;
+      }
+    };
+  }
+  return Promise.resolve(merged);
+}
+export function updatedWall(element, layer, scene, textures, mesh, oldElement, differences, selfDestroy, selfBuild) {
+  var noPerf = function noPerf() {
+    selfDestroy();
+    return selfBuild();
+  };
+  var soul = mesh.getObjectByName('soul');
+  var frontFace = mesh.getObjectByName('frontFace');
+  var backFace = mesh.getObjectByName('backFace');
+  if (differences[0] == 'selected') {
+    if (soul !== undefined) {
+      if (element.selected) {
+        soul.material = new MeshBasicMaterial({
+          color: new Three.Color(SharedStyle.MESH_SELECTED).convertLinearToSRGB()
+        });
+      } else {
+        var soulMaterial = frontFace ? frontFace.material : backFace.material;
+        soul.material = soulMaterial;
+      }
+    }
+  } else if (differences[0] == 'properties') {
+    if (differences[1] == 'thickness') {
+      var newThickness = LINE_THICKNESS / 2;
+      var oldThickness = LINE_THICKNESS / 2;
+      // let newThickness = element.getIn(['properties', 'thickness', 'length']);
+      // let oldThickness = oldElement.getIn(['properties', 'thickness', 'length']);
+      var halfNewThickness = newThickness / 2;
+      var texturedFaceDistance = halfNewThickness + 1;
+      var originalThickness = oldThickness / soul.scale.z;
+      var alpha = soul.rotation.y;
+      var xTemp = texturedFaceDistance * Math.cos(alpha - halfPI);
+      var zTemp = texturedFaceDistance * Math.sin(alpha - halfPI);
+      soul.scale.set(1, 1, newThickness / originalThickness);
+      frontFace.position.x = soul.position.x + xTemp;
+      frontFace.position.z = soul.position.z + zTemp;
+      backFace.position.x = soul.position.x - xTemp;
+      backFace.position.z = soul.position.z - zTemp;
+    } else return noPerf();
+  } else return noPerf();
+  return Promise.resolve(mesh);
+}

package/es/catalog/factories/wall-factory.js

@@ -0,0 +1,267 @@
+import React from 'react';
+import { buildWall, updatedWall } from "./wall-factory-3d";
+import * as SharedStyle from "../../shared-style";
+import * as Geometry from "../../utils/geometry";
+import Translator from "../../translator/translator";
+import { LINE_THICKNESS } from "../../constants"; // import Line from 'src/class/line';
+import Line from "../../class/line";
+var epsilon = 20;
+var STYLE_TEXT = {
+  textAnchor: 'middle'
+};
+var STYLE_LINE = {
+  stroke: SharedStyle.LINE_MESH_COLOR.unselected
+  // stroke: "red" ,
+
+  // strokeWidth:1
+};
+var STYLE_INTERIOR_LINE = {
+  strokeWidth: 2,
+  stroke: SharedStyle.INTERIOR_LINE.unselected
+};
+var STYLE_INTERIOR_LINE_SELECTED = {
+  strokeWidth: 4,
+  stroke: SharedStyle.INTERIOR_LINE.selected,
+  fill: SharedStyle.INTERIOR_LINE.selected,
+  rx: '2px'
+};
+var STYLE = {
+  fill: '#0096fd',
+  stroke: SharedStyle.COLORS.white,
+  cursor: 'move'
+};
+var STYLE_POLYGON = {
+  strokeWidth: 1,
+  strokeLinejoin: 'round',
+  stroke: SharedStyle.LINE_MESH_COLOR.unselected,
+  rx: '2px',
+  fill: SharedStyle.LINE_MESH_COLOR.unselected
+};
+var STYLE_POLYGON_SELECTED = {
+  strokeWidth: 1,
+  strokeLinejoin: 'round',
+  rx: '2px',
+  stroke: SharedStyle.LINE_MESH_COLOR.selected,
+  fill: SharedStyle.LINE_MESH_COLOR.selected
+};
+var translator = new Translator();
+
+/** Create Lines from State */
+var createLineGeometry = function createLineGeometry(scene, state) {
+  var wall_thickness = LINE_THICKNESS / 2;
+  var layerID = scene.selectedLayer;
+  var layer = scene.getIn(['layers', layerID]);
+  var lines = layer.lines;
+  lines.toArray().forEach(function (line) {
+    var vertex0Id = line.vertices.get(0);
+    var vertex1Id = line.vertices.get(1);
+    var _layer$vertices$get = layer.vertices.get(vertex0Id),
+      x0 = _layer$vertices$get.x,
+      y0 = _layer$vertices$get.y;
+    var _layer$vertices$get2 = layer.vertices.get(vertex1Id),
+      x1 = _layer$vertices$get2.x,
+      y1 = _layer$vertices$get2.y;
+    if (x0 == x1 && y0 == y1) return;
+    var allLines = layer.lines.toArray();
+    var relatedLineArray = [];
+    var relatedLine0 = allLines.filter(function (allLine) {
+      return allLine.vertices.toArray().includes(vertex0Id) && line.id != allLine.id;
+    })[0];
+    var relatedLine1 = allLines.filter(function (allLine) {
+      return allLine.vertices.toArray().includes(vertex1Id) && line.id != allLine.id;
+    })[0];
+    var normalVertice = Geometry.getNormaline(x0, y0, x1, y1);
+    var rx0 = x0 + normalVertice.x * wall_thickness;
+    var ry0 = y0 + normalVertice.y * wall_thickness;
+    var rx1 = x1 + normalVertice.x * wall_thickness;
+    var ry1 = y1 + normalVertice.y * wall_thickness;
+    var intersection = [];
+    relatedLine0 ? relatedLineArray.push({
+      index: 0,
+      line: relatedLine0
+    }) : intersection.push({
+      index: 0,
+      point: {
+        x: rx0,
+        y: ry0
+      }
+    });
+    relatedLine1 ? relatedLineArray.push({
+      index: 1,
+      line: relatedLine1
+    }) : intersection.push({
+      index: 1,
+      point: {
+        x: rx1,
+        y: ry1
+      }
+    });
+    var originalLineFunction = Geometry.linePassingThroughTwoPoints(x0, y0, x1, y1);
+    originalLineFunction.c -= Math.sqrt(originalLineFunction.b * originalLineFunction.b + originalLineFunction.a * originalLineFunction.a) * wall_thickness;
+    relatedLineArray.forEach(function (lineInfo) {
+      var vertexId, originx, originy;
+      var index = lineInfo.index,
+        relatedLine = lineInfo.line;
+      index == 0 ? (vertexId = vertex0Id, originx = x0, originy = y0) : (vertexId = vertex1Id, originx = x1, originy = y1);
+      var relatedVertices = relatedLine.vertices.toArray();
+      var relatedOtherVertexID = relatedVertices[0] == vertexId ? relatedVertices[1] : relatedVertices[0];
+      var relatedVertex = layer.getIn(['vertices', relatedOtherVertexID]);
+      if (originx == relatedVertex.x && originy == relatedVertex.y) return;
+      var relatedLineFunction = Geometry.linePassingThroughTwoPoints(originx, originy, relatedVertex.x, relatedVertex.y);
+      var delta = Geometry.distancePointFromLine(relatedLineFunction.a, relatedLineFunction.b, relatedLineFunction.c, index == 0 ? x1 : x0, index == 0 ? y1 : y0);
+      // console.log(relatedLineFunction,"relatedLinefunction")
+      if (delta < 0.01) {
+        // if the directions of the current line and related line, then no need to calculate the inteersection point
+        // let rx = originx + normalVertice.x * wall_thickness;
+        // let ry = originy + normalVertice.y * wall_thickness;
+        var rx = originx + normalVertice.x * wall_thickness;
+        var ry = originy + normalVertice.y * wall_thickness;
+        intersection.push({
+          index: index,
+          point: {
+            x: rx,
+            y: ry
+          }
+        });
+      } else {
+        relatedLineFunction.c -= (relatedVertices[0] == vertexId ? 1 : -1) * Math.sqrt(relatedLineFunction.b * relatedLineFunction.b + relatedLineFunction.a * relatedLineFunction.a) * wall_thickness;
+        var point = Geometry.twoLinesIntersection(originalLineFunction.a, originalLineFunction.b, originalLineFunction.c, relatedLineFunction.a, relatedLineFunction.b, relatedLineFunction.c);
+        point && intersection.push({
+          index: index,
+          point: point
+        });
+      }
+    });
+    state = Line.setRelatedLine(state, layer.id, line.id, intersection).updatedState;
+  });
+  return {
+    updatedState: state
+  };
+};
+export default function WallFactory(name, info, textures) {
+  var wallElement = {
+    name: name,
+    prototype: 'lines',
+    info: info,
+    height: {
+      label: translator.t('height'),
+      type: 'length-measure',
+      defaultValue: {
+        length: 243.84
+      }
+    },
+    thickness: {
+      label: translator.t('thickness'),
+      type: 'length-measure',
+      defaultValue: {
+        length: LINE_THICKNESS / 2
+      }
+    },
+    properties: {},
+    render2D: function render2D(element, layer, scene, state) {
+      state = createLineGeometry(scene, state).updatedState;
+      scene = state.getIn(['scene']);
+      layer = scene.getIn(['layers', scene.selectedLayer]);
+      element = layer.getIn(['lines', element['id']]);
+      // let element = layer.lines[telement.id];
+      var _layer$vertices$get3 = layer.vertices.get(element.vertices.get(0)),
+        x1 = _layer$vertices$get3.x,
+        y1 = _layer$vertices$get3.y;
+      var _layer$vertices$get4 = layer.vertices.get(element.vertices.get(1)),
+        x2 = _layer$vertices$get4.x,
+        y2 = _layer$vertices$get4.y;
+      var layertemp = state.sceneHistory.getIn(['last', 'layers', 'layer-1']);
+      var verticesinfo = layer.vertices.get(element.vertices.get(0));
+      var length = Geometry.pointsDistance(x1, y1, x2, y2);
+      var length_5 = length / 5;
+      var thickness = LINE_THICKNESS;
+      // let thickness = element.getIn(['properties', 'thickness', 'length']);
+      var half_thickness = thickness / 2;
+      var half_thickness_eps = half_thickness + epsilon;
+      var char_height = 11;
+      var extra_epsilon = 5;
+      var textDistance = half_thickness + epsilon + extra_epsilon;
+      var related0x = x1,
+        related0y = y1,
+        related1x = x2,
+        related1y = y2;
+      element.relatedVertices.forEach(function (relatedVertice, index) {
+        if (relatedVertice.index == undefined) relatedVertice = relatedVertice.toJSON();
+        if (relatedVertice.index == 0) {
+          related0x = relatedVertice.point.x;
+          related0y = relatedVertice.point.y;
+        } else {
+          related1x = relatedVertice.point.x;
+          related1y = relatedVertice.point.y;
+        }
+      });
+
+      //Fill a polygon with the pattern specified by the polygon's id.(For example:fill='url(#pat) =><pattern id="pat">)
+      var outwall = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("pattern", {
+        id: "pat",
+        x: "0",
+        y: "0",
+        width: "5",
+        height: "5",
+        patternUnits: "userSpaceOnUse"
+      }, /*#__PURE__*/React.createElement("line", {
+        x1: "0",
+        y1: "0",
+        x2: "3",
+        y2: "3",
+        style: STYLE_LINE
+      })));
+      return !element.selected ? /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("polygon", {
+        points: "".concat(x1, ",").concat(y1, " ").concat(related0x, ",").concat(related0y, " ").concat(related1x, ",").concat(related1y, " ").concat(x2, ",").concat(y2),
+        fill: "#CFD8DC"
+        // fillRule="evenodd"
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        style: STYLE_INTERIOR_LINE
+      })) : /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("polygon", {
+        points: "".concat(x1, ",").concat(y1, " ").concat(related0x, ",").concat(related0y, " ").concat(related1x, ",").concat(related1y, " ").concat(x2, ",").concat(y2),
+        fill: "#CFD8DC"
+        // fillRule="evenodd"
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        style: STYLE_INTERIOR_LINE_SELECTED
+      }));
+    },
+    render3D: function render3D(element, layer, scene, mode) {
+      return buildWall(element, layer, scene, textures, mode);
+    },
+    updateRender3D: function updateRender3D(element, layer, scene, mesh, oldElement, differences, selfDestroy, selfBuild) {
+      return updatedWall(element, layer, scene, textures, mesh, oldElement, differences, selfDestroy, selfBuild);
+    }
+  };
+  if (textures && textures !== {}) {
+    var textureValues = {
+      none: 'None'
+    };
+    for (var textureName in textures) {
+      textureValues[textureName] = textures[textureName].name;
+    }
+
+    /*    wallElement.properties.textureA = {
+      label:'Fronts ' + translator.t('texture'),
+      type: 'enum',
+      defaultValue: textureValues.bricks ? 'bricks' : 'none',
+      values: textureValues
+    };
+    */
+    wallElement.properties.textureB = {
+      //label:'Back ' + translator.t('texture'),
+      label: 'Walls',
+      type: 'enum',
+      defaultValue: textureValues.bricks ? 'bricks' : 'none',
+      values: textureValues
+    };
+  }
+  return wallElement;
+}

package/es/catalog/holes/door-closet/planner-element.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import * as Three from 'three';
+import { loadGLTF } from "../../utils/load-obj";
+import { OBJTYPE_MESH } from "../../../constants";
+var cached3DDoor = null;
+var STYLE_HOLE_BASE = {
+  stroke: 'rgb(73, 73, 73)',
+  strokeWidth: '1px',
+  strokeDasharray: '9,5',
+  fill: 'rgb(73, 73, 73)'
+};
+var STYLE_HOLE_SELECTED = {
+  stroke: '#0096fd',
+  strokeWidth: '1px',
+  strokeDasharray: '9,5',
+  fill: '#0096fd',
+  cursor: 'move'
+};
+var STYLE_ARC_BASE = {
+  stroke: 'rgb(73, 73, 73)',
+  strokeWidth: '1px',
+  strokeDasharray: '9,5',
+  fill: 'none'
+};
+var STYLE_ARC_SELECTED = {
+  stroke: '#0096fd',
+  strokeWidth: '1px',
+  strokeDasharray: '9,5',
+  fill: 'none',
+  cursor: 'move'
+};
+var STYLE_STR0 = {
+  fill: 'rgb(185, 185, 185)',
+  stroke: '#494949',
+  strokeWidth: '1',
+  strokeMiterlimit: '2.61313'
+};
+var STYLE_STR0_S = {
+  fill: 'rgb(185, 185, 185)',
+  stroke: '#0096fd',
+  strokeWidth: '1',
+  strokeMiterlimit: '2.61313'
+};
+var STYLE_STR1 = {
+  fill: 'none',
+  stroke: '#494949',
+  strokeWidth: '1',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+  strokeMiterlimit: '2.61313',
+  strokeDasharray: '23.860041 11.930021'
+};
+var STYLE_FILL2 = {
+  fill: '#1183B7'
+};
+var STYLE_FNT0 = {
+  fill: 'white',
+  fontWeight: 'normal',
+  fontSize: '13px',
+  fontFamily: 'Proxima Nova Rg'
+};
+var EPSILON = 3;
+export default {
+  name: 'Closet',
+  prototype: 'holes',
+  info: {
+    title: 'Closet',
+    tag: ['door'],
+    description: 'Closet door(Wooden)',
+    image: '/assets/img/svg/door/Closet.svg',
+    url: '/assets/gltf/door_closet.gltf'
+  },
+  properties: {
+    width: {
+      label: 'Width',
+      type: 'length-measure',
+      defaultValue: {
+        length: 91.44
+      }
+    },
+    height: {
+      label: 'Height',
+      type: 'length-measure',
+      defaultValue: {
+        length: 215
+      },
+      length: 215
+    },
+    altitude: {
+      label: 'Altitude',
+      type: 'length-measure',
+      defaultValue: {
+        length: 0
+      }
+    },
+    thickness: {
+      label: 'Thickness',
+      type: 'length-measure',
+      defaultValue: {
+        length: 6
+      }
+    },
+    flip_orizzontal: {
+      label: 'Flip Door',
+      type: 'checkbox',
+      defaultValue: false,
+      values: {
+        none: false,
+        yes: true
+      }
+    }
+  },
+  render2D: function render2D(element, layer, scene) {
+    var flip = element.properties.get('flip_orizzontal');
+    var lineWidth = 6;
+    var holeWidth = element.properties.get('width').get('length');
+    var holePath = "M".concat(0, " ", -EPSILON, "  L").concat(holeWidth, " ").concat(-EPSILON, "  L").concat(holeWidth, " ").concat(EPSILON, "  L", 0, " ").concat(EPSILON, "  z");
+    var arcPath = "M".concat(0, ",", 0, "  A", holeWidth, ",").concat(holeWidth, " 0 0,1 ").concat(holeWidth, ",").concat(holeWidth);
+    var holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE;
+    var arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE;
+    var rectStyle = element.selected ? STYLE_STR0_S : STYLE_STR0;
+    var length = element.properties.get('width').get('length');
+    if (flip == false) {
+      return /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(-length / 2, ", 0)")
+      }, /*#__PURE__*/React.createElement("path", {
+        d: arcPath,
+        style: arcStyle,
+        transform: "translate(".concat(0, ",", holeWidth, ") scale(", 1, ",").concat(-1, ") rotate(", 0, ")")
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: holeWidth - EPSILON,
+        x2: 0,
+        y2: 0 - EPSILON,
+        style: holeStyle,
+        transform: "scale(".concat(-1, ",", 1, ")")
+      }), /*#__PURE__*/React.createElement("rect", {
+        style: rectStyle,
+        x: "0",
+        y: -lineWidth / 2,
+        width: holeWidth,
+        height: lineWidth
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(-length / 2, ", 0)")
+      }, /*#__PURE__*/React.createElement("path", {
+        d: arcPath,
+        style: arcStyle,
+        transform: "translate(".concat(0, ",", -holeWidth, ") scale(", 1, ",", 1, ") rotate(", 0, ")")
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: -holeWidth - EPSILON,
+        x2: 0,
+        y2: 0 - EPSILON,
+        style: holeStyle,
+        transform: "scale(".concat(1, ",", 1, ")")
+      }), /*#__PURE__*/React.createElement("rect", {
+        style: rectStyle,
+        x: "0",
+        y: -lineWidth / 2,
+        width: holeWidth,
+        height: lineWidth
+      }));
+    }
+  },
+  render3D: function render3D(element, layer, scene) {
+    var onLoadItem = function onLoadItem(object) {
+      var boundingBox = new Three.Box3().setFromObject(object);
+      var initialWidth = boundingBox.max.x - boundingBox.min.x;
+      var initialHeight = boundingBox.max.y - boundingBox.min.y;
+      var initialThickness = boundingBox.max.z - boundingBox.min.z;
+      if (element.selected) {
+        var box = new Three.BoxHelper(object, 0x99c3fb);
+        box.material.linewidth = 2;
+        box.material.depthTest = false;
+        box.renderOrder = 1000;
+        object.add(box);
+      }
+      var params = {
+        envMap: 'HDR',
+        roughness: 0.9,
+        metalness: 0.1,
+        exposure: 1.0
+      };
+      var examplecolor = new Three.Color(0xffffff);
+      var mat2 = new Three.MeshStandardMaterial({
+        color: examplecolor,
+        metalness: params.metalness,
+        roughness: params.roughness
+      });
+      // let normalMap = require('./texture.png');
+      // let t = new Three.TextureLoader().load(normalMap);
+      // let mat2 = new Three.MeshStandardMaterial({
+      //   metalness: params.metalness,
+      //   roughness: params.roughness
+      // });
+      // mat2.map = t;
+      // mat2.envMap = textureCube;
+      for (var j = 0; j < object.children.length; j++) {
+        if (object.children[j].type === OBJTYPE_MESH) {
+          object.children[j].material = mat2;
+          object.children[j].receiveShadow = true;
+        }
+      }
+      var width = element.properties.get('width').get('length');
+      var height = element.properties.get('height').get('length');
+      var thickness = element.properties.get('thickness').get('length');
+      // console.log(width, height, thickness)
+
+      object.scale.set(width / initialWidth, height / initialHeight, thickness / initialThickness);
+      return object;
+    };
+    if (cached3DDoor) {
+      return Promise.resolve(onLoadItem(cached3DDoor.clone()));
+    }
+    return loadGLTF(element.url).then(function (object) {
+      cached3DDoor = object;
+      return onLoadItem(cached3DDoor.clone());
+    });
+  }
+};