new wrapper bounds exposed

ElyaConrad · Apr 14, 2024 · b1dfb4d · b1dfb4d
1 parent 5bdaa28
commit b1dfb4d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 1 deletion.
diff --git a/playground/src/components/Playground.vue b/playground/src/components/Playground.vue
@@ -193,6 +193,15 @@ function fit(animate: boolean) {
 onMounted(() => {
   setTimeout(() => fit(true));
 });
+
+watch(
+  () => zoompinchRef.value?.wrapperBounds,
+  () => {
+    requestAnimationFrame(() => {
+      zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], false);
+    });
+  }
+);
 </script>
 
 <style scoped lang="scss">

diff --git a/zoompinch-vue/package.json b/zoompinch-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.24",
+  "version": "0.0.25",
   "type": "module",
   "files": [
     "package.json",

diff --git a/zoompinch-vue/src/components/Zoompinch.vue b/zoompinch-vue/src/components/Zoompinch.vue
@@ -131,6 +131,10 @@ const {
   normalizeMatrixCoordinates,
   transitionEnabled,
   transitionDuration,
+  wrapperX,
+  wrapperY,
+  wrapperWidth,
+  wrapperHeight,
 } = useZoom({
   wrapperElementRef: zoompinchRef,
   canvasNaturalWidth,
@@ -255,6 +259,14 @@ defineExpose({
   applyTransform,
   calcProjectionTranslate,
   rotateCanvas,
+  wrapperBounds: computed(() => {
+    return {
+      x: wrapperX.value,
+      y: wrapperY.value,
+      width: wrapperWidth.value,
+      height: wrapperHeight.value,
+    };
+  }),
 });
 </script>
 

diff --git a/zoompinch-vue/src/controllers/zoom.ts b/zoompinch-vue/src/controllers/zoom.ts
@@ -375,5 +375,9 @@ export function useZoom({
     wrapperBounds,
     transitionEnabled,
     transitionDuration,
+    wrapperX,
+    wrapperY,
+    wrapperWidth,
+    wrapperHeight,
   };
 }