diff --git a/src/modules/globe/index.js b/src/modules/globe/index.js index df917d2..a958a6b 100644 --- a/src/modules/globe/index.js +++ b/src/modules/globe/index.js @@ -45,12 +45,18 @@ class WebglGlobe { this._isHoverMarker = false let gl - let canvas = document.createElement('canvas') - try { gl = canvas.getContext('webgl') } - catch (x) { - try { gl = canvas.getContext('experimental-webgl') } - catch (x) { gl = null } + const canvas = document.createElement('canvas') + + try { + gl = canvas.getContext('webgl') + } catch (x) { + try { + gl = canvas.getContext('experimental-webgl') + } catch (x) { + gl = null + } } + this.supportWebgl = gl !== null if (this.supportWebgl) { this.buildWebglScene() @@ -58,7 +64,10 @@ class WebglGlobe { } } - // Build + + /** + * Build scene + */ buildWebglScene () { // Renderer this.renderer = new Renderer({ @@ -104,7 +113,9 @@ class WebglGlobe { this.scene = new Container() - // Setup camera + /** + * Setup camera + */ this.camera = new Camera({ fov: 1, near: 0.1, @@ -153,6 +164,15 @@ class WebglGlobe { // this.scene.add(this.refPlane) + /** + * Add drag and touch event listeners + */ + const addDragingClass = () => this.$el.classList.add('is-dragging') + const removeDragingClass = () => this.$el.classList.remove('is-dragging') + this.$el.addEventListener('dragstart', addDragingClass) + this.$el.addEventListener('dragend', removeDragingClass) + + /** * Create DOM nodes for markers and 3D positions */ @@ -233,7 +253,10 @@ class WebglGlobe { } } - // Resize method + + /** + * Resize method + */ resize () { if (!this.supportWebgl) { return @@ -247,10 +270,10 @@ class WebglGlobe { // Remove retina on small screen (aka mobile) to boost perfs this.renderer.setPixelRatio(window.innerWidth < 768 ? 1 : window.devicePixelRatio) - this.renderer.resize(this.width , this.height) + this.renderer.resize(this.width, this.height) // Update camera aspect ratio - this.camera.aspect = this.width / this.height + this.camera.aspect = this.width / this.height this.camera.updateProjectionMatrix() // Distance to put the camera when rotating around the globe @@ -264,6 +287,7 @@ class WebglGlobe { this.circleScreenSize = (this.height / 2) * (1 / this.options.cameraDistance) } + /** * As the camera rotates arount the globe, we cant simply move the Y position of the camera or the globe * Instead, we move the globe vertex inside the vertex shadder after compute the project on screen, so we pass the 'scroll' position to a uniform @@ -282,7 +306,10 @@ class WebglGlobe { } } - // Destroy + + /** + * Destroy the globe + */ destroy () { this.disable() // Stop render loop document.body.removeChild(this.$markerWrapper) @@ -290,6 +317,7 @@ class WebglGlobe { this.camera.delete() // To remove event listeners } + /** * Flag to stop rendering the webgl if the globe isnt visible * This helps saving perfs and battery @@ -299,14 +327,16 @@ class WebglGlobe { this.$markerWrapper.style.opacity = 1 this._canUpdate = true } - disable () { this.renderer.canvas.style.opacity = 0 this.$markerWrapper.style.opacity = 0 this._canUpdate = false } - // Update + + /** + * Update + */ update () { if (!this.supportWebgl || !this._canUpdate || !this.imageLoaded || !this.hasUpdateCameraPos) { return diff --git a/src/style/modules/_globe.scss b/src/style/modules/_globe.scss index d8b82b2..b4edc97 100644 --- a/src/style/modules/_globe.scss +++ b/src/style/modules/_globe.scss @@ -33,25 +33,28 @@ // } // END DEBUG // + /* - ** Cropped globe + ** States and Variants */ + // When dragging + &.is-grabbing { + cursor: grabbing; + } + + // Cropped globe &--cropped { overflow: hidden; height: clamp(300px, 30vw, 500px); } + /* ** Markers */ &__markers { z-index: 210; - // When dragging - &.is-grabbing { - cursor: grabbing; - } - // Marker .marker { position: absolute;