kitchen-simulator 1.0.0-alin.1 → 1.0.0-alin.11

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

@@ -1,56 +1,159 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { fromJS, List, Map, Record } from 'immutable';
 import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, MODE_IDLE, MODE_2D_PAN, EXTERNAL_EVENT_ADD_ITEM, ARRAY_3D_MODES, MODE_IDLE_3D, MODE_ELEVATION_VIEW, TOP, BOTTOM, LEFT, RIGHT, EXTERNAL_EVENT_NEW_PROJECT } from "../constants";
 import { isEmpty } from "./helper";
-export function handleExternalEvent(evt, props) {
-  var state = props.state;
-  switch (evt === null || evt === void 0 ? void 0 : evt.type) {
-    case EXTERNAL_EVENT_TOGGLE_TO_3D:
-      props.projectActions.setMode(MODE_IDLE_3D);
-      break;
-    case EXTERNAL_EVENT_TOGGLE_TO_2D:
-      props.projectActions.setMode(MODE_IDLE);
-      break;
-    case EXTERNAL_EVENT_TOGGLE_TO_ELEVATION:
-      props.projectActions.setMode(MODE_ELEVATION_VIEW);
-      break;
-    case EXTERNAL_EVENT_ADD_WALL:
-      if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
-        props.projectActions.setMode(MODE_IDLE);
-        props.linesActions.selectToolDrawingLine('wall');
+import exporter from "../catalog/utils/exporter";
+import { render2DItem, render3DItem } from "../catalog/utils/item-loader";
+import Catalog from "../catalog/catalog";
+import { CatalogElement, safeLoadMapList } from "../models";
+var loadSVGsByItem = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
+    var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (item.outline) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 1:
+          _context.prev = 1;
+          _context.next = 2;
+          return fetch(item.outline, {
+            cache: 'no-store'
+          });
+        case 2:
+          response = _context.sent;
+          _context.next = 3;
+          return response.text();
+        case 3:
+          svgText = _context.sent;
+          loader = new SVGLoader();
+          parsed = loader.parse(svgText);
+          if (!isEmpty(parsed.paths)) {
+            _context.next = 4;
+            break;
+          }
+          return _context.abrupt("return", null);
+        case 4:
+          return _context.abrupt("return", {
+            paths: parsed.paths,
+            svgWidth: parseFloat(parsed.xml.getAttribute('width')) || ((_parsed$xml$viewBox = parsed.xml.viewBox) === null || _parsed$xml$viewBox === void 0 || (_parsed$xml$viewBox = _parsed$xml$viewBox.animVal) === null || _parsed$xml$viewBox === void 0 ? void 0 : _parsed$xml$viewBox.width) || 0,
+            svgHeight: parseFloat(parsed.xml.getAttribute('height')) || ((_parsed$xml$viewBox2 = parsed.xml.viewBox) === null || _parsed$xml$viewBox2 === void 0 || (_parsed$xml$viewBox2 = _parsed$xml$viewBox2.animVal) === null || _parsed$xml$viewBox2 === void 0 ? void 0 : _parsed$xml$viewBox2.height) || 0,
+            reverse: !parseFloat(parsed.xml.getAttribute('height'))
+          });
+        case 5:
+          _context.prev = 5;
+          _t = _context["catch"](1);
+          console.error('Failed to load SVG:', item.outline, _t);
+          return _context.abrupt("return", null);
+        case 6:
+        case "end":
+          return _context.stop();
       }
-      break;
-    case EXTERNAL_EVENT_ADD_ITEM:
-      {
-        var element = evt.payload;
-        !isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload) && ARRAY_3D_MODES.includes(state.mode) ? props.itemsActions.selectToolDrawingItem3D(element.name) : props.itemsActions.selectToolDrawingItem(element.name);
-        props.projectActions.pushLastSelectedCatalogElementToHistory(element);
-        props.projectActions.setIsCabinetDrawing(true);
-      }
-      break;
-    case EXTERNAL_EVENT_MOVE_PAN:
-      var _evt$payload = evt.payload,
-        moveType = _evt$payload.moveType,
-        moveValue = _evt$payload.moveValue;
-      var value = state.getIn(['KitchenConfigurator', 'viewer2D']).toJS();
-      switch (moveType) {
-        case TOP:
-          value.f -= moveValue;
+    }, _callee, null, [[1, 5]]);
+  }));
+  return function loadSVGsByItem(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+export function handleExternalEvent(_x2, _x3) {
+  return _handleExternalEvent.apply(this, arguments);
+}
+function _handleExternalEvent() {
+  _handleExternalEvent = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(evt, props) {
+    var state, sLineCnt, element, catalog, outlineSVGData, catalogInstance, elementJs, _evt$payload, moveType, moveValue, value, defaulTitle, _t2, _t3;
+    return _regeneratorRuntime.wrap(function (_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          state = props.state;
+          _t2 = evt === null || evt === void 0 ? void 0 : evt.type;
+          _context2.next = _t2 === EXTERNAL_EVENT_TOGGLE_TO_3D ? 1 : _t2 === EXTERNAL_EVENT_TOGGLE_TO_2D ? 2 : _t2 === EXTERNAL_EVENT_TOGGLE_TO_ELEVATION ? 3 : _t2 === EXTERNAL_EVENT_ADD_WALL ? 4 : _t2 === EXTERNAL_EVENT_ADD_ITEM ? 5 : _t2 === EXTERNAL_EVENT_MOVE_PAN ? 9 : _t2 === EXTERNAL_EVENT_NEW_PROJECT ? 15 : 16;
           break;
-        case BOTTOM:
-          value.f += moveValue;
+        case 1:
+          props.projectActions.setMode(MODE_IDLE_3D);
+          return _context2.abrupt("continue", 16);
+        case 2:
+          props.projectActions.setMode(MODE_IDLE);
+          return _context2.abrupt("continue", 16);
+        case 3:
+          sLineCnt = state.getIn(['KitchenConfigurator', 'scene', 'layers', 'layer-1', 'selected', 'lines']).size;
+          if (sLineCnt > 0) props.projectActions.setMode(MODE_ELEVATION_VIEW);
+          return _context2.abrupt("continue", 16);
+        case 4:
+          if (state.mode === MODE_IDLE || state.mode === MODE_2D_PAN) props.linesActions.selectToolDrawingLine('wall');else {
+            props.projectActions.setMode(MODE_IDLE);
+            props.linesActions.selectToolDrawingLine('wall');
+          }
+          return _context2.abrupt("continue", 16);
+        case 5:
+          if (isEmpty(evt === null || evt === void 0 ? void 0 : evt.payload)) {
+            _context2.next = 8;
+            break;
+          }
+          element = evt.payload;
+          catalog = state.getIn(['KitchenConfigurator', 'catalog']).toJS(); // add item to catalog of state
+          if (!isEmpty(catalog === null || catalog === void 0 ? void 0 : catalog.elements[element.name])) {
+            _context2.next = 7;
+            break;
+          }
+          _context2.next = 6;
+          return loadSVGsByItem(element);
+        case 6:
+          outlineSVGData = _context2.sent;
+          catalogInstance = props.catalog;
+          elementJs = exporter(_objectSpread(_objectSpread({}, element), {}, {
+            outlineSVGData: outlineSVGData,
+            type: 'cabinet',
+            render2DItem: render2DItem,
+            render3DItem: render3DItem
+          }));
+          if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
+            props.projectActions.addElementToCatalog(elementJs);
+          }
+        case 7:
+          // start drawing item
+          ARRAY_3D_MODES.includes(state.mode) ? props.itemsActions.selectToolDrawingItem3D(element.name) : props.itemsActions.selectToolDrawingItem(element.name);
+          props.projectActions.pushLastSelectedCatalogElementToHistory(element);
+          props.projectActions.setIsCabinetDrawing(true);
+        case 8:
+          return _context2.abrupt("continue", 16);
+        case 9:
+          _evt$payload = evt.payload, moveType = _evt$payload.moveType, moveValue = _evt$payload.moveValue;
+          value = state.getIn(['KitchenConfigurator', 'viewer2D']).toJS();
+          _t3 = moveType;
+          _context2.next = _t3 === TOP ? 10 : _t3 === BOTTOM ? 11 : _t3 === RIGHT ? 12 : _t3 === LEFT ? 13 : 14;
           break;
-        case RIGHT:
+        case 10:
+          value.f -= moveValue;
+          return _context2.abrupt("continue", 14);
+        case 11:
+          value.f += moveValue;
+          return _context2.abrupt("continue", 14);
+        case 12:
           value.e += moveValue;
-          break;
-        case LEFT:
+          return _context2.abrupt("continue", 14);
+        case 13:
           value.e -= moveValue;
-          break;
+          return _context2.abrupt("continue", 14);
+        case 14:
+          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) props.viewer2DActions.updateCameraView(value);
+          return _context2.abrupt("continue", 16);
+        case 15:
+          defaulTitle = 'Untitle';
+          props.projectActions.newProject();
+          props.projectActions.rename(defaulTitle);
+          return _context2.abrupt("continue", 16);
+        case 16:
+        case "end":
+          return _context2.stop();
       }
-      if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) props.viewer2DActions.updateCameraView(value);
-      break;
-    case EXTERNAL_EVENT_NEW_PROJECT:
-      var defaulTitle = 'Untitle';
-      props.projectActions.newProject();
-      props.projectActions.rename(defaulTitle);
-      break;
-  }
+    }, _callee2);
+  }));
+  return _handleExternalEvent.apply(this, arguments);
 }

