kitchen-simulator 7.0.5-react-18 → 7.0.7-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,54 @@ 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;
+    (_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 +69,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;
+            loadedRef.current = true;
 
-            // await api.whenReady();
-
-            // ✅ 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 +107,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;
+      loadedRef.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);
-    };
-  }, [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/utils/helper.js

@@ -341,12 +341,29 @@ export var updateViwer2D = function updateViwer2D(value) {
   var _zoomValue = parseInt((value.a - 0.5) / ZOOM_VARIABLE);
   if (_zoomValue > MAX_ZOOM_IN_SCALE) return;
   if (_zoomValue < 0 || Number.isNaN(_zoomValue)) return;
-  var maxE = 10;
-  var minE = value.viewerWidth - (value.a * value.SVGWidth + 10);
-  value.e = Math.min(maxE, Math.max(minE, value.e));
-  var maxF = 80;
-  var minF = value.viewerHeight - (value.a * value.SVGHeight + 10);
-  value.f = Math.min(maxF, Math.max(minF, value.f));
+  var scaledWidth = value.a * value.SVGWidth;
+  var scaledHeight = value.a * value.SVGHeight;
+
+  /* ---------- Horizontal ---------- */
+  if (scaledWidth <= value.viewerWidth) {
+    // scene smaller than viewport → force center
+    value.e = (value.viewerWidth - scaledWidth) / 2;
+  } else {
+    // scene larger → clamp normally
+    var maxE = 10;
+    var minE = value.viewerWidth - (scaledWidth + 10);
+    value.e = Math.min(maxE, Math.max(minE, value.e));
+  }
+
+  /* ---------- Vertical ---------- */
+  if (scaledHeight <= value.viewerHeight) {
+    // scene smaller than viewport → force center
+    value.f = (value.viewerHeight - scaledHeight) / 2;
+  } else {
+    var maxF = 80;
+    var minF = value.viewerHeight - (scaledHeight + 10);
+    value.f = Math.min(maxF, Math.max(minF, value.f));
+  }
   if (viewer2DActions && compareSVGRect(value)) viewer2DActions.updateCameraView(value);
 };
 export function centering2D(state) {

package/package.json

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