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

package/src/KitchenConfiguratorApp.jsx

@@ -0,0 +1,443 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import * as Models from './models';
+import KitchenConfigurator from './KitchenConfigurator';
+import AppContext from './AppContext';
+import Catalog from './catalog/catalog';
+import { SVGLoader } from 'three/addons/loaders/SVGLoader';
+import { isEmpty } from '../src/utils/helper';
+import { TOE_KICK_MOLDING } from '../src/constants';
+import * as Areas from './catalog/areas/**/planner-element.jsx';
+import * as Lines from './catalog/lines/**/planner-element.jsx';
+import * as Holes from './catalog/holes/**/planner-element.jsx';
+import {
+  render2DItem,
+  render3DApplianceItem,
+  render3DItem,
+  render3DLightingItem
+} from './catalog/utils/item-loader';
+import {
+  Models as PlannerModels,
+  Plugins as PlannerPlugins,
+  reducer as PlannerReducer
+} from '../src/index';
+import { Map } from 'immutable';
+import ReactGA from 'react-ga4';
+import { hotjar } from 'react-hotjar';
+import * as Sentry from '@sentry/react';
+import { loadProject, rename } from '../src/actions/project-actions';
+import exporter from '../src/catalog/utils/exporter';
+
+/* ============================== component ============================= */
+const MyCatalog = new Catalog();
+
+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;
+};
+
+const 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
+        },
+        maxAge: 999999
+      })
+    : f => f
+);
+
+const plugins = [PlannerPlugins.Keyboard(), PlannerPlugins.ConsoleDebugger()];
+
+export default function KitchenConfiguratorApp(props) {
+  const {
+    width,
+    height,
+
+    projectElement,
+    categoryData, // { data: { catalogs, colorAlias, subgroups, ... } }
+    dataBundle, // { data, appliances, furnishing, lighting }
+    configData, // { id, logoImg, companyUrl }
+
+    toolbarButtons,
+
+    options,
+    user,
+    auth,
+    featureFlags,
+    sentry,
+    analytics,
+
+    onEvent,
+    onSave,
+    onError,
+
+    ...passThrough
+  } = props;
+
+  const { catalogs, colorAlias, subgroups } =
+    (categoryData && categoryData.data) || {};
+  const {
+    data = [],
+    appliances = [],
+    furnishing = [],
+    lighting = []
+  } = dataBundle || {};
+  const [{ project_data }] = projectElement;
+  const { id, logoImg, companyUrl } = configData;
+
+  const [outlineSVGData, setOutlineSVGData] = React.useState([]);
+  const [catalogInitiated, setCatalogInitiated] = React.useState(false);
+
+  useEffect(() => {
+    const initMyCatalog = async () => {
+      for (let x in Areas) MyCatalog.registerElement(Areas[x]);
+      for (let x in Lines) MyCatalog.registerElement(Lines[x]);
+      for (let x in Holes) MyCatalog.registerElement(Holes[x]);
+      MyCatalog.registerCategory('Windows', 'Windows', [
+        Holes.windowClear,
+        Holes.windowCross,
+        Holes.windowDoubleHung,
+        Holes.windowVertical
+      ]);
+      MyCatalog.registerCategory('Doors', 'Doors', [
+        Holes.doorInterior,
+        Holes.doorExterior,
+        Holes.doorCloset,
+        Holes.doorSliding,
+        Holes.doorwayFramed,
+        Holes.doorwayFrameless
+      ]);
+    };
+
+    const loadMoldings = async () => {
+      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;
+
+      door_color_alias.forEach(dca => {
+        doorStyleData.doorColorData.forEach(dc => {
+          dc.door_style_id = parseInt(dc.door_style_id);
+          if (dc.id !== dca.door_color_id) return;
+          dc.name = dca.alias_name;
+          dc.color_sku_alias = dca.sku_alias_name;
+
+          doorStyleData.treeStruct.forEach(el => {
+            el.items.forEach(
+              elem =>
+                dc.door_style_id === elem.id && (dc.door_style_name = elem.name)
+            );
+          });
+
+          dca.alias_installation_type = isEmpty(dca.alias_installation_type)
+            ? []
+            : dca.alias_installation_type.split(',').map(n => parseInt(n));
+
+          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));
+        }
+        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) 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);
+    };
+
+    const loadSVGs = async () => {
+      const svgLoadPromises = data.map(async item => {
+        if (!item.outline) return null;
+        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'))
+          };
+        } catch (err) {
+          console.error('Failed to load SVG:', item.outline, err);
+          return null;
+        }
+      });
+
+      const outlineData = await Promise.all(svgLoadPromises);
+      setOutlineSVGData(outlineData);
+    };
+
+    const initCatalog = async () => {
+      setCatalogInitiated(false);
+      await initMyCatalog();
+      await loadMoldings();
+      await loadSVGs();
+      setCatalogInitiated(true);
+    };
+
+    initCatalog();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [categoryData, data, id, catalogs, colorAlias, subgroups]);
+
+  // Register items once SVGs are loaded
+  useEffect(() => {
+    if (!outlineSVGData.length) return;
+
+    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]);
+  }, [outlineSVGData, data, appliances, furnishing, lighting]);
+
+  // Forward updates/save moments to host
+  useEffect(() => {
+    if (!onEvent && !onSave && !onError) return;
+    const unsubscribe = store.subscribe(() => {
+      const state = store.getState();
+      onEvent?.({ type: 'state-update', payload: { state } });
+
+      const pendingSave = state
+        ?.get?.('KitchenConfigurator')
+        ?.get?.('misc')
+        ?.get?.('pendingSave');
+      if (pendingSave && onSave) {
+        try {
+          const planner = state.get('KitchenConfigurator');
+          const currentScene = planner?.get?.('scene')?.toJS
+            ? planner.get('scene').toJS()
+            : planner?.get?.('scene') || null;
+          onSave({ type: 'save', payload: { scene: currentScene } });
+        } catch (e) {
+          onError?.({ type: 'save-error', error: e });
+        }
+      }
+    });
+    return () => unsubscribe();
+  }, [store, onEvent, onSave, onError]);
+
+  useEffect(() => {
+    if (projectElement.length === 0) return;
+    if (!catalogInitiated) return;
+
+    sessionStorage.setItem('projectTitle', projectElement[0].title);
+    store.dispatch(rename(projectElement[0].title));
+    sessionStorage.setItem('projectId', projectElement[0].id);
+    sessionStorage.setItem('email', projectElement[0].email);
+    sessionStorage.setItem('firstName', projectElement[0].firstName);
+    sessionStorage.setItem('lastName', projectElement[0].lastName);
+    sessionStorage.setItem('phone', projectElement[0].phone);
+    let jsonData;
+    jsonData = JSON.parse(projectElement[0].project_data);
+    jsonData.isLoadingCabinet = false;
+    store.dispatch(loadProject(jsonData, categoryData));
+  }, [project_data, catalogInitiated]);
+
+  return (
+    <AppContext.Provider>
+      <Provider store={store}>
+        <KitchenConfigurator
+          catalog={MyCatalog}
+          width={width}
+          height={height}
+          logoImage={logoImg}
+          companyURL={companyUrl}
+          plugins={plugins}
+          toolbarButtons={toolbarButtons}
+          stateExtractor={state => state.get('KitchenConfigurator')}
+          categoryData={categoryData}
+          data={data}
+          configData={configData}
+          onEvent={onEvent}
+          onSave={onSave}
+          onError={onError}
+          {...passThrough}
+        />
+      </Provider>
+    </AppContext.Provider>
+  );
+}
+
+/* ============================== prop types ============================== */
+
+KitchenConfiguratorApp.propTypes = {
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  projectElement: PropTypes.arrayOf(PropTypes.object),
+  categoryData: PropTypes.any,
+  dataBundle: PropTypes.any,
+  configData: PropTypes.any,
+  catalog: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.instanceOf(Models.Catalog)
+  ]),
+  logoImg: PropTypes.any,
+  companyUrl: PropTypes.string,
+  toolbarButtons: PropTypes.any,
+  options: PropTypes.object,
+  user: PropTypes.object,
+  auth: PropTypes.object,
+  featureFlags: PropTypes.object,
+  sentry: PropTypes.shape({
+    dsn: PropTypes.string,
+    environment: PropTypes.string
+  }),
+  analytics: PropTypes.shape({
+    ga4Id: PropTypes.string,
+    hotjar: PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      sv: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    })
+  }),
+  onEvent: PropTypes.func,
+  onSave: PropTypes.func,
+  onError: PropTypes.func,
+  store: PropTypes.object
+};

