diff options
Diffstat (limited to 'frontend/src/store')
| -rw-r--r-- | frontend/src/store/configure-store.js | 57 | ||||
| -rw-r--r-- | frontend/src/store/middlewares/dummy-middleware.js | 4 | ||||
| -rw-r--r-- | frontend/src/store/middlewares/viewport-adjustment.js | 136 |
3 files changed, 95 insertions, 102 deletions
diff --git a/frontend/src/store/configure-store.js b/frontend/src/store/configure-store.js index 29af25ab..f01b61bb 100644 --- a/frontend/src/store/configure-store.js +++ b/frontend/src/store/configure-store.js @@ -1,41 +1,38 @@ -import { applyMiddleware, compose, createStore } from "redux"; -import persistState from "redux-localstorage"; -import { createLogger } from "redux-logger"; -import createSagaMiddleware from "redux-saga"; -import thunk from "redux-thunk"; -import { authRedirectMiddleware } from "../auth/index"; -import rootReducer from "../reducers/index"; -import rootSaga from "../sagas/index"; -import { dummyMiddleware } from "./middlewares/dummy-middleware"; -import { viewportAdjustmentMiddleware } from "./middlewares/viewport-adjustment"; +import { applyMiddleware, compose, createStore } from 'redux' +import persistState from 'redux-localstorage' +import { createLogger } from 'redux-logger' +import createSagaMiddleware from 'redux-saga' +import thunk from 'redux-thunk' +import { authRedirectMiddleware } from '../auth/index' +import rootReducer from '../reducers/index' +import rootSaga from '../sagas/index' +import { dummyMiddleware } from './middlewares/dummy-middleware' +import { viewportAdjustmentMiddleware } from './middlewares/viewport-adjustment' -const sagaMiddleware = createSagaMiddleware(); +const sagaMiddleware = createSagaMiddleware() -let logger; -if (process.env.NODE_ENV !== "production") { - logger = createLogger(); +let logger +if (process.env.NODE_ENV !== 'production') { + logger = createLogger() } const middlewares = [ - process.env.NODE_ENV === "production" ? dummyMiddleware : logger, - thunk, - sagaMiddleware, - authRedirectMiddleware, - viewportAdjustmentMiddleware -]; + process.env.NODE_ENV === 'production' ? dummyMiddleware : logger, + thunk, + sagaMiddleware, + authRedirectMiddleware, + viewportAdjustmentMiddleware, +] -export let store = undefined; +export let store = undefined export default function configureStore() { - const configuredStore = createStore( - rootReducer, - compose( - persistState("auth"), - applyMiddleware(...middlewares) + const configuredStore = createStore( + rootReducer, + compose(persistState('auth'), applyMiddleware(...middlewares)), ) - ); - sagaMiddleware.run(rootSaga); - store = configuredStore; + sagaMiddleware.run(rootSaga) + store = configuredStore - return configuredStore; + return configuredStore } diff --git a/frontend/src/store/middlewares/dummy-middleware.js b/frontend/src/store/middlewares/dummy-middleware.js index 468b15d1..ed5670c5 100644 --- a/frontend/src/store/middlewares/dummy-middleware.js +++ b/frontend/src/store/middlewares/dummy-middleware.js @@ -1,3 +1,3 @@ export const dummyMiddleware = store => next => action => { - next(action); -}; + next(action) +} diff --git a/frontend/src/store/middlewares/viewport-adjustment.js b/frontend/src/store/middlewares/viewport-adjustment.js index 132391f3..0a074f61 100644 --- a/frontend/src/store/middlewares/viewport-adjustment.js +++ b/frontend/src/store/middlewares/viewport-adjustment.js @@ -1,90 +1,86 @@ +import { SET_MAP_DIMENSIONS, setMapPosition, setMapScale } from '../../actions/map' +import { SET_CURRENT_DATACENTER } from '../../actions/topology/building' import { - SET_MAP_DIMENSIONS, - setMapPosition, - setMapScale -} from "../../actions/map"; -import { SET_CURRENT_DATACENTER } from "../../actions/topology/building"; -import { - MAP_MAX_SCALE, - MAP_MIN_SCALE, - SIDEBAR_WIDTH, - TILE_SIZE_IN_PIXELS, - VIEWPORT_PADDING -} from "../../components/app/map/MapConstants"; -import { calculateRoomListBounds } from "../../util/tile-calculations"; + MAP_MAX_SCALE, + MAP_MIN_SCALE, + SIDEBAR_WIDTH, + TILE_SIZE_IN_PIXELS, + VIEWPORT_PADDING, +} from '../../components/app/map/MapConstants' +import { calculateRoomListBounds } from '../../util/tile-calculations' export const viewportAdjustmentMiddleware = store => next => action => { - const state = store.getState(); + const state = store.getState() - let datacenterId = -1; - let mapDimensions = {}; - if (action.type === SET_CURRENT_DATACENTER && action.datacenterId !== -1) { - datacenterId = action.datacenterId; - mapDimensions = state.map.dimensions; - } else if ( - action.type === SET_MAP_DIMENSIONS && - state.currentDatacenterId !== -1 - ) { - datacenterId = state.currentDatacenterId; - mapDimensions = { width: action.width, height: action.height }; - } + let datacenterId = -1 + let mapDimensions = {} + if (action.type === SET_CURRENT_DATACENTER && action.datacenterId !== -1) { + datacenterId = action.datacenterId + mapDimensions = state.map.dimensions + } else if ( + action.type === SET_MAP_DIMENSIONS && + state.currentDatacenterId !== -1 + ) { + datacenterId = state.currentDatacenterId + mapDimensions = { width: action.width, height: action.height } + } - if (datacenterId !== -1) { - const roomIds = state.objects.datacenter[datacenterId].roomIds; - const rooms = roomIds.map(id => Object.assign({}, state.objects.room[id])); - rooms.forEach( - room => - (room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId])) - ); + if (datacenterId !== -1) { + const roomIds = state.objects.datacenter[datacenterId].roomIds + const rooms = roomIds.map(id => Object.assign({}, state.objects.room[id])) + rooms.forEach( + room => + (room.tiles = room.tileIds.map(tileId => state.objects.tile[tileId])), + ) - let hasNoTiles = true; - for (let i in rooms) { - if (rooms[i].tiles.length > 0) { - hasNoTiles = false; - break; - } - } + let hasNoTiles = true + for (let i in rooms) { + if (rooms[i].tiles.length > 0) { + hasNoTiles = false + break + } + } - if (!hasNoTiles) { - const viewportParams = calculateParametersToZoomInOnRooms( - rooms, - mapDimensions.width, - mapDimensions.height - ); - store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY)); - store.dispatch(setMapScale(viewportParams.newScale)); + if (!hasNoTiles) { + const viewportParams = calculateParametersToZoomInOnRooms( + rooms, + mapDimensions.width, + mapDimensions.height, + ) + store.dispatch(setMapPosition(viewportParams.newX, viewportParams.newY)) + store.dispatch(setMapScale(viewportParams.newScale)) + } } - } - next(action); -}; + next(action) +} function calculateParametersToZoomInOnRooms(rooms, mapWidth, mapHeight) { - const bounds = calculateRoomListBounds(rooms); - const newScale = calculateNewScale(bounds, mapWidth, mapHeight); + const bounds = calculateRoomListBounds(rooms) + const newScale = calculateNewScale(bounds, mapWidth, mapHeight) - // Coordinates of the center of the room, relative to the global origin of the map - const roomCenterCoordinates = { - x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale, - y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale - }; + // Coordinates of the center of the room, relative to the global origin of the map + const roomCenterCoordinates = { + x: bounds.center.x * TILE_SIZE_IN_PIXELS * newScale, + y: bounds.center.y * TILE_SIZE_IN_PIXELS * newScale, + } - const newX = -roomCenterCoordinates.x + mapWidth / 2; - const newY = -roomCenterCoordinates.y + mapHeight / 2; + const newX = -roomCenterCoordinates.x + mapWidth / 2 + const newY = -roomCenterCoordinates.y + mapHeight / 2 - return { newScale, newX, newY }; + return { newScale, newX, newY } } function calculateNewScale(bounds, mapWidth, mapHeight) { - const width = bounds.max.x - bounds.min.x; - const height = bounds.max.y - bounds.min.y; + const width = bounds.max.x - bounds.min.x + const height = bounds.max.y - bounds.min.y - const scaleX = - (mapWidth - 2 * SIDEBAR_WIDTH) / - (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING); - const scaleY = - mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING); - const newScale = Math.min(scaleX, scaleY); + const scaleX = + (mapWidth - 2 * SIDEBAR_WIDTH) / + (width * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING) + const scaleY = + mapHeight / (height * TILE_SIZE_IN_PIXELS + 2 * VIEWPORT_PADDING) + const newScale = Math.min(scaleX, scaleY) - return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE); + return Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE) } |
