From 7b61f71fa9a2e37fc4f2223ca30cf78f34487819 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 4 Nov 2024 23:34:41 +0100
Subject: [PATCH] #231 : Remove logic that prevents modals from being dragged
 outside of the view & refactor modal TS

---
 src/components/utilities/Modal.vue | 263 +++++++++++++----------------
 1 file changed, 117 insertions(+), 146 deletions(-)

diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 0cd7b8f..322478c 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -1,22 +1,25 @@
 <template>
   <Teleport to="body">
     <div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
+      <!-- Header -->
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
-        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
+        <div class="rounded-t absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90" />
         <div class="relative z-10">
           <slot name="modalHeader" />
         </div>
         <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/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
+          <button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
+            <img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
           </button>
-          <button @click="close" v-if="closable" class="w-3.5 h-3.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 v-if="closable" @click="emit('modal:close')" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
+            <img alt="close" src="/assets/icons/close-button-white.svg" class="w-full h-full" draggable="false" />
           </button>
         </div>
       </div>
+
+      <!-- Body -->
       <div class="overflow-hidden grow relative">
-        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90"></div>
+        <div class="rounded-b absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90" />
         <div class="relative z-10 h-full">
           <slot name="modalBody" />
         </div>
@@ -27,219 +30,187 @@
 </template>
 
 <script setup lang="ts">
-import { defineEmits, onMounted, onUnmounted, ref, watch, computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 
-const props = defineProps({
-  isModalOpen: {
-    type: Boolean,
-    default: false
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  isResizable: {
-    type: Boolean,
-    default: true
-  },
-  canFullScreen: {
-    type: Boolean,
-    default: false
-  },
-  modalPositionX: {
-    type: Number,
-    default: 0
-  },
-  modalPositionY: {
-    type: Number,
-    default: 0
-  },
-  modalWidth: {
-    type: Number,
-    default: 500
-  },
-  modalHeight: {
-    type: Number,
-    default: 280
-  }
+interface ModalProps {
+  isModalOpen: boolean
+  closable?: boolean
+  isResizable?: boolean
+  canFullScreen?: boolean
+  modalPositionX?: number
+  modalPositionY?: number
+  modalWidth?: number
+  modalHeight?: number
+}
+
+interface Position {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const props = withDefaults(defineProps<ModalProps>(), {
+  isModalOpen: false,
+  closable: true,
+  isResizable: true,
+  canFullScreen: false,
+  modalPositionX: 0,
+  modalPositionY: 0,
+  modalWidth: 500,
+  modalHeight: 280
 })
 
-const isModalOpenRef = ref(props.isModalOpen)
-const emit = defineEmits(['modal:close', 'character:create'])
+const emit = defineEmits<{
+  'modal:close': []
+  'character:create': []
+}>()
 
+const isModalOpenRef = ref(props.isModalOpen)
 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)
 const isFullScreen = ref(false)
 
-let startX = 0
-let startY = 0
-let initialX = 0
-let initialY = 0
-let startWidth = 0
-let startHeight = 0
-let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
+const minDimensions = {
+  width: 200,
+  height: 100
+}
+
+let dragState = {
+  startX: 0,
+  startY: 0,
+  initialX: 0,
+  initialY: 0,
+  startWidth: 0,
+  startHeight: 0
+}
+
+let preFullScreenState: Position = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
   borderRadius: isFullScreen.value ? '0' : '6px',
   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'
+  height: isFullScreen.value ? '100vh' : `${height.value}px`
 }))
 
-function close() {
-  emit('modal:close')
-}
-
 function startResize(event: MouseEvent) {
   if (isFullScreen.value) return
   isResizing.value = true
-  startWidth = width.value - event.clientX
-  startHeight = height.value - event.clientY
+  dragState.startWidth = width.value - event.clientX
+  dragState.startHeight = height.value - event.clientY
   event.preventDefault()
 }
 
 function resizeModal(event: MouseEvent) {
   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)
-  height.value = Math.max(newHeight, minHeight.value)
-  adjustPosition()
-}
-
-function stopResize() {
-  isResizing.value = false
+  width.value = Math.max(dragState.startWidth + event.clientX, minDimensions.width)
+  height.value = Math.max(dragState.startHeight + event.clientY, minDimensions.height)
 }
 
 function startDrag(event: MouseEvent) {
   if (isFullScreen.value) return
   isDragging.value = true
-  startX = event.clientX
-  startY = event.clientY
-  initialX = x.value
-  initialY = y.value
+  dragState = {
+    startX: event.clientX,
+    startY: event.clientY,
+    initialX: x.value,
+    initialY: y.value,
+    startWidth: width.value,
+    startHeight: height.value
+  }
   event.preventDefault()
 }
 
 function drag(event: MouseEvent) {
   if (!isDragging.value || isFullScreen.value) return
-  const dx = event.clientX - startX
-  const dy = event.clientY - startY
-  x.value = initialX + dx
-  y.value = initialY + dy
-  adjustPosition()
-}
-
-function stopDrag() {
-  isDragging.value = false
-}
-
-function adjustPosition() {
-  if (isFullScreen.value) return
-  x.value = Math.min(x.value, window.innerWidth - width.value)
-  y.value = 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()
-}
-
-function initializePosition() {
-  width.value = Math.min(props.modalWidth, window.innerWidth)
-  height.value = Math.min(props.modalHeight, window.innerHeight)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    x.value = props.modalPositionX
-    y.value = props.modalPositionY
-  } else {
-    x.value = (window.innerWidth - width.value) / 2
-    y.value = (window.innerHeight - height.value) / 2
-  }
+  x.value = dragState.initialX + (event.clientX - dragState.startX)
+  y.value = dragState.initialY + (event.clientY - dragState.startY)
 }
 
 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
