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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
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
|
