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

package/src/components/toolbar/popup/finishingtouch/product/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+
+import * as S from '../../styles';
+
+import Appliance from '../../product/appliance';
+import {
+  API_SERVER,
+  MODE_IDLE,
+  MODE_3D_VIEW,
+  MODE_3D_FIRST_PERSON,
+  MODE_VIEWING_CATALOG,
+  MODE_CONFIGURING_PROJECT,
+  MODE_IDLE_3D,
+  MODE_ROTATING_ITEM_3D,
+  MODE_DRAGGING_ITEM_3D,
+  MODE_2D_PAN,
+  MODE_DRAWING_ITEM,
+  MODE_DRAWING_ITEM_3D
+} from '../../../../../constants';
+
+export const FinishingProduct = ({
+  props,
+  mode,
+  chooseAction,
+  dataSource,
+  isExpand,
+  applyMaterial
+}) => {
+  let products = [];
+
+  if (dataSource.length > 0) {
+    for (let i = 0; i < dataSource.length; i++) {
+      products.push(
+        <S.ItemWrapper key={i.toString()} style={{ justifyContent: 'center' }}>
+          <Appliance
+            name={'finishing'}
+            onClick={() => {
+              chooseAction(dataSource[i]);
+              props.projectActions.unselectAll();
+              if (
+                dataSource[i].category === 'lighting' ||
+                dataSource[i].category === 'furnishing'
+              ) {
+                props.itemsActions.updatePopupOpen(2);
+                if (
+                  dataSource[i].category === 'lighting' &&
+                  [
+                    MODE_IDLE_3D,
+                    MODE_DRAWING_ITEM_3D,
+                    MODE_DRAGGING_ITEM_3D,
+                    MODE_ROTATING_ITEM_3D
+                  ].includes(mode)
+                )
+                  // props.itemsActions.selectToolDrawingItem(dataSource[i].name);
+                  props.itemsActions.selectToolDrawingItem3D(
+                    dataSource[i].name
+                  );
+                else {
+                  [
+                    MODE_IDLE_3D,
+                    MODE_DRAWING_ITEM_3D,
+                    MODE_DRAGGING_ITEM_3D,
+                    MODE_ROTATING_ITEM_3D
+                  ].includes(mode)
+                    ? props.itemsActions.selectToolDrawingItem3D(
+                        dataSource[i].name
+                      )
+                    : props.itemsActions.selectToolDrawingItem(
+                        dataSource[i].name
+                      );
+                }
+                props.projectActions.pushLastSelectedCatalogElementToHistory(
+                  props.catalog.elements[dataSource[i].name]
+                );
+                if (document.getElementsByClassName('popup-content').length > 0)
+                  document.getElementsByClassName(
+                    'popup-content'
+                  )[0].style.display = 'none';
+              }
+            }}
+            selected={dataSource[i].selected ? dataSource[i].selected : null}
+            url={
+              dataSource[i].category != undefined &&
+              dataSource[i].category !== 'modelling' &&
+              dataSource[i].category !== 'floor_style' &&
+              dataSource[i].category !== 'lighting' &&
+              dataSource[i].category !== 'counter_top' &&
+              dataSource[i].category !== 'backsplash' &&
+              dataSource[i].category !== 'furnishing'
+                ? dataSource[i].color
+                : dataSource[i].thumbnail
+            }
+            title={dataSource[i].name}
+            category={
+              dataSource[i].category !== 'floor_style' ||
+              dataSource[i].category !== 'backsplash' ||
+              dataSource[i].category !== 'counter_top'
+                ? ''
+                : dataSource[i].category
+            }
+          />
+        </S.ItemWrapper>
+      );
+    }
+  }
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  return (
+    <S.ProductsContentWrapper
+      style={{ width: 220, height: isExpand ? height : nonHeight }}
+    >
+      {products}
+    </S.ProductsContentWrapper>
+  );
+};

package/src/components/toolbar/popup/floorplan/choose-floor/confirm-popup.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import * as S from './styles';
+import * as PS from '../../styles';
+import { FaTimes } from 'react-icons/fa';
+
+class ConfirmPopup extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  _submit() {
+    this.props.loadProject();
+    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 }}>
+            All items will be removed from the canvas.
+            <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() || this.props.closeAction();
+              }}
+            >
+              <img
+                width={'80px'}
+                style={{ float: 'right' }}
+                src={'/assets/img/svg/toolbar/use_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/cancel_button.svg'}
+              />
+              <S.ButtonTitle2>{'No'}</S.ButtonTitle2>
+            </div>
+          </div>
+        </S.Div>
+      </div>
+    );
+  }
+}
+
+export default ConfirmPopup;

