Recording a stack of editor tile changes with command pattern

src/components/gameMaster/mapEditor/Map.vue

@@ -48,7 +48,9 @@ function handlePointerMove(pointer: Phaser.Input.Pointer) {
 }
 
 function handlePointerUp(pointer: Phaser.Input.Pointer) {
-
+  if (mapEditor.drawMode.value === 'tile') {
+    mapTiles.value?.finalizeCommand()
+  }
 }
 
 onMounted(() => {

src/components/gameMaster/mapEditor/mapPartials/MapTiles.vue

@@ -22,7 +22,27 @@ const tileStorage = new TileStorage()
 const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
 const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
 
-defineExpose({ handlePointer })
+defineExpose({ handlePointer, finalizeCommand })
+
+//Record of commands
+let commandStack: EditorCommand[] = []
+let currentCommand: EditorCommand | null = null
+
+type EditorCommand = {
+  operation: 'draw' | 'erase'
+  tileName?: string,
+  affectedTiles: TileChangeSet
+}
+
+//It must check if the position is in the set already. Otherwise it will duplicate positions
+class TileChangeSet extends Set<{ x: number; y: number }> {
+  has(value: { x: number; y: number }): boolean {
+    for (const pos of this) {
+      if (pos.x === value.x && pos.y === value.y) return true
+    }
+    return false
+  }
+}
 
 function createTileMap() {
   const mapData = new Phaser.Tilemaps.MapData({
@@ -73,6 +93,18 @@ function pencil(pointer: Phaser.Input.Pointer) {
   // Place tile
   placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
 
+  if (!currentCommand) {
+    currentCommand = {
+      operation: 'draw',
+      tileName: mapEditor.selectedTile.value,
+      affectedTiles: new TileChangeSet()
+    }
+  }
+
+  if (!currentCommand.affectedTiles.has({ x: tile.x, y: tile.y })) {
+    currentCommand.affectedTiles.add({ x: tile.x, y: tile.y })
+  }
+
   // Adjust mapEditorStore.map.tiles
   map.tiles[tile.y][tile.x] = mapEditor.selectedTile.value
 }
@@ -90,6 +122,18 @@ function eraser(pointer: Phaser.Input.Pointer) {
   // Place tile
   placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
 
+  if (!currentCommand) {
+    currentCommand = {
+      operation: 'erase',
+      tileName: 'blank_tile',
+      affectedTiles: new TileChangeSet()
+    }
+  }
+
+  if (!currentCommand.affectedTiles.has({ x: tile.x, y: tile.y })) {
+    currentCommand.affectedTiles.add({ x: tile.x, y: tile.y })
+  }
+
   // Adjust mapEditorStore.map.tiles
   map.tiles[tile.y][tile.x] = 'blank_tile'
 }
@@ -121,6 +165,11 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
   mapEditor.setSelectedTile(map.tiles[tile.y][tile.x])
 }
 
+function finalizeCommand() {
+  commandStack.push(currentCommand!)
+  currentCommand = null
+}
+
 watch(
   () => mapEditor.shouldClearTiles,
   (shouldClear) => {