kitchen-simulator 2.0.23 → 2.0.30

package/es/actions/items-actions.js

@@ -32,9 +32,11 @@ export function editWidth(newWidth, layerID, itemID) {
   };
 }
 export function duplicateSelected(currentObject) {
+  var onInternalEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return {
     type: DUPLICATE_SELECTED,
-    currentObject: currentObject
+    currentObject: currentObject,
+    onInternalEvent: onInternalEvent
   };
 }
 export function replaceItem(selectedPos, currentObject, selectedObject) {

package/es/catalog/utils/item-loader.js

@@ -13,6 +13,7 @@ import { Item } from "../../models";
 import * as GeomUtils from "./geom-utils";
 import { loadGLTF } from "./load-obj";
 import { animateDoor, isEmpty, translateDrawer } from "../../utils/helper";
+import { isWarningItem } from "../../components/viewer2d/utils";
 var INITIAL_NORMAL_MAP = '';
 
 // env Map ///////////////
@@ -174,7 +175,6 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
   var rendered = null;
   var svg_url, svg_width, svg_depth;
   if (shape_svg || el_euro_shape_svg) {
-    var _element$toJS$doorSty;
     if (typeof shape_svg == 'string' || typeof el_euro_shape_svg == 'string') {
       if (el_DSN === 'Euro & Frameless' && el_is_euro_cds) {
         svg_url = el_euro_shape_svg;
@@ -208,12 +208,16 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
       },
       onMouseEnter: function onMouseEnter(event) {
         var bbox = event.target.getBoundingClientRect();
-        document.getElementById('warning_box_2d').style.display = 'flex';
-        document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
-        document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
+        if (document.getElementById('warning_box_2d')) {
+          document.getElementById('warning_box_2d').style.display = 'flex';
+          document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
+          document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
+        }
       },
       onMouseLeave: function onMouseLeave() {
-        document.getElementById('warning_box_2d').style.display = 'none';
+        if (document.getElementById('warning_box_2d')) {
+          document.getElementById('warning_box_2d').style.display = 'none';
+        }
       }
     }, /*#__PURE__*/React.createElement("circle", {
       cx: 0,
@@ -299,9 +303,7 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
     }), /*#__PURE__*/React.createElement("g", {
       transform: "translate(".concat(padding_width, ",").concat(padding_depth, ")")
     }, txtContent)), element.category === 'cabinet' && /*#__PURE__*/React.createElement("g", {
-      visibility: (element === null || element === void 0 || (_element$toJS$doorSty = element.toJS().doorStyle) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.doorStyles) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.cds) === null || _element$toJS$doorSty === void 0 ? void 0 : _element$toJS$doorSty.filter(function (cd) {
-        return cd.itemID == (element === null || element === void 0 ? void 0 : element.getIn(['itemID']));
-      }).length) > 0 ? 'hidden' : 'visible'
+      visibility: isWarningItem(element) ? 'visible' : 'hidden'
     }, warning_buttons)));
   } else {
     rendered = /*#__PURE__*/React.createElement("g", {

package/es/class/item.js

@@ -8,11 +8,11 @@ import { convert } from "../utils/convert-units-lite";
 import { Group, Hole, Layer } from "./export";
 import { GeometryUtils, IDBroker, MoldingUtils, NameGenerator } from "../utils/export";
 import { fromJS, Map } from 'immutable';
-import { INSTALLATION_SUFFIX_TYPE, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
+import { INSTALLATION_SUFFIX_TYPE, INTERNAL_EVENT_DRAW_ELEMENT, MODE_DRAGGING_ITEM, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM, MODE_ROTATING_ITEM_3D, MOLDING_LOCATIONS } from "../constants";
 import { debugUtil } from "../utils/helper";
 import { isUndefined } from 'util';
 import { hasMoldingLayout } from "../utils/molding";
-import { getInstallationSuffix } from "../components/viewer2d/utils";
+import { getInstallationSuffix, isWarningItem } from "../components/viewer2d/utils";
 var allItemRect;
 var allItemSnap;
 var allLines;
@@ -262,6 +262,7 @@ var Item = /*#__PURE__*/function () {
   }, {
     key: "duplicateSelected",
     value: function duplicateSelected(state, currentObject) {
+      var onInternalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
       var objectID = currentObject.id;
@@ -269,6 +270,7 @@ var Item = /*#__PURE__*/function () {
       var x = currentObject.x;
       var y = currentObject.y;
       var sceneComponentType, width, depth, rotRad;
+      var duplicatedElement = null;
       switch (currentObject.prototype) {
         case 'items':
           myObject = state.getIn(['scene', 'layers', layerID, 'items', objectID]);
@@ -293,6 +295,7 @@ var Item = /*#__PURE__*/function () {
             var _this$create = this.create(state, layerID, sceneComponentType, x + width * Math.cos(rotRad), y + width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
               stateI = _this$create.updatedState,
               item = _this$create.item;
+            duplicatedElement = item;
             if (item === null) {
               alert('There are no Door Colors in this cabinet.');
               state = state.merge({
@@ -319,6 +322,7 @@ var Item = /*#__PURE__*/function () {
               var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                 _stateI = _this$create2.updatedState,
                 _item = _this$create2.item;
+              duplicatedElement = _item;
               if (_item === null) {
                 alert('There are no Door Colors in this cabinet.');
                 state = state.merge({
@@ -345,6 +349,7 @@ var Item = /*#__PURE__*/function () {
                 var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                   _stateI2 = _this$create3.updatedState,
                   _item2 = _this$create3.item;
+                duplicatedElement = _item2;
                 if (_item2 === null) {
                   alert('There are no Door Colors in this cabinet.');
                   state = state.merge({
@@ -371,6 +376,7 @@ var Item = /*#__PURE__*/function () {
                   var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                     _stateI3 = _this$create4.updatedState,
                     _item3 = _this$create4.item;
+                  duplicatedElement = _item3;
                   if (_item3 === null) {
                     alert('There are no Door Colors in this cabinet.');
                     state = state.merge({
@@ -448,6 +454,14 @@ var Item = /*#__PURE__*/function () {
         default:
           break;
       }
+      if (onInternalEvent && duplicatedElement) {
+        var jsElement = duplicatedElement.toJS();
+        if (jsElement.prototype === 'items') jsElement.isWarning = isWarningItem(duplicatedElement);
+        onInternalEvent({
+          type: INTERNAL_EVENT_DRAW_ELEMENT,
+          value: jsElement
+        });
+      }
       return {
         updatedState: state
       };

package/es/components/viewer2d/utils.js

@@ -184,4 +184,10 @@ export var areaPolygon = function areaPolygon(points) {
   }
   var area = det / 2;
   return signed ? area : Math.abs(area);
+};
+export var isWarningItem = function isWarningItem(item) {
+  var _item$toJS$doorStyle;
+  return !(item !== null && item !== void 0 && (_item$toJS$doorStyle = item.toJS().doorStyle) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.doorStyles) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.cds) !== null && _item$toJS$doorStyle !== void 0 && _item$toJS$doorStyle.filter(function (cd) {
+    return cd.itemID == (item === null || item === void 0 ? void 0 : item.getIn(['itemID']));
+  }).length) > 0;
 };

package/es/components/viewer2d/viewer2d.js

@@ -16,6 +16,7 @@ import { convert } from "../../utils/convert-units-lite";
 import { Map } from 'immutable';
 import { formatNumber } from "../../utils/math";
 import { isEmpty } from "../../utils/helper"; // variables
+import { isWarningItem } from "./utils";
 // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
@@ -949,7 +950,7 @@ export default function Viewer2D(_ref, _ref2) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              itemsActions.duplicateSelected(currentObject);
+              itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
@@ -959,10 +960,7 @@ export default function Viewer2D(_ref, _ref2) {
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
-              onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-                type: constants.INTERNAL_EVENT_REPLACE_CABINET,
-                value: state.getIn(['scene', 'layers', layerID, 'items', elementData.id]).toJS()
-              });
+              internalType = constants.INTERNAL_EVENT_REPLACE_CABINET;
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;
@@ -1259,9 +1257,10 @@ export default function Viewer2D(_ref, _ref2) {
     if (internalType) {
       var _currentObject = null;
       var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
-      if (internalType === INTERNAL_EVENT_SELECT_ELEMENT) {
+      if (internalType === INTERNAL_EVENT_SELECT_ELEMENT || internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
         // if (
+        //   internalType === INTERNAL_EVENT_SELECT_ELEMENT &&
         //   currentObject?.prototype === 'items' &&
         //   draggingDistance > constants.EPSILON
         // )
@@ -1271,7 +1270,7 @@ export default function Viewer2D(_ref, _ref2) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       }
       if (_currentObject) {
-        var _currentObject2, _currentObject3;
+        var _currentObject2, _currentObject3, _currentObject4;
         var payload = (_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.toJS();
         if (((_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.prototype) === 'lines') {
           // caculating length of selected line//
@@ -1281,6 +1280,17 @@ export default function Viewer2D(_ref, _ref2) {
           var _length3 = convert(distance).from('cm').to('in');
           payload.length = _length3;
           //////////////////////////////////////
+        } else if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'items') {
+          // check this cabinet has warning box
+          payload.isWarning = isWarningItem(_currentObject);
+        }
+
+        // send selection event befor replace event
+        if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
+          onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+            type: INTERNAL_EVENT_SELECT_ELEMENT,
+            value: payload
+          });
         }
         onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
           type: internalType,

package/es/components/viewer3d/viewer3d.js

@@ -2587,7 +2587,7 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
               height: '70px',
               animation: 'spin 2s linear infinite'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         } else {
@@ -2601,9 +2601,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           }, /*#__PURE__*/React.createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
-              marginTop: "22%"
+              marginTop: "50%",
+              width: '50px',
+              height: '50px'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         }
@@ -2620,9 +2622,11 @@ var Scene3DViewer = /*#__PURE__*/function (_React$Component) {
           style: {
             animation: 'spin 2s linear infinite',
             position: "absolute",
-            top: "50%"
+            top: "50%",
+            width: '50px',
+            height: '50px'
           },
-          src: '/assets/img/loading_large.gif',
+          src: '/assets/img/loading/loading.gif',
           alt: "img"
         }));
       } else {

package/es/plugins/keyboard.js

@@ -6,12 +6,21 @@ export default function keyboard() {
       var state = stateExtractor(store.getState());
       var mode = state.get('mode');
       switch (event.keyCode) {
-        case KEYBOARD_BUTTON_CODE.BACKSPACE:
-        case KEYBOARD_BUTTON_CODE.DELETE:
-          {
-            if ([MODE_IDLE, MODE_3D_FIRST_PERSON, MODE_3D_VIEW, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, MODE_DRAGGING_ITEM_3D].includes(mode)) store.dispatch(remove());
-            break;
-          }
+        // case KEYBOARD_BUTTON_CODE.BACKSPACE:
+        // case KEYBOARD_BUTTON_CODE.DELETE: {
+        //   if (
+        //     [
+        //       MODE_IDLE,
+        //       MODE_3D_FIRST_PERSON,
+        //       MODE_3D_VIEW,
+        //       MODE_IDLE_3D,
+        //       MODE_ROTATING_ITEM_3D,
+        //       MODE_DRAGGING_ITEM_3D
+        //     ].includes(mode)
+        //   )
+        //     store.dispatch(remove());
+        //   break;
+        // }
         case KEYBOARD_BUTTON_CODE.ESC:
           {
             store.dispatch(rollback());

package/es/reducers/items-reducer.js

@@ -17,7 +17,7 @@ export default function (state, action) {
     case EDIT_WIDTH:
       return Item.editWidth(state, action.newWidth, action.layerID, action.itemID).updatedState;
     case DUPLICATE_SELECTED:
-      return Item.duplicateSelected(state, action.currentObject).updatedState;
+      return Item.duplicateSelected(state, action.currentObject, action.onInternalEvent).updatedState;
     case END_CREATING_CABINET:
       return Item.endCreatingCabinet(state).updatedState;
     case UPDATE_POPUP_OPEN:

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

@@ -1238,7 +1238,7 @@ function _handleExternalEvent() {
           return _context9.abrupt("continue", 37);
         case 30:
           distElement = getElement(evt.payload, state);
-          if (distElement) props.itemsActions.duplicateSelected(distElement);
+          if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
           return _context9.abrupt("continue", 37);
         case 31:
           _distElement = getElement(evt.payload, state);

package/lib/actions/items-actions.js

@@ -83,9 +83,11 @@ function editWidth(newWidth, layerID, itemID) {
   };
 }
 function duplicateSelected(currentObject) {
+  var onInternalEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
   return {
     type: _constants.DUPLICATE_SELECTED,
-    currentObject: currentObject
+    currentObject: currentObject,
+    onInternalEvent: onInternalEvent
   };
 }
 function replaceItem(selectedPos, currentObject, selectedObject) {

package/lib/catalog/utils/item-loader.js

@@ -24,6 +24,7 @@ var _models = require("../../models");
 var GeomUtils = _interopRequireWildcard(require("./geom-utils"));
 var _loadObj = require("./load-obj");
 var _helper = require("../../utils/helper");
+var _utils = require("../../components/viewer2d/utils");
 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" != _typeof3(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; }
@@ -188,7 +189,6 @@ function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corner, sha
   var rendered = null;
   var svg_url, svg_width, svg_depth;
   if (shape_svg || el_euro_shape_svg) {
-    var _element$toJS$doorSty;
     if (typeof shape_svg == 'string' || typeof el_euro_shape_svg == 'string') {
       if (el_DSN === 'Euro & Frameless' && el_is_euro_cds) {
         svg_url = el_euro_shape_svg;
@@ -222,12 +222,16 @@ function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corner, sha
       },
       onMouseEnter: function onMouseEnter(event) {
         var bbox = event.target.getBoundingClientRect();
-        document.getElementById('warning_box_2d').style.display = 'flex';
-        document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
-        document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
+        if (document.getElementById('warning_box_2d')) {
+          document.getElementById('warning_box_2d').style.display = 'flex';
+          document.getElementById('warning_box_2d').style.top = "".concat(bbox.top - 60, "px");
+          document.getElementById('warning_box_2d').style.left = "".concat(bbox.left, "px");
+        }
       },
       onMouseLeave: function onMouseLeave() {
-        document.getElementById('warning_box_2d').style.display = 'none';
+        if (document.getElementById('warning_box_2d')) {
+          document.getElementById('warning_box_2d').style.display = 'none';
+        }
       }
     }, /*#__PURE__*/_react["default"].createElement("circle", {
       cx: 0,
@@ -313,9 +317,7 @@ function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corner, sha
     }), /*#__PURE__*/_react["default"].createElement("g", {
       transform: "translate(".concat(padding_width, ",").concat(padding_depth, ")")
     }, txtContent)), element.category === 'cabinet' && /*#__PURE__*/_react["default"].createElement("g", {
-      visibility: (element === null || element === void 0 || (_element$toJS$doorSty = element.toJS().doorStyle) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.doorStyles) === null || _element$toJS$doorSty === void 0 || (_element$toJS$doorSty = _element$toJS$doorSty.cds) === null || _element$toJS$doorSty === void 0 ? void 0 : _element$toJS$doorSty.filter(function (cd) {
-        return cd.itemID == (element === null || element === void 0 ? void 0 : element.getIn(['itemID']));
-      }).length) > 0 ? 'hidden' : 'visible'
+      visibility: (0, _utils.isWarningItem)(element) ? 'visible' : 'hidden'
     }, warning_buttons)));
   } else {
     rendered = /*#__PURE__*/_react["default"].createElement("g", {

package/lib/class/item.js

@@ -269,6 +269,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "duplicateSelected",
     value: function duplicateSelected(state, currentObject) {
+      var onInternalEvent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
       var layerID = state.getIn(['scene', 'selectedLayer']);
       var layer = state.getIn(['scene', 'layers', layerID]);
       var objectID = currentObject.id;
@@ -276,6 +277,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
       var x = currentObject.x;
       var y = currentObject.y;
       var sceneComponentType, width, depth, rotRad;
+      var duplicatedElement = null;
       switch (currentObject.prototype) {
         case 'items':
           myObject = state.getIn(['scene', 'layers', layerID, 'items', objectID]);
@@ -300,6 +302,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
             var _this$create = this.create(state, layerID, sceneComponentType, x + width * Math.cos(rotRad), y + width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
               stateI = _this$create.updatedState,
               item = _this$create.item;
+            duplicatedElement = item;
             if (item === null) {
               alert('There are no Door Colors in this cabinet.');
               state = state.merge({
@@ -326,6 +329,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
               var _this$create2 = this.create(state, layerID, sceneComponentType, x - width * Math.cos(rotRad), y - width * Math.sin(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                 _stateI = _this$create2.updatedState,
                 _item = _this$create2.item;
+              duplicatedElement = _item;
               if (_item === null) {
                 alert('There are no Door Colors in this cabinet.');
                 state = state.merge({
@@ -352,6 +356,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                 var _this$create3 = this.create(state, layerID, sceneComponentType, x - depth * Math.sin(rotRad), y - depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                   _stateI2 = _this$create3.updatedState,
                   _item2 = _this$create3.item;
+                duplicatedElement = _item2;
                 if (_item2 === null) {
                   alert('There are no Door Colors in this cabinet.');
                   state = state.merge({
@@ -378,6 +383,7 @@ var Item = exports["default"] = /*#__PURE__*/function () {
                   var _this$create4 = this.create(state, layerID, sceneComponentType, x + depth * Math.sin(rotRad), y + depth * Math.cos(rotRad), 200, 100, rotRad * 180 / Math.PI, true, myObject.molding),
                     _stateI3 = _this$create4.updatedState,
                     _item3 = _this$create4.item;
+                  duplicatedElement = _item3;
                   if (_item3 === null) {
                     alert('There are no Door Colors in this cabinet.');
                     state = state.merge({
@@ -455,6 +461,14 @@ var Item = exports["default"] = /*#__PURE__*/function () {
         default:
           break;
       }
+      if (onInternalEvent && duplicatedElement) {
+        var jsElement = duplicatedElement.toJS();
+        if (jsElement.prototype === 'items') jsElement.isWarning = (0, _utils.isWarningItem)(duplicatedElement);
+        onInternalEvent({
+          type: _constants.INTERNAL_EVENT_DRAW_ELEMENT,
+          value: jsElement
+        });
+      }
       return {
         updatedState: state
       };

package/lib/components/viewer2d/utils.js

@@ -9,6 +9,7 @@ exports.getInstallationSuffix = getInstallationSuffix;
 exports.getToeKickSKU = void 0;
 exports.isEmpty = isEmpty;
 exports.isEqualInstallationType = isEqualInstallationType;
+exports.isWarningItem = void 0;
 exports.makeSKUForMagento = makeSKUForMagento;
 exports.searchForSkuValue = exports.returnReplaceableDeepSearchType = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -197,4 +198,10 @@ var areaPolygon = exports.areaPolygon = function areaPolygon(points) {
   }
   var area = det / 2;
   return signed ? area : Math.abs(area);
+};
+var isWarningItem = exports.isWarningItem = function isWarningItem(item) {
+  var _item$toJS$doorStyle;
+  return !(item !== null && item !== void 0 && (_item$toJS$doorStyle = item.toJS().doorStyle) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.doorStyles) !== null && _item$toJS$doorStyle !== void 0 && (_item$toJS$doorStyle = _item$toJS$doorStyle.cds) !== null && _item$toJS$doorStyle !== void 0 && _item$toJS$doorStyle.filter(function (cd) {
+    return cd.itemID == (item === null || item === void 0 ? void 0 : item.getIn(['itemID']));
+  }).length) > 0;
 };

package/lib/components/viewer2d/viewer2d.js

@@ -22,10 +22,10 @@ var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _immutable = require("immutable");
 var _math = require("../../utils/math");
 var _helper = require("../../utils/helper");
+var _utils = require("./utils");
 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; }
-// variables
+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; } // variables
 // variables
 var pinFlag = false;
 var sFlag = false; //for all object move
@@ -959,7 +959,7 @@ function Viewer2D(_ref, _ref2) {
           case 'items':
             if (elementData.part === 'duplicate') {
               var currentObject = state.getIn(['scene', 'layers', layerID, 'items', elementData.id]);
-              itemsActions.duplicateSelected(currentObject);
+              itemsActions.duplicateSelected(currentObject, onInternalEvent); // send draw internal event when duplicating
               break;
             } else if (elementData.part === 'remove') {
               projectActions.remove();
@@ -969,10 +969,7 @@ function Viewer2D(_ref, _ref2) {
               if (document.getElementById('setting_dialog')) {
                 document.getElementById('setting_dialog').style.display = 'none';
               }
-              onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
-                type: constants.INTERNAL_EVENT_REPLACE_CABINET,
-                value: state.getIn(['scene', 'layers', layerID, 'items', elementData.id]).toJS()
-              });
+              internalType = constants.INTERNAL_EVENT_REPLACE_CABINET;
               itemsActions.selectItem(elementData.layer, elementData.id);
               replaceCabinet(true);
               break;
@@ -1269,9 +1266,10 @@ function Viewer2D(_ref, _ref2) {
     if (internalType) {
       var _currentObject = null;
       var draggingDistance = Math.sqrt((x - mouseDownPoint.x) * (x - mouseDownPoint.x) + (y - mouseDownPoint.y) * (y - mouseDownPoint.y));
-      if (internalType === _constants.INTERNAL_EVENT_SELECT_ELEMENT) {
+      if (internalType === _constants.INTERNAL_EVENT_SELECT_ELEMENT || internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementData === null || elementData === void 0 ? void 0 : elementData.prototype, elementData === null || elementData === void 0 ? void 0 : elementData.id]);
         // if (
+        //   internalType === INTERNAL_EVENT_SELECT_ELEMENT &&
         //   currentObject?.prototype === 'items' &&
         //   draggingDistance > constants.EPSILON
         // )
@@ -1281,7 +1279,7 @@ function Viewer2D(_ref, _ref2) {
         _currentObject = state.getIn(['scene', 'layers', layerID, elementPrototype, elementID]);
       }
       if (_currentObject) {
-        var _currentObject2, _currentObject3;
+        var _currentObject2, _currentObject3, _currentObject4;
         var payload = (_currentObject2 = _currentObject) === null || _currentObject2 === void 0 ? void 0 : _currentObject2.toJS();
         if (((_currentObject3 = _currentObject) === null || _currentObject3 === void 0 ? void 0 : _currentObject3.prototype) === 'lines') {
           // caculating length of selected line//
@@ -1291,6 +1289,17 @@ function Viewer2D(_ref, _ref2) {
           var _length3 = (0, _convertUnitsLite.convert)(distance).from('cm').to('in');
           payload.length = _length3;
           //////////////////////////////////////
+        } else if (((_currentObject4 = _currentObject) === null || _currentObject4 === void 0 ? void 0 : _currentObject4.prototype) === 'items') {
+          // check this cabinet has warning box
+          payload.isWarning = (0, _utils.isWarningItem)(_currentObject);
+        }
+
+        // send selection event befor replace event
+        if (internalType === constants.INTERNAL_EVENT_REPLACE_CABINET) {
+          onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+            type: _constants.INTERNAL_EVENT_SELECT_ELEMENT,
+            value: payload
+          });
         }
         onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
           type: internalType,

package/lib/components/viewer3d/viewer3d.js

@@ -2594,7 +2594,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
               height: '70px',
               animation: 'spin 2s linear infinite'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         } else {
@@ -2608,9 +2608,11 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           }, /*#__PURE__*/_react["default"].createElement("img", {
             style: {
               animation: 'spin 2s linear infinite',
-              marginTop: "22%"
+              marginTop: "50%",
+              width: '50px',
+              height: '50px'
             },
-            src: '/assets/img/loading_large.gif',
+            src: '/assets/img/loading/loading.gif',
             alt: "img"
           }));
         }
@@ -2627,9 +2629,11 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           style: {
             animation: 'spin 2s linear infinite',
             position: "absolute",
-            top: "50%"
+            top: "50%",
+            width: '50px',
+            height: '50px'
           },
-          src: '/assets/img/loading_large.gif',
+          src: '/assets/img/loading/loading.gif',
           alt: "img"
         }));
       } else {

package/lib/plugins/keyboard.js

@@ -12,12 +12,21 @@ function keyboard() {
       var state = stateExtractor(store.getState());
       var mode = state.get('mode');
       switch (event.keyCode) {
-        case _constants.KEYBOARD_BUTTON_CODE.BACKSPACE:
-        case _constants.KEYBOARD_BUTTON_CODE.DELETE:
-          {
-            if ([_constants.MODE_IDLE, _constants.MODE_3D_FIRST_PERSON, _constants.MODE_3D_VIEW, _constants.MODE_IDLE_3D, _constants.MODE_ROTATING_ITEM_3D, _constants.MODE_DRAGGING_ITEM_3D].includes(mode)) store.dispatch((0, _projectActions.remove)());
-            break;
-          }
+        // case KEYBOARD_BUTTON_CODE.BACKSPACE:
+        // case KEYBOARD_BUTTON_CODE.DELETE: {
+        //   if (
+        //     [
+        //       MODE_IDLE,
+        //       MODE_3D_FIRST_PERSON,
+        //       MODE_3D_VIEW,
+        //       MODE_IDLE_3D,
+        //       MODE_ROTATING_ITEM_3D,
+        //       MODE_DRAGGING_ITEM_3D
+        //     ].includes(mode)
+        //   )
+        //     store.dispatch(remove());
+        //   break;
+        // }
         case _constants.KEYBOARD_BUTTON_CODE.ESC:
           {
             store.dispatch((0, _projectActions.rollback)());

package/lib/reducers/items-reducer.js

@@ -20,7 +20,7 @@ function _default(state, action) {
     case _constants.EDIT_WIDTH:
       return _export.Item.editWidth(state, action.newWidth, action.layerID, action.itemID).updatedState;
     case _constants.DUPLICATE_SELECTED:
-      return _export.Item.duplicateSelected(state, action.currentObject).updatedState;
+      return _export.Item.duplicateSelected(state, action.currentObject, action.onInternalEvent).updatedState;
     case _constants.END_CREATING_CABINET:
       return _export.Item.endCreatingCabinet(state).updatedState;
     case _constants.UPDATE_POPUP_OPEN:

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

@@ -1245,7 +1245,7 @@ function _handleExternalEvent() {
           return _context9.abrupt("continue", 37);
         case 30:
           distElement = getElement(evt.payload, state);
-          if (distElement) props.itemsActions.duplicateSelected(distElement);
+          if (distElement) props.itemsActions.duplicateSelected(distElement, props.onInternalEvent);
           return _context9.abrupt("continue", 37);
         case 31:
           _distElement = getElement(evt.payload, state);

package/package.json

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