From 46295e435f8bf10de82ad4b2704ab103f2f8974d Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Fri, 26 Jan 2024 17:31:08 -0500 Subject: [PATCH 01/15] possible fix to svg issues on webkit --- src/components/home/Floor.vue | 2 +- src/components/home/MapItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index 0bde888..fb451ef 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -180,7 +180,7 @@ export default { stroke-width: 9px; will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; - width: 50px; + width: 1920px; background: none; pointer-events: none; } diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index 0b44798..07cab9a 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -421,7 +421,7 @@ export default { /* startup properties (replaced): */ opacity: 0; transition: width linear 2s, height linear 2s, opacity .8s; - width: 50px; + width: 1920px; will-change: transform; } From 59f53ee51e885f820e1fcbde76c8aad76ecc492f Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:03:01 -0500 Subject: [PATCH 02/15] reverting changes --- src/components/home/Floor.vue | 2 +- src/components/home/MapItem.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index fb451ef..0bde888 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -180,7 +180,7 @@ export default { stroke-width: 9px; will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; - width: 1920px; + width: 50px; background: none; pointer-events: none; } diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index 07cab9a..0b44798 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -421,7 +421,7 @@ export default { /* startup properties (replaced): */ opacity: 0; transition: width linear 2s, height linear 2s, opacity .8s; - width: 1920px; + width: 50px; will-change: transform; } From e52ef9ef477c2507c26355b09fb12f79b2392692 Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:11:46 -0500 Subject: [PATCH 03/15] resizing test 1 --- src/components/home/Floor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index 0bde888..7469553 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -180,7 +180,7 @@ export default { stroke-width: 9px; will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; - width: 50px; + width: 250px; background: none; pointer-events: none; } From a06721fd1042114a4e87665a98b5a6636e023ded Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:29:49 -0500 Subject: [PATCH 04/15] resize test 2 --- src/components/home/Floor.vue | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index 7469553..4491fbb 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -180,7 +180,8 @@ export default { stroke-width: 9px; will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; - width: 250px; + width: 500px; + transform: scale(0.1); background: none; pointer-events: none; } From 86e976c9617dedf1420a57c9de3c264d11d8a6ee Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:31:45 -0500 Subject: [PATCH 05/15] possibly fixed blurriness? --- src/components/home/Floor.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index 4491fbb..504004a 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -180,8 +180,8 @@ export default { stroke-width: 9px; will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; - width: 500px; - transform: scale(0.1); + width: 1080px; + transform: scale(50/1080); background: none; pointer-events: none; } From bed3371e837b0af95702755b5e97c908c56f76a3 Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:34:48 -0500 Subject: [PATCH 06/15] attempt number 2 --- src/components/home/Floor.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/Floor.vue b/src/components/home/Floor.vue index 504004a..b6e3f9a 100644 --- a/src/components/home/Floor.vue +++ b/src/components/home/Floor.vue @@ -181,7 +181,7 @@ export default { will-change: transform; transition: width linear 2s, height linear 2s, opacity .8s; width: 1080px; - transform: scale(50/1080); + transform: scale(0.04629629629); background: none; pointer-events: none; } From c1de088ab237dcd72956404f761c20aad9f1d4c1 Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:47:01 -0500 Subject: [PATCH 07/15] fixed scaling for main page hopefully --- src/components/home/MapItem.vue | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index 0b44798..de82a8c 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -421,7 +421,9 @@ export default { /* startup properties (replaced): */ opacity: 0; transition: width linear 2s, height linear 2s, opacity .8s; - width: 50px; + width: 1080px; + /* Band aid scaling fix for svg devices */ + transform: scale(0.04629629629); will-change: transform; } From 03a71706f041abab0f656623ff7b97023d5ba42c Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 6 Feb 2024 16:54:48 -0500 Subject: [PATCH 08/15] fixed main map scaling --- src/components/home/MapItem.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index de82a8c..c8a8582 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -396,10 +396,10 @@ export default { let y = window.innerHeight; let ratio = x / y; if (ratio < this.threshold) { // portrait mode - map.style.transform = `scale(${y/50+this.zoom})` + `rotate(90deg)` + map.style.transform = `scale(${(y/50+this.zoom) * 0.04629629629})` + `rotate(90deg)` } else // landscape mode - map.style.transform = `scale(${x/50+this.zoom})` + map.style.transform = `scale(${(x/50+this.zoom) * 0.04629629629})` } } } From 99788bbce1469b5b0331ed8463599182495e0d1f Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Fri, 9 Feb 2024 17:19:38 -0500 Subject: [PATCH 09/15] fixed map popup scaling and placement --- src/components/home/FloorItem.vue | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/home/FloorItem.vue b/src/components/home/FloorItem.vue index 787c8fd..e2bea1d 100644 --- a/src/components/home/FloorItem.vue +++ b/src/components/home/FloorItem.vue @@ -116,6 +116,7 @@ export default { }, methods: { moveMap() { + console.log(this.global.aspectRatio) var popupWidth = popup.style.width; if (400 > 0.33 * window.innerWidth) { popupWidth = "400px"; @@ -124,22 +125,22 @@ export default { if ((this.global.aspectRatio <= this.global.flipScreen) && (this.global.aspectRatio >= 0.5)) { floorBox.style.transform = - `translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 50px), - calc(45vh)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`; + `translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 550px), + calc(65vh - 500px)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`; // If wide landscape } else if (this.global.aspectRatio <= this.global.flipScreen) { floorBox.style.transform = - `translate(calc(67vw - 25px), calc(45vh)) + `translate(calc(60vw - 450px), calc(60vh - 500px)) scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`; // If portrait wide mode } else if (this.global.aspectRatio <= 1.85) { floorBox.style.transform = - `translate(calc(50vw - 25px), calc((${window.innerHeight}px - ${popup.style.height}) / 2)) + `translate(calc(45vw - 515px), calc((${window.innerHeight}px - ${popup.style.height}) / 2 - 400px)) scale(${window.innerWidth * 0.9 / 50 + this.zoom})`; // If potrait tall mode } else { floorBox.style.transform = - `translate(calc(45vw - 25px), calc(25vh - 25px)) scale(calc(${window.innerHeight * 0.45 / 50 + this.zoom}))` + `rotate(90deg)`; + `translate(calc(45vw - 525px), calc(20vh - 375px)) scale(calc(${window.innerHeight * 0.45 / 50 + this.zoom}))` + `rotate(90deg)`; } }, //clientX and Y will be used to scroll about mouse From 876e84ec89aa4523951815018c17dd87b24907fa Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Tue, 13 Feb 2024 17:18:21 -0500 Subject: [PATCH 10/15] fixed changes requested --- src/components/home/FloorItem.vue | 4 ++-- src/components/home/MapItem.vue | 2 +- src/views/Home.vue | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/home/FloorItem.vue b/src/components/home/FloorItem.vue index e2bea1d..f1d246c 100644 --- a/src/components/home/FloorItem.vue +++ b/src/components/home/FloorItem.vue @@ -126,11 +126,11 @@ export default { && (this.global.aspectRatio >= 0.5)) { floorBox.style.transform = `translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 550px), - calc(65vh - 500px)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`; + calc(60vh - 500px)) scale(calc(${window.innerHeight * 0.9 / 50 + this.zoom}))` + `rotate(90deg)`; // If wide landscape } else if (this.global.aspectRatio <= this.global.flipScreen) { floorBox.style.transform = - `translate(calc(60vw - 450px), calc(60vh - 500px)) + `translate(calc(60vw - 450px), calc(60vh - 450px)) scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`; // If portrait wide mode } else if (this.global.aspectRatio <= 1.85) { diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index c8a8582..b60de3b 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -246,7 +246,7 @@ export default { handler() { if (this.bldgSVG) { // selected this.bringToFront(this.bldgSVG); - this.$refs.blurRef.setAttribute('stdDeviation', 0.16); + this.$refs.blurRef.setAttribute('stdDeviation', 3.456); } else { // unselected setTimeout(this.windowEventHandler, 800); this.$refs.blurRef.setAttribute('stdDeviation', 0); diff --git a/src/views/Home.vue b/src/views/Home.vue index d26a675..95a9052 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -163,7 +163,7 @@ export default { mask.style.opacity = 0.65 mask.style.pointerEvents = "inherit" - mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2 - boxCenterX}px, ${window.innerHeight / 2 - boxCenterY - 50}px)` + mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` // Bring the popup to 0,0 popup.style.transition = "transform .5s" popup.style.transform = "translateY(0vh)" From 026a0b7742c0518e32752f1fd12345ad9b4a7eef Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Fri, 16 Feb 2024 17:12:01 -0500 Subject: [PATCH 11/15] saving work --- src/views/Home.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 95a9052..1cddf69 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -163,7 +163,10 @@ export default { mask.style.opacity = 0.65 mask.style.pointerEvents = "inherit" - mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` + let moveX = 0.8 + let moveY = 0.3 + mapBox.style.transform = `scale(3) translate(${(window.innerWidth / 2) * moveX - boxCenterX}px, ${(window.innerHeight / 2) * moveY - boxCenterY - 50}px)` + // mapBox.style.transform = `scale(5) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` // Bring the popup to 0,0 popup.style.transition = "transform .5s" popup.style.transform = "translateY(0vh)" From 71842e1c20789d37e64790c7195f24dd66de05c4 Mon Sep 17 00:00:00 2001 From: Bren <94324138+Acumane@users.noreply.github.com> Date: Tue, 16 Apr 2024 19:22:00 -0700 Subject: [PATCH 12/15] (temp) remove transition, WebKit tweaks --- src/components/home/MapItem.vue | 5 ++--- src/components/home/PopUpItem.vue | 6 +++--- src/views/Home.vue | 9 +++------ 3 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/components/home/MapItem.vue b/src/components/home/MapItem.vue index b60de3b..45c364d 100644 --- a/src/components/home/MapItem.vue +++ b/src/components/home/MapItem.vue @@ -246,7 +246,7 @@ export default { handler() { if (this.bldgSVG) { // selected this.bringToFront(this.bldgSVG); - this.$refs.blurRef.setAttribute('stdDeviation', 3.456); + this.$refs.blurRef.setAttribute('stdDeviation', 8); } else { // unselected setTimeout(this.windowEventHandler, 800); this.$refs.blurRef.setAttribute('stdDeviation', 0); @@ -414,7 +414,6 @@ export default { transform: translate(-50%, -50%) scale(1) scaleX(1) scaleY(1) rotate(0) skew(0deg, 0deg); justify-content: center; align-items: center; - transition: 800ms ease all; } #map { @@ -422,7 +421,7 @@ export default { opacity: 0; transition: width linear 2s, height linear 2s, opacity .8s; width: 1080px; - /* Band aid scaling fix for svg devices */ + /* Band-aid scaling fix for WebKit browsers */ transform: scale(0.04629629629); will-change: transform; } diff --git a/src/components/home/PopUpItem.vue b/src/components/home/PopUpItem.vue index ac81ff5..9979e26 100644 --- a/src/components/home/PopUpItem.vue +++ b/src/components/home/PopUpItem.vue @@ -239,8 +239,8 @@ export default { left: unset; z-index: 6; user-select: none; + -webkit-user-select: none; transform: translateY(250px); - transition: all 1.5s; box-sizing: border-box; background-color: white; border: 3px solid var(--softborder); @@ -255,13 +255,13 @@ export default { color: rgb(0, 0, 0); font-size: x-large; font-weight: 600; - height: 50px; + height: 49px; border-radius: 12px 12px 0 0; background-color: white; } #fadeout { - background-image: linear-gradient(white, transparent); + background-image: linear-gradient(white, rgba(255, 255, 255, 0)); position:relative; z-index: 1; height: 25px; diff --git a/src/views/Home.vue b/src/views/Home.vue index 1cddf69..eb28700 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -163,12 +163,9 @@ export default { mask.style.opacity = 0.65 mask.style.pointerEvents = "inherit" - let moveX = 0.8 - let moveY = 0.3 - mapBox.style.transform = `scale(3) translate(${(window.innerWidth / 2) * moveX - boxCenterX}px, ${(window.innerHeight / 2) * moveY - boxCenterY - 50}px)` - // mapBox.style.transform = `scale(5) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` + mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` // Bring the popup to 0,0 - popup.style.transition = "transform .5s" + popup.style.transition = "transform .25s" popup.style.transform = "translateY(0vh)" popup.style.minWidth = "400px" } @@ -181,7 +178,7 @@ export default { mapBox.style.transform = "scale(1) translate(-50%, -50%)" mask.style.pointerEvents = "none" mask.style.opacity = 0 - popup.style.transition = "transform .5s" + popup.style.transition = "transform .25s" popup.style.minWidth = "unset" // Landscape mode if (this.global.aspectRatio <= this.global.flipScreen) { From 5cdefdebd3283181706877db5a7c258b3aac2f6b Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Thu, 18 Apr 2024 01:38:11 -0400 Subject: [PATCH 13/15] small fix to adjust FloorItem's placement --- src/components/home/FloorItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/home/FloorItem.vue b/src/components/home/FloorItem.vue index f1d246c..19716c8 100644 --- a/src/components/home/FloorItem.vue +++ b/src/components/home/FloorItem.vue @@ -130,7 +130,7 @@ export default { // If wide landscape } else if (this.global.aspectRatio <= this.global.flipScreen) { floorBox.style.transform = - `translate(calc(60vw - 450px), calc(60vh - 450px)) + `translate(calc(60vw - 450px), calc(55vh - 450px)) scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`; // If portrait wide mode } else if (this.global.aspectRatio <= 1.85) { From 952adbbc40c7ae585941c765265de55159dcbbd1 Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Thu, 18 Apr 2024 15:17:08 -0400 Subject: [PATCH 14/15] pushing to get help with quick changes --- src/views/Home.vue | 55 ++++++++++++++++++++++++++-------------------- 1 file changed, 31 insertions(+), 24 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 9f6cc5c..fc802fa 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -41,14 +41,16 @@ export default { initMouseY: 0, clicked: false, buildingSelected: false, - totalDisplacementX: 0, + totalDisplacementX: 510, curMoveX: 0, - totalDisplacementY: 0, + totalDisplacementY: 850, curMoveY: 0, maxX: 750, maxY: 300, zoom: 40, threshold: 1, + xOffSet: 510, + yOffSet: 850, } }, watch: { @@ -80,6 +82,7 @@ export default { } }, mounted() { + this.moveInBounds() // window.addEventListener('touchstart', () => {this.getInitMouse}) window.addEventListener('touchend', () => {this.clicked = false, this.totalDisplacementX += this.curMoveX, this.totalDisplacementY += this.curMoveY, this.moveInBounds()}) window.addEventListener('touchmove', (e) => { @@ -89,7 +92,6 @@ export default { this.curMoveX = 0 this.curMoveY = 0 this.clicked = true - console.log("bing") } console.log(this.clicked) this.mouseX = e.touches[0].pageX @@ -146,18 +148,18 @@ export default { }, moveInBounds() { if (!this.buildingSelected) { - if (this.totalDisplacementX > this.maxX) { - this.totalDisplacementX = this.maxX + if (this.totalDisplacementX > this.maxX+this.xOffSet) { + this.totalDisplacementX = this.maxX+this.xOffSet mapBox.style.transition = "800ms ease all" - } else if (this.totalDisplacementX < -this.maxX) { - this.totalDisplacementX = -this.maxX + } else if (this.totalDisplacementX < -this.maxX+this.xOffSet) { + this.totalDisplacementX = -this.maxX+this.xOffSet mapBox.style.transition = "800ms ease all" } - if (this.totalDisplacementY > this.maxY) { - this.totalDisplacementY = this.maxY + if (this.totalDisplacementY > this.maxY+this.yOffSet) { + this.totalDisplacementY = this.maxY+this.yOffSet mapBox.style.transition = "800ms ease all" - } else if (this.totalDisplacementY < -this.maxY) { - this.totalDisplacementY = -this.maxY + } else if (this.totalDisplacementY < -this.maxY+this.yOffSet) { + this.totalDisplacementY = -this.maxY+this.yOffSet mapBox.style.transition = "800ms ease all" } var xPos = -1.5*window.innerWidth/100 - this.totalDisplacementX @@ -172,15 +174,19 @@ export default { 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)) + // Too far right + if (this.curMoveX + this.totalDisplacementX > this.maxX+this.xOffSet) { + xPos = -1.5*window.innerWidth/100 - (this.maxX+this.xOffSet + pushbackScale*Math.sqrt(this.totalDisplacementX + this.curMoveX-this.maxX-this.xOffSet)) + // Too far left + } else if (this.curMoveX + this.totalDisplacementX < -this.maxX+this.xOffSet) { + xPos = -1.5*window.innerWidth/100 + (this.maxX-this.xOffSet + pushbackScale*Math.sqrt(-this.totalDisplacementX - this.curMoveX-this.maxX+this.xOffSet)) } - 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)) + // Too far down + if (this.curMoveY + this.totalDisplacementY > this.maxY+this.yOffSet) { + var yPos = -4.95*window.innerHeight/100 - (this.maxY+this.yOffSet + pushbackScale*Math.sqrt(this.totalDisplacementY + this.curMoveY-this.maxY-this.yOffSet)) + // Too far up + } else if (this.curMoveY + this.totalDisplacementY < -this.maxY+this.yOffSet) { + var yPos = -4.95*window.innerHeight/100 + (this.maxY-this.yOffSet + pushbackScale*Math.sqrt(-this.totalDisplacementY - this.curMoveY-this.maxY+this.yOffSet)) } mapBox.style.transition = "0ms ease all" mapBox.style.transform = `scale(${1*this.zoom/40}) translate(${xPos}px, ${yPos}px)` @@ -207,8 +213,10 @@ export default { // abs is absolute position on map var adjustedX = this.mouseX - window.innerWidth/2; var adjustedY = this.mouseY - window.innerHeight/2; - var absX = adjustedX/this.zoom*40 + this.totalDisplacementX; - var absY = adjustedY/this.zoom*40 + this.totalDisplacementY; + console.log(adjustedX, adjustedY) + var absX = adjustedX/this.zoom*40 + this.totalDisplacementX - this.xOffSet/this.zoom*40; + var absY = adjustedY/this.zoom*40 + this.totalDisplacementY - this.yOffSet/this.zoom*40; + console.log(absX, absY) let tempZoom=0; if (portraitMode) { tempZoom = y/50+this.zoom+dirwheel*10; @@ -227,8 +235,8 @@ export default { // UB if (this.zoom >= 75) this.zoom = 75; } - this.totalDisplacementX = absX - adjustedX/this.zoom*40; - this.totalDisplacementY = absY - adjustedY/this.zoom*40; + this.totalDisplacementX = absX - (adjustedX)/this.zoom*40 + this.xOffSet; + this.totalDisplacementY = absY - (adjustedY)/this.zoom*40 + this.yOffSet; mapBox.style.transition = "800ms ease all" this.moveInBounds(); } @@ -239,7 +247,6 @@ export default { this.curMoveX = 0 this.curMoveY = 0 this.clicked = true - console.log("bing") }, // Make the name tag pop up nameTagAppear(b) { From 5436729eebbd71896189b6f022f42840bdf894bc Mon Sep 17 00:00:00 2001 From: BoundlessFate Date: Thu, 18 Apr 2024 15:51:27 -0400 Subject: [PATCH 15/15] disabled zooming --- src/views/Home.vue | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index fc802fa..a17c6bd 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -136,7 +136,8 @@ export default { popup.style.transform = "TranslateY(50vh)" } // Allow for the scroll wheel to zoom the map - window.addEventListener("wheel", this.onMouseScroll); + // WITHHELD FOR NOW + // window.addEventListener("wheel", this.onMouseScroll); }, methods: { runFind() { @@ -192,7 +193,7 @@ export default { mapBox.style.transform = `scale(${1*this.zoom/40}) translate(${xPos}px, ${yPos}px)` } }, - onMouseScroll({deltaX,deltaY}) { + /* onMouseScroll({deltaX,deltaY}) { // If you arent selected on a building if (!this.global.sFocus && !this.global.bldg){ let dirwheel = 0; @@ -213,9 +214,9 @@ export default { // abs is absolute position on map var adjustedX = this.mouseX - window.innerWidth/2; var adjustedY = this.mouseY - window.innerHeight/2; - console.log(adjustedX, adjustedY) - var absX = adjustedX/this.zoom*40 + this.totalDisplacementX - this.xOffSet/this.zoom*40; - var absY = adjustedY/this.zoom*40 + this.totalDisplacementY - this.yOffSet/this.zoom*40; + console.log(this.totalDisplacementX) + var absX = adjustedX/this.zoom*40 + this.totalDisplacementX; + var absY = adjustedY/this.zoom*40 + this.totalDisplacementY; console.log(absX, absY) let tempZoom=0; if (portraitMode) { @@ -235,12 +236,12 @@ export default { // UB if (this.zoom >= 75) this.zoom = 75; } - this.totalDisplacementX = absX - (adjustedX)/this.zoom*40 + this.xOffSet; - this.totalDisplacementY = absY - (adjustedY)/this.zoom*40 + this.yOffSet; + this.totalDisplacementX = absX + (adjustedX)/this.zoom*40; + this.totalDisplacementY = absY + (adjustedY)/this.zoom*40; mapBox.style.transition = "800ms ease all" this.moveInBounds(); } - }, + }, */ getInitMouse() { this.initMouseX = this.mouseX this.initMouseY = this.mouseY @@ -306,7 +307,7 @@ export default { mask.style.pointerEvents = "inherit" mapBox.style.transition = "800ms ease all" - mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX}px, ${window.innerHeight / 7 - boxCenterY}px)` + mapBox.style.transform = `scale(3) translate(${window.innerWidth / 2.5 - boxCenterX + this.xOffSet}px, ${window.innerHeight / 7 - boxCenterY + this.yOffSet}px)` // Bring the popup to 0,0 popup.style.transition = "transform .25s" popup.style.transform = "translateY(0vh)"