diff --git a/src/Isoflow.tsx b/src/Isoflow.tsx index 5bf0ed0..a6f6734 100644 --- a/src/Isoflow.tsx +++ b/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 = ({ > - {interactionsEnabled && } + {disableInteractions && } {mode.type === 'PLACE_ELEMENT' && mode.icon && ( diff --git a/src/interaction/useInteractionManager.ts b/src/interaction/useInteractionManager.ts index 48ace9a..10e3260 100644 --- a/src/interaction/useInteractionManager.ts +++ b/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]; diff --git a/src/stores/uiStateStore.tsx b/src/stores/uiStateStore.tsx index f9625af..9d9649f 100644 --- a/src/stores/uiStateStore.tsx +++ b/src/stores/uiStateStore.tsx @@ -6,7 +6,7 @@ import { UiStateStore } from 'src/types'; const initialState = () => { return createStore((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({ diff --git a/src/types/ui.ts b/src/types/ui.ts index 4cc45ec..38862eb 100644 --- a/src/types/ui.ts +++ b/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; }