Sprite manager front- and backend logics

src/components/utilities/Modal.vue

@@ -4,6 +4,9 @@
       <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">
+          <button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
+            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
+          </button>
           <button @click="close" v-if="closable" class="w-5 h-5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
             <img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
           </button>
@@ -11,7 +14,7 @@
       </div>
       <div class="overflow-hidden grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
+        <img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
       </div>
       <div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
@@ -36,6 +39,10 @@ const props = defineProps({
     type: Boolean,
     default: true
   },
+  canFullScreen: {
+    type: Boolean,
+    default: false
+  },
   modalWidth: {
     type: Number,
     default: 500
@@ -58,6 +65,7 @@ const minWidth = ref(200)
 const minHeight = ref(100)
 const isResizing = ref(false)
 const isDragging = ref(false)
+const isFullScreen = ref(false)
 
 let startX = 0
 let startY = 0
@@ -65,12 +73,13 @@ let initialX = 0
 let initialY = 0
 let startWidth = 0
 let startHeight = 0
+let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
-  top: `${y.value}px`,
-  left: `${x.value}px`,
-  width: `${width.value}px`,
-  height: `${height.value}px`,
+  top: isFullScreen.value ? '0' : `${y.value}px`,
+  left: isFullScreen.value ? '0' : `${x.value}px`,
+  width: isFullScreen.value ? '100vw' : `${width.value}px`,
+  height: isFullScreen.value ? '100vh' : `${height.value}px`,
   maxWidth: '100vw',
   maxHeight: '100vh'
 }))
@@ -80,6 +89,7 @@ function close() {
 }
 
 function startResize(event: MouseEvent) {
+  if (isFullScreen.value) return
   isResizing.value = true
   startWidth = width.value - event.clientX
   startHeight = height.value - event.clientY
@@ -87,7 +97,7 @@ function startResize(event: MouseEvent) {
 }
 
 function resizeModal(event: MouseEvent) {
-  if (!isResizing.value) return
+  if (!isResizing.value || isFullScreen.value) return
   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)
@@ -100,6 +110,7 @@ function stopResize() {
 }
 
 function startDrag(event: MouseEvent) {
+  if (isFullScreen.value) return
   isDragging.value = true
   startX = event.clientX
   startY = event.clientY
@@ -109,7 +120,7 @@ function startDrag(event: MouseEvent) {
 }
 
 function drag(event: MouseEvent) {
-  if (!isDragging.value) return
+  if (!isDragging.value || isFullScreen.value) return
   const dx = event.clientX - startX
   const dy = event.clientY - startY
   x.value = initialX + dx
@@ -122,11 +133,13 @@ function stopDrag() {
 }
 
 function adjustPosition() {
+  if (isFullScreen.value) return
   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))
 }
 
 function handleResize() {
+  if (isFullScreen.value) return
   width.value = Math.min(width.value, window.innerWidth)
   height.value = Math.min(height.value, window.innerHeight)
   adjustPosition()
@@ -139,6 +152,21 @@ function initializePosition() {
   y.value = (window.innerHeight - height.value) / 2
 }
 
+function toggleFullScreen() {
+  if (isFullScreen.value) {
+    // Exit full-screen
+    x.value = preFullScreenState.x
+    y.value = preFullScreenState.y
+    width.value = preFullScreenState.width
+    height.value = preFullScreenState.height
+    isFullScreen.value = false
+  } else {
+    // Enter full-screen
+    preFullScreenState = { x: x.value, y: y.value, width: width.value, height: height.value }
+    isFullScreen.value = true
+  }
+}
+
 watch(
   () => props.isModalOpen,
   (value) => {