kitchen-simulator 7.0.10-react-18 → 10.0.1

package/es/components/style/form-number-input.js

@@ -3,7 +3,6 @@ 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";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject;
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -13,13 +12,12 @@ import PropTypes from 'prop-types';
 import { KEYBOARD_BUTTON_CODE, TEXT_COLOR_NEUTRAL_0, SECONDARY_PURPLE_COLOR, DEFAULT_FONT_FAMILY } from "../../constants";
 import styled from 'styled-components';
 import { isValidNumber } from "../../utils/helper";
-import AppContext from "../../AppContext";
 var StyledInput = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  padding: 15px 25px 12px 0px;\n  width: 120px;\n  color: ", ";\n  background-color: rgb(255, 255, 255);\n  border: 2px solid;\n  text-align: right;\n  float: right;\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 17px;\n  border-radius: 5px;\n  outline: 0;\n  :focus {\n    border-color: ", ";\n  }\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY, SECONDARY_PURPLE_COLOR);
 var FormNumberInput = /*#__PURE__*/function (_Component) {
-  function FormNumberInput(props) {
+  function FormNumberInput(props, context) {
     var _this;
     _classCallCheck(this, FormNumberInput);
-    _this = _callSuper(this, FormNumberInput, [props]);
+    _this = _callSuper(this, FormNumberInput, [props, context]);
     _this.state = {
       focus: false,
       valid: true,
@@ -34,30 +32,27 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
   return _createClass(FormNumberInput, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.input.current && ['width', 'length'].includes((this.props.labelName || '').toLowerCase())) {
+      if (this.input.current && ['width', 'length'].includes(this.props.labelName.toLowerCase())) {
         this.input.current.focus();
         this.input.current.select();
       }
     }
   }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.value !== this.props.value || prevProps.focus !== this.props.focus) {
-        // avoid setState loop
-        if (this.state.showedValue !== this.props.value || this.state.focusOn !== this.props.focus) {
-          // eslint-disable-next-line react/no-did-update-set-state
-          this.setState({
-            showedValue: this.props.value,
-            focusOn: this.props.focus
-          });
-        }
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.props.value !== nextProps.value || this.props.focus !== nextProps.focus) {
+        this.setState({
+          showedValue: nextProps.value,
+          focusOn: nextProps.focus
+        });
       }
-
-      // keep your existing behavior
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, preprevState) {
       if (this.props.value !== prevProps.value && prevProps.labelName !== 'Ceiling Height') {
-        var _this$input$current, _this$input$current2;
-        (_this$input$current = this.input.current) === null || _this$input$current === void 0 || _this$input$current.focus();
-        (_this$input$current2 = this.input.current) === null || _this$input$current2 === void 0 || _this$input$current2.select();
+        this.input.current.focus();
+        this.input.current.select();
       }
       var showedValue = this.state.showedValue;
       var _this$props = this.props,
@@ -66,17 +61,16 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         isCeiling = _this$props.isCeiling;
       if (!isCeiling) {
         if (isValidNumber(min) && showedValue < min) {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             showedValue: min
           });
         } else if (isValidNumber(max) && showedValue > max) {
-          // eslint-disable-next-line react/no-did-update-set-state
           this.setState({
             showedValue: max
           });
         }
       }
