1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import PropTypes from "prop-types";
import React from "react";
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
} 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
} 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 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>
);
};
RackFillBar.propTypes = {
positionX: PropTypes.number.isRequired,
positionY: PropTypes.number.isRequired,
type: PropTypes.string.isRequired,
fillFraction: PropTypes.number.isRequired,
};
export default RackFillBar;
|
