kitchen-simulator 1.0.0-alin.40 → 1.0.0-alin.45

package/es/LiteKitchenConfigurator.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
@@ -9,7 +8,6 @@ import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _excluded = ["width", "height", "state", "stateExtractor"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -345,116 +343,17 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
       window.addEventListener('beforeunload', this.handleBeforeUnload);
       console.log('context =>', this.context);
       window.forRedo = [];
       var store = this.context.store;
       var _this$props2 = this.props,
-        projectActions = _this$props2.projectActions,
-        catalog = _this$props2.catalog,
         stateExtractor = _this$props2.stateExtractor,
-        state = _this$props2.state,
         plugins = _this$props2.plugins;
-      projectActions.initCatalog(catalog);
-      var match = this.props.match;
-      if (sessionStorage.getItem(window.location.href)) {
-        var jsonData = sessionStorage.getItem(window.location.href);
-        projectActions.loadProject(JSON.parse(jsonData), this.props.categoryData);
-        sessionStorage.removeItem(window.location.href);
-        return;
-      }
       var newplugins = _toConsumableArray(plugins);
       newplugins.forEach(function (newplugin) {
         return newplugin(store, stateExtractor);
       });
-      if (match && match.params.pid === undefined) {
-        projectActions.newProject();
-        sessionStorage.setItem('projectTitle', 'Untitled');
-        projectActions.rename('Untitled');
-        sessionStorage.removeItem('projectId');
-        sessionStorage.removeItem('email');
-        sessionStorage.removeItem('firstName');
-        sessionStorage.removeItem('lastName');
-        sessionStorage.removeItem('usedObjects');
-        return;
-      }
-      if (match && match.params.pid !== undefined) {
-        if (match.params.pid === 'new') {
-          projectActions.newProject();
-          sessionStorage.setItem('projectTitle', 'Untitled');
-          projectActions.rename('Untitled');
-          sessionStorage.removeItem('projectId');
-          sessionStorage.removeItem('email');
-          sessionStorage.removeItem('firstName');
-          sessionStorage.removeItem('lastName');
-          sessionStorage.removeItem('usedObjects');
-        } else {
-          axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidProject"), {
-            pid: match.params.pid,
-            visualizerName: sessionStorage.getItem('visualizerName')
-          }).then(/*#__PURE__*/function () {
-            var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(response) {
-              var projectElement, jsonData, _t;
-              return _regeneratorRuntime.wrap(function (_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    projectElement = response.data.projectElement;
-                    if (!(projectElement.length === 0)) {
-                      _context.next = 1;
-                      break;
-                    }
-                    return _context.abrupt("return");
-                  case 1:
-                    sessionStorage.setItem('projectTitle', projectElement[0].title);
-                    projectActions.rename(projectElement[0].title);
-                    sessionStorage.setItem('projectId', projectElement[0].id);
-                    sessionStorage.setItem('email', projectElement[0].email);
-                    sessionStorage.setItem('firstName', projectElement[0].firstName);
-                    sessionStorage.setItem('lastName', projectElement[0].lastName);
-                    sessionStorage.setItem('phone', projectElement[0].phone);
-                    if (!projectElement[0].project_data) {
-                      _context.next = 2;
-                      break;
-                    }
-                    jsonData = JSON.parse(projectElement[0].project_data);
-                    _context.next = 5;
-                    break;
-                  case 2:
-                    _context.prev = 2;
-                    _context.next = 3;
-                    return axios.post("".concat(constants.API_SERVER_URL, "/api/project/loadPidData"), {
-                      pid: match.params.pid
-                    }).data.data;
-                  case 3:
-                    jsonData = _context.sent;
-                    _context.next = 5;
-                    break;
-                  case 4:
-                    _context.prev = 4;
-                    _t = _context["catch"](2);
-                    _this3.setState({
-                      isSnackBarOpen: true,
-                      snackBarMessage: _t
-                    });
-                  case 5:
-                    jsonData.isLoadingCabinet = false;
-                    projectActions.loadProject(jsonData, _this3.props.categoryData);
-                  case 6:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee, null, [[2, 4]]);
-            }));
-            return function (_x) {
-              return _ref.apply(this, arguments);
-            };
-          }());
-        }
-        sessionStorage.removeItem('user_type');
-        sessionStorage.removeItem('project_type');
-        sessionStorage.removeItem('project_timeline');
-      }
     }
   }, {
     key: "componentWillUnmount",

package/es/LiteRenderer.js

@@ -33,7 +33,7 @@ import { render2DItem, render3DApplianceItem, render3DItem, render3DLightingItem
 import { ConsoleDebugger, Keyboard } from "./plugins/export";
 import { Map } from 'immutable';
 import * as Sentry from '@sentry/react';
-import { loadProject, rename } from "./actions/project-actions";
+import { initCatalog, loadProject, rename } from "./actions/project-actions";
 import exporter from "./catalog/utils/exporter";
 import * as THREE from 'three';
 import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
@@ -249,6 +249,8 @@ export default function LiteRenderer(props) {
     colorAlias = _ref.colorAlias,
     subgroups = _ref.subgroups;
   var _ref2 = dataBundle || {},
+    _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? [] : _ref2$data,
     _ref2$appliances = _ref2.appliances,
     appliances = _ref2$appliances === void 0 ? [] : _ref2$appliances,
     _ref2$furnishing = _ref2.furnishing,
@@ -260,10 +262,14 @@ export default function LiteRenderer(props) {
   var id = configData.id,
     logoImg = configData.logoImg,
     companyUrl = configData.companyUrl;
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    catalogInitiated = _React$useState2[0],
-    setCatalogInitiated = _React$useState2[1];
+    outlineSVGData = _React$useState2[0],
+    setOutlineSVGData = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    catalogInitiated = _React$useState4[0],
+    setCatalogInitiated = _React$useState4[1];
   useEffect(function () {
     var initMyCatalog = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -382,36 +388,121 @@ export default function LiteRenderer(props) {
         return _ref4.apply(this, arguments);
       };
     }();
+    var loadSVGs = /*#__PURE__*/function () {
+      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        var svgLoadPromises, outlineData;
+        return _regeneratorRuntime.wrap(function (_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              svgLoadPromises = data.map(/*#__PURE__*/function () {
+                var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3(item) {
+                  var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
+                  return _regeneratorRuntime.wrap(function (_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
+                      case 0:
+                        if (item.outline) {
+                          _context3.next = 1;
+                          break;
+                        }
+                        return _context3.abrupt("return", null);
+                      case 1:
+                        _context3.prev = 1;
+                        _context3.next = 2;
+                        return fetch(item.outline, {
+                          cache: 'no-store'
+                        });
+                      case 2:
+                        response = _context3.sent;
+                        _context3.next = 3;
+                        return response.text();
+                      case 3:
+                        svgText = _context3.sent;
+                        loader = new SVGLoader();
+                        parsed = loader.parse(svgText);
+                        if (!isEmpty(parsed.paths)) {
+                          _context3.next = 4;
+                          break;
+                        }
+                        return _context3.abrupt("return", null);
+                      case 4:
+                        return _context3.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:
+                        _context3.prev = 5;
+                        _t = _context3["catch"](1);
+                        console.error('Failed to load SVG:', item.outline, _t);
+                        return _context3.abrupt("return", null);
+                      case 6:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }, _callee3, null, [[1, 5]]);
+                }));
+                return function (_x3) {
+                  return _ref6.apply(this, arguments);
+                };
+              }());
+              _context4.next = 1;
+              return Promise.all(svgLoadPromises);
+            case 1:
+              outlineData = _context4.sent;
+              setOutlineSVGData(outlineData);
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function loadSVGs() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
     var initCatalog = /*#__PURE__*/function () {
-      var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-        return _regeneratorRuntime.wrap(function (_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+        return _regeneratorRuntime.wrap(function (_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               setCatalogInitiated(false);
-              _context3.next = 1;
+              _context5.next = 1;
               return initMyCatalog();
             case 1:
-              _context3.next = 2;
+              _context5.next = 2;
               return loadMoldings();
             case 2:
-              setCatalogInitiated(true);
+              _context5.next = 3;
+              return loadSVGs();
             case 3:
+              setCatalogInitiated(true);
+            case 4:
             case "end":
-              return _context3.stop();
+              return _context5.stop();
           }
-        }, _callee3);
+        }, _callee5);
       }));
       return function initCatalog() {
-        return _ref5.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }();
     initCatalog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [categoryData, data, id, catalogs, colorAlias, subgroups]);
 
   // Register items once SVGs are loaded
   useEffect(function () {
+    if (!outlineSVGData.length) return;
     var Item = [];
+    data.forEach(function (obj, index) {
+      Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
+        type: 'cabinet',
+        outlineSVGData: outlineSVGData[index],
+        render2DItem: render2DItem,
+        render3DItem: render3DItem
+      })));
+    });
     appliances.forEach(function (obj) {
       Item.push(exporter(_objectSpread(_objectSpread({}, obj), {}, {
         render2DItem: render2DItem,
@@ -434,10 +525,17 @@ export default function LiteRenderer(props) {
       })));
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
-  }, [appliances, furnishing, lighting]);
+  }, [outlineSVGData, data, appliances, furnishing, lighting]);
   useEffect(function () {
     if (projectElement.length === 0) return;
     if (!catalogInitiated) return;
+    store.dispatch(initCatalog(MyCatalog));
+    if (sessionStorage.getItem(window.location.href)) {
+      var _jsonData = sessionStorage.getItem(window.location.href);
+      store.dispatch(loadProject(JSON.parse(_jsonData), categoryData));
+      sessionStorage.removeItem(window.location.href);
+      return;
+    }
     sessionStorage.setItem('projectTitle', projectElement[0].title);
     store.dispatch(rename(projectElement[0].title));
     sessionStorage.setItem('projectId', projectElement[0].id);
@@ -465,6 +563,7 @@ export default function LiteRenderer(props) {
       return state.get('KitchenConfigurator');
     },
     categoryData: categoryData,
+    data: data,
     configData: configData,
     externalEvent: externalEvent
   }, passThrough)))));

