kitchen-simulator/es/catalog/holes/window-clear/planner-element.js

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

import React from 'react';
import * as Three from 'three';
import { loadGLTF, scaleObject } from "../../utils/load-obj";
import { OBJTYPE_MESH } from "../../../constants";
var cached3DWindow = null;
export default {
  name: 'Window',
  prototype: 'holes',
  info: {
    title: 'Clear',
    tag: ['window'],
    description: 'Window',
    image: '/assets/img/svg/window/Clear.svg',
    url: '/assets/gltf/window_clear.gltf'
  },
  properties: {
    width: {
      label: 'Width',
      type: 'length-measure',
      defaultValue: {
        length: 86.36
      }
    },
    height: {
      label: 'Height',
      type: 'length-measure',
      defaultValue: {
        length: 100
      }
    },
    altitude: {
      label: 'Distance from floor',
      type: 'length-measure',
      defaultValue: {
        length: 121.92
      }
    },
    thickness: {
      label: 'Thickness',
      type: 'length-measure',
      defaultValue: {
        length: 6
      }
    }
  },
  render2D: function render2D(element, layer, scene) {
    var STYLE_HOLE_BASE = {
      stroke: 'rgb(73, 73, 73)',
      strokeWidth: '1px',
      strokeDasharray: '9,5',
      fill: 'rgb(73, 73, 73)'
    };
    var STYLE_HOLE_SELECTED = {
      stroke: '#0096fd',
      strokeWidth: '1px',
      strokeDasharray: '9,5',
      fill: '#0096fd',
      cursor: 'move'
    };
    var STYLE_ARC_BASE = {
      stroke: 'rgb(73, 73, 73)',
      strokeWidth: '1px',
      strokeDasharray: '9,5',
      fill: 'none'
    };
    var STYLE_ARC_SELECTED = {
      stroke: '#0096fd',
      strokeWidth: '1px',
      strokeDasharray: '9,5',
      fill: 'none',
      cursor: 'move'
    };
    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_STR1 = {
      fill: 'none',
      stroke: '#494949',
      strokeWidth: '1',
      strokeLinecap: 'round',
      strokeLinejoin: 'round',
      strokeMiterlimit: '2.61313',
      strokeDasharray: '23.860041 11.930021'
    };
    var STYLE_FILL2 = {
      fill: '#1183B7'
    };
    var STYLE_FNT0 = {
      fill: 'white',
      fontWeight: 'normal',
      fontSize: '12px',
      fontFamily: 'Proxima Nova Rg'
    };
    //let line = layer.lines.get(hole.line);
    //let epsilon = line.properties.get('thickness') / 2;

    var EPSILON = 3;
    var lineWidth = element.properties.get('thickness').get('length');
    var holeWidth = element.properties.get('width').get('length');
    var holePath = "M".concat(0, " ", -EPSILON, "  L").concat(holeWidth, " ").concat(-EPSILON, "  L").concat(holeWidth, " ").concat(EPSILON, "  L", 0, " ").concat(EPSILON, "  z");
    var arcPath = "M".concat(0, ",", 0, "  A", holeWidth, ",").concat(holeWidth, " 0 0,1 ").concat(holeWidth, ",").concat(holeWidth);
    var holeStyle = element.selected ? STYLE_HOLE_SELECTED : STYLE_HOLE_BASE;
    var arcStyle = element.selected ? STYLE_ARC_SELECTED : STYLE_ARC_BASE;
    var rectStyle = element.selected ? STYLE_STR0_S : STYLE_STR0;
    var length = element.properties.get('width').get('length');
    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 width = element.properties.get('width').get('length');
      var height = element.properties.get('height').get('length');
      var thickness = element.properties.get('thickness').get('length');
      scaleObject(object, [90, 100, 6], [width, height, thickness]);
      if (element.selected) {
        var box = new Three.BoxHelper(object, 0x99c3fb);
        box.material.linewidth = 2;
        box.material.depthTest = false;
        box.renderOrder = 1000;
        object.add(box);
      }

      //let normalMap = require('./texture.png');
      //let t = new Three.TextureLoader().load(normalMap);
      var examplecolor = new Three.Color(0xffffff);
      var mat2 = new Three.MeshStandardMaterial({
        color: examplecolor,
        metalness: 0.1,
        roughness: 0.9
      });
      //mat2.map = t;
      // 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;
        }
      }
      return object;
    };
    if (cached3DWindow) {
      return Promise.resolve(onLoadItem(cached3DWindow.clone()));
    }
    return loadGLTF(element.url).then(function (object) {
      cached3DWindow = object;
      return onLoadItem(cached3DWindow.clone());
    });
  }
};