refactor: less layer proxy churn

app/ecs-components/tile-layers.js

@@ -2,6 +2,53 @@ import Component from '@/ecs/component.js';
 
 import vector2d from './helpers/vector-2d';
 
+class LayerProxy {
+  constructor(instance, Component, index) {
+    this.instance = instance;
+    this.Component = Component;
+    this.index = index;
+  }
+  get area() {
+    return this.layer.area;
+  }
+  get data() {
+    return this.layer.data;
+  }
+  get layer() {
+    return this.instance.layers[this.index];
+  }
+  get source() {
+    return this.layer.source;
+  }
+  stamp(at, data) {
+    const changes = {};
+    for (const row in data) {
+      const columns = data[row];
+      for (const column in columns) {
+        const tile = columns[column];
+        const x = at.x + parseInt(column);
+        const y = at.y + parseInt(row);
+        if (x < 0 || y < 0 || x >= this.layer.area.x || y >= this.layer.area.y) {
+          continue;
+        }
+        const calculated = y * this.layer.area.x + x;
+        this.layer.data[calculated] = tile;
+        changes[calculated] = tile;
+      }
+    }
+    this.Component.markChange(this.instance.entity, 'layerChange', {[this.index]: changes});
+  }
+  tile({x, y}) {
+    if (x < 0 || y < 0 || x >= this.layer.area.x || y >= this.layer.area.y) {
+      return undefined;
+    }
+    return this.layer.data[y * this.layer.area.x + x];
+  }
+  get tileSize() {
+    return this.layer.tileSize;
+  }
+}
+
 export default class TileLayers extends Component {
   insertMany(entities) {
     for (const [id, {layerChange}] of entities) {
@@ -14,11 +61,17 @@ export default class TileLayers extends Component {
             layers[layerIndex].data[calculated] = tile;
           }
           layers[layerIndex] = {...layers[layerIndex]};
+          component.$$layersProxies[layerIndex] = new LayerProxy(component, this, layerIndex);
         }
       }
     }
     return super.insertMany(entities);
   }
+  load(instance) {
+    for (const index in instance.layers) {
+      instance.$$layersProxies[index] = new LayerProxy(instance, this, index);
+    }
+  }
   mergeDiff(original, update) {
     if (!update.layerChange) {
       return super.mergeDiff(original, update);
@@ -35,54 +88,10 @@ export default class TileLayers extends Component {
     return {layerChange};
   }
   instanceFromSchema() {
-    const Instance = super.instanceFromSchema();
+    return class TileLayersInstance extends super.instanceFromSchema() {
-    const Component = this;
+      $$layersProxies = {};
-    return class TileLayersInstance extends Instance {
       layer(index) {
-        const {layers} = this;
+        return this.$$layersProxies[index];
-        if (!(index in layers)) {
-          return undefined;
-        }
-        const instance = this;
-        class LayerProxy {
-          constructor(layer) {
-            this.layer = layer;
-          }
-          get area() {
-            return this.layer.area;
-          }
-          get source() {
-            return this.layer.source;
-          }
-          stamp(at, data) {
-            const changes = {};
-            for (const row in data) {
-              const columns = data[row];
-              for (const column in columns) {
-                const tile = columns[column];
-                const x = at.x + parseInt(column);
-                const y = at.y + parseInt(row);
-                if (x < 0 || y < 0 || x >= this.layer.area.x || y >= this.layer.area.y) {
-                  continue;
-                }
-                const calculated = y * this.layer.area.x + x;
-                this.layer.data[calculated] = tile;
-                changes[calculated] = tile;
-              }
-            }
-            Component.markChange(instance.entity, 'layerChange', {[index]: changes});
-          }
-          tile({x, y}) {
-            if (x < 0 || y < 0 || x >= this.layer.area.x || y >= this.layer.area.y) {
-              return undefined;
-            }
-            return this.layer.data[y * this.layer.area.x + x];
-          }
-          get tileSize() {
-            return this.layer.tileSize;
-          }
-        }
-        return new LayerProxy(layers[index]);
       }
     }
   }