Merge map drag @BoundlessFate

Vacansee · Mar 23, 2024 · 3d3d78b · 3d3d78b
2 parents 53fee50 + 0d44da8
commit 3d3d78b
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 6 deletions.
diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue
@@ -411,7 +411,7 @@ export default {
   left: 50%;
   top: 50%;
   will-change: transform;
-  transform: translate(-50%, -50%) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg);
+  transform: translate(-1.5vw, -4.95vh) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg);
   justify-content: center;
   align-items: center;
   transition: 800ms ease all;

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -34,6 +34,18 @@ export default {
       switch: 0,
       bldgSVG: "",
       label: '',
+      mouseX: 0,
+      mouseY: 0,
+      initMouseX: 0,
+      initMouseY: 0,
+      clicked: false,
+      buildingSelected: false,
+      totalDisplacementX: 0,
+      curMoveX: 0,
+      totalDisplacementY: 0,
+      curMoveY: 0,
+      maxX: 750,
+      maxY: 300,
     }
   },
   watch: {
@@ -64,13 +76,19 @@ export default {
   mounted() {
     // addEventListeners allow the file to call a function when 
     // an action occurs
+    window.addEventListener("mousemove", (window) => {
+      this.mouseX = window.clientX;
+      this.mouseY = window.clientY;
+      this.moveScreen()
+    })
     mask.addEventListener("click", this.buildingDeselect)
+    window.addEventListener("mouseup", () => {this.clicked = false, this.totalDisplacementX += this.curMoveX,  this.totalDisplacementY += this.curMoveY, this.moveInBounds()})
+    window.addEventListener("mousedown", this.getInitMouse)
     window.addEventListener("mousemove", this.nameTagMove)
     Array.from(document.getElementsByClassName("nav-btn")).forEach((btn) => {
       btn.addEventListener("mouseover", () => { this.nameTagAppear(btn) })
-      btn.addEventListener("mouseleave", this.nameTagDisappear)
+      btn.addEventListener("mouseleave", () => {this.nameTagDisappear})
     })
-
     for (const b of buildings.children) {
       b.addEventListener("mouseover", () => { this.nameTagAppear(b) })
       b.addEventListener("mouseleave", this.nameTagDisappear)
@@ -108,6 +126,52 @@ export default {
       //   if (!(o.id in this.global.data)) console.log(o.id)
       // }
     },
+    moveInBounds() {
+      if (!this.buildingSelected) {
+        if (this.totalDisplacementX > this.maxX) {
+          this.totalDisplacementX = this.maxX
+        } else if (this.totalDisplacementX < -this.maxX) {
+          this.totalDisplacementX = -this.maxX
+        }
+        if (this.totalDisplacementY > this.maxY) {
+          this.totalDisplacementY = this.maxY
+        } else if (this.totalDisplacementY < -this.maxY) {
+          this.totalDisplacementY = -this.maxY
+        }
+        var xPos = -1.5*window.innerWidth/100 - this.totalDisplacementX
+        var yPos = -4.95*window.innerHeight/100 - this.totalDisplacementY
+        mapBox.style.transition = "800ms ease all"
+        mapBox.style.transform = `scale(1) translate(${xPos}px, ${yPos}px)`
+    }
+    },
+    moveScreen(c) {
+      if (!this.buildingSelected && this.clicked) {
+        this.curMoveX =  this.initMouseX - this.mouseX 
+        this.curMoveY = this.initMouseY - this.mouseY
+        var xPos = -1.5*window.innerWidth/100 - (this.totalDisplacementX + this.curMoveX)
+        var yPos = -4.95*window.innerHeight/100 - (this.totalDisplacementY + this.curMoveY)
+        var pushbackScale = 10
+        if (this.curMoveX + this.totalDisplacementX > this.maxX) {
+          xPos = -1.5*window.innerWidth/100 - (this.maxX + pushbackScale*Math.sqrt(this.totalDisplacementX + this.curMoveX-this.maxX))
+        } else if (this.curMoveX + this.totalDisplacementX < -this.maxX) {
+          xPos = -1.5*window.innerWidth/100 + (this.maxX + pushbackScale*Math.sqrt(-this.totalDisplacementX - this.curMoveX-this.maxX))
+        }
+        if (this.curMoveY + this.totalDisplacementY > this.maxY) {
+          var yPos = -4.95*window.innerHeight/100 - (this.maxY + pushbackScale*Math.sqrt(this.totalDisplacementY + this.curMoveY-this.maxY))
+        } else if (this.curMoveY + this.totalDisplacementY < -this.maxY) {
+          var yPos = -4.95*window.innerHeight/100 + (this.maxY + pushbackScale*Math.sqrt(-this.totalDisplacementY - this.curMoveY-this.maxY))
+        }
+        mapBox.style.transition = "0ms ease all"
+        mapBox.style.transform = `scale(1) translate(${xPos}px, ${yPos}px)`
+      }
+    },
+    getInitMouse() {
+      this.initMouseX = this.mouseX
+      this.initMouseY = this.mouseY
+      this.curMoveX = 0
+      this.curMoveY = 0
+      this.clicked = true
+    },
     // Make the name tag pop up
     nameTagAppear(b) {
       // Only show nametag on unselected buildings
@@ -152,17 +216,24 @@ export default {
     // On selection of a building (when clicked on)
     buildingSelect(b) {
       if (this.global.data && !this.bldgSVG) {
+        this.buildingSelected = true
         // this.$router.push({ name: 'home', params: { bldg } });
         let bBox = b.getBoundingClientRect()
-        let boxCenterX = bBox.x + bBox.width / 2
-        let boxCenterY = bBox.y + bBox.height / 2
+        let boxCenterX = bBox.x + this.totalDisplacementX + bBox.width / 2
+        let boxCenterY = bBox.y + this.totalDisplacementY + bBox.height / 2
 
         this.bldgSVG = b
         this.global.bldg = b.id
         this.ntVisible = 0 // hide nametag when building selected
 
         mask.style.opacity = 0.65
         mask.style.pointerEvents = "inherit"
+        mapBox.style.transition = "800ms ease all"
+        console.log(window.innerWidth / 2 - boxCenterX + this.totalDisplacementX);
+        console.log(window.innerHeight / 2 - boxCenterY - 50);
+        console.log(boxCenterX, boxCenterY);
+        console.log(this.totalDisplacementX, this.totalDisplacementY)
+
         mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2 - boxCenterX}px, ${window.innerHeight / 2 - boxCenterY - 50}px)`
         // Bring the popup to 0,0
         popup.style.transition = "transform .5s"
@@ -173,9 +244,10 @@ export default {
     // On deselection of a building (when clicked off)
     buildingDeselect() {
       try {
+        this.buildingSelected = false
         this.bldgSVG = ""
         this.global.bldg = ""
-        mapBox.style.transform = "scale(1) translate(-50%, -50%)"
+        this.moveInBounds()
         mask.style.pointerEvents = "none"
         mask.style.opacity = 0
         popup.style.transition = "transform .5s"