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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "5.0.0-test.6",
+  "version": "5.0.0-test.8",
   "description": "It is a kitchen simulator.",
   "type": "module",
 
@@ -16,9 +16,29 @@
   },
 
   "files": [
-    "src",
+    "src/*.js",
+    "src/*.jsx",
+    "src/catalog",
+    "src/utils",
+    "src/actions",
+    "src/reducers",
+    "src/class",
+    "src/plugins",
+    "src/shared-style",
+    "src/translator",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+
+    "src/components/_export.js",
+    "src/components/atoms",
+    "src/components/button",
+    "src/components/molecules",
+    "src/components/style",
+    "src/components/tutorial-view",
+    "src/components/viewer2d",
+    "src/components/viewer3d",
+    "src/components/_export.js",
+    "src/components/content.jsx"
   ],
 
   "sideEffects": [

package/src/components/_export.js

@@ -0,0 +1,11 @@
+import Content from './content';
+import Viewer2DComponents from './viewer2d/export';
+import StyleComponents from './style/export';
+
+export { Content, Viewer2DComponents, StyleComponents };
+
+export default {
+  Content,
+  Viewer2DComponents,
+  StyleComponents
+};

package/src/components/viewer3d/scene-creator.js

@@ -1,49 +1,46 @@
 import * as Three from 'three';
+import { Color, Group } from 'three';
 import createGrid from './grid-creator';
 import { disposeObject } from './three-memory-cleaner';
-import { Color, Group } from 'three';
-import { isUndefined } from 'util';
 import {
-  MODE_DRAWING_ITEM_3D,
-  EPSILON,
-  DISTANCE_EPSILON,
-  OBJTYPE_MESH,
-  ARROW_TEXT_FORECOLOR,
-  ARROW_TEXT_BACKCOLOR,
-  ARROW_TEXT_FONTFACE,
-  UNIT_CENTIMETER,
-  SHADE_DARK_PURPLE_COLOR,
-  MODE_DRAGGING_ITEM_3D,
-  MODE_ROTATING_ITEM_3D,
   ANIMATE_STEP_MAX,
   ANIMATE_STEP_MIN,
-  ANIMATE_OBJECT_OPEN_DOOR_ROTATION_UNIT,
-  TOP_MOLDING_LOCATION,
-  MIDDLE_MOLDING_LOCATION,
-  BOTTOM_MOLDING_LOCATION,
+  ARRAY_3D_MODES,
+  ARROW_TEXT_BACKCOLOR,
+  ARROW_TEXT_FONTFACE,
+  ARROW_TEXT_FORECOLOR,
   BASE_CABINET_LAYOUTPOS,
-  TALL_CABINET_LAYOUTPOS,
-  WALL_CABINET_LAYOUTPOS,
+  BOTTOM_MOLDING_LOCATION,
   DECIMAL_PLACES_2,
   DIFFERENT_VALUES_PATH_LENGTH,
+  DISTANCE_EPSILON,
+  EPSILON,
+  MIDDLE_MOLDING_LOCATION,
+  MODE_DRAGGING_ITEM_3D,
+  MODE_DRAWING_ITEM_3D,
+  MODE_IDLE,
   MODE_IDLE_3D,
-  ARRAY_3D_MODES,
-  MODE_IDLE
+  MODE_ROTATING_ITEM_3D,
+  OBJTYPE_MESH,
+  SHADE_DARK_PURPLE_COLOR,
+  TOP_MOLDING_LOCATION,
+  UNIT_CENTIMETER,
+  WALL_CABINET_LAYOUTPOS
 } from '../../constants';
-import { IDBroker, GeometryUtils, MoldingUtils } from '../../utils/export';
+import { GeometryUtils, IDBroker, MoldingUtils } from '../../utils/export';
 import convert from 'convert-units';
 import { verticesDistance } from '../../utils/geometry';
-import * as GeomUtils from '../../../demo/src/catalog/utils/geom-utils';
-import { loadTexture } from '../../../demo/src/catalog/utils/item-loader';
 import { returnReplaceableDeepSearchType } from '../viewer2d/utils';
 import {
-  replaceMeshesWithLineSegments,
+  animateDoor,
   isElevationView,
   isEmpty,
-  animateDoor,
+  replaceMeshesWithLineSegments,
   translateDrawer
 } from '../../../src/utils/helper';
 import { formatNumber } from '../../utils/math';
+import * as GeomUtils from '../../../src/catalog/utils/geom-utils.js';
+import { loadTexture } from '../../../src/catalog/utils/item-loader.jsx';
 
 let transformBox;
 export var fVLine = [];

package/src/components/viewer3d/viewer3d.js

@@ -5,32 +5,31 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import * as Three from 'three';
 import {
+  checkCabinetOverlap,
+  createBacksplash,
+  deleteSpecifiedMeshObjects,
+  fVLine,
+  getDistances,
   parseData,
   updateScene,
-  visibleTransformBox,
-  getDistances,
-  fVLine,
-  deleteSpecifiedMeshObjects,
-  createBacksplash,
-  checkCabinetOverlap
+  visibleTransformBox
 } from './scene-creator';
-import { disposeScene } from './three-memory-cleaner';
-import { disposeObject } from './three-memory-cleaner';
+import { disposeObject, disposeScene } from './three-memory-cleaner';
 import diff from 'immutablediff';
 import * as SharedStyle from '../../shared-style';
 import {
-  MODE_DRAWING_ITEM_3D,
-  MODE_IDLE_3D,
+  BASE_CABINET_LAYOUTPOS,
   MODE_3D_VIEW,
-  UNIT_CENTIMETER,
+  MODE_DRAGGING_ITEM_3D,
   MODE_DRAWING_HOLE_3D,
-  SECONDARY_PURPLE_COLOR,
+  MODE_DRAWING_ITEM_3D,
   MODE_ELEVATION_VIEW,
-  MODE_DRAGGING_ITEM_3D,
+  MODE_IDLE_3D,
   MODE_ROTATING_ITEM_3D,
-  WALL_CABINET_LAYOUTPOS,
-  BASE_CABINET_LAYOUTPOS,
-  TALL_CABINET_LAYOUTPOS
+  SECONDARY_PURPLE_COLOR,
+  TALL_CABINET_LAYOUTPOS,
+  UNIT_CENTIMETER,
+  WALL_CABINET_LAYOUTPOS
 } from '../../constants';
 
 import { isUndefined } from 'util';
@@ -40,13 +39,14 @@ import { GeometryUtils } from '../../utils/export';
 import { handleCamRect, isElevationView, isEmpty } from '../../utils/helper';
 import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader';
 import CameraControls from 'camera-controls';
-CameraControls.install({ THREE: Three });
 import { returnReplaceableDeepSearchType } from '../viewer2d/utils';
 import {
   getAllMeshes,
   vectorIntersectWithMesh
 } from '../../utils/objects-utils';
 
+CameraControls.install({ THREE: Three });
+
 export default class Scene3DViewer extends React.Component {
   constructor(props) {
     super(props);
@@ -2978,7 +2978,7 @@ export default class Scene3DViewer extends React.Component {
           line = line.children[0].children[0];
           // index(faces) of the line
           const indexAttribute = line.geometry.getIndex();
-          const firstFaceIndices = undefined;
+          let firstFaceIndices = undefined;
           if (indexAttribute && indexAttribute.length > 0) {
             firstFaceIndices = [
               indexAttribute.getX(0),

package/src/components/catalog-view/catalog-breadcrumb.jsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { MdArrowBack as Arrow } from 'react-icons/md';
-import * as SharedStyle from '../../shared-style';
-
-const breadcrumbStyle = {
-  margin: '1.5em',
-  display: 'flex'
-};
-
-const breadcrumbTextStyle = {
-  fontSize: '20px',
-  cursor: 'pointer'
-};
-
-const breadcrumbLastTextStyle = {
-  ...breadcrumbTextStyle,
-  fontWeight: 'bolder',
-  color: SharedStyle.SECONDARY_COLOR.main
-};
-
-const breadcrumbTabStyle = {
-  fill: SharedStyle.COLORS.black,
-  fontSize: '24px',
-  marginLeft: '10px',
-  marginRight: '10px'
-};
-
-const CatalogBreadcrumb = ({ names }) => {
-  let labelNames = names.map((name, ind) => {
-    let lastElement = ind === names.length - 1;
-
-    return (
-      <div key={ind} style={{ display: 'flex' }}>
-        <div
-          style={!lastElement ? breadcrumbTextStyle : breadcrumbLastTextStyle}
-          onClick={name.action || null}
-        >
-          {name.name}
-        </div>
-        {!lastElement ? <Arrow style={breadcrumbTabStyle} /> : null}
-      </div>
-    );
-  });
-
-  return <div style={breadcrumbStyle}>{labelNames}</div>;
-};
-
-CatalogBreadcrumb.propTypes = {
-  names: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default CatalogBreadcrumb;

package/src/components/catalog-view/catalog-item.jsx

@@ -1,229 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { FaPlusCircle as IconAdd } from 'react-icons/fa';
-import * as SharedStyle from '../../shared-style';
-import { API_SERVER_URL, MODE, MODE_IDLE } from '../../constants';
-import browserHistory from '../../@history';
-import axios from 'axios';
-import SnackBar from '../atoms/Snackbar/index';
-const AWS = require('aws-sdk');
-
-const s3 = new AWS.S3({
-  accessKeyId: process.env.REACT_APP_AWS_ID,
-  secretAccessKey: process.env.REACT_APP_AWS_SECRET
-});
-
-const STYLE_BOX = {
-  width: '14em',
-  height: '14em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .15s ease-in-out',
-  WebkitTransition: 'all .15s ease-in-out',
-  alignSelf: 'center',
-  justifySelf: 'center'
-};
-
-const STYLE_BOX_HOVER = {
-  ...STYLE_BOX,
-  background: SharedStyle.SECONDARY_COLOR.main
-};
-
-const STYLE_TITLE = {
-  width: '100%',
-  textAlign: 'center',
-  display: 'block',
-  marginBottom: '.5em',
-  textTransform: 'capitalize'
-};
-
-const STYLE_TITLE_HOVER = {
-  ...STYLE_TITLE,
-  color: SharedStyle.COLORS.white
-};
-
-const STYLE_IMAGE_CONTAINER = {
-  width: '100%',
-  height: '8em',
-  position: 'relative',
-  overflow: 'hidden',
-  border: 'solid 1px #e6e6e6',
-  padding: 0,
-  margin: 0,
-  marginBottom: '5px'
-};
-
-const STYLE_IMAGE = {
-  position: 'absolute',
-  background: '#222',
-  width: '100%',
-  height: '100%',
-  backgroundSize: 'contain',
-  backgroundPosition: '50% 50%',
-  backgroundColor: SharedStyle.COLORS.white,
-  backgroundRepeat: 'no-repeat',
-  transition: 'all .2s ease-in-out'
-};
-
-const STYLE_IMAGE_HOVER = {
-  ...STYLE_IMAGE,
-  transform: 'scale(1.2)'
-};
-
-const STYLE_PLUS_HOVER = {
-  marginTop: '1.5em',
-  color: SharedStyle.SECONDARY_COLOR.main,
-  fontSize: '2em',
-  opacity: '0.7',
-  width: '100%'
-};
-
-const STYLE_DESCRIPTION = {
-  display: 'block',
-  display: '-webkit-box',
-  height: '2em',
-  margin: '0 auto',
-  fontSize: '0.75em',
-  fontStyle: 'italic',
-  lineHeight: '1em',
-  WebkitLineClamp: '2',
-  WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-};
-
-const STYLE_TAGS = {
-  listStyle: 'none',
-  margin: '0px',
-  padding: '0px',
-  fontSize: '11px',
-  marginBottom: '3px'
-};
-
-const STYLE_TAG = {
-  display: 'inline-block',
-  background: '#337ab7',
-  color: SharedStyle.COLORS.white,
-  padding: '1px 4px',
-  marginRight: '3px',
-  borderRadius: '3px'
-};
-
-const STYLE_ASSIGN_TAG = {
-  display: 'inline-block',
-  background: '#33b768',
-  color: SharedStyle.COLORS.white,
-  padding: '1px 4px',
-  marginRight: '3px',
-  borderRadius: '3px'
-};
-
-export default class CatalogItem extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hover: false, snackBarMessage: '', isSnackBarOpen: '' };
-  }
-
-  select(element) {
-    sessionStorage.setItem('projectTitle', element.title);
-    this.context.projectActions.rename(element.title);
-    sessionStorage.setItem('projectId', element.id);
-    sessionStorage.setItem('email', element.email);
-    const _self = this;
-    if (MODE === 'production') {
-      s3.getObject(
-        {
-          Bucket: process.env.REACT_APP_AWS_BUCKET_NAME,
-          Key: element.data
-        },
-        function (err, data) {
-          if (err !== null) {
-            console.log(err);
-            this.setState({
-              snackBarMessage: 'Something went wrong.',
-              isSnackBarOpen: true
-            });
-            return;
-          }
-          var fileData = data.Body.toString('utf-8');
-          const jsonData = JSON.parse(fileData);
-          _self.context.projectActions.loadProject(
-            jsonData,
-            this.props.categoryData
-          );
-        }
-      );
-    } else {
-      axios
-        .post(`${API_SERVER_URL}/api/project/loadPidData`, {
-          pid: element.id
-        })
-        .then(response => {
-          const jsonData = JSON.parse(response.data.data);
-          this.context.projectActions.loadProject(
-            jsonData,
-            this.props.categoryData
-          );
-        });
-    }
-    this.context.projectActions.setMode(MODE_IDLE);
-    const visualizerName = sessionStorage.getItem('visualizerName');
-    browserHistory.push({
-      pathname: `/${visualizerName}/project/${
-        element.role
-      }/${sessionStorage.getItem('jwt_access_token')}/${element.id}`
-    });
-  }
-
-  render() {
-    let element = this.props.element;
-    let hover = this.state.hover;
-    return (
-      <div
-        style={hover ? STYLE_BOX_HOVER : STYLE_BOX}
-        onClick={e => {
-          e.preventDefault(), this.select(element);
-        }}
-        onMouseEnter={e => this.setState({ hover: true })}
-        onMouseLeave={e => this.setState({ hover: false })}
-      >
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <b style={STYLE_TITLE}>{element.title}</b>
-        <div style={STYLE_IMAGE_CONTAINER}>
-          <div style={{ ...STYLE_IMAGE }}>
-            {hover ? <IconAdd style={STYLE_PLUS_HOVER} /> : null}
-          </div>
-        </div>
-        <ul style={STYLE_TAGS}>
-          {element.is_assistance_requested === 1 ? (
-            <li style={STYLE_ASSIGN_TAG}>Assign</li>
-          ) : null}
-          <li style={STYLE_TAG}>{element.saved_at}</li>
-        </ul>
-        {/* <div style={STYLE_DESCRIPTION}>{element.info.description}</div> */}
-      </div>
-    );
-  }
-}
-
-CatalogItem.propTypes = {
-  element: PropTypes.object.isRequired
-};
-
-CatalogItem.contextTypes = {
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};

package/src/components/catalog-view/catalog-list.jsx

@@ -1,173 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import CatalogItem from './catalog-item';
-import CatalogBreadcrumb from './catalog-breadcrumb';
-import CatalogPageItem from './catalog-page-item';
-import CatalogTurnBackPageItem from './catalog-turn-back-page-item';
-import ContentContainer from '../style/content-container';
-import { API_SERVER_URL } from '../../constants';
-import ContentTitle from '../style/content-title';
-import * as SharedStyle from '../../shared-style';
-import axios from 'axios';
-import SnackBar from '../atoms/Snackbar/index';
-
-const containerStyle = {
-  position: 'fixed',
-  width: 'calc( 100% - 94px)',
-  height: 'calc( 100% - 71px)',
-  backgroundColor: '#FFF',
-  padding: '1em',
-  left: 90,
-  top: 70,
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  zIndex: 10
-};
-
-const itemsStyle = {
-  display: 'flex',
-  gridTemplateColumns: 'repeat(auto-fit, minmax(14em, 1fr))',
-  gridGap: '10px',
-  marginTop: '1em'
-};
-
-const searchContainer = {
-  width: '100%',
-  height: '3em',
-  padding: '0.625em',
-  background: '#f7f7f9',
-  border: '1px solid #e1e1e8',
-  cursor: 'pointer',
-  position: 'relative',
-  boxShadow: '0 1px 6px 0 rgba(0, 0, 0, 0.11), 0 1px 4px 0 rgba(0, 0, 0, 0.11)',
-  borderRadius: '2px',
-  transition: 'all .2s ease-in-out',
-  WebkitTransition: 'all .2s ease-in-out',
-  marginBottom: '1em'
-};
-
-const searchText = {
-  width: '8em',
-  display: 'inline-block'
-};
-
-const searchInput = {
-  width: 'calc( 100% - 10em )',
-  height: '2em',
-  margin: '0',
-  padding: '0 1em',
-  border: '1px solid #EEE'
-};
-
-const historyContainer = {
-  ...searchContainer,
-  padding: '0.2em 0.625em'
-};
-
-const historyElementStyle = {
-  width: 'auto',
-  height: '2em',
-  lineHeight: '2em',
-  textAlign: 'center',
-  borderRadius: '1em',
-  display: 'inline-block',
-  cursor: 'pointer',
-  backgroundColor: SharedStyle.PRIMARY_COLOR.alt,
-  color: SharedStyle.PRIMARY_COLOR.text_main,
-  textTransform: 'capitalize',
-  margin: '0.25em',
-  padding: '0 1em'
-};
-
-export default class CatalogList extends Component {
-  constructor(props, context) {
-    super(props);
-
-    this.state = {
-      elementsToDisplay: [],
-      matchString: '',
-      matchedElements: [],
-      snackBarMessage: '',
-      isSnackBarOpen: false
-    };
-  }
-
-  componentDidMount() {
-    const self = this;
-    const user = self.props.param.params;
-    axios
-      .post(`${API_SERVER_URL}/api/project/loadProject`, {
-        userrole: user.role,
-        access_token: user.token,
-        env: 'front'
-      })
-      .then(response => {
-        const { success } = response.data;
-        if (success === true) {
-          const { projectElement } = response.data;
-          self.setState({ elementsToDisplay: projectElement });
-        } else
-          this.setState({
-            snackBarMessage: 'Loading project failed.',
-            isSnackBarOpen: true
-          });
-      });
-  }
-
-  render() {
-    let turnBackButton = <CatalogTurnBackPageItem key="back" />;
-    return (
-      <ContentContainer
-        width={this.props.width}
-        height={this.props.height}
-        style={{ ...containerStyle, ...this.props.style }}
-      >
-        <SnackBar
-          isOpen={this.state.isSnackBarOpen}
-          message={this.state.snackBarMessage}
-          handleClose={() =>
-            this.setState({ isSnackBarOpen: false, snackBarMessage: '' })
-          }
-        />
-        <ContentTitle>My Project Library</ContentTitle>
-        <div style={itemsStyle}>
-          {this.state.matchString === ''
-            ? [
-                turnBackButton,
-                // categoriesToDisplay.map(cat => <CatalogPageItem key={cat.name} page={cat} oldPage={currentCategory}/>),
-                this.state.elementsToDisplay.map(elem => (
-                  <CatalogItem
-                    key={elem.id}
-                    element={elem}
-                    categoryData={this.props.categoryData}
-                  />
-                ))
-              ]
-            : this.state.matchedElements.map(elem => (
-                <CatalogItem
-                  key={elem.id}
-                  element={elem}
-                  categoryData={this.props.categoryData}
-                />
-              ))}
-        </div>
-      </ContentContainer>
-    );
-  }
-}
-
-CatalogList.propTypes = {
-  state: PropTypes.object.isRequired,
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  style: PropTypes.object
-};
-
-CatalogList.contextTypes = {
-  catalog: PropTypes.object.isRequired,
-  translator: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  linesActions: PropTypes.object.isRequired,
-  holesActions: PropTypes.object.isRequired,
-  projectActions: PropTypes.object.isRequired
-};