kitchen-simulator 5.10.2-react.18 → 5.10.4-react.18

package/es/catalog/areas/area/planner-element.js

@@ -0,0 +1,45 @@
+import { AreaFactory } from "../../factories/export";
+import parquetTexture from "./textures/parquet.jpg";
+import tile1Texture from "./textures/tile1.jpg";
+import ceramicTexture from "./textures/ceramic-tile.jpg";
+import strandPorcelainTexture from "./textures/strand-porcelain.jpg";
+import grassTexture from "./textures/grass.jpg";
+var info = {
+  title: 'area',
+  tag: ['area'],
+  description: 'Generic Room',
+  image: ''
+};
+var textures = {
+  parquet: {
+    name: 'Parquet',
+    uri: parquetTexture,
+    lengthRepeatScale: 0.004,
+    heightRepeatScale: 0.004
+  },
+  tile1: {
+    name: 'Tile1',
+    uri: tile1Texture,
+    lengthRepeatScale: 0.01,
+    heightRepeatScale: 0.01
+  },
+  ceramic: {
+    name: 'Ceramic Tile',
+    uri: ceramicTexture,
+    lengthRepeatScale: 0.02,
+    heightRepeatScale: 0.02
+  },
+  strand_porcelain: {
+    name: 'Strand Porcelain Tile',
+    uri: strandPorcelainTexture,
+    lengthRepeatScale: 0.02,
+    heightRepeatScale: 0.02
+  },
+  grass: {
+    name: 'Grass',
+    uri: grassTexture,
+    lengthRepeatScale: 0.01,
+    heightRepeatScale: 0.01
+  }
+};
+export default AreaFactory('area', info, textures);

package/es/catalog/catalog.js

