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

package/src/catalog/holes/door-closet/planner-element.jsx

@@ -1,251 +0,0 @@
-import React from 'react';
-import * as Three from 'three';
-import { loadGLTF } from '../../utils/load-obj';
-import { OBJTYPE_MESH } from '../../../../src/constants';
-
-let cached3DDoor = null;
-
-const STYLE_HOLE_BASE = {
-  stroke: 'rgb(73, 73, 73)',
-  strokeWidth: '1px',
-  strokeDasharray: '9,5',
-  fill: 'rgb(73, 73, 73)'
-};
-const STYLE_HOLE_SELECTED = {
-  stroke: '#0096fd',
-  strokeWidth: '1px',
-  strokeDasharray: '9,5',
-  fill: '#0096fd',
-  cursor: 'move'
-};
-const STYLE_ARC_BASE = {
-  stroke: 'rgb(73, 73, 73)',
-  strokeWidth: '1px',
-  strokeDasharray: '9,5',
-  fill: 'none'
-};
-const STYLE_ARC_SELECTED = {
-  stroke: '#0096fd',
-  strokeWidth: '1px',
-  strokeDasharray: '9,5',
-  fill: 'none',
-  cursor: 'move'
-};
-const STYLE_STR0 = {
-  fill: 'rgb(185, 185, 185)',
-  stroke: '#494949',
-  strokeWidth: '1',
-  strokeMiterlimit: '2.61313'
-};
-const STYLE_STR0_S = {
-  fill: 'rgb(185, 185, 185)',
-  stroke: '#0096fd',
-  strokeWidth: '1',
-  strokeMiterlimit: '2.61313'
-};
-const STYLE_STR1 = {
-  fill: 'none',
-  stroke: '#494949',
-  strokeWidth: '1',
-  strokeLinecap: 'round',
-  strokeLinejoin: 'round',
-  strokeMiterlimit: '2.61313',
-  strokeDasharray: '23.860041 11.930021'
-};
-const STYLE_FILL2 = { fill: '#1183B7' };
-const STYLE_FNT0 = {
-  fill: 'white',
-  fontWeight: 'normal',
-  fontSize: '13px',
-  fontFamily: 'Proxima Nova Rg'
-};
-const 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 (element, layer, scene) {
-    let flip = element.properties.get('flip_orizzontal');
-    let lineWidth = 6;
-    let holeWidth = element.properties.get('width').get('length');
-    let holePath = `M${0} ${-EPSILON}  L${holeWidth} ${-EPSILON}  L${holeWidth} ${EPSILON}  L${0} ${EPSILON}  z`;
-    let arcPath = `M${0},${0}  A${holeWidth},${holeWidth} 0 0,1 ${holeWidth},${holeWidth}`;
-    let holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE;
-    let arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE;
-    let rectStyle = element.selected ? STYLE_STR0_S : STYLE_STR0;
-    let length = element.properties.get('width').get('length');
-    if (flip == false) {
-      return (
-        <g transform={`translate(${-length / 2}, 0)`}>
-          <path
-            d={arcPath}
-            style={arcStyle}
-            transform={`translate(${0},${holeWidth}) scale(${1},${-1}) rotate(${0})`}
-          />
-          <line
-            x1={0}
-            y1={holeWidth - EPSILON}
-            x2={0}
-            y2={0 - EPSILON}
-            style={holeStyle}
-            transform={`scale(${-1},${1})`}
-          />
-          <rect
-            style={rectStyle}
-            x="0"
-            y={-lineWidth / 2}
-            width={holeWidth}
-            height={lineWidth}
-          />
-          {/* <rect style={STYLE_FILL2} x={holeWidth - 16} y="-8.5" width="17" height="17" rx="1.27" ry="1.27"/> */}
-          {/* <text x={holeWidth - 15} y="4.5" transform={`scale(1,-1)`} style={STYLE_FNT0}>C</text> */}
-        </g>
-      );
-    } else {
-      return (
-        <g transform={`translate(${-length / 2}, 0)`}>
-          <path
-            d={arcPath}
-            style={arcStyle}
-            transform={`translate(${0},${-holeWidth}) scale(${1},${1}) rotate(${0})`}
-          />
-          <line
-            x1={0}
-            y1={-holeWidth - EPSILON}
-            x2={0}
-            y2={0 - EPSILON}
-            style={holeStyle}
-            transform={`scale(${1},${1})`}
-          />
-          <rect
-            style={rectStyle}
-            x="0"
-            y={-lineWidth / 2}
-            width={holeWidth}
-            height={lineWidth}
-          />
-          {/* <rect style={STYLE_FILL2} x={holeWidth - 16} y="-8.5" width="17" height="17" rx="1.27" ry="1.27"/> */}
-          {/* <text x={holeWidth - 15} y="4.5"  style={STYLE_FNT0}>C</text> */}
-        </g>
-      );
-    }
-  },
-
-  render3D: function (element, layer, scene) {
-    let onLoadItem = object => {
-      let boundingBox = new Three.Box3().setFromObject(object);
-
-      let initialWidth = boundingBox.max.x - boundingBox.min.x;
-      let initialHeight = boundingBox.max.y - boundingBox.min.y;
-      let initialThickness = boundingBox.max.z - boundingBox.min.z;
-
-      if (element.selected) {
-        let box = new Three.BoxHelper(object, 0x99c3fb);
-        box.material.linewidth = 2;
-        box.material.depthTest = false;
-        box.renderOrder = 1000;
-        object.add(box);
-      }
-
-      const params = {
-        envMap: 'HDR',
-        roughness: 0.9,
-        metalness: 0.1,
-        exposure: 1.0
-      };
-
-      const examplecolor = new Three.Color(0xffffff);
-      let 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 (let j = 0; j < object.children.length; j++) {
-        if (object.children[j].type === OBJTYPE_MESH) {
-          object.children[j].material = mat2;
-          object.children[j].receiveShadow = true;
-        }
-      }
-
-      let width = element.properties.get('width').get('length');
-      let height = element.properties.get('height').get('length');
-      let 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(object => {
-      cached3DDoor = object;
-      return onLoadItem(cached3DDoor.clone());
-    });
-  }
-};