+      return null;
     }
   }, {
     key: "render",
@@ -95,6 +89,7 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         isCeiling = _this$props2.isCeiling;
       var regexp = new RegExp("^-?([0-9]+)?\\.?([0-9]{0,".concat(precision, "})?$"));
       var currValue = regexp.test(this.state.showedValue) ? this.state.showedValue : parseFloat(this.state.showedValue).toFixed(precision);
+      var different = parseFloat(this.props.value).toFixed(precision) !== parseFloat(this.state.showedValue).toFixed(precision);
       var saveFn = function saveFn(e) {
         e.stopPropagation();
         if (_this2.state.valid) {
@@ -117,29 +112,27 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         value: currValue,
         style: style,
         onChange: function onChange(evt) {
-          var _this2$context, _projectActions$copyP;
-          var projectActions = (_this2$context = _this2.context) === null || _this2$context === void 0 ? void 0 : _this2$context.projectActions;
-          projectActions === null || projectActions === void 0 || (_projectActions$copyP = projectActions.copyProperties) === null || _projectActions$copyP === void 0 || _projectActions$copyP.call(projectActions, 'ddddd');
+          _this2.context.projectActions.copyProperties('ddddd');
           var valid = regexp.test(evt.nativeEvent.target.value);
           if (valid) {
             _this2.setState({
               showedValue: evt.nativeEvent.target.value,
               flag: false
             });
-            onValid === null || onValid === void 0 || onValid(evt.nativeEvent);
+            if (onValid) onValid(evt.nativeEvent);
           } else {
-            onInvalid === null || onInvalid === void 0 || onInvalid(evt.nativeEvent);
+            if (onInvalid) onInvalid(evt.nativeEvent);
           }
           _this2.setState({
             valid: valid
           });
         },
-        onFocus: function onFocus() {
+        onFocus: function onFocus(e) {
           return _this2.setState({
             focusOn: true
           });
         },
-        onBlur: function onBlur() {
+        onBlur: function onBlur(e) {
           return _this2.setState({
             focusOn: false
           });
@@ -147,15 +140,12 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
         ref: this.input,
         onKeyDown: function onKeyDown(e) {
           var keyCode = e.keyCode || e.which;
-          if (keyCode === KEYBOARD_BUTTON_CODE.ENTER || keyCode === KEYBOARD_BUTTON_CODE.TAB) {
-            var _this2$input$current;
+          if (keyCode == KEYBOARD_BUTTON_CODE.ENTER || keyCode == KEYBOARD_BUTTON_CODE.TAB) {
             saveFn(e);
-            (_this2$input$current = _this2.input.current) === null || _this2$input$current === void 0 || _this2$input$current.blur();
+            _this2.input.current.blur();
           }
-          if (keyCode === KEYBOARD_BUTTON_CODE.ESC) {
-            var _this2$context2, _projectActions$rollb;
-            var projectActions = (_this2$context2 = _this2.context) === null || _this2$context2 === void 0 ? void 0 : _this2$context2.projectActions;
-            projectActions === null || projectActions === void 0 || (_projectActions$rollb = projectActions.rollback) === null || _projectActions$rollb === void 0 || _projectActions$rollb.call(projectActions);
+          if (keyCode == KEYBOARD_BUTTON_CODE.ESC) {
+            _this2.context.projectActions.rollback();
           }
         },
         placeholder: placeholder
@@ -163,7 +153,6 @@ var FormNumberInput = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
-_defineProperty(FormNumberInput, "contextType", AppContext);
 export { FormNumberInput as default };
 FormNumberInput.propTypes = {
   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -176,9 +165,12 @@ FormNumberInput.propTypes = {
   precision: PropTypes.number,
   placeholder: PropTypes.string,
   labelName: PropTypes.string,
-  isCeiling: PropTypes.string,
-  disabled: PropTypes.bool,
-  focus: PropTypes.bool
+  isCeiling: PropTypes.string
+};
+FormNumberInput.contextTypes = {
+  translator: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  linesActions: PropTypes.object.isRequired
 };
 FormNumberInput.defaultProps = {
   value: 0,
@@ -187,6 +179,5 @@ FormNumberInput.defaultProps = {
   max: Number.MAX_SAFE_INTEGER,
   precision: 2,
   disabled: false,
-  labelName: 'default',
-  focus: false
+  labelName: 'default'
 };

package/es/components/viewer2d/group.js

@@ -1,8 +1,7 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import If from "../../utils/react-if";
 import * as sharedStyles from "../../shared-style";
-import AppContext from "../../AppContext";
 var cx = 0;
 var cy = 0;
 var radius = 5;
@@ -11,11 +10,12 @@ var STYLE_CIRCLE = {
   stroke: sharedStyles.MATERIAL_COLORS[500].orange,
   cursor: 'default'
 };
-export default function Group(_ref) {
+export default function Group(_ref, _ref2) {
   var layer = _ref.layer,
-    group = _ref.group;
-  var _useContext = useContext(AppContext),
-    translator = _useContext.translator;
+    group = _ref.group,
+    scene = _ref.scene,
+    catalog = _ref.catalog;
+  var translator = _ref2.translator;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
     "data-prototype": group.prototype,
@@ -44,5 +44,10 @@ export default function Group(_ref) {
 }
 Group.propTypes = {
   group: PropTypes.object.isRequired,
-  layer: PropTypes.object.isRequired
+  layer: PropTypes.object.isRequired,
+  scene: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired
+};
+Group.contextTypes = {
+  translator: PropTypes.object.isRequired
 };

package/es/components/viewer2d/item.js

@@ -1,30 +1,34 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import RulerDist from "./rulerDist";
 import { convert } from "../../utils/convert-units-lite";
+import { GeometryUtils } from "../../utils/export";
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from "../../constants";
-import { isWarningItem } from "./utils";
-import { calcDistancesFromItemToWalls } from "../../utils/geometry";
-import AppContext from "../../AppContext";
-var stableKeyForPointArray = function stableKeyForPointArray(arr) {
-  if (!Array.isArray(arr)) return '';
-  return arr.map(function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-      d = _ref2[0],
-      dir = _ref2[1];
-    return "".concat(Math.round(d * 1000) / 1000, ":").concat(dir);
-  }).join('|');
+import { isEmpty, isWarningItem, returnReplaceableDeepSearchType } from "./utils";
+import { calcDistancesFromItemToWalls, findCatalogElement } from "../../utils/geometry";
+var STYLE_LINE = {
+  fill: '#0096fd',
+  stroke: '#0096fd'
 };
-export default function Item(_ref3) {
+var STYLE_CIRCLE = {
+  fill: '#0096fd',
+  stroke: '#0096fd',
+  cursor: 'ew-resize'
+};
+var STYLE_CIRCLE2 = {
+  fill: 'none',
+  stroke: '#0096fd',
+  cursor: 'ew-resize'
+};
+export default function Item(_ref, _ref2) {
   var _element$render2D;
-  var layer = _ref3.layer,
-    item = _ref3.item,
-    scene = _ref3.scene,
-    catalog = _ref3.catalog,
-    mode = _ref3.mode;
-  var _useContext = useContext(AppContext),
-    itemsActions = _useContext.itemsActions;
+  var layer = _ref.layer,
+    item = _ref.item,
+    scene = _ref.scene,
+    catalog = _ref.catalog,
+    mode = _ref.mode;
+  var itemsActions = _ref2.itemsActions;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     clockRotateState = _useState2[0],
@@ -38,10 +42,8 @@ export default function Item(_ref3) {
     rotation = item.rotation,
     id = item.id;
   var element = catalog.getElement(item.type);
-  var showBaseCabinetMeasure = scene.get('showBaseCabinetMeasure');
-  var showWallCabinetMeasure = scene.get('showWallCabinetMeasure');
-
-  // --- compute width/height exactly like you had ---
+  var showBaseCabinetMeasure = scene.showBaseCabinetMeasure,
+    showWallCabinetMeasure = scene.showWallCabinetMeasure;
   var width, height;
   var tempWidth = item.properties.get('width');
   var tempHeight = item.properties.get('depth');
@@ -52,38 +54,23 @@ export default function Item(_ref3) {
     width = convert(element.info.sizeinfo.width).from('in').to('cm');
     height = convert(element.info.sizeinfo.depth).from('in').to('cm');
   }
-  var nw = width / 2;
-  var nh = height / 2;
-
-  // --- compute PointArray (pure) ---
-  var pointArray = useMemo(function () {
-    var _res$PointArray;
-    var res = calcDistancesFromItemToWalls(item, layer);
-    return (_res$PointArray = res === null || res === void 0 ? void 0 : res.PointArray) !== null && _res$PointArray !== void 0 ? _res$PointArray : [];
-  }, [item, layer]);
-
-  // ✅ Immutable access
-  var layerID = scene.get('selectedLayer');
-  var lastKeyRef = useRef('');
-  useEffect(function () {
-    if (!Array.isArray(pointArray)) return;
-    var key = stableKeyForPointArray(pointArray);
-    if (key === lastKeyRef.current) return;
-    lastKeyRef.current = key;
-    itemsActions.storeDistArray(layerID, id, pointArray);
-  }, [itemsActions, layerID, id, pointArray]);
+  var _calcDistancesFromIte = calcDistancesFromItemToWalls(item, layer),
+    PointArray = _calcDistancesFromIte.PointArray;
+  var layerID = scene.selectedLayer;
+  if (Array.isArray(PointArray)) {
+    itemsActions.storeDistArray(layerID, id, PointArray);
+  }
   var catid = item.type;
   var cat = catalog.elements[catid];
-
-  // --- rulers ---
+  var nw = width / 2;
+  var nh = height / 2;
   var renderedRuler = [];
   var ep = 0.1;
   if (item.selected) {
-    pointArray.forEach(function (el, key) {
-      var itemDistanceFromLine = el[0];
-      var dir = el[1];
+    PointArray.forEach(function (element, key) {
+      var itemDistanceFromLine = element[0];
+      var length = itemDistanceFromLine;
       if (itemDistanceFromLine > ep || itemDistanceFromLine < -ep) {
-        var _cat$info;
         renderedRuler.push(/*#__PURE__*/React.createElement("g", {
           "data-element-root": true,
           "data-prototype": "rulerDist",
@@ -91,131 +78,135 @@ export default function Item(_ref3) {
           "data-selected": item.selected,
           "data-layer": layer.id,
           key: key,
-          "data-length": itemDistanceFromLine,
-          "data-direct": dir
+          "data-length": length,
+          "data-direct": element[1]
         }, /*#__PURE__*/React.createElement(RulerDist, {
+          key: key,
           layer: layer,
-          unit: scene.get('unit'),
-          rulerUnit: scene.get('rulerUnit'),
+          unit: scene.unit,
+          rulerUnit: scene.rulerUnit,
           length: itemDistanceFromLine,
           angle: rotation,
-          rotation: dir,
-          transform: "translate(".concat(dir === 180 ? -nw : dir === 0 ? nw : 0, ", ").concat(dir === 90 ? nh : dir === -90 ? (cat === null || cat === void 0 || (_cat$info = cat.info) === null || _cat$info === void 0 ? void 0 : _cat$info.is_corner) !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(dir, ", 0, 0)")
+          rotation: element[1],
+          transform: "translate(".concat(element[1] === 180 ? -nw : element[1] === 0 ? nw : 0, ", ").concat(element[1] === 90 ? nh : element[1] === -90 ? cat.info.is_corner !== 1 ? -(nh + 4) : -nh : 0, ") rotate(").concat(element[1], ", 0, 0)")
         })));
       }
     });
   }
   var renderedItem = element === null || element === void 0 || (_element$render2D = element.render2D) === null || _element$render2D === void 0 ? void 0 : _element$render2D.call(element, item, layer, scene);
-
-  // --- selection controls (same as you had) ---
+  var isSmall = false;
+  if (width < 40) isSmall = true;
   var parts = [];
-  if (item.selected) {
-    parts = [/*#__PURE__*/React.createElement("g", {
-      key: "rotation-anchor",
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "rotation-anchor",
-      style: {
-        cursor: 'w-resize'
-      }
-    }, /*#__PURE__*/React.createElement("image", {
-      href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
-      style: {
-        transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
-      },
-      height: "20",
-      width: "20",
-      onMouseEnter: function onMouseEnter() {
-        setClockRotateState(true);
-        setAntiClockRotateState(false);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setClockRotateState(mode === MODE_ROTATING_ITEM);
-      }
-    }), /*#__PURE__*/React.createElement("image", {
-      href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
-      style: {
-        transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
-      },
-      height: "20",
-      width: "20",
-      onMouseEnter: function onMouseEnter() {
-        setAntiClockRotateState(true);
-        setClockRotateState(false);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return setAntiClockRotateState(mode === MODE_ROTATING_ITEM);
-      }
-    })), /*#__PURE__*/React.createElement("g", {
-      key: "duplicate",
-      style: {
-        cursor: 'pointer',
-        transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, 0px)")
-      },
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "duplicate"
-    }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
-      id: "shadow"
-    }, /*#__PURE__*/React.createElement("feDropShadow", {
-      dx: "0",
-      dy: "0",
-      stdDeviation: "0.6"
-    }))), /*#__PURE__*/React.createElement("rect", {
-      rx: "4",
-      ry: "4",
-      height: "22",
-      width: "22",
-      fill: "white",
-      filter: "url(#shadow)"
-    }), /*#__PURE__*/React.createElement("image", {
-      href: "/assets/img/svg/duplicate.svg",
-      x: "3",
-      y: "-19",
-      height: "16",
-      width: "16",
-      style: isWarningItem(item) ? {
-        transform: 'rotateX(180deg)',
-        opacity: 0.5
-      } : {
-        transform: 'rotateX(180deg)'
-      }
-    })), /*#__PURE__*/React.createElement("g", {
-      key: "remove",
-      style: {
-        cursor: 'pointer',
-        transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, -27px)")
-      },
-      "data-element-root": true,
-      "data-prototype": item.prototype,
-      "data-id": item.id,
-      "data-selected": item.selected,
-      "data-layer": layer.id,
-      "data-part": "remove"
-    }, /*#__PURE__*/React.createElement("rect", {
-      rx: "4",
-      ry: "4",
-      height: "22",
-      width: "22",
-      fill: "white",
-      filter: "url(#shadow)"
-    }), /*#__PURE__*/React.createElement("image", {
-      href: "/assets/img/svg/delete.svg",
-      x: "3",
-      y: "-19",
-      height: "16",
-      width: "16",
-      style: {
-        transform: 'rotateX(180deg)'
-      }
-    }))];
-  }
+  var newWidth = item.toJS().properties.width.length;
+  if (item.selected) parts = [/*#__PURE__*/React.createElement("g", {
+    key: 0,
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "rotation-anchor",
+    style: {
+      cursor: 'w-resize'
+    }
+  }, /*#__PURE__*/React.createElement("image", {
+    href: clockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
+    style: {
+      transform: "scale(-1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
+    },
+    height: "20",
+    width: "20",
+    onMouseEnter: function onMouseEnter() {
+      setClockRotateState(true);
+      setAntiClockRotateState(false);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
+    }
+  }), /*#__PURE__*/React.createElement("image", {
+    href: antiClockRotateState ? '/assets/img/svg/rotate.png' : '/assets/img/svg/blank_div.svg',
+    style: {
+      transform: "scale(1, -1) translate(".concat(width / 2, "px, ").concat(height / 2, "px) rotate(25deg)")
+    },
+    height: "20",
+    width: "20",
+    onMouseEnter: function onMouseEnter() {
+      setAntiClockRotateState(true);
+      setClockRotateState(false);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setAntiClockRotateState(mode === MODE_ROTATING_ITEM ? true : false);
+    }
+  })), /*#__PURE__*/React.createElement("g", {
+    key: 1
+    // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2 + 40})`}
+    ,
+    style: {
+      cursor: 'pointer',
+      transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ", 0, "px)")
+    },
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "duplicate"
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("filter", {
+    id: "shadow"
+  }, /*#__PURE__*/React.createElement("feDropShadow", {
+    dx: "0",
+    dy: "0",
+    stdDeviation: "0.6"
+  }))), /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/duplicate.svg",
+    x: "3",
+    y: "-19",
+    height: "16",
+    width: "16",
+    style: isWarningItem(item) ? {
+      transform: 'rotateX(180deg)',
+      opacity: 0.5
+    } : {
+      transform: 'rotateX(180deg)'
+    }
+  })), /*#__PURE__*/React.createElement("g", {
+    key: 2
+    // transform={`translate(${-width / 2 - (!isSmall ? 40 : 0)},${height / 2})`}
+    ,
+    style: {
+      cursor: 'pointer',
+      transform: "rotate(".concat(360 - item.rotation, "deg) translate(").concat(-width / 2 - 27, "px, ").concat(-27, "px)")
+    },
+    "data-element-root": true,
+    "data-prototype": item.prototype,
+    "data-id": item.id,
+    "data-selected": item.selected,
+    "data-layer": layer.id,
+    "data-part": "remove"
+  }, /*#__PURE__*/React.createElement("rect", {
+    rx: "4",
+    ry: "4",
+    height: "22",
+    width: "22",
+    fill: "white",
+    filter: "url(#shadow)"
+  }), /*#__PURE__*/React.createElement("image", {
+    href: "/assets/img/svg/delete.svg",
+    x: "3",
+    y: "-19",
+    height: "16",
+    width: "16",
+    style: {
+      transform: 'rotateX(180deg)'
+    }
+  }))];
   var measure = item.layoutpos === WALL_CABINET_LAYOUTPOS ? showWallCabinetMeasure : showBaseCabinetMeasure;
   return /*#__PURE__*/React.createElement("g", {
     "data-element-root": true,
@@ -237,7 +228,8 @@ Item.propTypes = {
   item: PropTypes.object.isRequired,
   layer: PropTypes.object.isRequired,
   scene: PropTypes.object.isRequired,
-  // Immutable Map is still object
-  catalog: PropTypes.object.isRequired,
-  mode: PropTypes.any
+  catalog: PropTypes.object.isRequired
+};
+Item.contextTypes = {
+  itemsActions: PropTypes.object.isRequired
 };