From d223811009ece9b4f4aa429027d99970b3f3cb45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 25 Sep 2022 13:17:39 +0200
Subject: [PATCH] Disable Globe markers interactivity if type is cropped

---
 .../organisms/InteractiveGlobe2.svelte        |  2 ++
 src/modules/globe2/index.ts                   | 24 +++++++++++++++----
 src/modules/globe2/pane.ts                    |  3 +++
 src/style/modules/_globe2.scss                |  5 ++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/components/organisms/InteractiveGlobe2.svelte b/src/components/organisms/InteractiveGlobe2.svelte
index 69da605..c6b3458 100644
--- a/src/components/organisms/InteractiveGlobe2.svelte
+++ b/src/components/organisms/InteractiveGlobe2.svelte
@@ -14,6 +14,7 @@
 
     export let type: string = undefined
     export let enableMarkers: boolean = true
+    export let enableMarkersLinks: boolean = true
     export let speed: number = 0.1
     export let pane: boolean = import.meta.env.DEV
     export let width: number = undefined
@@ -50,6 +51,7 @@
             sunAngle: 2,
             rotationStart: randomContinent.rotation,
             enableMarkers,
+            enableMarkersLinks: type !== 'cropped',
             markers,
             pane,
         })
diff --git a/src/modules/globe2/index.ts b/src/modules/globe2/index.ts
index 123022f..3421a87 100644
--- a/src/modules/globe2/index.ts
+++ b/src/modules/globe2/index.ts
@@ -48,12 +48,14 @@ export class Globe {
             autoRotate: options.autoRotate,
             speed: options.speed,
             enableMarkers: options.enableMarkers,
+            enableMarkersLinks: options.enableMarkersLinks,
             zoom: 1.3075,
             sunAngle: options.sunAngle || 0,
             sunAngleDelta: 1.8,
         }
 
         // Misc
+        this.isDev = import.meta.env.DEV
         this.hoveringMarker = false
         this.hoveringMarkerTimeout = 0
         this.lastFrame = now()
@@ -218,9 +220,12 @@ export class Globe {
 
     // Update marker position
     updateMarkerPosition (marker: Marker, markerEl: HTMLElement) {
+        // Get vec3 position from lat/long
         const position = latLonToVec3(marker.lat, marker.lng)
         const screenVector = new Vec3(position.x, position.y, position.z)
+        // Apply transformation to marker from globe world matrix
         screenVector.applyMatrix4(this.globe.worldMatrix)
+        // Then project marker on camera
         this.camera.project(screenVector)
 
         // Position marker
@@ -236,13 +241,20 @@ export class Globe {
     updateMarkers () {
         this.markers.forEach((marker: Marker) => {
             const markerEl = this.getMarker(marker.slug)
-
             // Update marker position
             this.updateMarkerPosition(marker, markerEl)
         })
     }
 
-    // Disable markers
+    // Enable or disable markers
+    enableMarkers (state: boolean) {
+        this.markers.forEach((marker: Marker) => {
+            const markerEl = this.getMarker(marker.slug)
+            markerEl.classList.toggle('is-disabled', !state)
+        })
+    }
+
+    // Hide markers
     hideMarkers () {
         this.markers.forEach((marker: Marker) => {
             const markerEl = this.getMarker(marker.slug)
@@ -287,6 +299,8 @@ export class Globe {
         // Update markers
         if (this.params.enableMarkers) {
             this.updateMarkers()
+            // Enable or disable interactivity
+            this.enableMarkers(this.params.enableMarkersLinks)
         } else {
             this.hideMarkers()
         }
@@ -297,8 +311,6 @@ export class Globe {
      * Destroy
      */
     destroy () {
-        console.log('destroy globe2')
-
         this.gl = null
         this.scene = null
         this.camera = null
@@ -309,6 +321,9 @@ export class Globe {
         if (this.pane) {
             this.pane.dispose()
         }
+        if (this.isDev) {
+            console.log('globe: destroy')
+        }
     }
 }
 
@@ -327,6 +342,7 @@ type Options = {
     sunAngle: number
     rotationStart?: number
     enableMarkers?: boolean
+    enableMarkersLinks?: boolean
     markers?: any[]
     pane?: boolean
 }
diff --git a/src/modules/globe2/pane.ts b/src/modules/globe2/pane.ts
index 9fca283..8a43af9 100644
--- a/src/modules/globe2/pane.ts
+++ b/src/modules/globe2/pane.ts
@@ -34,6 +34,9 @@ export const createPane = (ctx: any) => {
         markers.addInput(ctx.params, 'enableMarkers', {
             label: 'Enable markers',
         })
+        markers.addInput(ctx.params, 'enableMarkersLinks', {
+            label: 'Interactive',
+        })
     }
 
 
diff --git a/src/style/modules/_globe2.scss b/src/style/modules/_globe2.scss
index f38e5af..64b951e 100644
--- a/src/style/modules/_globe2.scss
+++ b/src/style/modules/_globe2.scss
@@ -155,6 +155,11 @@
                 transform: scale(0) translateZ(0);
             }
         }
+
+        // State: Is disabled
+        &:global(.is-disabled a) {
+            pointer-events: none;
+        }
     }