From 5e5ab63b280eb446db4090733cd3ad2e97d02018 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 19 Jul 2021 15:47:23 +0200
Subject: refactor(ui): Restructure components per page

This change updates the source structure of the OpenDC frontend to
follow the page structure.
---
 .../topologies/map/elements/ImageComponent.js      | 36 ++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js

(limited to 'opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js')

diff --git a/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
new file mode 100644
index 00000000..7d304b6b
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/components/topologies/map/elements/ImageComponent.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+import React, { useEffect, useState } from 'react'
+import { Image } from 'react-konva'
+
+const imageCaches = {}
+
+function ImageComponent({ src, x, y, width, height, opacity }) {
+    const [image, setImage] = useState(null)
+
+    useEffect(() => {
+        if (imageCaches[src]) {
+            setImage(imageCaches[src])
+            return
+        }
+
+        const image = new window.Image()
+        image.src = src
+        image.onload = () => {
+            setImage(image)
+            imageCaches[src] = image
+        }
+    }, [src])
+
+    return <Image image={image} x={x} y={y} width={width} height={height} opacity={opacity} />
+}
+
+ImageComponent.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,
+}
+
+export default ImageComponent
-- 
cgit v1.2.3