+    Object.assign({ x, y, width, height }, preFullScreenState)
   } else {
-    // Enter full-screen
     preFullScreenState = { x: x.value, y: y.value, width: width.value, height: height.value }
-    isFullScreen.value = true
   }
+  isFullScreen.value = !isFullScreen.value
 }
 
+function initializePosition() {
+  width.value = props.modalWidth
+  height.value = props.modalHeight
+  x.value = props.modalPositionX || (window.innerWidth - width.value) / 2
+  y.value = props.modalPositionY || (window.innerHeight - height.value) / 2
+}
+
+// Watchers
 watch(
   () => props.isModalOpen,
   (value) => {
     isModalOpenRef.value = value
-    if (value) {
-      initializePosition()
-    }
+    if (value) initializePosition()
   }
 )
 
 watch(
   () => props.modalWidth,
-  (value) => {
-    width.value = Math.min(value, window.innerWidth)
-  }
+  (value) => (width.value = value)
 )
-
 watch(
   () => props.modalHeight,
-  (value) => {
-    height.value = Math.min(value, window.innerHeight)
-  }
+  (value) => (height.value = value)
 )
-
 watch(
   () => props.modalPositionX,
-  (value) => {
-    x.value = value
-  }
+  (value) => (x.value = value)
 )
-
 watch(
   () => props.modalPositionY,
-  (value) => {
-    y.value = value
-  }
+  (value) => (y.value = value)
 )
 
+// Lifecycle hooks
 onMounted(() => {
-  addEventListener('mousemove', drag)
-  addEventListener('mouseup', stopDrag)
-  addEventListener('mousemove', resizeModal)
-  addEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    addEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
+      }
+    ]
   }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.addEventListener(event, fn))
+  })
+
   initializePosition()
 })
 
 onUnmounted(() => {
-  removeEventListener('mousemove', drag)
-  removeEventListener('mouseup', stopDrag)
-  removeEventListener('mousemove', resizeModal)
-  removeEventListener('mouseup', stopResize)
-  if (props.modalPositionX !== 0 && props.modalPositionY !== 0) {
-    removeEventListener('resize', handleResize)
+  const handlers: Record<string, EventListener[]> = {
+    mousemove: [(e: Event) => drag(e as MouseEvent), (e: Event) => resizeModal(e as MouseEvent)],
+    mouseup: [
+      () => {
+        isDragging.value = false
+      },
+      () => {
+        isResizing.value = false
+      }
+    ]
   }
+
+  Object.entries(handlers).forEach(([event, fns]) => {
+    fns.forEach((fn) => window.removeEventListener(event, fn))
+  })
 })
 </script>