diff options
| author | Fabian Mastenbroek <mail.fabianm@gmail.com> | 2021-07-20 10:51:39 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-20 10:51:39 +0200 |
| commit | 51c759e74b088d405b63fdb3e374822308d21366 (patch) | |
| tree | 3094cb874872d932d278d98d60f79902bf08b1a0 /opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js | |
| parent | db1d2c2f8c18850dedf34b5d690b6cd6a1d1f6b5 (diff) | |
| parent | 28d6d13844db28745bc2813e87a367131f862070 (diff) | |
merge: Address technical dept in topology view (#162)
This pull request aims to address some of the technical debt in the topology
view of the OpenDC frontend.
* Add support for panning of the datacenter topology
* Isolate world coordinate space (world objects do not depend on camera scale or position)
* Split transpiled modules into a separate chunk to reduce deduplication
* Encode state in topology actions to reduce global state
* Restructure components per page
* Enable more ESLint rules through `eslint:recommended` ruleset
* Move page components in separate files.
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js')
| -rw-r--r-- | opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js new file mode 100644 index 00000000..d66a18de --- /dev/null +++ b/opendc-web/opendc-web-ui/src/components/topologies/map/groups/GridGroup.js @@ -0,0 +1,36 @@ +import React from 'react' +import { Group, Line } from 'react-konva' +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) => [ + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, + index * TILE_SIZE_IN_PIXELS, +]) +const VERTICAL_POINT_PAIRS = MAP_COORDINATE_ENTRIES.map((index) => [ + index * TILE_SIZE_IN_PIXELS, + 0, + index * TILE_SIZE_IN_PIXELS, + MAP_SIZE_IN_PIXELS, +]) + +function GridGroup() { + return ( + <Group> + {HORIZONTAL_POINT_PAIRS.concat(VERTICAL_POINT_PAIRS).map((points, index) => ( + <Line + key={index} + points={points} + stroke={GRID_COLOR} + strokeWidth={GRID_LINE_WIDTH_IN_PIXELS} + listening={false} + /> + ))} + </Group> + ) +} + +export default GridGroup |
