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

package/src/components/sidebar/custom-accordion.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails
+} from '@material-ui/core';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {},
+  content: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem'
+  }
+});
+
+const CustomAccordion = ({ icon, title, children, defaultExpanded }) => {
+  const classes = useStyles();
+
+  return (
+    <Accordion
+      style={{
+        boxShadow: 'none',
+        marginTop: '1rem'
+      }}
+      defaultExpanded={defaultExpanded}
+    >
+      <AccordionSummary
+        classes={{ content: classes.content, root: classes.root }}
+        expandIcon={<ExpandMoreIcon />}
+      >
+        {icon && icon}
+        {title && title}
+      </AccordionSummary>
+      <AccordionDetails
+        style={{
+          display: 'inherit'
+        }}
+      >
+        {children}
+      </AccordionDetails>
+    </Accordion>
+  );
+};
+
+export default CustomAccordion;

package/src/components/sidebar/export.js

@@ -0,0 +1,15 @@
+import Sidebar from './sidebar';
+import Panel from './panel';
+import PanelLayers from './panel-layers';
+import PanelLayerElement from './panel-layer-elements';
+import PanelGuides from './panel-guides';
+
+export { Sidebar, Panel, PanelLayers, PanelLayerElement, PanelGuides };
+
+export default {
+  Sidebar,
+  Panel,
+  PanelLayers,
+  PanelLayerElement,
+  PanelGuides
+};

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

@@ -0,0 +1,73 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ItemAttributesEditor from './item-attributes-editor';
+import LineAttributesEditor from './line-attributes-editor';
+import HoleAttributesEditor from './hole-attributes-editor';
+
+export default function AttributesEditor({
+  element,
+  onUpdate,
+  onValid,
+  propertiesFormData,
+  catalog,
+  attributeFormData,
+  onConfigUpdate,
+  state,
+  internalState,
+  ...rest
+}) {
+  switch (element.prototype) {
+    case 'items':
+      return (
+        <ItemAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          onValid={onValid}
+          propertiesFormData={propertiesFormData}
+          catalog={catalog}
+          attributeFormData={attributeFormData}
+          onConfigUpdate={onConfigUpdate}
+          state={state}
+          internalState={internalState}
+          {...rest}
+        />
+      );
+    case 'lines':
+      return (
+        <LineAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          onValid={onValid}
+          attributeFormData={attributeFormData}
+          state={state}
+          {...rest}
+        />
+      );
+    case 'holes':
+      return (
+        <HoleAttributesEditor
+          element={element}
+          onUpdate={onUpdate}
+          propertiesFormData={propertiesFormData}
+          catalog={catalog}
+          onConfigUpdate={onConfigUpdate}
+          onValid={onValid}
+          attributeFormData={attributeFormData}
+          state={state}
+          {...rest}
+        />
+      );
+    case 'areas':
+      return null;
+  }
+
+  return null;
+}
+
+AttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};

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

