refactor: perfomance optimisations through less dependency tracking

Signed-off-by: Braks <78412429+bcakmakoglu@users.noreply.github.com>
2021-11-15 11:22:56 +01:00
parent 482a1aa4af
commit 3705a39fa8
7 changed files with 22 additions and 25 deletions
@@ -55,6 +55,7 @@ const clampedZoom = clamp(props.defaultZoom, store.minZoom, store.maxZoom)
 const transform = ref({ x: clampedX, y: clampedY, zoom: clampedZoom })
 const d3Zoom = ref(zoom<HTMLDivElement, any>().scaleExtent([store.minZoom, store.maxZoom]).translateExtent(store.translateExtent))
 const d3Selection = ref()
+store.transform = [transform.value.x, transform.value.y, transform.value.zoom]

 until(zoomPaneEl)
  .toBeTruthy()
@@ -185,8 +186,10 @@ store.dimensions = {
  height: height.value,
 }

-watch(width, (val) => (store.dimensions.width = val))
-watch(height, (val) => (store.dimensions.height = val))
+watch([width, height], ([newWidth, newHeight]) => {
+  store.dimensions.width = newWidth
+  store.dimensions.height = newHeight
+})
 watch(transform, (val) => (store.transform = [val.x, val.y, val.zoom]))

 const { zoomIn, zoomOut, zoomTo, transform: setTransform, fitView } = useZoomPanHelper()