package/src/components/toolbar/popup/floorplan/choose-floor/index.jsx

@@ -0,0 +1,254 @@
+import React, { useState } from 'react';
+import * as S from '../../styles';
+import * as MS from './styles';
+import FloorProduct from '../../product/floorproduct';
+import * as rectangleData from './rectangle.json';
+import * as lShaped from './lShaped.json';
+import * as oRectangle from './oRectangle.json';
+import * as longNarrow from './longNarrow.json';
+import ConfirmPopup from './confirm-popup';
+import { ARRAY_3D_MODES } from '../../../../../constants';
+
+export const FloorChooseProduct = ({
+  drawAction,
+  props,
+  dataSource,
+  isExpand,
+  closeAction,
+  mode
+}) => {
+  let [isPopupOpen, setPopupOpen] = useState(false);
+  let [selectedProject, setSelectedProject] = useState();
+
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  let select = element => {
+    switch (element.prototype) {
+      case 'lines':
+        props.linesActions.selectToolDrawingLine(element.name);
+        break;
+      case 'items':
+        ARRAY_3D_MODES.includes(mode)
+          ? props.itemsActions.selectToolDrawingItem3D(element.name)
+          : props.itemsActions.selectToolDrawingItem(element.name);
+        break;
+      case 'holes':
+        ARRAY_3D_MODES.includes(mode)
+          ? props.holesActions.selectToolDrawingHole3D(element.name)
+          : props.holesActions.selectToolDrawingHole(element.name);
+        break;
+    }
+    props.holesActions.updatePopupOpen(4);
+    props.projectActions.pushLastSelectedCatalogElementToHistory(element);
+    closeAction && closeAction();
+  };
+
+  let isProjectEmpty = scene => {
+    let { layers, selectedLayer } = scene;
+    let layer = layers.get(selectedLayer);
+    return (
+      layer.areas.size +
+        layer.lines.size +
+        layer.holes.size +
+        layer.items.size ===
+      0
+    );
+  };
+
+  let loadProjectFromData = data => event => {
+    event.preventDefault();
+
+    if (isProjectEmpty(props.state.scene)) {
+      loadProject(data);
+      closeAction && closeAction();
+    } else {
+      setSelectedProject(data);
+      setPopupOpen(true);
+    }
+  };
+
+  let loadProjectFromRetangleLineFile = loadProjectFromData(rectangleData);
+
+  let loadProjectFromlShapedLineFile = loadProjectFromData(lShaped);
+
+  let loadProjectFromoRectangleLineFile = loadProjectFromData(oRectangle);
+
+  let loadProjectFromlongNarrowLineFile = loadProjectFromData(longNarrow);
+
+  let handleConfirmLoad = value => {
+    setPopupOpen(value);
+  };
+
+  let loadProject = data => {
+    props.projectActions.loadProject(data || selectedProject);
+    document.getElementsByClassName('popup-content')[0].style.display = 'none';
+  };
+
+  let result = <div></div>;
+  //Drawer Custom Floor
+  if (dataSource === -1) {
+    result = (
+      <section>
+        <div style={{ padding: '12px 20px', fontSize: 11 }}>
+          <p style={{ color: '#e2e2e2' }}>
+            Using your mouse and the{' '}
+            <span style={{ color: 'white' }}>
+              <strong>Object Properties</strong>
+            </span>{' '}
+            Window you can draw your custom space to meet your exact project
+            requirements.
+          </p>
+          <p style={{ color: '#e2e2e2' }}>
+            To get professional help, click on the{' '}
+            <span style={{ color: 'white' }}>
+              <strong>Designer Assistance</strong>
+            </span>{' '}
+            button
+          </p>
+        </div>
+        <MS.Control
+          onClick={() => {
+            if (document.getElementsByClassName('popup-content').length > 0)
+              document.getElementsByClassName(
+                'popup-content'
+              )[0].style.display = 'none';
+            drawAction();
+          }}
+        >
+          <MS.ControlIcon>
+            <img
+              width={'160px'}
+              src={'/assets/img/svg/toolbar/get_started_button.svg'}
+            />
+            <S.ButtonTitle style={{ fontSize: 13 }}>
+              {' '}
+              Get Started{' '}
+            </S.ButtonTitle>
+          </MS.ControlIcon>
+        </MS.Control>
+      </section>
+    );
+  }
+  // Predefined Room Layout
+  else if (dataSource === -2) {
+    result = (
+      <section>
+        <ConfirmPopup
+          visible={isPopupOpen}
+          closeAction={closeAction && closeAction}
+          handleConfirmLoad={handleConfirmLoad}
+          loadProject={loadProject}
+        />
+        <S.ProductsRow
+          style={{ width: '100%', justifyContent: 'space-between' }}
+        >
+          <section
+            style={{
+              display: 'flex',
+              justifyContent: 'space-evenly',
+              borderBottom: '2px solid #2f2f2fb3',
+              width: '100%',
+              backgroundColor: '#3e3e3f'
+            }}
+          >
+            <MS.LineWrapper
+              onClick={loadProjectFromRetangleLineFile}
+              style={{ padding: '12px 11px 8px' }}
+            >
+              <div style={{ width: '50px', display: 'grid' }}>
+                <img
+                  width={40}
+                  src={'/assets/img/svg/toolbar/predefined_room_rectangle.svg'}
+                />
+                <span style={{ marginTop: '7px', marginBottom: '9px' }}>
+                  Square
+                </span>
+              </div>
+            </MS.LineWrapper>
+            <MS.LineWrapper
+              onClick={loadProjectFromlShapedLineFile}
+              style={{ padding: '12px 11px 8px' }}
+            >
+              <div style={{ width: '50px', display: 'grid' }}>
+                <img
+                  width={40}
+                  src={'/assets/img/svg/toolbar/predefined_room_l_shaped.svg'}
+                />
+                <span style={{ marginTop: '7px', marginBottom: '9px' }}>
+                  L Shaped
+                </span>
+              </div>
+            </MS.LineWrapper>
+          </section>
+          <section
+            style={{
+              display: 'flex',
+              justifyContent: 'space-evenly',
+              borderBottom: '2px solid #2f2f2fb3',
+              width: '100%',
+              backgroundColor: '#3e3e3f'
+            }}
+          >
+            <MS.LineWrapper
+              onClick={loadProjectFromoRectangleLineFile}
+              style={{ padding: '12px 11px 8px' }}
+            >
+              <div style={{ width: '50px', display: 'grid' }}>
+                <img
+                  width={40}
+                  src={
+                    '/assets/img/svg/toolbar/predefined_room_open_rectangle_2.svg'
+                  }
+                />
+                <span style={{ marginTop: '7px', marginBottom: '9px' }}>
+                  Open Square
+                </span>
+              </div>
+            </MS.LineWrapper>
+            <MS.LineWrapper
+              onClick={loadProjectFromlongNarrowLineFile}
+              style={{ padding: '12px 11px 8px' }}
+            >
+              <div style={{ width: '50px', display: 'grid' }}>
+                <img
+                  width={40}
+                  height={40}
+                  src={
+                    '/assets/img/svg/toolbar/predefined_room_long_narrow.svg'
+                  }
+                />
+                <span style={{ marginTop: '7px', marginBottom: '9px' }}>
+                  Long & Narrow
+                </span>
+              </div>
+            </MS.LineWrapper>
+          </section>
+        </S.ProductsRow>
+      </section>
+    );
+  }
+  //Room Elements
+  else {
+    result = [];
+    dataSource.forEach((el, key) => {
+      result.push(
+        <S.ItemWrapper key={el.name} style={{ justifyContent: 'center' }}>
+          <FloorProduct
+            url={el.info.image}
+            title={el.info.title}
+            onClick={() => select(el)}
+          />
+        </S.ItemWrapper>
+      );
+    });
+  }
+
+  return (
+    <S.ProductsContentWrapper
+      style={{ width: 250, height: isExpand ? height : nonHeight }}
+    >
+      {result}
+    </S.ProductsContentWrapper>
+  );
+};

