From 90fae26aa4bd0e0eb3272ff6e6524060e9004fbb Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <info@gandreadis.com>
Date: Mon, 29 Jun 2020 15:47:09 +0200
Subject: Prepare frontend repository for monorepo

This change prepares the frontend Git repository for the monorepo
residing at https://github.com/atlarge-research.com/opendc. To
accomodate for this, we move all files into a frontend subdirectory.
---
 .../app/map/layers/HoverLayerComponent.js          | 85 ++++++++++++++++++++++
 .../components/app/map/layers/MapLayerComponent.js | 22 ++++++
 .../app/map/layers/ObjectHoverLayerComponent.js    | 11 +++
 .../app/map/layers/RoomHoverLayerComponent.js      |  6 ++
 4 files changed, 124 insertions(+)
 create mode 100644 frontend/src/components/app/map/layers/HoverLayerComponent.js
 create mode 100644 frontend/src/components/app/map/layers/MapLayerComponent.js
 create mode 100644 frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
 create mode 100644 frontend/src/components/app/map/layers/RoomHoverLayerComponent.js

(limited to 'frontend/src/components/app/map/layers')

diff --git a/frontend/src/components/app/map/layers/HoverLayerComponent.js b/frontend/src/components/app/map/layers/HoverLayerComponent.js
new file mode 100644
index 00000000..c39532f1
--- /dev/null
+++ b/frontend/src/components/app/map/layers/HoverLayerComponent.js
@@ -0,0 +1,85 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { Layer } from "react-konva";
+import HoverTile from "../elements/HoverTile";
+import { TILE_SIZE_IN_PIXELS } from "../MapConstants";
+
+class HoverLayerComponent extends React.Component {
+  static propTypes = {
+    mouseX: PropTypes.number.isRequired,
+    mouseY: PropTypes.number.isRequired,
+    mapPosition: PropTypes.object.isRequired,
+    mapScale: PropTypes.number.isRequired,
+    isEnabled: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired
+  };
+
+  state = {
+    positionX: -1,
+    positionY: -1,
+    validity: false
+  };
+
+  componentDidUpdate() {
+    if (!this.props.isEnabled()) {
+      return;
+    }
+
+    const positionX = Math.floor(
+      (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)
+    );
+
+    if (
+      positionX !== this.state.positionX ||
+      positionY !== this.state.positionY
+    ) {
+      this.setState({
+        positionX,
+        positionY,
+        validity: this.props.isValid(positionX, positionY)
+      });
+    }
+  }
+
+  render() {
+    if (!this.props.isEnabled()) {
+      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;
+
+    return (
+      <Layer opacity={0.6}>
+        <HoverTile
+          pixelX={pixelX}
+          pixelY={pixelY}
+          scale={this.props.mapScale}
+          isValid={this.state.validity}
+          onClick={() =>
+            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
+            })
+          : undefined}
+      </Layer>
+    );
+  }
+}
+
+export default HoverLayerComponent;
diff --git a/frontend/src/components/app/map/layers/MapLayerComponent.js b/frontend/src/components/app/map/layers/MapLayerComponent.js
new file mode 100644
index 00000000..6ad3cb88
--- /dev/null
+++ b/frontend/src/components/app/map/layers/MapLayerComponent.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { Group, Layer } from "react-konva";
+import DatacenterContainer from "../../../../containers/app/map/DatacenterContainer";
+import Backdrop from "../elements/Backdrop";
+import GridGroup from "../groups/GridGroup";
+
+const MapLayerComponent = ({ mapPosition, mapScale }) => (
+  <Layer>
+    <Group
+      x={mapPosition.x}
+      y={mapPosition.y}
+      scaleX={mapScale}
+      scaleY={mapScale}
+    >
+      <Backdrop />
+      <DatacenterContainer />
+      <GridGroup />
+    </Group>
+  </Layer>
+);
+
+export default MapLayerComponent;
diff --git a/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
new file mode 100644
index 00000000..e7342d3c
--- /dev/null
+++ b/frontend/src/components/app/map/layers/ObjectHoverLayerComponent.js
@@ -0,0 +1,11 @@
+import React from "react";
+import TilePlusIcon from "../elements/TilePlusIcon";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const ObjectHoverLayerComponent = props => (
+  <HoverLayerComponent {...props}>
+    <TilePlusIcon {...props} />
+  </HoverLayerComponent>
+);
+
+export default ObjectHoverLayerComponent;
diff --git a/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
new file mode 100644
index 00000000..feea5ae5
--- /dev/null
+++ b/frontend/src/components/app/map/layers/RoomHoverLayerComponent.js
@@ -0,0 +1,6 @@
+import React from "react";
+import HoverLayerComponent from "./HoverLayerComponent";
+
+const RoomHoverLayerComponent = props => <HoverLayerComponent {...props} />;
+
+export default RoomHoverLayerComponent;
-- 
cgit v1.2.3