Support for Pinch-to-Zoom Gesture on Touch Screens?

[chihebnabil]

Hi there!

I'm wondering if there's currently support or any plans to add support for zooming in/out using pinch gestures on touch screens (like on mobile or tablets)?

I couldn't find any clear documentation or issues related to this.

This feature would be super handy for improving the user experience on touch devices.

Is this something already available, in the works, or planned for the future?

Any guidance or updates would be appreciated!

Thanks in advance! 🙏

[hizzgdev]

Hi @chihebnabil , have you tried it (https://jsmind.online) on a tablets? I think it is supported to zoom in/out.

I guess your concern may be how to prevent the browser from zooming in/out the entire page? TBH, I haven't researched this and I'm not sure if there's a way. If this is really what you're struggling with, we can deep dive it together.

[chihebnabil]

I'm experimenting with Vue.js using this code, but it’s not working as I was hoping

<template>
  <div @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" ref="container" id="jsmind_container"
    :style="containerStyle"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue';

const container = ref(null);
const scale = ref(1);
const translateX = ref(0);
const translateY = ref(0);
const initialDistance = ref(0);
const initialScale = ref(1);
const initialTouchX = ref(0);
const initialTouchY = ref(0);

const getDistance = (touch1, touch2) => {
  return Math.hypot(
    touch1.clientX - touch2.clientX,
    touch1.clientY - touch2.clientY
  );
};

const getMidpoint = (touch1, touch2) => {
  return {
    x: (touch1.clientX + touch2.clientX) / 2,
    y: (touch1.clientY + touch2.clientY) / 2
  };
};

const onTouchStart = (event) => {
  if (event.touches.length === 2) {
    event.preventDefault();
    initialDistance.value = getDistance(event.touches[0], event.touches[1]);
    initialScale.value = scale.value;
    const midpoint = getMidpoint(event.touches[0], event.touches[1]);
    initialTouchX.value = midpoint.x;
    initialTouchY.value = midpoint.y;
  }
};

const onTouchMove = (event) => {
  if (event.touches.length === 2) {
    event.preventDefault();
    const currentDistance = getDistance(event.touches[0], event.touches[1]);
    const scaleChange = currentDistance / initialDistance.value;
    const newScale = Math.max(0.5, Math.min(5, initialScale.value * scaleChange)); // Prevent shrinking below 0.5x

    const midpoint = getMidpoint(event.touches[0], event.touches[1]);
    const dx = midpoint.x - initialTouchX.value;
    const dy = midpoint.y - initialTouchY.value;

    // Adjust translation based on new scale and pinch zoom center
    translateX.value += dx;
    translateY.value += dy;

    scale.value = newScale;

    initialTouchX.value = midpoint.x;
    initialTouchY.value = midpoint.y;
  }
};

const onTouchEnd = (event) => {
  event.preventDefault();
  initialDistance.value = 0;
  initialScale.value = scale.value;
};

// Prevent default zoom behavior on mobile devices
const preventDefault = (event) => {
  if (event.touches.length > 1) {
    event.preventDefault();
  }
};

onMounted(() => {
  document.addEventListener('touchmove', preventDefault, { passive: false });
});

onUnmounted(() => {
  document.removeEventListener('touchmove', preventDefault);
});

// Computed style for the container, adjusting scale and translation
const containerStyle = computed(() => ({
  transform: `translate(${translateX.value}px, ${translateY.value}px) scale(${scale.value})`,
  transformOrigin: '0 0',
  width: '100%',   // Ensure the container takes full width
  height: '100%',  // Ensure the container takes full height
}));
</script>

<style scoped>
#jsmind_container {
  min-width: 100vw;
  /* Prevent container from shrinking */
  min-height: 100vh;
  /* Same for height */

}
</style>

[hizzgdev]

does it works on https://jsmind.online/ ?