fix: infinite rerender + types + defaultCamera

app/src/App/Scenes/components/SceneDefaultCamera.tsx

@@ -1,10 +1,12 @@
+import { uidGenerator } from "@app/Common/utilities";
 import useEditor from "@app/Editor/_actions/hooks/useEditor";
 import useCameras from "@app/Scenes/_actions/hooks/useCameras";
 import { OrbitControls, PerspectiveCamera } from "@react-three/drei";
 import { FC, useEffect, useRef } from "react";
 import { PerspectiveCamera as PerspectiveCameraType, Vector3 } from "three";
 
 import { DefaultCameras } from "../_actions/scenesConstants";
+import { SceneCamera } from "../_actions/scenesTypes";
 import TransformControls from "./TransformControls";
 
 const EditorCamera: FC = () => {
@@ -13,7 +15,15 @@ const EditorCamera: FC = () => {
     const cameraRef = useRef<PerspectiveCameraType>(null!);
 
     useEffect(() => {
-        const newCamera = addCamera(cameraRef, DefaultCameras.EditorCamera);
+        const newCameraId = cameraRef.current?.uuid || uidGenerator();
+        const newSceneCamera: SceneCamera = {
+            id: newCameraId,
+            name: DefaultCameras.EditorCamera,
+            isDefault: true,
+            cameraRef,
+            position: [0, 0, 0],
+        };
+        const newCamera = addCamera(newSceneCamera);
 
         setCurrentCamera(newCamera.id);
 

app/src/App/Scenes/components/TransformControls.tsx

@@ -70,7 +70,7 @@ const TransformControlsComponent: FC<Props> = ({ children }) => {
             (!previousSelectedWidgets || !isEqual(selectedWidgets, previousSelectedWidgets))
         ) {
             setMeshToAttach(getMeshByWidget(selectedWidgets[0]));
-        } else if (!selectedWidgets.length) {
+        } else if (previousSelectedWidgets?.length && !selectedWidgets.length) {
             setMeshToAttach(undefined);
         }
     }, [

app/src/App/Widgets/_actions/_data/hooks/useWidgetDispatch.ts

@@ -16,9 +16,12 @@ import {
 export default () => {
     const dispatch = useAppDispatch();
 
-    const dispatchAddDictionary = (widgetObjectInfo: Required<WidgetObjectInfo>) => {
-        return dispatch(addWidgetDictionary(widgetObjectInfo));
-    };
+    const dispatchAddDictionary = useCallback(
+        (widgetObjectInfo: Required<WidgetObjectInfo>) => {
+            return dispatch(addWidgetDictionary(widgetObjectInfo));
+        },
+        [dispatch]
+    );
 
     const dispatchAddBatchDictionary = useCallback(
         (widgetsObjectInfoDictionary: Required<WidgetObjectInfoDictionary>) => {
@@ -41,23 +44,35 @@ export default () => {
         [dispatch]
     );
 
-    const dispatchRemoveWidgetDictionary = (widgetId: string | undefined) => {
-        if (widgetId) {
-            return dispatch(removeWidgetDictionary(widgetId));
-        }
-    };
+    const dispatchRemoveWidgetDictionary = useCallback(
+        (widgetId: string | undefined) => {
+            if (widgetId) {
+                return dispatch(removeWidgetDictionary(widgetId));
+            }
+        },
+        [dispatch]
+    );
 
-    const dispatchRemoveBatchWidgetDictionary = (widgetIds: string[]) => {
-        return dispatch(removeBatchWidgetDictionary(widgetIds));
-    };
+    const dispatchRemoveBatchWidgetDictionary = useCallback(
+        (widgetIds: string[]) => {
+            return dispatch(removeBatchWidgetDictionary(widgetIds));
+        },
+        [dispatch]
+    );
 
-    const dispatchOverrideWidgetDictionary = (widgetDictionary: WidgetObjectInfoDictionary) => {
-        return dispatch(overrideWidgetDictionary(widgetDictionary));
-    };
+    const dispatchOverrideWidgetDictionary = useCallback(
+        (widgetDictionary: WidgetObjectInfoDictionary) => {
+            return dispatch(overrideWidgetDictionary(widgetDictionary));
+        },
+        [dispatch]
+    );
 
-    const dispatchSetCurrentWidgetProperties = (widgetProperties: WidgetProperties) => {
-        return dispatch(setCurrentWidgetProperties(widgetProperties));
-    };
+    const dispatchSetCurrentWidgetProperties = useCallback(
+        (widgetProperties: WidgetProperties) => {
+            return dispatch(setCurrentWidgetProperties(widgetProperties));
+        },
+        [dispatch]
+    );
 
     return {
         dispatchAddDictionary,

app/src/App/Widgets/_actions/_data/hooks/useWidgetsSelector.ts

@@ -1,16 +1,16 @@
 import { AppState, useAppSelector } from "@app/Core/_actions/_data/state/store";
-import { createSelector } from "@reduxjs/toolkit";
+// import { createSelector } from "@reduxjs/toolkit";
 
 const widgetsInfoSelector = (state: AppState) => state.widgets.widgetsObjectInfoDictionary;
 const displayedInformationSelector = (state: AppState) => state.widgets.displayedInformation;
 
-const selectWidgets = createSelector(widgetsInfoSelector, (widgetsObjectInfoDictionary) => {
-    return widgetsObjectInfoDictionary;
-});
+// const selectWidgets = createSelector(widgetsInfoSelector, (widgetsObjectInfoDictionary) => {
+//     return widgetsObjectInfoDictionary;
+// });
 
 export default () =>
     useAppSelector((state) => {
-        const widgetsObjectInfoDictionary = selectWidgets(state);
+        const widgetsObjectInfoDictionary = widgetsInfoSelector(state);
         const displayedInformations = displayedInformationSelector(state);
 
         return {

app/src/App/Widgets/_actions/_data/hooks/useWidgetsService.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 
 import filterWidgets from "../../utilities/filterWidgets";
 import {
@@ -27,7 +27,8 @@ export default () => {
         dispatchOverrideWidgetDictionary,
         dispatchRemoveBatchWidgetDictionary,
     } = useWidgetDispatch();
-    const { widgetsObjects, widgetsUI } = filterWidgets(widgets);
+
+    const { widgetsObjects, widgetsUI } = useMemo(() => filterWidgets(widgets), [widgets]);
 
     const add = useCallback(
         (newWidget: WidgetDictionaryItem, newWidgetObjectInfo?: WidgetObjectInfo) => {
@@ -36,7 +37,6 @@ export default () => {
                     newWidgetObjectInfo as Required<WidgetObjectInfo>;
                 dispatchAddDictionary(requiredWidgetDictionaryItem);
             }
-
             setWidgets((prevWidgets) => ({
                 ...prevWidgets,
                 [newWidget.id]: { ...newWidget },

app/src/App/Widgets/_actions/hooks/useGetMeshByWidget.ts

@@ -1,12 +1,12 @@
 import { useThree } from "@react-three/fiber";
 
 import getWidgetName from "../utilities/getWidgetName";
-import { WidgetObjectsDictionaryItem } from "../widgetsTypes";
+import { WidgetDictionaryItem } from "../widgetsTypes";
 
 export default () => {
     const { scene } = useThree();
 
-    const getMeshByWidget = (widget: WidgetObjectsDictionaryItem) => {
+    const getMeshByWidget = (widget: WidgetDictionaryItem) => {
         const meshName = getWidgetName(widget);
         return scene.getObjectByName(meshName);
     };

app/src/App/Widgets/_actions/hooks/useWidgets.ts

@@ -136,7 +136,6 @@ export default () => {
     const updateCurrentWidget = useCallback(
         (widgetProperties: WidgetProperties, updateOnlyProperties?: boolean) => {
             const currentWidget = selectedWidgets[0];
-
             updateWidget(currentWidget, widgetProperties, updateOnlyProperties);
         },
         [selectedWidgets, updateWidget]

app/src/App/Widgets/_actions/widgetsTypes.ts

@@ -111,7 +111,7 @@ export type WidgetObjectEditorOptions = {
     meshHolder?: ReactNode | Object3D;
 };
 
-/// ---------------------- Widgets Objects Dictionary ---------------------- ///
+/// ---------------------- Widgets Object Dictionary ---------------------- ///
 
 /**
  * A dictionary containing informations about all WidgetObjectsDictionary
@@ -152,13 +152,23 @@ export type SerializedWidgetObjectDictionaryItem<Props = FeaturesWidgetsProps> =
 /// ---------------------- Widgets Info Dictionary ---------------------- ///
 
 /**
- * A dictionary containing editable informations about a WidgetObjectsDictionaryItem
+ * A dictionary containing editable informations about all Widget types
  */
-export type WidgetObjectInfoDictionary = Dictionary<WidgetObjectInfo>;
+export type WidgetInfoDictionary = Dictionary<WidgetInfo>;
 
-export type WidgetObjectInfo = {
+export type WidgetInfo = {
     id: string;
     displayName?: string;
+};
+
+/// ---------------------- Widgets Object Info Dictionary ---------------------- ///
+
+/**
+ * A dictionary containing editable informations about a WidgetObject
+ */
+export type WidgetObjectInfoDictionary = Dictionary<WidgetObjectInfo>;
+
+export type WidgetObjectInfo = WidgetInfo & {
     properties?: WidgetProperties;
     options?: WidgetOptionsValues;
 };
@@ -174,6 +184,12 @@ export type WidgetProperties = {
     scale: Vector3Array;
 };
 
+/// ---------------------- Widgets UI Info Dictionary ---------------------- ///
+
+export type WidgetUIInfoDictionary = Dictionary<WidgetUIInfo>;
+
+export type WidgetUIInfo = WidgetInfo;
+
 /// ---------------------- Widget UI Module ---------------------- ///
 
 /**