@@ -0,0 +1,265 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { PropertyColor, PropertyEnum, PropertyString, PropertyNumber, PropertyLengthMeasure, PropertyToggle, PropertyCheckbox, PropertyHidden, PropertyReadOnly } from "./properties/export";
+import { UNIT_CENTIMETER, UNIT_INCH } from "../constants";
+import { returnReplaceableDeepSearchType } from "../components/viewer2d/utils";
+var Catalog = /*#__PURE__*/function () {
+  function Catalog() {
+    var unit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : UNIT_CENTIMETER;
+    _classCallCheck(this, Catalog);
+    this.elements = {};
+    this.categories = {
+      root: {
+        name: 'root',
+        label: '/',
+        elements: [],
+        categories: []
+      }
+    };
+    this.propertyTypes = {};
+    this.unit = unit;
+    this.registerMultiplePropertyType([['color', PropertyColor, PropertyColor], ['enum', PropertyEnum, PropertyEnum], ['string', PropertyString, PropertyString], ['number', PropertyNumber, PropertyNumber], ['length-measure', PropertyLengthMeasure, PropertyLengthMeasure], ['toggle', PropertyToggle, PropertyToggle], ['checkbox', PropertyCheckbox, PropertyCheckbox], ['hidden', PropertyHidden, PropertyHidden], ['read-only', PropertyReadOnly, PropertyReadOnly]]);
+  }
+
+  /**
+   * @description Get catalog's element
+   * @param {string} type Element's type
+   * @return {?object} Element
+   */
+  return _createClass(Catalog, [{
+    key: "getElement",
+    value: function getElement(type) {
+      if (this.hasElement(type)) {
+        return this.elements[type];
+      } else {
+        var deepSearchType = returnReplaceableDeepSearchType(type);
+        var element = this.elements[deepSearchType];
+        if (element) return element;
+        if (!element) return false;
+        // console.log("getElement", this);
+        throw new Error("Element ".concat(type, " does not exist in catalog"));
+      }
+    }
+
+    /**
+     * @description Get catalog category
+     * @param {string} categoryName Name of category
+     * @return {object} Category
+     */
+  }, {
+    key: "getCategory",
+    value: function getCategory(categoryName) {
+      if (this.hasCategory(categoryName)) {
+        return this.categories[categoryName];
+      }
+      throw new Error("Category ".concat(categoryName, " does not exist in catalog"));
+    }
+
+    /**
+     * @description Return type of a specfied property
+     * @param {string} type Property type
+     * @return {?object} Property
+     */
+  }, {
+    key: "getPropertyType",
+    value: function getPropertyType(type) {
+      if (this.propertyTypes.hasOwnProperty(type)) {
+        return this.propertyTypes[type];
+      }
+      throw new Error("Element ".concat(type, " does not exist in catalog"));
+    }
+
+    /**
+     * @description Register a new element
+     * @param {object} json Element structure
+     * @return {void}
+     */
+  }, {
+    key: "registerElement",
+    value: function registerElement(json) {
+      json.properties = json.properties || {};
+      if (this.validateElement(json)) {
+        this.elements[json.name] = json;
+        this.categories.root.elements.push(this.elements[json.name]);
+      }
+    }
+
+    /**
+     * @description Register multiple elements
+     * @param {array} [elementArray] Array of elements
+     * @return {void}
+     */
+  }, {
+    key: "registerMultipleElements",
+    value: function registerMultipleElements(elementArray) {
+      var _this = this;
+      elementArray.forEach(function (el) {
+        return _this.registerElement(el);
+      });
+    }
+
+    /**
+     * @description Register a new property
+     * @param {string} type Type of property
+     * @param {object} Viewer Property viewer component
+     * @param {object} Editor Property editor component
+     * @return {void}
+     */
+  }, {
+    key: "registerPropertyType",
+    value: function registerPropertyType(type, Viewer, Editor) {
+      this.propertyTypes[type] = {
+        type: type,
+        Viewer: Viewer,
+        Editor: Editor
+      };
+    }
+
+    /**
+     * @description Register multiple property
+     * @param {array} propertyTypeArray Array of properties
+     * @return {void}
+     */
+  }, {
+    key: "registerMultiplePropertyType",
+    value: function registerMultiplePropertyType(propertyTypeArray) {
+      var _this2 = this;
+      propertyTypeArray.forEach(function (el) {
+        return _this2.registerPropertyType.apply(_this2, _toConsumableArray(el));
+      });
+    }
+
+    /**
+     * @description Validate an element
+     * @param {object} json Element's structure
+     * @return {?boolean}
+     */
+  }, {
+    key: "validateElement",
+    value: function validateElement(json) {
+      if (!json.hasOwnProperty('name')) throw new Error('Element not valid');
+      var name = json.name;
+      if (json.prototype.toLowerCase().includes('molding')) return true;
+      if (!json.hasOwnProperty('prototype')) throw new Error("Element ".concat(name, " doesn't have prototype"));
+      if (!json.hasOwnProperty('info')) throw new Error("Element ".concat(name, " doesn't have info"));
+      if (!json.info.hasOwnProperty('tag')) throw new Error("Element ".concat(name, " doesn't have tag"));
+      if (!json.info.hasOwnProperty('description')) throw new Error("Element ".concat(name, " doesn't have description"));
+      // if (!json.info.hasOwnProperty('image')) throw new Error(`Element ${name} doesn't have image`);
+
+      if (!json.hasOwnProperty('render2D')) throw new Error("Element ".concat(name, " doesn't have render2D handler"));
+      if (!json.hasOwnProperty('render3D')) throw new Error("Element ".concat(name, " doesn't have render3D handler"));
+      if (!json.hasOwnProperty('properties')) throw new Error("Element ".concat(name, " doesn't have properties"));
+      for (var propertyName in json.properties) {
+        var propertyConfigs = json.properties[propertyName];
+        if (!propertyConfigs.hasOwnProperty('type')) throw new Error("Element ".concat(name, ", Property ").concat(propertyName, " doesn't have type"));
+        if (!propertyConfigs.hasOwnProperty('defaultValue')) throw new Error("Element ".concat(name, ", Property ").concat(propertyName, " doesn't have defaultValue"));
+      }
+      return true;
+    }
+
+    /**
+     * @description Check if catalog has element
+     * @param {string} type Element's type
+     * @return {boolean}
+     */
+  }, {
+    key: "hasElement",
+    value: function hasElement(type) {
+      return this.elements.hasOwnProperty(type);
+    }
+
+    /**
+     * @description Register a new category
+     * @param {string} name Name of category
+     * @param {string} label Label of category
+     * @param {array} [childs] Category's childs
+     * @return {?object} Registered category
+     */
+  }, {
+    key: "registerCategory",
+    value: function registerCategory(name, label, childs) {
+      var _this3 = this;
+      if (this.validateCategory(name, label)) {
+        this.categories[name] = {
+          name: name,
+          label: label,
+          categories: [],
+          elements: []
+        };
+        this.categories.root.categories.push(this.categories[name]);
+        if (childs && childs.length) {
+          childs.forEach(function (el) {
+            return _this3.addToCategory(name, el);
+          });
+        }
+        return this.categories[name];
+      }
+      return null;
+    }
+
+    /**
+     * @description Add an element to the specified category
+     * @param {string} name Name of category
+     * @param {object} child Element's structure
+     * @return {?void}
+     */
+  }, {
+    key: "addToCategory",
+    value: function addToCategory(name, child) {
+      if (this.hasElement(child.name)) {
+        this.categories[name].elements.push(child);
+        this.categories.root.elements.splice(this.categories.root.elements.indexOf(child), 1);
+      } else if (this.hasCategory(child.name)) {
+        this.categories[name].categories.push(child);
+        this.categories.root.categories.splice(this.categories.root.categories.indexOf(child), 1);
+      } else {
+        throw new Error("child ".concat(child, " is either category nor element"));
+      }
+    }
+
+    /**
+     * @description Check if category contain element
+     * @param {string} categoryName Name of category
+     * @param {string} elementName Name of element
+     * @return {boolean}
+     */
+  }, {
+    key: "categoryHasElement",
+    value: function categoryHasElement(categoryName, elementName) {
+      return this.hasCategory(categoryName) && this.categories[categoryName].elements.some(function (el) {
+        return el.name === elementName;
+      });
+    }
+
+    /**
+     * @description Validate a category
+     * @param {string} name Name of category
+     * @param {string} label Label of category
+     * @return {?boolean}
+     */
+  }, {
+    key: "validateCategory",
+    value: function validateCategory(name, label) {
+      if (!name) {
+        throw new Error('Category has undefined name');
+      }
+      if (name === '') {
+        throw new Error('Category has empty name');
+      }
+      return !this.hasCategory(name);
+    }
+
+    /**
+     * @description Verify if catalog already contain a category with specified name
+     * @param {string} categoryName Name of category
+     * @return {boolean}
+     */
+  }, {
+    key: "hasCategory",
+    value: function hasCategory(categoryName) {
+      return this.categories.hasOwnProperty(categoryName);
+    }
+  }]);
+}();
+export { Catalog as default };

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

