Skip to content

Commit

Permalink
Merge pull request #59 from Vacansee/svgFix
Browse files Browse the repository at this point in the history 
Svg Fix For Webkit Browsers
  • Loading branch information
@paulbruzzi
paulbruzzi authored Apr 18, 2024
2 parents 2fe84c2 + 5aa0f9f commit 5f7aff3
Show file tree
Hide file tree
Showing 5 changed files with 58 additions and 43 deletions.
3 changes: 2 additions & 1 deletion src/components/home/Floor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,8 @@ export default {
stroke-width: 9px;
will-change: transform;
transition: width linear 2s, height linear 2s, opacity .8s;
width: 50px;
width: 1080px;
transform: scale(0.04629629629);
background: none;
pointer-events: none;
}
Expand Down
19 changes: 12 additions & 7 deletions src/components/home/FloorItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@ export default {
},
methods: {
moveMap() {
console.log(this.global.aspectRatio)
var popupWidth = popup.style.width;
if (400 > 0.33 * window.innerWidth) {
popupWidth = "400px";
Expand All @@ -134,18 +135,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)`;
} else if (this.global.aspectRatio <= this.global.flipScreen) {
`translate(calc(${popupWidth} + (${window.innerWidth}px - ${popupWidth}) * 0.45 - 550px),
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(67vw - 25px), calc(45vh)) scale(${(window.innerWidth) * 0.57 / 50 + this.zoom})`;
`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) {
floorBox.style.transform =
`translate(calc(50vw - 25px), calc((${window.innerHeight}px - ${popup.style.height}) / 2))
scale(${window.innerWidth * 0.9 / 50 + this.zoom})`;
`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)`;
}
},
Expand Down
11 changes: 6 additions & 5 deletions src/components/home/MapItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', 8);
} else { // unselected
setTimeout(this.windowEventHandler, 800);
this.$refs.blurRef.setAttribute('stdDeviation', 0);
Expand Down Expand Up @@ -340,10 +340,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})`
}
}
}
Expand All @@ -358,14 +358,15 @@ export default {
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;
}
#map {
/* startup properties (replaced): */
opacity: 0;
transition: width linear 2s, height linear 2s, opacity .8s;
width: 50px;
width: 1080px;
/* Band-aid scaling fix for WebKit browsers */
transform: scale(0.04629629629);
will-change: transform;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/PopUpItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,8 +272,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);
Expand All @@ -298,7 +298,7 @@ export default {
}
#fadeout {
background-image: linear-gradient(white, transparent);
background-image: linear-gradient(white, rgba(255, 255, 255, 0));
position:relative;
z-index: 1;
height: 25px;
Expand Down
64 changes: 36 additions & 28 deletions src/views/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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) => {
Expand All @@ -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
Expand Down Expand Up @@ -134,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() {
Expand All @@ -146,18 +149,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
Expand All @@ -172,21 +175,25 @@ 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)`
}
},
onMouseScroll({deltaX,deltaY}) {
/* onMouseScroll({deltaX,deltaY}) {
// If you arent selected on a building
if (!this.global.sFocus && !this.global.bldg){
let dirwheel = 0;
Expand All @@ -207,8 +214,10 @@ export default {
// abs is absolute position on map
var adjustedX = this.mouseX - window.innerWidth/2;
var adjustedY = this.mouseY - window.innerHeight/2;
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) {
tempZoom = y/50+this.zoom+dirwheel*10;
Expand All @@ -227,19 +236,18 @@ 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.totalDisplacementY = absY + (adjustedY)/this.zoom*40;
mapBox.style.transition = "800ms ease all"
this.moveInBounds();
}
},
}, */
getInitMouse() {
this.initMouseX = this.mouseX
this.initMouseY = this.mouseY
this.curMoveX = 0
this.curMoveY = 0
this.clicked = true
console.log("bing")
},
// Make the name tag pop up
nameTagAppear(b) {
Expand Down Expand Up @@ -299,9 +307,9 @@ export default {
mask.style.pointerEvents = "inherit"
mapBox.style.transition = "800ms ease all"
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 + this.xOffSet}px, ${window.innerHeight / 7 - boxCenterY + this.yOffSet}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"
}
Expand All @@ -316,7 +324,7 @@ export default {
this.moveInBounds()
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) {
Expand Down

0 comments on commit 5f7aff3

Please sign in to comment.