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

package/src/catalog/properties/property-length-measure.jsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {
+  UNITS_LENGTH,
+  UNIT_INCH,
+  UNIT_CENTIMETER,
+  DEFAULT_FONT_FAMILY,
+  TEXT_COLOR_NEUTRAL_0,
+  BASE_CABINET_LAYOUTPOS,
+  TALL_CABINET_LAYOUTPOS
+} from '../../constants';
+import convert from 'convert-units';
+import {
+  FormLabel,
+  FormNumberInput,
+  FormSelect
+} from '../../components/style/export';
+import { Map } from 'immutable';
+import { toFixedFloat } from '../../utils/math';
+import styled from 'styled-components';
+
+const DistanceFloorWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  margin-top: 3px;
+`;
+
+const DistanceFloorTitle = styled.span`
+  margin-right: auto;
+  width: 110px;
+  color: ${TEXT_COLOR_NEUTRAL_0};
+  font-family: ${DEFAULT_FONT_FAMILY};
+  font-size: 16px;
+
+  @media screen and (min-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (max-width: 1024) {
+    font-size: 11px;
+  }
+  @media screen and (min-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (max-width: 1366) {
+    font-size: 13px;
+  }
+  @media screen and (min-width: 1440) {
+    font-size: 16px;
+  }
+  @media screen and (max-width: 1440) {
+    font-size: 16px;
+  }
+  font-weight: 400;
+  line-height: 15px;
+  text-align: left;
+`;
+
+export default function PropertyLengthMeasure(
+  { value, onUpdate, onValid, configs, sourceElement, internalState, state },
+  { catalog }
+) {
+  let _unit = value.get('_unit');
+  let unit = state.getIn([
+    'scene',
+    'layers',
+    state.scene.selectedLayer,
+    'unit'
+  ]);
+  let length = value.get('length') || 0; // in centi
+  let _length = value.get('_length') || length; // in _unit
+  if (!_unit) {
+    _unit = UNIT_INCH;
+    _length = convert(length).from(UNIT_CENTIMETER).to(UNIT_INCH);
+  }
+  let type = value.get('type') || BASE_CABINET_LAYOUTPOS;
+  let { hook, label, ...configRest } = configs;
+  let update = (lengthInput, unitInput, type) => {
+    let newLength = toFixedFloat(lengthInput);
+    let merged = null;
+    if (type === 0) {
+      merged = value.merge({
+        _length: newLength,
+        _unit: unitInput,
+        length: convert(newLength).from(unitInput).to(UNIT_CENTIMETER)
+      });
+    } else {
+      merged = value.merge({
+        _length: convert(newLength).from(UNIT_CENTIMETER).to(unitInput),
+        _unit: unitInput,
+        length: newLength
+      });
+    }
+    if (hook) {
+      return hook(merged, sourceElement, internalState, state).then(val => {
+        return onUpdate(val);
+      });
+    }
+    return onUpdate(merged);
+  };
+
+  return (
+    <DistanceFloorWrapper>
+      <DistanceFloorTitle>{label}</DistanceFloorTitle>
+      <FormNumberInput
+        disabled={type === TALL_CABINET_LAYOUTPOS}
+        value={convert(_length).from('in').to(unit)}
+        onChange={event => update(event.target.value, _unit, 0)}
+        onValid={onValid}
+        labelName={label}
+        style={{ paddingRight: '40px' }}
+        {...configRest}
+      />
+    </DistanceFloorWrapper>
+  );
+}
+
+PropertyLengthMeasure.propTypes = {
+  value: PropTypes.instanceOf(Map).isRequired,
+  onUpdate: PropTypes.func.isRequired,
+  onValid: PropTypes.func,
+  configs: PropTypes.object.isRequired,
+  sourceElement: PropTypes.object,
+  internalState: PropTypes.object,
+  state: PropTypes.object.isRequired
+};
+
+PropertyLengthMeasure.contextTypes = {
+  catalog: PropTypes.object.isRequired
+};

package/src/catalog/properties/property-length-measure_hole.jsx

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

package/src/catalog/properties/property-number.jsx

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

package/src/catalog/properties/property-read-only.jsx

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

package/src/catalog/properties/property-string.jsx

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

package/src/catalog/properties/property-toggle.jsx

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

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

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

package/src/catalog/utils/FuseUtils.js

@@ -0,0 +1,61 @@
+class FuseUtils {
+  static filterArrayByString(mainArr, searchText) {
+    if (searchText === '') {
+      return mainArr;
+    }
+
+    searchText = searchText.toLowerCase();
+
+    return mainArr.filter(itemObj => {
+      return this.searchInObj(itemObj, searchText);
+    });
+  }
+
+  static searchInObj(itemObj, searchText) {
+    for (const prop in itemObj) {
+      if (!itemObj.hasOwnProperty(prop)) {
+        continue;
+      }
+
+      const value = itemObj[prop];
+
+      if (typeof value === 'string') {
+        if (this.searchInString(value, searchText)) {
+          return true;
+        }
+      } else if (Array.isArray(value)) {
+        if (this.searchInArray(value, searchText)) {
+          return true;
+        }
+      }
+
+      if (typeof value === 'object') {
+        if (this.searchInObj(value, searchText)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  static searchInArray(arr, searchText) {
+    for (const value of arr) {
+      if (typeof value === 'string') {
+        if (this.searchInString(value, searchText)) {
+          return true;
+        }
+      }
+
+      if (typeof value === 'object') {
+        if (this.searchInObj(value, searchText)) {
+          return true;
+        }
+      }
+    }
+  }
+
+  static searchInString(value, searchText) {
+    return value.toLowerCase().includes(searchText);
+  }
+}
+
+export default FuseUtils;

package/src/catalog/utils/exporter.js

@@ -0,0 +1,173 @@
+import convert from 'convert-units';
+
+export default function ({
+  itemID,
+  type,
+  long_name,
+  name,
+  sizeinfo,
+  description,
+  prototype,
+  base,
+  shape_svg,
+  render2DItem, // NOT COMING FROM UNZIPPED
+  render3DItem, // NOT COMING FROM UNZIPPED
+  structure_json,
+  layoutpos,
+  is_corner,
+  alti,
+  obj_property,
+  outlineSVGData // NOT COMING FROM UNZIPPED
+}) {
+  const _length = alti || 0;
+  // const length = convert(_length).from("in").to("cm");
+  const length = _length;
+
+  let additional_props = [];
+  if (type === 'cabinet' && long_name.toLowerCase().includes('filler')) {
+    additional_props = {
+      width: {
+        label: 'Width',
+        type: 'length-measure',
+        defaultValue: {
+          _length: sizeinfo.width,
+          _unit: 'in',
+          length: convert(sizeinfo.width).from('in').to('cm')
+        }
+      }
+    };
+  }
+  if (
+    type === 'appliance' ||
+    type === 'furnishing' ||
+    (type === 'cabinet' && long_name.toLowerCase().includes('panel'))
+  ) {
+    additional_props = {
+      width: {
+        label: 'Width',
+        type: 'length-measure',
+        defaultValue: {
+          _length: sizeinfo.width,
+          _unit: 'in',
+          length: convert(sizeinfo.width).from('in').to('cm')
+        }
+      },
+      depth: {
+        label: 'Depth',
+        type: 'length-measure',
+        defaultValue: {
+          _length: sizeinfo.depth,
+          _unit: 'in',
+          length: convert(sizeinfo.depth).from('in').to('cm')
+        }
+      },
+      height: {
+        label: 'Height',
+        type: 'length-measure',
+        defaultValue: {
+          _length: sizeinfo.height,
+          _unit: 'in',
+          length: convert(sizeinfo.height).from('in').to('cm')
+        }
+      }
+    };
+  }
+
+  let mode = null;
+
+  let retVal = {
+    itemID: itemID,
+    name: name,
+    prototype: prototype,
+    long_name: long_name,
+    type: type,
+    info: {
+      title: name,
+      outline: outlineSVGData,
+      tag: ['furnishing', 'electronics'],
+      description: description,
+      image: base,
+      door: obj_property.door_style,
+      doorcategory: obj_property.door_category,
+      has_single_door: obj_property.has_single_door,
+      sizeinfo,
+      layoutpos,
+      is_corner,
+      shape_svg
+    },
+
+    properties: {
+      altitude: {
+        label: 'Distance from floor',
+        type: 'length-measure',
+        defaultValue: {
+          _length: _length,
+          _unit: 'in',
+          length: length
+        }
+      },
+      resize_and_scaling: {
+        label: 'Resize & Scaling',
+        id: 'resize_and_scaling',
+        description: 'Add preferred dimensions.',
+        type: 'checkbox',
+        defaultValue: false,
+        values: {
+          none: false,
+          yes: true
+        }
+      },
+      ...additional_props,
+      flip_doorhandle: {
+        label: 'Flip Door Handle',
+        description: 'Viewable in 3D mode.',
+        type: 'checkbox',
+        defaultValue: false,
+        values: {
+          none: false,
+          yes: true
+        }
+      },
+      open_doors: {
+        label: 'Open doors',
+        description: 'Viewable in 3D mode.',
+        type: 'checkbox',
+        defaultValue: false,
+        values: {
+          none: false,
+          yes: true
+        }
+      }
+    },
+
+    img: base,
+
+    obj: obj_property,
+
+    render2D: function (element, layer, scene) {
+      return render2DItem.call(
+        this,
+        element,
+        layer,
+        scene,
+        sizeinfo,
+        layoutpos,
+        is_corner,
+        shape_svg
+      );
+    },
+
+    render3D: function (element, layer, scene, mode) {
+      return render3DItem(
+        element,
+        layer,
+        scene,
+        sizeinfo,
+        structure_json,
+        is_corner,
+        mode
+      );
+    }
+  };
+  return retVal;
+}