package/lib/LiteRenderer.js

@@ -8,10 +8,15 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = LiteRenderer;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+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 _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRedux = require("react-redux");
@@ -35,10 +40,12 @@ var _projectActions = require("./actions/project-actions");
 var _exporter = _interopRequireDefault(require("./catalog/utils/exporter"));
 var THREE = _interopRequireWildcard(require("three"));
 var _LiteKitchenConfigurator = _interopRequireDefault(require("./LiteKitchenConfigurator"));
-var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onEvent", "onSave", "onError"];
+var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onError"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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; })(); }
 if (typeof window !== 'undefined') window.THREE = THREE;
 
 /* ============================== component ============================= */
@@ -87,6 +94,62 @@ var store = (0, _redux.createStore)(reducer, null, !isProduction && window.devTo
   return f;
 });
 var plugins = [(0, _export2.Keyboard)(), (0, _export2.ConsoleDebugger)()];
+function serializeError(err) {
+  try {
+    if (!err) return {
+      message: 'Unknown error'
+    };
+    if (err instanceof Error) {
+      return {
+        name: err.name,
+        message: err.message,
+        stack: err.stack
+      };
+    }
+    return {
+      message: String(err),
+      raw: safeJson(err)
+    };
+  } catch (_unused) {
+    return {
+      message: 'Error serializing error'
+    };
+  }
+}
+function safeJson(v) {
+  try {
+    return JSON.parse(JSON.stringify(v));
+  } catch (_unused2) {
+    return undefined;
+  }
+}
+
+/* ---------- Error Boundary that pushes into buffer ---------- */
+var ToolErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  function ToolErrorBoundary() {
+    (0, _classCallCheck2["default"])(this, ToolErrorBoundary);
+    return _callSuper(this, ToolErrorBoundary, arguments);
+  }
+  (0, _inherits2["default"])(ToolErrorBoundary, _React$Component);
+  return (0, _createClass2["default"])(ToolErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, info) {
+      var pushError = this.props.pushError;
+      pushError({
+        type: 'render-error',
+        error: serializeError(error),
+        info: {
+          componentStack: info === null || info === void 0 ? void 0 : info.componentStack
+        }
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+}(_react["default"].Component);
 function LiteRenderer(props) {
   var width = props.width,
     height = props.height,
@@ -101,10 +164,95 @@ function LiteRenderer(props) {
     sentry = props.sentry,
     analytics = props.analytics,
     externalEvent = props.externalEvent,
-    onEvent = props.onEvent,
-    onSave = props.onSave,
     onError = props.onError,
     passThrough = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  /* ---------- track last external event ---------- */
+  var lastExternalEventRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (externalEvent) {
+      lastExternalEventRef.current = externalEvent;
+    }
+  }, [externalEvent]);
+
+  /* ---------- error buffer + last emitted bundle ---------- */
+  var errorsBufferRef = (0, _react.useRef)([]); // pending errors (not yet emitted)
+  var lastEmittedRef = (0, _react.useRef)({
+    externalEvent: null,
+    errors: []
+  }); // last bundle we sent
+  var flushTimerRef = (0, _react.useRef)(null);
+  var emit = (0, _react.useCallback)(function (external, errors) {
+    var payload = {
+      externalEvent: external || null,
+      errors: errors || []
+    };
+    try {
+      onError === null || onError === void 0 || onError(payload);
+    } catch (_unused3) {}
+    // eslint-disable-next-line no-console
+    console.debug('[LiteRenderer:onError]', payload);
+    lastEmittedRef.current = payload;
+  }, [onError]);
+
+  // batch short bursts (e.g., multiple async errors in same tick)
+  var scheduleFlush = (0, _react.useCallback)(function () {
+    if (flushTimerRef.current) return;
+    flushTimerRef.current = setTimeout(function () {
+      flushTimerRef.current = null;
+      var errors = errorsBufferRef.current;
+      if (!errors.length) return;
+      errorsBufferRef.current = [];
+      emit(lastExternalEventRef.current, errors);
+    }, 0); // micro-batch; increase (e.g. 50ms) if you want coarser batching
+  }, [emit]);
+  var pushError = (0, _react.useCallback)(function (errPayload) {
+    errorsBufferRef.current.push(_objectSpread({
+      ts: Date.now()
+    }, errPayload));
+    scheduleFlush();
+  }, [scheduleFlush]);
+
+  /* ---------- global runtime + async error capture ---------- */
+  (0, _react.useEffect)(function () {
+    var onWindowError = function onWindowError(event) {
+      pushError({
+        type: 'runtime-error',
+        error: serializeError((event === null || event === void 0 ? void 0 : event.error) || (event === null || event === void 0 ? void 0 : event.message)),
+        meta: {
+          filename: event === null || event === void 0 ? void 0 : event.filename,
+          lineno: event === null || event === void 0 ? void 0 : event.lineno,
+          colno: event === null || event === void 0 ? void 0 : event.colno
+        }
+      });
+    };
+    var onUnhandledRejection = function onUnhandledRejection(event) {
+      pushError({
+        type: 'unhandled-rejection',
+        error: serializeError(event === null || event === void 0 ? void 0 : event.reason)
+      });
+    };
+    window.addEventListener('error', onWindowError);
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+    return function () {
+      window.removeEventListener('error', onWindowError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+    };
+  }, [pushError]);
+
+  /* ---------- re-trigger last batch when externalEvent changes ---------- */
+  var prevExternalEventRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var prev = prevExternalEventRef.current;
+    if (prev === externalEvent) return;
+    prevExternalEventRef.current = externalEvent;
+
+    // if we already emitted something before, re-send it with the new event context
+    var last = lastEmittedRef.current;
+    if (last && last.errors && last.errors.length) {
+      emit(lastExternalEventRef.current, last.errors);
+    }
+  }, [externalEvent, emit]);
   var _ref = categoryData && categoryData.data || {},
     catalogs = _ref.catalogs,
     colorAlias = _ref.colorAlias,
@@ -387,43 +535,6 @@ function LiteRenderer(props) {
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
   }, [outlineSVGData, data, appliances, furnishing, lighting]);