package/es/components/viewer2d/viewer2d.js

@@ -4,7 +4,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT, zoom } from 'react-svg-pan-zoom';
+import { INITIAL_VALUE, ReactSVGPanZoom, TOOL_AUTO, TOOL_NONE, TOOL_PAN, TOOL_ZOOM_IN, TOOL_ZOOM_OUT, POSITION_NONE } from 'react-svg-pan-zoom';
 import * as constants from "../../constants";
 import { DECIMAL_PLACES_2, LINE_THICKNESS, MIN_ANGLE_DISALLOW_DRAW_WALL, MODE_ELEVATION_VIEW, MODE_IDLE, UNIT_ANGLE } from "../../constants";
 import State from "./state";
@@ -1309,7 +1309,7 @@ export default function Viewer2D(_ref, _ref2) {
     },
     width: width - rulerSize,
     height: height - rulerSize,
-    value: viewer2D.isEmpty() ? null : viewer2D.toJS(),
+    value: viewer2D.isEmpty() ? INITIAL_VALUE : viewer2D.toJS(),
     onChangeValue: onChangeValue,
     tool: mode2Tool(mode),
     onChangeTool: onChangeTool,
@@ -1317,8 +1317,9 @@ export default function Viewer2D(_ref, _ref2) {
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
-    miniaturePosition: "none",
-    toolbarPosition: "none",
+    toolbarProps: {
+      position: POSITION_NONE
+    },
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

package/es/devLiteRenderer.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import ContainerDimensions from 'react-container-dimensions';
 import mockProps from "./mocks/mockProps.json";
 import mockCategoryData from "./mocks/categoryData.json";
-import mockDataBundle from "./mocks/dataBundle.json";
+import mockDataBundle from "./mocks/dataBundle2.json";
 import cabinetPaylod from "./mocks/cabinetPayload2.json";
 import doorStylePaylod from "./mocks/doorStylePayload.json";
 import oStylePaylod from "./mocks/oStylePayload.json";

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

@@ -8,6 +8,8 @@ import { EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TO
 import { isEmpty } from "./helper";
 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;
@@ -116,6 +118,7 @@ function _handleExternalEvent() {
             render3DItem: render3DItem
           }));
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
+            catalogInstance.registerElement(elementJs);
             props.projectActions.addElementToCatalog(elementJs);
           }
         case 7:

