feat: resizing tileSize and area

packages/topdown/src/persea/controllers/room/component.jsx

@@ -94,13 +94,21 @@ const RoomComponent = ({
         if (previousResource.tiles !== resource.tiles) {
           if (previousResource.tiles.length !== resource.tiles.length) {
             await room.loadTiles(resource.tiles);
-            roomRenderable.renderChunksForExtent(Rectangle.compose([0, 0], room.size));
+            roomRenderable.invalidateAllChunks();
           }
           else {
             for (let i = 0; i < resource.tiles.length; i++) {
               const element = resource.tiles[i];
               if (element !== previousResource.tiles[i]) {
-                if (element.data && previousResource.tiles[i].data) {
+                if (
+                  element.tileSize !== previousResource.tiles[i].tileSize
+                  || element.area !== previousResource.tiles[i].area
+                ) {
+                  // eslint-disable-next-line no-await-in-loop
+                  await room.tiles[i].load(resource.tiles[i]);
+                  roomRenderable.invalidateAllChunks();
+                }
+                else if (element.data && previousResource.tiles[i].data) {
                   const currentData = Tiles.inflate(element.data);
                   const previousData = Tiles.inflate(previousResource.tiles[i].data);
                   const updates = [];
@@ -112,12 +120,13 @@ const RoomComponent = ({
                   room.tiles[i].$$data = currentData;
                   room.tiles[i].emit('update', room.tiles[i].whereFromUpdates(updates));
                 }
-                else if (element.data) {
+                else {
+                  if (element.data) {
                     room.tiles[i].$$data = Tiles.inflate(element.data);
-                  room.tiles[i].emit('update', Rectangle.compose([0, 0], room.tiles[i].area));
                   }
                   else {
                     room.tiles[i].$$data = new Uint16Array(Vector.area(room.tiles[i].area));
+                  }
                   room.tiles[i].emit('update', Rectangle.compose([0, 0], room.tiles[i].area));
                 }
               }

packages/topdown/src/persea/room-sides/tiles-side/index.jsx

@@ -24,6 +24,7 @@ import {
   React,
   useCallback,
   useEffect,
+  useFlecks,
   useState,
 } from '@flecks/react';
 
@@ -39,6 +40,7 @@ function TilesPage({
   room,
   roomRenderable,
 }) {
+  const flecks = useFlecks();
   const patch = useJsonPatcher();
   const [currentLayer, setCurrentLayer] = useState(0);
   const [tilesetEvents, setTilesetEvents] = useState();
@@ -429,14 +431,42 @@ function TilesPage({
             <label className={styles.area}>
               <span>Area</span>
               <VectorComponent
-                onChange={() => {}}
+                onChange={(event, newArea) => {
+                  const {Tiles} = flecks.get('$avocado/resource.resources');
+                  // Create new tiles.
+                  const newTiles = new Tiles();
+                  newTiles.area = newArea;
+                  newTiles.$$data = new Uint16Array(Vector.area(newArea));
+                  // Plot from old to new.
+                  const tiles = room.tiles[currentLayer];
+                  for (let y = 0; y < newArea[1]; ++y) {
+                    for (let x = 0; x < newArea[0]; ++x) {
+                      newTiles.setTileAt([x, y], tiles.tileAt([x, y]));
+                    }
+                  }
+                  patch(
+                    [
+                      {
+                        op: 'replace',
+                        path: `/tiles/${currentLayer}/area`,
+                        value: newArea,
+                      },
+                      {
+                        op: 'replace',
+                        path: `/tiles/${currentLayer}/data`,
+                        value: Tiles.deflate(newTiles.$$data.buffer),
+                      },
+                    ],
+                    `/tiles/${currentLayer}/area`,
+                  );
+                }}
                 value={resource.tiles[currentLayer].area}
               />
             </label>
             <label className={styles.tileSize}>
               <span>Tile size</span>
               <VectorComponent
-                onChange={() => {}}
+                onChange={patch.onChange(`/tiles/${currentLayer}/tileSize`)}
                 value={resource.tiles[currentLayer].tileSize}
               />
             </label>