kitchen-simulator 4.1.7-react-18 → 4.2.2

package/lib/catalog/factories/area-factory-3d.js

@@ -12,7 +12,7 @@ var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _RGBELoader = require("three/examples/jsm/loaders/RGBELoader");
 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); }
 var params = {
-  envMap: "HDR",
+  envMap: 'HDR',
   roughness: 0.9,
   metalness: 0.8,
   exposure: 1.0
@@ -67,7 +67,7 @@ var assignUVs = function assignUVs(geometry) {
     var y3 = position.getY(i + 2);
     uvArray.push((x1 + offset.x) / range.x, (y1 + offset.y) / range.y, (x2 + offset.x) / range.x, (y2 + offset.y) / range.y, (x3 + offset.x) / range.x, (y3 + offset.y) / range.y);
   }
-  geometry.setAttribute("uv", new Three.BufferAttribute(new Float32Array(uvArray), 2));
+  geometry.setAttribute('uv', new Three.BufferAttribute(new Float32Array(uvArray), 2));
   geometry.needsUpdate = true;
 };
 function createArea(element, layer, scene, textures) {
@@ -78,15 +78,15 @@ function createArea(element, layer, scene, textures) {
   var texture = element.texture;
   texture.lengthRepeatScale = 0.01;
   texture.heightRepeatScale = 0.01;
-  var color = element.properties.get("patternColor");
+  var color = element.properties.get('patternColor');
   if (element.selected) {
     color = SharedStyle.AREA_MESH_COLOR.selected;
   } else {
     color = SharedStyle.AREA_MESH_COLOR.unselected;
   }
-  if (texture.uri === undefined || texture.uri == "") {
+  if (texture.uri === undefined || texture.uri == '') {
     // @todo THIS IS A TEMPORARY FIX TO HAVE A DEFAULT FLOOR TEXTURE
-    texture.uri = layer.floorStyle.uri || "https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg";
+    texture.uri = layer.floorStyle.uri || 'https://media.test.diydesignspace.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg';
   }
   var shape = new _three.Shape();
   shape.moveTo(vertices[0].x, vertices[0].y);
@@ -94,7 +94,7 @@ function createArea(element, layer, scene, textures) {
     shape.lineTo(vertices[i].x, vertices[i].y);
   }
   function loadFloorENV() {
-    return new _RGBELoader.RGBELoader().load("/assets/Window.hdr", function (texture) {
+    return new _RGBELoader.RGBELoader().load('/assets/Window.hdr', function (texture) {
       texture.mapping = Three.EquirectangularReflectionMapping;
       return texture;
     });
@@ -114,8 +114,8 @@ function createArea(element, layer, scene, textures) {
   /* Create holes for the area */
   element.holes.forEach(function (holeID) {
     var holeCoords = [];
-    layer.getIn(["areas", holeID, "vertices"]).forEach(function (vertexID) {
-      var _layer$getIn = layer.getIn(["vertices", vertexID]),
+    layer.getIn(['areas', holeID, 'vertices']).forEach(function (vertexID) {
+      var _layer$getIn = layer.getIn(['vertices', vertexID]),
         x = _layer$getIn.x,
         y = _layer$getIn.y;
       holeCoords.push([x, y]);
@@ -142,7 +142,7 @@ function createArea(element, layer, scene, textures) {
   var area = new _three.Mesh(shapeGeometry, areaMaterial);
   area.rotation.x -= Math.PI / 2;
   area.receiveShadow = true;
-  area.name = "floor";
+  area.name = 'floor';
   // This mesh is use for creating ceiling mesh
 
   var shapeGeometry2 = new Three.ShapeGeometry(shape);
@@ -153,7 +153,7 @@ function createArea(element, layer, scene, textures) {
   area2.castShadow = true;
   area2.rotation.x -= Math.PI / 2;
   area2.receiveShadow = true;
-  area2.name = "floorSupport";
+  area2.name = 'floorSupport';
   var floorSupport = area2.clone();
   area.userData.floorSupport = floorSupport;
   return Promise.resolve(area);
@@ -163,13 +163,13 @@ function updatedArea(element, layer, scene, textures, mesh, oldElement, differen
     selfDestroy();
     return selfBuild();
   };
-  var floor = mesh.getObjectByName("floor");
+  var floor = mesh.getObjectByName('floor');
   floor.receiveShadow = true;
-  if (differences[0] == "selected") {
+  if (differences[0] == 'selected') {
     var color = element.selected ? SharedStyle.AREA_MESH_COLOR.selected : SharedStyle.AREA_MESH_COLOR.unselected;
     floor.material.color.set(color);
-  } else if (differences[0] == "properties") {
-    if (differences[1] === "texture") {
+  } else if (differences[0] == 'properties') {
+    if (differences[1] === 'texture') {
       return noPerf();
     }
   } else return noPerf();

package/lib/catalog/factories/wall-factory.js

@@ -27,7 +27,7 @@ var STYLE_LINE = {
   // strokeWidth:1
 };
 var STYLE_INTERIOR_LINE = {
-  strokeWidth: 2,
+  strokeWidth: 4,
   stroke: SharedStyle.INTERIOR_LINE.unselected
 };
 var STYLE_INTERIOR_LINE_SELECTED = {

package/lib/catalog/holes/window-clear/planner-element.js

@@ -13,12 +13,12 @@ var _constants = require("../../../constants");
 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); }
 var cached3DWindow = null;
 var _default = exports["default"] = {
-  name: 'Clear Window',
+  name: 'Window',
   prototype: 'holes',
   info: {
     title: 'Clear',
     tag: ['window'],
-    description: 'Clear Window',
+    description: 'Window',
     image: '/assets/img/svg/window/Clear.svg',
     url: '/assets/gltf/window_clear.gltf'
   },

package/lib/catalog/properties/export.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PropertyCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _propertyCheckbox["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyColor", {
+  enumerable: true,
+  get: function get() {
+    return _propertyColor["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyEnum", {
+  enumerable: true,
+  get: function get() {
+    return _propertyEnum["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyHidden", {
+  enumerable: true,
+  get: function get() {
+    return _propertyHidden["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyLengthMeasure", {
+  enumerable: true,
+  get: function get() {
+    return _propertyLengthMeasure["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyNumber", {
+  enumerable: true,
+  get: function get() {
+    return _propertyNumber["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyReadOnly", {
+  enumerable: true,
+  get: function get() {
+    return _propertyReadOnly["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyString", {
+  enumerable: true,
+  get: function get() {
+    return _propertyString["default"];
+  }
+});
+Object.defineProperty(exports, "PropertyToggle", {
+  enumerable: true,
+  get: function get() {
+    return _propertyToggle["default"];
+  }
+});
+exports["default"] = void 0;
+var _propertyColor = _interopRequireDefault(require("./property-color"));
+var _propertyEnum = _interopRequireDefault(require("./property-enum"));
+var _propertyString = _interopRequireDefault(require("./property-string"));
+var _propertyNumber = _interopRequireDefault(require("./property-number"));
+var _propertyLengthMeasure = _interopRequireDefault(require("./property-length-measure"));
+var _propertyToggle = _interopRequireDefault(require("./property-toggle"));
+var _propertyCheckbox = _interopRequireDefault(require("./property-checkbox"));
+var _propertyHidden = _interopRequireDefault(require("./property-hidden"));
+var _propertyReadOnly = _interopRequireDefault(require("./property-read-only"));
+var _default = exports["default"] = {
+  PropertyColor: _propertyColor["default"],
+  PropertyEnum: _propertyEnum["default"],
+  PropertyString: _propertyString["default"],
+  PropertyNumber: _propertyNumber["default"],
+  PropertyLengthMeasure: _propertyLengthMeasure["default"],
+  PropertyToggle: _propertyToggle["default"],
+  PropertyCheckbox: _propertyCheckbox["default"],
+  PropertyHidden: _propertyHidden["default"],
+  PropertyReadOnly: _propertyReadOnly["default"]
+};

package/lib/catalog/properties/property-checkbox.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyCheckbox;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _constants = require("../../constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var FlipWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin: 15px 0;\n  justify-content: space-between;\n"])));
+var FlipTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: auto;\n  color: ", ";\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 18px;\n  text-align: left;\n"])), _constants.SECONDARY_PURPLE_COLOR, _constants.DEFAULT_FONT_FAMILY);
+var FlipDescription = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: auto;\n  color: ", ";\n  font-family: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  text-align: left;\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+var FlipInfoWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n"])));
+var FlipToggle = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
+var FlipToggleIcon = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  top: 0;\n  position: absolute;\n  ", "\n  img {\n    font-size: 1.4rem;\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n"])), '' /* transition-duration: .3s; */);
+function PropertyCheckbox(_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);
+  };
+  var activeStyle = value == 0 ? {
+    left: 0
+  } : {
+    right: 0
+  };
+  return /*#__PURE__*/_react["default"].createElement(FlipWrapper, null, /*#__PURE__*/_react["default"].createElement(FlipInfoWrapper, null, /*#__PURE__*/_react["default"].createElement(FlipTitle, null, configs.label), configs.description && /*#__PURE__*/_react["default"].createElement(FlipDescription, null, configs.description)), /*#__PURE__*/_react["default"].createElement(FlipToggle, {
+    style: {
+      color: 'black'
+    },
+    onClick: function onClick(e) {
+      return update(!value);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/".concat(value != 0 ? '2d3d_toggle_active.svg' : '2d3d_toggle.svg'),
+    style: {
+      width: '55px',
+      height: '30px'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(FlipToggleIcon, {
+    style: _objectSpread({}, activeStyle)
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: "/assets/img/svg/bottombar/".concat(value != 0 ? '2d3d_button_active.svg' : '2d3d_button.svg'),
+    style: {
+      width: '30px',
+      height: '30px'
+    }
+  }))));
+}
+PropertyCheckbox.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyColor;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+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["default"].createElement("table", {
+    className: "PropertyColor",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, configs.label)), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormColorInput, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  })))));
+}
+PropertyColor.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyEnum;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _immutable = require("immutable");
+var _export = require("../../components/style/export");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _constants = require("../../constants");
+var _templateObject, _templateObject2;
+var EnumWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var EnumTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+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["default"].createElement(EnumWrapper, null, /*#__PURE__*/_react["default"].createElement(EnumTitle, null, configs.label), /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+    value: value,
+    onChange: function onChange(event) {
+      return update(event.target.value);
+    }
+  }, (0, _immutable.Seq)(configs.values).entrySeq().map(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2["default"])(_ref2, 2),
+      key = _ref3[0],
+      value = _ref3[1];
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: key,
+      value: key
+    }, value);
+  })));
+}
+PropertyEnum.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyHidden;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyLengthMeasure;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../components/style/export");
+var _immutable = require("immutable");
+var _math = require("../../utils/math");
+var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
+var _excluded = ["hook", "label"];
+var internalTableStyle = {
+  borderCollapse: 'collapse'
+};
+var secondTdStyle = {
+  padding: 0
+};
+var unitContainerStyle = {
+  width: '5em'
+};
+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') || _constants.UNIT_INCH;
+  var type = value.get('type') || _constants.BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = (0, _objectWithoutProperties2["default"])(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = (0, _math.toFixedFloat)(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        length: unitInput !== _constants.UNIT_INCH ? (0, _convertUnitsLite.convert)(newLength).from(unitInput).to(_constants.UNIT_INCH) : newLength,
+        _length: newLength
+      });
+    } else {
+      merged = value.merge({
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.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["default"].createElement("table", {
+    className: "PropertyLengthMeasure",
+    style: _sharedPropertyStyle["default"].tableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+    style: _sharedPropertyStyle["default"].firstTdStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormLabel, null, label)), /*#__PURE__*/_react["default"].createElement("td", {
+    style: secondTdStyle
+  }, /*#__PURE__*/_react["default"].createElement("table", {
+    style: internalTableStyle
+  }, /*#__PURE__*/_react["default"].createElement("tbody", null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput, (0, _extends2["default"])({
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _length,
+    onChange: function onChange(event) {
+      return update(event.target.value, _unit, 0);
+    },
+    onValid: onValid
+  }, configRest))), /*#__PURE__*/_react["default"].createElement("td", {
+    style: unitContainerStyle
+  }, /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: _unit,
+    onChange: function onChange(event) {
+      return update(length, event.target.value, 1);
+    }
+  }, _constants.UNITS_LENGTH.map(function (el) {
+    return /*#__PURE__*/_react["default"].createElement("option", {
+      key: el,
+      value: el
+    }, el);
+  }))))))))));
+}
+PropertyLengthMeasure.propTypes = {
+  value: _propTypes["default"].instanceOf(_immutable.Map).isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PropertyLengthMeasure;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _constants = require("../../constants");
+var _convertUnitsLite = require("../../utils/convert-units-lite");
+var _export = require("../../components/style/export");
+var _immutable = require("immutable");
+var _math = require("../../utils/math");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _excluded = ["hook", "label"];
+var _templateObject, _templateObject2;
+var DistanceFloorWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
+var DistanceFloorTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\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"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+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 = _constants.UNIT_INCH;
+    _length = (0, _convertUnitsLite.convert)(length).from(_constants.UNIT_CENTIMETER).to(_constants.UNIT_INCH);
+  }
+  var type = value.get('type') || _constants.BASE_CABINET_LAYOUTPOS;
+  var hook = configs.hook,
+    label = configs.label,
+    configRest = (0, _objectWithoutProperties2["default"])(configs, _excluded);
+  var update = function update(lengthInput, unitInput, type) {
+    var newLength = (0, _math.toFixedFloat)(lengthInput);
+    var merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        _unit: unitInput,
+        length: (0, _convertUnitsLite.convert)(newLength).from(unitInput).to(_constants.UNIT_CENTIMETER)
+      });
+    } else {
+      merged = value.merge({
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.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["default"].createElement(DistanceFloorWrapper, null, /*#__PURE__*/_react["default"].createElement(DistanceFloorTitle, null, label), /*#__PURE__*/_react["default"].createElement(_export.FormNumberInput, (0, _extends2["default"])({
+    disabled: type === _constants.TALL_CABINET_LAYOUTPOS,
+    value: (0, _convertUnitsLite.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["default"].instanceOf(_immutable.Map).isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};
+PropertyLengthMeasure.contextTypes = {
+  catalog: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;