@@ -0,0 +1,182 @@
+import * as Three from 'three';
+import { Box3, Mesh, MeshBasicMaterial, MeshPhysicalMaterial, RepeatWrapping, Shape, TextureLoader, Vector2 } from 'three';
+import * as SharedStyle from "../../shared-style";
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+var params = {
+  envMap: 'HDR',
+  roughness: 0.9,
+  metalness: 0.8,
+  exposure: 1.0
+  // debug: false
+};
+
+/**
+ * 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);
+    }
+  }
+};
+
+/**
+ * Function that assign UV coordinates to a geometry
+ * @param geometry
+ */
+var assignUVs = function assignUVs(geometry) {
+  geometry.computeBoundingBox();
+  var _geometry$boundingBox = geometry.boundingBox,
+    min = _geometry$boundingBox.min,
+    max = _geometry$boundingBox.max;
+  var offset = new Vector2(0 - min.x, 0 - min.y);
+  var range = new Vector2(max.x - min.x, max.y - min.y);
+  var uvArray = [];
+  var position = geometry.attributes.position;
+  for (var i = 0; i < position.count; i += 3) {
+    var x1 = position.getX(i);
+    var y1 = position.getY(i);
+    var x2 = position.getX(i + 1);
+    var y2 = position.getY(i + 1);
+    var x3 = position.getX(i + 2);
+    var y3 = position.getY(i + 2);
+    uvArray.push((x1 + offset.x) / range.x, (y1 + offset.y) / range.y, (x2 + offset.x) / range.x, (y2 + offset.y) / range.y, (x3 + offset.x) / range.x, (y3 + offset.y) / range.y);
+  }
+  geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(uvArray), 2));
+  geometry.needsUpdate = true;
+};
+export function createArea(element, layer, scene, textures) {
+  var vertices = [];
+  element.vertices.forEach(function (vertexID) {
+    vertices.push(layer.vertices.get(vertexID));
+  });
+  var texture = element.texture;
+  texture.lengthRepeatScale = 0.01;
+  texture.heightRepeatScale = 0.01;
+  var color = element.properties.get('patternColor');
+  if (element.selected) {
+    color = SharedStyle.AREA_MESH_COLOR.selected;
+  } else {
+    color = SharedStyle.AREA_MESH_COLOR.unselected;
+  }
+  if (texture.uri === undefined || texture.uri == '') {
+    // @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
+    texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
+  }
+  var shape = new Shape();
+  shape.moveTo(vertices[0].x, vertices[0].y);
+  for (var i = 1; i < vertices.length; i++) {
+    shape.lineTo(vertices[i].x, vertices[i].y);
+  }
+  function loadFloorENV() {
+    return new RGBELoader().load('/assets/Window.hdr', function (texture) {
+      texture.mapping = Three.EquirectangularReflectionMapping;
+      return texture;
+    });
+  }
+  var floorENV = loadFloorENV();
+  var loader = new TextureLoader();
+  var areaMaterial = new MeshPhysicalMaterial({
+    side: Three.DoubleSide,
+    metalness: texture.metalness,
+    roughness: 0.3,
+    envMap: floorENV,
+    envMapIntensity: 1.8,
+    specularIntensity: 0.4,
+    map: loader.load(texture.uri)
+  });
+
+  /* Create holes for the area */
+  element.holes.forEach(function (holeID) {
+    var holeCoords = [];
+    layer.getIn(['areas', holeID, 'vertices']).forEach(function (vertexID) {
+      var _layer$getIn = layer.getIn(['vertices', vertexID]),
+        x = _layer$getIn.x,
+        y = _layer$getIn.y;
+      holeCoords.push([x, y]);
+    });
+    holeCoords = holeCoords.reverse();
+    var holeShape = createShape(holeCoords);
+    shape.holes.push(holeShape);
+  });
+
+  // This is extrude floor mesh
+
+  var extrudeSettings = {
+    depth: -3,
+    bevelEnabled: false
+  };
+  var shapeGeometry = new Three.ExtrudeGeometry(shape, extrudeSettings);
+  assignUVs(shapeGeometry);
+  var boundingBox = new Box3().setFromObject(new Mesh(shapeGeometry, new MeshBasicMaterial()));
+  var width = boundingBox.max.x - boundingBox.min.x;
+  var height = boundingBox.max.y - boundingBox.min.y;
+  var texture_unit = 70 * 2.54; // 70 inch
+
+  applyTexture(areaMaterial, texture, width / texture_unit * 100, height / texture_unit * 100);
+  var area = new Mesh(shapeGeometry, areaMaterial);
+  area.rotation.x -= Math.PI / 2;
+  area.receiveShadow = true;
+  area.name = 'floor';
+  // This mesh is use for creating ceiling mesh
+
+  var shapeGeometry2 = new Three.ShapeGeometry(shape);
+  var area2 = new Mesh(shapeGeometry2, new MeshBasicMaterial({
+    transparent: true,
+    opacity: 0.0
+  }));
+  area2.castShadow = true;
+  area2.rotation.x -= Math.PI / 2;
+  area2.receiveShadow = true;
+  area2.name = 'floorSupport';
+  var floorSupport = area2.clone();
+  area.userData.floorSupport = floorSupport;
+  return Promise.resolve(area);
+}
+export function updatedArea(element, layer, scene, textures, mesh, oldElement, differences, selfDestroy, selfBuild) {
+  var noPerf = function noPerf() {
+    selfDestroy();
+    return selfBuild();
+  };
+  var floor = mesh.getObjectByName('floor');
+  floor.receiveShadow = true;
+  if (differences[0] == 'selected') {
+    var color = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
+    floor.material.color.set(color);
+  } else if (differences[0] == 'properties') {
+    if (differences[1] === 'texture') {
+      return noPerf();
+    }
+  } else return noPerf();
+  return Promise.resolve(mesh);
+}
+
+/**
+ * This function will create a shape given a list of coordinates
+ * @param shapeCoords
+ * @returns {Shape}
+ */
+var createShape = function createShape(shapeCoords) {
+  var shape = new Shape();
+  shape.moveTo(shapeCoords[0][0], shapeCoords[0][1]);
+  for (var i = 1; i < shapeCoords.length; i++) {
+    shape.lineTo(shapeCoords[i][0], shapeCoords[i][1]);
+  }
+  return shape;
+};

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