package/lib/LiteKitchenConfigurator.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -33,7 +31,7 @@ var _objectsUtils = require("./utils/objects-utils");
 var _version = require("./version");
 var _isolateEventHandler = require("./utils/isolate-event-handler");
 var _excluded = ["width", "height", "state", "stateExtractor"];
-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 _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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); 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)); }
@@ -354,116 +352,17 @@ var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this3 = this;
       window.addEventListener('beforeunload', this.handleBeforeUnload);
       console.log('context =>', this.context);
       window.forRedo = [];
       var store = this.context.store;
       var _this$props2 = this.props,
-        projectActions = _this$props2.projectActions,
-        catalog = _this$props2.catalog,
         stateExtractor = _this$props2.stateExtractor,
-        state = _this$props2.state,
         plugins = _this$props2.plugins;
-      projectActions.initCatalog(catalog);
-      var match = this.props.match;
-      if (sessionStorage.getItem(window.location.href)) {
-        var jsonData = sessionStorage.getItem(window.location.href);
-        projectActions.loadProject(JSON.parse(jsonData), this.props.categoryData);
-        sessionStorage.removeItem(window.location.href);
-        return;
-      }
       var newplugins = (0, _toConsumableArray2["default"])(plugins);
       newplugins.forEach(function (newplugin) {
         return newplugin(store, stateExtractor);
       });
