feat: adds title to scene config

src/Isoflow.tsx

@@ -43,8 +43,8 @@ const App = ({
   const [isReady, setIsReady] = useState(false);
   useWindowUtils();
   const scene = useSceneStore(
-    ({ nodes, connectors, textBoxes, rectangles, icons }) => {
-      return { nodes, connectors, textBoxes, rectangles, icons };
+    ({ title, nodes, connectors, textBoxes, rectangles, icons }) => {
+      return { title, nodes, connectors, textBoxes, rectangles, icons };
     },
     shallow
   );

src/components/MainMenu/MainMenu.tsx

@@ -25,6 +25,7 @@ export const MainMenu = () => {
   });
   const scene = useSceneStore((state) => {
     return {
+      title: state.title,
       icons: state.icons,
       nodes: state.nodes,
       connectors: state.connectors,

src/components/UiOverlay/UiOverlay.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { Box, useTheme } from '@mui/material';
+import { Box, useTheme, Typography } from '@mui/material';
 import { UiElement } from 'components/UiElement/UiElement';
 import { toPx } from 'src/utils';
 import { SceneLayer } from 'src/components/SceneLayer/SceneLayer';
@@ -9,6 +9,7 @@ import { ToolMenu } from 'src/components/ToolMenu/ToolMenu';
 import { useUiStateStore } from 'src/stores/uiStateStore';
 import { MainMenu } from 'src/components/MainMenu/MainMenu';
 import { ZoomControls } from 'src/components/ZoomControls/ZoomControls';
+import { useSceneStore } from 'src/stores/sceneStore';
 
 export const UiOverlay = () => {
   const theme = useTheme();
@@ -31,6 +32,9 @@ export const UiOverlay = () => {
   const itemControls = useUiStateStore((state) => {
     return state.itemControls;
   });
+  const sceneTitle = useSceneStore((state) => {
+    return state.title;
+  });
 
   if (disableInteractions) return null;
 
@@ -89,6 +93,21 @@ export const UiOverlay = () => {
       >
         <MainMenu />
       </Box>
+
+      <UiElement
+        sx={{
+          position: 'absolute',
+          bottom: toPx(appPadding.y),
+          left: '50%',
+          transform: 'translateX(-50%)',
+          px: 2,
+          py: 1
+        }}
+      >
+        <Typography fontWeight={600} color="text.secondary">
+          {sceneTitle}
+        </Typography>
+      </UiElement>
     </>
   );
 };

src/config.ts

@@ -42,6 +42,7 @@ export const MAX_ZOOM = 1;
 export const TRANSFORM_ANCHOR_SIZE = 30;
 export const TRANSFORM_CONTROLS_COLOR = '#0392ff';
 export const INITIAL_SCENE: SceneInput = {
+  title: 'Untitled',
   icons: [],
   nodes: [],
   connectors: [],

src/examples/initialScene.ts

@@ -16,6 +16,7 @@ const isopacks = flattenCollections([
 ]);
 
 export const initialScene: InitialScene = {
+  title: 'Airport Technology Management',
   icons: isopacks,
   nodes: [
     {

src/fixtures/scene.ts

@@ -1,6 +1,7 @@
 import { SceneInput } from 'src/types';
 
 export const scene: SceneInput = {
+  title: 'TestScene',
   icons: [
     {
       id: 'icon1',

src/stores/sceneStore.tsx

@@ -2,7 +2,11 @@ import React, { createContext, useRef, useContext } from 'react';
 import { createStore, useStore } from 'zustand';
 import { produce } from 'immer';
 import { SceneStore, Scene } from 'src/types';
-import { DEFAULT_FONT_FAMILY, TEXTBOX_DEFAULTS } from 'src/config';
+import {
+  DEFAULT_FONT_FAMILY,
+  TEXTBOX_DEFAULTS,
+  INITIAL_SCENE
+} from 'src/config';
 import { sceneInput } from 'src/validation/scene';
 import {
   getItemById,
@@ -17,6 +21,7 @@ import {
 } from 'src/utils';
 
 export const initialScene: Scene = {
+  title: INITIAL_SCENE.title,
   icons: [],
   nodes: [],
   connectors: [],

src/types/scene.ts

@@ -118,6 +118,7 @@ export interface SceneActions {
 }
 
 export type Scene = {
+  title: string;
   nodes: Node[];
   connectors: Connector[];
   textBoxes: TextBox[];

src/utils/inputs.ts

@@ -191,6 +191,7 @@ export const sceneInputToScene = (sceneInput: SceneInput): Scene => {
   });
 
   return {
+    title: sceneInput.title,
     icons,
     nodes,
     rectangles,
@@ -287,6 +288,7 @@ export const sceneToSceneInput = (scene: Scene): SceneInput => {
   );
 
   return {
+    title: scene.title,
     icons,
     nodes,
     connectors,

src/validation/scene.ts

@@ -12,6 +12,7 @@ import { ensureValidConnectors, ensureValidNodes } from './utils';
 
 export const sceneInput = z
   .object({
+    title: z.string(),
     icons: z.array(iconInput),
     nodes: z.array(nodeInput),
     connectors: z.array(connectorInput),