kitchen-simulator 4.0.2-react-18 → 4.0.2

package/es/catalog/properties/property-color.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormLabel, FormColorInput } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+export default function PropertyColor(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyColor",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, configs.label)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormColorInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  })))));
+}
+PropertyColor.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-enum.js

@@ -0,0 +1,50 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Seq } from 'immutable';
+import { FormLabel, FormSelect } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+import styled from 'styled-components';
+import { TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY } from "../../constants";
+var EnumWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var EnumTitle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: auto;\n  width: 110px;\n  color: ", ";\n  font-family: ", ";\n\n  @media screen and (min-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (max-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (min-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (max-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (min-width: 1440) {\n    font-size: 16px;\n  }\n  @media screen and (max-width: 1440) {\n    font-size: 16px;\n  }\n  font-weight: 400;\n  line-height: 15px;\n  text-align: left;\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY);
+export default function PropertyEnum(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/React.createElement(EnumWrapper, null, /*#__PURE__*/React.createElement(EnumTitle, null, configs.label), /*#__PURE__*/React.createElement(FormSelect, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  }, Seq(configs.values).entrySeq().map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      key = _ref3[0],
+      value = _ref3[1];
+    return /*#__PURE__*/React.createElement("option", {
+      key: key,
+      value: key
+    }, value);
+  })));
+}
+PropertyEnum.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-hidden.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default function PropertyHidden(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  return null;
+}
+PropertyHidden.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-lenght-measure.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hook", "label"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BASE_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS, UNITS_LENGTH, UNIT_INCH } from "../../constants";
+import { convert } from "../../utils/convert-units-lite";
+import { FormLabel, FormNumberInput, FormSelect } from "../../components/style/export";
+import { Map } from 'immutable';
+import { toFixedFloat } from "../../utils/math";
+import PropertyStyle from "./shared-property-style";
+var internalTableStyle = {
+  borderCollapse: 'collapse'
+};
+var secondTdStyle = {
+  padding: 0
+};
+var unitContainerStyle = {
+  width: '5em'
+};
+export default function PropertyLengthMeasure(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var length = value.get('length') || 0; // length in inch
+  var _length = value.get('_length') || length; // length in unit
+  var _unit = value.get('_unit') || UNIT_INCH;
+  var type = value.get('type') || BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = _objectWithoutProperties(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = toFixedFloat(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        length: unitInput !== UNIT_INCH ? convert(newLength).from(unitInput).to(UNIT_INCH) : newLength,
+        _length: newLength
+      });
+    } else {
+      merged = value.merge({
+        _length: convert(newLength).from(UNIT_INCH).to(unitInput),
+        _unit: unitInput
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyLengthMeasure",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, label)), /*#__PURE__*/React.createElement("td", {
+    style: secondTdStyle
+  }, /*#__PURE__*/React.createElement("table", {
+    style: internalTableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormNumberInput, _extends({
+    disabled: type === TALL_CABINET_LAYOUTPOS,
+    value: _length,
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid
+  }, configRest))), /*#__PURE__*/React.createElement("td", {
+    style: unitContainerStyle
+  }, /*#__PURE__*/React.createElement(FormSelect, {
+    disabled: type === TALL_CABINET_LAYOUTPOS,
+    value: _unit,
+    onChange: function onChange(event) {
+      return update(length, event.target.value, 1);
+    }
+  }, UNITS_LENGTH.map(function (el) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: el,
+      value: el
+    }, el);
+  }))))))))));
+}
+PropertyLengthMeasure.propTypes = {
+  value: PropTypes.instanceOf(Map).isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-length-measure.js

@@ -0,0 +1,84 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["hook", "label"];
+var _templateObject, _templateObject2;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BASE_CABINET_LAYOUTPOS, DEFAULT_FONT_FAMILY, TALL_CABINET_LAYOUTPOS, TEXT_COLOR_NEUTRAL_0, UNIT_CENTIMETER, UNIT_INCH } from "../../constants";
+import { convert } from "../../utils/convert-units-lite";
+import { FormNumberInput } from "../../components/style/export";
+import { Map } from 'immutable';
+import { toFixedFloat } from "../../utils/math";
+import styled from 'styled-components';
+var DistanceFloorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var DistanceFloorTitle = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: auto;\n  width: 110px;\n  color: ", ";\n  font-family: ", ";\n  font-size: 16px;\n\n  @media screen and (min-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (max-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (min-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (max-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (min-width: 1440) {\n    font-size: 16px;\n  }\n  @media screen and (max-width: 1440) {\n    font-size: 16px;\n  }\n  font-weight: 400;\n  line-height: 15px;\n  text-align: left;\n"])), TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY);
+export default function PropertyLengthMeasure(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var _unit = value.get('_unit');
+  var unit = state.getIn(['scene', 'layers', state.scene.selectedLayer, 'unit']);
+  var length = value.get('length') || 0; // in centi
+  var _length = value.get('_length') || length; // in _unit
+  if (!_unit) {
+    _unit = UNIT_INCH;
+    _length = convert(length).from(UNIT_CENTIMETER).to(UNIT_INCH);
+  }
+  var type = value.get('type') || BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = _objectWithoutProperties(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = toFixedFloat(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        _unit: unitInput,
+        length: convert(newLength).from(unitInput).to(UNIT_CENTIMETER)
+      });
+    } else {
+      merged = value.merge({
+        _length: convert(newLength).from(UNIT_CENTIMETER).to(unitInput),
+        _unit: unitInput,
+        length: newLength
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/React.createElement(DistanceFloorWrapper, null, /*#__PURE__*/React.createElement(DistanceFloorTitle, null, label), /*#__PURE__*/React.createElement(FormNumberInput, _extends({
+    disabled: type === TALL_CABINET_LAYOUTPOS,
+    value: convert(_length).from('in').to(unit),
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid,
+    labelName: label,
+    style: {
+      paddingRight: '40px'
+    }
+  }, configRest)));
+}
+PropertyLengthMeasure.propTypes = {
+  value: PropTypes.instanceOf(Map).isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-length-measure_hole.js

@@ -0,0 +1,100 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["hook", "label"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BASE_CABINET_LAYOUTPOS, TALL_CABINET_LAYOUTPOS, UNIT_INCH, UNITS_LENGTH } from "../../constants";
+import { convert } from "../../utils/convert-units-lite";
+import { FormLabel, FormNumberInput1, FormSelect } from "../../components/style/export";
+import { Map } from 'immutable';
+import { toFixedFloat } from "../../utils/math";
+import PropertyStyle from "./shared-property-style";
+var internalTableStyle = {
+  borderCollapse: 'collapse'
+};
+var secondTdStyle = {
+  padding: 0
+};
+var unitContainerStyle = {
+  width: '3em'
+};
+export default function PropertyLengthMeasureHole(_ref, _ref2) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var catalog = _ref2.catalog;
+  var _unit = value.get('_unit') || UNIT_INCH;
+  var _length = value.get('_length') || 0;
+  var length = value.get('length') || _length;
+  var type = value.get('type') || BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = _objectWithoutProperties(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = toFixedFloat(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        length: convert(newLength).from(unitInput).to('cm')
+      });
+    } else {
+      merged = value.merge({
+        _length: convert(newLength).from(UNIT_INCH).to(unitInput),
+        _unit: unitInput
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(function (val) {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyLengthMeasure",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, label)), /*#__PURE__*/React.createElement("td", {
+    style: secondTdStyle
+  }, /*#__PURE__*/React.createElement("table", {
+    style: internalTableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormNumberInput1, _extends({
+    disabled: type === TALL_CABINET_LAYOUTPOS,
+    value: _length,
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid
+  }, configRest))), /*#__PURE__*/React.createElement("td", {
+    style: unitContainerStyle
+  }, /*#__PURE__*/React.createElement(FormSelect, {
+    disabled: type === TALL_CABINET_LAYOUTPOS,
+    value: _unit,
+    onChange: function onChange(event) {
+      return update(length, event.target.value, 1);
+    }
+  }, UNITS_LENGTH.map(function (el) {
+    return /*#__PURE__*/React.createElement("option", {
+      key: el,
+      value: el
+    }, el);
+  }))))))))));
+}
+PropertyLengthMeasureHole.propTypes = {
+  value: PropTypes.instanceOf(Map).isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};
+PropertyLengthMeasureHole.contextTypes = {
+  catalog: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-number.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormLabel, FormNumberInput } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+export default function PropertyNumber(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    onValid = _ref.onValid,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    var number = parseFloat(val);
+    if (isNaN(number)) {
+      number = 0;
+    }
+    if (configs.hook) {
+      return configs.hook(number, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(number);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyNumber",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, configs.label)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormNumberInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    },
+    onValid: onValid,
+    min: configs.min,
+    max: configs.max
+  })))));
+}
+PropertyNumber.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-read-only.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormLabel } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+export default function PropertyReadOnly(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyReadOnly",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, configs.label)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", null, value)))));
+}
+PropertyReadOnly.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-string.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormLabel, FormTextInput } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+var tableStyle = {
+  width: '100%',
+  borderSpacing: '2px 0',
+  marginBottom: '2px'
+};
+var firstTdStyle = {
+  width: '6em',
+  textTransform: 'capitalize'
+};
+export default function PropertyString(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyString",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, configs.label)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(FormTextInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  })))));
+}
+PropertyString.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/property-toggle.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormLabel, Button } from "../../components/style/export";
+import PropertyStyle from "./shared-property-style";
+export default function PropertyToggle(_ref) {
+  var value = _ref.value,
+    onUpdate = _ref.onUpdate,
+    configs = _ref.configs,
+    sourceElement = _ref.sourceElement,
+    internalState = _ref.internalState,
+    state = _ref.state;
+  var update = function update(val) {
+    if (configs.hook) {
+      return configs.hook(val, sourceElement, internalState, state).then(function (_val) {
+        return onUpdate(_val);
+      });
+    }
+    return onUpdate(val);
+  };
+  return /*#__PURE__*/React.createElement("table", {
+    className: "PropertyToggle",
+    style: PropertyStyle.tableStyle
+  }, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+    style: PropertyStyle.firstTdStyle
+  }, /*#__PURE__*/React.createElement(FormLabel, null, configs.label)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: function onClick(e) {
+      return update(!value);
+    },
+    size: "small"
+  }, configs.actionName)))));
+}
+PropertyToggle.propTypes = {
+  value: PropTypes.any.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};

