kitchen-simulator 5.0.0-test.18 → 5.0.0-test.19

package/src/components/toolbar/popup/floorplan/choose-floor/oRectangle.json

@@ -0,0 +1,220 @@
+{
+  "unit": "cm",
+  "rulerUnit": "in",
+  "layers": {
+    "layer-1": {
+      "id": "layer-1",
+      "altitude": 0,
+      "order": 0,
+      "opacity": 1,
+      "name": "default",
+      "visible": true,
+      "vertices": {
+        "bHaJu1vDh-": {
+          "id": "bHaJu1vDh-",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1159.5959595959598,
+          "y": 653.030303030303,
+          "lines": ["qu-iklVvD"],
+          "areas": ["nZUk04rvLm"]
+        },
+        "i6cQughFHL": {
+          "id": "i6cQughFHL",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1159.5959595959598,
+          "y": 1306.5656565656566,
+          "lines": ["Fqjsu2nx-", "qu-iklVvD"],
+          "areas": ["nZUk04rvLm"]
+        },
+        "xf5Pbjbn9O": {
+          "id": "xf5Pbjbn9O",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1885.858585858586,
+          "y": 1306.5656565656566,
+          "lines": ["Fqjsu2nx-", "gh-FNJ1s5"],
+          "areas": ["nZUk04rvLm"]
+        },
+        "tzGSabFPP7": {
+          "id": "tzGSabFPP7",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1885.858585858586,
+          "y": 653.030303030303,
+          "lines": ["gh-FNJ1s5"],
+          "areas": ["nZUk04rvLm"]
+        }
+      },
+      "lines": {
+        "qu-iklVvD": {
+          "id": "qu-iklVvD",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": { "textureB": "plaster", "textureA": "plaster" },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165225,
+          "visible": true,
+          "vertices": ["bHaJu1vDh-", "i6cQughFHL"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        },
+        "Fqjsu2nx-": {
+          "id": "Fqjsu2nx-",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": { "textureB": "plaster", "textureA": "plaster" },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165205,
+          "visible": true,
+          "vertices": ["i6cQughFHL", "xf5Pbjbn9O"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        },
+        "gh-FNJ1s5": {
+          "id": "gh-FNJ1s5",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": {
+            "textureB": "plaster",
+            "width": { "_unit": "in", "length": null },
+            "height": { "_unit": "in", "length": null },
+            "depth": { "_unit": "in", "length": null },
+            "textureA": "plaster"
+          },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165215,
+          "visible": true,
+          "vertices": ["xf5Pbjbn9O", "tzGSabFPP7"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        }
+      },
+      "holes": {},
+      "areas": {
+        "nZUk04rvLm": {
+          "id": "nZUk04rvLm",
+          "type": "area",
+          "prototype": "areas",
+          "name": "Area",
+          "misc": {},
+          "selected": false,
+          "properties": {
+            "patternColor": "rgba(175,175,175)",
+            "thickness": { "length": 0 },
+            "texture": "parquet",
+            "width": { "_unit": "in", "length": null },
+            "height": { "_unit": "in", "length": null },
+            "depth": { "_unit": "in", "length": null }
+          },
+          "style": "",
+          "category": "",
+          "visible": true,
+          "vertices": ["bHaJu1vDh-", "tzGSabFPP7", "xf5Pbjbn9O", "i6cQughFHL"],
+          "holes": [],
+          "texture": { "roughness": 0.9, "metalness": 0, "uri": "" }
+        }
+      },
+      "items": {},
+      "selected": {
+        "vertices": [],
+        "lines": [],
+        "holes": [],
+        "areas": [],
+        "items": []
+      },
+      "dcmmodel": false,
+      "lrmmodel": false,
+      "fbmmodel": false,
+      "counterTop": {
+        "uri": "https://kc-assets-us.s3.amazonaws.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg"
+      },
+      "wallColor": {},
+      "floorStyle": {
+        "uri": "https://kc-assets-us.s3.amazonaws.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg"
+      },
+      "doorHandle": "",
+      "backsplash": { "roughness": 0.2, "metalness": 0.1, "uri": "" },
+      "backsplashApplied": false,
+      "ceilHeight": 96,
+      "unit": "in"
+    }
+  },
+  "grids": {
+    "h1": {
+      "id": "h1",
+      "type": "horizontal-streak",
+      "properties": {
+        "step": 30.48,
+        "colors": ["#ddd", "#ddd", "#ddd", "#ddd", "#ddd"]
+      }
+    },
+    "v1": {
+      "id": "v1",
+      "type": "vertical-streak",
+      "properties": {
+        "step": 30.48,
+        "colors": ["#ddd", "#ddd", "#ddd", "#ddd", "#ddd"]
+      }
+    }
+  },
+  "selectedLayer": "layer-1",
+  "groups": {},
+  "width": 3000,
+  "height": 2000,
+  "meta": {},
+  "guides": { "horizontal": {}, "vertical": {}, "circular": {} },
+  "title": "",
+  "currentProjectID": null,
+  "showfg": true,
+  "showWallLengthMeasure": 1,
+  "showBaseCabinetMeasure": 1,
+  "showWallCabinetMeasure": 1,
+  "showWindowDoorMeasure": 1,
+  "isLoadingCabinet": false,
+  "loadFlag": false
+}

package/src/components/toolbar/popup/floorplan/choose-floor/rectangle.json

@@ -0,0 +1,238 @@
+{
+  "unit": "cm",
+  "rulerUnit": "in",
+  "layers": {
+    "layer-1": {
+      "id": "layer-1",
+      "altitude": 0,
+      "order": 0,
+      "opacity": 1,
+      "name": "default",
+      "visible": true,
+      "vertices": {
+        "7CRjeaRZhF": {
+          "id": "7CRjeaRZhF",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1291.05,
+          "y": 1175.29,
+          "lines": ["STZ63BwOf", "eyC5vDys2"],
+          "areas": ["bQRvW_9KxV"]
+        },
+        "vlppTvk-ik": {
+          "id": "vlppTvk-ik",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1778.73,
+          "y": 1175.29,
+          "lines": ["STZ63BwOf", "BvCbJyf6O"],
+          "areas": ["bQRvW_9KxV"]
+        },
+        "KYo9KB-NX8": {
+          "id": "KYo9KB-NX8",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1778.73,
+          "y": 809.53,
+          "lines": ["BvCbJyf6O", "uPW70hewY"],
+          "areas": ["bQRvW_9KxV"]
+        },
+        "Pa4Hy3Z26ga": {
+          "id": "Pa4Hy3Z26ga",
+          "type": "",
+          "prototype": "vertices",
+          "name": "Vertex",
+          "misc": {},
+          "selected": false,
+          "properties": {},
+          "style": "",
+          "category": "",
+          "visible": true,
+          "x": 1291.05,
+          "y": 809.53,
+          "lines": ["eyC5vDys2", "uPW70hewY"],
+          "areas": ["bQRvW_9KxV"]
+        }
+      },
+      "lines": {
+        "STZ63BwOf": {
+          "id": "STZ63BwOf",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": { "textureB": "plaster", "textureA": "plaster" },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165235,
+          "visible": true,
+          "vertices": ["7CRjeaRZhF", "vlppTvk-ik"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        },
+        "eyC5vDys2": {
+          "id": "eyC5vDys2",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": { "textureB": "plaster", "textureA": "plaster" },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165265,
+          "visible": true,
+          "vertices": ["Pa4Hy3Z26ga", "7CRjeaRZhF"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        },
+        "BvCbJyf6O": {
+          "id": "BvCbJyf6O",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": { "textureB": "plaster", "textureA": "plaster" },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165245,
+          "visible": true,
+          "vertices": ["vlppTvk-ik", "KYo9KB-NX8"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        },
+        "uPW70hewY": {
+          "id": "uPW70hewY",
+          "type": "wall",
+          "prototype": "lines",
+          "name": "Wall",
+          "misc": {},
+          "selected": false,
+          "properties": {
+            "textureB": "plaster",
+            "width": { "_unit": "in", "length": null },
+            "height": { "_unit": "in", "length": null },
+            "depth": { "_unit": "in", "length": null },
+            "textureA": "plaster"
+          },
+          "style": "",
+          "category": "",
+          "createdDateTime": 1693373165255,
+          "visible": true,
+          "vertices": ["KYo9KB-NX8", "Pa4Hy3Z26ga"],
+          "holes": [],
+          "focus": false,
+          "wallColor": "#dddddd"
+        }
+      },
+      "holes": {},
+      "areas": {
+        "bQRvW_9KxV": {
+          "id": "bQRvW_9KxV",
+          "type": "area",
+          "prototype": "areas",
+          "name": "Area",
+          "misc": {},
+          "selected": false,
+          "properties": {
+            "patternColor": "rgba(175,175,175)",
+            "thickness": { "length": 0 },
+            "texture": "parquet"
+          },
+          "style": "",
+          "category": "",
+          "visible": true,
+          "vertices": ["7CRjeaRZhF", "Pa4Hy3Z26ga", "KYo9KB-NX8", "vlppTvk-ik"],
+          "holes": [],
+          "texture": {
+            "roughness": 0.9,
+            "metalness": 0,
+            "uri": "https://kc-assets-us.s3.amazonaws.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg"
+          }
+        }
+      },
+      "items": {},
+      "selected": {
+        "vertices": [],
+        "lines": [],
+        "holes": [],
+        "areas": [],
+        "items": []
+      },
+      "dcmmodel": false,
+      "lrmmodel": false,
+      "fbmmodel": false,
+      "counterTop": {
+        "uri": "https://kc-assets-us.s3.amazonaws.com/uploads/CountTop/202105074107_5/texture/Unique_Calcatta_texture.jpg"
+      },
+      "wallColor": {},
+      "floorStyle": {
+        "uri": "https://kc-assets-us.s3.amazonaws.com/uploads/CountTop/202203162950_2/texture/oak-barcelona-s.jpg"
+      },
+      "doorHandle": "",
+      "backsplash": { "roughness": 0.2, "metalness": 0.1, "uri": "" },
+      "backsplashApplied": false,
+      "ceilHeight": 96,
+      "unit": "in"
+    }
+  },
+  "grids": {
+    "h1": {
+      "id": "h1",
+      "type": "horizontal-streak",
+      "properties": {
+        "step": 30.48,
+        "colors": ["#ddd", "#ddd", "#ddd", "#ddd", "#ddd"]
+      }
+    },
+    "v1": {
+      "id": "v1",
+      "type": "vertical-streak",
+      "properties": {
+        "step": 30.48,
+        "colors": ["#ddd", "#ddd", "#ddd", "#ddd", "#ddd"]
+      }
+    }
+  },
+  "selectedLayer": "layer-1",
+  "groups": {},
+  "width": 3000,
+  "height": 2000,
+  "meta": {},
+  "guides": { "horizontal": {}, "vertical": {}, "circular": {} },
+  "title": "",
+  "currentProjectID": null,
+  "showfg": true,
+  "showWallLengthMeasure": 1,
+  "showBaseCabinetMeasure": 1,
+  "showWallCabinetMeasure": 1,
+  "showWindowDoorMeasure": 1,
+  "isLoadingCabinet": false,
+  "loadFlag": false
+}

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>
+  );
+};