-      if (match && match.params.pid === undefined) {
-        projectActions.newProject();
-        sessionStorage.setItem('projectTitle', 'Untitled');
-        projectActions.rename('Untitled');
-        sessionStorage.removeItem('projectId');
-        sessionStorage.removeItem('email');
-        sessionStorage.removeItem('firstName');
-        sessionStorage.removeItem('lastName');
-        sessionStorage.removeItem('usedObjects');
-        return;
-      }
-      if (match && match.params.pid !== undefined) {
-        if (match.params.pid === 'new') {
-          projectActions.newProject();
-          sessionStorage.setItem('projectTitle', 'Untitled');
-          projectActions.rename('Untitled');
-          sessionStorage.removeItem('projectId');
-          sessionStorage.removeItem('email');
-          sessionStorage.removeItem('firstName');
-          sessionStorage.removeItem('lastName');
-          sessionStorage.removeItem('usedObjects');
-        } else {
-          _axios["default"].post("".concat(constants.API_SERVER_URL, "/api/project/loadPidProject"), {
-            pid: match.params.pid,
-            visualizerName: sessionStorage.getItem('visualizerName')
-          }).then(/*#__PURE__*/function () {
-            var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(response) {
-              var projectElement, jsonData, _t;
-              return _regenerator["default"].wrap(function (_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    projectElement = response.data.projectElement;
-                    if (!(projectElement.length === 0)) {
-                      _context.next = 1;
-                      break;
-                    }
-                    return _context.abrupt("return");
-                  case 1:
-                    sessionStorage.setItem('projectTitle', projectElement[0].title);
-                    projectActions.rename(projectElement[0].title);
-                    sessionStorage.setItem('projectId', projectElement[0].id);
-                    sessionStorage.setItem('email', projectElement[0].email);
-                    sessionStorage.setItem('firstName', projectElement[0].firstName);
-                    sessionStorage.setItem('lastName', projectElement[0].lastName);
-                    sessionStorage.setItem('phone', projectElement[0].phone);
-                    if (!projectElement[0].project_data) {
-                      _context.next = 2;
-                      break;
-                    }
-                    jsonData = JSON.parse(projectElement[0].project_data);
-                    _context.next = 5;
-                    break;
-                  case 2:
-                    _context.prev = 2;
-                    _context.next = 3;
-                    return _axios["default"].post("".concat(constants.API_SERVER_URL, "/api/project/loadPidData"), {
-                      pid: match.params.pid
-                    }).data.data;
-                  case 3:
-                    jsonData = _context.sent;
-                    _context.next = 5;
-                    break;
-                  case 4:
-                    _context.prev = 4;
-                    _t = _context["catch"](2);
-                    _this3.setState({
-                      isSnackBarOpen: true,
-                      snackBarMessage: _t
-                    });
-                  case 5:
-                    jsonData.isLoadingCabinet = false;
-                    projectActions.loadProject(jsonData, _this3.props.categoryData);
-                  case 6:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee, null, [[2, 4]]);
-            }));
-            return function (_x) {
-              return _ref.apply(this, arguments);
-            };
-          }());
-        }
-        sessionStorage.removeItem('user_type');
-        sessionStorage.removeItem('project_type');
-        sessionStorage.removeItem('project_timeline');
-      }
     }
   }, {
     key: "componentWillUnmount",

package/lib/LiteRenderer.js

@@ -41,7 +41,7 @@ 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", "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 _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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)); }
@@ -258,6 +258,8 @@ function LiteRenderer(props) {
     colorAlias = _ref.colorAlias,
     subgroups = _ref.subgroups;
   var _ref2 = dataBundle || {},
+    _ref2$data = _ref2.data,
+    data = _ref2$data === void 0 ? [] : _ref2$data,
     _ref2$appliances = _ref2.appliances,
     appliances = _ref2$appliances === void 0 ? [] : _ref2$appliances,
     _ref2$furnishing = _ref2.furnishing,
@@ -269,10 +271,14 @@ function LiteRenderer(props) {
   var id = configData.id,
     logoImg = configData.logoImg,
     companyUrl = configData.companyUrl;
-  var _React$useState = _react["default"].useState(false),
+  var _React$useState = _react["default"].useState([]),
     _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    catalogInitiated = _React$useState2[0],
-    setCatalogInitiated = _React$useState2[1];
+    outlineSVGData = _React$useState2[0],
+    setOutlineSVGData = _React$useState2[1];
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+    catalogInitiated = _React$useState4[0],
+    setCatalogInitiated = _React$useState4[1];
   (0, _react.useEffect)(function () {
     var initMyCatalog = /*#__PURE__*/function () {
       var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -391,36 +397,121 @@ function LiteRenderer(props) {
         return _ref4.apply(this, arguments);
       };
     }();
+    var loadSVGs = /*#__PURE__*/function () {
+      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+        var svgLoadPromises, outlineData;
+        return _regenerator["default"].wrap(function (_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              svgLoadPromises = data.map(/*#__PURE__*/function () {
+                var _ref6 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3(item) {
+                  var _parsed$xml$viewBox, _parsed$xml$viewBox2, response, svgText, loader, parsed, _t;
+                  return _regenerator["default"].wrap(function (_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
+                      case 0:
+                        if (item.outline) {
+                          _context3.next = 1;
+                          break;
+                        }
+                        return _context3.abrupt("return", null);
+                      case 1:
+                        _context3.prev = 1;
+                        _context3.next = 2;
+                        return fetch(item.outline, {
+                          cache: 'no-store'
+                        });
+                      case 2:
+                        response = _context3.sent;
+                        _context3.next = 3;
+                        return response.text();
+                      case 3:
+                        svgText = _context3.sent;
+                        loader = new _SVGLoader.SVGLoader();
+                        parsed = loader.parse(svgText);
+                        if (!(0, _helper.isEmpty)(parsed.paths)) {
+                          _context3.next = 4;
+                          break;
+                        }
+                        return _context3.abrupt("return", null);
+                      case 4:
+                        return _context3.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:
+                        _context3.prev = 5;
+                        _t = _context3["catch"](1);
+                        console.error('Failed to load SVG:', item.outline, _t);
+                        return _context3.abrupt("return", null);
+                      case 6:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }, _callee3, null, [[1, 5]]);
+                }));
+                return function (_x3) {
+                  return _ref6.apply(this, arguments);
+                };
+              }());
+              _context4.next = 1;
+              return Promise.all(svgLoadPromises);
+            case 1:
+              outlineData = _context4.sent;
+              setOutlineSVGData(outlineData);
+            case 2:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      return function loadSVGs() {
+        return _ref5.apply(this, arguments);
+      };
+    }();
     var initCatalog = /*#__PURE__*/function () {
-      var _ref5 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-        return _regenerator["default"].wrap(function (_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
+      var _ref7 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5() {
+        return _regenerator["default"].wrap(function (_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               setCatalogInitiated(false);
-              _context3.next = 1;
+              _context5.next = 1;
               return initMyCatalog();
             case 1:
-              _context3.next = 2;
+              _context5.next = 2;
               return loadMoldings();
             case 2:
-              setCatalogInitiated(true);
+              _context5.next = 3;
+              return loadSVGs();
             case 3:
+              setCatalogInitiated(true);
+            case 4:
             case "end":
-              return _context3.stop();
+              return _context5.stop();
           }
-        }, _callee3);
+        }, _callee5);
       }));
       return function initCatalog() {
-        return _ref5.apply(this, arguments);
+        return _ref7.apply(this, arguments);
       };
     }();
     initCatalog();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [categoryData, data, id, catalogs, colorAlias, subgroups]);
 
   // Register items once SVGs are loaded
   (0, _react.useEffect)(function () {
+    if (!outlineSVGData.length) return;
     var Item = [];
+    data.forEach(function (obj, index) {
+      Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
+        type: 'cabinet',
+        outlineSVGData: outlineSVGData[index],
+        render2DItem: _itemLoader.render2DItem,
+        render3DItem: _itemLoader.render3DItem
+      })));
+    });
     appliances.forEach(function (obj) {
       Item.push((0, _exporter["default"])(_objectSpread(_objectSpread({}, obj), {}, {
         render2DItem: _itemLoader.render2DItem,
@@ -443,10 +534,17 @@ function LiteRenderer(props) {
       })));
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
-  }, [appliances, furnishing, lighting]);
+  }, [outlineSVGData, data, appliances, furnishing, lighting]);
   (0, _react.useEffect)(function () {
     if (projectElement.length === 0) return;
     if (!catalogInitiated) return;
+    store.dispatch((0, _projectActions.initCatalog)(MyCatalog));
+    if (sessionStorage.getItem(window.location.href)) {
+      var _jsonData = sessionStorage.getItem(window.location.href);
+      store.dispatch((0, _projectActions.loadProject)(JSON.parse(_jsonData), categoryData));
+      sessionStorage.removeItem(window.location.href);
+      return;
+    }
     sessionStorage.setItem('projectTitle', projectElement[0].title);
     store.dispatch((0, _projectActions.rename)(projectElement[0].title));
     sessionStorage.setItem('projectId', projectElement[0].id);
@@ -474,6 +572,7 @@ function LiteRenderer(props) {
       return state.get('KitchenConfigurator');
     },
     categoryData: categoryData,
+    data: data,
     configData: configData,
     externalEvent: externalEvent
   }, passThrough)))));

