kitchen-simulator 5.0.0-test.65 → 5.0.0-test.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.65",
+  "version": "5.0.0-test.67",
   "description": "It is a kitchen simulator.",
   "main": "src/index.js",
   "module": "src/index.js",

package/src/_KitchenConfigurator.jsx

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { Plugins as PlannerPlugins } from './index';
 import * as PropTypes from 'prop-types';
 import React, { Component } from 'react';

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

@@ -15,7 +15,7 @@ import { isElevationView } from '../../../src/utils/helper';
 
 import * as SharedStyle from '../../shared-style';
 import { LINE_THICKNESS, UNIT_CENTIMETER } from '../../constants';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import ThreeBSP from '../../utils/threeCSG.es6';
 
 const params = {

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

@@ -1,65 +1,58 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
-import styled from 'styled-components';
 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,
@@ -77,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-enum.jsx

@@ -2,43 +2,32 @@ import React from 'react';
 import * as PropTypes from 'prop-types';
 import { Seq } from 'immutable';
 import { FormLabel, FormSelect } from '../../components/style/export';
-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,
@@ -48,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
@@ -56,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()
@@ -72,7 +70,7 @@ export default function PropertyEnum({
             </option>
           ))}
       </FormSelect>
-    </EnumWrapper>
+    </div>
   );
 }
 

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

@@ -6,7 +6,7 @@ import {
   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

@@ -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

@@ -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/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/style/form-number-input.jsx

@@ -1,34 +1,8 @@
 import React, { Component } from 'react';
 import * as PropTypes from 'prop-types';
-import {
-  KEYBOARD_BUTTON_CODE,
-  TEXT_COLOR_NEUTRAL_0,
-  SECONDARY_PURPLE_COLOR,
-  DEFAULT_FONT_FAMILY
-} from '../../constants';
+import { KEYBOARD_BUTTON_CODE } from '../../constants';
 import { isValidNumber } from '../../utils/helper';
 
-// import styled from 'styled-components';
-// const StyledInput = styled.input`
-//   display: block;
-//   padding: 15px 25px 12px 0px;
-//   width: 120px;
-//   color: ${TEXT_COLOR_NEUTRAL_0};
-//   background-color: rgb(255, 255, 255);
-//   border: 2px solid;
-//   text-align: right;
-//   float: right;
-//   font-family: ${DEFAULT_FONT_FAMILY};
-//   font-size: 16px;
-//   font-weight: 600;
-//   line-height: 17px;
-//   border-radius: 5px;
-//   outline: 0;
-//   :focus {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-// `;
-
 export default class FormNumberInput extends Component {
   constructor(props, context) {
     super(props, context);

package/src/components/style/form-select.jsx

@@ -1,32 +1,4 @@
 import React from 'react';
-import {
-  TEXT_COLOR_NEUTRAL_3,
-  DEFAULT_FONT_FAMILY,
-  SECONDARY_PURPLE_COLOR
-} from '../../constants';
-
-// import styled from 'styled-components';
-// const StyledSelect = styled.select`
-//   display: block;
-//   width: 120px;
-//   float: right;
-//   padding: 15px 10px 12px 0px;
-//   color: ${TEXT_COLOR_NEUTRAL_3};
-//   border: 2px solid;
-//   font-family: ${DEFAULT_FONT_FAMILY};
-//   font-size: 12px;
-//   font-weight: 600;
-//   line-height: 17px;
-//   text-align: right;
-//   outline: none;
-//   border-radius: 5px;
-//   :hover {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-//   :focus {
-//     border-color: ${SECONDARY_PURPLE_COLOR};
-//   }
-// `;
 
 export default function FormSelect({ children, style, ...rest }) {
   return (

package/src/components/viewer2d/area.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import * as PropTypes from 'prop-types';
 import polylabel from 'polylabel';
 import areapolygon from 'area-polygon';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { formatNumber } from '../../utils/math';
 import { DECIMAL_PLACES_2 } from '../../constants';
 

package/src/components/viewer2d/grids/grid-horizontal-streak.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
 import { List } from 'immutable';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 
 export default function GridHorizontalStreak({ width, height, grid }) {
   let step = grid.properties.get('step');

package/src/components/viewer2d/grids/grid-streak.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
 import { List } from 'immutable';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 
 export default function GridStreak({ width, height, grid }) {
   let step = grid.properties.get('step');

package/src/components/viewer2d/grids/grid-vertical-streak.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
 import { List } from 'immutable';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 
 export default function GridVerticalStreak({ width, height, grid }) {
   let step = grid.properties.get('step');

package/src/components/viewer2d/item.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useState } from 'react';
 import * as PropTypes from 'prop-types';
 import RulerDist from './rulerDist';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { GeometryUtils } from '../../utils/export';
 import { MODE_ROTATING_ITEM, WALL_CABINET_LAYOUTPOS } from '../../constants';
 import { returnReplaceableDeepSearchType } from './utils';

package/src/components/viewer2d/ruler.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import IDBroker from '../../utils/id-broker';
 import {
   LINE_THICKNESS,

package/src/components/viewer2d/rulerDist.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import * as PropTypes from 'prop-types';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 
 const ARROW_STYLE = {
   stroke: '#1183B7',

package/src/components/viewer2d/viewer2d.jsx

@@ -23,7 +23,7 @@ import * as SharedStyle from '../../shared-style';
 import { RulerX, RulerY } from './export';
 import { GeometryUtils } from '../../utils/export';
 import FormNumberInput from '../../components/style/form-number-input';
-import convert from 'convert-units';
+import * as convert from 'convert-units';
 import { Map } from 'immutable';
 import { formatNumber } from '../../../src/utils/math';
 import { isEmpty } from '../../utils/helper';