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

package/src/renderer.jsx

@@ -0,0 +1,466 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ContainerDimensions from 'react-container-dimensions';
+import Immutable, { Map } from 'immutable';
+import immutableDevtools from 'immutable-devtools';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import ReactGA from 'react-ga4';
+import { hotjar } from 'react-hotjar';
+import * as Sentry from '@sentry/react';
+import browserHistory from './@history.js';
+import * as history from 'history';
+import AppContext from './AppContext.js';
+import { HashRouter, Route, Router, Switch } from 'react-router-dom';
+import exporter from './catalog/utils/exporter';
+import axios from 'axios';
+import MyCatalog from './catalog/mycatalog';
+import Login from './components/login/Login.js';
+import Register from './components/login/Register.js';
+import {
+  API_SERVER_URL,
+  ERROR_DATABASE,
+  MODE,
+  NO_DATA_DATABASE,
+  TOE_KICK_MOLDING
+} from './constants.js'; // import { Progress } from 'antd';
+import ToolbarScreenshotButton from '../src/ui/toolbar-screenshot-button.jsx';
+import MobileDetect from 'mobile-detect';
+import * as zlib from 'browserify-zlib';
+import Buffer from 'buffer';
+import { getPathInfo, isEmpty } from './utils/helper.js';
+
+import {
+  KitchenConfigurator,
+  Models as PlannerModels,
+  Plugins as PlannerPlugins,
+  reducer as PlannerReducer
+} from './index'; //KitchenConfigurator
+import { newProject } from './actions/project-actions.js';
+import { SVGLoader } from 'three/examples/jsm/loaders/SVGLoader';
+import CrossSignOn from './CrossSignOn.jsx';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
+import {
+  render2DItem,
+  render3DApplianceItem,
+  render3DItem,
+  render3DLightingItem
+} from './catalog/utils/item-loader'; // Axios config
+
+// Axios config
+axios.defaults.baseURL = API_SERVER_URL;
+
+const md = new MobileDetect(window.navigator.userAgent);
+const isMobile = md.mobile();
+if (isMobile === null) {
+  document.getElementById('app').style.display = 'block';
+} else alert('The Kitchen Design software is only available from Desktop use');
+//define state
+let AppState = Map({
+  KitchenConfigurator: new PlannerModels.State()
+});
+
+console.log('Version: 378.45-202509_DIY-364-mbox-crash');
+ReactGA.initialize([
+  {
+    trackingId: 'G-YK2JCC9F9G' // https://dev.addovisuals.com
+  },
+  {
+    trackingId: 'G-3Y44W0RY2E' // https://demo.kc.addovisuals.com/
+  },
+  {
+    trackingId: 'G-M2VD74KP44' // https://rtastore.diydesignspace.com/
+  }
+]);
+
+hotjar.initialize('3010506', '6');
+
+isProduction &&
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    environment: process.env.SENTRY_ENVIRONMENT
+  });
+
+//define reducer
+let reducer = (state, action) => {
+  state = state || AppState;
+  state = state.update('KitchenConfigurator', plannerState =>
+    PlannerReducer(plannerState, action)
+  );
+  return state;
+};
+
+let blackList =
+  isProduction === true
+    ? []
+    : ['UPDATE_MOUSE_COORDS', 'UPDATE_ZOOM_SCALE', 'UPDATE_2D_CAMERA'];
+
+if (!isProduction) {
+  console.info(
+    'Environment is in development and these actions will be blacklisted',
+    blackList
+  );
+  console.info('Enable Chrome custom formatter for Immutable pretty print');
+  immutableDevtools(Immutable);
+}
+
+//init store
+let store = createStore(
+  reducer,
+  null,
+  !isProduction && window.devToolsExtension
+    ? window.devToolsExtension({
+        features: {
+          pause: true, // start/pause recording of dispatched actions
+          lock: true, // lock/unlock dispatching actions and side effects
+          persist: true, // persist states on page reloading
+          export: true, // export history of actions in a file
+          import: 'custom', // import history of actions from a file
+          jump: true, // jump back and forth (time travelling)
+          skip: true, // skip (cancel) actions
+          reorder: true, // drag and drop actions in the history list
+          dispatch: true, // dispatch custom actions or action creators
+          test: true // generate tests for the selected actions
+        },
+        actionsBlacklist: blackList,
+        maxAge: 999999
+      })
+    : f => f
+);
+
+let plugins = [PlannerPlugins.Keyboard(), PlannerPlugins.ConsoleDebugger()];
+
+let toolbarButtons = [ToolbarScreenshotButton];
+
+let categoryData;
+if (isMobile === null) {
+  sessionStorage.setItem('visualizerName', getPathInfo(1));
+  axios
+    .get(`${API_SERVER_URL}/api/dealer/${getPathInfo(1)}/config`)
+    .then(async res => {
+      const { success, id, logoImg, companyUrl, config } = res.data;
+      let configdata = JSON.parse(config);
+
+      if (
+        success === false ||
+        (id === 0 && logoImg === '' && companyUrl === '')
+      ) {
+        alert('No Catalog');
+        return;
+      }
+      await axios
+        .post(
+          `${API_SERVER_URL}/api/planner/read/planner`,
+          {
+            type: MODE === 'staging' ? 2 : 1
+          },
+          {
+            responseType: 'arraybuffer'
+          }
+        )
+        .then(async response => {
+          const unzip_data = JSON.parse(
+            zlib.unzipSync(new Buffer.Buffer.from(response.data)).toString()
+          );
+          const { data, appliances, lighting, furnishing, success } =
+            unzip_data;
+          if (success === false) {
+            console.log(NO_DATA_DATABASE);
+          }
+          if (success === 'error') {
+            alert(ERROR_DATABASE);
+          }
+          await axios
+            .post(
+              `${API_SERVER_URL}/api/toolbar/getCategoryData`,
+              {
+                type: MODE === 'staging' ? 2 : 1
+              },
+              {
+                responseType: 'arraybuffer'
+              }
+            )
+            .then(response => {
+              categoryData = JSON.parse(
+                zlib.unzipSync(new Buffer.Buffer.from(response.data)).toString()
+              );
+              const { catalogs, colorAlias, subgroups } = categoryData.data;
+              let door_color_alias = [];
+              let subgroup_ids = catalogs
+                .filter(item => item.id == id)[0]
+                .manufacturer_subgroup_ids.split(',');
+              let door_color_alias_ids = [];
+              subgroups.forEach(subgroup => {
+                if (subgroup_ids.some(id => id == subgroup.id.toString())) {
+                  subgroup.door_color_alias_ids.split(',').forEach(item => {
+                    item != '' && door_color_alias_ids.push(item);
+                  });
+                }
+              });
+              colorAlias.forEach(
+                color =>
+                  door_color_alias_ids.some(id => id == color.id.toString()) &&
+                  door_color_alias.push(color)
+              );
+              const doorStyleData = categoryData.data.doorStyles.items;
+              categoryData.data.doorStyles.items = doorStyleData.treeStruct;
+              // construct a doorStyle variable
+              door_color_alias.forEach(dca => {
+                doorStyleData.doorColorData.forEach(dc => {
+                  // convert string into integer.
+                  dc.door_style_id = parseInt(dc.door_style_id);
+
+                  // find the original for the alias.
+                  if (dc.id !== dca.door_color_id) return;
+                  dc.name = dca.alias_name;
+                  dc.color_sku_alias = dca.sku_alias_name;
+
+                  // judge the door style of the current door color
+                  doorStyleData.treeStruct.forEach(el => {
+                    el.items.forEach(
+                      elem =>
+                        dc.door_style_id === elem.id &&
+                        (dc.door_style_name = elem.name)
+                    );
+                  });
+
+                  // convert string into array
+                  dca.alias_installation_type = isEmpty(
+                    dca.alias_installation_type
+                  )
+                    ? []
+                    : dca.alias_installation_type
+                        .split(',')
+                        .map(item => parseInt(item));
+
+                  // add door color to doorStyle variable according to 'alias_installation_type' of its alias
+                  categoryData.data.doorStyles.items.forEach(item => {
+                    if (
+                      dca.alias_installation_type.some(ait => ait === item.id)
+                    )
+                      item.items.forEach(ds => {
+                        if (ds.name === dc.door_style_name) ds.items.push(dc);
+                      });
+                  });
+                });
+              });
+
+              let molding = [];
+              let toeMoldingData = [];
+              let cabinets = categoryData.data.cabinets;
+              cabinets[cabinets.length - 1].items.forEach(index => {
+                if (index.name.toLowerCase().includes('molding')) {
+                  index.items.forEach(item => {
+                    molding.push(item);
+                  });
+                }
+                // store all toe kick molding templates
+                if (index.name.includes(TOE_KICK_MOLDING)) {
+                  index.items.forEach(item => {
+                    toeMoldingData.push(item);
+                  });
+                }
+              });
+              categoryData.data.toeMoldingData = toeMoldingData;
+              const promises = molding.map(child => {
+                return new Promise((resolve, reject) => {
+                  const url = child?.shape_svg;
+                  if (!url) {
+                    // Skip if no SVG URL available
+                    return resolve();
+                  }
+
+                  const loader = new SVGLoader();
+                  loader.load(
+                    url,
+                    data => {
+                      child.data = {
+                        paths: data.paths,
+                        svg_width: data.xml?.viewBox?.animVal?.width ?? 0,
+                        svg_height: data.xml?.viewBox?.animVal?.height ?? 0
+                      };
+                      resolve();
+                    },
+                    null,
+                    error => {
+                      console.error(error);
+                      reject(error);
+                    }
+                  );
+                });
+              });
+              return Promise.all(promises);
+            });
+
+          // Load Outline SVG Data
+          let svgLoadPromises = data.map(async item => {
+            if (item.outline) {
+              try {
+                const response = await fetch(item.outline, {
+                  cache: 'no-store'
+                });
+                const svgText = await response.text();
+
+                const loader = new SVGLoader();
+                const parsed = loader.parse(svgText);
+
+                if (isEmpty(parsed.paths)) return null;
+
+                return {
+                  paths: parsed.paths,
+                  svgWidth:
+                    parseFloat(parsed.xml.getAttribute('width')) ||
+                    parsed.xml.viewBox?.animVal?.width ||
+                    0,
+                  svgHeight:
+                    parseFloat(parsed.xml.getAttribute('height')) ||
+                    parsed.xml.viewBox?.animVal?.height ||
+                    0,
+                  reverse: !!parseFloat(parsed.xml.getAttribute('height'))
+                    ? false
+                    : true
+                };
+              } catch (err) {
+                console.error('Failed to load SVG:', item.outline, err);
+                return null;
+              }
+            } else {
+              return null;
+            }
+          });
+
+          let outlineSVGData = await Promise.all(svgLoadPromises);
+          // End: Load Outline SVG Data
+
+          const Item = [];
+
+          data.forEach((obj, index) => {
+            Item.push(
+              exporter({
+                ...obj,
+                type: 'cabinet',
+                outlineSVGData: outlineSVGData[index],
+                render2DItem,
+                render3DItem
+              })
+            );
+          });
+          appliances.forEach(obj => {
+            Item.push(
+              exporter({
+                ...obj,
+                render2DItem,
+                render3DItem: render3DApplianceItem,
+                type: 'appliance'
+              })
+            );
+          });
+          lighting.forEach(obj => {
+            Item.push(
+              exporter({
+                ...obj,
+                type: 'lighting',
+                render2DItem,
+                render3DItem: render3DLightingItem
+              })
+            );
+          });
+          furnishing.forEach(obj => {
+            Item.push(
+              exporter({
+                ...obj,
+                type: 'furnishing',
+                render2DItem,
+                render3DItem: render3DApplianceItem
+              })
+            );
+          });
+
+          for (let x in Item) MyCatalog.registerElement(Item[x]);
+
+          let MainComponent = (props, width, height) => (
+            <KitchenConfigurator
+              catalog={MyCatalog}
+              width={width}
+              height={height}
+              {...props}
+              logoImage={logoImg}
+              companyURL={companyUrl}
+              plugins={plugins}
+              toolbarButtons={toolbarButtons}
+              stateExtractor={state => state.get('KitchenConfigurator')}
+              categoryData={categoryData}
+              data={data}
+              configData={configdata}
+            />
+          );
+
+          const queryClient = new QueryClient();
+
+          const MainApp = props => (
+            <QueryClientProvider client={queryClient}>
+              <ReactQueryDevtools initialIsOpen={false} />
+              <AppContext.Provider>
+                <Provider store={store}>
+                  <ContainerDimensions>
+                    {({ width, height }) => (
+                      <HashRouter history={history.createHashHistory()}>
+                        <Router history={browserHistory}>
+                          <Switch>
+                            <Route
+                              exact
+                              path="/:visualizerName/"
+                              name="kc"
+                              render={routeProps => (
+                                <MainComponent
+                                  {...routeProps}
+                                  {...props}
+                                  width={width}
+                                  height={height}
+                                />
+                              )}
+                            />
+                            <Route path="/login" render={() => <Login />} />
+                            <Route
+                              path="/register"
+                              render={() => <Register />}
+                            />
+                            <Route
+                              path="/:visualizerName/project/:role/:token/:pid"
+                              render={routeProps => (
+                                <MainComponent
+                                  {...routeProps}
+                                  {...props}
+                                  width={width}
+                                  height={height}
+                                />
+                              )}
+                            />
+                          </Switch>
+                        </Router>
+                      </HashRouter>
+                    )}
+                  </ContainerDimensions>
+                </Provider>
+              </AppContext.Provider>
+            </QueryClientProvider>
+          );
+
+          setTimeout(() => {
+            ReactDOM.render(
+              <CrossSignOn App={MainApp} />,
+              document.getElementById('app')
+            );
+          }, 100);
+        })
+        .catch(err => {
+          alert(
+            'Something wrong happened. Do you want to clear the cache and restart the app?'
+          );
+          console.log('Failed to load Category Data in src/renderer.jsx', err);
+          sessionStorage.clear();
+          store.dispatch(newProject());
+        });
+    });
+}

package/src/actions/_export.js

@@ -1,35 +0,0 @@
-import * as projectActions from './project-actions';
-import * as viewer2DActions from './viewer2d-actions';
-import * as viewer3DActions from './viewer3d-actions';
-import * as linesActions from './lines-actions';
-import * as holesActions from './holes-actions';
-import * as sceneActions from './scene-actions';
-import * as verticesActions from './vertices-actions';
-import * as itemsActions from './items-actions';
-import * as areaActions from './area-actions';
-import * as groupsActions from './groups-actions';
-export {
-  projectActions,
-  viewer2DActions,
-  viewer3DActions,
-  linesActions,
-  holesActions,
-  sceneActions,
-  verticesActions,
-  itemsActions,
-  areaActions,
-  groupsActions
-};
-
-export default {
-  projectActions,
-  viewer2DActions,
-  viewer3DActions,
-  linesActions,
-  holesActions,
-  sceneActions,
-  verticesActions,
-  itemsActions,
-  areaActions,
-  groupsActions
-};

package/src/components/_export.js

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