phaser

phaser camera pan-zoom on click.js

import { SceneObject } from "types";

const DEFAULT_ZOOM = 0.01;

const scrollMap = (scene: SceneObject, pointer: Phaser.Input.Pointer, zoom: number) => {
  zoom = Phaser.Math.Clamp(Phaser.Math.RoundTo(zoom, -3), 0.01, 1);

  if (scene.globalPosition) {
    scene.cameras.main.centerOn(scene.globalPosition.x, scene.globalPosition.y);
    scene.cameras.main.zoomTo(zoom, 0);
  } else {
    scene.cameras.main.centerToBounds();
    const { centerX, centerY, width } = scene.cameras.main.worldView;

    // World Distances
    const worldDx = pointer.worldX - centerX;
    const worldDy = pointer.worldY - centerY;

    // Calculate scale
    const nextWidth = scene.cameras.main.width / zoom;
    const scale = nextWidth / width;

    // Create next distances
    const newWorldDx = scale * worldDx;
    const newWorldDy = scale * worldDy;

    // Calculate new center
    const newCenterX = pointer.worldX - newWorldDx;
    const newCenterY = pointer.worldY - newWorldDy;
    scene.cameras.main.centerOn(newCenterX, newCenterY);
    scene.cameras.main.zoomTo(zoom, 0);
  }
};

export const handleScrollZoom = (scene: SceneObject) => {
  scene.input.on("wheel", (pointer: Phaser.Input.Pointer, gameobjects, deltaX, deltaY, deltaZ) => {
    let zoom = scene.cameras.main.zoom;
    if (deltaY < 0) zoom += 0.003;
    else if (deltaY > 0) zoom -= 0.003;

    zoom = Phaser.Math.Clamp(Phaser.Math.RoundTo(zoom, -3), 0.01, 1);
    scrollMap(scene, pointer, zoom);

    const value = (Math.abs(DEFAULT_ZOOM - Math.abs(zoom)) / 0.03) * 10;
    // change vertical input when wheeling mouse
    updateVerticalSlider(value.toString());
  });
};

const updateVerticalSlider = (value: string) => {
  if (document) {
    const verticalElement = <HTMLInputElement>document.getElementById("vertical_range");
    if (verticalElement) verticalElement.value = value;
  }
};

export const dragMap = (scene: SceneObject) => {
  scene.dragPinch.on("drag1", (_drag) => {
    scene.cam.scrollX -= _drag.drag1Vector.x / scene.cam.zoom;
    scene.cam.scrollY -= _drag.drag1Vector.y / scene.cam.zoom;
  });
};

export const pinchForMobile = (scene: SceneObject) => {
  scene.dragPinch.on("pinch", function (_pinch) {
    scene.isDragging = true;
    let zoomFactor = _pinch.scaleFactor;
    let zoom = Phaser.Math.Clamp(scene.cam.zoom * zoomFactor, 0.01, 1);
    scene.cam.zoom = zoom;

    const value = (Math.abs(DEFAULT_ZOOM - Math.abs(zoom)) / 0.03) * 10;
    // change vertical input when pinching
    updateVerticalSlider(value.toString());
  });
};

export const handleRangeZoom = (scene: SceneObject, delta: number) => {
  const pointer = scene.input.activePointer;
  let zoom = 0.01; // default zoom value of the scene
  if (delta < 0) zoom -= 0.003 * Math.abs(delta);
  else if (delta > 0) zoom += 0.003 * Math.abs(delta);

  zoom = Phaser.Math.Clamp(Phaser.Math.RoundTo(zoom, -3), 0.01, 1);
  scrollMap(scene, pointer, zoom);
};