Debounce hash update using vueuse

package.json

@@ -9,6 +9,7 @@
     "@googlemaps/js-api-loader": "^1.4.0",
     "@types/google.maps": "^3.48.3",
     "@vitejs/plugin-vue": "^2.2.4",
+    "@vueuse/core": "^8.2.0",
     "js-base64": "^3.5.2",
     "tailwindcss": "^3.0.23",
     "tatween": "^0.2.0",

src/components/Map.vue

@@ -5,12 +5,14 @@
     </div>
 </template>
 
-
-
 <script setup lang="ts">
     import { Loader as MapLoader } from '@googlemaps/js-api-loader';
     import { Base64 } from 'js-base64'
     import { onMounted, ref, watch, computed } from 'vue';
+    import { watchDebounced } from '@vueuse/core'
+
+
+    const DEFAULT_MAP_POSITION = [48.862895, 2.286978, 18]
 
     const loader = new MapLoader({
         apiKey: "AIzaSyD7Vm3gm4Fm7jSkuIh_yM14GmYhz1P_S4M",
@@ -29,7 +31,7 @@
         (event: "hashChange", val: string): void
     }>()
 
-    const mapPosition = ref([48.862895, 2.286978, 18])
+    const mapPosition = ref(DEFAULT_MAP_POSITION)
     const arrPoly = ref<google.maps.LatLng[]>([])
     const mapLoaded = ref(false);
     const pacinput = ref()
@@ -87,7 +89,6 @@
                 streetViewControl: false
             });
 
-
             const poly = new google.maps.Polygon({
                 strokeOpacity: 0.8,
                 strokeWeight: 2,
@@ -176,7 +177,7 @@
         currentMap.setCenter({lat: meta[1], lng: meta[2]});
         currentMap.setZoom(meta[3]);
 
-        let path = [];
+        const path = [];
         for (let i = 0; i < data.length; i += 2) {
             path.push({
                 lat: data[i],
@@ -193,22 +194,20 @@
     }
 
     const loadLegacyHash = (hash: string) => {
-        let opt = hash.split(';');
-
-        let curPosition = opt.pop();
+        const opt = hash.split(';');
+        const curPosition = opt.pop();
 
         if (curPosition) {
-            let cursetting = curPosition.split(',');
+            const cursetting = curPosition.split(',');
             currentMap.setCenter({lat: parseFloat(cursetting[0]), lng: parseFloat(cursetting[1])});
             currentMap.setZoom(parseInt(cursetting[2]));
         }
 
-        let density = parseFloat(opt.pop()) || 1;
-
-        let path = [];
+        const density = parseFloat(opt.pop()) || 1;
+        const path = [];
 
         for (let i = 0; i < opt.length; i++) {
-            let coord = opt[i].split(',');
+            const coord = opt[i].split(',');
             path.push({
                 lat: parseFloat(coord[0]),
                 lng: parseFloat(coord[1])
@@ -227,11 +226,8 @@
         currentPolygon.getPath().clear();
     }
 
-
-    watch(() => props.density, () => updatePolygonColor());
-
     const hash = computed(() => {
-        let buf = new Float32Array(arrPoly.value.length*2+4);
+        const buf = new Float32Array(arrPoly.value.length*2+4);
         buf[0] = props.density;
         buf.set(mapPosition.value, 1);
 
@@ -242,15 +238,11 @@
         return 'b' + Base64.fromUint8Array(new Uint8Array(buf.buffer), true);
     })
 
-    watch(hash, (hashval: string) => {
-        if ($updateHashTimer) {
-            clearTimeout($updateHashTimer);
-        }
+    watch(() => props.density, () => updatePolygonColor());
 
-        $updateHashTimer = setTimeout(() => {
-            emits('hashChange', hashval);
-        }, 300);
-    })
+    watchDebounced(hash,
+        (hashval: string) => emits('hashChange', hashval),
+        { debounce: 300 })
 
     defineExpose({
         reset,

yarn.lock

@@ -161,6 +161,27 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.31.tgz#c90de7126d833dcd3a4c7534d534be2fb41faa4e"
   integrity sha512-ymN2pj6zEjiKJZbrf98UM2pfDd6F2H7ksKw7NDt/ZZ1fh5Ei39X5tABugtT03ZRlWd9imccoK0hE8hpjpU7irQ==
 
+"@vueuse/core@^8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-8.2.0.tgz#2e9163c0bbe8dcb240fdd89d9c8a52576fce8db7"
+  integrity sha512-89ZfKtFHz5ynfpWyFVXtK0yePJ2MZqFaOxnGeZn7cIp8KFbPRlu6Wsxi3gBkJNpjq+q9qbEh6MjV7QBvqCQ5Og==
+  dependencies:
+    "@vueuse/metadata" "8.2.0"
+    "@vueuse/shared" "8.2.0"
+    vue-demi "*"
+
+"@vueuse/metadata@8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.0.tgz#f62a02e840220768941b3683dd8171c39581b950"
+  integrity sha512-cbaezEccNuxQC+OiudG9VjZNg9/RbAAHkyuhC6+8Gsgsc+MvDhfn1NrV6NNTaldLlZgJFgUiYOkrf3JGTTTGXQ==
+
+"@vueuse/shared@8.2.0":
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-8.2.0.tgz#a8e2b637cfd866ea985615df9ec4913c4355c084"
+  integrity sha512-dTw7EJZgZCgG9DoVAiz4LtmKnIFXuE/idUFzvqRAJLjbPiVJc+qQH5kDUdKHI3W1U9t//1mdasQEKONArburiQ==
+  dependencies:
+    vue-demi "*"
+
 acorn-node@^1.6.1:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/acorn-node/-/acorn-node-1.8.2.tgz#114c95d64539e53dede23de8b9d96df7c7ae2af8"
@@ -1103,6 +1124,11 @@ vite@^2.4.0:
   optionalDependencies:
     fsevents "~2.3.2"
 
+vue-demi@*:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.4.tgz#420dd17628f95f1bbce1102ad3c51074713a8049"
+  integrity sha512-ztPDkFt0TSUdoq1ZI6oD730vgztBkiByhUW7L1cOTebiSBqSYfSQgnhYakYigBkyAybqCTH7h44yZuDJf2xILQ==
+
 vue@^3.0.0-rc.1:
   version "3.2.31"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.31.tgz#e0c49924335e9f188352816788a4cca10f817ce6"