From 5acbc5acf039db7c4c1714859e9afe924969949b Mon Sep 17 00:00:00 2001
From: TerraMaster85 <tm85@e3t.cc>
Date: Sat, 6 Jan 2024 18:42:48 -0500
Subject: [PATCH] UI dragging refactor & better Movable icon

---
 .../src/components/ui/Popup.svelte            | 80 +++++++++++++++----
 .../src/icons/MovableIcon.svelte              | 53 +++++++++---
 2 files changed, 107 insertions(+), 26 deletions(-)

diff --git a/starkingdoms-client/src/components/ui/Popup.svelte b/starkingdoms-client/src/components/ui/Popup.svelte
index 2075186e474763029e098e9c6b860e64f7f29f9e..5bf1557c87cec5af67dc93756c12f48c77a8d232 100644
--- a/starkingdoms-client/src/components/ui/Popup.svelte
+++ b/starkingdoms-client/src/components/ui/Popup.svelte
@@ -4,7 +4,8 @@
   import ChevronDown from "../../icons/ChevronDown.svelte";
   import ChevronUp from "../../icons/ChevronUp.svelte";
   import Button from "./Button.svelte";
-
+  import createDebug from "debug";
+  
   let clazz = "";
   export { clazz as class };
 
@@ -28,11 +29,15 @@
 
   onMount(() => {
     if (draggable) {
-      let top = window.localStorage.getItem(`pop-${id}top`);
-      let left = window.localStorage.getItem(`pop-${id}left`);
-
-      popup.style.top = top;
-      popup.style.left = left;
+      pos1 = parseInt(window.localStorage.getItem(`pop-${id}top`));
+      pos2 = parseInt(window.localStorage.getItem(`pop-${id}left`));
+     
+      // Correct illegally placed draggables
+      [pos1, pos2, ] = dragBoundsEnforce();
+
+      // I hate JS for letting me pull crap like this
+      popup.style.top = `${pos1}px`;
+      popup.style.left = `${pos2}px`;
     }
     if (minimizable) {
       minimized = window.localStorage.getItem(`pop-${id}minim`) === "yes";
@@ -43,23 +48,66 @@
     if (!draggable) {
       return;
     }
-    pos3 = e.clientX;
-    pos4 = e.clientY;
+
+    let popup_dimensions = popup.getBoundingClientRect();
+
+    pos3 = e.clientX - popup_dimensions.left;
+    pos4 = e.clientY - popup_dimensions.top;
     document.onmouseup = closeDragElement;
     document.onmousemove = elementDrag;
   }
 
   function elementDrag(e) {
     e.preventDefault();
-    pos1 = pos3 - e.clientX;
-    pos2 = pos4 - e.clientY;
-    pos3 = e.clientX;
-    pos4 = e.clientY;
-    popup.style.top = popup.offsetTop - pos2 + "px";
-    popup.style.left = popup.offsetLeft - pos1 + "px";
 
-    window.localStorage.setItem(`pop-${id}top`, popup.style.top);
-    window.localStorage.setItem(`pop-${id}left`, popup.style.left);
+    pos1 = e.clientX - pos3;
+    pos2 = e.clientY - pos4;
+
+    let [left, top, bounds_violated] = dragBoundsEnforce();
+
+    console.log(left, top, bounds_violated);
+
+    popup.style.left = left + "px";
+    popup.style.top = top + "px";
+  }
+
+  function dragBoundsEnforce() {
+    let left = pos1;
+    let top = pos2;
+
+    let popup_dimensions = popup.getBoundingClientRect();
+    
+    let snap_distance = 16;
+    let bounds = {
+      "top": 8 + snap_distance,
+      "left": 8 + snap_distance,
+      "bottom": window.innerHeight - popup_dimensions.height - 8 - snap_distance,
+      "right": window.innerWidth - popup_dimensions.width - 8 - snap_distance
+    }
+    
+    let bounds_violated = false;
+
+    // Add cases for snapping here
+    if (left >= bounds.right) {
+      // Too far right!
+      left = bounds.right;
+      bounds_violated = true;
+    } else if (left <= bounds.left) {
+      // Too far left!
+      left = bounds.left;
+      bounds_violated = true;
+    }
+    if (top >= bounds.bottom) {
+      // Too far down!
+      top = bounds.bottom;
+      bounds_violated = true;
+    } else if (top <= bounds.top) {
+      // Too far up!
+      top = bounds.top;
+      bounds_violated = true;
+    }
+
+    return [left, top, bounds_violated];
   }
 
   function closeDragElement() {
diff --git a/starkingdoms-client/src/icons/MovableIcon.svelte b/starkingdoms-client/src/icons/MovableIcon.svelte
index 9b9b8518c7c2bc529eb02972ea5c96399344cbe4..04d15d4dc304fa38f35bbb1349f124e9baf38179 100644
--- a/starkingdoms-client/src/icons/MovableIcon.svelte
+++ b/starkingdoms-client/src/icons/MovableIcon.svelte
@@ -4,14 +4,47 @@
 </script>
 
 <svg
-  xmlns="http://www.w3.org/2000/svg"
-  fill="none"
-  viewBox="0 0 24 24"
-  stroke-width="1.5"
-  stroke="currentColor"
-  class={clazz}>
-  <path
-    stroke-linecap="round"
-    stroke-linejoin="round"
-    d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+   width="1rem"
+   height="1rem"
+   viewBox="0 0 32 32"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <path
+       id="rect1-5"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       d="M 6,22 0,16 6,10 Z" />
+    <path
+       id="rect1-5-6"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       d="M 10,6 16,0 22,6 Z" />
+    <path
+       id="rect1-5-61"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       d="M 26,10 32,16 26,22 Z" />
+    <path
+       id="rect1-5-2"
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       d="M 22,26 16,32 10,26 Z" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       id="rect1"
+       width="4"
+       height="24"
+       x="14"
+       y="4" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0"
+       id="rect1-7"
+       width="4"
+       height="24"
+       x="14"
+       y="-28"
+       transform="rotate(90)" />
+  </g>
 </svg>