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

package/src/catalog/areas/area/planner-element.jsx

@@ -1,4 +1,4 @@
-import { ElementsFactories } from 'KitchenConfigurator';
+import { ElementsFactories } from '../../../index';
 
 let info = {
   title: 'area',

package/src/catalog/factories/wall-factory-3d.js

@@ -1,28 +1,21 @@
+import * as Three from 'three';
 import {
-  TextureLoader,
-  Mesh,
-  RepeatWrapping,
-  Vector2,
   BoxGeometry,
+  Group,
+  Mesh,
   MeshBasicMaterial,
   MeshStandardMaterial,
-  Group,
-  CubeTextureLoader,
-  sRGBEncoding,
-  DoubleSide
+  RepeatWrapping,
+  TextureLoader,
+  Vector2
 } from 'three';
 
 import { verticesDistance } from '../../utils/geometry';
-import * as Three from 'three';
-import { textureCube, isElevationView } from '../../../src/utils/helper';
+import { isElevationView } from '../../../src/utils/helper';
 
 import * as SharedStyle from '../../shared-style';
-import {
-  MODE_ELEVATION_VIEW,
-  LINE_THICKNESS,
-  UNIT_CENTIMETER
-} from '../../constants';
-import convert from 'convert-units';
+import { LINE_THICKNESS, UNIT_CENTIMETER } from '../../constants';
+import * as convert from 'convert-units';
 import ThreeBSP from '../../utils/threeCSG.es6';
 
 const params = {
@@ -46,8 +39,8 @@ const applyTexture = (material, texture, length, height) => {
 
   if (texture) {
     material.map = loader.load(texture.uri.default);
-    (material.map.colorSpace = Three.SRGBColorSpace),
-      (material.needsUpdate = true);
+    ((material.map.colorSpace = Three.SRGBColorSpace),
+      (material.needsUpdate = true));
     material.map.wrapS = RepeatWrapping;
     material.map.wrapT = RepeatWrapping;
     material.map.repeat.set(

package/src/catalog/holes/index.js

@@ -0,0 +1,13 @@
+export { default as doorCloset } from './door-closet/planner-element.jsx';
+export { default as doorDouble } from './door-double/planner-element.jsx';
+export { default as doorExterior } from './door-exterior/planner-element.jsx';
+export { default as doorInterior } from './door-interior/planner-element.jsx';
+export { default as doorPanic } from './door-panic/planner-element.jsx';
+export { default as doorPanicDouble } from './door-panic-double/planner-element.jsx';
+export { default as doorSliding } from './door-sliding/planner-element.jsx';
+export { default as doorwayFramed } from './doorway-framed/planner-element.jsx';
+export { default as doorwayFrameless } from './doorway-frameless/planner-element.jsx';
+export { default as windowClear } from './window-clear/planner-element.jsx';
+export { default as windowCross } from './window-cross/planner-element.jsx';
+export { default as windowDoubleHung } from './window-double-hung/planner-element.jsx';
+export { default as windowVertical } from './window-vertical/planner-element.jsx';

package/src/catalog/lines/wall/planner-element.jsx

@@ -1,4 +1,4 @@
-import { ElementsFactories } from 'KitchenConfigurator';
+import { ElementsFactories } from '../../../index';
 
 const info = {
   title: 'wall',

package/src/catalog/mycatalog.js

@@ -0,0 +1,26 @@
+import { Catalog } from '../index';
+import * as Areas from './areas/**/planner-element.jsx';
+import * as Lines from './lines/**/planner-element.jsx';
+import * as Holes from './holes/**/planner-element.jsx';
+
+let catalog = new Catalog();
+// import * as Items from './Items/**/*.jsx';
+for (let x in Areas) catalog.registerElement(Areas[x]);
+for (let x in Lines) catalog.registerElement(Lines[x]);
+for (let x in Holes) catalog.registerElement(Holes[x]);
+// for (let x in Items) catalog.registerElement(Items[x]);
+catalog.registerCategory('Windows', 'Windows', [
+  Holes.windowClear,
+  Holes.windowCross,
+  Holes.windowDoubleHung,
+  Holes.windowVertical
+]);
+catalog.registerCategory('Doors', 'Doors', [
+  Holes.doorInterior,
+  Holes.doorExterior,
+  Holes.doorCloset,
+  Holes.doorSliding,
+  Holes.doorwayFramed,
+  Holes.doorwayFrameless
+]);
+export default catalog;

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

@@ -1,67 +1,58 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { FormLabel } from '../../components/style/export';
-import PropertyStyle from './shared-property-style';
-import styled from 'styled-components';
+import * as PropTypes from 'prop-types';
 import {
   DEFAULT_FONT_FAMILY,
   SECONDARY_PURPLE_COLOR,
   TEXT_COLOR_NEUTRAL_0
 } from '../../constants';
 
-const FlipWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin: 15px 0;
-  justify-content: space-between;
-`;
-
-const FlipTitle = styled.span`
-  margin-right: auto;
-  color: ${SECONDARY_PURPLE_COLOR};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 18px;
-  text-align: left;
-`;
-const FlipDescription = styled.span`
-  margin-right: auto;
-  color: ${TEXT_COLOR_NEUTRAL_0};
-  font-family: ${DEFAULT_FONT_FAMILY};
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: left;
-`;
-const FlipInfoWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-const FlipToggle = styled.div`
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-`;
-
-const FlipToggleIcon = styled.div`
-  top: 0;
-  position: absolute;
-  ${'' /* transition-duration: .3s; */}
-  img {
-    font-size: 1.4rem;
-    box-sizing: border-box;
-    border-radius: 50%;
+const styles = {
+  flipWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '15px 0',
+    justifyContent: 'space-between'
+  },
+  flipTitle: {
+    marginRight: 'auto',
+    color: SECONDARY_PURPLE_COLOR,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: '16px',
+    fontWeight: 600,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipDescription: {
+    marginRight: 'auto',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontSize: '13px',
+    fontWeight: 400,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipInfoWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  flipToggle: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '14px',
+    cursor: 'pointer',
+    WebkitUserSelect: 'none',
+    MozUserSelect: 'none',
+    msUserSelect: 'none',
+    userSelect: 'none',
+    color: 'black'
+  },
+  flipToggleIcon: {
+    top: 0,
+    position: 'absolute'
   }
-`;
+};
 
 export default function PropertyCheckbox({
   value,
@@ -79,37 +70,42 @@ export default function PropertyCheckbox({
           return onUpdate(_val);
         });
     }
-
     return onUpdate(val);
   };
 
   let activeStyle = value == 0 ? { left: 0 } : { right: 0 };
 
   return (
-    <FlipWrapper>
-      <FlipInfoWrapper>
-        <FlipTitle>{configs.label}</FlipTitle>
+    <div style={styles.flipWrapper}>
+      <div style={styles.flipInfoWrapper}>
+        <span style={styles.flipTitle}>{configs.label}</span>
         {configs.description && (
-          <FlipDescription>{configs.description}</FlipDescription>
+          <span style={styles.flipDescription}>{configs.description}</span>
         )}
-      </FlipInfoWrapper>
-      <FlipToggle style={{ color: 'black' }} onClick={e => update(!value)}>
+      </div>
+      <div style={styles.flipToggle} onClick={e => update(!value)}>
         <img
           src={`/assets/img/svg/bottombar/${
             value != 0 ? '2d3d_toggle_active.svg' : '2d3d_toggle.svg'
           }`}
           style={{ width: '55px', height: '30px' }}
         />
-        <FlipToggleIcon style={{ ...activeStyle }}>
+        <div style={{ ...styles.flipToggleIcon, ...activeStyle }}>
           <img
             src={`/assets/img/svg/bottombar/${
               value != 0 ? '2d3d_button_active.svg' : '2d3d_button.svg'
             }`}
-            style={{ width: '30px', height: '30px' }}
+            style={{
+              width: '30px',
+              height: '30px',
+              fontSize: '1.4rem',
+              boxSizing: 'border-box',
+              borderRadius: '50%'
+            }}
           />
-        </FlipToggleIcon>
-      </FlipToggle>
-    </FlipWrapper>
+        </div>
+      </div>
+    </div>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { FormLabel, FormColorInput } from '../../components/style/export';
 import PropertyStyle from './shared-property-style';
 

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

@@ -1,45 +1,33 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { Seq } from 'immutable';
 import { FormLabel, FormSelect } from '../../components/style/export';
-import PropertyStyle from './shared-property-style';
-import styled from 'styled-components';
 import { TEXT_COLOR_NEUTRAL_0, DEFAULT_FONT_FAMILY } from '../../constants';
 
-const EnumWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: 3px;
-`;
-
-const EnumTitle = styled.span`
-  margin-right: auto;
-  width: 110px;
-  color: ${TEXT_COLOR_NEUTRAL_0};
-  font-family: ${DEFAULT_FONT_FAMILY};
-
-  @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;
+const styles = {
+  enumWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '3px'
+  },
+  enumTitle: {
+    marginRight: 'auto',
+    width: '110px',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontWeight: 400,
+    lineHeight: '15px',
+    textAlign: 'left',
+    fontSize: '11px'
   }
-  font-weight: 400;
-  line-height: 15px;
-  text-align: left;
-`;
+};
+
+// Responsive font size adjustment
+function getFontSize() {
+  if (window.innerWidth >= 1440) return '16px';
+  if (window.innerWidth >= 1366) return '13px';
+  return '11px';
+}
 
 export default function PropertyEnum({
   value,
@@ -49,6 +37,16 @@ export default function PropertyEnum({
   internalState,
   state
 }) {
+  const [fontSize, setFontSize] = React.useState(getFontSize());
+
+  React.useEffect(() => {
+    function handleResize() {
+      setFontSize(getFontSize());
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   let update = val => {
     if (configs.hook) {
       return configs
@@ -57,13 +55,12 @@ export default function PropertyEnum({
           return onUpdate(_val);
         });
     }
-
     return onUpdate(val);
   };
 
   return (
-    <EnumWrapper>
-      <EnumTitle>{configs.label}</EnumTitle>
+    <div style={styles.enumWrapper}>
+      <span style={{ ...styles.enumTitle, fontSize }}>{configs.label}</span>
       <FormSelect value={value} onChange={event => update(event.target.value)}>
         {Seq(configs.values)
           .entrySeq()
@@ -73,7 +70,7 @@ export default function PropertyEnum({
             </option>
           ))}
       </FormSelect>
-    </EnumWrapper>
+    </div>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 
 export default function PropertyHidden({
   value,

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

@@ -1,12 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import {
   BASE_CABINET_LAYOUTPOS,
   TALL_CABINET_LAYOUTPOS,
   UNITS_LENGTH,
   UNIT_INCH
 } from './../../constants';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import {
   FormLabel,
   FormNumberInput,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import {
   UNITS_LENGTH,
   UNIT_INCH,
@@ -9,7 +9,7 @@ import {
   BASE_CABINET_LAYOUTPOS,
   TALL_CABINET_LAYOUTPOS
 } from '../../constants';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import {
   FormLabel,
   FormNumberInput,
@@ -17,48 +17,45 @@ import {
 } 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;
+const styles = {
+  distanceFloorWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: '3px'
+  },
+  distanceFloorTitle: {
+    marginRight: 'auto',
+    width: '110px',
+    color: TEXT_COLOR_NEUTRAL_0,
+    fontFamily: DEFAULT_FONT_FAMILY,
+    fontWeight: 400,
+    lineHeight: '15px',
+    textAlign: 'left'
   }
-  font-weight: 400;
-  line-height: 15px;
-  text-align: left;
-`;
+};
+
+// Responsive font size adjustment
+function getFontSize() {
+  if (window.innerWidth >= 1440) return '16px';
+  if (window.innerWidth >= 1366) return '13px';
+  return '11px';
+}
 
 export default function PropertyLengthMeasure(
   { value, onUpdate, onValid, configs, sourceElement, internalState, state },
   { catalog }
 ) {
+  const [fontSize, setFontSize] = React.useState(getFontSize());
+
+  React.useEffect(() => {
+    function handleResize() {
+      setFontSize(getFontSize());
+    }
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
   let _unit = value.get('_unit');
   let unit = state.getIn([
     'scene',
@@ -99,8 +96,8 @@ export default function PropertyLengthMeasure(
   };
 
   return (
-    <DistanceFloorWrapper>
-      <DistanceFloorTitle>{label}</DistanceFloorTitle>
+    <div style={styles.distanceFloorWrapper}>
+      <span style={{ ...styles.distanceFloorTitle, fontSize }}>{label}</span>
       <FormNumberInput
         disabled={type === TALL_CABINET_LAYOUTPOS}
         value={convert(_length).from('in').to(unit)}
@@ -110,7 +107,7 @@ export default function PropertyLengthMeasure(
         style={{ paddingRight: '40px' }}
         {...configRest}
       />
-    </DistanceFloorWrapper>
+    </div>
   );
 }
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import {
   UNITS_LENGTH,
   UNIT_INCH,
@@ -7,7 +7,7 @@ import {
   BASE_CABINET_LAYOUTPOS,
   TALL_CABINET_LAYOUTPOS
 } from '../../constants';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import {
   FormLabel,
   FormNumberInput1,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { FormLabel, FormNumberInput } from '../../components/style/export';
 import PropertyStyle from './shared-property-style';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { FormLabel } from '../../components/style/export';
 import PropertyStyle from './shared-property-style';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { FormLabel, FormTextInput } from '../../components/style/export';
 import PropertyStyle from './shared-property-style';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import { FormLabel, Button } from '../../components/style/export';
 import PropertyStyle from './shared-property-style';
 

package/src/catalog/utils/exporter.js

@@ -1,4 +1,4 @@
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 
 export default function ({
   itemID,

package/src/catalog/utils/item-loader.jsx

@@ -1,4 +1,4 @@
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { fromJS, Map } from 'immutable';
 import React, { useState } from 'react';
 import * as Three from 'three';

package/src/class/item.js

@@ -1,4 +1,4 @@
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { Layer, Group, Hole } from './export';
 import {
   IDBroker,

package/src/components/content.jsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import * as PropTypes from 'prop-types';
 import Viewer2D from './viewer2d/viewer2d';
 import Viewer3D from './viewer3d/viewer3d';
 import Viewer3DFirstPerson from './viewer3d/viewer3d-first-person';
-import CatalogList from './catalog-view/catalog-list';
-import ProjectConfigurator from './configurator/project-configurator';
 import * as constants from '../constants';
 import Front3D from './viewer3d/front3D';
 
@@ -58,17 +56,6 @@ export default function Content(
         <Viewer3DFirstPerson state={state} width={width} height={height} />
       );
 
-    case constants.MODE_VIEWING_CATALOG:
-      return (
-        <CatalogList
-          state={state}
-          param={match}
-          width={width}
-          height={height}
-          categoryData={this.props.categoryData}
-        />
-      );
-
     case constants.MODE_IDLE:
     case constants.MODE_2D_ZOOM_IN:
     case constants.MODE_2D_ZOOM_OUT:
@@ -110,11 +97,6 @@ export default function Content(
         />
       );
 
-    case constants.MODE_CONFIGURING_PROJECT:
-      return (
-        <ProjectConfigurator width={width} height={height} state={state} />
-      );
-
     default:
       if (customContents.hasOwnProperty(mode)) {
         let CustomContent = customContents[mode];