Add dragging cursor on Globe

src/modules/globe/index.js

@@ -45,12 +45,18 @@ class WebglGlobe {
         this._isHoverMarker            = false
 
         let gl
-        let canvas = document.createElement('canvas')
+        const canvas = document.createElement('canvas')
-        try { gl = canvas.getContext('webgl') }
+
-        catch (x) {
+        try {
-            try { gl = canvas.getContext('experimental-webgl') }
+            gl = canvas.getContext('webgl')
-            catch (x) { gl = null }
+        } 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

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;