package/src/components/toolbar/popup/floorplan/choose-floor/styles.js

@@ -0,0 +1,86 @@
+import styled from 'styled-components';
+import * as SharedStyle from '../../../../../shared-style';
+
+export const Control = styled.div`
+  display: flex;
+  justify-content: center;
+`;
+
+export const ControlIcon = styled.div`
+  margin-top: 9px;
+  cursor: pointer;
+  position: relative;
+  :hover {
+    img {
+      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+        0px 6px 10px 0px rgba(0, 0, 0, 0.39),
+        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+    }
+  }
+  :active {
+    img {
+      box-shadow: none !important;
+    }
+  }
+`;
+
+export const LineWrapper = styled.div`
+  color: #fff;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  span {
+    @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;
+    }
+  }
+  :hover {
+    span {
+      color: ${SharedStyle.SECONDARY_COLOR.main};
+    }
+  }
+`;
+
+export const Div = styled.div`
+  position: fixed;
+  top: calc(50% - 150px);
+  left: calc(50% - 200px);
+  z-index: 200;
+  background: #2b2b2ddf;
+  align-items: space-around;
+  justify-content: center;
+  color: white;
+  width: 350px;
+  height: 140px;
+`;
+
+export const ButtonTitle1 = styled.span`
+  position: absolute;
+  padding-left: 20px;
+  margin-top: 3px;
+  font-size: 12px;
+  cursor: pointer;
+`;
+
+export const ButtonTitle2 = styled.span`
+  position: absolute;
+  padding-left: 20px;
+  margin-top: 3px;
+  font-size: 12px;
+  cursor: pointer;
+`;

