kitchen-simulator 7.0.1-react-18 → 7.0.4-react-18

package/es/WorkSpaceHostMimic.js

@@ -0,0 +1,164 @@
+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 mockProps from "./mocks/mockProps.json";
+import projectItemsCatalog from "./mocks/projectItemsCatalog.json";
+import renderKitchenSimulator from "./index";
+import { EXTERNAL_EVENT_CENTERING_2D, INTERNAL_EVENT_ITEMS_CATALOG } from "./constants";
+var options = {
+  unit: 'in',
+  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 = 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) {}
+    }
+  }, []);
+  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,
+      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);
+      }
+    });
+    apiRef.current = api;
+    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:
+            if (!sentOnceRef.current) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            sentOnceRef.current = true;
+            _context.next = 2;
+            return api.whenReady();
+          case 2:
+            _context.next = 3;
+            return api.sendExternalEvents([{
+              type: EXTERNAL_EVENT_CENTERING_2D,
+              payload: {},
+              framesPerEvent: 2,
+              waitForGltfIdleAfterEachEvent: false
+            }], {
+              timeoutMs: 15000
+            });
+          case 3:
+            ok = _context.sent;
+            if (!ok) console.warn('Centering timed out (fail-open).');
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }))();
+    return function () {
+      var _apiRef$current, _apiRef$current$unmou;
+      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
+  }, []);
+  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]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100vw',
+      height: '100vh'
+    }
+  }, /*#__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%'
+    }
+  })));
+}