Update resize method and debounce it on component

This commit is contained in:
2022-07-19 12:36:51 +02:00
parent 543d2e5c8b
commit fa056d0933
2 changed files with 5 additions and 3 deletions

View File

@@ -7,7 +7,7 @@
import { fly } from 'svelte/transition' import { fly } from 'svelte/transition'
import { quartOut } from 'svelte/easing' import { quartOut } from 'svelte/easing'
import { Globe, type Marker } from '$modules/globe2' import { Globe, type Marker } from '$modules/globe2'
import { getRandomItem } from '$utils/functions' import { getRandomItem, debounce } from '$utils/functions'
// Components // Components
import Image from '$components/atoms/Image.svelte' import Image from '$components/atoms/Image.svelte'
@@ -90,9 +90,9 @@
} }
// Resize // Resize
const resize = () => { const resize = debounce(() => {
globe.resize() globe.resize()
} }, 100)
// Destroy // Destroy
const destroy = () => { const destroy = () => {

View File

@@ -210,6 +210,8 @@ export class Globe {
*/ */
resize () { resize () {
// this.renderer.setSize(window.innerWidth, window.innerHeight) // this.renderer.setSize(window.innerWidth, window.innerHeight)
this.width = this.el.offsetWidth
this.height = this.el.offsetHeight
this.renderer.setSize(this.width, this.height) this.renderer.setSize(this.width, this.height)
this.camera.perspective({ this.camera.perspective({
aspect: this.gl.canvas.width / this.gl.canvas.height aspect: this.gl.canvas.width / this.gl.canvas.height