Implement canvas image element caching

2 files changed, 11 insertions, 3 deletions

diff --git a/src/components/map/elements/ImageComponent.js b/src/components/map/elements/ImageComponent.js
index 00766496..486296ea 100644
--- a/src/components/map/elements/ImageComponent.js
+++ b/src/components/map/elements/ImageComponent.js
@@ -3,6 +3,7 @@ import React from "react";
 import {Image} from "react-konva";
 
 class ImageComponent extends React.Component {
+    static imageCaches = {};
     static propTypes = {
         src: PropTypes.string.isRequired,
         x: PropTypes.number.isRequired,
@@ -17,9 +18,17 @@ class ImageComponent extends React.Component {
     };
 
     componentDidMount() {
+        if (ImageComponent.imageCaches[this.props.src]) {
+            this.setState({image: ImageComponent.imageCaches[this.props.src]});
+            return;
+        }
+
         const image = new window.Image();
         image.src = this.props.src;
-        image.onload = () => this.setState({image});
+        image.onload = () => {
+            this.setState({image});
+            ImageComponent.imageCaches[this.props.src] = image;
+        }
     }
 
     render() {
diff --git a/src/sagas/topology.js b/src/sagas/topology.js
index 566d2162..d674c695 100644
--- a/src/sagas/topology.js
+++ b/src/sagas/topology.js
@@ -237,8 +237,7 @@ export function* onAddRackToTile(action) {
             id: -1,
             name: "Rack",
             capacity: 42,
-            powerCapacityW: 100,
-            machines: 20
+            powerCapacityW: 100
         });
         rack.machineIds = new Array(rack.capacity).fill(null);
         yield put(addToStore("rack", rack));