@@ -0,0 +1,101 @@
+import React from 'react';
+import * as S from '../../../toolbar/popup/floorplan/choose-floor/styles';
+import * as PS from '../../../toolbar/popup/styles';
+import { FaTimes } from 'react-icons/fa';
+
+class ConfirmPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  _submit() {
+    this.props.ok();
+    this.closePanel();
+  }
+  closePanel() {
+    this.props.handleConfirmLoad(false);
+  }
+  render() {
+    let { visible } = this.props;
+    return (
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: visible ? 'block' : 'none',
+          userSelect: 'none'
+        }}
+      >
+        <S.Div>
+          <div
+            style={{
+              backgroundColor: '#1183B7',
+              height: '30px',
+              paddingRight: '6px'
+            }}
+          >
+            <div
+              style={{ float: 'right', marginTop: '4px' }}
+              onClick={() => this.closePanel()}
+            >
+              <PS.IconButton>
+                <FaTimes />
+              </PS.IconButton>
+            </div>
+          </div>
+          <div style={{ fontSize: 14, marginTop: 20, marginLeft: 40 }}>
+            The item will be placed outside the floor plan
+            <br />
+            Are you sure?
+          </div>
+          <div
+            style={{
+              fontSize: 12,
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'relative'
+            }}
+          ></div>
+          <div style={{ display: 'flex', position: 'relative' }}>
+            <div
+              style={{
+                width: '70px',
+                marginLeft: '90px',
+                marginTop: '15px',
+                cursor: 'pointer'
+              }}
+              onClick={() => {
+                this._submit();
+              }}
+            >
+              <img
+                width={'80px'}
+                style={{ float: 'right' }}
+                src={'/assets/img/svg/toolbar/cancel_button.svg'}
+              />
+              <S.ButtonTitle1>{'Yes'}</S.ButtonTitle1>
+            </div>
+            <div
+              style={{
+                width: '70px',
+                marginLeft: '40px',
+                marginTop: '15px',
+                cursor: 'pointer'
+              }}
+              onClick={() => this.closePanel()}
+            >
+              <img
+                width={'80px'}
+                style={{ float: 'right' }}
+                src={'/assets/img/svg/toolbar/use_button.svg'}
+              />
+              <S.ButtonTitle2>{'No'}</S.ButtonTitle2>
+            </div>
+          </div>
+        </S.Div>
+      </div>
+    );
+  }
+}
+
+export default ConfirmPopup;

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

@@ -0,0 +1,149 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { PropertyLengthMeasure } from '../../../../catalog/properties/export';
+import PropertyString from '../../../../catalog/properties/property-string';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_3
+} from '../../../../constants';
+import styled from 'styled-components';
+
+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;
+`;
+
+export default function HoleAttributesEditor(
+  {
+    element,
+    onUpdate,
+    propertiesFormData,
+    catalog,
+    attributeFormData,
+    onConfigUpdate,
+    state,
+    internalState,
+    filteredProperties,
+    shouldOnlyShowEditorOptions = false,
+    ...rest
+  },
+  { translator }
+) {
+  // let name = attributeFormData.has('name') ? attributeFormData.get('name') : element.name;
+  let offsetA = attributeFormData.has('offsetA')
+    ? attributeFormData.get('offsetA')
+    : element.offsetA;
+  let offsetB = attributeFormData.has('offsetB')
+    ? attributeFormData.get('offsetB')
+    : element.offsetA;
+  let unit = state.getIn([
+    'scene',
+    'layers',
+    state.scene.selectedLayer,
+    'unit'
+  ]);
+  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>
+        )
+      );
+    });
+  };
+
+  return (
+    <div>
+      {/* <PropertyString
+      value={name}
+      onUpdate={mapped => onUpdate('name', mapped)}
+      configs={{label: 'Name'}}
+      state={state}
+      {...rest}
+    /> */}
+      {EditorOptions()}
+      <div style={{ position: 'relative' }}>
+        <PropertyLengthMeasure
+          value={offsetA}
+          onUpdate={mapped => onUpdate('offsetA', mapped)}
+          configs={{
+            label: 'Offset Left',
+            min: 0,
+            max: Infinity,
+            precision: 2
+          }}
+          state={state}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </div>
+      <div style={{ position: 'relative' }}>
+        <PropertyLengthMeasure
+          value={offsetB}
+          onUpdate={mapped => onUpdate('offsetB', mapped)}
+          configs={{
+            label: 'Offset Right',
+            min: 0,
+            max: Infinity,
+            precision: 2
+          }}
+          state={state}
+          {...rest}
+        />
+        <NumberInputMeasure>{unit}</NumberInputMeasure>
+      </div>
+    </div>
+  );
+}
+
+HoleAttributesEditor.propTypes = {
+  element: PropTypes.object.isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  attributeFormData: PropTypes.object.isRequired,
+  state: PropTypes.object.isRequired
+};
+
+HoleAttributesEditor.contextTypes = {
+  translator: PropTypes.object.isRequired
+};

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
+};