kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/src/catalog/catalog.js

@@ -0,0 +1,258 @@
+import {
+  PropertyCheckbox,
+  PropertyColor,
+  PropertyEnum,
+  PropertyHidden,
+  PropertyLengthMeasure,
+  PropertyNumber,
+  PropertyReadOnly,
+  PropertyString,
+  PropertyToggle
+} from './properties/export';
+import { UNIT_CENTIMETER } from '../constants';
+import { returnReplaceableDeepSearchType } from '../components/viewer2d/utils';
+
+export default class Catalog {
+  constructor(unit = UNIT_CENTIMETER) {
+    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
+   */
+  getElement(type) {
+    if (this.hasElement(type)) {
+      return this.elements[type];
+    } else {
+      let deepSearchType = returnReplaceableDeepSearchType(type);
+      let element = this.elements[deepSearchType];
+      if (element) return element;
+      if (!element) return false;
+      // console.log("getElement", this);
+      throw new Error(`Element ${type} does not exist in catalog`);
+    }
+  }
+
+  /**
+   * @description Get catalog category
+   * @param {string} categoryName Name of category
+   * @return {object} Category
+   */
+  getCategory(categoryName) {
+    if (this.hasCategory(categoryName)) {
+      return this.categories[categoryName];
+    }
+    throw new Error(`Category ${categoryName} does not exist in catalog`);
+  }
+
+  /**
+   * @description Return type of a specfied property
+   * @param {string} type Property type
+   * @return {?object} Property
+   */
+  getPropertyType(type) {
+    if (this.propertyTypes.hasOwnProperty(type)) {
+      return this.propertyTypes[type];
+    }
+    throw new Error(`Element ${type} does not exist in catalog`);
+  }
+
+  /**
+   * @description Register a new element
+   * @param {object} json Element structure
+   * @return {void}
+   */
+  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}
+   */
+  registerMultipleElements(elementArray) {
+    elementArray.forEach(el => 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}
+   */
+  registerPropertyType(type, Viewer, Editor) {
+    this.propertyTypes[type] = { type, Viewer, Editor };
+  }
+
+  /**
+   * @description Register multiple property
+   * @param {array} propertyTypeArray Array of properties
+   * @return {void}
+   */
+  registerMultiplePropertyType(propertyTypeArray) {
+    propertyTypeArray.forEach(el => this.registerPropertyType(...el));
+  }
+
+  /**
+   * @description Validate an element
+   * @param {object} json Element's structure
+   * @return {?boolean}
+   */
+  validateElement(json) {
+    if (!json.hasOwnProperty('name')) throw new Error('Element not valid');
+
+    let name = json.name;
+    if (json.prototype.toLowerCase().includes('molding')) return true;
+    if (!json.hasOwnProperty('prototype'))
+      throw new Error(`Element ${name} doesn't have prototype`);
+
+    if (!json.hasOwnProperty('info'))
+      throw new Error(`Element ${name} doesn't have info`);
+    if (!json.info.hasOwnProperty('tag'))
+      throw new Error(`Element ${name} doesn't have tag`);
+    if (!json.info.hasOwnProperty('description'))
+      throw new Error(`Element ${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 ${name} doesn't have render2D handler`);
+    if (!json.hasOwnProperty('render3D'))
+      throw new Error(`Element ${name} doesn't have render3D handler`);
+    if (!json.hasOwnProperty('properties'))
+      throw new Error(`Element ${name} doesn't have properties`);
+
+    for (let propertyName in json.properties) {
+      let propertyConfigs = json.properties[propertyName];
+      if (!propertyConfigs.hasOwnProperty('type'))
+        throw new Error(
+          `Element ${name}, Property ${propertyName} doesn't have type`
+        );
+      if (!propertyConfigs.hasOwnProperty('defaultValue'))
+        throw new Error(
+          `Element ${name}, Property ${propertyName} doesn't have defaultValue`
+        );
+    }
+
+    return true;
+  }
+
+  /**
+   * @description Check if catalog has element
+   * @param {string} type Element's type
+   * @return {boolean}
+   */
+  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
+   */
+  registerCategory(name, label, childs) {
+    if (this.validateCategory(name, label)) {
+      this.categories[name] = { name, label, categories: [], elements: [] };
+      this.categories.root.categories.push(this.categories[name]);
+      if (childs && childs.length) {
+        childs.forEach(el => this.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}
+   */
+  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 ${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}
+   */
+  categoryHasElement(categoryName, elementName) {
+    return (
+      this.hasCategory(categoryName) &&
+      this.categories[categoryName].elements.some(el => el.name === elementName)
+    );
+  }
+
+  /**
+   * @description Validate a category
+   * @param {string} name Name of category
+   * @param {string} label Label of category
+   * @return {?boolean}
+   */
+  validateCategory(name, label) {
+    if (!name) {
+      throw new Error('Category has undefined name');
+    }
+    if (name === '') {
+      throw new Error('Category has empty name');
+    }
+    if (this.hasCategory(name)) {
+      throw new Error('Category has already been registered');
+    }
+
+    return true;
+  }
+
+  /**
+   * @description Verify if catalog already contain a category with specified name
+   * @param {string} categoryName Name of category
+   * @return {boolean}
+   */
+  hasCategory(categoryName) {
+    return this.categories.hasOwnProperty(categoryName);
+  }
+}

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

@@ -0,0 +1,252 @@
+import {
+  Shape,
+  ShapeGeometry,
+  Box3,
+  TextureLoader,
+  Mesh,
+  MeshBasicMaterial,
+  MeshStandardMaterial,
+  RepeatWrapping,
+  Vector2,
+  DoubleSide,
+  MeshPhysicalMaterial
+} from 'three';
+import * as Three from 'three';
+import { textureCube } from '../../../src/utils/helper';
+import * as SharedStyle from '../../shared-style';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
+
+const 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
+ */
+const applyTexture = (material, texture, length, height) => {
+  let 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
+ */
+const assignUVs = geometry => {
+  geometry.computeBoundingBox();
+
+  let { min, max } = geometry.boundingBox;
+  let offset = new Vector2(0 - min.x, 0 - min.y);
+  let range = new Vector2(max.x - min.x, max.y - min.y);
+
+  const uvArray = [];
+  const position = geometry.attributes.position;
+
+  for (let i = 0; i < position.count; i += 3) {
+    const x1 = position.getX(i);
+    const y1 = position.getY(i);
+
+    const x2 = position.getX(i + 1);
+    const y2 = position.getY(i + 1);
+
+    const x3 = position.getX(i + 2);
+    const 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) {
+  let vertices = [];
+
+  element.vertices.forEach(vertexID => {
+    vertices.push(layer.vertices.get(vertexID));
+  });
+
+  let { texture } = element;
+
+  texture.lengthRepeatScale = 0.01;
+  texture.heightRepeatScale = 0.01;
+
+  let 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 == '') {
+    texture.uri = layer.floorStyle.uri;
+  }
+
+  let shape = new Shape();
+
+  shape.moveTo(vertices[0].x, vertices[0].y);
+  for (let 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;
+    });
+  }
+  const floorENV = loadFloorENV();
+  let loader = new TextureLoader();
+
+  let 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(holeID => {
+    let holeCoords = [];
+    layer.getIn(['areas', holeID, 'vertices']).forEach(vertexID => {
+      let { x, y } = layer.getIn(['vertices', vertexID]);
+      holeCoords.push([x, y]);
+    });
+    holeCoords = holeCoords.reverse();
+    let holeShape = createShape(holeCoords);
+    shape.holes.push(holeShape);
+  });
+
+  // This is extrude floor mesh
+
+  let extrudeSettings = {
+    depth: -3,
+    bevelEnabled: false
+  };
+
+  let shapeGeometry = new Three.ExtrudeGeometry(shape, extrudeSettings);
+
+  assignUVs(shapeGeometry);
+
+  let boundingBox = new Box3().setFromObject(
+    new Mesh(shapeGeometry, new MeshBasicMaterial())
+  );
+  let width = boundingBox.max.x - boundingBox.min.x;
+  let height = boundingBox.max.y - boundingBox.min.y;
+  const texture_unit = 70 * 2.54; // 70 inch
+
+  applyTexture(
+    areaMaterial,
+    texture,
+    (width / texture_unit) * 100,
+    (height / texture_unit) * 100
+  );
+  let 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
+
+  let shapeGeometry2 = new Three.ShapeGeometry(shape);
+  let 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';
+
+  const floorSupport = area2.clone();
+  area.userData.floorSupport = floorSupport;
+
+  return Promise.resolve(area);
+}
+
+export function updatedArea(
+  element,
+  layer,
+  scene,
+  textures,
+  mesh,
+  oldElement,
+  differences,
+  selfDestroy,
+  selfBuild
+) {
+  let noPerf = () => {
+    selfDestroy();
+    return selfBuild();
+  };
+  let floor = mesh.getObjectByName('floor');
+  floor.receiveShadow = true;
+  if (differences[0] == 'selected') {
+    let 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}
+ */
+const createShape = shapeCoords => {
+  let shape = new Shape();
+  shape.moveTo(shapeCoords[0][0], shapeCoords[0][1]);
+  for (let i = 1; i < shapeCoords.length; i++) {
+    shape.lineTo(shapeCoords[i][0], shapeCoords[i][1]);
+  }
+  return shape;
+};

package/src/catalog/factories/area-factory.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { createArea, updatedArea } from './area-factory-3d';
+import * as SharedStyle from '../../shared-style';
+import Translator from '../../translator/translator';
+
+let translator = new Translator();
+
+export default function AreaFactory(name, info, textures) {
+  let areaElement = {
+    name,
+    prototype: 'areas',
+    info: {
+      ...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 (element, layer, scene) {
+      let path = '';
+
+      ///print area path
+      element.vertices.forEach((vertexID, ind) => {
+        let vertex = layer.vertices.get(vertexID);
+        path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
+      });
+
+      //add holes
+      element.holes.forEach(areaID => {
+        let area = layer.areas.get(areaID);
+
+        area.vertices.reverse().forEach((vertexID, ind) => {
+          let vertex = layer.vertices.get(vertexID);
+          path += (ind ? 'L' : 'M') + vertex.x + ' ' + vertex.y + ' ';
+        });
+      });
+
+      let fill = element.selected
+        ? SharedStyle.AREA_MESH_COLOR.selected
+        : SharedStyle.AREA_MESH_COLOR.unselected;
+      return <path d={path} fill={fill} />;
+    },
+
+    render3D: function (element, layer, scene) {
+      return createArea(element, layer, scene, textures);
+    },
+
+    updateRender3D: (
+      element,
+      layer,
+      scene,
+      mesh,
+      oldElement,
+      differences,
+      selfDestroy,
+      selfBuild
+    ) => {
+      return updatedArea(
+        element,
+        layer,
+        scene,
+        textures,
+        mesh,
+        oldElement,
+        differences,
+        selfDestroy,
+        selfBuild
+      );
+    }
+  };
+
+  if (textures && textures !== {}) {
+    let textureValues = { none: 'None' };
+
+    for (let textureName in textures) {
+      textureValues[textureName] = textures[textureName].name;
+    }
+
+    areaElement.properties.texture = {
+      label: translator.t('texture'),
+      type: 'enum',
+      defaultValue: 'none',
+      values: textureValues
+    };
+  }
+
+  return areaElement;
+}

package/src/catalog/factories/export.js

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