fixed bugs

playground/package.json

@@ -12,7 +12,7 @@
     "@vicons/ionicons5": "^0.12.0",
     "naive-ui": "^2.38.1",
     "vue": "^3.2.37",
-    "zoompinch": "^0.0.5"
+    "zoompinch": "^0.0.7"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",

playground/src/components/Playground.vue

@@ -132,7 +132,7 @@
         :mouse="mouseEvents"
         :touch="touchEvents"
         :wheel="wheelEvents"
-        :gesture="false"
+        :gesture="gestureEvents"
       >
         <template #canvas>
           <img
@@ -141,9 +141,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>
@@ -156,6 +156,8 @@ import 'zoompinch/style.css';
 import { reactive, ref, watch, watchEffect } from 'vue';
 import { NInputNumber, NSwitch, NButton } from 'naive-ui';
 
+// Flicker bug reproducable: 100,0,0.1,180
+
 const rotation = ref(true);
 const bounds = ref(false);
 watch(bounds, (newValue) => {
@@ -173,7 +175,8 @@ const zoompinchRef = ref<InstanceType<typeof Zoompinch>>();
 const offset = reactive({ top: 10, right: 10, bottom: 10, left: 10 });
 (window as any).offset = offset;
 
-const transform = ref({ x: 0, y: 0, scale: 1, rotate: 0 });
+//const transform = ref({ x: 0, y: 0, scale: 1, rotate: 0 });
+const transform = ref({ x: 100, y: 0, scale: 0.1, rotate: 180 }); // Flicker bug reproducable: 100,0,0.1,180
 (window as any).transform = transform;
 const updateTransform = (newTransform: Partial<typeof transform.value>) => {
   transform.value = { ...transform.value, ...newTransform };
@@ -238,9 +241,9 @@ function handleClickOnLayer(event: MouseEvent) {
     gap: 10px;
 
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    // @media screen and (max-width: 700px) {
-    //   grid-template-columns: repeat(auto-fill, minmax(1fr, ));
-    // }
+    @media screen and (max-width: 700px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
 
     &.small {
       grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
@@ -250,6 +253,15 @@ function handleClickOnLayer(event: MouseEvent) {
         font-size: 0.9em;
         opacity: 0.7;
       }
+      .n-input-number {
+        ::v-deep(.n-input__suffix) {
+          .n-button {
+            @media screen and (max-width: 700px) {
+              display: none;
+            }
+          }
+        }
+      }
     }
   }
   .zoompinch {

zoompinch-lit/package.json

@@ -17,7 +17,8 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "lit": "^2.3.1"
+    "lit": "^2.3.1",
+    "zoompinch": "^0.0.12"
   },
   "devDependencies": {
     "rollup-plugin-scss-lit": "^1.1.6",

zoompinch-lit/src/components/PanCake.ts

@@ -334,7 +334,7 @@ export class PanCake extends LitElement {
         const innerCanvasRel = this.touchStarts[0].canvasRel;
 
         // Project the scale
-        const [scaleDeltaX, scaleDeltaY] = this.calcProjectionTranslate(futureScale, innerWrapperRelPos, innerCanvasRel);
+        const [scaleDeltaX, scaleDeltaY] = this.calcProjectionTranslate(futureScale, innerWrapperRelPos, innerCanvasRel, 0);
 
         let rotationDeltaX = 0;
         let rotationDeltaY = 0;

zoompinch-vue/package.json

@@ -1,7 +1,7 @@
 {
   "name": "zoompinch",
   "private": false,
-  "version": "0.0.12",
+  "version": "0.0.13",
   "type": "module",
   "files": [
     "package.json",

zoompinch-vue/src/components/Zoompinch.vue

@@ -209,19 +209,25 @@ const mouseupProxy = (event: MouseEvent) => {
     handleMouseup(event);
   }
 };
+function isTouchDevice() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+const gestureEnabled = computed(() => {
+  return !isTouchDevice() && props.gesture;
+});
 
 const gesturestartProxy = (event: any) => {
-  if (props.gesture) {
+  if (gestureEnabled.value) {
     handleGesturestart(event);
   }
 };
 const gesturechangeProxy = (event: any) => {
-  if (props.gesture) {
+  if (gestureEnabled.value) {
     handleGesturechange(event);
   }
 };
 const gestureendProxy = (event: any) => {
-  if (props.gesture) {
+  if (gestureEnabled.value) {
     handleGestureend(event);
   }
 };

zoompinch-vue/src/controllers/touch.ts

@@ -179,7 +179,7 @@ export function useTouch({
     }
   };
   const handleTouchend = (event: TouchEvent) => {
-    event.preventDefault();
+    //event.preventDefault();
 
     if (event.touches.length === 0) {
       touchStarts = null;