kitchen-simulator 3.1.15 → 3.3.0

package/lib/index.js

@@ -6,32 +6,341 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 exports.renderKitchenSimulator = renderKitchenSimulator;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = _interopRequireDefault(require("react-dom"));
 var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
+var _client = require("react-dom/client");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function nextFrame() {
+  return new Promise(function (resolve) {
+    return requestAnimationFrame(resolve);
+  });
+}
+function sleep(ms) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, ms);
+  });
+}
+
+/**
+ * Track GLTF/GLB network activity via XHR + fetch.
+ * Returns { getInFlight, waitForIdle, uninstall }.
+ */
+function installGltfTracker() {
+  var _XHR$prototype, _XHR$prototype2;
+  if (typeof window === 'undefined') {
+    return {
+      getInFlight: function getInFlight() {
+        return 0;
+      },
+      waitForIdle: function () {
+        var _waitForIdle = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          return _regenerator["default"].wrap(function (_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                return _context.abrupt("return", true);
+              case 1:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function waitForIdle() {
+          return _waitForIdle.apply(this, arguments);
+        }
+        return waitForIdle;
+      }(),
+      uninstall: function uninstall() {}
+    };
+  }
+  var inFlight = 0;
+  var listeners = new Set();
+  var notify = function notify() {
+    var _iterator = _createForOfIteratorHelper(listeners),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var fn = _step.value;
+        fn(inFlight);
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+  };
+  var isGltfUrl = function isGltfUrl(url) {
+    try {
+      var _url$toString, _url$toString2;
+      var s = typeof url === 'string' ? url : (_url$toString = url === null || url === void 0 || (_url$toString2 = url.toString) === null || _url$toString2 === void 0 ? void 0 : _url$toString2.call(url)) !== null && _url$toString !== void 0 ? _url$toString : '';
+      var u = s.toLowerCase();
+      return u.includes('.gltf') || u.includes('.glb');
+    } catch (_unused) {
+      return false;
+    }
+  };
+
+  // ---- XHR hook ----
+  var XHR = window.XMLHttpRequest;
+  var originalOpen = null;
+  var originalSend = null;
+  if (XHR !== null && XHR !== void 0 && (_XHR$prototype = XHR.prototype) !== null && _XHR$prototype !== void 0 && _XHR$prototype.open && XHR !== null && XHR !== void 0 && (_XHR$prototype2 = XHR.prototype) !== null && _XHR$prototype2 !== void 0 && _XHR$prototype2.send) {
+    originalOpen = XHR.prototype.open;
+    originalSend = XHR.prototype.send;
+    XHR.prototype.open = function (method, url) {
+      var _originalOpen;
+      this.__isGltfRequest = isGltfUrl(url);
+      for (var _len = arguments.length, rest = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+        rest[_key - 2] = arguments[_key];
+      }
+      return (_originalOpen = originalOpen).call.apply(_originalOpen, [this, method, url].concat(rest));
+    };
+    XHR.prototype.send = function () {
+      var _this = this;
+      if (this.__isGltfRequest) {
+        inFlight += 1;
+        notify();
+        var _done = function done() {
+          inFlight -= 1;
+          if (inFlight < 0) inFlight = 0;
+          notify();
+          _this.removeEventListener('loadend', _done);
+        };
+        this.addEventListener('loadend', _done);
+      }
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return originalSend.apply(this, args);
+    };
+  }
+
+  // ---- fetch hook ----
+  var originalFetch = window.fetch;
+  if (typeof originalFetch === 'function') {
+    window.fetch = /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+      var _len3,
+        args,
+        _key3,
+        url,
+        track,
+        _args2 = arguments;
+      return _regenerator["default"].wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            for (_len3 = _args2.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+              args[_key3] = _args2[_key3];
+            }
+            url = args === null || args === void 0 ? void 0 : args[0];
+            track = isGltfUrl(url);
+            if (track) {
+              _context2.next = 1;
+              break;
+            }
+            return _context2.abrupt("return", originalFetch.apply(this, args));
+          case 1:
+            inFlight += 1;
+            notify();
+            _context2.prev = 2;
+            _context2.next = 3;
+            return originalFetch.apply(this, args);
+          case 3:
+            return _context2.abrupt("return", _context2.sent);
+          case 4:
+            _context2.prev = 4;
+            inFlight -= 1;
+            if (inFlight < 0) inFlight = 0;
+            notify();
+            return _context2.finish(4);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2, this, [[2,, 4, 5]]);
+    }));
+  }
+  var subscribe = function subscribe(fn) {
+    listeners.add(fn);
+    fn(inFlight);
+    return function () {
+      return listeners["delete"](fn);
+    };
+  };
+
+  /**
+   * Wait until GLTF network is idle (inFlight===0).
+   * Includes a grace window to catch loads that start slightly after the event.
+   */
+  var waitForIdle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+      var _ref3,
+        _ref3$timeoutMs,
+        timeoutMs,
+        _ref3$graceMs,
+        graceMs,
+        start,
+        _args3 = arguments;
+      return _regenerator["default"].wrap(function (_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            _ref3 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref3$timeoutMs = _ref3.timeoutMs, timeoutMs = _ref3$timeoutMs === void 0 ? 30000 : _ref3$timeoutMs, _ref3$graceMs = _ref3.graceMs, graceMs = _ref3$graceMs === void 0 ? 50 : _ref3$graceMs;
+            start = Date.now(); // Grace: give async pipelines a chance to start requests
+            if (!(graceMs > 0)) {
+              _context3.next = 1;
+              break;
+            }
+            _context3.next = 1;
+            return sleep(graceMs);
+          case 1:
+            return _context3.abrupt("return", new Promise(function (resolve, reject) {
+              var unsub = subscribe(function (count) {
+                if (count === 0) {
+                  unsub();
+                  resolve(true);
+                  return;
+                }
+                if (Date.now() - start > timeoutMs) {
+                  unsub();
+                  reject(new Error('GLTF did not become idle within timeout'));
+                }
+              });
+            }));
+          case 2:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function waitForIdle() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var uninstall = function uninstall() {
+    var _XHR$prototype3, _XHR$prototype4;
+    if (XHR !== null && XHR !== void 0 && (_XHR$prototype3 = XHR.prototype) !== null && _XHR$prototype3 !== void 0 && _XHR$prototype3.open && originalOpen) XHR.prototype.open = originalOpen;
+    if (XHR !== null && XHR !== void 0 && (_XHR$prototype4 = XHR.prototype) !== null && _XHR$prototype4 !== void 0 && _XHR$prototype4.send && originalSend) XHR.prototype.send = originalSend;
+    if (typeof originalFetch === 'function') window.fetch = originalFetch;
+    listeners.clear();
+    inFlight = 0;
+  };
+  return {
+    getInFlight: function getInFlight() {
+      return inFlight;
+    },
+    waitForIdle: waitForIdle,
+    uninstall: uninstall
+  };
+}
 function renderKitchenSimulator(container) {
+  var _props$framesPerEvent, _props$waitForGltfIdl, _props$gltfTimeoutMs, _props$gltfGraceMs;
   var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var root = (0, _client.createRoot)(container);
   var setExternalEventFn = null;
+  var queue = [];
+  var pendingMarkers = new Set();
+  var draining = false;
+  var destroyed = false;
+  var FRAMES_PER_EVENT = (_props$framesPerEvent = props.framesPerEvent) !== null && _props$framesPerEvent !== void 0 ? _props$framesPerEvent : 2;
+
+  // ✅ assume all events may load gltfs
+  var WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT = (_props$waitForGltfIdl = props.waitForGltfIdleAfterEachEvent) !== null && _props$waitForGltfIdl !== void 0 ? _props$waitForGltfIdl : true;
+  var GLTF_TIMEOUT_MS = (_props$gltfTimeoutMs = props.gltfTimeoutMs) !== null && _props$gltfTimeoutMs !== void 0 ? _props$gltfTimeoutMs : 30000;
+  var GLTF_GRACE_MS = (_props$gltfGraceMs = props.gltfGraceMs) !== null && _props$gltfGraceMs !== void 0 ? _props$gltfGraceMs : 50;
+  var gltfTracker = installGltfTracker();
+  function drain() {
+    return _drain.apply(this, arguments);
+  }
+  function _drain() {
+    _drain = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+      var _setExternalEventFn, ev, i, _ev$gltfTimeoutMs, _ev$gltfGraceMs;
+      return _regenerator["default"].wrap(function (_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            if (!(draining || destroyed)) {
+              _context5.next = 1;
+              break;
+            }
+            return _context5.abrupt("return");
+          case 1:
+            draining = true;
+            _context5.prev = 2;
+          case 3:
+            if (!(queue.length && !destroyed)) {
+              _context5.next = 10;
+              break;
+            }
+            ev = queue.shift(); // skip internal markers
+            if (!(ev && ev.__batchMarker)) {
+              _context5.next = 4;
+              break;
+            }
+            pendingMarkers["delete"](ev.__batchMarker);
+            return _context5.abrupt("continue", 3);
+          case 4:
+            (_setExternalEventFn = setExternalEventFn) === null || _setExternalEventFn === void 0 || _setExternalEventFn(ev);
 
-  // Internal wrapper that exposes a state setter
+            // baseline spacing for react + legacy lifecycle
+            i = 0;
+          case 5:
+            if (!(i < FRAMES_PER_EVENT)) {
+              _context5.next = 7;
+              break;
+            }
+            _context5.next = 6;
+            return nextFrame();
+          case 6:
+            i += 1;
+            _context5.next = 5;
+            break;
+          case 7:
+            if (!WAIT_FOR_GLTF_IDLE_AFTER_EACH_EVENT) {
+              _context5.next = 9;
+              break;
+            }
+            _context5.next = 8;
+            return gltfTracker.waitForIdle({
+              timeoutMs: (_ev$gltfTimeoutMs = ev === null || ev === void 0 ? void 0 : ev.gltfTimeoutMs) !== null && _ev$gltfTimeoutMs !== void 0 ? _ev$gltfTimeoutMs : GLTF_TIMEOUT_MS,
+              graceMs: (_ev$gltfGraceMs = ev === null || ev === void 0 ? void 0 : ev.gltfGraceMs) !== null && _ev$gltfGraceMs !== void 0 ? _ev$gltfGraceMs : GLTF_GRACE_MS
+            });
+          case 8:
+            _context5.next = 9;
+            return nextFrame();
+          case 9:
+            _context5.next = 3;
+            break;
+          case 10:
+            _context5.prev = 10;
+            draining = false;
+            return _context5.finish(10);
+          case 11:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee5, null, [[2,, 10, 11]]);
+    }));
+    return _drain.apply(this, arguments);
+  }
   var Wrapper = /*#__PURE__*/function (_React$Component) {
     function Wrapper(p) {
-      var _this;
+      var _this2;
       (0, _classCallCheck2["default"])(this, Wrapper);
-      _this = _callSuper(this, Wrapper, [p]);
-      _this.state = {
+      _this2 = _callSuper(this, Wrapper, [p]);
+      _this2.state = {
         externalEvent: p.externalEvent || null
       };
-      setExternalEventFn = _this.setExternalEvent.bind(_this);
-      return _this;
+      setExternalEventFn = _this2.setExternalEvent.bind(_this2);
+      return _this2;
     }
     (0, _inherits2["default"])(Wrapper, _React$Component);
     return (0, _createClass2["default"])(Wrapper, [{
@@ -49,15 +358,80 @@ function renderKitchenSimulator(container) {
         }));
       }
     }]);