-
-  // Forward updates/save moments to host
-  (0, _react.useEffect)(function () {
-    if (!onEvent && !onSave && !onError) return;
-    var unsubscribe = store.subscribe(function () {
-      var _state$get, _state$get$get, _state$get$get$get;
-      var state = store.getState();
-      onEvent === null || onEvent === void 0 || onEvent({
-        type: 'state-update',
-        payload: {
-          state: state
-        }
-      });
-      var pendingSave = state === null || state === void 0 || (_state$get = state.get) === null || _state$get === void 0 || (_state$get = _state$get.call(state, 'KitchenConfigurator')) === null || _state$get === void 0 || (_state$get$get = _state$get.get) === null || _state$get$get === void 0 || (_state$get$get = _state$get$get.call(_state$get, 'misc')) === null || _state$get$get === void 0 || (_state$get$get$get = _state$get$get.get) === null || _state$get$get$get === void 0 ? void 0 : _state$get$get$get.call(_state$get$get, 'pendingSave');
-      if (pendingSave && onSave) {
-        try {
-          var _planner$get, _planner$get2;
-          var planner = state.get('KitchenConfigurator');
-          var currentScene = planner !== null && planner !== void 0 && (_planner$get = planner.get) !== null && _planner$get !== void 0 && (_planner$get = _planner$get.call(planner, 'scene')) !== null && _planner$get !== void 0 && _planner$get.toJS ? planner.get('scene').toJS() : (planner === null || planner === void 0 || (_planner$get2 = planner.get) === null || _planner$get2 === void 0 ? void 0 : _planner$get2.call(planner, 'scene')) || null;
-          onSave({
-            type: 'save',
-            payload: {
-              scene: currentScene
-            }
-          });
-        } catch (e) {
-          onError === null || onError === void 0 || onError({
-            type: 'save-error',
-            error: e
-          });
-        }
-      }
-    });
-    return function () {
-      return unsubscribe();
-    };
-  }, [store, onEvent, onSave, onError]);
   (0, _react.useEffect)(function () {
     if (projectElement.length === 0) return;
     if (!catalogInitiated) return;
@@ -441,6 +552,8 @@ function LiteRenderer(props) {
   }, [project_data, catalogInitiated]);
   return /*#__PURE__*/_react["default"].createElement(_AppContext["default"].Provider, null, /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
     store: store
+  }, /*#__PURE__*/_react["default"].createElement(ToolErrorBoundary, {
+    pushError: pushError
   }, /*#__PURE__*/_react["default"].createElement(_LiteKitchenConfigurator["default"], (0, _extends2["default"])({
     catalog: MyCatalog,
     width: width,
@@ -454,11 +567,8 @@ function LiteRenderer(props) {
     categoryData: categoryData,
     data: data,
     configData: configData,
-    externalEvent: externalEvent,
-    onEvent: onEvent,
-    onSave: onSave,
-    onError: onError
-  }, passThrough))));
+    externalEvent: externalEvent
+  }, passThrough)))));
 }
 
 /* ============================== prop types ============================== */
