flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

stop globe trotation on marker hover

Browse Source
This commit is contained in:
Nicolas Riciotti
2020-04-19 16:24:16 +02:00
parent caa84e10e3
commit 4fb2c4e93a
1 changed files with 17 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/globe/index.js
View File

@@ -41,7 +41,7 @@ class WebglGlobe {
this.markersScrollOffset = 0
this.globeScrollOffset = 0
this.globeAutoRotation = degToRad(this.options.rotationStart * -1) || 0
this._isHoverMarker = false
let gl
let canvas = document.createElement('canvas')
@@ -199,8 +199,16 @@ class WebglGlobe {
})
// Add class on hover
el.addEventListener('mouseenter', () => el.classList.add('hover'))
el.addEventListener('animationend', () => el.classList.remove('hover'))
el.addEventListener('mouseenter', () => {
this._isHoverMarker = true
el.classList.add('hover')
})
el.addEventListener('mouseleave', () => {
this._isHoverMarker = false
})
el.addEventListener('animationend', () => {
el.classList.remove('hover')
})
// Append marker to HTML
this.$markerWrapper.appendChild(el)
@@ -297,9 +305,12 @@ class WebglGlobe {
mat4.copy(this.viewProjectionMatrix, this.camera.projectionMatrix)
mat4.multiply(this.viewProjectionMatrix, this.viewProjectionMatrix, this.camera.inverseWorldMatrix)
// Auto rotate the globe
this.globeAutoRotation += this.options.autoRotationSpeed
this.globeMesh.rotation[1] = this.globeAutoRotation
// Auto rotate the globe if not hover a marker
if (!this._isHoverMarker) {
this.globeAutoRotation += this.options.autoRotationSpeed
this.globeMesh.rotation[1] = this.globeAutoRotation
}
this.globeMesh.updateMatrix()
this.globeMesh.updateWorldMatrix()