-  }(_react["default"].Component); // Mount once
-  _reactDom["default"].render(/*#__PURE__*/_react["default"].createElement(Wrapper, props), container);
+  }(_react["default"].Component);
+  root.render(/*#__PURE__*/_react["default"].createElement(Wrapper, props));
   return {
+    sendExternalEvents: function sendExternalEvents(eventOrEvents) {
+      var events = Array.isArray(eventOrEvents) ? eventOrEvents : [eventOrEvents];
+      var _iterator2 = _createForOfIteratorHelper(events),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var e = _step2.value;
+          queue.push(e);
+        }
+
+        // marker for this batch
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var token = Symbol('batch');
+      pendingMarkers.add(token);
+      queue.push({
+        __batchMarker: token
+      });
+      drain();
+      return new Promise(function (resolve) {
+        var check = /*#__PURE__*/function () {
+          var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+            return _regenerator["default"].wrap(function (_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
+                case 0:
+                  if (destroyed) {
+                    _context4.next = 3;
+                    break;
+                  }
+                  if (!pendingMarkers.has(token)) {
+                    _context4.next = 2;
+                    break;
+                  }
+                  _context4.next = 1;
+                  return nextFrame();
+                case 1:
+                  return _context4.abrupt("continue", 0);
+                case 2:
+                  resolve(true);
+                  return _context4.abrupt("return");
+                case 3:
+                  resolve(false);
+                case 4:
+                case "end":
+                  return _context4.stop();
+              }
+            }, _callee4);
+          }));
+          return function check() {
+            return _ref4.apply(this, arguments);
+          };
+        }();
+        check();
+      });
+    },
     updateExternalEvent: function updateExternalEvent(newExternalEvent) {
-      var _setExternalEventFn;
-      (_setExternalEventFn = setExternalEventFn) === null || _setExternalEventFn === void 0 || _setExternalEventFn(newExternalEvent);
+      return this.sendExternalEvents(newExternalEvent);
+    },
+    clearQueue: function clearQueue() {
+      queue.length = 0;
+      pendingMarkers.clear();
     },
     unmount: function unmount() {
-      _reactDom["default"].unmountComponentAtNode(container);
+      var _this$clearQueue;
+      destroyed = true;
+      (_this$clearQueue = this.clearQueue) === null || _this$clearQueue === void 0 || _this$clearQueue.call(this);
+      gltfTracker.uninstall();
+      root.unmount();
     }
   };
 }

