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

package/es/LiteRenderer.js

@@ -1,13 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onEvent", "onSave", "onError"];
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onError"];
+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; }
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useEffect } from 'react';
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
@@ -78,6 +85,62 @@ var store = createStore(reducer, null, !isProduction && window.devToolsExtension
   return f;
 });
 var plugins = [Keyboard(), 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() {
+    _classCallCheck(this, ToolErrorBoundary);
+    return _callSuper(this, ToolErrorBoundary, arguments);
+  }
+  _inherits(ToolErrorBoundary, _React$Component);
+  return _createClass(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.Component);
 export default function LiteRenderer(props) {
   var width = props.width,
     height = props.height,
@@ -92,10 +155,95 @@ export default function LiteRenderer(props) {
     sentry = props.sentry,
     analytics = props.analytics,
     externalEvent = props.externalEvent,
-    onEvent = props.onEvent,
-    onSave = props.onSave,
     onError = props.onError,
     passThrough = _objectWithoutProperties(props, _excluded);
+
+  /* ---------- track last external event ---------- */
+  var lastExternalEventRef = useRef(null);
+  useEffect(function () {
+    if (externalEvent) {
+      lastExternalEventRef.current = externalEvent;
+    }
+  }, [externalEvent]);
+
+  /* ---------- error buffer + last emitted bundle ---------- */
+  var errorsBufferRef = useRef([]); // pending errors (not yet emitted)
+  var lastEmittedRef = useRef({
+    externalEvent: null,
+    errors: []
+  }); // last bundle we sent
+  var flushTimerRef = useRef(null);
+  var emit = 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 = 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 = useCallback(function (errPayload) {
+    errorsBufferRef.current.push(_objectSpread({
+      ts: Date.now()
+    }, errPayload));
+    scheduleFlush();
+  }, [scheduleFlush]);
+
+  /* ---------- global runtime + async error capture ---------- */
+  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 = useRef(null);
+  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,
@@ -378,43 +526,6 @@ export default function LiteRenderer(props) {
     });
     for (var x in Item) MyCatalog.registerElement(Item[x]);
   }, [outlineSVGData, data, appliances, furnishing, lighting]);
-
-  // Forward updates/save moments to host
-  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]);
   useEffect(function () {
     if (projectElement.length === 0) return;
     if (!catalogInitiated) return;
@@ -432,6 +543,8 @@ export default function LiteRenderer(props) {
   }, [project_data, catalogInitiated]);
   return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
     store: store
+  }, /*#__PURE__*/React.createElement(ToolErrorBoundary, {
+    pushError: pushError
   }, /*#__PURE__*/React.createElement(LiteKitchenConfigurator, _extends({
     catalog: MyCatalog,
     width: width,
@@ -445,11 +558,8 @@ export default function LiteRenderer(props) {
     categoryData: categoryData,
     data: data,
     configData: configData,
-    externalEvent: externalEvent,
-    onEvent: onEvent,
-    onSave: onSave,
-    onError: onError
-  }, passThrough))));
+    externalEvent: externalEvent
+  }, passThrough)))));
 }
 
 /* ============================== prop types ============================== */
@@ -472,8 +582,7 @@ LiteRenderer.propTypes = {
     dsn: PropTypes.string,
     environment: PropTypes.string
   }),
-  onEvent: PropTypes.func,
-  onSave: PropTypes.func,
+  externalEvent: PropTypes.object,
   onError: PropTypes.func,
   store: PropTypes.object
 };

package/es/actions/project-actions.js