@@ -481,8 +591,7 @@ LiteRenderer.propTypes = {
     dsn: _propTypes["default"].string,
     environment: _propTypes["default"].string
   }),
-  onEvent: _propTypes["default"].func,
-  onSave: _propTypes["default"].func,
+  externalEvent: _propTypes["default"].object,
   onError: _propTypes["default"].func,
   store: _propTypes["default"].object
 };

package/lib/actions/project-actions.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addCircularGuide = addCircularGuide;
+exports.addElementToCatalog = addElementToCatalog;
 exports.addHorizontalGuide = addHorizontalGuide;
 exports.addVerticalGuide = addVerticalGuide;
 exports.changeCatalogPage = changeCatalogPage;
@@ -218,6 +219,12 @@ function initCatalog(catalog) {
     catalog: catalog
   };
 }
+function addElementToCatalog(element) {
+  return {
+    type: _constants.ADD_ELEMENT_TO_CATALOG,
+    element: element
+  };
+}
 function updateMouseCoord() {
   var coords = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     x: x,

package/lib/actions/viewer2d-actions.js

@@ -28,7 +28,7 @@ function updateCeilHeightUnit(value) {
 }
 function updateCameraView(value) {
   return {
-    type: _constants.MOVE_PAN,
+    type: _constants.UPDATE_2D_CAMERA,
     value: value
   };
 }

package/lib/class/project.js

@@ -601,6 +601,24 @@ var Project = exports["default"] = /*#__PURE__*/function () {
         };
       }
     }