package/lib/models.js

@@ -348,7 +348,8 @@ var CatalogElement = exports.CatalogElement = /*#__PURE__*/function (_Record1) {
   properties: new _immutable.Map(),
   obj: new _immutable.Map(),
   type: '',
-  cds: new _immutable.Map()
+  cds: new _immutable.Map(),
+  structure_json: {}
 }, 'CatalogElement'));
 var Catalog = exports.Catalog = /*#__PURE__*/function (_Record10) {
   function Catalog() {

package/lib/utils/isolate-event-handler.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.handleExternalEvent = handleExternalEvent;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
@@ -488,59 +489,116 @@ function addItemToCatalog(_x5, _x6, _x7, _x8) {
 } // Get attributs of current selected element
 function _addItemToCatalog() {
   _addItemToCatalog = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(element, state, catalogInstance, projectActions) {
-    var _element, _element2;
-    var elementJs, catalog, outlineSVGData, _element$structure_js, _element$structure_js2, _element$structure_js3, updatedStructureJson;
+    var _elementJs, _elementJs3;
+    var elementJs, outlineSVGData, _state$getIn, _elementJs$structure_, _elementJs$structure_2, _elementJs$structure_3, cds, _cds$find, _elementJs2, currentCdsId, cdsIdx, ttph, updatedStructureJson, catalogElements, catalogElementKeys, catalogItem, k, _catalogElements$cata, tempPlaceholderArray, _catalogItem$structur, newTempPlaceholderArray, mergedTempPlaceholder;
     return _regenerator["default"].wrap(function (_context5) {
       while (1) switch (_context5.prev = _context5.next) {
         case 0:
-          if (!(0, _helper.isEmpty)((_element = element) === null || _element === void 0 ? void 0 : _element.name)) {
+          if (!(0, _helper.isEmpty)(element === null || element === void 0 ? void 0 : element.name)) {
             _context5.next = 1;
             break;
           }
           return _context5.abrupt("return");
         case 1:
-          elementJs = element;
-          catalog = state.getIn(['catalog']).toJS(); // add item to catalog of state
-          // if (isEmpty(catalog?.elements[element.name])) {
+          // clone element
+          elementJs = Object.assign({}, element); // if (isEmpty(catalog?.elements[element.name])) {
           _context5.next = 2;
-          return loadSVGsByItem(element);
+          return loadSVGsByItem(elementJs);
         case 2:
           outlineSVGData = _context5.sent;
-          if (!(((_element2 = element) === null || _element2 === void 0 ? void 0 : _element2.type) === 'cabinet')) {
+          if (!(((_elementJs = elementJs) === null || _elementJs === void 0 ? void 0 : _elementJs.type) === 'cabinet')) {
             _context5.next = 4;
             break;
           }
+          // move the tempPlaceholder of current door style to first of tempPlaceholders array
+          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
+          if (cds) {
+            currentCdsId = (_cds$find = cds.find(function (c) {
+              return c.itemID === elementJs.itemID;
+            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
+            cdsIdx = (_elementJs2 = elementJs) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.structure_json) === null || _elementJs2 === void 0 || (_elementJs2 = _elementJs2.tempPlaceholders) === null || _elementJs2 === void 0 ? void 0 : _elementJs2.findIndex(function (tph) {
+              return tph.id === currentCdsId;
+            }); // swap
+            if (currentCdsId && cdsIdx >= 0) {
+              ttph = elementJs.structure_json.tempPlaceholders[0];
+              elementJs.structure_json.tempPlaceholders[0] = elementJs.structure_json.tempPlaceholders[cdsIdx];
+              elementJs.structure_json.tempPlaceholders[cdsIdx] = ttph;
+            }
+          }
           // make placeholders of element and tempPlaceholder
-          updatedStructureJson = _objectSpread(_objectSpread({}, element.structure_json), (_element$structure_js = (_element$structure_js2 = element.structure_json) === null || _element$structure_js2 === void 0 || (_element$structure_js2 = _element$structure_js2.tempPlaceholders[0]) === null || _element$structure_js2 === void 0 ? void 0 : _element$structure_js2.structure) !== null && _element$structure_js !== void 0 ? _element$structure_js : {});
-          element.structure_json = updatedStructureJson;
-          element = _objectSpread(_objectSpread({}, element), {}, {
+          updatedStructureJson = _objectSpread(_objectSpread({}, elementJs.structure_json), (_elementJs$structure_ = (_elementJs$structure_2 = elementJs.structure_json) === null || _elementJs$structure_2 === void 0 || (_elementJs$structure_2 = _elementJs$structure_2.tempPlaceholders[0]) === null || _elementJs$structure_2 === void 0 ? void 0 : _elementJs$structure_2.structure) !== null && _elementJs$structure_ !== void 0 ? _elementJs$structure_ : {});
+          elementJs.structure_json = updatedStructureJson;
+          elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             cds: {
-              data: [_objectSpread({}, element.customer_property)],
-              itemID: element.itemID
+              data: [_objectSpread({}, elementJs.customer_property)],
+              itemID: elementJs.itemID
             }
           });
-          if ((0, _helper.isEmpty)((_element$structure_js3 = element.structure_json) === null || _element$structure_js3 === void 0 ? void 0 : _element$structure_js3.tempPlaceholders)) {
+          if ((0, _helper.isEmpty)((_elementJs$structure_3 = elementJs.structure_json) === null || _elementJs$structure_3 === void 0 ? void 0 : _elementJs$structure_3.tempPlaceholders)) {
             _context5.next = 4;
             break;
           }
           _context5.next = 3;
-          return updateCabinetPayload(element);
+          return updateCabinetPayload(elementJs);
         case 3:
           elementJs = _context5.sent;
         case 4:
           elementJs = _objectSpread(_objectSpread({}, elementJs), {}, {
             outlineSVGData: outlineSVGData,
-            type: element.type,
+            type: elementJs.type,
             render2DItem: _itemLoader.render2DItem
           });
-          if (element.type === 'appliance' || element.type === 'furnishing') elementJs.render3DItem = _itemLoader.render3DApplianceItem;else if (element.type === 'lighting') elementJs.render3DItem = _itemLoader.render3DLightingItem;else elementJs.render3DItem = _itemLoader.render3DItem;
+          if (elementJs.type === 'appliance' || elementJs.type === 'furnishing') elementJs.render3DItem = _itemLoader.render3DApplianceItem;else if (elementJs.type === 'lighting') elementJs.render3DItem = _itemLoader.render3DLightingItem;else elementJs.render3DItem = _itemLoader.render3DItem;
+
+          /***** join new tempPlaceholder to the old element - start *****/
+          // get catalog item by itemID
+          catalogElements = state.getIn(['catalog', 'elements']).toJS();
+          catalogElementKeys = Object.keys(catalogElements);
+          catalogItem = null;
+          k = 0;
+        case 5:
+          if (!(k < catalogElementKeys.length)) {
+            _context5.next = 7;
+            break;
+          }
+          if (!(((_catalogElements$cata = catalogElements[catalogElementKeys[k]]) === null || _catalogElements$cata === void 0 ? void 0 : _catalogElements$cata.itemID) === elementJs.itemID)) {
+            _context5.next = 6;
+            break;
+          }
+          catalogItem = catalogElements[catalogElementKeys[k]];
+          return _context5.abrupt("continue", 7);
+        case 6:
+          k++;
+          _context5.next = 5;
+          break;
+        case 7:
+          // get old tempPlaceholder array from catalog item
+          tempPlaceholderArray = null;
+          if (!(0, _helper.isEmpty)(catalogItem)) {
+            tempPlaceholderArray = (_catalogItem$structur = catalogItem.structure_json) === null || _catalogItem$structur === void 0 ? void 0 : _catalogItem$structur.tempPlaceholders;
+          }
+
+          // join new tempPlaceholder array to old one
+          newTempPlaceholderArray = [];
+          (_elementJs3 = elementJs) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.structure_json) === null || _elementJs3 === void 0 || (_elementJs3 = _elementJs3.tempPlaceholders) === null || _elementJs3 === void 0 || _elementJs3.forEach(function (tph) {
+            var _tempPlaceholderArray;
+            if (!((_tempPlaceholderArray = tempPlaceholderArray) !== null && _tempPlaceholderArray !== void 0 && _tempPlaceholderArray.some(function (otph) {
+              return otph.id === tph.id;
+            }))) newTempPlaceholderArray.push(tph);
+          });
+          mergedTempPlaceholder = null;
+          if ((0, _helper.isEmpty)(tempPlaceholderArray)) mergedTempPlaceholder = newTempPlaceholderArray;else if ((0, _helper.isEmpty)(newTempPlaceholderArray)) mergedTempPlaceholder = tempPlaceholderArray;else mergedTempPlaceholder = [].concat((0, _toConsumableArray2["default"])(tempPlaceholderArray), newTempPlaceholderArray);
+
+          // rplace new array to the elementJS
+          if (!(0, _helper.isEmpty)(mergedTempPlaceholder)) elementJs.structure_json.tempPlaceholders = mergedTempPlaceholder;
+          /***** join new tempPlaceholder to the old element - end *****/
+
           elementJs = (0, _exporter["default"])(elementJs);
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
             catalogInstance.registerElement(elementJs);
             projectActions.addElementToCatalog(elementJs);
           }
-          // }
-        case 5:
+        case 8:
         case "end":
           return _context5.stop();
       }
@@ -729,11 +787,11 @@ function updateAttributeOfSelectedElement(element, attrPayload, state, layer, ca
           attributesFormData = attributesFormData.set('y', yVal);
         } else {
           attributesFormData = attributesFormData.set(attributeName, value);
-          // update the distances from wall
-          var _GeometryUtils$calcDi = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
-            PointArray = _GeometryUtils$calcDi.PointArray;
-          attributesFormData = attributesFormData.set('distArray', PointArray);
         }
+        // update the distances from wall
+        var _GeometryUtils$calcDi = _export.GeometryUtils.calcDistancesFromItemToWalls(attributesFormData, layer),
+          PointArray = _GeometryUtils$calcDi.PointArray;
+        attributesFormData = attributesFormData.set('distArray', PointArray);
         break;
       }
     case 'lines':
@@ -1100,7 +1158,7 @@ function handleExternalEvent(_x10) {
 function _handleExternalEvent() {
   _handleExternalEvent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9(props) {
     var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, _state$getIn, element, cds, _cds$find, currentCdsId, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
+    var evt, state, layerId, layer, _evt$payload, cdsItems, itemKeys, _loop3, i, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _Object$keys, _evt$payload5, doorStyle, itemCDS, isAll, _layerId, _cdsItems, allItems, selectedItemId, _itemKeys, _loop4, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$onInternalEven3, sceneData, currentTexture, _t5, _t6;
     return _regenerator["default"].wrap(function (_context1) {
       while (1) switch (_context1.prev = _context1.next) {
         case 0:
@@ -1217,19 +1275,7 @@ function _handleExternalEvent() {
             _context1.next = 11;
             break;
           }
-          element = evt.payload; ///// filter the tempPlaceholders using layer-doorstyle-cds
-          cds = (_state$getIn = state.getIn(['scene', 'layers', 'layer-1', 'doorStyle'])) === null || _state$getIn === void 0 ? void 0 : _state$getIn.cds;
-          if (cds) {
-            currentCdsId = (_cds$find = cds.find(function (c) {
-              return c.itemID === element.itemID;
-            })) === null || _cds$find === void 0 ? void 0 : _cds$find.cabinet_door_style_id;
-            if (currentCdsId && element.structure_json.tempPlaceholders.length > 0) {
-              element.structure_json.tempPlaceholders[0] = element.structure_json.tempPlaceholders.find(function (tPlaceholder) {
-                return tPlaceholder.id === currentCdsId;
-              });
-            }
-          }
-          /////
+          element = evt.payload;
           _context1.next = 10;
           return addItemToCatalog(element, state, props.catalog, props.projectActions);
         case 10:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "3.1.15",
+  "version": "3.3.0",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",