kitchen-simulator 7.0.6-react-18 → 7.0.8-react-18

package/es/WorkSpaceHostMimic.js

@@ -1,8 +1,6 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import React, { useEffect, useRef, useState, useCallback } from 'react';
 import mockProps from "./mocks/mockProps.json";
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import renderKitchenSimulator from "./index";
@@ -12,49 +10,58 @@ var options = {
   enable3D: true
 };
 export default function WorkSpaceHostMimic() {
-  var _useResizeDetector = useResizeDetector(),
-    width = _useResizeDetector.width,
-    height = _useResizeDetector.height,
-    sizeRef = _useResizeDetector.ref;
   var mountRef = useRef(null);
   var apiRef = useRef(null);
-  var sentOnceRef = useRef(false);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    inFlight = _useState2[0],
-    setInFlight = _useState2[1];
-  var rafRef = useRef(0);
-  var onInternalEvent = /*#__PURE__*/function () {
+  var loadedRef = useRef(false);
+  var onInternalEvent = useCallback(/*#__PURE__*/function () {
     var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt, callback) {
-      var _t;
       return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            console.log('EVENT:', evt.type, evt.value);
-            _t = evt.type;
-            _context.next = _t === INTERNAL_EVENT_ITEMS_CATALOG ? 1 : 3;
-            break;
-          case 1:
-            _context.next = 2;
+            if (!(evt.type === INTERNAL_EVENT_ITEMS_CATALOG)) {
+              _context.next = 1;
+              break;
+            }
+            _context.next = 1;
             return callback(projectItemsCatalog);
-          case 2:
-            return _context.abrupt("continue", 3);
-          case 3:
+          case 1:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
-    return function onInternalEvent(_x, _x2) {
+    return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }();
+  }(), []);
+  var renderWindow = useCallback(function () {
+    var _api$__render;
+    var api = apiRef.current;
+    if (!api) return;
+    console.log({
+      width: window.innerWidth,
+      height: window.innerHeight
+    });
+    (_api$__render = api.__render) === null || _api$__render === void 0 || _api$__render.call(api, {
+      width: window.innerWidth,
+      height: window.innerHeight,
+      configData: mockProps.configData,
+      options: options,
+      logoImg: '/assets/logo.png',
+      companyUrl: 'https://example.com',
+      toolbarButtons: [],
+      onInternalEvent: onInternalEvent,
+      onError: function onError(payload) {
+        return console.error('TOOL ERROR:', payload);
+      }
+    });
+  }, [onInternalEvent]);
   useEffect(function () {
     if (!mountRef.current) return;
     if (apiRef.current) return;
     var api = renderKitchenSimulator(mountRef.current, {
-      width: width !== null && width !== void 0 ? width : window.innerWidth,
-      height: height !== null && height !== void 0 ? height : window.innerHeight,
+      width: window.innerWidth,
+      height: window.innerHeight,
       configData: mockProps.configData,
       options: options,
       logoImg: '/assets/logo.png',
@@ -66,38 +73,36 @@ export default function WorkSpaceHostMimic() {
       }
     });
     apiRef.current = api;
-    var unsub = typeof api.subscribeGltfInFlight === 'function' ? api.subscribeGltfInFlight(function (count) {
-      return setInFlight(count);
-    }) : null;
     _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var ok;
       return _regeneratorRuntime.wrap(function (_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            if (!sentOnceRef.current) {
+            if (!loadedRef.current) {
               _context2.next = 1;
               break;
             }
             return _context2.abrupt("return");
           case 1:
-            sentOnceRef.current = true;
-
-            // await api.whenReady();
+            loadedRef.current = true;
 
-            // ✅ send center with EMPTY payload
+            // ensure a render tick happened first
+            renderWindow();
             _context2.next = 2;
+            return new Promise(function (r) {
+              return requestAnimationFrame(function () {
+                return requestAnimationFrame(r);
+              });
+            });
+          case 2:
+            _context2.next = 3;
             return api.sendExternalEvents([{
               type: EXTERNAL_EVENT_LOAD_PROJECT,
-              // send request for sync scene data to 3DTool
               payload: JSON.parse(mockProps.projectElement[0].project_data),
               framesPerEvent: 2,
               waitForGltfIdleAfterEachEvent: false
             }], {
               timeoutMs: 15000
             });
-          case 2:
-            ok = _context2.sent;
-            if (!ok) console.warn('Centering timed out (fail-open).');
           case 3:
           case "end":
             return _context2.stop();
@@ -106,69 +111,22 @@ export default function WorkSpaceHostMimic() {
     }))();
     return function () {
       var _apiRef$current, _apiRef$current$unmou;
-      try {
-        unsub === null || unsub === void 0 || unsub();
-      } catch (_unused) {}
       (_apiRef$current = apiRef.current) === null || _apiRef$current === void 0 || (_apiRef$current$unmou = _apiRef$current.unmount) === null || _apiRef$current$unmou === void 0 || _apiRef$current$unmou.call(_apiRef$current);
       apiRef.current = null;
-      sentOnceRef.current = false;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  useEffect(function () {
-    var api = apiRef.current;
-    if (!api) return;
-    cancelAnimationFrame(rafRef.current);
-    rafRef.current = requestAnimationFrame(function () {
-      var _api$__render;
-      (_api$__render = api.__render) === null || _api$__render === void 0 || _api$__render.call(api, {
-        width: width !== null && width !== void 0 ? width : window.innerWidth,
-        height: height !== null && height !== void 0 ? height : window.innerHeight,
-        configData: mockProps.configData,
-        options: options,
-        logoImg: '/assets/logo.png',
-        companyUrl: 'https://example.com',
-        toolbarButtons: [],
-        onInternalEvent: onInternalEvent,
-        onError: function onError(payload) {
-          return console.error('TOOL ERROR:', payload);
-        }
-      });
-    });
-    return function () {
-      return cancelAnimationFrame(rafRef.current);
+      loadedRef.current = false;
     };
-  }, [width, height, onInternalEvent]);
+  }, [onInternalEvent, renderWindow]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100vw',
-      height: '100vh'
+      height: '100vh',
+      position: 'relative'
     }
   }, /*#__PURE__*/React.createElement("div", {
-    ref: sizeRef,
-    style: {
-      width: '100%',
-      height: '100%'
-    }
-  }, inFlight > 0 ? /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      zIndex: 9999,
-      top: 12,
-      right: 12,
-      padding: '8px 10px',
-      borderRadius: 8,
-      background: 'rgba(0,0,0,0.6)',
-      color: 'white',
-      fontSize: 12,
-      pointerEvents: 'none'
-    }
-  }, "Loading 3D\u2026 (", inFlight, ")") : null, /*#__PURE__*/React.createElement("div", {
     ref: mountRef,
-    id: "kitchen-simulator-container",
     style: {
       width: '100%',
       height: '100%'
     }
-  })));
+  }));
 }