+  }, {
+    key: "addElementToCatalog",
+    value: function addElementToCatalog(state, element) {
+      try {
+        var elements = state.getIn(['catalog', 'elements']).toJS();
+        elements[element.name] = element;
+        var newElements = (0, _models.safeLoadMapList)(elements, _models.CatalogElement);
+        state = state.setIn(['catalog', 'elements'], newElements);
+        return {
+          updatedState: state
+        };
+      } catch (error) {
+        console.log('initCatalogError', error);
+        return {
+          updatedState: state
+        };
+      }
+    }
   }, {
     key: "updateMouseCoord",
     value: function updateMouseCoord(state, coords) {

package/lib/components/viewer2d/viewer2d.js

@@ -1363,9 +1363,8 @@ function Viewer2D(_ref, _ref2) {
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
-    toolbarProps: {
-      position: 'none'
-    },
+    miniaturePosition: "none",
+    toolbarPosition: "none",
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

package/lib/components/viewer3d/viewer3d.js

@@ -101,7 +101,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
     } else {
       if (_this.props.downloadFlag) window.__elevationRendererDownload[mode] = _this.renderer;else window.__elevationRenderer = _this.renderer;
     }
-    _this.renderer.domElement.style.display = 'none';
+    if (_this.renderer && _this.renderer.domElement) {
+      _this.renderer.domElement.style.display = 'none';
+    }
     return _this;
   }
   (0, _inherits2["default"])(Scene3DViewer, _React$Component);
@@ -2365,7 +2367,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                   self.props.setIsLoadingElevation('front', false);
                 }, 100);
               }