package/lib/components/viewer2d/viewer2d.js

@@ -1319,7 +1319,7 @@ function Viewer2D(_ref, _ref2) {
     },
     width: width - rulerSize,
     height: height - rulerSize,
-    value: viewer2D.isEmpty() ? null : viewer2D.toJS(),
+    value: viewer2D.isEmpty() ? _reactSvgPanZoom.INITIAL_VALUE : viewer2D.toJS(),
     onChangeValue: onChangeValue,
     tool: mode2Tool(mode),
     onChangeTool: onChangeTool,
@@ -1327,8 +1327,9 @@ function Viewer2D(_ref, _ref2) {
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
     onMouseUp: onMouseUp,
-    miniaturePosition: "none",
-    toolbarPosition: "none",
+    toolbarProps: {
+      position: _reactSvgPanZoom.POSITION_NONE
+    },
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

package/lib/devLiteRenderer.js

@@ -7,7 +7,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactContainerDimensions = _interopRequireDefault(require("react-container-dimensions"));
 var _mockProps = _interopRequireDefault(require("./mocks/mockProps.json"));
 var _categoryData = _interopRequireDefault(require("./mocks/categoryData.json"));
-var _dataBundle = _interopRequireDefault(require("./mocks/dataBundle.json"));
+var _dataBundle = _interopRequireDefault(require("./mocks/dataBundle2.json"));
 var _cabinetPayload = _interopRequireDefault(require("./mocks/cabinetPayload2.json"));
 var _doorStylePayload = _interopRequireDefault(require("./mocks/doorStylePayload.json"));
 var _oStylePayload = _interopRequireDefault(require("./mocks/oStylePayload.json"));

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

@@ -13,6 +13,8 @@ var _constants = require("../constants");
 var _helper = require("./helper");
 var _exporter = _interopRequireDefault(require("../catalog/utils/exporter"));
 var _itemLoader = require("../catalog/utils/item-loader");
+var _catalog = _interopRequireDefault(require("../catalog/catalog"));
+var _models = require("../models");
 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; }
 var loadSVGsByItem = /*#__PURE__*/function () {
@@ -123,6 +125,7 @@ function _handleExternalEvent() {
             render3DItem: _itemLoader.render3DItem
           }));
           if (catalogInstance !== null && catalogInstance !== void 0 && catalogInstance.validateElement(elementJs)) {
+            catalogInstance.registerElement(elementJs);
             props.projectActions.addElementToCatalog(elementJs);
           }
         case 7:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "1.0.0-alin.40",
+  "version": "1.0.0-alin.45",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",
@@ -82,7 +82,7 @@
     "react-hotjar": "^1.0.11",
     "react-icons": "3.5.0",
     "react-redux": "5.0.7",
-    "react-svg-pan-zoom": "2.18.0",
+    "react-svg-pan-zoom": "^3.13.1",
     "redux": "4.0.1",
     "three": "0.166.0",
     "moment": "^2.30.1",