Refactoring of modalShown booleans
This commit is contained in:
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Image v-for="tile in mapEditorStore.map?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
<Image v-for="tile in mapEditor.currentMap.value?.mapEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -8,62 +8,55 @@ import { uuidv4 } from '@/application/utilities'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
import { type Map as MapT } from "@/application/types"
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { shallowRef, watch } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
|
||||
defineExpose({handlePointer})
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
||||
|
||||
function getImageProps(tile: MapEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
|
||||
x: tileToWorldX(props.tileMap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tileMap, tile.positionX, tile.positionY),
|
||||
texture: tile.type,
|
||||
depth: 999
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
function pencil(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
if (!tileLayer.value) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (existingEventTile) return
|
||||
|
||||
// If teleport, check if there is a selected map
|
||||
if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMap) return
|
||||
if (mapEditorStore.drawMode === 'teleport' && !mapEditorStore.teleportSettings.toMapId) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
mapId: mapEditorStore.map.id,
|
||||
map: mapEditorStore.map,
|
||||
mapId: map?.id,
|
||||
map: map?.id,
|
||||
type: mapEditorStore.drawMode === 'blocking tile' ? MapEventTileType.BLOCK : MapEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
mapEditorStore.drawMode === 'teleport'
|
||||
? {
|
||||
toMap: mapEditorStore.teleportSettings.toMap,
|
||||
toMap: mapEditorStore.teleportSettings.toMapId,
|
||||
toPositionX: mapEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: mapEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: mapEditorStore.teleportSettings.toRotation
|
||||
@ -71,18 +64,26 @@ function pencil(pointer: Phaser.Input.Pointer) {
|
||||
: undefined
|
||||
}
|
||||
|
||||
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.concat(newEventTile as MapEventTile)
|
||||
map!.mapEventTiles = map!.mapEventTiles.concat(newEventTile as MapEventTile)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
function erase(pointer: Phaser.Input.Pointer, map: MapT) {
|
||||
if (!tileLayer.value) return
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditorStore.tool !== 'eraser') return
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (!existingEventTile) return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (mapEditorStore.eraserMode !== 'blocking tile' && mapEditorStore.eraserMode !== 'teleport') return
|
||||
// Remove existing event tile
|
||||
map.mapEventTiles = map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
}
|
||||
|
||||
function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
const map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -90,29 +91,12 @@ function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
if (mapEditorStore.drawMode !== 'blocking tile' && mapEditorStore.drawMode !== 'teleport') return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = mapEditorStore.map.mapEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (!existingEventTile) return
|
||||
|
||||
// Remove existing event tile
|
||||
mapEditorStore.map.mapEventTiles = mapEditorStore.map.mapEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
switch (mapEditorStore.tool) {
|
||||
case 'pencil': pencil(pointer, map)
|
||||
case 'eraser': erase(pointer, map)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
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)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
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>
|
||||
|
||||
@ -22,6 +22,8 @@ const tileStorage = new TileStorage()
|
||||
const tileMap = shallowRef<Phaser.Tilemaps.Tilemap>()
|
||||
const tileLayer = shallowRef<Phaser.Tilemaps.TilemapLayer>()
|
||||
|
||||
defineExpose({handlePointer})
|
||||
|
||||
function createTileMap() {
|
||||
const mapData = new Phaser.Tilemaps.MapData({
|
||||
width: mapEditor.currentMap.value?.width,
|
||||
@ -32,9 +34,7 @@ function createTileMap() {
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
|
||||
const newTileMap = new Phaser.Tilemaps.Tilemap(scene, mapData)
|
||||
emit('tileMap:create', newTileMap)
|
||||
return newTileMap
|
||||
return new Phaser.Tilemaps.Tilemap(scene, mapData)
|
||||
}
|
||||
|
||||
async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
|
||||
@ -55,111 +55,81 @@ async function createTileLayer(currentTileMap: Phaser.Tilemaps.Tilemap) {
|
||||
return layer
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
if (!tileMap.value || !tileLayer.value) return
|
||||
|
||||
// Check if map is set
|
||||
if (!mapEditor.currentMap.value) return
|
||||
console.log(mapEditor.tool.value)
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditor.tool.value !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (mapEditor.drawMode.value !== 'tile') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!mapEditor.selectedTile.value) return // Changed this line to access .value
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
function pencil(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
|
||||
var map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
||||
const tile = tileLayer.getTileAtWorldXY(pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, mapEditor.selectedTile.value)
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, mapEditorStore.selectedTile)
|
||||
|
||||
// Adjust mapEditor tiles
|
||||
mapEditor.currentMap.value.tiles[tile.y][tile.x] = mapEditor.selectedTile.value
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
tileMap.tiles[tile.y][tile.x] = map.tiles[tile.y][tile.x]
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
if (!tileMap.value || !tileLayer.value) return
|
||||
|
||||
// Check if map is set
|
||||
if (!mapEditor.currentMap.value) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditor.tool.value !== 'eraser') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (mapEditor.eraserMode.value !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) return
|
||||
function eraser(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
|
||||
let map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(tileMap.value, tileLayer.value, tile.x, tile.y, 'blank_tile')
|
||||
placeTile(tileMap, tileLayer, tile.x, tile.y, 'blank_tile')
|
||||
|
||||
// Adjust mapEditor.map.tiles
|
||||
mapEditor.currentMap.value.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
map.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer) {
|
||||
if (!tileMap.value || !tileLayer.value) return
|
||||
|
||||
// Check if map is set
|
||||
if (!mapEditor.currentMap.value) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditor.tool.value !== 'paint') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!mapEditor.selectedTile.value) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer, tileMap: Phaser.Tilemaps.Tilemap, tileLayer: Phaser.Tilemaps.TilemapLayer) {
|
||||
// Set new tileArray with selected tile
|
||||
setLayerTiles(tileMap.value, tileLayer.value, createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value))
|
||||
setLayerTiles(tileMap, tileLayer, createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile))
|
||||
|
||||
// Adjust mapEditor.map.tiles
|
||||
mapEditor.currentMap.value.tiles = createTileArray(tileMap.value.width, tileMap.value.height, mapEditor.selectedTile.value)
|
||||
// Adjust mapEditorStore.map.tiles
|
||||
if (mapEditor.currentMap.value) {
|
||||
mapEditor.currentMap.value.tiles = createTileArray(tileMap.width, tileMap.height, mapEditorStore.selectedTile)
|
||||
}
|
||||
}
|
||||
|
||||
// When alt is pressed, and the pointer is down, select the tile that the pointer is over
|
||||
function tilePicker(pointer: Phaser.Input.Pointer) {
|
||||
if (!tileMap.value || !tileLayer.value) return
|
||||
function tilePicker(pointer: Phaser.Input.Pointer, tileLayer: Phaser.Tilemaps.TilemapLayer) {
|
||||
let map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
// Check if map is set
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Select the tile
|
||||
mapEditorStore.setSelectedTile(map.tiles[tile.y][tile.x])
|
||||
}
|
||||
|
||||
watch(
|
||||
() => mapEditorStore.shouldClearTiles,
|
||||
(shouldClear) => {
|
||||
if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
|
||||
const blankTiles = createTileArray(tileLayer.value.width, tileLayer.value.height, 'blank_tile')
|
||||
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
|
||||
mapEditor.currentMap.value.tiles = blankTiles
|
||||
mapEditorStore.resetClearTilesFlag()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
function handlePointer(pointer: Phaser.Input.Pointer) {
|
||||
if (!mapEditor.currentMap.value) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditor.tool.value !== 'pencil') return
|
||||
if (!tileMap.value || !tileLayer.value) return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (mapEditor.drawMode.value !== 'tile') return
|
||||
// Check if tool is pencil
|
||||
if (mapEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!mapEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
@ -170,25 +140,18 @@ function tilePicker(pointer: Phaser.Input.Pointer) {
|
||||
// Check if alt is pressed
|
||||
if (!pointer.event.altKey) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tileLayer.value, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Select the tile
|
||||
mapEditor.setSelectedTile(mapEditor.currentMap.value.tiles[tile.y][tile.x])
|
||||
}
|
||||
|
||||
watch(
|
||||
() => mapEditor.shouldClearTiles.value,
|
||||
(shouldClear) => {
|
||||
if (shouldClear && mapEditor.currentMap.value && tileMap.value && tileLayer.value) {
|
||||
const blankTiles = createTileArray(tileMap.value.width, tileMap.value.height, 'blank_tile')
|
||||
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
|
||||
mapEditor.currentMap.value.tiles = blankTiles
|
||||
mapEditor.resetClearTilesFlag()
|
||||
}
|
||||
// Check if draw mode is tile
|
||||
switch (mapEditorStore.tool) {
|
||||
case 'pencil':
|
||||
pencil(pointer, tileMap.value, tileLayer.value)
|
||||
case 'eraser':
|
||||
eraser(pointer, tileMap.value, tileLayer.value)
|
||||
case 'paint':
|
||||
paint(pointer, tileMap.value, tileLayer.value)
|
||||
case 'tile picker':
|
||||
tilePicker(pointer, tileLayer.value)
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (!mapEditor.currentMap.value?.tiles) return
|
||||
@ -211,19 +174,9 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
setLayerTiles(tileMap.value, tileLayer.value, blankTiles)
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, tilePicker)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, tilePicker)
|
||||
|
||||
if (tileMap.value) {
|
||||
tileMap.value.destroyLayer('tiles')
|
||||
tileMap.value.removeAllLayers()
|
||||
|
||||
@ -11,7 +11,7 @@ import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
placedMapObject: PlacedMapObject
|
||||
selectedPlacedMapObject: PlacedMapObject | null
|
||||
movingPlacedMapObject: PlacedMapObject | null
|
||||
@ -24,8 +24,8 @@ const imageProps = computed(() => ({
|
||||
alpha: props.movingPlacedMapObject?.id === props.placedMapObject.id ? 0.5 : 1,
|
||||
tint: props.selectedPlacedMapObject?.id === props.placedMapObject.id ? 0x00ff00 : 0xffffff,
|
||||
depth: calculateIsometricDepth(props.placedMapObject.positionX, props.placedMapObject.positionY, props.placedMapObject.mapObject.frameWidth, props.placedMapObject.mapObject.frameHeight),
|
||||
x: tileToWorldX(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, props.placedMapObject.positionX, props.placedMapObject.positionY),
|
||||
x: tileToWorldX(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
|
||||
y: tileToWorldY(props.tileMap, props.placedMapObject.positionX, props.placedMapObject.positionY),
|
||||
flipX: props.placedMapObject.isRotated,
|
||||
texture: props.placedMapObject.mapObject.id,
|
||||
originY: Number(props.placedMapObject.mapObject.originX),
|
||||
|
||||
@ -1,142 +1,87 @@
|
||||
<template>
|
||||
<SelectedPlacedMapObjectComponent v-if="selectedPlacedMapObject" :placedMapObject="selectedPlacedMapObject" @move="moveMapObject" @rotate="rotatePlacedMapObject" @delete="deletePlacedMapObject" />
|
||||
<PlacedMapObject v-for="placedMapObject in mapEditorStore.map?.placedMapObjects" :tilemap="tilemap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
|
||||
<PlacedMapObject v-for="placedMapObject in mapEditor.currentMap.value?.placedMapObjects" :tilemap="tileMap" :placedMapObject :selectedPlacedMapObject :movingPlacedMapObject @pointerup="clickPlacedMapObject(placedMapObject)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import type { Map as MapT, PlacedMapObject as PlacedMapObjectT } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import PlacedMapObject from '@/components/gameMaster/mapEditor/mapPartials/PlacedMapObject.vue'
|
||||
import SelectedPlacedMapObjectComponent from '@/components/gameMaster/mapEditor/partials/SelectedPlacedMapObject.vue'
|
||||
import { getTile } from '@/composables/mapComposable'
|
||||
import { useMapEditorStore } from '@/stores/mapEditorStore'
|
||||
import { useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
|
||||
const scene = useScene()
|
||||
const mapEditorStore = useMapEditorStore()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const selectedPlacedMapObject = ref<PlacedMapObjectT | null>(null)
|
||||
const movingPlacedMapObject = ref<PlacedMapObjectT | null>(null)
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
tileMap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is map_object
|
||||
if (mapEditorStore.drawMode !== 'map_object') return
|
||||
|
||||
// Check if there is a selected object
|
||||
if (!mapEditorStore.selectedMapObject) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed, this means we are selecting the object
|
||||
if (pointer.event.altKey) return
|
||||
defineExpose({handlePointer})
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
if (existingPlacedMapObject) return
|
||||
|
||||
const newPlacedMapObject = {
|
||||
const newPlacedMapObject: PlacedMapObjectT = {
|
||||
id: uuidv4(),
|
||||
map: mapEditorStore.map,
|
||||
mapObject: mapEditorStore.selectedMapObject,
|
||||
depth: 0,
|
||||
map: map,
|
||||
mapObject: mapEditorStore.selectedMapObject!,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
|
||||
// Add new object to mapObjects
|
||||
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.concat(newPlacedMapObject as PlacedMapObjectT)
|
||||
map.placedMapObjects.concat(newPlacedMapObject)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is eraser
|
||||
if (mapEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is map_object
|
||||
if (mapEditorStore.eraserMode !== 'map_object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed, this means we are selecting the object
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
if (!existingPlacedMapObject) return
|
||||
|
||||
// Remove existing object
|
||||
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
|
||||
map.placedMapObjects = map.placedMapObjects.filter((placedMapObject) => placedMapObject.id !== existingPlacedMapObject.id)
|
||||
}
|
||||
|
||||
function objectPicker(pointer: Phaser.Input.Pointer) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (mapEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is map_object
|
||||
if (mapEditorStore.drawMode !== 'map_object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// If alt is not pressed, return
|
||||
if (!pointer.event.altKey) return
|
||||
|
||||
function objectPicker(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingPlacedMapObject = mapEditorStore.map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
const existingPlacedMapObject = map.placedMapObjects.find((placedMapObject) => placedMapObject.positionX === tile.x && placedMapObject.positionY === tile.y)
|
||||
if (!existingPlacedMapObject) return
|
||||
|
||||
// Select the object
|
||||
mapEditorStore.setSelectedMapObject(existingPlacedMapObject.mapObject)
|
||||
}
|
||||
|
||||
function moveMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
movingPlacedMapObject.value = mapEditorStore.map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
|
||||
function moveMapObject(id: string, tileMapLayer: Phaser.Tilemaps.TilemapLayer, map: MapT) {
|
||||
movingPlacedMapObject.value = map.placedMapObjects.find((object) => object.id === id) as PlacedMapObjectT
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (!movingPlacedMapObject.value) return
|
||||
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
const tile = getTile(tileMapLayer, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
movingPlacedMapObject.value.positionX = tile.x
|
||||
@ -153,11 +98,8 @@ function moveMapObject(id: string) {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
function rotatePlacedMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.map((placedMapObject) => {
|
||||
function rotatePlacedMapObject(id: string, map: MapT) {
|
||||
map.placedMapObjects = map.placedMapObjects.map((placedMapObject) => {
|
||||
if (placedMapObject.id === id) {
|
||||
return {
|
||||
...placedMapObject,
|
||||
@ -168,11 +110,8 @@ function rotatePlacedMapObject(id: string) {
|
||||
})
|
||||
}
|
||||
|
||||
function deletePlacedMapObject(id: string) {
|
||||
// Check if map is set
|
||||
if (!mapEditorStore.map) return
|
||||
|
||||
mapEditorStore.map.placedMapObjects = mapEditorStore.map.placedMapObjects.filter((object) => object.id !== id)
|
||||
function deletePlacedMapObject(id: string, map: MapT) {
|
||||
map.placedMapObjects = map.placedMapObjects.filter((object) => object.id !== id)
|
||||
selectedPlacedMapObject.value = null
|
||||
}
|
||||
|
||||
@ -185,37 +124,48 @@ function clickPlacedMapObject(placedMapObject: PlacedMapObjectT) {
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
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)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, objectPicker)
|
||||
})
|
||||
function handlePointer(pointer: Phaser.Input.Pointer, tileMapLayer: Phaser.Tilemaps.TilemapLayer) {
|
||||
const map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
onUnmounted(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
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)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, objectPicker)
|
||||
})
|
||||
if (mapEditorStore.drawMode !== 'map_object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if shift is not pressed, this means we are moving the camera
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
// Check if alt is pressed, this means we are selecting the object
|
||||
if (pointer.event.altKey) return
|
||||
|
||||
// Check if tool is pencil
|
||||
switch (mapEditorStore.tool) {
|
||||
case 'pencil':
|
||||
if (mapEditorStore.selectedMapObject) pencil(pointer, tileMapLayer, map)
|
||||
case 'eraser':
|
||||
eraser(pointer, tileMapLayer, map)
|
||||
case 'object picker':
|
||||
objectPicker(pointer, tileMapLayer, map)
|
||||
}
|
||||
}
|
||||
|
||||
// watch mapEditorStore.mapObjectList and update originX and originY of objects in mapObjects
|
||||
watch(
|
||||
() => mapEditorStore.mapObjectList,
|
||||
(newMapObjects) => {
|
||||
if (!mapEditorStore.map) return
|
||||
() => mapEditor.currentMap.value,
|
||||
() => {
|
||||
const map = mapEditor.currentMap.value
|
||||
if (!map) return
|
||||
|
||||
const updatedMapObjects = mapEditorStore.map.placedMapObjects.map((mapObject) => {
|
||||
const updatedMapObject = newMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
|
||||
const updatedMapObjects = map.placedMapObjects.map((mapObject) => {
|
||||
const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapObject.mapObject.id)
|
||||
if (updatedMapObject) {
|
||||
return {
|
||||
...mapObject,
|
||||
mapObject: {
|
||||
...mapObject.mapObject,
|
||||
originX: updatedMapObject.originX,
|
||||
originY: updatedMapObject.originY
|
||||
originX: updatedMapObject.positionX,
|
||||
originY: updatedMapObject.positionY
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -223,19 +173,16 @@ watch(
|
||||
})
|
||||
|
||||
// Update the map with the new mapObjects
|
||||
mapEditorStore.setMap({
|
||||
...mapEditorStore.map,
|
||||
placedMapObjects: updatedMapObjects
|
||||
})
|
||||
map.placedMapObjects = [...map.placedMapObjects, ...updatedMapObjects]
|
||||
|
||||
// Update selectedMapObject if it's set
|
||||
// Update mapObject if it's set
|
||||
if (mapEditorStore.selectedMapObject) {
|
||||
const updatedMapObject = newMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
|
||||
const updatedMapObject = map.placedMapObjects.find((obj) => obj.id === mapEditorStore.selectedMapObject?.id)
|
||||
if (updatedMapObject) {
|
||||
mapEditorStore.setSelectedMapObject({
|
||||
...mapEditorStore.selectedMapObject,
|
||||
originX: updatedMapObject.originX,
|
||||
originY: updatedMapObject.originY
|
||||
originX: updatedMapObject.positionX,
|
||||
originY: updatedMapObject.positionY
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user