package/es/catalog/properties/shared-property-style.js

@@ -0,0 +1,14 @@
+var tableStyle = {
+  width: '100%',
+  borderSpacing: '2px 0',
+  marginBottom: '2px'
+};
+var firstTdStyle = {
+  width: '6em',
+  textTransform: 'capitalize'
+};
+var PropertyStyle = {
+  tableStyle: tableStyle,
+  firstTdStyle: firstTdStyle
+};
+export default PropertyStyle;

package/es/catalog/utils/exporter.js

@@ -137,6 +137,7 @@ export default function (_ref) {
     img: base,
     obj: obj_property,
     cds: cds,
+    structure_json: structure_json,
     render2D: function render2D(element, layer, scene) {
       return render2DItem.call(this, element, layer, scene, sizeinfo, layoutpos, is_corner, shape_svg);
     },

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

@@ -207,12 +207,17 @@ export function render2DItem(element, layer, scene, sizeinfo, layoutpos, is_corn
         transform: "translate(".concat(-transX, "px, ").concat(-transY, "px)")
       },
       onMouseEnter: function onMouseEnter(event) {
-        var bbox = event.target.getBoundingClientRect();
-        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");
-        }
+        var target = event.currentTarget;
+        var tooltip = document.getElementById('warning_box_2d');
+        var parent = document.querySelector('#kitchen-simulator-container');
+        if (!tooltip || !parent) return;
+        var targetRect = target.getBoundingClientRect();
+        var parentRect = parent.getBoundingClientRect();
+        var left = targetRect.left - parentRect.left;
+        var top = targetRect.top - parentRect.top;
+        tooltip.style.display = 'flex';
+        tooltip.style.left = "".concat(left, "px");
+        tooltip.style.top = "".concat(top - 60, "px");
       },
       onMouseLeave: function onMouseLeave() {
         if (document.getElementById('warning_box_2d')) {
@@ -449,8 +454,9 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
   var tempDoorStyles = doorStyles.toJS();
   var tempPlaceholders = structure.tempPlaceholders;
   var tPlaceholders = tempPlaceholders.find(function (el) {
-    return el.id === tempDoorStyles.cabinet_door_style_id;
-    // return el.id === tempDoorStyles.cds[0].cabinet_door_style_id;
+    var _tempDoorStyles$cds, _tempDoorStyles$cds$;
+    if (tempDoorStyles !== null && tempDoorStyles !== void 0 && tempDoorStyles.cabinet_door_style_id) return el.id === (tempDoorStyles === null || tempDoorStyles === void 0 ? void 0 : tempDoorStyles.cabinet_door_style_id);else if ((tempDoorStyles === null || tempDoorStyles === void 0 || (_tempDoorStyles$cds = tempDoorStyles.cds) === null || _tempDoorStyles$cds === void 0 ? void 0 : _tempDoorStyles$cds.length) > 0) return el.id === (tempDoorStyles === null || tempDoorStyles === void 0 || (_tempDoorStyles$cds$ = tempDoorStyles.cds[0]) === null || _tempDoorStyles$cds$ === void 0 ? void 0 : _tempDoorStyles$cds$.cabinet_door_style_id);
+    return false;
   });
   if (tPlaceholders !== undefined) {
     placeholders = tPlaceholders.placeholders;
@@ -641,10 +647,10 @@ export function render3DItem(element, layer, scene, sizeinfo, structure_json, is
       vLine3.material.depthTest = false;
       // translate vector to center of object
       var uVec = new Three.Vector3(-posVec.x / scalevec.x, -posVec.y / scalevec.y, -posVec.z / scalevec.z);
-      vLine.translateY(0.1);
-      vLine1.translateY(0.1);
-      vLine2.translateY(0.1);
-      vLine3.translateY(0.1);
+      vLine.translateY(_boundingBox.min.y + 0.1);
+      vLine1.translateY(_boundingBox.min.y + 0.1);
+      vLine2.translateY(_boundingBox.min.y + 0.1);
+      vLine3.translateY(_boundingBox.min.y + 0.1);
 
       //rotObj.translateOnAxis(uVec, 1);
       upObj.translateOnAxis(uVec, 1);

package/es/class/hole.js

@@ -777,11 +777,9 @@ var Hole = /*#__PURE__*/function () {
         scene: scene.mergeIn(['layers', layerID, 'holes', holeID], hole)
       });
       state = state.updateIn(['scene', 'layers', layerID, 'lines', hole.line, 'holes'], function (holes) {
-        console.log(holes, 'holes');
         var index = holes.findIndex(function (ID) {
           return holeID === ID;
         });
-        console.log(index, 'index');
         return index === -1 ? holes.push(holeID) : holes;
       });
       return {