kitchen-simulator 4.0.11-react-18 → 4.1.1-react-18

package/es/class/item.js

@@ -13,6 +13,7 @@ import { debugUtil } from "../utils/helper";
 import { isUndefined } from 'util';
 import { hasMoldingLayout } from "../utils/molding";
 import { getInstallationSuffix, isWarningItem } from "../components/viewer2d/utils";
+import { historyPush } from "../utils/history";
 var allItemRect;
 var allItemSnap;
 var allLines;
@@ -1541,6 +1542,9 @@ var Item = /*#__PURE__*/function () {
           });
         }
       }
+      state = state.merge({
+        sceneHistory: historyPush(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };
@@ -1663,6 +1667,9 @@ var Item = /*#__PURE__*/function () {
           updateSelectItemMolding();
         }
       }
+      state = state.merge({
+        sceneHistory: historyPush(state.sceneHistory, state.scene)
+      });
       return {
         updatedState: state
       };

package/es/components/viewer2d/viewer2d.js

@@ -995,7 +995,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1027,7 +1027,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1060,7 +1060,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1093,7 +1093,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1126,7 +1126,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1159,7 +1159,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }
@@ -1191,7 +1191,7 @@ export default function Viewer2D(_ref) {
               id: "ruler_numberInput",
               style: {
                 position: 'absolute',
-                left: bbox.left - (150 - bbox.width) / 2,
+                left: bbox.left - (200 - bbox.width) / 2,
                 top: bbox.top - (50 - bbox.height) / 2,
                 zIndex: 1000
               }

package/es/components/viewer3d/viewer3d.js

@@ -1186,10 +1186,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
       };
       var sendInternalEvent = function sendInternalEvent(evtType, evtElement) {
         var pointArray = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-        if (!isEmpty(evtType)) {
-          var _this2$props$onIntern, _this2$props;
+        if (!isEmpty(evtType) && !isEmpty(evtElement)) {
+          var _currentObject, _this2$props$onIntern, _this2$props;
           var payload = evtElement === null || evtElement === void 0 ? void 0 : evtElement.toJS();
-          if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
+          if (((_currentObject = currentObject) === null || _currentObject === void 0 ? void 0 : _currentObject.prototype) === 'lines') {
+            // caculating length of selected line//
+            var v_a = layer.vertices.get(currentObject.vertices.get(0));
+            var v_b = layer.vertices.get(currentObject.vertices.get(1));
+            var distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+            var _length = convert(distance).from('cm').to('in');
+            payload.length = _length;
+            //////////////////////////////////////
+          } else if ((evtElement === null || evtElement === void 0 ? void 0 : evtElement.prototype) === 'items') {
             // check this cabinet has warning box
             payload.isWarning = isWarningItem(evtElement);
             // check this item is available molding
@@ -1288,7 +1296,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
             if (intersects[_i1] === undefined) {
               if (transflag !== 0 && transflag !== 2) {
                 isSelected = false;
-                _this2.context.projectActions.unselectAll();
+                // this.context.projectActions.unselectAll();
                 scene3D.remove(toolObj);
                 _this2.context.itemsActions.removeReplacingSupport();
                 return;
@@ -1357,14 +1365,14 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                 selectedFlag = false;
               } else {
                 isSelected = false;
-                _this2.context.projectActions.unselectAll();
+                // this.context.projectActions.unselectAll();
                 scene3D.remove(toolObj);
                 _this2.context.itemsActions.removeReplacingSupport();
               }
             }
           } else {
             isSelected = false;
-            _this2.context.projectActions.unselectAll();
+            // this.context.projectActions.unselectAll();
             scene3D.remove(toolObj);
             _this2.context.itemsActions.removeReplacingSupport();
             return;
@@ -1412,11 +1420,18 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         }
         switch (_this2.props.state.mode) {
           case MODE_DRAGGING_ITEM_3D:
+          case MODE_DRAGGING_HOLE_3D:
             internalType = INTERNAL_EVENT_DRAG_ELEMENT;
             break;
           case MODE_ROTATING_ITEM_3D:
             internalType = INTERNAL_EVENT_ROTATE_ELEMENT;
             break;
+          case MODE_DRAWING_HOLE_3D:
+            internalType = INTERNAL_EVENT_DRAW_ELEMENT;
+            break;
+          case MODE_IDLE_3D:
+            internalType = INTERNAL_EVENT_SELECT_ELEMENT;
+            break;
         }
         if (_this2.props.state.mode == MODE_DRAGGING_ITEM_3D) {
           _this2.context.itemsActions.endDraggingItem3D();
@@ -1541,16 +1556,17 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
                   var elementPrototype = null;
                   switch (true) {
                     case 'holeID' in selectedObject:
-                    case 'lineID' in selectedObject:
+                      elementID = selectedObject.holeID;
+                      elementPrototype = 'holes';
                       if (_this2.props.state.mode === MODE_DRAGGING_HOLE_3D) {
                         actions.holesActions.endDraggingHole3D(sPoint.x, sPoint.y);
-                        internalType = INTERNAL_EVENT_SELECT_ELEMENT;
-                        elementID = selectedObject.holeID;
-                        elementPrototype = 'holes';
                       }
                       break;
+                    case 'lineID' in selectedObject:
+                      elementID = selectedObject.lineID;
+                      elementPrototype = 'lines';
+                      break;
                     case 'areaID' in selectedObject:
-                      internalType = INTERNAL_EVENT_SELECT_ELEMENT;
                       elementID = selectedObject.areaID;
                       elementPrototype = 'areas';
                       break;
@@ -2086,7 +2102,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
         if (minDis < snapDelta && !snapFlag) {
           _this2.snap(snapObj, layer);
           snapFlag = true;
-          getDistances(layer, true);
+          getDistances(layer);
           var _i13 = 0;
           for (_i13 = 0; _i13 < fVLine.length; _i13++) {
             if (fVLine[_i13].userData.distance < snapDelta) {

package/es/index.js

@@ -9,6 +9,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import LiteRenderer from "./LiteRenderer";
+import { flushSync } from 'react-dom';
 export function renderKitchenSimulator(container) {
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var setExternalEventFn = null;
@@ -29,8 +30,11 @@ export function renderKitchenSimulator(container) {
     return _createClass(Wrapper, [{
       key: "setExternalEvent",
       value: function setExternalEvent(newEvent) {
-        this.setState({
-          externalEvent: newEvent
+        var _this2 = this;
+        flushSync(function () {
+          _this2.setState({
+            externalEvent: newEvent
+          });
         });
       }
     }, {

package/lib/LiteKitchenConfigurator.js

@@ -322,14 +322,23 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         state = _this$props.state,
         projectActions = _this$props.projectActions,
         catalog = _this$props.catalog,
-        externalEvent = _this$props.externalEvent,
-        onInternalEvent = _this$props.onInternalEvent;
-      (0, _isolateEventHandler.handleExternalEvent)(this.props);
+        externalEvent = _this$props.externalEvent;
       var plannerState = stateExtractor(state);
       var catalogReady = plannerState.getIn(['catalog', 'ready']);
       if (!catalogReady) {
         projectActions.initCatalog(catalog);
       }
+      if (prevProps.externalEvent !== externalEvent && externalEvent) {
+        var _externalEvent$id, _externalEvent$payloa, _externalEvent$payloa2;
+        var key = (_externalEvent$id = externalEvent.id) !== null && _externalEvent$id !== void 0 ? _externalEvent$id : JSON.stringify({
+          type: externalEvent.type,
+          payload: (_externalEvent$payloa = (_externalEvent$payloa2 = externalEvent.payload) === null || _externalEvent$payloa2 === void 0 ? void 0 : _externalEvent$payloa2.mode) !== null && _externalEvent$payloa !== void 0 ? _externalEvent$payloa : externalEvent.payload
+        });
+        if (key !== this.lastHandledExternalEventKey) {
+          this.lastHandledExternalEventKey = key;
+          (0, _isolateEventHandler.handleExternalEvent)(this.props);
+        }
+      }
     }
   }, {
     key: "isProjectEmpty",
@@ -403,7 +412,8 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
         style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
           height: height,
           display: 'flex',
-          justifyContent: 'center'
+          justifyContent: 'center',
+          position: 'relative'
         })
       }, /*#__PURE__*/_react["default"].createElement(_export2.Content, (0, _extends2["default"])({
         width: contentW,

package/lib/catalog/factories/area-factory-3d.js

@@ -12,7 +12,7 @@ var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
 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 params = {
-  envMap: 'HDR',
+  envMap: "HDR",
   roughness: 0.9,
   metalness: 0.8,
   exposure: 1.0
@@ -67,7 +67,7 @@ var assignUVs = function assignUVs(geometry) {
     var y3 = position.getY(i + 2);
     uvArray.push((x1 + offset.x) / range.x, (y1 + offset.y) / range.y, (x2 + offset.x) / range.x, (y2 + offset.y) / range.y, (x3 + offset.x) / range.x, (y3 + offset.y) / range.y);
   }
-  geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(uvArray), 2));
+  geometry.setAttribute("uv", new Three.BufferAttribute(new Float32Array(uvArray), 2));
   geometry.needsUpdate = true;
 };
 function createArea(element, layer, scene, textures) {
@@ -78,15 +78,15 @@ function createArea(element, layer, scene, textures) {
   var texture = element.texture;
   texture.lengthRepeatScale = 0.01;
   texture.heightRepeatScale = 0.01;
-  var color = element.properties.get('patternColor');
+  var color = element.properties.get("patternColor");
   if (element.selected) {
     color = SharedStyle.AREA_MESH_COLOR.selected;
   } else {
     color = SharedStyle.AREA_MESH_COLOR.unselected;
   }
-  if (texture.uri === undefined || texture.uri == '') {
+  if (texture.uri === undefined || texture.uri == "") {
     // @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
-    texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
+    texture.uri = layer.floorStyle.uri || "https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg";
   }
   var shape = new _three.Shape();
   shape.moveTo(vertices[0].x, vertices[0].y);
@@ -94,7 +94,7 @@ function createArea(element, layer, scene, textures) {
     shape.lineTo(vertices[i].x, vertices[i].y);
   }
   function loadFloorENV() {
-    return new _RGBELoader.RGBELoader().load('/assets/Window.hdr', function (texture) {
+    return new _RGBELoader.RGBELoader().load("/assets/Window.hdr", function (texture) {
       texture.mapping = Three.EquirectangularReflectionMapping;
       return texture;
     });
@@ -114,8 +114,8 @@ function createArea(element, layer, scene, textures) {
   /* Create holes for the area */
   element.holes.forEach(function (holeID) {
     var holeCoords = [];
-    layer.getIn(['areas', holeID, 'vertices']).forEach(function (vertexID) {
-      var _layer$getIn = layer.getIn(['vertices', vertexID]),
+    layer.getIn(["areas", holeID, "vertices"]).forEach(function (vertexID) {
+      var _layer$getIn = layer.getIn(["vertices", vertexID]),
         x = _layer$getIn.x,
         y = _layer$getIn.y;
       holeCoords.push([x, y]);
@@ -142,7 +142,7 @@ function createArea(element, layer, scene, textures) {
   var area = new _three.Mesh(shapeGeometry, areaMaterial);
   area.rotation.x -= Math.PI / 2;
   area.receiveShadow = true;
-  area.name = 'floor';
+  area.name = "floor";
   // This mesh is use for creating ceiling mesh
 
   var shapeGeometry2 = new Three.ShapeGeometry(shape);
@@ -153,7 +153,7 @@ function createArea(element, layer, scene, textures) {
   area2.castShadow = true;
   area2.rotation.x -= Math.PI / 2;
   area2.receiveShadow = true;
-  area2.name = 'floorSupport';
+  area2.name = "floorSupport";
   var floorSupport = area2.clone();
   area.userData.floorSupport = floorSupport;
   return Promise.resolve(area);
@@ -163,13 +163,13 @@ function updatedArea(element, layer, scene, textures, mesh, oldElement, differen
     selfDestroy();
     return selfBuild();
   };
-  var floor = mesh.getObjectByName('floor');
+  var floor = mesh.getObjectByName("floor");
   floor.receiveShadow = true;
-  if (differences[0] == 'selected') {
+  if (differences[0] == "selected") {
     var color = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
     floor.material.color.set(color);
-  } else if (differences[0] == 'properties') {
-    if (differences[1] === 'texture') {
+  } else if (differences[0] == "properties") {
+    if (differences[1] === "texture") {
       return noPerf();
     }
   } else return noPerf();