kitchen-simulator 7.0.3-react-18 → 7.0.4-react-18

package/es/WorkSpaceHostMimic.js

@@ -1,77 +1,49 @@
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 import mockProps from "./mocks/mockProps.json";
 import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
 import renderKitchenSimulator from "./index";
-import { EXTERNAL_EVENT_CENTERING_2D, EXTERNAL_EVENT_LOAD_PROJECT, INTERNAL_EVENT_ITEMS_CATALOG } from "./constants";
+import { EXTERNAL_EVENT_CENTERING_2D, INTERNAL_EVENT_ITEMS_CATALOG } from "./constants";
 var options = {
   unit: 'in',
   enable3D: true
 };
-var onInternalEvent = /*#__PURE__*/function () {
-  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(evt, callback) {
-    var _t, _t2;
-    return _regeneratorRuntime.wrap(function (_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          console.log('INTERNAL:', evt.type);
-          _context.prev = 1;
-          if (!(evt.type === INTERNAL_EVENT_ITEMS_CATALOG)) {
-            _context.next = 3;
-            break;
-          }
-          _context.next = 2;
-          return callback === null || callback === void 0 ? void 0 : callback(projectItemsCatalog);
-        case 2:
-          return _context.abrupt("return");
-        case 3:
-          _context.next = 4;
-          return callback === null || callback === void 0 ? void 0 : callback();
-        case 4:
-          _context.next = 9;
-          break;
-        case 5:
-          _context.prev = 5;
-          _t = _context["catch"](1);
-          console.error('onInternalEvent failed', _t);
-          // still try to ack to avoid deadlocks
-          _context.prev = 6;
-          _context.next = 7;
-          return callback === null || callback === void 0 ? void 0 : callback();
-        case 7:
-          _context.next = 9;
-          break;
-        case 8:
-          _context.prev = 8;
-          _t2 = _context["catch"](6);
-        case 9:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee, null, [[1, 5], [6, 8]]);
-  }));
-  return function onInternalEvent(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-}();
-function WorkSpaceHostMimic() {
+export default function WorkSpaceHostMimic() {
   var _useResizeDetector = useResizeDetector(),
     width = _useResizeDetector.width,
     height = _useResizeDetector.height,
     sizeRef = _useResizeDetector.ref;
-
-  // ✅ pure JS refs
   var mountRef = useRef(null);
   var apiRef = useRef(null);
-  console.log('render WorkSpaceHostMimic');
-  useEffect(function () {
-    if (!mountRef.current) {
-      console.log('mountRef not ready');
-      return;
+  var sentOnceRef = useRef(false);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    inFlight = _useState2[0],
+    setInFlight = _useState2[1];
+  var rafRef = useRef(0);
+  var onInternalEvent = useCallback(function (evt, callback) {
+    try {
+      if ((evt === null || evt === void 0 ? void 0 : evt.type) === INTERNAL_EVENT_ITEMS_CATALOG) {
+        // ✅ correct shape
+        callback === null || callback === void 0 || callback({
+          elements: projectItemsCatalog
+        });
+      } else {
+        callback === null || callback === void 0 || callback();
+      }
+    } catch (e) {
+      console.error('onInternalEvent failed', e);
+      try {
+        callback === null || callback === void 0 || callback();
+      } catch (_unused) {}
     }
-    console.log('Initializing simulator');
+  }, []);
+  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,
@@ -86,60 +58,77 @@ function WorkSpaceHostMimic() {
       }
     });
     apiRef.current = api;
-    console.log('Sending immediate external events');
-    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      return _regeneratorRuntime.wrap(function (_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var unsub = typeof api.subscribeGltfInFlight === 'function' ? api.subscribeGltfInFlight(function (count) {
+      return setInFlight(count);
+    }) : null;
+    _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var ok;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
-            _context2.next = 1;
-            return api.whenReady();
+            if (!sentOnceRef.current) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
           case 1:
-            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: true
-            });
-            api.sendExternalEvents({
+            sentOnceRef.current = true;
+            _context.next = 2;
+            return api.whenReady();
+          case 2:
+            _context.next = 3;
+            return api.sendExternalEvents([{
               type: EXTERNAL_EVENT_CENTERING_2D,
               payload: {},
-              framesPerEvent: 1,
-              waitForGltfIdleAfterEachEvent: true
+              framesPerEvent: 2,
+              waitForGltfIdleAfterEachEvent: false
+            }], {
+              timeoutMs: 15000
             });
-          case 2:
+          case 3:
+            ok = _context.sent;
+            if (!ok) console.warn('Centering timed out (fail-open).');
+          case 4:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2);
+      }, _callee);
     }))();
     return function () {
       var _apiRef$current, _apiRef$current$unmou;
-      console.log('Unmounting simulator');
+      try {
+        unsub === null || unsub === void 0 || unsub();
+      } catch (_unused2) {}
       (_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
   }, []);
