summaryrefslogtreecommitdiff
path: root/src/components/app/map/elements
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/app/map/elements')
-rw-r--r--src/components/app/map/elements/Backdrop.js20
-rw-r--r--src/components/app/map/elements/GrayLayer.js24
-rw-r--r--src/components/app/map/elements/HoverTile.js39
-rw-r--r--src/components/app/map/elements/ImageComponent.js74
-rw-r--r--src/components/app/map/elements/RackFillBar.js124
-rw-r--r--src/components/app/map/elements/RoomTile.js22
-rw-r--r--src/components/app/map/elements/TileObject.js36
-rw-r--r--src/components/app/map/elements/TilePlusIcon.js78
-rw-r--r--src/components/app/map/elements/WallSegment.js58
9 files changed, 256 insertions, 219 deletions
diff --git a/src/components/app/map/elements/Backdrop.js b/src/components/app/map/elements/Backdrop.js
index 9c01df63..57414463 100644
--- a/src/components/app/map/elements/Backdrop.js
+++ b/src/components/app/map/elements/Backdrop.js
@@ -1,16 +1,16 @@
import React from "react";
-import {Rect} from "react-konva";
-import {BACKDROP_COLOR} from "../../../../util/colors";
-import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+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}
- />
+ <Rect
+ x={0}
+ y={0}
+ width={MAP_SIZE_IN_PIXELS}
+ height={MAP_SIZE_IN_PIXELS}
+ fill={BACKDROP_COLOR}
+ />
);
export default Backdrop;
diff --git a/src/components/app/map/elements/GrayLayer.js b/src/components/app/map/elements/GrayLayer.js
index c5994d06..28fadd8a 100644
--- a/src/components/app/map/elements/GrayLayer.js
+++ b/src/components/app/map/elements/GrayLayer.js
@@ -1,17 +1,17 @@
import React from "react";
-import {Rect} from "react-konva";
-import {GRAYED_OUT_AREA_COLOR} from "../../../../util/colors";
-import {MAP_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import { GRAYED_OUT_AREA_COLOR } from "../../../../util/colors";
+import { MAP_SIZE_IN_PIXELS } from "../MapConstants";
-const GrayLayer = ({onClick}) => (
- <Rect
- x={0}
- y={0}
- width={MAP_SIZE_IN_PIXELS}
- height={MAP_SIZE_IN_PIXELS}
- fill={GRAYED_OUT_AREA_COLOR}
- onClick={onClick}
- />
+const GrayLayer = ({ onClick }) => (
+ <Rect
+ x={0}
+ y={0}
+ width={MAP_SIZE_IN_PIXELS}
+ height={MAP_SIZE_IN_PIXELS}
+ fill={GRAYED_OUT_AREA_COLOR}
+ onClick={onClick}
+ />
);
export default GrayLayer;
diff --git a/src/components/app/map/elements/HoverTile.js b/src/components/app/map/elements/HoverTile.js
index fc12cbdd..42e6547c 100644
--- a/src/components/app/map/elements/HoverTile.js
+++ b/src/components/app/map/elements/HoverTile.js
@@ -1,27 +1,30 @@
import PropTypes from "prop-types";
import React from "react";
-import {Rect} from "react-konva";
-import {ROOM_HOVER_INVALID_COLOR, ROOM_HOVER_VALID_COLOR} from "../../../../util/colors";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import {
+ ROOM_HOVER_INVALID_COLOR,
+ ROOM_HOVER_VALID_COLOR
+} from "../../../../util/colors";
+import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
-const HoverTile = ({pixelX, pixelY, isValid, scale, onClick}) => (
- <Rect
- x={pixelX}
- y={pixelY}
- scaleX={scale}
- scaleY={scale}
- width={TILE_SIZE_IN_PIXELS}
- height={TILE_SIZE_IN_PIXELS}
- fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
- onClick={onClick}
- />
+const HoverTile = ({ pixelX, pixelY, isValid, scale, onClick }) => (
+ <Rect
+ x={pixelX}
+ y={pixelY}
+ scaleX={scale}
+ scaleY={scale}
+ width={TILE_SIZE_IN_PIXELS}
+ height={TILE_SIZE_IN_PIXELS}
+ fill={isValid ? ROOM_HOVER_VALID_COLOR : ROOM_HOVER_INVALID_COLOR}
+ onClick={onClick}
+ />
);
HoverTile.propTypes = {
- pixelX: PropTypes.number.isRequired,
- pixelY: PropTypes.number.isRequired,
- isValid: PropTypes.bool.isRequired,
- onClick: PropTypes.func.isRequired,
+ pixelX: PropTypes.number.isRequired,
+ pixelY: PropTypes.number.isRequired,
+ isValid: PropTypes.bool.isRequired,
+ onClick: PropTypes.func.isRequired
};
export default HoverTile;
diff --git a/src/components/app/map/elements/ImageComponent.js b/src/components/app/map/elements/ImageComponent.js
index 486296ea..cf41ddfe 100644
--- a/src/components/app/map/elements/ImageComponent.js
+++ b/src/components/app/map/elements/ImageComponent.js
@@ -1,48 +1,48 @@
import PropTypes from "prop-types";
import React from "react";
-import {Image} from "react-konva";
+import { Image } from "react-konva";
class ImageComponent extends React.Component {
- static imageCaches = {};
- static propTypes = {
- src: PropTypes.string.isRequired,
- x: PropTypes.number.isRequired,
- y: PropTypes.number.isRequired,
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- opacity: PropTypes.number.isRequired,
- };
-
- state = {
- image: null
- };
+ static imageCaches = {};
+ static propTypes = {
+ src: PropTypes.string.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ opacity: PropTypes.number.isRequired
+ };
- componentDidMount() {
- if (ImageComponent.imageCaches[this.props.src]) {
- this.setState({image: ImageComponent.imageCaches[this.props.src]});
- return;
- }
+ state = {
+ image: null
+ };
- const image = new window.Image();
- image.src = this.props.src;
- image.onload = () => {
- this.setState({image});
- ImageComponent.imageCaches[this.props.src] = image;
- }
+ componentDidMount() {
+ if (ImageComponent.imageCaches[this.props.src]) {
+ this.setState({ image: ImageComponent.imageCaches[this.props.src] });
+ return;
}
- render() {
- return (
- <Image
- image={this.state.image}
- x={this.props.x}
- y={this.props.y}
- width={this.props.width}
- height={this.props.height}
- opacity={this.props.opacity}
- />
- )
- }
+ const image = new window.Image();
+ image.src = this.props.src;
+ image.onload = () => {
+ this.setState({ image });
+ ImageComponent.imageCaches[this.props.src] = image;
+ };
+ }
+
+ render() {
+ return (
+ <Image
+ image={this.state.image}
+ x={this.props.x}
+ y={this.props.y}
+ width={this.props.width}
+ height={this.props.height}
+ opacity={this.props.opacity}
+ />
+ );
+ }
}
export default ImageComponent;
diff --git a/src/components/app/map/elements/RackFillBar.js b/src/components/app/map/elements/RackFillBar.js
index 3a8a1137..43701d97 100644
--- a/src/components/app/map/elements/RackFillBar.js
+++ b/src/components/app/map/elements/RackFillBar.js
@@ -1,67 +1,89 @@
import PropTypes from "prop-types";
import React from "react";
-import {Group, Rect} from "react-konva";
+import { Group, Rect } from "react-konva";
import {
- RACK_ENERGY_BAR_BACKGROUND_COLOR,
- RACK_ENERGY_BAR_FILL_COLOR,
- RACK_SPACE_BAR_BACKGROUND_COLOR,
- RACK_SPACE_BAR_FILL_COLOR
+ RACK_ENERGY_BAR_BACKGROUND_COLOR,
+ RACK_ENERGY_BAR_FILL_COLOR,
+ RACK_SPACE_BAR_BACKGROUND_COLOR,
+ RACK_SPACE_BAR_FILL_COLOR
} from "../../../../util/colors";
import {
- OBJECT_BORDER_WIDTH_IN_PIXELS,
- OBJECT_MARGIN_IN_PIXELS,
- RACK_FILL_ICON_OPACITY,
- RACK_FILL_ICON_WIDTH,
- TILE_SIZE_IN_PIXELS
+ OBJECT_BORDER_WIDTH_IN_PIXELS,
+ OBJECT_MARGIN_IN_PIXELS,
+ RACK_FILL_ICON_OPACITY,
+ RACK_FILL_ICON_WIDTH,
+ TILE_SIZE_IN_PIXELS
} from "../MapConstants";
import ImageComponent from "./ImageComponent";
-const RackFillBar = ({positionX, positionY, type, fillFraction}) => {
- const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
- 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;
+const RackFillBar = ({ positionX, positionY, type, fillFraction }) => {
+ const halfOfObjectBorderWidth = OBJECT_BORDER_WIDTH_IN_PIXELS / 2;
+ 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;
- const fractionHeight = fillFraction * fullHeight;
- const fractionY = (positionY + 1) * TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS - halfOfObjectBorderWidth
- - fractionHeight;
+ const fractionHeight = fillFraction * fullHeight;
+ const fractionY =
+ (positionY + 1) * TILE_SIZE_IN_PIXELS -
+ OBJECT_MARGIN_IN_PIXELS -
+ halfOfObjectBorderWidth -
+ fractionHeight;
- return (
- <Group>
- <Rect
- x={x}
- y={startY}
- width={width}
- height={fullHeight}
- 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}
- />
- <ImageComponent
- src={"/img/topology/rack-" + type + "-icon.png"}
- x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
- y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
- width={RACK_FILL_ICON_WIDTH}
- height={RACK_FILL_ICON_WIDTH}
- opacity={RACK_FILL_ICON_OPACITY}
- />
- </Group>
- );
+ return (
+ <Group>
+ <Rect
+ x={x}
+ y={startY}
+ width={width}
+ height={fullHeight}
+ 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
+ }
+ />
+ <ImageComponent
+ src={"/img/topology/rack-" + type + "-icon.png"}
+ x={x + width * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+ y={startY + fullHeight * 0.5 - RACK_FILL_ICON_WIDTH * 0.5}
+ width={RACK_FILL_ICON_WIDTH}
+ height={RACK_FILL_ICON_WIDTH}
+ opacity={RACK_FILL_ICON_OPACITY}
+ />
+ </Group>
+ );
};
RackFillBar.propTypes = {
- positionX: PropTypes.number.isRequired,
- positionY: PropTypes.number.isRequired,
- type: PropTypes.string.isRequired,
- fillFraction: PropTypes.number.isRequired,
+ positionX: PropTypes.number.isRequired,
+ positionY: PropTypes.number.isRequired,
+ type: PropTypes.string.isRequired,
+ fillFraction: PropTypes.number.isRequired
};
export default RackFillBar;
diff --git a/src/components/app/map/elements/RoomTile.js b/src/components/app/map/elements/RoomTile.js
index 11948a7a..71c3bf15 100644
--- a/src/components/app/map/elements/RoomTile.js
+++ b/src/components/app/map/elements/RoomTile.js
@@ -1,20 +1,20 @@
import React from "react";
-import {Rect} from "react-konva";
+import { Rect } from "react-konva";
import Shapes from "../../../../shapes/index";
-import {TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
-const RoomTile = ({tile, color}) => (
- <Rect
- x={tile.positionX * TILE_SIZE_IN_PIXELS}
- y={tile.positionY * TILE_SIZE_IN_PIXELS}
- width={TILE_SIZE_IN_PIXELS}
- height={TILE_SIZE_IN_PIXELS}
- fill={color}
- />
+const RoomTile = ({ tile, color }) => (
+ <Rect
+ x={tile.positionX * TILE_SIZE_IN_PIXELS}
+ y={tile.positionY * TILE_SIZE_IN_PIXELS}
+ width={TILE_SIZE_IN_PIXELS}
+ height={TILE_SIZE_IN_PIXELS}
+ fill={color}
+ />
);
RoomTile.propTypes = {
- tile: Shapes.Tile,
+ tile: Shapes.Tile
};
export default RoomTile;
diff --git a/src/components/app/map/elements/TileObject.js b/src/components/app/map/elements/TileObject.js
index 73bfddba..c1b631db 100644
--- a/src/components/app/map/elements/TileObject.js
+++ b/src/components/app/map/elements/TileObject.js
@@ -1,25 +1,29 @@
import PropTypes from "prop-types";
import React from "react";
-import {Rect} from "react-konva";
-import {OBJECT_BORDER_COLOR} from "../../../../util/colors";
-import {OBJECT_BORDER_WIDTH_IN_PIXELS, OBJECT_MARGIN_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Rect } from "react-konva";
+import { OBJECT_BORDER_COLOR } from "../../../../util/colors";
+import {
+ OBJECT_BORDER_WIDTH_IN_PIXELS,
+ OBJECT_MARGIN_IN_PIXELS,
+ TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
-const TileObject = ({positionX, positionY, color}) => (
- <Rect
- x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
- y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
- width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
- height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
- fill={color}
- stroke={OBJECT_BORDER_COLOR}
- strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
- />
+const TileObject = ({ positionX, positionY, color }) => (
+ <Rect
+ x={positionX * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+ y={positionY * TILE_SIZE_IN_PIXELS + OBJECT_MARGIN_IN_PIXELS}
+ width={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+ height={TILE_SIZE_IN_PIXELS - OBJECT_MARGIN_IN_PIXELS * 2}
+ fill={color}
+ stroke={OBJECT_BORDER_COLOR}
+ strokeWidth={OBJECT_BORDER_WIDTH_IN_PIXELS}
+ />
);
TileObject.propTypes = {
- positionX: PropTypes.number.isRequired,
- positionY: PropTypes.number.isRequired,
- color: PropTypes.string.isRequired,
+ positionX: PropTypes.number.isRequired,
+ positionY: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired
};
export default TileObject;
diff --git a/src/components/app/map/elements/TilePlusIcon.js b/src/components/app/map/elements/TilePlusIcon.js
index b96bf0f5..06377152 100644
--- a/src/components/app/map/elements/TilePlusIcon.js
+++ b/src/components/app/map/elements/TilePlusIcon.js
@@ -1,44 +1,52 @@
import PropTypes from "prop-types";
import React from "react";
-import {Group, Line} from "react-konva";
-import {TILE_PLUS_COLOR} from "../../../../util/colors";
-import {TILE_PLUS_MARGIN_IN_PIXELS, TILE_PLUS_WIDTH_IN_PIXELS, TILE_SIZE_IN_PIXELS} from "../MapConstants";
+import { Group, Line } from "react-konva";
+import { TILE_PLUS_COLOR } from "../../../../util/colors";
+import {
+ TILE_PLUS_MARGIN_IN_PIXELS,
+ TILE_PLUS_WIDTH_IN_PIXELS,
+ TILE_SIZE_IN_PIXELS
+} from "../MapConstants";
-const TilePlusIcon = ({pixelX, pixelY, mapScale}) => {
- const linePoints = [
- [
- 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 * 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 (
- <Group>
- {linePoints.map((points, index) => (
- <Line
- key={index}
- points={points}
- lineCap="round"
- stroke={TILE_PLUS_COLOR}
- strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
- listening={false}
- />
- ))}
- </Group>
- )
+const TilePlusIcon = ({ pixelX, pixelY, mapScale }) => {
+ const linePoints = [
+ [
+ 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 * 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 (
+ <Group>
+ {linePoints.map((points, index) => (
+ <Line
+ key={index}
+ points={points}
+ lineCap="round"
+ stroke={TILE_PLUS_COLOR}
+ strokeWidth={TILE_PLUS_WIDTH_IN_PIXELS * mapScale}
+ listening={false}
+ />
+ ))}
+ </Group>
+ );
};
TilePlusIcon.propTypes = {
- pixelX: PropTypes.number,
- pixelY: PropTypes.number,
- mapScale: PropTypes.number,
+ pixelX: PropTypes.number,
+ pixelY: PropTypes.number,
+ mapScale: PropTypes.number
};
export default TilePlusIcon;
diff --git a/src/components/app/map/elements/WallSegment.js b/src/components/app/map/elements/WallSegment.js
index 14efd3fc..c5011656 100644
--- a/src/components/app/map/elements/WallSegment.js
+++ b/src/components/app/map/elements/WallSegment.js
@@ -1,39 +1,39 @@
import React from "react";
-import {Line} from "react-konva";
+import { Line } from "react-konva";
import Shapes from "../../../../shapes/index";
-import {WALL_COLOR} from "../../../../util/colors";
-import {TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS} from "../MapConstants";
+import { WALL_COLOR } from "../../../../util/colors";
+import { TILE_SIZE_IN_PIXELS, WALL_WIDTH_IN_PIXELS } from "../MapConstants";
-const WallSegment = ({wallSegment}) => {
- let points;
- if (wallSegment.isHorizontal) {
- points = [
- wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
- wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
- (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
- wallSegment.startPosY * TILE_SIZE_IN_PIXELS
- ];
- } else {
- points = [
- wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
- wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
- wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
- (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS,
- ];
- }
+const WallSegment = ({ wallSegment }) => {
+ let points;
+ if (wallSegment.isHorizontal) {
+ points = [
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+ (wallSegment.startPosX + wallSegment.length) * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS
+ ];
+ } else {
+ points = [
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosY * TILE_SIZE_IN_PIXELS,
+ wallSegment.startPosX * TILE_SIZE_IN_PIXELS,
+ (wallSegment.startPosY + wallSegment.length) * TILE_SIZE_IN_PIXELS
+ ];
+ }
- 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 = {
- wallSegment: Shapes.WallSegment,
+ wallSegment: Shapes.WallSegment
};
export default WallSegment;
generated by cgit v1.2.3 (git 2.25.1) at 2026-02-04 13:52:32 +0000