kitchen-simulator 2.0.0 → 2.0.1-test.1

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

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.buildWall = buildWall;
+exports.updatedWall = updatedWall;
+var _three = _interopRequireWildcard(require("three"));
+var Three = _three;
+var _geometry = require("../../utils/geometry");
+var _helper = require("../../utils/helper");
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _threeCSG = _interopRequireDefault(require("../../utils/threeCSG.es6"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 _three.TextureLoader();
+  if (texture) {
+    material.map = loader.load(texture.uri);
+    material.map.colorSpace = Three.SRGBColorSpace, material.needsUpdate = true;
+    material.map.wrapS = _three.RepeatWrapping;
+    material.map.wrapT = _three.RepeatWrapping;
+    material.map.repeat.set(length * texture.lengthRepeatScale, height * texture.heightRepeatScale);
+    if (texture.normal) {
+      material.normalMap = loader.load(texture.normal.uri);
+      material.normalScale = new _three.Vector2(texture.normal.normalScaleX, texture.normal.normalScaleY);
+      material.normalMap.wrapS = _three.RepeatWrapping;
+      material.normalMap.wrapT = _three.RepeatWrapping;
+      material.normalMap.repeat.set(length * texture.normal.lengthRepeatScale, height * texture.normal.heightRepeatScale);
+    }
+  }
+};
+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 = (0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
+  var thickness = 2.0;
+  var distance = (0, _geometry.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 _three.Mesh(new _three.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 _three.BoxGeometry(holeWidth, holeHeight, thickness);
+        var holeMesh = new _three.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 _threeCSG["default"](soulMesh);
+        var holeBSP = new _threeCSG["default"](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 _three.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 _three.MeshStandardMaterial({
+    color: new Three.Color(wallColor).convertLinearToSRGB(),
+    metalness: 0.1,
+    roughness: 0.9
+    // envMap: textureCube,
+  });
+  var backMaterial = new _three.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 _three.Group();
+  merged.add(frontFace, soulMesh);
+
+  // if this wall is front of camera, show/hide
+  if (!(0, _helper.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);
+}
+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 _three.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 = _constants.LINE_THICKNESS / 2;
+      var oldThickness = _constants.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/lib/catalog/factories/wall-factory.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = WallFactory;
+var _react = _interopRequireDefault(require("react"));
+var _wallFactory3d = require("./wall-factory-3d");
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+var Geometry = _interopRequireWildcard(require("../../utils/geometry"));
+var _translator = _interopRequireDefault(require("../../translator/translator"));
+var _constants = require("../../constants");
+var _line = _interopRequireDefault(require("../../class/line"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// import Line from 'src/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["default"]();
+
+/** Create Lines from State */
+var createLineGeometry = function createLineGeometry(scene, state) {
+  var wall_thickness = _constants.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["default"].setRelatedLine(state, layer.id, line.id, intersection).updatedState;
+  });
+  return {
+    updatedState: state
+  };
+};
+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: _constants.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 = _constants.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["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("pattern", {
+        id: "pat",
+        x: "0",
+        y: "0",
+        width: "5",
+        height: "5",
+        patternUnits: "userSpaceOnUse"
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: "0",
+        y1: "0",
+        x2: "3",
+        y2: "3",
+        style: STYLE_LINE
+      })));
+      return !element.selected ? /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].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["default"].createElement("line", {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        style: STYLE_INTERIOR_LINE
+      })) : /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].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["default"].createElement("line", {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2,
+        style: STYLE_INTERIOR_LINE_SELECTED
+      }));
+    },
+    render3D: function render3D(element, layer, scene, mode) {
+      return (0, _wallFactory3d.buildWall)(element, layer, scene, textures, mode);
+    },
+    updateRender3D: function updateRender3D(element, layer, scene, mesh, oldElement, differences, selfDestroy, selfBuild) {
+      return (0, _wallFactory3d.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;
+}
+module.exports = exports.default;