fix: fixes issue when clearing the canvas

src/Isoflow.tsx

@@ -1,5 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
-import { shallow } from 'zustand/shallow';
+import React, { useEffect } from 'react';
 import { ThemeProvider } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { theme } from 'src/styles/theme';
@@ -14,7 +13,7 @@ import {
   Colors,
   Icons
 } from 'src/types';
-import { setWindowCursor, generateId } from 'src/utils';
+import { setWindowCursor } from 'src/utils';
 import { modelSchema } from 'src/schemas/model';
 import { useModelStore, ModelProvider } from 'src/stores/modelStore';
 import { SceneProvider } from 'src/stores/sceneStore';
@@ -22,14 +21,8 @@ import { GlobalStyles } from 'src/styles/GlobalStyles';
 import { Renderer } from 'src/components/Renderer/Renderer';
 import { UiOverlay } from 'src/components/UiOverlay/UiOverlay';
 import { UiStateProvider, useUiStateStore } from 'src/stores/uiStateStore';
-import {
-  INITIAL_DATA,
-  MAIN_MENU_OPTIONS,
-  INITIAL_UI_STATE,
-  VIEW_DEFAULTS
-} from 'src/config';
-import { createView } from 'src/stores/reducers';
-import { useView } from 'src/hooks/useView';
+import { INITIAL_DATA, MAIN_MENU_OPTIONS, INITIAL_UI_STATE } from 'src/config';
+import { useModel } from 'src/hooks/useModel';
 import { useIconCategories } from './hooks/useIconCategories';
 
 const App = ({
@@ -41,11 +34,6 @@ const App = ({
   enableDebugTools = false,
   editorMode = 'EDITABLE'
 }: IsoflowProps) => {
-  const prevInitialData = useRef<Model>(INITIAL_DATA);
-  const [isReady, setIsReady] = useState(false);
-  const model = useModelStore((state) => {
-    return state;
-  }, shallow);
   const modelActions = useModelStore((state) => {
     return state.actions;
   });
@@ -53,7 +41,7 @@ const App = ({
     return state.actions;
   });
   const { setIconCategoriesState } = useIconCategories();
-  const { changeView } = useView();
+  const model = useModel();
 
   useEffect(() => {
     if (initialData?.zoom) {
@@ -84,43 +72,27 @@ const App = ({
     };
   }, []);
 
+  const { load } = model;
+
   useEffect(() => {
-    if (!initialData || prevInitialData.current === initialData) return;
-    setIsReady(false);
-
-    let fullInitialData = { ...INITIAL_DATA, ...initialData };
-
-    if (fullInitialData.views.length === 0) {
-      const newView = {
-        ...VIEW_DEFAULTS,
-        id: generateId()
-      };
-
-      fullInitialData = createView(newView, fullInitialData);
-    }
-
-    prevInitialData.current = fullInitialData;
-    modelActions.set(fullInitialData);
-
-    changeView(fullInitialData.views[0].id, fullInitialData);
-    setIsReady(true);
-  }, [initialData, modelActions, uiActions, changeView]);
+    load({ ...INITIAL_DATA, ...initialData });
+  }, [initialData, load]);
 
   useEffect(() => {
     setIconCategoriesState();
   }, [model.icons, setIconCategoriesState]);
 
   useEffect(() => {
-    if (!isReady || !onModelUpdated) return;
+    if (!model.isReady || !onModelUpdated) return;
 
     onModelUpdated(model);
-  }, [model, onModelUpdated, isReady]);
+  }, [model, onModelUpdated, model.isReady]);
 
   useEffect(() => {
     uiActions.setenableDebugTools(enableDebugTools);
   }, [enableDebugTools, uiActions]);
 
-  if (!isReady) return null;
+  if (!model.isReady) return null;
 
   return (
     <>

src/components/MainMenu/MainMenu.tsx

@@ -13,8 +13,8 @@ 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, modelFromModelStore } from 'src/utils';
-import { INITIAL_DATA } from 'src/config';
+import { exportAsJSON } from 'src/utils';
+import { useModel } from 'src/hooks/useModel';
 import { MenuItem } from './MenuItem';
 
 export const MainMenu = () => {
@@ -25,15 +25,13 @@ export const MainMenu = () => {
   const mainMenuOptions = useUiStateStore((state) => {
     return state.mainMenuOptions;
   });
-  const model = useModelStore((state) => {
-    return modelFromModelStore(state);
-  });
   const modelActions = useModelStore((state) => {
     return state.actions;
   });
   const uiStateActions = useUiStateStore((state) => {
     return state.actions;
   });
+  const model = useModel();
 
   const onToggleMenu = useCallback(
     (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -84,11 +82,13 @@ export const MainMenu = () => {
     uiStateActions.setDialog('EXPORT_IMAGE');
   }, [uiStateActions]);
 
+  const { clear } = model;
+
   const onClearCanvas = useCallback(() => {
-    modelActions.set({ ...INITIAL_DATA, icons: model.icons });
+    clear();
     uiStateActions.resetUiState();
     uiStateActions.setIsMainMenuOpen(false);
-  }, [modelActions, uiStateActions, model.icons]);
+  }, [uiStateActions, clear]);
 
   const sectionVisibility = useMemo(() => {
     return {

src/hooks/useModel.ts

@@ -0,0 +1,55 @@
+import { useCallback, useState, useRef } from 'react';
+import { InitialData } from 'src/types';
+import { INITIAL_DATA, VIEW_DEFAULTS } from 'src/config';
+import { generateId } from 'src/utils';
+import { createView } from 'src/stores/reducers';
+import { useModelStore } from 'src/stores/modelStore';
+import { useView } from 'src/hooks/useView';
+
+export const useModel = () => {
+  const [isReady, setIsReady] = useState(false);
+  const prevInitialData = useRef<InitialData>();
+  const model = useModelStore((state) => {
+    return state;
+  });
+  const { changeView } = useView();
+
+  const load = useCallback(
+    (_initialData: InitialData) => {
+      if (!_initialData || prevInitialData.current === _initialData) return;
+
+      setIsReady(false);
+
+      const initialData = _initialData;
+
+      if (initialData.views.length === 0) {
+        const updates = createView(
+          {
+            ...VIEW_DEFAULTS,
+            id: generateId()
+          },
+          initialData
+        );
+
+        Object.assign(initialData, updates);
+      }
+      prevInitialData.current = initialData;
+      model.actions.set(initialData);
+
+      changeView(initialData.views[0].id, initialData);
+      setIsReady(true);
+    },
+    [changeView, model.actions]
+  );
+
+  const clear = useCallback(() => {
+    load({ ...INITIAL_DATA, icons: model.icons });
+  }, [load, model.icons]);
+
+  return {
+    load,
+    clear,
+    isReady,
+    ...model
+  };
+};