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

package/src/KitchenConfiguratorApp.jsx

@@ -1,443 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,38 +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';
-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

@@ -1,102 +0,0 @@
-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
-  };
-}