@@ -0,0 +1,78 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 React from 'react';
+import { createArea, updatedArea } from "./area-factory-3d";
+import * as SharedStyle from "../../shared-style";
+import Translator from "../../translator/translator";
+var translator = new Translator();
+export default function AreaFactory(name, info, textures) {
+  var areaElement = {
+    name: name,
+    prototype: 'areas',
+    info: _objectSpread(_objectSpread({}, info), {}, {
+      visibility: {
+        catalog: false,
+        layerElementsVisible: false
+      }
+    }),
+    properties: {
+      patternColor: {
+        label: translator.t('color'),
+        type: 'color',
+        defaultValue: 'rgba(175, 175, 175)'
+      },
+      thickness: {
+        label: translator.t('thickness'),
+        type: 'length-measure',
+        defaultValue: {
+          length: 0
+        }
+      }
+    },
+    render2D: function render2D(element, layer, scene) {
+      var path = '';
+
+      ///print area path
+      element.vertices.forEach(function (vertexID, ind) {
+        var vertex = layer.vertices.get(vertexID);
+        path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
+      });
+
+      //add holes
+      element.holes.forEach(function (areaID) {
+        var area = layer.areas.get(areaID);
+        area.vertices.reverse().forEach(function (vertexID, ind) {
+          var vertex = layer.vertices.get(vertexID);
+          path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
+        });
+      });
+      var fill = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
+      return /*#__PURE__*/React.createElement("path", {
+        d: path,
+        fill: fill
+      });
+    },
+    render3D: function render3D(element, layer, scene) {
+      return createArea(element, layer, scene, textures);
+    },
+    updateRender3D: function updateRender3D(element, layer, scene, mesh, oldElement, differences, selfDestroy, selfBuild) {
+      return updatedArea(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;
+    }
+    areaElement.properties.texture = {
+      label: translator.t('texture'),
+      type: 'enum',
+      defaultValue: 'none',
+      values: textureValues
+    };
+  }
+  return areaElement;
+}

package/es/catalog/factories/export.js

@@ -0,0 +1,7 @@
+import WallFactory from "./wall-factory";
+import AreaFactory from "./area-factory";
+export { WallFactory, AreaFactory };
+export default {
+  WallFactory: WallFactory,
+  AreaFactory: AreaFactory
+};