From 8d09b1b909a8b7ec18846f93d1db073327b1507e Mon Sep 17 00:00:00 2001
From: Maurice Conrad <conr.maur@gmail.com>
Date: Sun, 14 Apr 2024 11:46:42 +0200
Subject: [PATCH] fixed stuff

---
 playground/package-lock.json             | 14 +++++++-------
 playground/package.json                  |  2 +-
 playground/src/components/Playground.vue | 21 ++++++++++-----------
 zoompinch-vue/package.json               |  2 +-
 4 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/playground/package-lock.json b/playground/package-lock.json
index fe7c871..91fd4b3 100644
--- a/playground/package-lock.json
+++ b/playground/package-lock.json
@@ -11,7 +11,7 @@
         "@vicons/ionicons5": "^0.12.0",
         "naive-ui": "^2.38.1",
         "vue": "^3.2.37",
-        "zoompinch": "^0.0.7"
+        "zoompinch": "^0.0.18"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",
@@ -1407,9 +1407,9 @@
       "dev": true
     },
     "node_modules/zoompinch": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.7.tgz",
-      "integrity": "sha512-Ch9Hy1ePGfg1GqS8vZDbFj9mFXkyOlixqM6a5y5XWe8vMFTGXsK5d1Zvc5ZpUUnLelE0jr8eyvkMcl8s7czPvQ==",
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.18.tgz",
+      "integrity": "sha512-CZqEydLwRG3KeE0n2Q2GOypULrHF9Y6EqHlXoSAFsd8xRINllZCSr5ODTvSYOAWolTiQs48FYU3tlx7NzZKXpA==",
       "dependencies": {
         "@vueuse/core": "^10.9.0"
       },
@@ -2314,9 +2314,9 @@
       "dev": true
     },
     "zoompinch": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.7.tgz",
-      "integrity": "sha512-Ch9Hy1ePGfg1GqS8vZDbFj9mFXkyOlixqM6a5y5XWe8vMFTGXsK5d1Zvc5ZpUUnLelE0jr8eyvkMcl8s7czPvQ==",
+      "version": "0.0.18",
+      "resolved": "https://registry.npmjs.org/zoompinch/-/zoompinch-0.0.18.tgz",
+      "integrity": "sha512-CZqEydLwRG3KeE0n2Q2GOypULrHF9Y6EqHlXoSAFsd8xRINllZCSr5ODTvSYOAWolTiQs48FYU3tlx7NzZKXpA==",
       "requires": {
         "@vueuse/core": "^10.9.0"
       }
diff --git a/playground/package.json b/playground/package.json
index 9b6ca6c..231f29c 100644
--- a/playground/package.json
+++ b/playground/package.json
@@ -12,7 +12,7 @@
     "@vicons/ionicons5": "^0.12.0",
     "naive-ui": "^2.38.1",
     "vue": "^3.2.37",
-    "zoompinch": "^0.0.7"
+    "zoompinch": "^0.0.18"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",
diff --git a/playground/src/components/Playground.vue b/playground/src/components/Playground.vue
index abf1c50..e297538 100644
--- a/playground/src/components/Playground.vue
+++ b/playground/src/components/Playground.vue
@@ -102,14 +102,7 @@
       </section>
       <section>
         <n-button
-          @click="
-            transform = {
-              x: 0,
-              y: 0,
-              scale: 1,
-              rotate: 0,
-            }
-          "
+          @click="fit(true)"
           :disabled="transform.rotate === 0 && transform.scale === 1 && transform.x === 0 && transform.y === 0"
           type="success"
           style="width: 100%"
@@ -141,9 +134,9 @@
           />
         </template>
         <template #matrix="{ compose }">
-          <!-- <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
+          <svg xmlns="http://www.w3.org/2000/svg" @click="handleClickOnLayer">
             <circle :cx="compose(1536 / 2, 2048 / 2)[0]" :cy="compose(1536 / 2, 2048 / 2)[1]" r="5" style="fill: #f00" />
-          </svg> -->
+          </svg>
         </template>
       </zoompinch>
     </div>
@@ -153,7 +146,7 @@
 <script setup lang="ts">
 import { Zoompinch } from 'zoompinch';
 import 'zoompinch/style.css';
-import { reactive, ref, watch, watchEffect } from 'vue';
+import { onMounted, reactive, ref, watch, watchEffect } from 'vue';
 import { NInputNumber, NSwitch, NButton } from 'naive-ui';
 
 // Flicker bug reproducable: 100,0,0.1,180
@@ -194,6 +187,12 @@ function handleClickOnLayer(event: MouseEvent) {
   console.log('clicked at', x, y);
   alert(`clicked at ${x}, ${y}`);
 }
+function fit(animate: boolean) {
+  zoompinchRef.value?.applyTransform(1, [0.5, 0.5], [0.5, 0.5], animate);
+}
+onMounted(() => {
+  setTimeout(() => fit(true));
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/zoompinch-vue/package.json b/zoompinch-vue/package.json
index 132253c..dec3096 100644
--- a/zoompinch-vue/package.json
+++ b/zoompinch-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "files": [
     "package.json",