Re-added & Improved delete logics for tiles, zone objects and event tiles. Added more code comments for better DX.

src/components/gameMaster/zoneEditor/EventTiles.vue

@@ -25,7 +25,8 @@ function getEventTileImageProps(tile: ZoneEventTile) {
   }
 }
 
-function addZoneEventTile(pointer: Phaser.Input.Pointer) {
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
 
   // Check if tool is pencil
@@ -69,13 +70,42 @@ function addZoneEventTile(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
 }
 
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is blocking tile or teleport
+  if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if event tile already exists on position
+  const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
+  if (!existingEventTile) return
+
+  // Remove existing event tile
+  zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
+}
+
 onBeforeMount(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneEventTile)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneEventTile)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 </script>

src/components/gameMaster/zoneEditor/Objects.vue

@@ -5,7 +5,7 @@
 
 <script setup lang="ts">
 import { uuidv4 } from '@/utilities'
-import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
+import { calculateIsometricDepth, getTile, placeTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { Image, useScene } from 'phavuer'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import type { ZoneObject } from '@/types'
@@ -35,7 +35,8 @@ function getObjectImageProps(object: ZoneObject) {
   }
 }
 
-function addZoneObject(pointer: Phaser.Input.Pointer) {
+function pencil(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
 
   // Check if tool is pencil
@@ -73,8 +74,35 @@ function addZoneObject(pointer: Phaser.Input.Pointer) {
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
 }
 
-function moveZoneObject(id: string) {
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
+
+  // Check if tool is eraser
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is object
+  if (zoneEditorStore.eraserMode !== 'object') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  // Check if object already exists on position
+  const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
+  if (!existingObject) return
+
+  // Remove existing object
+  zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
+}
+
+function moveZoneObject(id: string) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
   movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
 
   function handlePointerMove(pointer: Phaser.Input.Pointer) {
@@ -98,7 +126,9 @@ function moveZoneObject(id: string) {
 }
 
 function rotateZoneObject(id: string) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
+
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
     if (object.id === id) {
       return {
@@ -111,19 +141,25 @@ function rotateZoneObject(id: string) {
 }
 
 function deleteZoneObject(id: string) {
+  // Check if zone is set
   if (!zoneEditorStore.zone) return
+
   zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
   selectedZoneObject.value = null
 }
 
 onBeforeMount(() => {
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, addZoneObject)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, addZoneObject)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
 // watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
@@ -132,8 +168,6 @@ watch(
   (newObjects) => {
     if (!zoneEditorStore.zone) return
 
-    console.log('Updating zone objects')
-
     const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
       const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
       if (updatedObject) {

src/components/gameMaster/zoneEditor/Tiles.vue

@@ -8,7 +8,7 @@ import { useScene } from 'phavuer'
 import { useGameStore } from '@/stores/gameStore'
 import { useZoneEditorStore } from '@/stores/zoneEditorStore'
 import { onBeforeMount, onBeforeUnmount } from 'vue'
-import { getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
+import { deleteTile, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
 import Controls from '@/components/utilities/Controls.vue'
 
 const emit = defineEmits(['tilemap:create'])
@@ -21,6 +21,10 @@ const zoneTilemap = createTilemap()
 const tiles = createTileLayer()
 let tileArray = createTileArray()
 
+/**
+ * @TODO : Add delete tile functionality
+ */
+
 function createTilemap() {
   const zoneData = new Phaser.Tilemaps.MapData({
     width: zoneEditorStore.zone?.width,
@@ -51,7 +55,7 @@ function createTileArray() {
   return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
 }
 
-function handleTileClick(pointer: Phaser.Input.Pointer) {
+function pencil(pointer: Phaser.Input.Pointer) {
   // Check if tool is pencil
   if (zoneEditorStore.tool !== 'pencil') return
 
@@ -71,18 +75,40 @@ function handleTileClick(pointer: Phaser.Input.Pointer) {
   placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
 }
 
+function eraser(pointer: Phaser.Input.Pointer) {
+  // Check if zone is set
+  if (!zoneEditorStore.zone) return
+
+  // Check if tool is pencil
+  if (zoneEditorStore.tool !== 'eraser') return
+
+  // Check if draw mode is tile
+  if (zoneEditorStore.eraserMode !== 'tile') return
+
+  // Check if left mouse button is pressed
+  if (!pointer.isDown) return
+
+  // Check if there is a tile
+  const tile = getTile(tiles, pointer.worldX, pointer.worldY)
+  if (!tile) return
+
+  placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
+}
+
 onBeforeMount(() => {
   if (!zoneEditorStore.zone?.tiles) {
     return
   }
   setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
-  tileArray = zoneEditorStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
+  tileArray = zoneEditorStore.zone.tiles.map((row: any) => row.map((tileId: string) => tileId || 'blank_tile'))
 
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
 })
 
 onBeforeUnmount(() => {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, handleTileClick)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
+  scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
 
   zoneTilemap.destroyLayer('tiles')
   zoneTilemap.removeAllLayers()