diff --git a/src/components/molecules/Switcher.svelte b/src/components/molecules/Switcher.svelte new file mode 100644 index 0000000..8c3dad1 --- /dev/null +++ b/src/components/molecules/Switcher.svelte @@ -0,0 +1,58 @@ + + +
+ + + +
\ No newline at end of file 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/routes/__layout.svelte b/src/routes/__layout.svelte index ca269bd..965445d 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -3,6 +3,7 @@ import { setContext } from 'svelte' import '$utils/polyfills' // Components + import Switcher from '$components/molecules/Switcher.svelte' import Footer from '$components/organisms/Footer.svelte' export let data: any @@ -15,6 +16,8 @@ }) + +