-
-  // Resize mimic
   useEffect(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: 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);
-      }
+    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);
+        }
+      });
     });
-  }, [width, height]);
+    return function () {
+      return cancelAnimationFrame(rafRef.current);
+    };
+  }, [width, height, onInternalEvent]);
   return /*#__PURE__*/React.createElement("div", {
     style: {
       width: '100vw',
@@ -151,7 +140,20 @@ function WorkSpaceHostMimic() {
       width: '100%',
       height: '100%'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, 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: {
@@ -159,5 +161,4 @@ function WorkSpaceHostMimic() {
       height: '100%'
     }
   })));
-}
-export default WorkSpaceHostMimic;
+}

package/es/index.js

@@ -374,10 +374,6 @@ export function renderKitchenSimulator(container) {
   }
   var setExternalEventFn = null;
   var destroyed = false;
-  var resolveReady = null;
-  var readyPromise = new Promise(function (res) {
-    return resolveReady = res;
-  });
   var queue = [];
   var pendingMarkers = new Set();
   var MARKER = Symbol('marker');
@@ -533,8 +529,7 @@ export function renderKitchenSimulator(container) {
     return _createClass(Wrapper, [{
       key: "componentDidMount",
       value: function componentDidMount() {
-        var _this3 = this,
-          _resolveReady;
+        var _this3 = this;
         this._mounted = true;
         setExternalEventFn = function setExternalEventFn(newEvent) {
           if (!_this3._mounted) return;
@@ -542,9 +537,6 @@ export function renderKitchenSimulator(container) {
             externalEvent: newEvent
           });
         };
-        (_resolveReady = resolveReady) === null || _resolveReady === void 0 || _resolveReady();
-        resolveReady = null;
-        drain(); // now it can actually process queued events
       }
     }, {
       key: "componentWillUnmount",
@@ -565,9 +557,6 @@ export function renderKitchenSimulator(container) {
     __render: function __render(nextProps) {
       root.render(/*#__PURE__*/React.createElement(Wrapper, nextProps));
     },
-    whenReady: function whenReady() {
-      return readyPromise;
-    },
     // ✅ host can query current inFlight
     getGltfInFlight: function getGltfInFlight() {
       return gltfTracker.getInFlight();
@@ -599,7 +588,7 @@ export function renderKitchenSimulator(container) {
         __marker: MARKER,
         token: token
       });
-      if (setExternalEventFn) drain();
+      drain();
 
       // resolve when marker cleared
       return new Promise(function (resolve) {
@@ -657,12 +646,9 @@ export function renderKitchenSimulator(container) {
       pendingMarkers.clear();
     },
     unmount: function unmount() {
-      var _resolveReady2;
       destroyed = true;
       api.clearQueue();
       gltfTracker.uninstall();
-      (_resolveReady2 = resolveReady) === null || _resolveReady2 === void 0 || _resolveReady2();
-      resolveReady = null;
       var doUnmount = function doUnmount() {
         try {
           root.unmount();

package/es/utils/helper.js

@@ -341,20 +341,12 @@ 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;
-
-  // modify e, f to fit to SVG
-  while (!(value.e <= 10)) {
-    value.e -= 0.1;
-  }
-  while (!(value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth)) {
-    value.e += 0.1;
-  }
-  while (!(value.f <= 80)) {
-    value.f -= 0.1;
-  }
-  while (!(value.f + value.a * value.SVGHeight + 10 >= value.viewerHeight)) {
-    value.f += 0.1;
-  }
+  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));
   if (viewer2DActions && compareSVGRect(value)) viewer2DActions.updateCameraView(value);
 };
 export function centering2D(state) {

package/package.json

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