kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
232 lines (230 loc) • 7.78 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var Three = _interopRequireWildcard(require("three"));
var _loadObj = require("../../utils/load-obj");
var _constants = require("../../../constants");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var cached3DDoor = null;
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: '13px',
fontFamily: 'Proxima Nova Rg'
};
var EPSILON = 3;
var _default = exports["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 render2D(element, layer, scene) {
var flip = element.properties.get('flip_orizzontal');
var lineWidth = 6;
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');
if (flip == false) {
return /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(-length / 2, ", 0)")
}, /*#__PURE__*/_react["default"].createElement("path", {
d: arcPath,
style: arcStyle,
transform: "translate(".concat(0, ",", holeWidth, ") scale(", 1, ",").concat(-1, ") rotate(", 0, ")")
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
y1: holeWidth - EPSILON,
x2: 0,
y2: 0 - EPSILON,
style: holeStyle,
transform: "scale(".concat(-1, ",", 1, ")")
}), /*#__PURE__*/_react["default"].createElement("rect", {
style: rectStyle,
x: "0",
y: -lineWidth / 2,
width: holeWidth,
height: lineWidth
}));
} else {
return /*#__PURE__*/_react["default"].createElement("g", {
transform: "translate(".concat(-length / 2, ", 0)")
}, /*#__PURE__*/_react["default"].createElement("path", {
d: arcPath,
style: arcStyle,
transform: "translate(".concat(0, ",", -holeWidth, ") scale(", 1, ",", 1, ") rotate(", 0, ")")
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: 0,
y1: -holeWidth - EPSILON,
x2: 0,
y2: 0 - EPSILON,
style: holeStyle,
transform: "scale(".concat(1, ",", 1, ")")
}), /*#__PURE__*/_react["default"].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;
if (element.selected) {
var box = new Three.BoxHelper(object, 0x99c3fb);
box.material.linewidth = 2;
box.material.depthTest = false;
box.renderOrder = 1000;
object.add(box);
}
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
});
// 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 (var j = 0; j < object.children.length; j++) {
if (object.children[j].type === _constants.OBJTYPE_MESH) {
object.children[j].material = mat2;
object.children[j].receiveShadow = true;
}
}
var width = element.properties.get('width').get('length');
var height = element.properties.get('height').get('length');
var 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 (0, _loadObj.loadGLTF)(element.url).then(function (object) {
cached3DDoor = object;
return onLoadItem(cached3DDoor.clone());
});
}
};
module.exports = exports.default;