kitchen-simulator 5.0.0-test.5 → 5.0.0-test.7

package/src/components/sidebar/panel-element-editor/element-editor.jsx

@@ -0,0 +1,1070 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Map, fromJS } from 'immutable';
+import AttributesEditor from './attributes-editor/attributes-editor';
+import { GeometryUtils, MathUtils } from '../../../utils/export';
+import {
+  UNIT_INCH,
+  MODE_DRAWING_LINE,
+  BASE_CABINET_LAYOUTPOS,
+  WALL_CABINET_LAYOUTPOS,
+  TALL_CABINET_LAYOUTPOS,
+  TOE_KICK_MOLDING
+} from '../../../constants';
+import convert from 'convert-units';
+import * as PS from '../../toolbar/popup/styles';
+import { TEXT_COLOR_NEUTRAL_2, DEFAULT_FONT_FAMILY } from '../../../constants';
+import { returnReplaceableDeepSearchType } from '../../viewer2d/utils';
+import * as S from '../../toolbar/main/styles';
+import { showYelloBox } from '../../viewer3d/scene-creator';
+import { isEmpty } from '../../../utils/helper';
+import CustomAccordion from '../custom-accordion';
+import { hasMoldingLayout } from '../../../utils/molding';
+
+const PRECISION = 2;
+const Left = 0;
+const Right = 180;
+const Back = 90;
+const Front = -90;
+
+export default class ElementEditor extends Component {
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      isMolding: true,
+      attributesFormData: this.initAttrData(
+        this.props.element,
+        this.props.layer,
+        this.props.state
+      ),
+      propertiesFormData: this.initPropData(
+        this.props.element,
+        this.props.layer,
+        this.props.state
+      ),
+      isResizeActive: false
+    };
+
+    this.updateAttribute = this.updateAttribute.bind(this);
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    let scene = this.props.state.get('scene');
+    let selectedLayer = scene.getIn(['layers', scene.get('selectedLayer')]);
+    scene = nextProps.state.get('scene');
+    let layer = scene.getIn(['layers', scene.get('selectedLayer')]);
+    if (
+      this.state.attributesFormData.hashCode() !==
+        nextState.attributesFormData.hashCode() ||
+      this.state.propertiesFormData.hashCode() !==
+        nextState.propertiesFormData.hashCode() ||
+      this.state.isMolding !== nextState.isMolding ||
+      this.props.state.clipboardProperties.hashCode() !==
+        nextProps.state.clipboardProperties.hashCode() ||
+      selectedLayer.hashCode() !== layer.hashCode()
+    )
+      return true;
+
+    return false;
+  }
+
+  componentWillReceiveProps({ element, layer, state }) {
+    let scene = this.props.state.get('scene');
+    let selectedLayer = scene.getIn(['layers', scene.get('selectedLayer')]);
+    if (selectedLayer.hashCode() !== layer.hashCode()) {
+      this.setState({
+        attributesFormData: this.initAttrData(element, layer, state),
+        propertiesFormData: this.initPropData(element, layer, state)
+      });
+    }
+  }
+
+  initAttrData(element, layer, state) {
+    element =
+      typeof element.misc === 'object'
+        ? element.set('misc', new Map(element.misc))
+        : element;
+    switch (element.prototype) {
+      case 'items': {
+        let allLines = GeometryUtils.getAllLines(layer);
+        let allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
+        let x = element.x;
+        let y = element.y;
+        let rotRad = (element.rotation / 180) * Math.PI;
+        let w = element.properties.get('width').get('_length');
+        let wUnit = element.properties.get('width').get('_unit') || 'cm';
+        w = convert(w / 2)
+          .from(wUnit)
+          .to('cm');
+        let h = element.properties.get('depth').get('_length');
+        let hUnit = element.properties.get('depth').get('_unit') || 'cm';
+        h = convert(h / 2)
+          .from(hUnit)
+          .to('cm');
+        let mx = x - w * Math.cos(rotRad);
+        let my = y - w * Math.sin(rotRad);
+        let x0 = mx + h * Math.sin(rotRad);
+        let y0 = my - h * Math.cos(rotRad);
+        let x3 = mx * 2 - x0;
+        let y3 = my * 2 - y0;
+        let x1 = x * 2 - x3;
+        let y1 = y * 2 - y3;
+        let x2 = x * 2 - x0;
+        let y2 = y * 2 - y0;
+        this.setState({ isMolding: true });
+        if (
+          element.layoutpos === BASE_CABINET_LAYOUTPOS &&
+          GeometryUtils.isSnappedLine(
+            {
+              rect: [
+                { x: x0, y: y0 },
+                { x: x1, y: y1 },
+                { x: x2, y: y2 },
+                { x: x3, y: y3 }
+              ]
+            },
+            allLineRects
+          )
+        ) {
+          this.setState({ isMolding: false });
+        }
+        if (
+          (element.layoutpos === WALL_CABINET_LAYOUTPOS ||
+            element.layoutpos === TALL_CABINET_LAYOUTPOS) &&
+          !GeometryUtils.isSnappedLine(
+            {
+              rect: [
+                { x: x0, y: y0 },
+                { x: x1, y: y1 },
+                { x: x2, y: y2 },
+                { x: x3, y: y3 }
+              ]
+            },
+            allLineRects
+          )
+        ) {
+          this.setState({ isMolding: false });
+        }
+        return new Map(element);
+      }
+      case 'lines': {
+        let v_a = layer.vertices.get(element.vertices.get(0));
+        let v_b = layer.vertices.get(element.vertices.get(1));
+        let distance = GeometryUtils.pointsDistance(v_a.x, v_a.y, v_b.x, v_b.y);
+        let _unit = element.misc.get('_unitLength') || UNIT_INCH;
+        let _length = convert(distance)
+          .from(this.context.catalog.unit)
+          .to(_unit);
+
+        if (state.mode == MODE_DRAWING_LINE) {
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            lineLength: new Map({ length: distance, _length, _unit }),
+            focus: element.focus
+          });
+        } else {
+          let allLines = layer.lines.toArray();
+          let relatedLine = allLines.filter(line => {
+            return (
+              line.vertices.toArray().includes(v_b.id) && line.id != element.id
+            );
+          })[0];
+          let relatedVertexID =
+            relatedLine &&
+            (relatedLine.vertices.toArray()[0] == v_b.id
+              ? relatedLine.vertices.toArray()[1]
+              : relatedLine.vertices.toArray()[0]);
+          let v_d =
+            relatedVertexID && layer.getIn(['vertices', relatedVertexID]);
+          let lineToExtend =
+            relatedVertexID &&
+            allLines.filter(line => {
+              return (
+                line.vertices.toArray().includes(relatedVertexID) &&
+                line.id != relatedLine.id
+              );
+            })[0];
+          let v_c =
+            lineToExtend &&
+            layer.getIn([
+              'vertices',
+              lineToExtend.vertices.toArray()[0] == v_d.id
+                ? lineToExtend.vertices.toArray()[1]
+                : lineToExtend.vertices.toArray()[0]
+            ]);
+          return new Map({
+            vertexOne: v_a,
+            vertexTwo: v_b,
+            vertexThree: v_c,
+            vertexFour: v_d,
+            lineToExtend: lineToExtend,
+            lineLength: new Map({ length: distance, _length, _unit }),
+            focus: element.focus
+          });
+        }
+      }
+      case 'holes': {
+        let line = layer.lines.get(element.line);
+        let { x: x0, y: y0 } = layer.vertices.get(line.vertices.get(0));
+        let { x: x1, y: y1 } = layer.vertices.get(line.vertices.get(1));
+        let lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+        let startAt =
+          lineLength * element.offset -
+          element.properties.get('width').get('length') / 2;
+        let endAt =
+          lineLength -
+          lineLength * element.offset -
+          element.properties.get('width').get('length') / 2;
+        let _unitA = element.misc.get('_unitA') || UNIT_INCH;
+        let _lengthA = convert(x0 > x1 ? endAt : startAt)
+          .from(this.context.catalog.unit)
+          .to(_unitA);
+        let _unitB = element.misc.get('_unitB') || UNIT_INCH;
+        let _lengthB = convert(x0 > x1 ? startAt : endAt)
+          .from(this.context.catalog.unit)
+          .to(_unitB);
+
+        return new Map({
+          offset: element.offset,
+          offsetA: new Map({
+            length: MathUtils.toFixedFloat(
+              x0 > x1 ? endAt : startAt,
+              PRECISION
+            ),
+            _length: MathUtils.toFixedFloat(_lengthA, PRECISION),
+            _unit: _unitA
+          }),
+          offsetB: new Map({
+            length: MathUtils.toFixedFloat(
+              x0 > x1 ? startAt : endAt,
+              PRECISION
+            ),
+            _length: MathUtils.toFixedFloat(_lengthB, PRECISION),
+            _unit: _unitB
+          })
+        });
+      }
+      case 'areas': {
+        return new Map({});
+      }
+      default:
+        return null;
+    }
+  }
+
+  initPropData(element, layer, state) {
+    let { catalog } = this.context;
+    let mapped = {};
+    if (
+      !catalog.elements.hasOwnProperty(element.type) &&
+      !(
+        !catalog.elements[element.type] &&
+        !!catalog.elements[returnReplaceableDeepSearchType(element.type)]
+      )
+    ) {
+      console.log(
+        `Last Selected ${element.type} Element does not exist in catalog.`
+      );
+      return new Map(mapped);
+    }
+
+    let catalogElement = catalog.getElement(element.type);
+    let isFiller = catalogElement.long_name
+      ? catalogElement.long_name.toUpperCase().includes('FILLER')
+      : false;
+    if (isFiller) {
+      let height = {
+        defaultValue: element.properties.get('height').toJS(),
+        label: 'Height',
+        type: 'length-measure'
+      };
+      let depth = {
+        defaultValue: element.properties.get('depth').toJS(),
+        label: 'Depth',
+        type: 'length-measure'
+      };
+      catalogElement.properties = {
+        altitude: catalogElement.properties.altitude,
+        width: catalogElement.properties.width,
+        height: height,
+        depth: depth,
+        flip_doorhandle: catalogElement.properties.flip_doorhandle,
+        resize_and_scaling: catalogElement.properties.resize_and_scaling
+      };
+    }
+
+    for (let name in catalogElement.properties) {
+      mapped[name] = new Map({
+        currentValue: element.properties.has(name)
+          ? element.properties.get(name)
+          : fromJS(catalogElement.properties[name].defaultValue),
+        configs: catalogElement.properties[name]
+      });
+    }
+
+    return new Map(mapped);
+  }
+
+  updateAttribute(attributeName, value) {
+    let { attributesFormData } = this.state;
+    switch (this.props.element.prototype) {
+      case 'items': {
+        if (attributeName == 'pos') {
+          let xVal = value.x;
+          let yVal = value.y;
+          attributesFormData = attributesFormData.set('x', xVal);
+          attributesFormData = attributesFormData.set('y', yVal);
+        } else {
+          attributesFormData = attributesFormData.set(attributeName, value);
+        }
+        break;
+      }
+      case 'lines': {
+        switch (attributeName) {
+          case 'lineLength': {
+            let v_0 = attributesFormData.get('vertexOne');
+            let v_1 = attributesFormData.get('vertexTwo');
+            let v_2 = attributesFormData.get('vertexThree');
+            let v_3 = attributesFormData.get('vertexFour');
+            let v_b_new = GeometryUtils.extendLine(
+              v_0.x,
+              v_0.y,
+              v_1.x,
+              v_1.y,
+              value.get('length'),
+              PRECISION
+            );
+            // Blocked function that as wall changed, opposite wall should changed together.
+            // if (v_3 !== undefined){
+            //   let delta = {
+            //     x : v_b_new.x - v_1.x,
+            //     y : v_b_new.y - v_1.y
+            //   };
+            //   let v_d_new = {
+            //     x : v_3.x + delta.x,
+            //     y : v_3.y + delta.y
+            //   }
+            //   console.log('delta',delta);
+            //   attributesFormData = attributesFormData.withMutations(attr => {
+            //     attr.set('vertexTwo', v_1.merge(v_b_new));
+            //     attr.set('vertexFour', v_3.merge(v_d_new));
+            //     attr.set('lineLength', value);
+            //   });
+            // }
+            // else{
+            //   attributesFormData = attributesFormData.withMutations(attr => {
+            //     attr.set('vertexTwo', v_1.merge(v_b_new));
+            //     attr.set('lineLength', value);
+            //   });
+            // }
+            attributesFormData = attributesFormData.withMutations(attr => {
+              attr.set('vertexTwo', v_1.merge(v_b_new));
+              attr.set('lineLength', value);
+            });
+            break;
+          }
+          case 'vertexOne':
+          case 'vertexTwo': {
+            attributesFormData = attributesFormData.withMutations(attr => {
+              attr.set(attributeName, attr.get(attributeName).merge(value));
+
+              let newDistance = GeometryUtils.verticesDistance(
+                attr.get('vertexOne'),
+                attr.get('vertexTwo')
+              );
+              attr.mergeIn(
+                ['lineLength'],
+                attr.get('lineLength').merge({
+                  length: newDistance,
+                  _length: convert(newDistance)
+                    .from(this.context.catalog.unit)
+                    .to(attr.get('lineLength').get('_unit'))
+                })
+              );
+            });
+            break;
+          }
+          default: {
+            attributesFormData = attributesFormData.set(attributeName, value);
+            break;
+          }
+        }
+        break;
+      }
+      case 'holes': {
+        switch (attributeName) {
+          case 'offsetA': {
+            let line = this.props.layer.lines.get(this.props.element.line);
+
+            let { x: x0, y: y0 } = this.props.layer.vertices.get(
+              line.vertices.get(0)
+            );
+            let { x: x1, y: y1 } = this.props.layer.vertices.get(
+              line.vertices.get(1)
+            );
+
+            let alpha = GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+            let lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+            let widthLength = this.props.element.properties
+              .get('width')
+              .get('length');
+            let halfWidthLength = widthLength / 2;
+
+            let lengthValue = value.get('length');
+            lengthValue = Math.max(lengthValue, 0);
+            lengthValue = Math.min(lengthValue, lineLength - widthLength);
+
+            let xp = (lengthValue + halfWidthLength) * Math.cos(alpha) + x0;
+            let yp = (lengthValue + halfWidthLength) * Math.sin(alpha) + y0;
+
+            let offset = GeometryUtils.pointPositionOnLineSegment(
+              x0,
+              y0,
+              x1,
+              y1,
+              xp,
+              yp
+            );
+            /*
+            if (x0 > x1) offset = 1 - offset;
+            */
+            let endAt = MathUtils.toFixedFloat(
+              lineLength - lineLength * offset - halfWidthLength,
+              PRECISION
+            );
+            let offsetUnit = attributesFormData.getIn(['offsetB', '_unit']);
+
+            let offsetB = new Map({
+              length: endAt,
+              _length: convert(endAt)
+                .from(this.context.catalog.unit)
+                .to(offsetUnit),
+              _unit: offsetUnit
+            });
+
+            attributesFormData = attributesFormData
+              .set('offsetB', offsetB)
+              .set('offset', offset);
+
+            let offsetAttribute = new Map({
+              length: MathUtils.toFixedFloat(lengthValue, PRECISION),
+              _unit: value.get('_unit'),
+              _length: MathUtils.toFixedFloat(
+                convert(lengthValue)
+                  .from(this.context.catalog.unit)
+                  .to(value.get('_unit')),
+                PRECISION
+              )
+            });
+
+            attributesFormData = attributesFormData.set(
+              attributeName,
+              offsetAttribute
+            );
+
+            break;
+          }
+          case 'offsetB': {
+            let line = this.props.layer.lines.get(this.props.element.line);
+            let { x: x0, y: y0 } = this.props.layer.vertices.get(
+              line.vertices.get(0)
+            );
+            let { x: x1, y: y1 } = this.props.layer.vertices.get(
+              line.vertices.get(1)
+            );
+
+            let alpha = GeometryUtils.angleBetweenTwoPoints(x0, y0, x1, y1);
+            let lineLength = GeometryUtils.pointsDistance(x0, y0, x1, y1);
+            let widthLength = this.props.element.properties
+              .get('width')
+              .get('length');
+            let halfWidthLength = widthLength / 2;
+
+            let lengthValue = value.get('length');
+            lengthValue = Math.max(lengthValue, 0);
+            lengthValue = Math.min(lengthValue, lineLength - widthLength);
+
+            let xp = x1 - (lengthValue + halfWidthLength) * Math.cos(alpha);
+            let yp = y1 - (lengthValue + halfWidthLength) * Math.sin(alpha);
+
+            let offset = GeometryUtils.pointPositionOnLineSegment(
+              x0,
+              y0,
+              x1,
+              y1,
+              xp,
+              yp
+            );
+            /*
+            if (x0 > x1) offset = 1 - offset;
+            */
+            let startAt = MathUtils.toFixedFloat(
+              lineLength * offset - halfWidthLength,
+              PRECISION
+            );
+            let offsetUnit = attributesFormData.getIn(['offsetA', '_unit']);
+
+            let offsetA = new Map({
+              length: startAt,
+              _length: convert(startAt)
+                .from(this.context.catalog.unit)
+                .to(offsetUnit),
+              _unit: offsetUnit
+            });
+
+            attributesFormData = attributesFormData
+              .set('offsetA', offsetA)
+              .set('offset', offset);
+
+            let offsetAttribute = new Map({
+              length: MathUtils.toFixedFloat(lengthValue, PRECISION),
+              _unit: value.get('_unit'),
+              _length: MathUtils.toFixedFloat(
+                convert(lengthValue)
+                  .from(this.context.catalog.unit)
+                  .to(value.get('_unit')),
+                PRECISION
+              )
+            });
+
+            attributesFormData = attributesFormData.set(
+              attributeName,
+              offsetAttribute
+            );
+
+            break;
+          }
+          default: {
+            attributesFormData = attributesFormData.set(attributeName, value);
+            break;
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+
+    this.setState({ attributesFormData });
+    this.save({ attributesFormData });
+  }
+
+  updateProperty(propertyName, value) {
+    if (
+      propertyName === 'flip_doorhandle' &&
+      this.props.element.properties.get('open_doors')
+    ) {
+      alert('Doors are already open.');
+      return;
+    }
+    let {
+      state: { propertiesFormData }
+    } = this;
+    propertiesFormData = propertiesFormData.setIn(
+      [propertyName, 'currentValue'],
+      value
+    );
+    if (this.props.state.mode.includes('3D')) {
+      setTimeout(() => {
+        this.setState({ propertiesFormData });
+        this.save({ propertiesFormData });
+      }, 0);
+    } else {
+      this.setState({ propertiesFormData });
+      this.save({ propertiesFormData });
+    }
+  }
+
+  reset() {
+    this.setState({
+      propertiesFormData: this.initPropData(
+        this.props.element,
+        this.props.layer,
+        this.props.state
+      )
+    });
+  }
+
+  save({ propertiesFormData, attributesFormData }) {
+    if (propertiesFormData) {
+      let properties = propertiesFormData.map(data => {
+        return data.get('currentValue');
+      });
+
+      this.context.projectActions.setProperties(properties);
+    }
+
+    if (attributesFormData) {
+      switch (this.props.element.prototype) {
+        case 'items': {
+          this.context.projectActions.setItemsAttributes(attributesFormData);
+          break;
+        }
+        case 'lines': {
+          this.context.projectActions.setLinesAttributes(attributesFormData);
+          break;
+        }
+        case 'holes': {
+          this.context.projectActions.setHolesAttributes(attributesFormData);
+          break;
+        }
+      }
+    }
+  }
+
+  copyProperties(properties) {
+    this.context.projectActions.copyProperties(properties);
+  }
+
+  pasteProperties() {
+    this.context.projectActions.pasteProperties();
+  }
+
+  returnResizeFilterList() {
+    if (this.state.isResizeActive)
+      return ['altitude', 'flip_doorhandle', 'resize_and_scaling'];
+    return [
+      'width',
+      'height',
+      'depth',
+      'altitude',
+      'flip_doorhandle',
+      'open_doors',
+      'resize_and_scaling'
+    ];
+  }
+
+  returnMoldings() {
+    const element = this.props.element;
+
+    let doorStyle = element.doorStyle;
+    if (!doorStyle.doorStyles) {
+      doorStyle = doorStyle.toJS();
+    }
+
+    // if an element is not suitable for its' doorStyle
+    if (showYelloBox(element)) return [];
+
+    let moldings = [];
+    let cabinets = this.props.categoryData.data.cabinets;
+    cabinets.forEach(cabinet => {
+      cabinet.items.forEach(index => {
+        if (
+          index.name.toLowerCase().includes('molding') &&
+          index.name !== TOE_KICK_MOLDING // hide toe kick in OP temporarily
+        ) {
+          index.items.forEach(item => {
+            moldings.push(item);
+          });
+        }
+      });
+    });
+    moldings = moldings.filter(a => {
+      if (doorStyle.doorStyles.cds.some(ds => ds.itemID === a.itemID)) {
+        if (hasMoldingLayout(a, element.layoutpos)) {
+          let flag = element.molding.some(m => m.name === a.name);
+          a.selected = flag;
+          return true;
+        }
+      }
+      return false;
+    });
+    return moldings;
+  }
+
+  setGroupMolding(molding) {
+    this.context.itemsActions.setMolding(molding, false);
+  }
+
+  render() {
+    let {
+      state: { propertiesFormData, attributesFormData, isMolding },
+      context: { projectActions, catalog, translator },
+      props: { state: appState, element }
+    } = this;
+
+    const catalogType = catalog.getElement(element.type).type;
+    const isCabinet =
+      catalogType === 'cabinet' &&
+      !catalog.getElement(element.type).long_name.includes('Filler') &&
+      !catalog.getElement(element.type).long_name.includes('Panel');
+    const isFiller =
+      catalogType === 'cabinet' &&
+      catalog.getElement(element.type).long_name.includes('Filler');
+    const isAppliance = catalogType === 'appliance';
+    const isWindow = catalog
+      .getElement(element.type)
+      .info.tag.includes('window');
+    const isDoor = catalog.getElement(element.type).info.tag.includes('door');
+    const isWall = catalog.getElement(element.type).info.tag.includes('wall');
+    const shouldHideResizeAndModel = isCabinet || isWindow || isDoor || isWall;
+    return (
+      <div>
+        {propertiesFormData.entrySeq().map(([propertyName, data]) => {
+          if (
+            (catalog.categoryHasElement('Windows', element.type) ||
+              catalog.categoryHasElement('Doors', element.type)) &&
+            ['width', 'height'].includes(propertyName)
+          ) {
+            let currentValue = data.get('currentValue'),
+              configs = data.get('configs');
+            let { Editor } = catalog.getPropertyType(configs.type);
+            return (
+              <div style={{ position: 'relative' }}>
+                <Editor
+                  key={propertyName}
+                  propertyName={propertyName}
+                  value={currentValue}
+                  configs={configs}
+                  onUpdate={value => {
+                    this.updateProperty(propertyName, value);
+                  }}
+                  state={appState}
+                  sourceElement={element}
+                  internalState={this.state}
+                />
+                {configs.type === 'length-measure' && (
+                  <span
+                    style={{
+                      position: 'absolute',
+                      fontFamily: DEFAULT_FONT_FAMILY,
+                      fontSize: 12,
+                      right: 10,
+                      bottom: 12,
+                      color: TEXT_COLOR_NEUTRAL_2,
+                      fontWeight: 600,
+                      lineHeight: '17px'
+                    }}
+                  >
+                    {this.props.state.getIn([
+                      'scene',
+                      'layers',
+                      this.props.state.scene.selectedLayer,
+                      'unit'
+                    ])}
+                  </span>
+                )}
+              </div>
+            );
+          }
+        })}
+
+        <CustomAccordion
+          defaultExpanded
+          icon={<img src="/assets/img/svg/positioning.svg" alt="" />}
+          title={<PS.PositionValue>Positioning</PS.PositionValue>}
+          children={(() => {
+            return (
+              <>
+                <AttributesEditor
+                  element={element}
+                  onUpdate={this.updateAttribute}
+                  propertiesFormData={propertiesFormData}
+                  catalog={catalog}
+                  attributeFormData={attributesFormData}
+                  onConfigUpdate={(propertyName, value) =>
+                    this.updateProperty(propertyName, value)
+                  }
+                  state={appState}
+                  internalState={this.state}
+                  filteredProperties={['width', 'height', 'depth']}
+                />
+                {!shouldHideResizeAndModel && (
+                  <React.Fragment>
+                    <PS.PositionValue>Resize Model</PS.PositionValue>
+                    {propertiesFormData
+                      .entrySeq()
+                      .map(([propertyName, data]) => {
+                        let currentValue = data.get('currentValue'),
+                          configs = data.get('configs');
+                        let { Editor } = catalog.getPropertyType(configs.type);
+                        if (
+                          !this.state.isResizeActive &&
+                          configs.id === 'resize_and_scaling'
+                        ) {
+                          this.setState({ isResizeActive: currentValue });
+                        }
+                        return (
+                          configs.type !== 'length-measure' &&
+                          propertyName === 'resize_and_scaling' && (
+                            <div style={{ position: 'relative' }}>
+                              <Editor
+                                key={propertyName}
+                                propertyName={propertyName}
+                                value={currentValue}
+                                configs={configs}
+                                onUpdate={value => {
+                                  this.updateProperty(propertyName, value);
+                                  this.setState({
+                                    ...this.state,
+                                    isResizeActive: value
+                                  });
+                                }}
+                                state={appState}
+                                sourceElement={element}
+                                internalState={this.state}
+                              />
+                            </div>
+                          )
+                        );
+                      })}
+                  </React.Fragment>
+                )}
+                {!(isWindow || isDoor || isWall) && (
+                  <AttributesEditor
+                    element={element}
+                    onUpdate={this.updateAttribute}
+                    propertiesFormData={propertiesFormData}
+                    catalog={catalog}
+                    attributeFormData={attributesFormData}
+                    onConfigUpdate={(propertyName, value) => {
+                      let distLeft = 0,
+                        distRight = 0,
+                        distBack = 0,
+                        distFront = 0;
+
+                      const distArray = element?.distArray;
+                      if (Array.isArray(distArray)) {
+                        for (let i = 0; i < 4; i++) {
+                          const entry = distArray[i];
+                          if (!entry || entry.length < 2) continue;
+
+                          const [dist, side] = entry;
+                          const inches = convert(dist).from('cm').to('in');
+
+                          switch (side) {
+                            case Left:
+                              distLeft = inches;
+                              break;
+                            case Right:
+                              distRight = inches;
+                              break;
+                            case Back:
+                              distBack = inches;
+                              break;
+                            case Front:
+                              distFront = inches;
+                              break;
+                          }
+                        }
+                      }
+
+                      const scene = this.props.state.get('scene');
+                      const selectedLayer = scene.getIn([
+                        'layers',
+                        scene.get('selectedLayer')
+                      ]);
+                      const selectedLayerJS = selectedLayer?.toJS?.() || {};
+
+                      const newValue = value?._root?.entries?.[0]?.[1];
+
+                      if (
+                        propertyName === 'height' &&
+                        newValue > selectedLayerJS.ceilHeight
+                      ) {
+                        // TODO: Show user-friendly warning — "Item height exceeds ceiling height"
+                        // return;
+                      }
+
+                      if (
+                        propertyName === 'width' &&
+                        newValue > distLeft + distRight
+                      ) {
+                        // TODO: Show user-friendly warning — "Item width exceeds available left/right space"
+                        // return;
+                      }
+
+                      if (
+                        propertyName === 'depth' &&
+                        newValue > distBack + distFront
+                      ) {
+                        // TODO: Show user-friendly warning — "Item depth exceeds available back/front space"
+                        // return;
+                      }
+
+                      this.updateProperty(propertyName, value);
+                    }}
+                    state={appState}
+                    internalState={this.state}
+                    filteredProperties={this.returnResizeFilterList()}
+                    shouldOnlyShowEditorOptions={true}
+                  />
+                )}
+              </>
+            );
+          })()}
+        />
+        {/* <div style={attrPorpSeparatorStyle}>
+          <div style={headActionStyle}>
+            <div title={translator.t('Remove')} style={iconHeadStyle} onClick={e => projectActions.remove()}><MdDelete /></div>
+            <div title={translator.t('Copy')} style={iconHeadStyle} onClick={e => this.copyProperties(element.properties)}><MdContentCopy /></div>
+            {
+              appState.get('clipboardProperties') && appState.get('clipboardProperties').size ?
+                <div title={translator.t('Paste')} style={iconHeadStyle} onClick={e => this.pasteProperties()}><MdContentPaste /></div> : null
+            }
+          </div>
+        </div> */}
+        {(isCabinet || isDoor) && this.props.state.mode.includes('3D') && (
+          <React.Fragment>
+            <CustomAccordion
+              icon={<img src="/assets/img/svg/options.svg" alt="" />}
+              title={<PS.PositionValue>Options</PS.PositionValue>}
+              children={(() => {
+                return propertiesFormData
+                  .entrySeq()
+                  .map(([propertyName, data]) => {
+                    if (
+                      propertyName === 'flip_doorhandle' &&
+                      !isEmpty(this.props.planData)
+                    ) {
+                      let scene = this.props.state.get('scene');
+                      let selectedLayer = scene.getIn([
+                        'layers',
+                        scene.get('selectedLayer')
+                      ]);
+                      let item3D =
+                        this.props.planData.sceneGraph.layers[selectedLayer.id]
+                          .items[element.id];
+                      let flag = false;
+                      !isEmpty(item3D) &&
+                        item3D.children[0].children.forEach(child => {
+                          // get the door mesh's name
+                          let match = child.name.match(
+                            /\d_(door[^LR1-9]*)(_[LR])?(_[1-9])?$/
+                          );
+                          // check whether mesh's name contains the '_L' or '_R'
+                          if (
+                            !isEmpty(match) &&
+                            (match[2] === '_L' || match[2] === '_R')
+                          )
+                            flag = true;
+                        });
+                      if (flag === true) return null;
+                    }
+                    if (catalog.categoryHasElement('Windows', element.type)) {
+                      if (
+                        ['thickness', 'width', 'height'].includes(propertyName)
+                      ) {
+                        return null;
+                      }
+                    }
+                    if (catalog.categoryHasElement('Doors', element.type)) {
+                      if (
+                        ['altitude', 'thickness', 'width', 'height'].includes(
+                          propertyName
+                        )
+                      ) {
+                        return null;
+                      }
+                    }
+                    if (propertyName === 'resize_and_scaling') return null;
+
+                    let catalogElement = catalog.getElement(element.type);
+                    // if ((catalogElement.info.has_single_door === undefined || catalogElement.info.has_single_door == false) && propertyName == 'flip_doorhandle') {
+                    //   return null;
+                    // }
+
+                    let currentValue = data.get('currentValue'),
+                      configs = data.get('configs');
+                    let { Editor } = catalog.getPropertyType(configs.type);
+                    return (
+                      configs.type !== 'length-measure' && (
+                        <div style={{ position: 'relative' }}>
+                          <Editor
+                            key={propertyName}
+                            propertyName={propertyName}
+                            value={currentValue}
+                            configs={configs}
+                            onUpdate={value =>
+                              this.updateProperty(propertyName, value)
+                            }
+                            state={appState}
+                            sourceElement={element}
+                            internalState={this.state}
+                          />
+                          {configs.type === 'length-measure' && (
+                            <span
+                              style={{
+                                position: 'absolute',
+                                fontFamily: DEFAULT_FONT_FAMILY,
+                                fontSize: 12,
+                                right: 10,
+                                bottom: 12,
+                                color: TEXT_COLOR_NEUTRAL_2,
+                                fontWeight: 600,
+                                lineHeight: '17px'
+                              }}
+                            >
+                              in
+                            </span>
+                          )}
+                        </div>
+                      )
+                    );
+                  });
+              })()}
+            />
+          </React.Fragment>
+        )}
+        {isCabinet && isMolding && !!this.returnMoldings().length > 0 && (
+          <div>
+            <CustomAccordion
+              icon={<img src="/assets/img/svg/accessories.svg" alt="" />}
+              title={<PS.PositionValue>Molding</PS.PositionValue>}
+              children={(() => {
+                return this.returnMoldings().map(molding => {
+                  return (
+                    <S.SubCategoryItem
+                      id={molding.id}
+                      style={{ minWidth: 250 }}
+                      onClick={() => {
+                        this.setGroupMolding(molding);
+                      }}
+                      key={molding.id}
+                    >
+                      <img
+                        id={`molding&${molding.id}`}
+                        style={{ height: 70, width: 70, padding: 5 }}
+                        src={molding.thumbnail}
+                      />
+                      <S.ContentCheckImage
+                        id="check"
+                        src="/assets/img/svg/wizardstep/check-normal.svg"
+                      />
+                      {molding.selected && (
+                        <S.ContentCheckImage src="/assets/img/svg/wizardstep/check-active.svg" />
+                      )}
+                      <S.SubCategoryItemLabel
+                        style={{ fontWeight: molding.selected && 700 }}
+                      >
+                        {molding.name}
+                      </S.SubCategoryItemLabel>
+                    </S.SubCategoryItem>
+                  );
+                });
+              })()}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+ElementEditor.propTypes = {
+  state: PropTypes.object.isRequired,
+  planData: PropTypes.object.isRequired,
+  element: PropTypes.object.isRequired,
+  layer: PropTypes.object.isRequired,
+  categoryData: PropTypes.object.isRequired,
+  getLinearOfMolding: PropTypes.func.isRequired
+};
+
+ElementEditor.contextTypes = {
+  itemsActions: PropTypes.object.isRequired,
+  projectActions: PropTypes.object.isRequired,
+  catalog: PropTypes.object.isRequired,
+  translator: PropTypes.object.isRequired
+};