refactor: renames interactionsEnabled > disableInteractions

src/Isoflow.tsx

@@ -29,7 +29,7 @@ interface Props {
   initialScene?: SceneInput & {
     zoom?: number;
   };
-  interactionsEnabled?: boolean;
+  disableInteractions?: boolean;
   onSceneUpdated?: (scene: SceneInput) => void;
   width?: number | string;
   height?: number | string;
@@ -40,7 +40,7 @@ const App = ({
   initialScene,
   width,
   height = '100%',
-  interactionsEnabled: interactionsEnabledProp = true,
+  disableInteractions: disableInteractionsProp,
   onSceneUpdated,
   debugMode = false
 }: Props) => {
@@ -56,8 +56,8 @@ const App = ({
   const uiActions = useUiStateStore((state) => {
     return state.actions;
   });
-  const interactionsEnabled = useUiStateStore((state) => {
-    return state.interactionsEnabled;
+  const disableInteractions = useUiStateStore((state) => {
+    return state.disableInteractions;
   });
   const mode = useUiStateStore((state) => {
     return state.mode;
@@ -68,9 +68,8 @@ const App = ({
 
   useEffect(() => {
     uiActions.setZoom(initialScene?.zoom ?? 1);
-    // TODO: Rename setInteractionsEnabled to disableInteractions
-    uiActions.setInteractionsEnabled(interactionsEnabledProp);
-  }, [initialScene?.zoom, interactionsEnabledProp, sceneActions, uiActions]);
+    uiActions.setDisableInteractions(Boolean(disableInteractionsProp));
+  }, [initialScene?.zoom, disableInteractionsProp, sceneActions, uiActions]);
 
   useEffect(() => {
     if (!initialScene || prevInitialScene.current === initialScene) return;
@@ -104,7 +103,7 @@ const App = ({
       >
         <Renderer />
         <ItemControlsManager />
-        {interactionsEnabled && <ToolMenu />}
+        {disableInteractions && <ToolMenu />}
         {mode.type === 'PLACE_ELEMENT' && mode.icon && (
           <SceneLayer>
             <DragAndDrop icon={mode.icon} tile={mouse.position.tile} />

src/interaction/useInteractionManager.ts

@@ -31,7 +31,7 @@ export const useInteractionManager = () => {
 
   const onMouseEvent = useCallback(
     (e: MouseEvent | TouchEvent) => {
-      if (!rendererRef.current || !uiState.interactionsEnabled) return;
+      if (!rendererRef.current || uiState.disableInteractions) return;
 
       const mode = modes[uiState.mode.type];
 

src/stores/uiStateStore.tsx

@@ -6,7 +6,7 @@ import { UiStateStore } from 'src/types';
 const initialState = () => {
   return createStore<UiStateStore>((set, get) => {
     return {
-      interactionsEnabled: true,
+      disableInteractions: false,
       mode: {
         type: 'CURSOR',
         showCursor: true,
@@ -57,10 +57,10 @@ const initialState = () => {
         setRendererSize: (rendererSize) => {
           set({ rendererSize });
         },
-        setInteractionsEnabled: (enabled) => {
-          set({ interactionsEnabled: enabled });
+        setDisableInteractions: (isDisabled) => {
+          set({ disableInteractions: isDisabled });
 
-          if (!enabled) {
+          if (isDisabled) {
             set({ mode: { type: 'INTERACTIONS_DISABLED', showCursor: false } });
           } else {
             set({

src/types/ui.ts

@@ -119,7 +119,7 @@ export interface Scroll {
 }
 
 export interface UiState {
-  interactionsEnabled: boolean;
+  disableInteractions: boolean;
   mode: Mode;
   itemControls: ItemControls;
   contextMenu: ContextMenu;
@@ -140,7 +140,7 @@ export interface UiStateActions {
   setContextMenu: (contextMenu: ContextMenu) => void;
   setMouse: (mouse: Mouse) => void;
   setRendererSize: (rendererSize: Size) => void;
-  setInteractionsEnabled: (enabled: boolean) => void;
+  setDisableInteractions: (enabled: boolean) => void;
   setDebugMode: (enabled: boolean) => void;
 }