kitchen-simulator 11.0.0-react.18 → 11.0.0

package/es/components/viewer3d/viewer3d-first-person.js

@@ -5,11 +5,11 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 import * as Three from 'three';
 import { parseData, updateScene } from "./scene-creator";
 import { disposeScene } from "./three-memory-cleaner";
@@ -17,7 +17,6 @@ import diff from 'immutablediff';
 import { initPointerLock } from "./pointer-lock-navigation";
 import { firstPersonOnKeyDown, firstPersonOnKeyUp } from "./libs/first-person-controls";
 import * as SharedStyle from "../../shared-style";
-import AppContext from "../../AppContext";
 var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
   function Viewer3DFirstPerson(props) {
     var _this;
@@ -26,7 +25,6 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
     _this.width = props.width;
     _this.height = props.height;
     _this.stopRendering = false;
-    _this.canvasWrapperRef = /*#__PURE__*/React.createRef();
     _this.renderer = window.__threeRenderer || new Three.WebGLRenderer({
       preserveDrawingBuffer: true
     });
@@ -37,15 +35,7 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
   return _createClass(Viewer3DFirstPerson, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$context,
-        _this$context2,
-        _this$context3,
-        _this$context4,
-        _this$context5,
-        _this$context6,
-        _document$body$reques,
-        _document$body,
-        _this2 = this;
+      var _this2 = this;
       /** Variables for movement control **/
       var prevTime = performance.now();
       var velocity = new Three.Vector3();
@@ -55,22 +45,23 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       var moveLeft = false;
       var moveRight = false;
       var canJump = false;
-      var catalog = (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.catalog;
+      var catalog = this.context.catalog;
       var actions = {
-        areaActions: (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : _this$context2.areaActions,
-        holesActions: (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : _this$context3.holesActions,
-        itemsActions: (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : _this$context4.itemsActions,
-        linesActions: (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : _this$context5.linesActions,
-        projectActions: (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : _this$context6.projectActions
+        areaActions: this.context.areaActions,
+        holesActions: this.context.holesActions,
+        itemsActions: this.context.itemsActions,
+        linesActions: this.context.linesActions,
+        projectActions: this.context.projectActions
       };
       var state = this.props.state;
       var data = state.scene;
-      var canvasWrapper = this.canvasWrapperRef.current;
-      if (!canvasWrapper) return;
+      var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
       var scene3D = new Three.Scene();
+
+      // As I need to show the pointer above all scene objects, I use this workaround http://stackoverflow.com/a/13309722
       var sceneOnTop = new Three.Scene();
 
-      // RENDERER
+      //RENDERER
       this.renderer.setClearColor(new Three.Color(SharedStyle.COLORS.white));
       this.renderer.setSize(this.width, this.height);
 
@@ -80,40 +71,46 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
 
       // CAMERA
       var aspectRatio = this.width / this.height;
+      var camera = new Three.OrthographicCamera(width / -4, width / 4, height / 4, height / -4, 1, 1000);
+      sceneOnTop.add(camera); // The pointer is on the camera so I show it above all
 
-      // NOTE: your original code used `width/height` identifiers that were not defined
-      // and also used OrthographicCamera with "aspect". Keeping your structure but fixing identifiers.
-      var camera = new Three.OrthographicCamera(this.width / -4, this.width / 4, this.height / 4, this.height / -4, 1, 1000);
-      sceneOnTop.add(camera);
+      // Set position for the camera
       camera.position.set(0, 0, 0);
       camera.up = new Three.Vector3(0, 1, 0);
 
+      // HELPER AXIS
+      // let axisHelper = new Three.AxisHelper(100);
+      // scene3D.add(axisHelper);
+
       // LIGHT
-      var light = new Three.AmbientLight(0xafafaf);
+      var light = new Three.AmbientLight(0xafafaf); // soft white light
       scene3D.add(light);
+
+      // Add another light
       var pointLight = new Three.PointLight(SharedStyle.COLORS.white, 0.4, 1000);
       pointLight.position.set(0, 0, 0);
       scene3D.add(pointLight);
 
       // POINTER LOCK
+
       document.body.requestPointerLock = document.body.requestPointerLock || document.body.mozRequestPointerLock || document.body.webkitRequestPointerLock;
-      (_document$body$reques = (_document$body = document.body).requestPointerLock) === null || _document$body$reques === void 0 || _document$body$reques.call(_document$body);
+      document.body.requestPointerLock();
       var _initPointerLock = initPointerLock(camera, this.renderer.domElement),
         controls = _initPointerLock.controls,
         pointerlockChangeEvent = _initPointerLock.pointerlockChangeEvent,
         requestPointerLockEvent = _initPointerLock.requestPointerLockEvent;
       this.controls = controls;
-      this.pointerlockChangeEvent = pointerlockChangeEvent; // <-- you referenced this in unmount
+      this.pointerlockChangeListener = pointerlockChangeEvent;
       this.requestPointerLockEvent = requestPointerLockEvent;
 
       /* Set user initial position */
-      var humanHeight = 170; // cm
+      var humanHeight = 170; // 170 cm
 
       var yInitialPosition = this.planData.boundingBox.min.y + (this.planData.boundingBox.min.y - this.planData.boundingBox.max.y) / 2 + humanHeight;
       this.controls.getObject().position.set(-50, yInitialPosition, -100);
-      sceneOnTop.add(this.controls.getObject());
+      sceneOnTop.add(this.controls.getObject()); // Add the pointer lock controls to the scene that will be rendered on top
 
-      // KEYBOARD MOVE EVENTS
+      // Add move controls on the page
       this.keyDownEvent = function (event) {
         var moveResult = firstPersonOnKeyDown(event, moveForward, moveLeft, moveBackward, moveRight, canJump, velocity);
         moveForward = moveResult.moveForward;
@@ -133,7 +130,8 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       document.addEventListener('keydown', this.keyDownEvent);
       document.addEventListener('keyup', this.keyUpEvent);
 
-      // POINTER
+      // Add a pointer to the scene
+
       var pointer = new Three.Object3D();
       pointer.name = 'pointer';
       var pointerMaterial = new Three.MeshBasicMaterial({
@@ -160,116 +158,86 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       pointer.add(linePointer1);
       pointer.add(linePointer2);
       pointer.add(linePointer3);
-      camera.add(pointer);
+      camera.add(pointer); // Add the pointer to the camera
 
       // OBJECT PICKING
       var toIntersect = [this.planData.plan];
       var mouseVector = new Three.Vector2(0, 0);
       var raycaster = new Three.Raycaster();
       this.firstPersonMouseDown = function (event) {
-        var _this2$controls;
-        if (!((_this2$controls = _this2.controls) !== null && _this2$controls !== void 0 && _this2$controls.enabled)) return;
-        event.preventDefault();
-        raycaster.setFromCamera(mouseVector, camera);
-        var intersects = raycaster.intersectObjects(toIntersect, true);
-        if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
-          intersects[0].object.interact && intersects[0].object.interact();
-        } else {
-          var _actions$projectActio, _actions$projectActio2;
-          (_actions$projectActio = actions.projectActions) === null || _actions$projectActio === void 0 || (_actions$projectActio2 = _actions$projectActio.unselectAll) === null || _actions$projectActio2 === void 0 || _actions$projectActio2.call(_actions$projectActio);
+        // First of all I check if controls are enabled
+
+        if (_this2.controls.enabled) {
+          event.preventDefault();
+
+          /* Per avere la direzione da assegnare al raycaster, chiamo il metodo getDirection di PointerLockControls,
+           * che restituisce una funzione che a sua volta prende un vettore, vi scrive i valori degli oggetti
+           * pitch e yaw e lo restituisce */
+
+          raycaster.setFromCamera(mouseVector, camera);
+          var intersects = raycaster.intersectObjects(toIntersect, true);
+          if (intersects.length > 0 && !isNaN(intersects[0].distance)) {
+            intersects[0].object.interact && intersects[0].object.interact();
+          } else {
+            _this2.context.projectActions.unselectAll();
+          }
         }
       };
       document.addEventListener('mousedown', this.firstPersonMouseDown, false);
       this.renderer.domElement.style.display = 'block';
+
+      // add the output of the renderer to the html element
       canvasWrapper.appendChild(this.renderer.domElement);
       this.renderer.autoClear = false;
       var _render = function render() {
-        if (_this2.stopRendering) return;
-        yInitialPosition = _this2.planData.boundingBox.min.y + humanHeight;
-        var multiplier = 5;
-        var time = performance.now();
-        var delta = (time - prevTime) / 1000 * multiplier;
-        velocity.x -= velocity.x * 10.0 * delta;
-        velocity.z -= velocity.z * 10.0 * delta;
-        velocity.y -= 9.8 * 100.0 * delta / multiplier;
-        direction.z = Number(moveForward) - Number(moveBackward);
-        direction.x = Number(moveLeft) - Number(moveRight);
-        direction.normalize();
-        if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
-        if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
-        _this2.controls.getObject().translateX(velocity.x * delta);
-        _this2.controls.getObject().translateY(velocity.y * delta);
-        _this2.controls.getObject().translateZ(velocity.z * delta);
-        if (_this2.controls.getObject().position.y < yInitialPosition) {
-          velocity.y = 0;
-          _this2.controls.getObject().position.y = yInitialPosition;
-          canJump = true;
-        }
-        prevTime = time;
-        var p = _this2.controls.getObject().position;
-        pointLight.position.set(p.x, p.y, p.z);
-        for (var elemID in _this2.planData.sceneGraph.LODs) {
-          _this2.planData.sceneGraph.LODs[elemID].update(camera);
+        if (!_this2.stopRendering) {
+          yInitialPosition = _this2.planData.boundingBox.min.y + humanHeight;
+          var multiplier = 5;
+          var time = performance.now();
+          var delta = (time - prevTime) / 1000 * multiplier;
+          velocity.x -= velocity.x * 10.0 * delta;
+          velocity.z -= velocity.z * 10.0 * delta;
+          velocity.y -= 9.8 * 100.0 * delta / multiplier; // 100.0 = mass
+
+          direction.z = Number(moveForward) - Number(moveBackward);
+          direction.x = Number(moveLeft) - Number(moveRight);
+          direction.normalize(); // this ensures consistent movements in all directions
+
+          if (moveForward || moveBackward) velocity.z -= direction.z * 400.0 * delta;
+          if (moveLeft || moveRight) velocity.x -= direction.x * 400.0 * delta;
+          _this2.controls.getObject().translateX(velocity.x * delta);
+          _this2.controls.getObject().translateY(velocity.y * delta);
+          _this2.controls.getObject().translateZ(velocity.z * delta);
+          if (_this2.controls.getObject().position.y < yInitialPosition) {
+            velocity.y = 0;
+            _this2.controls.getObject().position.y = yInitialPosition;
+            canJump = true;
+          }
+          prevTime = time;
+
+          // Set light position
+          var controlObjectPosition = _this2.controls.getObject().position;
+          pointLight.position.set(controlObjectPosition.x, controlObjectPosition.y, controlObjectPosition.z);
+          for (var elemID in _this2.planData.sceneGraph.LODs) {
+            _this2.planData.sceneGraph.LODs[elemID].update(camera);
+          }
+          _this2.renderer.clear(); // clear buffers
+          _this2.renderer.render(scene3D, camera); // render scene 1
+          _this2.renderer.clearDepth(); // clear depth buffer
+          _this2.renderer.render(sceneOnTop, camera); // render scene 2
+
+          requestAnimationFrame(_render);
         }
-        _this2.renderer.clear();
-        _this2.renderer.render(scene3D, camera);
-        _this2.renderer.clearDepth();
-        _this2.renderer.render(sceneOnTop, camera);
-        requestAnimationFrame(_render);
       };
       _render();
       this.camera = camera;
       this.scene3D = scene3D;
       this.sceneOnTop = sceneOnTop;
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this$context7, _this$context8, _this$context9, _this$context0, _this$context1, _prevProps$state;
-      var _this$props = this.props,
-        width = _this$props.width,
-        height = _this$props.height,
-        state = _this$props.state;
-      var camera = this.camera,
-        renderer = this.renderer,
-        scene3D = this.scene3D,
-        sceneOnTop = this.sceneOnTop,
-        planData = this.planData;
-      if (!camera || !renderer || !scene3D || !sceneOnTop || !planData) return;
-      var actions = {
-        areaActions: (_this$context7 = this.context) === null || _this$context7 === void 0 ? void 0 : _this$context7.areaActions,
-        holesActions: (_this$context8 = this.context) === null || _this$context8 === void 0 ? void 0 : _this$context8.holesActions,
-        itemsActions: (_this$context9 = this.context) === null || _this$context9 === void 0 ? void 0 : _this$context9.itemsActions,
-        linesActions: (_this$context0 = this.context) === null || _this$context0 === void 0 ? void 0 : _this$context0.linesActions,
-        projectActions: (_this$context1 = this.context) === null || _this$context1 === void 0 ? void 0 : _this$context1.projectActions
-      };
-
-      // size change
-      if (prevProps.width !== width || prevProps.height !== height) {
-        this.width = width;
-        this.height = height;
-
-        // OrthographicCamera doesn't use aspect, but your original code did this.
-        // We'll just update projection and renderer size.
-        camera.updateProjectionMatrix();
-        renderer.setSize(width, height);
-      }
-
-      // scene change
-      if (((_prevProps$state = prevProps.state) === null || _prevProps$state === void 0 ? void 0 : _prevProps$state.scene) !== (state === null || state === void 0 ? void 0 : state.scene)) {
-        var _this$context10;
-        var changedValues = diff(prevProps.state.scene, state.scene);
-        updateScene(planData, state.scene, prevProps.state.scene, changedValues.toJS(), actions, (_this$context10 = this.context) === null || _this$context10 === void 0 ? void 0 : _this$context10.catalog);
-      }
-      renderer.clear();
-      renderer.render(scene3D, camera);
-      renderer.clearDepth();
-      renderer.render(sceneOnTop, camera);
+      // this.planData = planData;
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$renderer$domEle;
       this.stopRendering = true;
       this.renderer.autoClear = true;
       document.removeEventListener('mousedown', this.firstPersonMouseDown);
@@ -278,34 +246,64 @@ var Viewer3DFirstPerson = /*#__PURE__*/function (_React$Component) {
       document.removeEventListener('pointerlockchange', this.pointerlockChangeEvent);
       document.removeEventListener('mozpointerlockchange', this.pointerlockChangeEvent);
       document.removeEventListener('webkitpointerlockchange', this.pointerlockChangeEvent);
-      (_this$renderer$domEle = this.renderer.domElement) === null || _this$renderer$domEle === void 0 || _this$renderer$domEle.removeEventListener('click', this.requestPointerLockEvent);
-      if (this.scene3D) {
-        var _this$planData;
-        disposeScene(this.scene3D);
-        if ((_this$planData = this.planData) !== null && _this$planData !== void 0 && _this$planData.plan) this.scene3D.remove(this.planData.plan);
-      }
+      this.renderer.domElement.removeEventListener('click', this.requestPointerLockEvent);
+      disposeScene(this.scene3D);
+      this.scene3D.remove(this.planData.plan);
       this.scene3D = null;
       this.planData = null;
-
-      // defensive: renderLists.dispose may not exist in some three versions
-      try {
-        var _this$renderer$render, _this$renderer$render2;
-        (_this$renderer$render = this.renderer.renderLists) === null || _this$renderer$render === void 0 || (_this$renderer$render2 = _this$renderer$render.dispose) === null || _this$renderer$render2 === void 0 || _this$renderer$render2.call(_this$renderer$render);
-      } catch (_unused) {}
+      this.renderer.renderLists.dispose();
+    }
+  }, {
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var width = nextProps.width,
+        height = nextProps.height;
+      var camera = this.camera,
+        renderer = this.renderer,
+        scene3D = this.scene3D,
+        sceneOnTop = this.sceneOnTop,
+        planData = this.planData;
+      var actions = {
+        areaActions: this.context.areaActions,
+        holesActions: this.context.holesActions,
+        itemsActions: this.context.itemsActions,
+        linesActions: this.context.linesActions,
+        projectActions: this.context.projectActions
+      };
+      this.width = width;
+      this.height = height;
+      camera.aspect = width / height;
+      camera.updateProjectionMatrix();
+      if (nextProps.scene !== this.props.state.scene) {
+        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
+        updateScene(planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog);
+      }
+      renderer.setSize(width, height);
+      renderer.clear(); // clear buffers
+      renderer.render(scene3D, camera); // render scene 1
+      renderer.clearDepth(); // clear depth buffer
+      renderer.render(sceneOnTop, camera); // render scene 2
     }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        ref: this.canvasWrapperRef
+      return /*#__PURE__*/React.createElement('div', {
+        ref: 'canvasWrapper'
       });
     }
   }]);
 }(React.Component);
-_defineProperty(Viewer3DFirstPerson, "contextType", AppContext);
 export { Viewer3DFirstPerson as default };
 Viewer3DFirstPerson.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired
+};
+Viewer3DFirstPerson.contextTypes = {
+  areaActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object
 };

package/es/components/viewer3d/viewer3d.js

@@ -1,34 +1,34 @@
 'use strict';
 
 import _readOnlyError from "@babel/runtime/helpers/esm/readOnlyError";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactDOM from 'react-dom';
 import * as Three from 'three';
 import { checkCabinetOverlap, createBacksplash, deleteSpecifiedMeshObjects, fVLine, getDistances, parseData, updateScene, visibleTransformBox } from "./scene-creator";
 import { disposeObject, disposeScene } from "./three-memory-cleaner";
 import diff from 'immutablediff';
 import * as SharedStyle from "../../shared-style";
-import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT, MODE_ROTATING_ITEM, MODE_DRAGGING_HOLE_3D, INTERNAL_EVENT_REPLACE_CABINET } from "../../constants";
+import { BASE_CABINET_LAYOUTPOS, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_HOLE_3D, MODE_DRAWING_ITEM_3D, MODE_ELEVATION_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, SECONDARY_PURPLE_COLOR, TALL_CABINET_LAYOUTPOS, UNIT_CENTIMETER, WALL_CABINET_LAYOUTPOS, INTERNAL_EVENT_SELECT_ELEMENT, INTERNAL_EVENT_DRAG_ELEMENT, INTERNAL_EVENT_DRAW_ELEMENT, INTERNAL_EVENT_ROTATE_ELEMENT, MODE_DRAGGING_HOLE_3D, INTERNAL_EVENT_REPLACE_CABINET } from "../../constants";
 import { isUndefined } from 'util';
 import { verticesDistance } from "../../utils/geometry";
 import { convert } from "../../utils/convert-units-lite";
 import { GeometryUtils } from "../../utils/export";
 import { handleCamRect, isElevationView, isEmpty, updatePayloadOfInternalEvent } from "../../utils/helper";
-import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
+import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
 import CameraControls from 'camera-controls';
 import { getAllMeshes, vectorIntersectWithMesh } from "../../utils/objects-utils";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
-import AppContext from "../../AppContext";
 CameraControls.install({
   THREE: Three
 });
@@ -50,7 +50,6 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
     _this.width = props.width;
     _this.height = props.height;
     _this.renderingID = 0;
-    _this.canvasWrapperRef = /*#__PURE__*/React.createRef();
     var mode = props.state.mode;
     if (!window.__elevationRendererDownload) {
       window.__elevationRendererDownload = {};
@@ -545,7 +544,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (item !== null) {
           var catid = item.type;
           var cat = catalog.elements[catid];
-          layoutpos = cat.info.layoutpos;
+          layoutpos = item === null || item === void 0 ? void 0 : item.layoutpos;
         }
         var oPos = new Three.Vector2(pos.clone().x, pos.clone().y);
         var sBounding = obj.children[0].userData;
@@ -565,9 +564,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             return false;
           }
           var _item = layer.items.getIn([data.id]);
-          var ocatid = _item.type;
-          var ocat = catalog.elements[ocatid];
-          var olayoutpos = ocat.info.layoutpos;
+          var olayoutpos = _item.layoutpos;
           if (!(layoutpos === BASE_CABINET_LAYOUTPOS && olayoutpos === WALL_CABINET_LAYOUTPOS || layoutpos === WALL_CABINET_LAYOUTPOS && olayoutpos === BASE_CABINET_LAYOUTPOS)) {
             var tRot = _item.rotation;
             var tPos = new Three.Vector2(_item.x, _item.y);
@@ -1190,10 +1187,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       };
       var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
         var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+        var curLayerId = _this2.props.state.scene.selectedLayer;
+        var curLayer = _this2.props.state.scene.getIn(['layers', curLayerId]);
         if (!isEmpty(evtType) && !isEmpty(evtElement)) {
-          var _state$get, _this2$props$onIntern, _this2$props;
-          var catalog = (_state$get = state.get('catalog')) === null || _state$get === void 0 ? void 0 : _state$get.toJS();
-          var payload = updatePayloadOfInternalEvent(evtElement, layer, catalog, pointArray);
+          var _this2$props$onIntern, _this2$props;
+          var payload = updatePayloadOfInternalEvent(evtElement, curLayer, pointArray);
           (_this2$props$onIntern = (_this2$props = _this2.props).onInternalEvent) === null || _this2$props$onIntern === void 0 || _this2$props$onIntern.call(_this2$props, {
             type: evtType,
             value: payload
@@ -2162,9 +2160,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         window.SPKeyDown = this.handleKeyDown;
         window.tDKeyDown = this.handleKeyDown;
       }
-      var canvasWrapper = this.canvasWrapperRef.current;
-      if (canvasWrapper) canvasWrapper.appendChild(this.renderer.domElement);
-      if (scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).size !== 0) {
+
+      // Add the output of the renderer to the html element
+      var canvasWrapper = ReactDOM.findDOMNode(this.refs.canvasWrapper);
+      canvasWrapper && canvasWrapper.appendChild(this.renderer.domElement);
+
+      //
+
+      if (scene.getIn(['layers', scene.selectedLayer, 'selected', 'items']).size != 0) {
         // if selected Object
         isSelected = true;
         selectedObject.layerID = scene.selectedLayer;
@@ -2428,10 +2431,10 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       this.renderer.renderLists.dispose();
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var nextProps = this.props;
-      if (prevProps.downloadFlag && diff(prevProps.state, nextProps.state).toJS().length === 0 || isEmpty(nextProps.state.scene)) return;
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      var _this4 = this;
+      if (this.props.downloadFlag && diff(this.props.state, nextProps.state).toJS().length == 0 || isEmpty(nextProps.state.scene)) return;
       var width = nextProps.width,
         height = nextProps.height;
       var selectedLayer = nextProps.state.getIn(['scene', 'layers', nextProps.state.scene.selectedLayer]);
@@ -2456,7 +2459,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       var allItemRect;
 
       // handle camera setting
-      switch (prevProps.state.mode) {
+      switch (this.props.state.mode) {
         case MODE_ELEVATION_VIEW:
           // when Elevation mode (camera: Orthographic)
           var cameraRect = handleCamRect(width, height, ceilHeight, this.state.lineLength);
@@ -2505,8 +2508,9 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       var prepareSnapSpec = function prepareSnapSpec(layer) {
         allLines = GeometryUtils.getAllLines(layer);
         allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allItemRect = GeometryUtils.getAllItemSpecified(prevProps.state.scene, actions.catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
+        allItemRect = GeometryUtils.getAllItemSpecified(_this4.props.state.scene, actions.catalog, [WALL_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS]);
       };
+      var layer1 = this.props.state.scene.getIn(['layers', data.selectedLayer]);
       if (this.state.showflag) {
         prepareSnapSpec(layer);
         implementBacksplash();
@@ -2515,11 +2519,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           showflag: false
         });
       }
-      if (nextProps.state.scene !== prevProps.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== prevProps.state.doorStyle.get('name')) {
-        var changedValues = diff(prevProps.state.scene, nextProps.state.scene);
+      if (nextProps.state.scene !== this.props.state.scene || nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') !== this.props.state.doorStyle.get('name')) {
+        var changedValues = diff(this.props.state.scene, nextProps.state.scene);
         prepareSnapSpec(layer);
         var isInteractiveMove = nextProps.state.mode === MODE_DRAGGING_ITEM_3D || nextProps.state.mode === MODE_ROTATING_ITEM_3D || nextProps.state.mode === MODE_DRAWING_ITEM_3D || nextProps.state.mode === MODE_DRAGGING_HOLE_3D || nextProps.state.mode === MODE_IDLE_3D;
-        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === prevProps.state.doorStyle.get('name')) {
+        if (nextProps.state.doorStyle && nextProps.state.doorStyle.get('name') === this.props.state.doorStyle.get('name')) {
           if (!isInteractiveMove) {
             self.setState({
               isLoading: true
@@ -2549,7 +2553,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         var _this$state = this.state,
           toolObj = _this$state.toolObj,
           angleObj = _this$state.angleObj;
-        var _updateScene = updateScene(this.planData, nextProps.state.scene, prevProps.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
+        var _updateScene = updateScene(this.planData, nextProps.state.scene, this.props.state.scene, changedValues.toJS(), actions, this.context.catalog, nextProps.state.mode, toolObj, angleObj, nextProps.state.draggingSupport),
           promise = _updateScene.promise;
         self.setState();
         promise.then(function (p1Value) {
@@ -2637,18 +2641,26 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         this.renderer.domElement.style.pointerEvents = 'auto';
         this.renderer.domElement.style.opacity = '1';
         !this.props.downloadFlag && document.getElementById('front') && (document.getElementById('front').style.display = 'block');
-        return /*#__PURE__*/React.createElement("div", {
-          ref: this.canvasWrapperRef
+        return /*#__PURE__*/React.createElement('div', {
+          ref: 'canvasWrapper'
         });
       }
     }
   }]);
 }(React.Component);
-_defineProperty(Scene3DViewer, "contextType", AppContext);
 export { Scene3DViewer as default };
 Scene3DViewer.propTypes = {
   state: PropTypes.object.isRequired,
   width: PropTypes.number.isRequired,
   height: PropTypes.number.isRequired,
   replaceCabinet: PropTypes.func.isRequired
+};
+Scene3DViewer.contextTypes = {
+  areaActions: PropTypes.object.isRequired,
+  holesActions: PropTypes.object.isRequired,
+  itemsActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired,
+  sceneActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object
 };

package/es/constants/catalog/skinPanel.js

@@ -0,0 +1,9 @@
+// skin panel SKU
+export var SKIN_SKU_BSV_24 = 'BSV'; // 23.25" x 34.5" : For base cabinets
+export var SKIN_SKU_BSV_48 = 'BSV48'; // 48" x 34.5" : For base cabinets back-to-back or island backs
+export var SKIN_SKU_WSV_1242 = 'WSV1242'; // 11.25" x 42" : For 12" deep wall cabinets
+export var SKIN_SKU_WSV_2442 = 'WSV2442'; // 23.25" x 42" : For 24" deep wall cabinets
+export var SKIN_SKU_WSV_2460 = 'WSV2460'; // Usually used for CT3DR or CT2DR SKUs + stacked wall cabinets
+export var SKIN_SKU_USV245325 = 'USV2453.25'; // 23.25" x 53.25" : For tall cabinets
+
+export var SKIN_HEIGHT_53_25 = 53.25; // in inch, height of the skin with SKU USV245325