Boundaries for dragging

cotmw/src/components/HUD.vue

@@ -4,11 +4,15 @@
 
   const collapsed = ref(false);
 
+  const hud = ref(null);
   const pos = reactive({ x: 20, y: 20 });
   const dragging = ref(false);
   const dragOffset = { x: 0, y: 0 };
 
+  const logging = false;
+
   function onMouseDown(e){
+    log("Dragging started!");
     dragging.value = true;
     dragOffset.x = e.clientX - pos.x;
     dragOffset.y = e.clientY - pos.y;
@@ -17,11 +21,30 @@
 
   function onMouseMove(e){
     if(!dragging.value) return;
-    pos.x = e.clientX - dragOffset.x;
+
-    pos.y = e.clientY - dragOffset.y;
+    const x = e.clientX - dragOffset.x;
+    const y = e.clientY - dragOffset.y;
+
+    const hudRect = hud.value.getBoundingClientRect();
+    const hudW = hudRect.width;
+    const hudH = hudRect.height;
+
+    const docW = document.documentElement.scrollWidth;
+    const docH = document.documentElement.scrollHeight;
+
+    const minX = 20;
+    const minY = 20;
+    const maxX = docW - hudW - 20;
+    const maxY = docH - hudH - 20;
+
+    pos.x = Math.min(Math.max(x, minX), maxX);
+    pos.y = Math.min(Math.max(y, minY), maxY);
+
+    log(`Location ${pos.x}, ${pos.y}`);
   }
 
   function onMouseUp(){
+    log("Dragging done!");
     dragging.value = false;
   }
 
@@ -37,10 +60,9 @@
 
   function toggleHUD() {
     collapsed.value = !collapsed.value;
+    log("HUD toggled!");
   }
 
-  var logging = true;
-
   function log(message){
     if(logging)
       console.log(message);
@@ -87,7 +109,7 @@
 
 <template>
   <div class="container">
-    <div class="container hud" id="Control" :style="{ top: pos.y + 'px', left: pos.x + 'px', position: 'absolute', cursor: dragging ? 'grabbing' : 'grab' }" @mousedown="onMouseDown">
+    <div ref="hud" class="hud" id="Control" :style="{ top: pos.y + 'px', left: pos.x + 'px', position: 'absolute', cursor: dragging ? 'grabbing' : 'grab' }" @mousedown="onMouseDown">
 
       <div class="hud-header" @click="toggleHUD">
         <span>{{ HUD_name }}</span>
@@ -97,7 +119,9 @@
       <transition name="expand">
         <div v-show="!collapsed" class="hud-body">
           <div class="spacer"></div>
+
           <HUDRow v-for="rowProp in rowProps" :rowProps="rowProp"></HUDRow>
+
           <div class="spacer"></div>
           <div class="hud-row">
             <button class="btn btn-sm btn-success hud-inner-btn" id="LocationButton" @click="handleButtonPress($event.target)">Location</button>