kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

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

@@ -0,0 +1,316 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import FormNumberInput from '../../../style/form-number-input';
+import convert from 'convert-units';
+import ConfirmPopup from './confirm-popup';
+import styled from 'styled-components';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+
+const NumberInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 5px;
+  position: relative;
+`;
+
+const NumberInputTitle = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  margin-right: auto;
+`;
+
+const NumberInputMeasure = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 17px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  position: absolute;
+  right: 10px;
+  bottom: 14px;
+`;
+
+const Left = 0;
+const Right = 180;
+const Back = 90;
+const Front = -90;
+
+let newX, newY;
+
+export default function ItemAttributesEditor(
+  {
+    element,
+    onUpdate,
+    propertiesFormData,
+    catalog,
+    attributeFormData,
+    onConfigUpdate,
+    state,
+    internalState,
+    filteredProperties,
+    shouldOnlyShowEditorOptions = false,
+    ...rest
+  },
+  { translator }
+) {
+  let [isPopupOpen, setPopupOpen] = useState(false);
+  // ✅ Cache element data from attributeFormData if available
+  const formElement = attributeFormData.has('element')
+    ? attributeFormData.get('element')
+    : null;
+
+  const name = formElement ? formElement.get('name') : element.name;
+  const renderedX = formElement ? formElement.get('x') : element.x;
+  const renderedY = formElement ? formElement.get('y') : element.y;
+  const renderedR = formElement
+    ? formElement.get('rotation')
+    : element.rotation;
+
+  // ✅ Initialize distances
+  let distBack = null,
+    distFront = null,
+    distLeft = null,
+    distRight = null;
+
+  // ✅ Detect if distArray uses Immutable-style or plain array
+  const isImmutable = typeof element.distArray?.get === 'function';
+
+  for (let i = 0; i < 4; i++) {
+    const entry = isImmutable
+      ? element.distArray.get(i)
+      : element.distArray?.[i];
+
+    if (!entry) continue;
+
+    const value = isImmutable ? entry.get(0) : entry[0];
+    const side = isImmutable ? entry.get(1) : entry[1];
+
+    // == null checks for both null and undefined (it’s a loose equality check).
+    if (value == null || side == null) continue;
+
+    const inches = convert(value).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 moveCabinet = () => {
+    onUpdate('pos', { x: newX, y: newY });
+  };
+
+  const changeDistance = (oldVal, newVal, oldRot) => {
+    let rotRad = ((oldRot + renderedR) / 180) * Math.PI;
+    let dist;
+    switch (oldRot) {
+      case Left:
+        dist = distRight;
+        break;
+      case Right:
+        dist = distLeft;
+        break;
+      case Back:
+        dist = distFront;
+        break;
+      case Front:
+        dist = distBack;
+        break;
+      default:
+        break;
+    }
+    newX =
+      renderedX +
+      convert((oldVal - newVal) * Math.cos(rotRad))
+        .from('in')
+        .to('cm');
+    newY =
+      renderedY +
+      convert((oldVal - newVal) * Math.sin(rotRad))
+        .from('in')
+        .to('cm');
+    if (dist + (oldVal - newVal) <= 0 || newVal < 0) {
+      setPopupOpen(true);
+      return;
+    }
+    onUpdate('pos', { x: newX, y: newY });
+  };
+
+  let handleConfirmLoad = value => {
+    setPopupOpen(value);
+  };
+
+  const EditorOptions = () => {
+    return propertiesFormData.entrySeq().map(([propertyName, data]) => {
+      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 (filteredProperties) {
+        if (filteredProperties.includes(propertyName)) 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' }} key={propertyName}>
+            <Editor
+              propertyName={propertyName}
+              value={currentValue}
+              configs={configs}
+              onUpdate={value => onConfigUpdate(propertyName, value)}
+              state={state}
+              sourceElement={element}
+              internalState={internalState}
+            />
+            <NumberInputMeasure>{unit}</NumberInputMeasure>
+          </div>
+        )
+      );
+    });
+  };
+
+  if (shouldOnlyShowEditorOptions) return EditorOptions();
+
+  let unit = state.getIn([
+    'scene',
+    'layers',
+    state.scene.selectedLayer,
+    'unit'
+  ]);
+
+  return (
+    <div>
+      <ConfirmPopup
+        visible={isPopupOpen}
+        handleConfirmLoad={handleConfirmLoad}
+        ok={moveCabinet}
+      />
+      <NumberInputWrapper>
+        <NumberInputTitle>Distance Left</NumberInputTitle>
+        <FormNumberInput
+          value={distLeft && convert(distLeft).from('in').to(unit)}
+          disabled={distLeft ? false : true}
+          onChange={event => changeDistance(distLeft, event.target.value, Left)}
+          state={state}
+          precision={2}
+          style={{ paddingRight: '40px' }}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </NumberInputWrapper>
+      <NumberInputWrapper>
+        <NumberInputTitle>Distance Right</NumberInputTitle>
+        <FormNumberInput
+          disabled={distRight ? false : true}
+          value={distRight && convert(distRight).from('in').to(unit)}
+          onChange={event =>
+            changeDistance(distRight, event.target.value, Right)
+          }
+          state={state}
+          style={{ paddingRight: '40px' }}
+          precision={2}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </NumberInputWrapper>
+      <NumberInputWrapper>
+        <NumberInputTitle>Distance Front</NumberInputTitle>
+        <FormNumberInput
+          disabled={distFront ? false : true}
+          value={distFront && convert(distFront).from('in').to(unit)}
+          onChange={event =>
+            changeDistance(distFront, event.target.value, Front)
+          }
+          state={state}
+          style={{ paddingRight: '40px' }}
+          precision={2}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </NumberInputWrapper>
+      <NumberInputWrapper>
+        <NumberInputTitle>Distance Back</NumberInputTitle>
+        <FormNumberInput
+          disabled={distBack ? false : true}
+          value={distBack && convert(distBack).from('in').to(unit)}
+          onChange={event => changeDistance(distBack, event.target.value, Back)}
+          state={state}
+          style={{ paddingRight: '40px' }}
+          precision={2}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </NumberInputWrapper>
+      {EditorOptions()}
+      <NumberInputWrapper>
+        <NumberInputTitle>Rotation</NumberInputTitle>
+        <FormNumberInput
+          value={renderedR}
+          onChange={event => onUpdate('rotation', event.target.value)}
+          state={state}
+          precision={2}
+          {...rest}
+        />
+        <div
+          style={{
+            position: 'absolute',
+            fontFamily: DEFAULT_FONT_FAMILY,
+            fontSize: 19,
+            right: 15,
+            top: 15,
+            border: `1px solid ${TEXT_COLOR_NEUTRAL_2}`,
+            height: 5,
+            width: 5,
+            borderRadius: '50%'
+          }}
+        />
+      </NumberInputWrapper>
+    </div>
+  );
+}
+
+ItemAttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+ItemAttributesEditor.contextTypes = {
+  translator: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,108 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { FormNumberInput, FormTextInput } from '../../../style/export';
+import { PropertyLengthMeasure } from '../../../../catalog/properties/export';
+import styled from 'styled-components';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_2,
+  TEXT_COLOR_NEUTRAL_0,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+
+const NameInputWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+`;
+
+const NameInputTitle = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-weight: 400;
+  line-height: 22px;
+  text-align: left;
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  margin-right: auto;
+`;
+
+const NumberInputMeasure = styled.span`
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 17px;
+  color: ${TEXT_COLOR_NEUTRAL_3};
+  position: absolute;
+  right: 10px;
+  bottom: 12px;
+`;
+
+const tableStyle = { width: '100%' };
+const firstTdStyle = { width: '6em' };
+const inputStyle = { textAlign: 'left' };
+
+export default function LineAttributesEditor(
+  { element, onUpdate, attributeFormData, state, ...rest },
+  { translator }
+) {
+  let name = attributeFormData.has('name')
+    ? attributeFormData.get('name')
+    : element.name;
+  let vertexOne = attributeFormData.has('vertexOne')
+    ? attributeFormData.get('vertexOne')
+    : null;
+  let vertexTwo = attributeFormData.has('vertexTwo')
+    ? attributeFormData.get('vertexTwo')
+    : null;
+  let lineLength = attributeFormData.has('lineLength')
+    ? attributeFormData.get('lineLength')
+    : null;
+  let focus = attributeFormData.has('focus')
+    ? attributeFormData.get('focus')
+    : false;
+  let unit = state.getIn([
+    'scene',
+    'layers',
+    state.scene.selectedLayer,
+    'unit'
+  ]);
+  return (
+    <div>
+      <NameInputWrapper>
+        <NameInputTitle style={{ fontSize: 16 }}>
+          {translator.t('Name')}
+        </NameInputTitle>
+        <FormTextInput
+          value={name}
+          onChange={event => onUpdate('name', event.target.value)}
+        />
+      </NameInputWrapper>
+      <div style={{ position: 'relative' }}>
+        <PropertyLengthMeasure
+          value={lineLength}
+          onUpdate={mapped => onUpdate('lineLength', mapped)}
+          configs={{
+            label: 'Length',
+            min: 0,
+            max: Infinity,
+            precision: 2,
+            focus: focus
+          }}
+          state={state}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </div>
+    </div>
+  );
+}
+
+LineAttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+LineAttributesEditor.contextTypes = {
+  translator: PropTypes.object.isRequired
+};