Padding on a bound MapLibre object breaks animation &/or Svelte complains of infinite effect loop #110
Description
Binding the "map" property of a MapLibre component whilst using the "padding" component (or calling setPadding(...) on the JavaScript object later) breaks animation and/or Svelte will complain about an infinite effect loop.
If you remove "bind:map" from component setup in code below - animations work again & Svelte is happy with the code, but you no longer have access to the MapLibre object.
If you remove the "padding" property from the component setup below, the binding works but you cannot shift the map centre to cater for UI panels overlaying the map. You also cannot call "setPadding" on the bound map object or the same problem applies
This applies to all animations whether they be a zoom animation from built-in controls (why I added the NavigationControl in code below) or using flyTo, easeTo, etc in JavaScript.
<script lang="ts">
import { page } from '$app/state';
// External component imports
import { MapLibre, NavigationControl } from 'svelte-maplibre-gl';
let map: maplibregl.Map | undefined = $state();
// This is just a tileserver-gl docker, use any style/server it's irrelevant
let mapStyle = "http://localhost:8080/styles/basic-preview/style.json";
</script>
<MapLibre
class="top:0 left:0 height:100vh width:100vw absolute"
style={mapStyle}
zoom={14}
center={{ lng: 151.2112163, lat: -33.8615733 }}
padding={{ left:350 }}
hash={true}
bind:map
>
<NavigationControl position="bottom-right" visualizePitch={true}/>
</MapLibre>