summaryrefslogtreecommitdiff
path: root/frontend/src/components/app/map
diff options
context:
space:
mode:
authorjc0b <j@jc0b.computer>2020-07-22 16:28:47 +0200
committerFabian Mastenbroek <mail.fabianm@gmail.com>2020-08-24 19:48:21 +0200
commitd7469b9ebb01cf36a78cc98aab31fa8f307c4f65 (patch)
treed0535fa0cfe95001302fbd2b0d046d51caab6ffd /frontend/src/components/app/map
parent67b6ec800df8e023efadb60ae5f7919030b19789 (diff)
parent9e7cb3bd367607b32e102c3a87b68b33c53dec46 (diff)
Merge branch 'master' onto working copy
Diffstat (limited to 'frontend/src/components/app/map')
-rw-r--r--frontend/src/components/app/map/LoadingScreen.js2
-rw-r--r--frontend/src/components/app/map/MapConstants.js3
-rw-r--r--frontend/src/components/app/map/MapStageComponent.js36
-rw-r--r--frontend/src/components/app/map/controls/ExportCanvasComponent.js2
-rw-r--r--frontend/src/components/app/map/controls/ScaleIndicatorComponent.js5
-rw-r--r--frontend/src/components/app/map/controls/ToolPanelComponent.js4
-rw-r--r--frontend/src/components/app/map/controls/ZoomControlComponent.js30
-rw-r--r--frontend/src/components/app/map/elements/Backdrop.js10
-rw-r--r--frontend/src/components/app/map/elements/RackFillBar.js35
-rw-r--r--frontend/src/components/app/map/elements/TilePlusIcon.js8
-rw-r--r--frontend/src/components/app/map/elements/WallSegment.js9
-rw-r--r--frontend/src/components/app/map/groups/GridGroup.js8
-rw-r--r--frontend/src/components/app/map/groups/RackGroup.js18
-rw-r--r--frontend/src/components/app/map/groups/RoomGroup.js30
-rw-r--r--frontend/src/components/app/map/groups/TileGroup.js4
-rw-r--r--frontend/src/components/app/map/groups/TopologyGroup.js20
-rw-r--r--frontend/src/components/app/map/groups/WallGroup.js2
-rw-r--r--frontend/src/components/app/map/layers/HoverLayerComponent.js34
-rw-r--r--frontend/src/components/app/map/layers/MapLayerComponent.js13
-rw-r--r--frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js2
-rw-r--r--frontend/src/components/app/map/layers/RoomHoverLayerComponent.js2
21 files changed, 90 insertions, 187 deletions
diff --git a/frontend/src/components/app/map/LoadingScreen.js b/frontend/src/components/app/map/LoadingScreen.js
index 03daa692..7efea9b0 100644
--- a/frontend/src/components/app/map/LoadingScreen.js
+++ b/frontend/src/components/app/map/LoadingScreen.js
@@ -3,7 +3,7 @@ import FontAwesome from 'react-fontawesome'
const LoadingScreen = () => (
<div className="display-4">
- <FontAwesome name="refresh" className="mr-4" spin/>
+ <FontAwesome name="refresh" className="mr-4" spin />
Loading your project...
</div>
)
diff --git a/frontend/src/components/app/map/MapConstants.js b/frontend/src/components/app/map/MapConstants.js
index 286920e2..0a970701 100644
--- a/frontend/src/components/app/map/MapConstants.js
+++ b/frontend/src/components/app/map/MapConstants.js
@@ -5,8 +5,7 @@ export const MAP_SIZE_IN_PIXELS = MAP_SIZE * TILE_SIZE_IN_PIXELS
export const OBJECT_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 5
export const TILE_PLUS_MARGIN_IN_PIXELS = TILE_SIZE_IN_PIXELS / 3
-export const OBJECT_SIZE_IN_PIXELS =
- TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
+export const OBJECT_SIZE_IN_PIXELS = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2
export const GRID_LINE_WIDTH_IN_PIXELS = 2
export const WALL_WIDTH_IN_PIXELS = TILE_SIZE_IN_PIXELS / 8
diff --git a/frontend/src/components/app/map/MapStageComponent.js b/frontend/src/components/app/map/MapStageComponent.js
index f1c2b211..cecb34de 100644
--- a/frontend/src/components/app/map/MapStageComponent.js
+++ b/frontend/src/components/app/map/MapStageComponent.js
@@ -43,19 +43,12 @@ class MapStageComponent extends React.Component {
}
updateDimensions() {
- this.props.setMapDimensions(
- jQuery(window).width(),
- jQuery(window).height() - NAVBAR_HEIGHT,
- )
+ this.props.setMapDimensions(jQuery(window).width(), jQuery(window).height() - NAVBAR_HEIGHT)
}
updateScale(e) {
e.preventDefault()
- this.props.zoomInOnPosition(
- e.deltaY < 0,
- this.state.mouseX,
- this.state.mouseY,
- )
+ this.props.zoomInOnPosition(e.deltaY < 0, this.state.mouseX, this.state.mouseY)
}
updateMousePosition() {
@@ -83,21 +76,14 @@ class MapStageComponent extends React.Component {
}
moveWithDelta(deltaX, deltaY) {
- this.props.setMapPositionWithBoundsCheck(
- this.props.mapPosition.x + deltaX,
- this.props.mapPosition.y + deltaY,
- )
+ this.props.setMapPositionWithBoundsCheck(this.props.mapPosition.x + deltaX, this.props.mapPosition.y + deltaY)
}
render() {
return (
- <Shortcuts
- name="MAP"
- handler={this.handleShortcuts.bind(this)}
- targetNodeSelector="body"
- >
+ <Shortcuts name="MAP" handler={this.handleShortcuts.bind(this)} targetNodeSelector="body">
<Stage
- ref={stage => {
+ ref={(stage) => {
this.stage = stage
}}
width={this.props.mapDimensions.width}
@@ -105,15 +91,9 @@ class MapStageComponent extends React.Component {
onMouseMove={this.updateMousePosition.bind(this)}
>
<Provider store={store}>
- <MapLayer/>
- <RoomHoverLayer
- mouseX={this.state.mouseX}
- mouseY={this.state.mouseY}
- />
- <ObjectHoverLayer
- mouseX={this.state.mouseX}
- mouseY={this.state.mouseY}
- />
+ <MapLayer />
+ <RoomHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
+ <ObjectHoverLayer mouseX={this.state.mouseX} mouseY={this.state.mouseY} />
</Provider>
</Stage>
</Shortcuts>
diff --git a/frontend/src/components/app/map/controls/ExportCanvasComponent.js b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
index d166bcc8..8487f47b 100644
--- a/frontend/src/components/app/map/controls/ExportCanvasComponent.js
+++ b/frontend/src/components/app/map/controls/ExportCanvasComponent.js
@@ -6,7 +6,7 @@ const ExportCanvasComponent = () => (
title="Export Canvas to PNG Image"
onClick={() => window['exportCanvasToImage']()}
>
- <span className="fa fa-camera"/>
+ <span className="fa fa-camera" />
</button>
)
diff --git a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
index daaf8ec6..54709482 100644
--- a/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
+++ b/frontend/src/components/app/map/controls/ScaleIndicatorComponent.js
@@ -3,10 +3,7 @@ import { TILE_SIZE_IN_METERS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
import './ScaleIndicatorComponent.css'
const ScaleIndicatorComponent = ({ scale }) => (
- <div
- className="scale-indicator"
- style={{ width: TILE_SIZE_IN_PIXELS * scale }}
- >
+ <div className="scale-indicator" style={{ width: TILE_SIZE_IN_PIXELS * scale }}>
{TILE_SIZE_IN_METERS}m
</div>
)
diff --git a/frontend/src/components/app/map/controls/ToolPanelComponent.js b/frontend/src/components/app/map/controls/ToolPanelComponent.js
index e3bb1dbb..e0e4d554 100644
--- a/frontend/src/components/app/map/controls/ToolPanelComponent.js
+++ b/frontend/src/components/app/map/controls/ToolPanelComponent.js
@@ -5,8 +5,8 @@ import './ToolPanelComponent.css'
const ToolPanelComponent = () => (
<div className="tool-panel">
- <ZoomControlContainer/>
- <ExportCanvasComponent/>
+ <ZoomControlContainer />
+ <ExportCanvasComponent />
</div>
)
diff --git a/frontend/src/components/app/map/controls/ZoomControlComponent.js b/frontend/src/components/app/map/controls/ZoomControlComponent.js
index bd6527a6..65944bea 100644
--- a/frontend/src/components/app/map/controls/ZoomControlComponent.js
+++ b/frontend/src/components/app/map/controls/ZoomControlComponent.js
@@ -3,21 +3,21 @@ import React from 'react'
const ZoomControlComponent = ({ zoomInOnCenter }) => {
return (
<span>
- <button
- className="btn btn-default btn-circle btn-sm mr-1"
- title="Zoom in"
- onClick={() => zoomInOnCenter(true)}
- >
- <span className="fa fa-plus"/>
- </button>
- <button
- className="btn btn-default btn-circle btn-sm mr-1"
- title="Zoom out"
- onClick={() => zoomInOnCenter(false)}
- >
- <span className="fa fa-minus"/>
- </button>
- </span>
+ <button
+ className="btn btn-default btn-circle btn-sm mr-1"
+ title="Zoom in"
+ onClick={() => zoomInOnCenter(true)}
+ >
+ <span className="fa fa-plus" />
+ </button>
+ <button
+ className="btn btn-default btn-circle btn-sm mr-1"
+ title="Zoom out"
+ onClick={() => zoomInOnCenter(false)}
+ >
+ <span className="fa fa-minus" />
+ </button>
+ </span>
)
}
diff --git a/frontend/src/components/app/map/elements/Backdrop.js b/frontend/src/components/app/map/elements/Backdrop.js
index 556d6a7b..8ccfe584 100644
--- a/frontend/src/components/app/map/elements/Backdrop.js
+++ b/frontend/src/components/app/map/elements/Backdrop.js
@@ -3,14 +3,6 @@ import { Rect } from 'react-konva'
import { BACKDROP_COLOR } from '../../../../util/colors'
import { MAP_SIZE_IN_PIXELS } from '../MapConstants'
-const Backdrop = () => (
- <Rect
- x={0}
- y={0}
- width={MAP_SIZE_IN_PIXELS}
- height={MAP_SIZE_IN_PIXELS}
- fill={BACKDROP_COLOR}
- />
-)
+const Backdrop = () => <Rect x={0} y={0} width={MAP_SIZE_IN_PIXELS} height={MAP_SIZE_IN_PIXELS} fill={BACKDROP_COLOR} />
export default Backdrop
diff --git a/frontend/src/components/app/map/elements/RackFillBar.js b/frontend/src/components/app/map/elements/RackFillBar.js
index 6e56e059..8c573a6f 100644
--- a/frontend/src/components/app/map/elements/RackFillBar.js
+++ b/frontend/src/components/app/map/elements/RackFillBar.js
@@ -21,27 +21,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
const x =
positionX * TILE_SIZE_IN_PIXELS +
OBJECT_MARGIN_IN_PIXELS +
- (type === 'space'
- ? halfOfObjectBorderWidth
- : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
- const startY =
- positionY * TILE_SIZE_IN_PIXELS +
- OBJECT_MARGIN_IN_PIXELS +
- halfOfObjectBorderWidth
- const width =
- 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) -
- halfOfObjectBorderWidth
- const fullHeight =
- TILE_SIZE_IN_PIXELS -
- OBJECT_MARGIN_IN_PIXELS * 2 -
- OBJECT_BORDER_WIDTH_IN_PIXELS
+ (type === 'space' ? halfOfObjectBorderWidth : 0.5 * (TILE_SIZE_IN_PIXELS - 2 * OBJECT_MARGIN_IN_PIXELS))
+ const startY = positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS + halfOfObjectBorderWidth
+ const width = 0.5 * (TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2) - halfOfObjectBorderWidth
+ const fullHeight = TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2 - OBJECT_BORDER_WIDTH_IN_PIXELS
const fractionHeight = fillFraction * fullHeight
const fractionY =
- (positionY + 1) * TILE_SIZE_IN_PIXELS -
- OBJECT_MARGIN_IN_PIXELS -
- halfOfObjectBorderWidth -
- fractionHeight
+ (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth - fractionHeight
return (
<Group>
@@ -50,22 +37,14 @@ const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
y={startY}
width={width}
height={fullHeight}
- fill={
- type === 'space'
- ? RACK_SPACE_BAR_BACKGROUND_COLOR
- : RACK_ENERGY_BAR_BACKGROUND_COLOR
- }
+ fill={type === 'space' ? RACK_SPACE_BAR_BACKGROUND_COLOR : RACK_ENERGY_BAR_BACKGROUND_COLOR}
/>
<Rect
x={x}
y={fractionY}
width={width}
height={fractionHeight}
- fill={
- type === 'space'
- ? RACK_SPACE_BAR_FILL_COLOR
- : RACK_ENERGY_BAR_FILL_COLOR
- }
+ fill={type === 'space' ? RACK_SPACE_BAR_FILL_COLOR : RACK_ENERGY_BAR_FILL_COLOR}
/>
<ImageComponent
src={'/img/topology/rack-' + type + '-icon.png'}
diff --git a/frontend/src/components/app/map/elements/TilePlusIcon.js b/frontend/src/components/app/map/elements/TilePlusIcon.js
index dd6e0beb..be3a00a8 100644
--- a/frontend/src/components/app/map/elements/TilePlusIcon.js
+++ b/frontend/src/components/app/map/elements/TilePlusIcon.js
@@ -10,16 +10,12 @@ const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
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,
+ pixelY + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
],
[
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,
+ pixelX + TILE_SIZE_IN_PIXELS * mapScale - TILE_PLUS_MARGIN_IN_PIXELS * mapScale,
pixelY + 0.5 * TILE_SIZE_IN_PIXELS * mapScale,
],
]
diff --git a/frontend/src/components/app/map/elements/WallSegment.js b/frontend/src/components/app/map/elements/WallSegment.js
index d1ba6157..8aa2aebf 100644
--- a/frontend/src/components/app/map/elements/WallSegment.js
+++ b/frontend/src/components/app/map/elements/WallSegment.js
@@ -22,14 +22,7 @@ const WallSegment = ({ wallSegment }) => {
]
}
- return (
- <Line
- points={points}
- lineCap="round"
- stroke={WALL_COLOR}
- strokeWidth={WALL_WIDTH_IN_PIXELS}
- />
- )
+ return <Line points={points} lineCap="round" stroke={WALL_COLOR} strokeWidth={WALL_WIDTH_IN_PIXELS} />
}
WallSegment.propTypes = {
diff --git a/frontend/src/components/app/map/groups/GridGroup.js b/frontend/src/components/app/map/groups/GridGroup.js
index 10554834..ebc00244 100644
--- a/frontend/src/components/app/map/groups/GridGroup.js
+++ b/frontend/src/components/app/map/groups/GridGroup.js
@@ -4,13 +4,13 @@ import { GRID_COLOR } from '../../../../util/colors'
import { GRID_LINE_WIDTH_IN_PIXELS, MAP_SIZE, MAP_SIZE_IN_PIXELS, TILE_SIZE_IN_PIXELS } from '../MapConstants'
const MAP_COORDINATE_ENTRIES = Array.from(new Array(MAP_SIZE), (x, i) => i)
-const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const HORIZONTAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
0,
index * TILE_SIZE_IN_PIXELS,
MAP_SIZE_IN_PIXELS,
index * TILE_SIZE_IN_PIXELS,
])
-const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
+const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [
index * TILE_SIZE_IN_PIXELS,
0,
index * TILE_SIZE_IN_PIXELS,
@@ -19,9 +19,7 @@ const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map(index => [
const GridGroup = () => (
<Group>
- {HORIZONTAL_POINT_PAIRS.concat(
- VERTICAL_POINT_PAIRS,
- ).map((points, index) => (
+ {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => (
<Line
key={index}
points={points}
diff --git a/frontend/src/components/app/map/groups/RackGroup.js b/frontend/src/components/app/map/groups/RackGroup.js
index 5d4ee5e2..eb6dc24a 100644
--- a/frontend/src/components/app/map/groups/RackGroup.js
+++ b/frontend/src/components/app/map/groups/RackGroup.js
@@ -9,22 +9,10 @@ import TileObject from '../elements/TileObject'
const RackGroup = ({ tile }) => {
return (
<Group>
- <TileObject
- positionX={tile.positionX}
- positionY={tile.positionY}
- color={RACK_BACKGROUND_COLOR}
- />
+ <TileObject positionX={tile.positionX} positionY={tile.positionY} color={RACK_BACKGROUND_COLOR} />
<Group>
- <RackSpaceFillContainer
- tileId={tile._id}
- positionX={tile.positionX}
- positionY={tile.positionY}
- />
- <RackEnergyFillContainer
- tileId={tile._id}
- positionX={tile.positionX}
- positionY={tile.positionY}
- />
+ <RackSpaceFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
+ <RackEnergyFillContainer tileId={tile._id} positionX={tile.positionX} positionY={tile.positionY} />
</Group>
</Group>
)
diff --git a/frontend/src/components/app/map/groups/RoomGroup.js b/frontend/src/components/app/map/groups/RoomGroup.js
index 4e3c7410..1fd54687 100644
--- a/frontend/src/components/app/map/groups/RoomGroup.js
+++ b/frontend/src/components/app/map/groups/RoomGroup.js
@@ -5,17 +5,12 @@ import TileContainer from '../../../../containers/app/map/TileContainer'
import WallContainer from '../../../../containers/app/map/WallContainer'
import Shapes from '../../../../shapes/index'
-const RoomGroup = ({
- room,
- interactionLevel,
- currentRoomInConstruction,
- onClick,
- }) => {
+const RoomGroup = ({ room, interactionLevel, currentRoomInConstruction, onClick }) => {
if (currentRoomInConstruction === room._id) {
return (
<Group onClick={onClick}>
- {room.tileIds.map(tileId => (
- <TileContainer key={tileId} tileId={tileId} newTile={true}/>
+ {room.tileIds.map((tileId) => (
+ <TileContainer key={tileId} tileId={tileId} newTile={true} />
))}
</Group>
)
@@ -25,26 +20,23 @@ const RoomGroup = ({
<Group onClick={onClick}>
{(() => {
if (
- (interactionLevel.mode === 'RACK' ||
- interactionLevel.mode === 'MACHINE') &&
+ (interactionLevel.mode === 'RACK' || interactionLevel.mode === 'MACHINE') &&
interactionLevel.roomId === room._id
) {
return [
room.tileIds
- .filter(tileId => tileId !== interactionLevel.tileId)
- .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
- <GrayContainer key={-1}/>,
+ .filter((tileId) => tileId !== interactionLevel.tileId)
+ .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
+ <GrayContainer key={-1} />,
room.tileIds
- .filter(tileId => tileId === interactionLevel.tileId)
- .map(tileId => <TileContainer key={tileId} tileId={tileId}/>),
+ .filter((tileId) => tileId === interactionLevel.tileId)
+ .map((tileId) => <TileContainer key={tileId} tileId={tileId} />),
]
} else {
- return room.tileIds.map(tileId => (
- <TileContainer key={tileId} tileId={tileId}/>
- ))
+ return room.tileIds.map((tileId) => <TileContainer key={tileId} tileId={tileId} />)
}
})()}
- <WallContainer roomId={room._id}/>
+ <WallContainer roomId={room._id} />
</Group>
)
}
diff --git a/frontend/src/components/app/map/groups/TileGroup.js b/frontend/src/components/app/map/groups/TileGroup.js
index e984f05b..1e106823 100644
--- a/frontend/src/components/app/map/groups/TileGroup.js
+++ b/frontend/src/components/app/map/groups/TileGroup.js
@@ -9,7 +9,7 @@ import RoomTile from '../elements/RoomTile'
const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
let tileObject
if (tile.rackId) {
- tileObject = <RackContainer tile={tile}/>
+ tileObject = <RackContainer tile={tile} />
} else {
tileObject = null
}
@@ -21,7 +21,7 @@ const TileGroup = ({ tile, newTile, roomLoad, onClick }) => {
return (
<Group onClick={() => onClick(tile)}>
- <RoomTile tile={tile} color={color}/>
+ <RoomTile tile={tile} color={color} />
{tileObject}
</Group>
)
diff --git a/frontend/src/components/app/map/groups/TopologyGroup.js b/frontend/src/components/app/map/groups/TopologyGroup.js
index a40a1d41..6096fc8b 100644
--- a/frontend/src/components/app/map/groups/TopologyGroup.js
+++ b/frontend/src/components/app/map/groups/TopologyGroup.js
@@ -6,14 +6,14 @@ import Shapes from '../../../../shapes/index'
const TopologyGroup = ({ topology, interactionLevel }) => {
if (!topology) {
- return <Group/>
+ return <Group />
}
if (interactionLevel.mode === 'BUILDING') {
return (
<Group>
- {topology.roomIds.map(roomId => (
- <RoomContainer key={roomId} roomId={roomId}/>
+ {topology.roomIds.map((roomId) => (
+ <RoomContainer key={roomId} roomId={roomId} />
))}
</Group>
)
@@ -22,12 +22,16 @@ const TopologyGroup = ({ topology, interactionLevel }) => {
return (
<Group>
{topology.roomIds
- .filter(roomId => roomId !== interactionLevel.roomId)
- .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
- {interactionLevel.mode === 'ROOM' ? <GrayContainer/> : null}
+ .filter((roomId) => roomId !== interactionLevel.roomId)
+ .map((roomId) => (
+ <RoomContainer key={roomId} roomId={roomId} />
+ ))}
+ {interactionLevel.mode === 'ROOM' ? <GrayContainer /> : null}
{topology.roomIds
- .filter(roomId => roomId === interactionLevel.roomId)
- .map(roomId => <RoomContainer key={roomId} roomId={roomId}/>)}
+ .filter((roomId) => roomId === interactionLevel.roomId)
+ .map((roomId) => (
+ <RoomContainer key={roomId} roomId={roomId} />
+ ))}
</Group>
)
}
diff --git a/frontend/src/components/app/map/groups/WallGroup.js b/frontend/src/components/app/map/groups/WallGroup.js
index 81c72d94..7b0f5ca0 100644
--- a/frontend/src/components/app/map/groups/WallGroup.js
+++ b/frontend/src/components/app/map/groups/WallGroup.js
@@ -9,7 +9,7 @@ const WallGroup = ({ tiles }) => {
return (
<Group>
{deriveWallLocations(tiles).map((wallSegment, index) => (
- <WallSegment key={index} wallSegment={wallSegment}/>
+ <WallSegment key={index} wallSegment={wallSegment} />
))}
</Group>
)
diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
index 25c9c412..bead87de 100644
--- a/frontend/src/components/app/map/layers/HoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -26,18 +26,13 @@ class HoverLayerComponent extends React.Component {
}
const positionX = Math.floor(
- (this.props.mouseX - this.props.mapPosition.x) /
- (this.props.mapScale * TILE_SIZE_IN_PIXELS),
+ (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),
+ (this.props.mouseY - this.props.mapPosition.y) / (this.props.mapScale * TILE_SIZE_IN_PIXELS)
)
- if (
- positionX !== this.state.positionX ||
- positionY !== this.state.positionY
- ) {
+ if (positionX !== this.state.positionX || positionY !== this.state.positionY) {
this.setState({
positionX,
positionY,
@@ -48,15 +43,11 @@ class HoverLayerComponent extends React.Component {
render() {
if (!this.props.isEnabled()) {
- return <Layer/>
+ return <Layer />
}
- 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
+ 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}>
@@ -66,16 +57,15 @@ class HoverLayerComponent extends React.Component {
scale={this.props.mapScale}
isValid={this.state.validity}
onClick={() =>
- this.state.validity
- ? this.props.onClick(this.state.positionX, this.state.positionY)
- : undefined}
+ 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.mapScale,
- })
+ pixelX,
+ pixelY,
+ scale: this.props.mapScale,
+ })
: undefined}
</Layer>
)
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
index 940057f9..8ee14c9c 100644
--- a/frontend/src/components/app/map/layers/MapLayerComponent.js
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -6,15 +6,10 @@ import GridGroup from '../groups/GridGroup'
const MapLayerComponent = ({ mapPosition, mapScale }) => (
<Layer>
- <Group
- x={mapPosition.x}
- y={mapPosition.y}
- scaleX={mapScale}
- scaleY={mapScale}
- >
- <Backdrop/>
- <TopologyContainer/>
- <GridGroup/>
+ <Group x={mapPosition.x} y={mapPosition.y} scaleX={mapScale} scaleY={mapScale}>
+ <Backdrop />
+ <TopologyContainer />
+ <GridGroup />
</Group>
</Layer>
)
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
index 31689635..661fc255 100644
--- a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -2,7 +2,7 @@ import React from 'react'
import TilePlusIcon from '../elements/TilePlusIcon'
import HoverLayerComponent from './HoverLayerComponent'
-const ObjectHoverLayerComponent = props => (
+const ObjectHoverLayerComponent = (props) => (
<HoverLayerComponent {...props}>
<TilePlusIcon {...props} />
</HoverLayerComponent>
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
index d3d5e9b2..887e2891 100644
--- a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
+++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -1,6 +1,6 @@
import React from 'react'
import HoverLayerComponent from './HoverLayerComponent'
-const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />
+const RoomHoverLayerComponent = (props) => <HoverLayerComponent {...props} />
export default RoomHoverLayerComponent