fixed stuff

ElyaConrad · Apr 14, 2024 · 8d09b1b · 8d09b1b
1 parent 2daab78
commit 8d09b1b
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 20 deletions.
diff --git a/playground/package-lock.json b/playground/package-lock.json
diff --git 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
@@ -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
@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.18",
+  "version": "0.0.19",
   "type": "module",
   "files": [
     "package.json",