package/src/components/toolbar/popup/floorplan/floor-category/index.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import ToolbarPanel from '../../../../sidebar/toolbar-panel';
+import * as S from '../../styles';
+
+import Product from '../../product';
+import Floor from '../../product/floor';
+import * as testJsonData from '../../../../../../../../../test/*.json';
+
+export const FloorCategory = ({
+  action,
+  props,
+  dataSource,
+  isExpand,
+  closeAction
+}) => {
+  let miHeight = 0;
+  let nonHeight = 495 - miHeight + 'px';
+  let height = window.innerHeight * 0.6 - miHeight + 'px';
+  var result = [];
+  dataSource.map(el => {
+    result.push(
+      <Product
+        key={el.name}
+        url={
+          el.name === 'Windows'
+            ? '/assets/img/svg/toolbar/add_items_windows.svg'
+            : '/assets/img/svg/toolbar/add_items_doors.svg'
+        }
+        title={el.name}
+        onClick={() => {
+          action(el.name);
+        }}
+      />
+    );
+  });
+  let loadProject = data => {
+    props.projectActions.loadProject(JSON.parse(data.project_data));
+    document.getElementsByClassName('popup-content')[0].style.display = 'none';
+  };
+  let testData = [];
+  if (process.env.MODE === 'staging') {
+    for (let testJson in testJsonData) {
+      testData.push(
+        <S.testJsonItemWrapper
+          key={testJson}
+          style={{ justifyContent: 'center' }}
+          onClick={event => {
+            if (
+              window.confirm(`Do you really load ${testJson}.json for KC test?`)
+            ) {
+              loadProject(testJsonData[testJson]);
+            }
+          }}
+        >
+          {testJson}
+        </S.testJsonItemWrapper>
+      );
+    }
+  }
+  return (
+    <S.CategoryContentWrapper style={{ height: isExpand ? height : nonHeight }}>
+      <ToolbarPanel
+        opened
+        onClose={() => {}}
+        onOpen={() => {}}
+        isUrl={false}
+        name={'Floor Space'}
+        url={null}
+      >
+        <Floor
+          url={'/assets/img/svg/toolbar/draw_custom_floor.svg'}
+          title={'Draw Custom Floor'}
+          onClick={() => {
+            action(-1);
+          }}
+        ></Floor>
+        <Floor
+          url={'/assets/img/svg/toolbar/predefined_room_layout.svg'}
+          title={'Predefined Room Layout'}
+          onClick={() => {
+            action(-2);
+          }}
+        ></Floor>
+      </ToolbarPanel>
+      <ToolbarPanel
+        opened
+        onClose={() => {}}
+        onOpen={() => {}}
+        isUrl={false}
+        name={'Room Elements'}
+        url={null}
+      >
+        {result}
+      </ToolbarPanel>
+      {process.env.MODE === 'staging' && Object.keys(testJsonData).length && (
+        <ToolbarPanel
+          opened
+          onClose={() => {}}
+          onOpen={() => {}}
+          isUrl={false}
+          name={'Test JSONs'}
+          url={null}
+        >
+          {testData}
+        </ToolbarPanel>
+      )}
+    </S.CategoryContentWrapper>
+  );
+};