Move zoom level and map position info to store

4 files changed, 57 insertions, 59 deletions

diff --git a/src/components/map/MapStage.js b/src/components/map/MapStageComponent.js
index ab2f0839..10d84948 100644
--- a/src/components/map/MapStage.js
+++ b/src/components/map/MapStageComponent.js
@@ -1,13 +1,11 @@
 import React from "react";
-import {Group, Layer, Stage} from "react-konva";
+import {Stage} from "react-konva";
 import {Shortcuts} from "react-shortcuts";
-import DatacenterContainer from "../../containers/map/DatacenterContainer";
+import MapLayer from "../../containers/map/layers/MapLayer";
 import ObjectHoverLayer from "../../containers/map/layers/ObjectHoverLayer";
 import RoomHoverLayer from "../../containers/map/layers/RoomHoverLayer";
 import jQuery from "../../util/jquery";
 import {NAVBAR_HEIGHT} from "../navigation/Navbar";
-import Backdrop from "./elements/Backdrop";
-import GridGroup from "./groups/GridGroup";
 import {
     MAP_MAX_SCALE,
     MAP_MIN_SCALE,
@@ -16,13 +14,8 @@ import {
     MAP_SIZE_IN_PIXELS
 } from "./MapConstants";
 
-class MapStage extends React.Component {
+class MapStageComponent extends React.Component {
     state = {
-        width: 600,
-        height: 400,
-        x: 0,
-        y: 0,
-        scale: 1,
         mouseX: 0,
         mouseY: 0
     };
@@ -42,23 +35,23 @@ class MapStage extends React.Component {
     }
 
     updateDimensions() {
-        this.setState({width: jQuery(window).width(), height: jQuery(window).height() - NAVBAR_HEIGHT});
+        this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT);
     }
 
     updateScale(e) {
         e.preventDefault();
         const mousePointsTo = {
-            x: this.state.mouseX / this.state.scale - this.state.x / this.state.scale,
-            y: this.state.mouseY / this.state.scale - this.state.y / this.state.scale,
+            x: this.state.mouseX / this.props.mapScale - this.props.mapPosition.x / this.props.mapScale,
+            y: this.state.mouseY / this.props.mapScale - this.props.mapPosition.y / this.props.mapScale,
         };
-        const newScale = e.deltaY < 0 ? this.state.scale * MAP_SCALE_PER_EVENT : this.state.scale / MAP_SCALE_PER_EVENT;
+        const newScale = e.deltaY < 0 ? this.props.mapScale * MAP_SCALE_PER_EVENT : this.props.mapScale / MAP_SCALE_PER_EVENT;
         const boundedScale = Math.min(Math.max(MAP_MIN_SCALE, newScale), MAP_MAX_SCALE);
 
         const newX = -(mousePointsTo.x - this.state.mouseX / boundedScale) * boundedScale;
         const newY = -(mousePointsTo.y - this.state.mouseY / boundedScale) * boundedScale;
 
         this.setPositionWithBoundsCheck(newX, newY);
-        this.setState({scale: boundedScale});
+        this.props.setMapScale(boundedScale);
     }
 
     updateMousePosition() {
@@ -86,19 +79,19 @@ class MapStage extends React.Component {
     }
 
     moveWithDelta(deltaX, deltaY) {
-        this.setPositionWithBoundsCheck(this.state.x + deltaX, this.state.y + deltaY);
+        this.setPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY);
     }
 
     setPositionWithBoundsCheck(newX, newY) {
-        const scaledMapSize = MAP_SIZE_IN_PIXELS * this.state.scale;
-        const updatedPosition = {
-            x: newX > 0 ? 0 :
-                (newX < -scaledMapSize + this.state.width ? -scaledMapSize + this.state.width : newX),
-            y: newY > 0 ? 0 :
-                (newY < -scaledMapSize + this.state.height ? -scaledMapSize + this.state.height : newY)
-        };
+        const scaledMapSize = MAP_SIZE_IN_PIXELS * this.props.mapScale;
+        const updatedX = newX > 0 ? 0 :
+            (newX < -scaledMapSize + this.props.mapDimensions.width
+                ? -scaledMapSize + this.props.mapDimensions.width : newX);
+        const updatedY = newY > 0 ? 0 :
+            (newY < -scaledMapSize + this.props.mapDimensions.height
+                ? -scaledMapSize + this.props.mapDimensions.height : newY);
 
-        this.setState(updatedPosition);
+        this.props.setMapPosition(updatedX, updatedY);
     }
 
     render() {
@@ -106,30 +99,18 @@ class MapStage extends React.Component {
             <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
                 <Stage
                     ref={(stage) => {this.stage = stage;}}
-                    width={this.state.width}
-                    height={this.state.height}
+                    width={this.props.mapDimensions.width}
+                    height={this.props.mapDimensions.height}
                     onMouseMove={this.updateMousePosition.bind(this)}
                 >
-                    <Layer>
-                        <Group x={this.state.x} y={this.state.y} scaleX={this.state.scale} scaleY={this.state.scale}>
-                            <Backdrop/>
-                            <DatacenterContainer/>
-                            <GridGroup/>
-                        </Group>
-                    </Layer>
+                    <MapLayer/>
                     <RoomHoverLayer
-                        mainGroupX={this.state.x}
-                        mainGroupY={this.state.y}
                         mouseX={this.state.mouseX}
                         mouseY={this.state.mouseY}
-                        scale={this.state.scale}
                     />
                     <ObjectHoverLayer
-                        mainGroupX={this.state.x}
-                        mainGroupY={this.state.y}
                         mouseX={this.state.mouseX}
                         mouseY={this.state.mouseY}
-                        scale={this.state.scale}
                     />
                 </Stage>
             </Shortcuts>
@@ -137,4 +118,4 @@ class MapStage extends React.Component {
     }
 }
 
-export default MapStage;
+export default MapStageComponent;
diff --git a/src/components/map/elements/TilePlusIcon.js b/src/components/map/elements/TilePlusIcon.js
index 3327525c..ed5ef5b5 100644
--- a/src/components/map/elements/TilePlusIcon.js
+++ b/src/components/map/elements/TilePlusIcon.js
@@ -4,19 +4,19 @@ import {Group, Line} from "react-konva";
 import {TILE_PLUS_COLOR} from "../../../colors/index";
 import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
 
-const TilePlusIcon = ({pixelX, pixelY, scale}) => {
+const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
     const linePoints = [
         [
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            pixelY + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelX + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
         ],
         [
-            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
-            pixelX + TILE_SIZE_IN_PIXELS * scale - TILE_PLUS_MARGIN_IN_PIXELS * scale,
-            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * scale,
+            pixelX + TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
+            pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
+            pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
         ],
     ];
     return (
@@ -27,7 +27,7 @@ const TilePlusIcon = ({pixelX, pixelY, scale}) => {
                     points={points}
                     lineCap="round"
                     stroke={TILE_PLUS_COLOR}
-                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * scale}
+                    strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
                     listening={false}
                 />
             ))}
@@ -38,6 +38,7 @@ const TilePlusIcon = ({pixelX, pixelY, scale}) => {
 TilePlusIcon.propTypes = {
     pixelX: PropTypes.number,
     pixelY: PropTypes.number,
+    mapScale: PropTypes.number,
 };
 
 export default TilePlusIcon;
diff --git a/src/components/map/layers/HoverLayerComponent.js b/src/components/map/layers/HoverLayerComponent.js
index 54a63383..aa2e8313 100644
--- a/src/components/map/layers/HoverLayerComponent.js
+++ b/src/components/map/layers/HoverLayerComponent.js
@@ -8,9 +8,8 @@ class HoverLayerComponent extends React.Component {
     static propTypes = {
         mouseX: PropTypes.number.isRequired,
         mouseY: PropTypes.number.isRequired,
-        mainGroupX: PropTypes.number.isRequired,
-        mainGroupY: PropTypes.number.isRequired,
-        scale: PropTypes.number.isRequired,
+        mapPosition: PropTypes.object.isRequired,
+        mapScale: PropTypes.number.isRequired,
         isEnabled: PropTypes.func.isRequired,
         onClick: PropTypes.func.isRequired,
     };
@@ -26,8 +25,8 @@ class HoverLayerComponent extends React.Component {
             return;
         }
 
-        const positionX = Math.floor((this.props.mouseX - this.props.mainGroupX) / (this.props.scale * TILE_SIZE_IN_PIXELS));
-        const positionY = Math.floor((this.props.mouseY - this.props.mainGroupY) / (this.props.scale * TILE_SIZE_IN_PIXELS));
+        const positionX = Math.floor((this.props.mouseX - this.props.mapPosition.x) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
+        const positionY = Math.floor((this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS));
 
         if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
             this.setState({positionX, positionY, validity: this.props.isValid(positionX, positionY)});
@@ -39,21 +38,21 @@ class HoverLayerComponent extends React.Component {
             return <Layer/>;
         }
 
-        const pixelX = this.props.scale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mainGroupX;
-        const pixelY = this.props.scale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mainGroupY;
+        const pixelX = this.props.mapScale * this.state.positionX * TILE_SIZE_IN_PIXELS + this.props.mapPosition.x;
+        const pixelY = this.props.mapScale * this.state.positionY * TILE_SIZE_IN_PIXELS + this.props.mapPosition.y;
 
         return (
             <Layer opacity={0.6}>
                 <HoverTile
                     pixelX={pixelX}
                     pixelY={pixelY}
-                    scale={this.props.scale}
+                    scale={this.props.mapScale}
                     isValid={this.state.validity}
                     onClick={() => this.state.validity ?
                         this.props.onClick(this.state.positionX, this.state.positionY) : undefined}
                 />
                 {this.props.children ?
-                    React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.scale}) :
+                    React.cloneElement(this.props.children, {pixelX, pixelY, scale: this.props.mapScale}) :
                     undefined
                 }
             </Layer>
diff --git a/src/components/map/layers/MapLayerComponent.js b/src/components/map/layers/MapLayerComponent.js
new file mode 100644
index 00000000..3476bbc9
--- /dev/null
+++ b/src/components/map/layers/MapLayerComponent.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import {Group, Layer} from "react-konva";
+import DatacenterContainer from "../../../containers/map/DatacenterContainer";
+import Backdrop from "../elements/Backdrop";
+import GridGroup from "../groups/GridGroup";
+
+const MapLayerComponent = ({mapPosition, mapScale}) => (
+    <Layer>
+        <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+            <Backdrop/>
+            <DatacenterContainer/>
+            <GridGroup/>
+        </Group>
+    </Layer>
+);
+
+export default MapLayerComponent;