refactor: renames main menu options for better handling

docs/pages/docs/api/index.mdx

@@ -7,5 +7,5 @@
 | `height` | `number` \| `string` | Height of the Isoflow renderer as a CSS value. | `100%` |
 | `onSceneUpdate` | `function` | A callback that is triggered whenever an item is added, updated or removed from the scene. The callback is called with the updated scene as the first argument. | `undefined` |
 | `enableDebugTools` | `boolean` | Enables extra tools for debugging purposes. | `false` |
-| `editorMode` | `EXPLORABLE_READONLY` \| `NON_INTERACTIVE` \| `EDITABLE` | Enables / disables editor features. | `EDITABLE` |
-| `mainMenuOptions` | `(OPEN \| SAVE_JSON \| CLEAR \| GITHUB \| DISCORD \| VERSION)[]` | Shows / hides options in the main menu.  If `[]` is passed, the menu is hidden. | `['OPEN', 'SAVE_JSON', 'CLEAR', 'GITHUB', 'DISCORD', 'VERSION']` |
+| `editorMode` | `"EXPLORABLE_READONLY"` \| `"NON_INTERACTIVE"` \| `"EDITABLE"` | Enables / disables editor features. | `"EDITABLE"` |
+| `mainMenuOptions` | `("ACTION.OPEN" \| "EXPORT.JSON" \| "EXPORT.PNG" \| "ACTION.CLEAR_CANVAS" \| "LINK.GITHUB" \| "LINK.DISCORD" \| "VERSION")[]` | Shows / hides options in the main menu.  If `[]` is passed, the menu is hidden. | All enabled |

docs/pages/docs/api/initialScene.mdx

@@ -4,13 +4,14 @@ The `initialScene` object contains the following properties:
 
 | Name | Type | Default |
 | --- | --- | --- |
+| `title` | `string` | `undefined` |
 | `icons` | [`Icon[]`](#icon) | `[]` |
 | `nodes` | [`Node[]`](#node) | `[]` |
 | `connectors` | [`Connector[]`](#connector) | `[]` |
 | `rectangles` | [`Rectangle[]`](#rectangle) | `[]` |
 | `textBoxes` | [`TextBox[]`](#textbox) | `[]` |
-| `title` | `string` | `undefined` |
 | `zoom` | `number` | `1` |
+| `scroll` | `Coords` | `{ x: 0, y: 0 }` |
 
 ## `Icon`
 

src/components/MainMenu/MainMenu.tsx

@@ -100,14 +100,14 @@ export const MainMenu = () => {
   const sectionVisibility = useMemo(() => {
     return {
       actions: Boolean(
-        mainMenuOptions.includes('OPEN') ||
-          mainMenuOptions.includes('EXPORT_JSON') ||
-          mainMenuOptions.includes('EXPORT_PNG') ||
-          mainMenuOptions.includes('CLEAR_CANVAS')
+        mainMenuOptions.find((opt) => {
+          return opt.includes('ACTION') || opt.includes('EXPORT');
+        })
       ),
       links: Boolean(
-        mainMenuOptions.includes('GITHUB') ||
-          mainMenuOptions.includes('DISCORD')
+        mainMenuOptions.find((opt) => {
+          return opt.includes('LINK');
+        })
       ),
       version: Boolean(mainMenuOptions.includes('VERSION'))
     };
@@ -139,25 +139,25 @@ export const MainMenu = () => {
         }}
       >
         <Card sx={{ py: 1 }}>
-          {mainMenuOptions.includes('OPEN') && (
+          {mainMenuOptions.includes('ACTION.OPEN') && (
             <MenuItem onClick={onOpenScene} Icon={<FolderOpenIcon />}>
               Open
             </MenuItem>
           )}
 
-          {mainMenuOptions.includes('EXPORT_JSON') && (
+          {mainMenuOptions.includes('EXPORT.JSON') && (
             <MenuItem onClick={onExportAsJSON} Icon={<ExportJsonIcon />}>
               Export as JSON
             </MenuItem>
           )}
 
-          {mainMenuOptions.includes('EXPORT_PNG') && (
+          {mainMenuOptions.includes('EXPORT.PNG') && (
             <MenuItem onClick={onExportAsImage} Icon={<ExportImageIcon />}>
               Export as image
             </MenuItem>
           )}
 
-          {mainMenuOptions.includes('CLEAR_CANVAS') && (
+          {mainMenuOptions.includes('ACTION.CLEAR_CANVAS') && (
             <MenuItem onClick={onClearCanvas} Icon={<DeleteOutlineIcon />}>
               Clear the canvas
             </MenuItem>
@@ -167,7 +167,7 @@ export const MainMenu = () => {
             <>
               <Divider />
 
-              {mainMenuOptions.includes('GITHUB') && (
+              {mainMenuOptions.includes('LINK.GITHUB') && (
                 <MenuItem
                   onClick={() => {
                     return gotoUrl(`${REPOSITORY_URL}`);
@@ -178,7 +178,7 @@ export const MainMenu = () => {
                 </MenuItem>
               )}
 
-              {mainMenuOptions.includes('DISCORD') && (
+              {mainMenuOptions.includes('LINK.DISCORD') && (
                 <MenuItem
                   onClick={() => {
                     return gotoUrl('https://discord.gg/QYPkvZth7D');

src/config.ts

@@ -60,11 +60,11 @@ export const INITIAL_SCENE: SceneInput = {
   rectangles: []
 };
 export const MAIN_MENU_OPTIONS: MainMenuOptions = [
-  'OPEN',
-  'EXPORT_JSON',
-  'EXPORT_PNG',
-  'CLEAR_CANVAS',
-  'DISCORD',
-  'GITHUB',
+  'ACTION.OPEN',
+  'EXPORT.JSON',
+  'EXPORT.PNG',
+  'ACTION.CLEAR_CANVAS',
+  'LINK.DISCORD',
+  'LINK.GITHUB',
   'VERSION'
 ];

src/stores/uiStateStore.tsx

@@ -5,10 +5,9 @@ import {
   incrementZoom,
   decrementZoom,
   getStartingMode,
-  getTilePosition,
   getTileScrollPosition
 } from 'src/utils';
-import { UiStateStore, Coords } from 'src/types';
+import { UiStateStore } from 'src/types';
 
 const initialState = () => {
   return createStore<UiStateStore>((set, get) => {

src/types/common.ts

@@ -32,12 +32,12 @@ export const EditorModeEnum = {
 } as const;
 
 export const MainMenuOptionsEnum = {
-  OPEN: 'OPEN',
-  EXPORT_JSON: 'EXPORT_JSON',
-  EXPORT_PNG: 'EXPORT_PNG',
-  CLEAR_CANVAS: 'CLEAR_CANVAS',
-  GITHUB: 'GITHUB',
-  DISCORD: 'DISCORD',
+  'ACTION.OPEN': 'ACTION.OPEN',
+  'EXPORT.JSON': 'EXPORT.JSON',
+  'EXPORT.PNG': 'EXPORT.PNG',
+  'ACTION.CLEAR_CANVAS': 'ACTION.CLEAR_CANVAS',
+  'LINK.GITHUB': 'LINK.GITHUB',
+  'LINK.DISCORD': 'LINK.DISCORD',
   VERSION: 'VERSION'
 } as const;