From 4c203d9bd0cd18d71c3bf231693a352087231fc3 Mon Sep 17 00:00:00 2001
From: Joshua Shoemaker <joshuashoemaker@outlook.com>
Date: Mon, 4 Sep 2023 10:54:23 -0500
Subject: [PATCH] feat: setup stage slice

---
 .../notifications/notificationQueueSlice.ts   |  4 +-
 frontend/redux/features/stage/stageSlice.ts   | 66 +++++++++++++++++++
 frontend/redux/features/stage/types.ts        | 15 +++++
 frontend/redux/store.ts                       |  4 +-
 4 files changed, 86 insertions(+), 3 deletions(-)
 create mode 100644 frontend/redux/features/stage/stageSlice.ts
 create mode 100644 frontend/redux/features/stage/types.ts

diff --git a/frontend/redux/features/notifications/notificationQueueSlice.ts b/frontend/redux/features/notifications/notificationQueueSlice.ts
index 3c59ac0..50374f5 100644
--- a/frontend/redux/features/notifications/notificationQueueSlice.ts
+++ b/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[]>) => {
diff --git a/frontend/redux/features/stage/stageSlice.ts b/frontend/redux/features/stage/stageSlice.ts
new file mode 100644
index 0000000..c0414e7
--- /dev/null
+++ b/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
diff --git a/frontend/redux/features/stage/types.ts b/frontend/redux/features/stage/types.ts
new file mode 100644
index 0000000..7098f81
--- /dev/null
+++ b/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
+}
diff --git a/frontend/redux/store.ts b/frontend/redux/store.ts
index 33e9063..43c0517 100644
--- a/frontend/redux/store.ts
+++ b/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(),
 })