frontend/redux/features/notifications/notificationQueueSlice.ts

@@ -4,11 +4,11 @@ import { NotificationProps, NotificationQueueState } from './types'
 
 const initialState: NotificationQueueState = {
   currentNotification: undefined,
-  queue: []
+  queue: [],
 }
 
 export const notificationQueueSlice = createSlice({
-  name: 'propertyList',
+  name: 'notifications',
   initialState,
   reducers: {
     setNotifications: (state, action: PayloadAction<NotificationProps[]>) => {

frontend/redux/features/stage/stageSlice.ts

@@ -0,0 +1,66 @@
+import { createSlice } from '@reduxjs/toolkit'
+import type { PayloadAction } from '@reduxjs/toolkit'
+import { ContextConnectionPoint, StageState } from './types'
+
+const maxScale = 4
+const scaleStep = 0.01
+
+const initialState: StageState = {
+  size: { width: 1, height: 1 },
+  scale: 1,
+  areAreasVisible: true,
+  areProcessedWordsVisible: true,
+  areTranslatedWordsVisible: false,
+  areLinkAreaContextsVisible: false,
+  isDrawingArea: false,
+  startingContextConnectionPoint: null,
+}
+
+export const stageSlice = createSlice({
+  name: 'stage',
+  initialState,
+  reducers: {
+    setSize: (state, action: PayloadAction<{width: number, height: number}>) => {
+      state.size = action.payload
+    },
+    setScale: (state, action: PayloadAction<number>) => {
+      let clampedScale = action.payload
+
+      if (clampedScale > maxScale) clampedScale = maxScale
+      else if (clampedScale < scaleStep) clampedScale = scaleStep
+
+      state.scale = clampedScale
+    },
+    setAreAreasVisible: (state, action: PayloadAction<boolean>) => {
+      state.areAreasVisible = action.payload
+    },
+    setAreProcessedWordsVisible: (state, action: PayloadAction<boolean>) => {
+      state.areProcessedWordsVisible = action.payload
+    },
+    setAreTranslatedWordsVisible: (state, action: PayloadAction<boolean>) => {
+      state.areTranslatedWordsVisible = action.payload
+    },
+    setAreLinkAreaContextsVisible: (state, action: PayloadAction<boolean>) => {
+      state.areLinkAreaContextsVisible = action.payload
+    },
+    setIsDrawingArea: (state, action: PayloadAction<boolean>) => {
+      state.isDrawingArea = action.payload
+    },
+    setStartingContextConnectionPoint: (state, action: PayloadAction<ContextConnectionPoint>) => {
+      state.startingContextConnectionPoint = action.payload
+    },
+  }
+})
+
+export const {
+  setSize,
+  setScale,
+  setAreAreasVisible,
+  setAreProcessedWordsVisible,
+  setAreTranslatedWordsVisible,
+  setAreLinkAreaContextsVisible,
+  setIsDrawingArea,
+  setStartingContextConnectionPoint,
+} = stageSlice.actions
+
+export default stageSlice.reducer

frontend/redux/features/stage/types.ts

@@ -0,0 +1,15 @@
+export type ContextConnectionPoint = {
+  isHead: boolean,
+  areaId: string,
+}
+
+export type StageState = {
+  size: { width: number, height: number },
+  scale: number,
+  areAreasVisible: boolean,
+  areProcessedWordsVisible: boolean,
+  areTranslatedWordsVisible: boolean,
+  areLinkAreaContextsVisible: boolean,
+  isDrawingArea: boolean,
+  startingContextConnectionPoint: ContextConnectionPoint | null
+}

frontend/redux/store.ts

@@ -1,10 +1,12 @@
 import { configureStore } from '@reduxjs/toolkit'
-import notificationQueueSlice from './features/notifications/notificationQueueSlice'
 import { setupListeners } from '@reduxjs/toolkit/dist/query'
+import notificationQueueSlice from './features/notifications/notificationQueueSlice'
+import stageSlice from './features/stage/stageSlice'
 
 export const store = configureStore({
   reducer: {
     notificationQueue: notificationQueueSlice,
+    stage: stageSlice,
   },
   middleware: (getDefaultMiddleware) => getDefaultMiddleware(),
 })