package/src/catalog/holes/door-double/planner-element.jsx

@@ -1,391 +0,0 @@
-import React from 'react';
-import * as Three from 'three';
-
-const black = new Three.MeshLambertMaterial({ color: 0x000000 });
-const metalBlue = new Three.MeshLambertMaterial({ color: 0xb7ceec });
-const grey = new Three.MeshLambertMaterial({ color: 0xd2b06a });
-const darkGrey = new Three.MeshLambertMaterial({ color: 0xffefce });
-
-const boxMaterials = [grey, grey, grey, grey, darkGrey, darkGrey];
-
-function makeDoor(width, height, thickness) {
-  let door_double = new Three.Mesh();
-
-  let LongDoorGeometry = new Three.BoxGeometry(0.75 * width, height, thickness);
-  let longDoor = new Three.Mesh(LongDoorGeometry, boxMaterials);
-  longDoor.position.x -= width * 0.25;
-  door_double.add(longDoor);
-
-  let ShortDoorGeometry = new Three.BoxGeometry(
-    0.25 * width,
-    height,
-    thickness
-  );
-  let shortDoor = new Three.Mesh(ShortDoorGeometry, boxMaterials);
-  shortDoor.position.x += width * 0.25;
-  shortDoor.position.z += thickness / 10;
-  door_double.add(shortDoor);
-
-  let handle = makeHandle(width);
-  handle.position.set(width / 20, height / 40, thickness / 2 + thickness / 10);
-  handle.rotation.z += Math.PI;
-  handle.rotation.x += Math.PI / 2;
-  door_double.add(handle);
-
-  let handleBase = makeHandleBase();
-  handleBase.position.set(width / 20, 0, thickness / 2);
-  handleBase.rotation.x = 0;
-  door_double.add(handleBase);
-
-  let handle2 = makeHandle(width);
-  handle2.position.set(
-    width / 20,
-    height / 40,
-    -thickness / 2 - thickness / 10
-  );
-  handle2.rotation.z += Math.PI;
-  handle2.rotation.x -= Math.PI / 2;
-  door_double.add(handle2);
-
-  let handleBase2 = makeHandleBase();
-  handleBase2.position.set(width / 20, 0, -thickness / 2);
-  handleBase2.rotation.x = 0;
-  door_double.add(handleBase2);
-
-  return door_double;
-}
-
-function makeHandle(width) {
-  let handle = new Three.Object3D();
-  let geometry_p1 = new Three.CylinderGeometry(
-    width / 100,
-    width / 100,
-    width / 32.5,
-    Math.round(32)
-  );
-  let geometry_p2 = new Three.SphereGeometry(
-    width / 100,
-    Math.round(32),
-    Math.round(32)
-  );
-  let geometry_p3 = new Three.CylinderGeometry(
-    width / 100,
-    width / 100,
-    width / 14.5,
-    Math.round(32)
-  );
-  let p1 = new Three.Mesh(geometry_p1, black);
-  let p2 = new Three.Mesh(geometry_p2, black);
-  let p3 = new Three.Mesh(geometry_p3, black);
-  let p4 = new Three.Mesh(geometry_p2, black);
-  p3.rotation.z = Math.PI / 2;
-  p3.position.x = width / 14.5 / 2;
-  p2.position.y = -width / 32.5 / 2;
-  p4.position.y = -width / 14.5 / 2;
-  p3.add(p4);
-  p2.add(p3);
-  p1.add(p2);
-  handle.add(p1);
-
-  return handle;
-}
-
-function makeHandleBase() {
-  let handleBase = new Three.Object3D();
-  let geometryBase1 = new Three.BoxGeometry(7.6, 28, 2);
-  let geometryBase2 = new Three.CylinderGeometry(3.6, 3.6, 2, Math.round(32));
-  let lock = makeLock();
-  let handleBase1 = new Three.Mesh(geometryBase1, black);
-  let handleBase2 = new Three.Mesh(geometryBase2, black);
-  lock.rotation.x = Math.PI / 2;
-  lock.position.y = -3;
-  handleBase2.rotation.x = Math.PI / 2;
-  handleBase2.position.y = -3.3;
-  handleBase2.scale.z = 1.5;
-  handleBase1.add(lock);
-  handleBase1.add(handleBase2);
-  handleBase.add(handleBase1);
-
-  return handleBase;
-}
-
-function makeLock() {
-  let lock = new Three.Object3D();
-  let LockGeometry1 = new Three.CylinderGeometry(1.5, 1.5, 4, Math.round(32));
-  let lockGeometry2 = new Three.BoxGeometry(1.6, 4, 4);
-  let lockGeometry3 = new Three.BoxGeometry(1.4, 4.06, 0.36);
-  let lock_p1 = new Three.Mesh(LockGeometry1, metalBlue);
-  let lock_p2 = new Three.Mesh(lockGeometry2, metalBlue);
-  let lock_p3 = new Three.Mesh(lockGeometry3, grey);
-  lock_p2.position.z = 1;
-  lock_p1.add(lock_p2);
-  lock_p1.add(lock_p3);
-  lock.add(lock_p1);
-
-  return lock;
-}
-
-export default {
-  name: 'Double Door',
-  prototype: 'holes',
-
-  info: {
-    tag: ['door'],
-    title: 'Double Door',
-    description: 'iron door',
-    image: '/assets/img/svg/doors_patio.svg'
-  },
-
-  properties: {
-    width: {
-      label: 'width',
-      type: 'length-measure',
-      defaultValue: {
-        length: 200,
-        unit: 'cm'
-      }
-    },
-    height: {
-      label: 'height',
-      type: 'length-measure',
-      defaultValue: {
-        length: 215,
-        unit: 'cm'
-      }
-    },
-    thickness: {
-      label: 'thickness',
-      type: 'length-measure',
-      defaultValue: {
-        length: 6,
-        unit: 'cm'
-      }
-    },
-    altitude: {
-      label: 'altitude',
-      type: 'length-measure',
-      defaultValue: {
-        length: 0,
-        unit: 'cm'
-      }
-    },
-    flip_horizontal: {
-      label: 'flip',
-      type: 'checkbox',
-      defaultValue: false,
-      values: {
-        none: false,
-        yes: true
-      }
-    }
-  },
-
-  render2D: function (element, layer, scene) {
-    const STYLE_HOLE_BASE = {
-      stroke: 'rgb(73, 73, 73)',
-      strokeDasharray: '9,5',
-      strokeWidth: '1px',
-      fill: 'rgb(73, 73, 73)'
-    };
-    const STYLE_HOLE_SELECTED = {
-      stroke: '#0096fd',
-      strokeWidth: '1px',
-      strokeDasharray: '9,5',
-      fill: '#0096fd',
-      cursor: 'move'
-    };
-    const STYLE_ARC_BASE = {
-      stroke: 'rgb(73, 73, 73)',
-      strokeWidth: '1px',
-      strokeDasharray: '9,5',
-      fill: 'none'
-    };
-    const STYLE_ARC_SELECTED = {
-      stroke: '#0096fd',
-      strokeWidth: '1px',
-      strokeDasharray: '9,5',
-      fill: 'none',
-      cursor: 'move'
-    };
-
-    const STYLE_STR0 = {
-      fill: 'rgb(185, 185, 185)',
-      stroke: '#494949',
-      strokeWidth: '1',
-      strokeMiterlimit: '2.61313'
-    };
-    const STYLE_STR0_S = {
-      fill: 'rgb(185, 185, 185)',
-      stroke: '#0096fd',
-      strokeWidth: '1',
-      strokeMiterlimit: '2.61313'
-    };
-    const STYLE_STR1 = {
-      fill: 'none',
-      stroke: '#494949',
-      strokeWidth: '1',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeMiterlimit: '2.61313',
-      strokeDasharray: '23.860041 11.930021'
-    };
-    const STYLE_FILL2 = { fill: '#1183B7' };
-    const STYLE_FNT0 = {
-      fill: 'white',
-      fontWeight: 'normal',
-      fontSize: '13px',
-      fontFamily: 'Proxima Nova Rg'
-    };
-    let lineWidth = 15;
-    let epsilon = 3;
-    let flip = element.properties.get('flip_horizontal');
-    let holeWidth = element.properties.get('width').get('length');
-    let holePath = `M${0} ${-epsilon}  L${holeWidth} ${-epsilon}  L${holeWidth} ${epsilon}  L${0} ${epsilon}  z`;
-    let arcPath = `M${0},${0}  A${holeWidth / 4},${holeWidth / 4} 0 0,1 ${
-      holeWidth / 4
-    },${holeWidth / 4}`;
-    let arcPath2 = `M${0},${0}  A${holeWidth / 2 + holeWidth / 4},${
-      holeWidth / 2 + holeWidth / 4
-    } 0 0,0 ${holeWidth / 2 + holeWidth / 4},${holeWidth / 2 + holeWidth / 4}`;
-    let holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE;
-    let arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE;
-    let rectStyle = element.selected ? STYLE_STR0_S : STYLE_STR0;
-    let length = element.properties.get('width').get('length');
-
-    if (flip) {
-      return (
-        <g
-          transform={`translate(${
-            -element.properties.get('width').get('length') / 2
-          }, 0)`}
-        >
-          <path
-            key="1"
-            d={arcPath}
-            style={arcStyle}
-            transform={`translate(${0},${-holeWidth / 4})`}
-          />
-          <line
-            key="2"
-            x1={0}
-            y1={0 - epsilon}
-            x2={0}
-            y2={-holeWidth / 4 - epsilon}
-            style={holeStyle}
-          />
-          <path
-            key="3"
-            d={arcPath2}
-            style={arcStyle}
-            transform={`translate(${holeWidth},${
-              -holeWidth / 2 - holeWidth / 4
-            }) rotate(90)`}
-          />
-          <line
-            key="4"
-            x1={holeWidth}
-            y1={0 - epsilon}
-            x2={holeWidth}
-            y2={-holeWidth / 2 - holeWidth / 4 - epsilon}
-            style={holeStyle}
-          />
-          <rect
-            style={rectStyle}
-            x="0"
-            y={-lineWidth / 2}
-            width={holeWidth}
-            height={lineWidth}
-          />
-          {/* <rect style={STYLE_FILL2} x={holeWidth/4 - 10} y="-8.5" width="17" height="17" rx="1.27" ry="1.27"/>
-          <text x={holeWidth/4 - 9} y="4.5" style={STYLE_FNT0}>D2</text> */}
-        </g>
-      );
-    } else {
-      return (
-        <g
-          transform={`translate(${
-            -element.properties.get('width').get('length') / 2
-          }, 0)`}
-        >
-          <path
-            key="1"
-            d={arcPath}
-            style={arcStyle}
-            transform={`translate(${holeWidth},${holeWidth / 4}) rotate(180)`}
-          />
-          <line
-            key="2"
-            x1={0}
-            y1={0 - epsilon}
-            x2={0}
-            y2={holeWidth / 2 + holeWidth / 4 - epsilon}
-            style={holeStyle}
-          />
-          <path
-            key="3"
-            d={arcPath2}
-            style={arcStyle}
-            transform={`translate(${0},${
-              holeWidth / 2 + holeWidth / 4
-            }) rotate(270)`}
-          />
-          <line
-            key="4"
-            x1={holeWidth}
-            y1={0 - epsilon}
-            x2={holeWidth}
-            y2={holeWidth / 4 - epsilon}
-            style={holeStyle}
-          />
-          <rect
-            style={rectStyle}
-            x="0"
-            y={-lineWidth / 2}
-            width={holeWidth}
-            height={lineWidth}
-          />
-          {/* <rect style={STYLE_FILL2} x={holeWidth*3/4 - 10} y="-8.5" width="17" height="17" rx="1.27" ry="1.27"/>
-          <text x={holeWidth*3/4 - 9} y="4.5" transform={`scale(${1},${-1})`}  style={STYLE_FNT0}>D2</text> */}
-        </g>
-      );
-    }
-  },
-
-  render3D: function (element, layer, scene) {
-    let flip = element.properties.get('flip_horizontal');
-    let width = element.properties.get('width').get('length');
-    let height = element.properties.get('height').get('length');
-    let thickness = element.properties.get('thickness').get('length');
-    let newAltitude = element.properties.get('altitude').get('length');
-
-    let door_double = new Three.Object3D();
-    door_double.add(
-      makeDoor(width, height, thickness).clone(width, height, thickness)
-    );
-
-    let valuePosition = new Three.Box3().setFromObject(door_double);
-
-    let deltaX = Math.abs(valuePosition.max.x - valuePosition.min.x);
-    let deltaY = Math.abs(valuePosition.max.y - valuePosition.min.y);
-    let deltaZ = Math.abs(valuePosition.max.z - valuePosition.min.z);
-
-    if (element.selected) {
-      let bbox = new Three.BoxHelper(door_double, 0x99c3fb);
-      bbox.material.linewidth = 5;
-      bbox.renderOrder = 1000;
-      bbox.material.depthTest = false;
-      door_double.add(bbox);
-    }
-
-    if (flip) {
-      door_double.rotation.y += Math.PI;
-      door_double.position.x -= width / 4;
-    }
-
-    door_double.position.y += newAltitude;
-    door_double.position.x += width / 8;
-    door_double.scale.set(width / deltaX, height / deltaY, thickness / deltaZ);
-
-    return Promise.resolve(door_double);
-  }
-};