kitchen-simulator/es/catalog/holes/doorway-framed/planner-element.js

It is a kitchen simulator (self-contained micro-frontend).

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_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_FILL2 = {
  fill: '#1183B7'
};
var STYLE_FNT0 = {
  fill: 'white',
  fontWeight: 'normal',
  fontSize: '13px',
  fontFamily: 'Proxima Nova Rg'
};
export default {
  name: 'Framed Doorway',
  prototype: 'holes',
  info: {
    title: 'Framed Doorway',
    tag: ['doorway'],
    description: 'Framed Doorway',
    image: '/assets/img/svg/door/Framed_dorway.svg',
    url: '/assets/gltf/doorway_framed.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 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("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("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;
      var width = element.properties.get('width').get('length');
      var height = element.properties.get('height').get('length');
      var thickness = element.properties.get('thickness').get('length');
      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
      });
      // 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;
        }
      }
      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());
    });
    // return Promise.resolve(new Three.Object3D());
  }
};