flow: room editing

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

@@ -41,7 +41,7 @@ const RoomComponent = ({
   const {uri, uuid} = useContext(Context);
   const dispatch = useDispatch();
   const flecks = useFlecks();
-  const {Room} = flecks.get('$avocado/resource.resources');
+  const {Room, Tiles} = flecks.get('$avocado/resource.resources');
   const previousResource = usePrevious(resource);
   const [events, setEvents] = useState();
   const [side, setSide] = useState(0);
@@ -53,31 +53,8 @@ const RoomComponent = ({
     setEvents(stage?.events());
   }, [setEvents]);
   useEffect(() => {
-    if (room) {
+    // First time, render the entire room.
-      const load = async () => {
+    if (!room) {
-        await Promise.all(
-          room.tiles.map(async (tiles, i) => {
-            await tiles.load(resource.tiles[i]);
-            const {area, tileSize} = tiles;
-            const viewport = Vector.mul(area, tileSize);
-            tiles.emit('update', Rectangle.compose([0, 0], viewport));
-          }),
-        );
-        if (resource.entities.length !== previousResource.entities.length) {
-          await room.entityList.load(resource.entities);
-          return;
-        }
-        await Promise.all(
-          Object.values(room.entities)
-            .map(async (entity, i) => {
-              await entity.load(resource.entities[i]);
-              entity.renderTick(Infinity);
-            }),
-        );
-      };
-      load();
-    }
-    else {
       const loadRoom = async () => {
         const room = await Room.load({
           ...resource,
@@ -90,6 +67,50 @@ const RoomComponent = ({
       };
       loadRoom();
     }
+    // Otherwise, we'll update the room.
+    else {
+      const updateRoom = async () => {
+        if (previousResource.entities !== resource.entities) {
+          if (previousResource.entities.length !== resource.entities.length) {
+            await room.entityList.load(resource.entities);
+          }
+          else {
+            for (let i = 0; i < resource.entities.length; i++) {
+              const element = resource.entities[i];
+              if (element !== previousResource.entities[i]) {
+                const entity = room.entityList.$$flatEntities[i];
+                // eslint-disable-next-line no-await-in-loop
+                await entity.load(element);
+                entity.renderTick(Infinity);
+              }
+            }
+          }
+        }
+        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));
+          }
+          else {
+            for (let i = 0; i < resource.tiles.length; i++) {
+              const element = resource.tiles[i];
+              if (element !== previousResource.tiles[i]) {
+                const currentData = Tiles.inflate(element.data);
+                const previousData = Tiles.inflate(previousResource.tiles[i].data);
+                const updates = [];
+                for (let j = 0; j < currentData.length; j++) {
+                  if (currentData[j] !== previousData[j]) {
+                    updates.push(i);
+                  }
+                }
+                room.tiles[i].emit('update', Tiles.whereFromUpdates(updates));
+              }
+            }
+          }
+        }
+      };
+      updateRoom();
+    }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [resource, uri]);
   if (!roomRenderable) {

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

@@ -75,18 +75,24 @@ function EntitiesPage({
       return undefined;
     }
     const onValue = ({
-      clientX,
-      clientY,
       deltaY,
-      target,
+      position,
       type,
     }) => {
       const updatePosition = () => {
-        const {left, top} = target.getBoundingClientRect();
         patch.diff(
           `/entities/${selectedEntityIndex}`,
           entity,
-          merge(entity, {traits: {Positioned: {state: {x: clientX - left, y: clientY - top}}}}),
+          merge(
+            entity,
+            {
+              traits: {
+                Positioned: {
+                  state: {x: Math.floor(position[0]), y: Math.floor(position[1])},
+                },
+              },
+            },
+          ),
         );
       };
       switch (type) {

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

@@ -149,23 +149,10 @@ function TilesPage({
         room.tiles[currentLayer].$$data,
         Rectangle.compose(origin, room.tiles[currentLayer].area),
       );
-      const [min, max] = [[Infinity, Infinity], [-Infinity, -Infinity]];
       for (let i = 0; i < updates.length; i++) {
         const update = updates[i];
         const [x, y] = [update % width, Math.floor(update / width)];
         const offset = Vector.sub([x, y], origin);
-        if (x < min[0]) {
-          min[0] = x;
-        }
-        else if (x > max[0]) {
-          max[0] = x;
-        }
-        if (y < min[1]) {
-          min[1] = y;
-        }
-        else if (y > max[1]) {
-          max[1] = y;
-        }
         let tileLocation;
         switch (fillMode) {
           case 0: {
@@ -192,7 +179,7 @@ function TilesPage({
         }
         $$data[update] = (tileLocation[1] * (viewport[0] / tileSize[0])) + tileLocation[0];
       }
-      const where = Rectangle.compose(min, Vector.add([1, 1], Vector.sub(max, min)));
+      const where = room.tiles[currentLayer].constructor.whereFromUpdates(updates);
       room.tiles[currentLayer].emit('update', where);
     };
     const onValue = (
@@ -203,7 +190,7 @@ function TilesPage({
     ) => {
       const origin = Vector.floor(Vector.div(position, tileSize));
       const edit = () => {
-        if (0 === room.tiles.length) {
+        if (0 === resource.tiles.length) {
           return;
         }
         const {data: originalData} = room.tiles[currentLayer].toJSON();
@@ -311,7 +298,7 @@ function TilesPage({
       <div className={styles.layers}>
         <ul>
           {
-            room.tiles.map((tiles, i) => (
+            resource.tiles.map((tiles, i) => (
               // eslint-disable-next-line react/no-array-index-key
               <li key={i}>
                 <button
@@ -329,9 +316,9 @@ function TilesPage({
                       <span>Area</span>
                       <span>
                         [
-                        {tiles.width}
+                        {tiles.area[0]}
                         {' x '}
-                        {tiles.height}
+                        {tiles.area[1]}
                         ]
                       </span>
                     </label>
@@ -349,15 +336,15 @@ function TilesPage({
                       <span>Full size</span>
                       <span>
                         [
-                        {tiles.tileSize[0] * tiles.width}
+                        {tiles.tileSize[0] * tiles.area[0]}
                         {' x '}
-                        {tiles.tileSize[1] * tiles.height}
+                        {tiles.tileSize[1] * tiles.area[1]}
                         ]
                       </span>
                     </label>
                     <label>
                       <span>Tileset URI</span>
-                      <span>{tiles.atlas.image.uri}</span>
+                      <span>{tiles.tileImageUri}</span>
                     </label>
                   </div>
                   <div className={styles.visibility}>
@@ -438,14 +425,14 @@ function TilesPage({
               <span>Area</span>
               <VectorComponent
                 onChange={() => {}}
-                value={room.tiles[currentLayer].area}
+                value={resource.tiles[currentLayer].area}
               />
             </label>
             <label className={styles.tileSize}>
               <span>Tile size</span>
               <VectorComponent
                 onChange={() => {}}
-                value={room.tiles[currentLayer].tileSize}
+                value={resource.tiles[currentLayer].tileSize}
               />
             </label>
             <div className={styles.grower} />

packages/topdown/src/renderable/room.js

@@ -12,9 +12,12 @@ export default class RoomRenderable extends Container {
   constructor(room, renderer) {
     super();
     this.lastExtent = [0, 0, 0, 0];
+    this.room = room;
     this.renderer = renderer;
     this.entityListView = new EntityListView(room.entityList);
     this.tilesRenderables = room.tiles.map((tiles) => new TilesRenderable(tiles, renderer));
+    room.on('tilesAdded', this.onTilesAdded, this);
+    room.on('tilesRemoved', this.onTilesRemoved, this);
     this.addChildren(this.tilesRenderables);
     this.addChild(this.entityListView);
     this.sort();
@@ -25,11 +28,28 @@ export default class RoomRenderable extends Container {
 
   destroy() {
     super.destroy();
+    this.room.off('tilesAdded', this.onTilesAdded);
+    this.room.off('tilesRemoved', this.onTilesRemoved);
     if (module.hot) {
       renderables.delete(this);
     }
   }
 
+  onTilesAdded(tiles) {
+    const renderable = new TilesRenderable(tiles, this.renderer);
+    this.tilesRenderables.push(renderable);
+    this.addChild(renderable);
+  }
+
+  onTilesRemoved(tiles) {
+    const index = this.tilesRenderables.findIndex((renderable) => renderable.tiles === tiles);
+    if (-1 === index) {
+      return;
+    }
+    const [renderable] = this.tilesRenderables.splice(index, 1);
+    this.removeChild(renderable);
+  }
+
   renderChunksForExtent(extent) {
     this.tilesRenderables.forEach((tilesRenderable) => {
       tilesRenderable.renderChunksForExtent(extent);

packages/topdown/src/resources/room.js

@@ -15,10 +15,10 @@ export default (flecks) => {
   );
   return class Room extends decorate(JsonResource) {
 
-    entityList;
-
     static Renderable = RoomRenderable;
 
+    entityList;
+
     tiles = [];
 
     constructor() {
@@ -38,13 +38,18 @@ export default (flecks) => {
       return this.entityList.entities;
     }
 
+    addTiles(tiles) {
+      this.tiles.push(tiles);
+      this.startSynchronizing(tiles);
+      this.emit('tilesAdded', tiles);
+    }
+
     findEntity(uuid) {
       return this.entityList.findEntity(uuid);
     }
 
     async load(json = {}) {
       await super.load(json);
-      const {Tiles} = flecks.get('$avocado/resource.resources');
       const {
         entities,
         size = [0, 0],
@@ -56,13 +61,19 @@ export default (flecks) => {
       this.startSynchronizing(this.entityList);
       this.size = size;
       if (tiles) {
-        this.tiles = await Promise.all(tiles.map((tiles, i) => Tiles.load({s13nId: i, ...tiles})));
+        await this.loadTiles(tiles);
-        this.tiles.forEach((tiles) => {
-          this.startSynchronizing(tiles);
-        });
       }
     }
 
+    async loadTiles(tiles) {
+      const {Tiles} = flecks.get('$avocado/resource.resources');
+      this.removeAllTiles();
+      (await Promise.all(tiles.map((json, i) => Tiles.load({s13nId: i, ...json}))))
+        .forEach((tiles) => {
+          this.addTiles(tiles);
+        });
+    }
+
     onEntityAdded(entity) {
       // eslint-disable-next-line no-param-reassign
       entity.room = this;
@@ -77,10 +88,26 @@ export default (flecks) => {
       this.emit('entityRemoved', entity);
     }
 
+    removeAllTiles() {
+      for (let i = this.tiles.length - 1; i >= 0; --i) {
+        this.removeTiles(this.tiles[i]);
+      }
+    }
+
     removeEntity(entity) {
       this.entityList.removeEntity(entity);
     }
 
+    removeTiles(tiles) {
+      const index = this.tiles.indexOf(tiles);
+      if (-1 === index) {
+        return;
+      }
+      const [removed] = this.tiles.splice(index, 1);
+      this.stopSynchronizing(removed);
+      this.emit('tilesRemoved', removed);
+    }
+
     get s13nId() {
       return this.$$s13nId;
     }

packages/topdown/src/resources/tiles.js

@@ -124,6 +124,11 @@ export default (flecks) => {
       return this.constructor.indexHulls(indices, this.$$data, this.area);
     }
 
+    static inflate(data) {
+      const {buffer, byteOffset, length} = inflate(Buffer.from(data, 'base64'));
+      return new Uint16Array(buffer, byteOffset, length / 2);
+    }
+
     async load(json) {
       const {
         area,
@@ -137,8 +142,7 @@ export default (flecks) => {
         this.area = area;
       }
       if (data) {
-        const {buffer, byteOffset, length} = inflate(Buffer.from(data, 'base64'));
+        this.$$data = this.constructor.inflate(data);
-        this.$$data = new Uint16Array(buffer, byteOffset, length / 2);
       }
       else if (area) {
         this.$$data = new Uint16Array(Vector.area(area));
@@ -298,6 +302,27 @@ export default (flecks) => {
       };
     }
 
+    static whereFromUpdates(updates) {
+      const [min, max] = [[Infinity, Infinity], [-Infinity, -Infinity]];
+      for (let i = 0; i < updates.length; i++) {
+        const update = updates[i];
+        const [x, y] = [update % this.width, Math.floor(update / this.width)];
+        if (x < min[0]) {
+          min[0] = x;
+        }
+        else if (x > max[0]) {
+          max[0] = x;
+        }
+        if (y < min[1]) {
+          min[1] = y;
+        }
+        else if (y > max[1]) {
+          max[1] = y;
+        }
+      }
+      return Rectangle.compose(min, Vector.add([1, 1], Vector.sub(max, min)));
+    }
+
     get zIndex() {
       return this.$$zIndex;
     }