-              self.renderer.domElement.style.display = 'block';
+              if (self.renderer && self.renderer.domElement) {
+                self.renderer.domElement.style.display = 'block';
+              }
             }
           }
         }
@@ -2509,7 +2513,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
                 break;
             }
           }
-          self.renderer.domElement.style.display = 'none';
+          if (self.renderer && self.renderer.domElement) {
+            self.renderer.domElement.style.display = 'none';
+          }
         }
         if (nextProps.state.scene.showfg == true) {
           implementBacksplash();
@@ -2546,7 +2552,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         isLoadingCabinet = _this$state2.isLoadingCabinet;
       if (isLoading) {
         if (this.props.downloadFlag) {
-          this.renderer.domElement.style.display = 'none';
+          if (this.renderer && this.renderer.domElement) {
+            this.renderer.domElement.style.display = 'none';
+          }
           return /*#__PURE__*/_react["default"].createElement("div", {
             style: {
               alignItems: ' center',
@@ -2567,7 +2575,9 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
         } else {
           document.getElementById('front') && (document.getElementById('front').style.display = 'none');
           document.getElementById('error').style.display = 'none';
-          this.renderer.domElement.style.display = 'none';
+          if (this.renderer && this.renderer.domElement) {
+            this.renderer.domElement.style.display = 'none';
+          }
           return /*#__PURE__*/_react["default"].createElement("div", {
             style: {
               textAlign: 'center',