chore: updates docs

docs/pages/docs/api/index.mdx

@@ -6,5 +6,5 @@
 | `width` | `number` \| `string` | Width of the Isoflow renderer as a CSS value. | `100%` |
 | `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` |
-| `disableInteractions` | `boolean` | Removes the ability to interact with the diagram (e.g. to pan, zoom or select elements), as well as hides the toolbar. | `false` |
-| `debugMode` | `boolean` | Enables extra tools for debugging purposes. | `false` |
+| `enableDebugTools` | `boolean` | Enables extra tools for debugging purposes. | `false` |
+| `editorMode` | `EXPLORABLE_READONLY` \| `NON_INTERACTIVE` \| `EDITABLE` | Enables / disables editor features. | `EDITABLE` |

src/Isoflow.tsx

@@ -28,7 +28,7 @@ const App = ({
   width = '100%',
   height = '100%',
   onSceneUpdated,
-  debugMode = false,
+  enableDebugTools = false,
   hideMainMenu = false,
   editorMode = 'EDITABLE'
 }: IsoflowProps) => {
@@ -77,8 +77,8 @@ const App = ({
   }, [scene, onSceneUpdated, isReady]);
 
   useEffect(() => {
-    uiActions.setDebugMode(debugMode);
-  }, [debugMode, uiActions]);
+    uiActions.setenableDebugTools(enableDebugTools);
+  }, [enableDebugTools, uiActions]);
 
   return (
     <>

src/components/Renderer/Renderer.tsx

@@ -16,8 +16,8 @@ import { TransformControlsManager } from 'src/components/TransformControlsManage
 
 export const Renderer = () => {
   const containerRef = useRef<HTMLDivElement>();
-  const debugMode = useUiStateStore((state) => {
-    return state.debugMode;
+  const enableDebugTools = useUiStateStore((state) => {
+    return state.enableDebugTools;
   });
   const mode = useUiStateStore((state) => {
     return state.mode;
@@ -86,7 +86,7 @@ export const Renderer = () => {
       <SceneLayer>
         <ConnectorLabels />
       </SceneLayer>
-      {debugMode && (
+      {enableDebugTools && (
         <SceneLayer>
           <SizeIndicator />
         </SceneLayer>

src/components/UiOverlay/UiOverlay.tsx

@@ -49,8 +49,8 @@ export const UiOverlay = () => {
     },
     [theme]
   );
-  const debugMode = useUiStateStore((state) => {
-    return state.debugMode;
+  const enableDebugTools = useUiStateStore((state) => {
+    return state.enableDebugTools;
   });
   const mode = useUiStateStore((state) => {
     return state.mode;
@@ -177,7 +177,7 @@ export const UiOverlay = () => {
         </UiElement>
       </Box>
 
-      {debugMode && (
+      {enableDebugTools && (
         <UiElement
           sx={{
             position: 'absolute',

src/examples/DebugTools/DebugTools.tsx

@@ -3,5 +3,5 @@ import Isoflow from 'src/Isoflow';
 import { initialScene } from '../initialScene';
 
 export const DebugTools = () => {
-  return <Isoflow initialScene={initialScene} debugMode height="100%" />;
+  return <Isoflow initialScene={initialScene} enableDebugTools height="100%" />;
 };

src/stores/uiStateStore.tsx

@@ -28,7 +28,7 @@ const initialState = () => {
         position: { x: 0, y: 0 },
         offset: { x: 0, y: 0 }
       },
-      debugMode: false,
+      enableDebugTools: false,
       zoom: 1,
       rendererSize: { width: 0, height: 0 },
       actions: {
@@ -82,8 +82,8 @@ const initialState = () => {
         setRendererSize: (rendererSize) => {
           set({ rendererSize });
         },
-        setDebugMode: (debugMode) => {
-          set({ debugMode });
+        setenableDebugTools: (enableDebugTools) => {
+          set({ enableDebugTools });
         }
       }
     };

src/types/inputs.ts

@@ -29,6 +29,6 @@ export interface IsoflowProps {
   onSceneUpdated?: (scene: SceneInput) => void;
   width?: number | string;
   height?: number | string;
-  debugMode?: boolean;
+  enableDebugTools?: boolean;
   editorMode?: keyof typeof EditorModeEnum;
 }

src/types/ui.ts

@@ -164,7 +164,7 @@ export interface UiState {
   scroll: Scroll;
   mouse: Mouse;
   rendererSize: Size;
-  debugMode: boolean;
+  enableDebugTools: boolean;
 }
 
 export interface UiStateActions {
@@ -181,7 +181,7 @@ export interface UiStateActions {
   setContextMenu: (contextMenu: ContextMenu) => void;
   setMouse: (mouse: Mouse) => void;
   setRendererSize: (rendererSize: Size) => void;
-  setDebugMode: (enabled: boolean) => void;
+  setenableDebugTools: (enabled: boolean) => void;
 }
 
 export type UiStateStore = UiState & {