fix: fixes issue loading model

src/components/ExportImageDialog/ExportImageDialog.tsx

@@ -28,7 +28,7 @@ interface Props {
   onClose: () => void;
 }
 
-export const ExportImageDialog = ({ onClose, quality = 4 }: Props) => {
+export const ExportImageDialog = ({ onClose, quality = 1.5 }: Props) => {
   const containerRef = useRef<HTMLDivElement>();
   const debounceRef = useRef<NodeJS.Timeout>();
   const [imageData, setImageData] = React.useState<string>();

src/components/MainMenu/MainMenu.tsx

@@ -12,8 +12,7 @@ import {
 import { UiElement } from 'src/components/UiElement/UiElement';
 import { IconButton } from 'src/components/IconButton/IconButton';
 import { useUiStateStore } from 'src/stores/uiStateStore';
-import { useModelStore } from 'src/stores/modelStore';
-import { exportAsJSON } from 'src/utils';
+import { exportAsJSON, modelFromModelStore } from 'src/utils';
 import { useModel } from 'src/hooks/useModel';
 import { MenuItem } from './MenuItem';
 
@@ -25,9 +24,6 @@ export const MainMenu = () => {
   const mainMenuOptions = useUiStateStore((state) => {
     return state.mainMenuOptions;
   });
-  const modelActions = useModelStore((state) => {
-    return state.actions;
-  });
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
@@ -45,6 +41,8 @@ export const MainMenu = () => {
     window.open(url, '_blank');
   }, []);
 
+  const { load } = model;
+
   const onOpenModel = useCallback(async () => {
     const fileInput = document.createElement('input');
     fileInput.type = 'file';
@@ -60,8 +58,8 @@ export const MainMenu = () => {
       const fileReader = new FileReader();
 
       fileReader.onload = async (e) => {
-        const loadedModel = JSON.parse(e.target?.result as string);
-        modelActions.set(loadedModel);
+        const modelData = JSON.parse(e.target?.result as string);
+        load(modelData);
       };
       fileReader.readAsText(file);
 
@@ -70,10 +68,10 @@ export const MainMenu = () => {
 
     await fileInput.click();
     uiStateActions.setIsMainMenuOpen(false);
-  }, [uiStateActions, modelActions]);
+  }, [uiStateActions, load]);
 
   const onExportAsJSON = useCallback(async () => {
-    exportAsJSON(model);
+    exportAsJSON(modelFromModelStore(model));
     uiStateActions.setIsMainMenuOpen(false);
   }, [model, uiStateActions]);
 

src/hooks/useModel.ts

@@ -6,6 +6,7 @@ import { createView } from 'src/stores/reducers';
 import { useModelStore } from 'src/stores/modelStore';
 import { useView } from 'src/hooks/useView';
 import { useUiStateStore } from 'src/stores/uiStateStore';
+import { modelSchema } from 'src/schemas/model';
 
 export const useModel = () => {
   const [isReady, setIsReady] = useState(false);
@@ -24,6 +25,13 @@ export const useModel = () => {
 
       setIsReady(false);
 
+      const validationResult = modelSchema.safeParse(_initialData);
+
+      if (!validationResult.success) {
+        window.alert('There is an error in your model.');
+        return;
+      }
+
       const initialData = _initialData;
 
       if (initialData.views.length === 0) {

src/hooks/useView.ts

@@ -1,15 +1,10 @@
 import { useCallback } from 'react';
 import { useUiStateStore } from 'src/stores/uiStateStore';
-import { useModelStore } from 'src/stores/modelStore';
 import { useSceneStore } from 'src/stores/sceneStore';
 import { syncScene } from 'src/stores/reducers';
 import { Model } from 'src/types';
 
 export const useView = () => {
-  const modelActions = useModelStore((state) => {
-    return state.actions;
-  });
-
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
@@ -22,10 +17,9 @@ export const useView = () => {
     (viewId: string, model: Model) => {
       const newState = syncScene(viewId, model);
       sceneActions.set(newState.scene);
-      modelActions.set(newState.model);
       uiStateActions.setView(viewId);
     },
-    [uiStateActions, sceneActions, modelActions]
+    [uiStateActions, sceneActions]
   );
 
   return {