package/es/class/project.js

@@ -145,8 +145,26 @@ var Project = /*#__PURE__*/function () {
       var h = bb.maxY - bb.minY;
       if (w != 0 && Math.abs(w) != Infinity && h != 0 && Math.abs(h) != Infinity) {
         a = viewer.viewerHeight < h ? viewer.viewerHeight / h : (viewer.viewerHeight / h * 3 / 5 - 0.5) / constants.ZOOM_VARIABLE > 400 ? viewer.viewerHeight / h * 400 / ((viewer.viewerHeight / h - 0.5) / constants.ZOOM_VARIABLE) : viewer.viewerHeight / h * 3 / 5;
-        e = (viewer.viewerWidth - (bb.maxX + bb.minX) * a) / 2;
-        f = (viewer.viewerHeight - (bb.maxY + bb.minY) * a) / 2;
+        var scaledWidth = a * viewer.SVGWidth;
+        var scaledHeight = a * viewer.SVGHeight;
+
+        // Horizontal
+        if (scaledWidth <= viewer.viewerWidth) {
+          e = (viewer.viewerWidth - scaledWidth) / 2;
+        } else {
+          var maxE = 10;
+          var minE = viewer.viewerWidth - (scaledWidth + 10);
+          e = Math.min(maxE, Math.max(minE, e));
+        }
+
+        // Vertical
+        if (scaledHeight <= viewer.viewerHeight) {
+          f = (viewer.viewerHeight - scaledHeight) / 2;
+        } else {
+          var maxF = 80;
+          var minF = viewer.viewerHeight - (scaledHeight + 10);
+          f = Math.min(maxF, Math.max(minF, f));
+        }
         _viewer2D = _viewer2D.merge({
           a: a,
           d: a,
@@ -165,9 +183,11 @@ var Project = /*#__PURE__*/function () {
         doorStyle: doorStyle,
         viewer2D: _viewer2D
       });
+      state = centering2D(state, viewer2DActions);
       state = Item.setCounterTop(state, counterTop).updatedState;
       state = Area.setFloorStyles(state, floorStyle).updatedState;
       this.updateZoomScale(state, a);
+      viewer2DActions.updateCameraView(_viewer2D);
       return {
         updatedState: state
       };

package/es/reducers/viewer2d-reducer.js

@@ -1,5 +1,7 @@
 import { CHANGE_BASE_CABINET_MEASURE, CHANGE_WALL_CABINET_MEASURE, CHANGE_WALL_LENGTH_MEASURE, CHANGE_WINDOW_DOOR_MEASURE, MODE_2D_PAN, MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT, SELECT_TOOL_PAN, SELECT_TOOL_ZOOM_IN, SELECT_TOOL_ZOOM_OUT, UPDATE_2D_CAMERA, UPDATE_CEIL_HEIGHT, UPDATE_CEIL_HEIGHT_UNIT } from "../constants";
 import { convert } from "../utils/convert-units-lite";
+import { centering2D } from "../utils/helper";
+import * as viewer2DActions from "../actions/viewer2d-actions";
 export default function (state, action) {
   var _state = state,
     scene = _state.scene;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "7.0.6-react-18",
+  "version": "7.0.8-react-18",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "module": "es/index.js",