Modal improvements, finished object eraser

src/components/utilities/Modal.vue

@@ -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(
+const isModalOpenRef = ref(props.isModalOpen)
-  () => properties.isModalOpen,
-  (value) => {
-    isModalOpenRef.value = value
-  }
-)
-
-const isModalOpenRef = ref(properties.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
+function startResize(event: MouseEvent) {
-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) => {
   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
+  const newWidth = Math.min(startWidth + event.clientX, window.innerWidth)
-  let newHeight = startHeight + event.clientY
+  const newHeight = Math.min(startHeight + event.clientY, window.innerHeight)
-  width.value = newWidth > minWidth.value ? newWidth : minWidth.value
+  width.value = Math.max(newWidth, minWidth.value)
-  height.value = newHeight > minHeight.value ? newHeight : minHeight.value
+  height.value = Math.max(newHeight, minHeight.value)
+  adjustPosition()
 }
 
-const stopResize = () => {
+function stopResize() {
   isResizing.value = false
 }
 
-// make modal draggable
+function startDrag(event: MouseEvent) {
-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) => {
   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(
+function adjustPosition() {
-  () => properties.modalWidth,
+  x.value = Math.max(0, Math.min(x.value, window.innerWidth - width.value))
-  (value) => {
+  y.value = Math.max(0, Math.min(y.value, window.innerHeight - height.value))
-    width.value = value
 }
-)
 
-watch(
+function handleResize() {
-  () => properties.modalHeight,
+  width.value = Math.min(width.value, window.innerWidth)
-  (value) => {
+  height.value = Math.min(height.value, window.innerHeight)
-    height.value = value
+  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)
+  window.addEventListener('mousemove', drag)
-  addEventListener('mouseup', stopDrag)
+  window.addEventListener('mouseup', stopDrag)
-  addEventListener('mousemove', resizeModal)
+  window.addEventListener('mousemove', resizeModal)
-  addEventListener('mouseup', stopResize)
+  window.addEventListener('mouseup', stopResize)
-  addEventListener('resize', handleResize)
+  window.addEventListener('resize', handleResize)
+  initializePosition()
 })
 
 onUnmounted(() => {
-  removeEventListener('mousemove', drag)
+  window.removeEventListener('mousemove', drag)
-  removeEventListener('mouseup', stopDrag)
+  window.removeEventListener('mouseup', stopDrag)
-  removeEventListener('mousemove', resizeModal)
+  window.removeEventListener('mousemove', resizeModal)
-  removeEventListener('mouseup', stopResize)
+  window.removeEventListener('mouseup', stopResize)
-  removeEventListener('resize', handleResize)
+  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>

src/components/utilities/zoneEditor/ZoneEditor.vue

@@ -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) {