refactor: less layer proxy churn

app/ecs-components/tile-layers.js

@@ -2,55 +2,21 @@ import Component from '@/ecs/component.js';
 
 import vector2d from './helpers/vector-2d';
 
-export default class TileLayers extends Component {
-  insertMany(entities) {
-    for (const [id, {layerChange}] of entities) {
-      if (layerChange) {
-        const component = this.get(id);
-        const {layers} = component;
-        for (const layerIndex in layerChange) {
-          for (const calculated in layerChange[layerIndex]) {
-            const tile = layerChange[layerIndex][calculated];
-            layers[layerIndex].data[calculated] = tile;
-          }
-          layers[layerIndex] = {...layers[layerIndex]};
-        }
-      }
-    }
-    return super.insertMany(entities);
-  }
-  mergeDiff(original, update) {
-    if (!update.layerChange) {
-      return super.mergeDiff(original, update);
-    }
-    const layerChange = {
-      ...original.layerChange,
-    };
-    for (const index in update.layerChange) {
-      layerChange[index] = {
-        ...layerChange[index],
-        ...update.layerChange[index],
-      };
-    }
-    return {layerChange};
-  }
-  instanceFromSchema() {
-    const Instance = super.instanceFromSchema();
-    const Component = this;
-    return class TileLayersInstance extends Instance {
-      layer(index) {
-        const {layers} = this;
-        if (!(index in layers)) {
-          return undefined;
-        }
-        const instance = this;
-        class LayerProxy {
-          constructor(layer) {
-            this.layer = layer;
+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;
   }
@@ -70,7 +36,7 @@ export default class TileLayers extends Component {
         changes[calculated] = tile;
       }
     }
-            Component.markChange(instance.entity, 'layerChange', {[index]: changes});
+    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) {
@@ -81,8 +47,51 @@ export default class TileLayers extends Component {
   get tileSize() {
     return this.layer.tileSize;
   }
+}
+
+export default class TileLayers extends Component {
+  insertMany(entities) {
+    for (const [id, {layerChange}] of entities) {
+      if (layerChange) {
+        const component = this.get(id);
+        const {layers} = component;
+        for (const layerIndex in layerChange) {
+          for (const calculated in layerChange[layerIndex]) {
+            const tile = layerChange[layerIndex][calculated];
+            layers[layerIndex].data[calculated] = tile;
           }
-        return new LayerProxy(layers[index]);
+          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);
+    }
+    const layerChange = {
+      ...original.layerChange,
+    };
+    for (const index in update.layerChange) {
+      layerChange[index] = {
+        ...layerChange[index],
+        ...update.layerChange[index],
+      };
+    }
+    return {layerChange};
+  }
+  instanceFromSchema() {
+    return class TileLayersInstance extends super.instanceFromSchema() {
+      $$layersProxies = {};
+      layer(index) {
+        return this.$$layersProxies[index];
       }
     }
   }