@@ -1,4 +1,4 @@
-import { NEW_PROJECT, LOAD_PROJECT, SAVE_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, UNSELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, UNCREATE, PROJECT_RE_NAME, RECREATE, ROLLBACK, OPEN_PROJECT_CONFIGURATOR, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SELECT_ALL, SET_STATE_PROPERTIES, SHIFT2DOFF, SHIFT2DON, SET_IS_HELP, SET_IS_CABINET_DRAWING } from "../constants";
+import { NEW_PROJECT, LOAD_PROJECT, SAVE_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, UNSELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, UNCREATE, PROJECT_RE_NAME, RECREATE, ROLLBACK, OPEN_PROJECT_CONFIGURATOR, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SELECT_ALL, SET_STATE_PROPERTIES, SHIFT2DOFF, SHIFT2DON, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG } from "../constants";
 export function setIsHelp(isHelp) {
   return {
     type: SET_IS_HELP,
@@ -167,6 +167,12 @@ export function initCatalog(catalog) {
     catalog: catalog
   };
 }
+export function addElementToCatalog(element) {
+  return {
+    type: ADD_ELEMENT_TO_CATALOG,
+    element: element
+  };
+}
 export function updateMouseCoord() {
   var coords = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
     x: x,

package/es/actions/viewer2d-actions.js

@@ -1,4 +1,4 @@
-import { UPDATE_CEIL_HEIGHT_UNIT, UPDATE_CEIL_HEIGHT, MOVE_PAN, SELECT_TOOL_PAN, SELECT_TOOL_ZOOM_IN, SELECT_TOOL_ZOOM_OUT, CHANGE_WALL_LENGTH_MEASURE, CHANGE_BASE_CABINET_MEASURE, CHANGE_WALL_CABINET_MEASURE, CHANGE_WINDOW_DOOR_MEASURE } from "../constants";
+import { UPDATE_CEIL_HEIGHT_UNIT, UPDATE_CEIL_HEIGHT, UPDATE_2D_CAMERA, SELECT_TOOL_PAN, SELECT_TOOL_ZOOM_IN, SELECT_TOOL_ZOOM_OUT, CHANGE_WALL_LENGTH_MEASURE, CHANGE_BASE_CABINET_MEASURE, CHANGE_WALL_CABINET_MEASURE, CHANGE_WINDOW_DOOR_MEASURE } from "../constants";
 export function updateCeilHeight(value) {
   return {
     type: UPDATE_CEIL_HEIGHT,
@@ -13,7 +13,7 @@ export function updateCeilHeightUnit(value) {
 }
 export function updateCameraView(value) {
   return {
-    type: MOVE_PAN,
+    type: UPDATE_2D_CAMERA,
     value: value
   };
 }

package/es/class/project.js

@@ -6,7 +6,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { Map, List } from 'immutable';
 import { MODE_VIEWING_CATALOG, MODE_CONFIGURING_PROJECT, MODE_IDLE, MODE_DRAWING_ITEM_3D, MODE_3D_VIEW, MODE_DRAGGING_ITEM_3D, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_LINE, MODE_WAITING_DRAWING_LINE, MODE_DRAWING_HOLE, ARRAY_3D_MODES, END_DRAWING_LINE } from "../constants";
 import * as constants from "../constants";
-import { State, Catalog, Scene } from "../models";
+import { State, Catalog, Scene, safeLoadMapList, CatalogElement } from "../models";
 import { GeometryUtils, history } from "../utils/export";
 import { Layer, Group, Line, Hole, Item, Area, HorizontalGuide, VerticalGuide } from "../class/export";
 import * as viewer2DActions from "../actions/viewer2d-actions";
@@ -592,6 +592,24 @@ var Project = /*#__PURE__*/function () {
         };
       }
     }
+  }, {
+    key: "addElementToCatalog",
+    value: function addElementToCatalog(state, element) {
+      try {
+        var elements = state.getIn(['catalog', 'elements']).toJS();
+        elements[element.name] = element;
+        var newElements = safeLoadMapList(elements, 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/es/components/viewer2d/viewer2d.js

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

package/es/constants.js

@@ -33,6 +33,7 @@ export var SET_PROJECT_PROPERTIES = 'SET_PROJECT_PROPERTIES';
 export var SET_PROJECT_ID = 'SET_PROJECT_ID';
 export var OPEN_PROJECT_CONFIGURATOR = 'OPEN_PROJECT_CONFIGURATOR';
 export var INIT_CATALOG = 'INIT_CATALOG';
+export var ADD_ELEMENT_TO_CATALOG = 'ADD_ELEMENT_TO_CATALOG';
 export var UPDATE_MOUSE_COORDS = 'UPDATE_MOUSE_COORDS';
 export var UPDATE_ZOOM_SCALE = 'UPDATE_ZOOM_SCALE';
 export var TOGGLE_SNAP = 'TOGGLE_SNAP';
@@ -59,7 +60,7 @@ export var SET_IS_CABINET_DRAWING = 'SET_IS_CABINET_DRAWING';
 export var SELECT_TOOL_ZOOM_IN = 'SELECT_TOOL_ZOOM_IN';
 export var SELECT_TOOL_ZOOM_OUT = 'SELECT_TOOL_ZOOM_OUT';
 export var SELECT_TOOL_PAN = 'SELECT_TOOL_PAN';
-export var MOVE_PAN = 'MOVE_PAN';
+export var UPDATE_2D_CAMERA = 'UPDATE_2D_CAMERA';
 export var CHANGE_WALL_LENGTH_MEASURE = 'CHANGE_WALL_LENGTH_MEASURE';
 export var CHANGE_BASE_CABINET_MEASURE = 'CHANGE_BASE_CABINET_MEASURE';
 export var CHANGE_WALL_CABINET_MEASURE = 'CHANGE_WALL_CABINET_MEASURE';
@@ -219,6 +220,7 @@ export var PROJECT_ACTIONS = {
   PROJECT_RE_NAME: PROJECT_RE_NAME,
   OPEN_PROJECT_CONFIGURATOR: OPEN_PROJECT_CONFIGURATOR,
   INIT_CATALOG: INIT_CATALOG,
+  ADD_ELEMENT_TO_CATALOG: ADD_ELEMENT_TO_CATALOG,
   UPDATE_MOUSE_COORDS: UPDATE_MOUSE_COORDS,
   UPDATE_ZOOM_SCALE: UPDATE_ZOOM_SCALE,
   TOGGLE_SNAP: TOGGLE_SNAP,
@@ -248,7 +250,7 @@ export var VIEWER2D_ACTIONS = {
   SELECT_TOOL_ZOOM_IN: SELECT_TOOL_ZOOM_IN,
   SELECT_TOOL_ZOOM_OUT: SELECT_TOOL_ZOOM_OUT,
   SELECT_TOOL_PAN: SELECT_TOOL_PAN,
-  MOVE_PAN: MOVE_PAN,
+  UPDATE_2D_CAMERA: UPDATE_2D_CAMERA,
   CHANGE_WALL_LENGTH_MEASURE: CHANGE_WALL_LENGTH_MEASURE,
   CHANGE_BASE_CABINET_MEASURE: CHANGE_BASE_CABINET_MEASURE,
   CHANGE_WALL_CABINET_MEASURE: CHANGE_WALL_CABINET_MEASURE,

package/es/devLiteRenderer.js

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 cabinetPaylod from "./mocks/cabinetPayload.json";
 import ReactDOM from 'react-dom';
-import LiteKitchenConfigurator from "./LiteKitchenConfigurator";
 import LiteRenderer from "./LiteRenderer";
 import { Button } from 'antd';
 import { LEFT, RIGHT, TOP, BOTTOM, EXTERNAL_EVENT_ADD_ITEM, EXTERNAL_EVENT_ADD_WALL, EXTERNAL_EVENT_TOGGLE_TO_3D, EXTERNAL_EVENT_TOGGLE_TO_2D, EXTERNAL_EVENT_TOGGLE_TO_ELEVATION, EXTERNAL_EVENT_MOVE_PAN, EXTERNAL_EVENT_NEW_PROJECT } from "./constants";
@@ -14,19 +15,6 @@ var options = {
   unit: 'in',
   enable3D: true
 };
-var onSave = function onSave(_ref) {
-  var payload = _ref.payload;
-  console.log('SAVE triggered:', payload.scene);
-};
-var onEvent = function onEvent(evt) {
-  console.log('EVENT:', evt.type, evt.payload);
-};
-var onExternalEvent = function onExternalEvent(evt) {
-  console.log('EXTERNAL EVENT:', evt.type, evt.payload);
-};
-var onError = function onError(err) {
-  console.error('ERROR:', err);
-};
 document.getElementById('app').style.display = 'block';
 function WorkSpace(props) {
   var _useState = useState(null),
@@ -126,7 +114,7 @@ function WorkSpace(props) {
         type: EXTERNAL_EVENT_NEW_PROJECT,
         payload: {}
       };
-      setExternalEvant(evt);
+      setExternalEvent(evt);
     }
   }, "New Project"), /*#__PURE__*/React.createElement(Button, {
     actionType: "secondary",
@@ -137,9 +125,18 @@ function WorkSpace(props) {
       };
       setExternalEvent(evt);
     }
-  }, "Add Walls"), /*#__PURE__*/React.createElement(LiteRenderer, {
-    width: 1264,
-    height: 1164,
+  }, "Add Walls"), /*#__PURE__*/React.createElement(Button, {
+    actionType: "danger",
+    onClick: function onClick() {
+      var evt = {
+        type: EXTERNAL_EVENT_ADD_ITEM,
+        payload: cabinetPaylod
+      };
+      setExternalEvent(evt);
+    }
+  }, "Add B12 Cabinet"), /*#__PURE__*/React.createElement(LiteRenderer, {
+    width: 1200,
+    height: 953,
     projectElement: mockProps.projectElement,
     categoryData: mockCategoryData,
     dataBundle: mockDataBundle,
@@ -149,9 +146,16 @@ function WorkSpace(props) {
     companyUrl: "https://example.com",
     toolbarButtons: [],
     externalEvent: externalEvent,
-    onSave: onSave,
-    onEvent: onEvent,
-    onError: onError
+    onError: function onError(payload) {
+      // payload = {
+      //   type: 'render-error' | 'runtime-error' | 'unhandled-rejection',
+      //   error: { name?, message, stack?, raw? },
+      //   info?: { componentStack? },
+      //   externalEvent: { id?, type, payload } | null,
+      //   meta?: { filename?, lineno?, colno? }
+      // }
+      console.error('TOOL ERROR:', payload);
+    }
   }));
 }
 ReactDOM.render(/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(WorkSpace, null)), document.getElementById('app'));

package/es/models.js

@@ -13,7 +13,7 @@ import { MODE_IDLE, UNIT_INCH } from "./constants";
 import { SNAP_MASK } from "./utils/snap";
 import { isEmpty } from "./utils/helper";
 import { convert } from "./utils/convert-units-lite";
-var safeLoadMapList = function safeLoadMapList(mapList, Model, defaultMap) {
+export var safeLoadMapList = function safeLoadMapList(mapList, Model, defaultMap) {
   return mapList ? new Map(mapList).map(function (m) {
     return new Model(m);
   }).toMap() : defaultMap || new Map();

package/es/reducers/project-reducer.js

@@ -1,5 +1,5 @@
 import { history } from "../utils/export";
-import { LOAD_PROJECT, NEW_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, MODE_IDLE, UNSELECT_ALL, SELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, RECREATE, UNCREATE, PROJECT_RE_NAME, ROLLBACK, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, OPEN_PROJECT_CONFIGURATOR, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SET_STATE_PROPERTIES, SHIFT2DON, SHIFT2DOFF, MODE_DRAWING_LINE, SET_IS_HELP, SET_IS_CABINET_DRAWING } from "../constants";
+import { LOAD_PROJECT, NEW_PROJECT, OPEN_CATALOG, SELECT_TOOL_EDIT, MODE_IDLE, UNSELECT_ALL, SELECT_ALL, SET_PROPERTIES, SET_ITEMS_ATTRIBUTES, SET_LINES_ATTRIBUTES, SET_HOLES_ATTRIBUTES, REMOVE, INVERT, UNDO, REDO, RECREATE, UNCREATE, PROJECT_RE_NAME, ROLLBACK, SET_PROJECT_PROPERTIES, SET_PROJECT_ID, OPEN_PROJECT_CONFIGURATOR, INIT_CATALOG, UPDATE_MOUSE_COORDS, UPDATE_ZOOM_SCALE, TOGGLE_SNAP, CHANGE_CATALOG_PAGE, GO_BACK_TO_CATALOG_PAGE, THROW_ERROR, THROW_WARNING, COPY_PROPERTIES, PASTE_PROPERTIES, PUSH_LAST_SELECTED_CATALOG_ELEMENT_TO_HISTORY, ALTERATE_STATE, SET_MODE, ADD_HORIZONTAL_GUIDE, ADD_VERTICAL_GUIDE, ADD_CIRCULAR_GUIDE, REMOVE_HORIZONTAL_GUIDE, REMOVE_VERTICAL_GUIDE, REMOVE_CIRCULAR_GUIDE, REMOVE_DRAWING_SUPPORT, SET_STATE_PROPERTIES, SHIFT2DON, SHIFT2DOFF, MODE_DRAWING_LINE, SET_IS_HELP, SET_IS_CABINET_DRAWING, ADD_ELEMENT_TO_CATALOG } from "../constants";
 import { Project } from "../class/export";
 export default function (state, action) {
   switch (action.type) {
@@ -77,6 +77,8 @@ export default function (state, action) {
       return Project.openProjectConfigurator(state).updatedState;
     case INIT_CATALOG:
       return Project.initCatalog(state, action.catalog).updatedState;
+    case ADD_ELEMENT_TO_CATALOG:
+      return Project.addElementToCatalog(state, action.element).updatedState;
     case UPDATE_MOUSE_COORDS:
       return Project.updateMouseCoord(state, action.coords).updatedState;
     case UPDATE_ZOOM_SCALE:

package/es/reducers/viewer2d-reducer.js

@@ -1,4 +1,4 @@
-import { CHANGE_BASE_CABINET_MEASURE, CHANGE_WALL_CABINET_MEASURE, CHANGE_WALL_LENGTH_MEASURE, CHANGE_WINDOW_DOOR_MEASURE, MODE_2D_PAN, MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT, SELECT_TOOL_PAN, SELECT_TOOL_ZOOM_IN, SELECT_TOOL_ZOOM_OUT, MOVE_PAN, UPDATE_CEIL_HEIGHT, UPDATE_CEIL_HEIGHT_UNIT } from "../constants";
+import { CHANGE_BASE_CABINET_MEASURE, CHANGE_WALL_CABINET_MEASURE, CHANGE_WALL_LENGTH_MEASURE, CHANGE_WINDOW_DOOR_MEASURE, MODE_2D_PAN, MODE_2D_ZOOM_IN, MODE_2D_ZOOM_OUT, SELECT_TOOL_PAN, SELECT_TOOL_ZOOM_IN, SELECT_TOOL_ZOOM_OUT, UPDATE_2D_CAMERA, UPDATE_CEIL_HEIGHT, UPDATE_CEIL_HEIGHT_UNIT } from "../constants";
 import { convert } from "../utils/convert-units-lite";
 export default function (state, action) {
   var _state = state,
@@ -37,7 +37,7 @@ export default function (state, action) {
         state = state.mergeIn(['scene', 'layers', _selectedLayer, 'items'], newItems);
         return state;
       }
-    case MOVE_PAN:
+    case UPDATE_2D_CAMERA:
       return state.merge({
         viewer2D: action.value
       });

package/es/reducers/viewer3d-reducer.js

@@ -1,4 +1,4 @@
-import { MODE_3D_FIRST_PERSON, MODE_3D_VIEW, MOVE_PAN, SELECT_TOOL_3D_FIRST_PERSON, SELECT_TOOL_3D_VIEW, UPDATE_3D_CEIL_HEIGHT, UPDATE_3D_CEIL_HEIGHT_UNIT } from "../constants";
+import { MODE_3D_FIRST_PERSON, MODE_3D_VIEW, SELECT_TOOL_3D_FIRST_PERSON, SELECT_TOOL_3D_VIEW, UPDATE_3D_CEIL_HEIGHT, UPDATE_3D_CEIL_HEIGHT_UNIT } from "../constants";
 import { Project } from "../class/export";
 import { history } from "../utils/export";
 import { convert } from "../utils/convert-units-lite";
@@ -42,8 +42,6 @@ export default function (state, action) {
         state = state.mergeIn(['scene', 'layers', _selectedLayer, 'items'], newItems);
         return state;
       }
-    case MOVE_PAN:
-      return state;
     case SELECT_TOOL_3D_VIEW:
       state = Project.rollback(state).updatedState;
       state = Project.setMode(state, MODE_3D_VIEW).updatedState;