From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/redux/actions/map.js | 83 +++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/redux/actions/map.js

(limited to 'opendc-web/opendc-web-ui/src/redux/actions/map.js')

diff --git a/opendc-web/opendc-web-ui/src/redux/actions/map.js b/opendc-web/opendc-web-ui/src/redux/actions/map.js
new file mode 100644
index 00000000..aa14cacd
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/redux/actions/map.js
@@ -0,0 +1,83 @@
+import {
+    MAP_MAX_SCALE,
+    MAP_MIN_SCALE,
+    MAP_SCALE_PER_EVENT,
+    MAP_SIZE_IN_PIXELS,
+} from '../../components/app/map/MapConstants'
+
+export const SET_MAP_POSITION = 'SET_MAP_POSITION'
+export const SET_MAP_DIMENSIONS = 'SET_MAP_DIMENSIONS'
+export const SET_MAP_SCALE = 'SET_MAP_SCALE'
+
+export function setMapPosition(x, y) {
+    return {
+        type: SET_MAP_POSITION,
+        x,
+        y,
+    }
+}
+
+export function setMapDimensions(width, height) {
+    return {
+        type: SET_MAP_DIMENSIONS,
+        width,
+        height,
+    }
+}
+
+export function setMapScale(scale) {
+    return {
+        type: SET_MAP_SCALE,
+        scale,
+    }
+}
+
+export function zoomInOnCenter(zoomIn) {
+    return (dispatch, getState) => {
+        const state = getState()
+
+        dispatch(zoomInOnPosition(zoomIn, state.map.dimensions.width / 2, state.map.dimensions.height / 2))
+    }
+}
+
+export function zoomInOnPosition(zoomIn, x, y) {
+    return (dispatch, getState) => {
+        const state = getState()
+
+        const centerPoint = {
+            x: x / state.map.scale - state.map.position.x / state.map.scale,
+            y: y / state.map.scale - state.map.position.y / state.map.scale,
+        }
+        const newScale = zoomIn ? state.map.scale * MAP_SCALE_PER_EVENT : state.map.scale / MAP_SCALE_PER_EVENT
+        const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE)
+
+        const newX = -(centerPoint.x - x / boundedScale) * boundedScale
+        const newY = -(centerPoint.y - y / boundedScale) * boundedScale
+
+        dispatch(setMapPositionWithBoundsCheck(newX, newY))
+        dispatch(setMapScale(boundedScale))
+    }
+}
+
+export function setMapPositionWithBoundsCheck(x, y) {
+    return (dispatch, getState) => {
+        const state = getState()
+
+        const scaledMapSize = MAP_SIZE_IN_PIXELS * state.map.scale
+
+        const updatedX =
+            x > 0
+                ? 0
+                : x < -scaledMapSize + state.map.dimensions.width
+                ? -scaledMapSize + state.map.dimensions.width
+                : x
+        const updatedY =
+            y > 0
+                ? 0
+                : y < -scaledMapSize + state.map.dimensions.height
+                ? -scaledMapSize + state.map.dimensions.height
+                : y
+
+        dispatch(setMapPosition(updatedX, updatedY))
+    }
+}
-- 
cgit v1.2.3