forked from noxious/client
Modal improvements, finished object eraser
This commit is contained in:
parent
93e54b2164
commit
e96b9c9ee9
@ -2,7 +2,7 @@
|
||||
<Teleport to="body">
|
||||
<div v-if="isModalOpenRef"
|
||||
class="fixed bg-opacity-80 bg-gray-300 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg"
|
||||
:style="{ top: y + 'px', left: x + 'px', width: width + 'px', height: height + 'px' }">
|
||||
:style="modalStyle">
|
||||
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
|
||||
<slot name="modalHeader" />
|
||||
<div class="flex gap-2.5">
|
||||
@ -25,9 +25,9 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineEmits, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { defineEmits, onMounted, onUnmounted, ref, watch, computed } from 'vue'
|
||||
|
||||
const properties = defineProps({
|
||||
const props = defineProps({
|
||||
isModalOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
@ -50,65 +50,60 @@ const properties = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => properties.isModalOpen,
|
||||
(value) => {
|
||||
isModalOpenRef.value = value
|
||||
}
|
||||
)
|
||||
|
||||
const isModalOpenRef = ref(properties.isModalOpen)
|
||||
const isModalOpenRef = ref(props.isModalOpen)
|
||||
const emit = defineEmits(['modal:close', 'character:create'])
|
||||
|
||||
const width = ref(props.modalWidth)
|
||||
const height = ref(props.modalHeight)
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
|
||||
const minWidth = ref(200)
|
||||
const minHeight = ref(100)
|
||||
const isResizing = ref(false)
|
||||
const isDragging = ref(false)
|
||||
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let initialX = 0
|
||||
let initialY = 0
|
||||
let startWidth = 0
|
||||
let startHeight = 0
|
||||
|
||||
const modalStyle = computed(() => ({
|
||||
top: `${y.value}px`,
|
||||
left: `${x.value}px`,
|
||||
width: `${width.value}px`,
|
||||
height: `${height.value}px`,
|
||||
maxWidth: '100vw',
|
||||
maxHeight: '100vh'
|
||||
}))
|
||||
|
||||
function close() {
|
||||
emit('modal:close')
|
||||
}
|
||||
|
||||
// (re)size logics
|
||||
const width = ref(properties.modalWidth)
|
||||
const height = ref(properties.modalHeight)
|
||||
let minWidth = ref(200)
|
||||
let minHeight = ref(100)
|
||||
let isResizing = ref(false)
|
||||
|
||||
let startWidth = 0
|
||||
let startHeight = 0
|
||||
|
||||
const startResize = (event: MouseEvent) => {
|
||||
function startResize(event: MouseEvent) {
|
||||
isResizing.value = true
|
||||
startWidth = width.value - event.clientX
|
||||
startHeight = height.value - event.clientY
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const resizeModal = (event: MouseEvent) => {
|
||||
function resizeModal(event: MouseEvent) {
|
||||
if (!isResizing.value) return
|
||||
let newWidth = startWidth + event.clientX
|
||||
let newHeight = startHeight + event.clientY
|
||||
width.value = newWidth > minWidth.value ? newWidth : minWidth.value
|
||||
height.value = newHeight > minHeight.value ? newHeight : minHeight.value
|
||||
const newWidth = Math.min(startWidth + event.clientX, window.innerWidth)
|
||||
const newHeight = Math.min(startHeight + event.clientY, window.innerHeight)
|
||||
width.value = Math.max(newWidth, minWidth.value)
|
||||
height.value = Math.max(newHeight, minHeight.value)
|
||||
adjustPosition()
|
||||
}
|
||||
|
||||
const stopResize = () => {
|
||||
function stopResize() {
|
||||
isResizing.value = false
|
||||
}
|
||||
|
||||
// make modal draggable
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let initialX = 0
|
||||
let initialY = 0
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
const isDragging = ref(false)
|
||||
|
||||
// set modal position center of the screen
|
||||
onMounted(() => {
|
||||
x.value = window.innerWidth / 2 - 150
|
||||
y.value = window.innerHeight / 2 - 100
|
||||
})
|
||||
|
||||
const startDrag = (event: MouseEvent) => {
|
||||
function startDrag(event: MouseEvent) {
|
||||
isDragging.value = true
|
||||
startX = event.clientX
|
||||
startY = event.clientY
|
||||
@ -117,77 +112,66 @@ const startDrag = (event: MouseEvent) => {
|
||||
event.preventDefault()
|
||||
}
|
||||
|
||||
const drag = (event: MouseEvent) => {
|
||||
function drag(event: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
const dx = event.clientX - startX
|
||||
const dy = event.clientY - startY
|
||||
x.value = initialX + dx
|
||||
y.value = initialY + dy
|
||||
adjustPosition()
|
||||
}
|
||||
|
||||
const stopDrag = () => {
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => properties.modalWidth,
|
||||
(value) => {
|
||||
width.value = value
|
||||
}
|
||||
)
|
||||
function adjustPosition() {
|
||||
x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
|
||||
y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
|
||||
}
|
||||
|
||||
watch(
|
||||
() => properties.modalHeight,
|
||||
(value) => {
|
||||
height.value = value
|
||||
function handleResize() {
|
||||
width.value = Math.min(width.value, window.innerWidth)
|
||||
height.value = Math.min(height.value, window.innerHeight)
|
||||
adjustPosition()
|
||||
}
|
||||
|
||||
function initializePosition() {
|
||||
width.value = Math.min(props.modalWidth, window.innerWidth)
|
||||
height.value = Math.min(props.modalHeight, window.innerHeight)
|
||||
x.value = (window.innerWidth - width.value) / 2
|
||||
y.value = (window.innerHeight - height.value) / 2
|
||||
}
|
||||
|
||||
watch(() => props.isModalOpen, (value) => {
|
||||
isModalOpenRef.value = value
|
||||
if (value) {
|
||||
initializePosition()
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
watch(() => props.modalWidth, (value) => {
|
||||
width.value = Math.min(value, window.innerWidth)
|
||||
})
|
||||
|
||||
watch(() => props.modalHeight, (value) => {
|
||||
height.value = Math.min(value, window.innerHeight)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('mousemove', drag)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
addEventListener('mousemove', resizeModal)
|
||||
addEventListener('mouseup', stopResize)
|
||||
addEventListener('resize', handleResize)
|
||||
window.addEventListener('mousemove', drag)
|
||||
window.addEventListener('mouseup', stopDrag)
|
||||
window.addEventListener('mousemove', resizeModal)
|
||||
window.addEventListener('mouseup', stopResize)
|
||||
window.addEventListener('resize', handleResize)
|
||||
initializePosition()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeEventListener('mousemove', drag)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
removeEventListener('mousemove', resizeModal)
|
||||
removeEventListener('mouseup', stopResize)
|
||||
removeEventListener('resize', handleResize)
|
||||
window.removeEventListener('mousemove', drag)
|
||||
window.removeEventListener('mouseup', stopDrag)
|
||||
window.removeEventListener('mousemove', resizeModal)
|
||||
window.removeEventListener('mouseup', stopResize)
|
||||
window.removeEventListener('resize', handleResize)
|
||||
})
|
||||
|
||||
// Make sure modal doesn't go off screen
|
||||
watch(
|
||||
() => x.value,
|
||||
(value) => {
|
||||
if (value < 0) {
|
||||
x.value = 0
|
||||
} else if (value + width.value > window.innerWidth) {
|
||||
x.value = window.innerWidth - width.value
|
||||
}
|
||||
}
|
||||
)
|
||||
watch(
|
||||
() => y.value,
|
||||
(value) => {
|
||||
if (value < 0) {
|
||||
y.value = 0
|
||||
} else if (value + height.value > window.innerHeight) {
|
||||
y.value = window.innerHeight - height.value
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
// also on window resize function
|
||||
function handleResize() {
|
||||
if (x.value + width.value > window.innerWidth) {
|
||||
x.value = window.innerWidth - width.value
|
||||
}
|
||||
if (y.value + height.value > window.innerHeight) {
|
||||
y.value = window.innerHeight - height.value
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TilemapLayerC :tilemap="zone" :tileset="exampleTilesArray" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
|
||||
|
||||
<Controls :layer="tiles" />
|
||||
|
||||
<Container>
|
||||
<Image v-for="object in zoneObjects" :key="object.object.id" :x="object.position_x" :y="object.position_y" :texture="object.object.id" :originY="object.object.origin_x" :originX="object.object.origin_y" />
|
||||
</Container>
|
||||
@ -80,6 +80,10 @@ function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
placeTile(zone, tiles, tile.x, tile.y, 'blank_tile')
|
||||
zoneEditorStore.updateTile(tile.x, tile.y, 'blank_tile')
|
||||
}
|
||||
|
||||
if (zoneEditorStore.drawMode === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.position_x !== tileToWorldXY(tiles, tile.x, tile.y).position_x && object.position_y !== tileToWorldXY(tiles, tile.x, tile.y).position_y)
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user