useXpaZoom

A Vue composable for calculating zoom transformations relative to a target point. This is particularly useful for implementing zoom functionality in canvas applications where you want to zoom relative to a specific point (like the mouse position).

Installation

npm install target-relative-zoom

Usage

import { useXpaZoom, type Vector2D } from 'xpa-use-zoom';

// Example usage with canvas
const canvasPosition: Vector2D = { x: 0, y: 0 };
const currentScale = 1;

// When handling mouse wheel event
function handleWheel(e: WheelEvent) {
  const mousePosition: Vector2D = {
    x: e.clientX - canvas.offsetWidth / 2,  // Center-relative coordinates, or just pass mouse pos
    y: e.clientY - canvas.offsetHeight / 2
  };
  
  const scaleOffset = e.deltaY * -0.001; // Adjust this multiplier to control zoom sensitivity
  
  const { newScale, newPosition } = useTargetRelativeZoom(
    canvasPosition,
    mousePosition,
    currentScale,
    scaleOffset
  );

  // Update your canvas position and scale, make sure calc using the base translate if present.
  canvas.style.transform = `translate(${newPosition.x}px, ${newPosition.y}px) scale(${newScale})`;
}

API

useXpaZoom

function useXpaZoom(
    currentPosition: Vector2D,
    targetPosition: Vector2D,
    currentScale: number,
    scaleOffset: number,
    minScale?: number,
    maxScale?: number
): { newScale: number; newPosition: Vector2D }

Parameters

• currentPosition: The current position of the canvas
• targetPosition: The position to zoom at (usually mouse position)
• currentScale: The current scale of the canvas
• scaleOffset: The base amount to adjust the scale by (positive for zoom in, negative for zoom out)
• minScale: Optional. The minimum allowed scale value (defaults to 0.2)
• maxScale: Optional. The maximum allowed scale value (defaults to 10)

Returns

An object containing:

• newScale: The calculated scale after zooming
• newPosition: The new position coordinates after zooming

Types

type Vector2D = {
    x: number;
    y: number;
}

License

MIT