package/src/actions/area-actions.js

@@ -0,0 +1,15 @@
+import { SELECT_AREA, SET_FLOOR_STYLES } from '../constants';
+
+export function selectArea(layerID, areaID) {
+  return {
+    type: SELECT_AREA,
+    layerID,
+    areaID
+  };
+}
+export function setFloorStyles(texture) {
+  return {
+    type: SET_FLOOR_STYLES,
+    texture
+  };
+}

package/src/actions/export.js

@@ -0,0 +1,38 @@
+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';
+import * as userActions from './user-actions';
+export {
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions,
+  userActions
+};
+
+export default {
+  projectActions,
+  viewer2DActions,
+  viewer3DActions,
+  linesActions,
+  holesActions,
+  sceneActions,
+  verticesActions,
+  itemsActions,
+  areaActions,
+  groupsActions,
+  userActions
+};

package/src/actions/groups-actions.js

@@ -0,0 +1,102 @@
+import { GROUP_ACTIONS } from '../constants';
+
+export function addGroup() {
+  return {
+    type: GROUP_ACTIONS.ADD_GROUP
+  };
+}
+
+export function addGroupFromSelected() {
+  return {
+    type: GROUP_ACTIONS.ADD_GROUP_FROM_SELECTED
+  };
+}
+
+export function selectGroup(groupID) {
+  return {
+    type: GROUP_ACTIONS.SELECT_GROUP,
+    groupID
+  };
+}
+
+export function unselectGroup(groupID) {
+  return {
+    type: GROUP_ACTIONS.UNSELECT_GROUP,
+    groupID
+  };
+}
+
+export function addToGroup(groupID, layerID, elementPrototype, elementID) {
+  return {
+    type: GROUP_ACTIONS.ADD_TO_GROUP,
+    groupID,
+    layerID,
+    elementPrototype,
+    elementID
+  };
+}
+
+export function removeFromGroup(groupID, layerID, elementPrototype, elementID) {
+  return {
+    type: GROUP_ACTIONS.REMOVE_FROM_GROUP,
+    groupID,
+    layerID,
+    elementPrototype,
+    elementID
+  };
+}
+
+export function setGroupAttributes(groupID, attributes) {
+  return {
+    type: GROUP_ACTIONS.SET_GROUP_ATTRIBUTES,
+    groupID,
+    attributes
+  };
+}
+
+export function setGroupProperties(groupID, properties) {
+  return {
+    type: GROUP_ACTIONS.SET_GROUP_PROPERTIES,
+    groupID,
+    properties
+  };
+}
+
+export function setGroupBarycenter(groupID, barycenter) {
+  return {
+    type: GROUP_ACTIONS.SET_GROUP_BARYCENTER,
+    groupID,
+    barycenter
+  };
+}
+
+export function removeGroup(groupID) {
+  return {
+    type: GROUP_ACTIONS.REMOVE_GROUP,
+    groupID
+  };
+}
+
+export function removeGroupAndDeleteElements(groupID) {
+  return {
+    type: GROUP_ACTIONS.REMOVE_GROUP_AND_DELETE_ELEMENTS,
+    groupID
+  };
+}
+
+export function groupTranslate(groupID, x, y) {
+  return {
+    type: GROUP_ACTIONS.GROUP_TRANSLATE,
+    groupID,
+    x,
+    y
+  };
+}
+
+export function groupRotate(groupID, rotation) {
+  return {
+    type: GROUP_ACTIONS.GROUP_ROTATE,
+    groupID,
+    rotation
+  };
+}