Zoom only if [CTRL] key is pressed and auto repositioning of the image with panzoom - Angular

Question

I am able to zoom in and out of my image with mouse scroll but I would like to zoom only if the [CTRL] key is pressed and using the mouse scroll. I would also like my image to go back to its initial properties after zooming out to a point and after moving it by panning also

This is what I have tried so far but it doesn't work :

zoomToggle(zoomIn: boolean) {
    const idx = this.zoomLevels.indexOf(this.currentZoomLevel);
    
    if (zoomIn) {
      if (typeof this.zoomLevels[idx + 1] !== 'undefined') {
        if(this.evente.ctrlKey == true){

        
        this.currentZoomLevel = this.zoomLevels[idx + 1];
        }
      }
    } else {
      if (typeof this.zoomLevels[idx - 1] !== 'undefined') {
        if(this.evente.ctrlKey == true){
        this.currentZoomLevel = this.zoomLevels[idx - 1];
      }
    }
    }
    if (this.currentZoomLevel >= 4) {
      
    } else {
      this.zoom();
    }

So here is the code with no errors :

Component.ts :

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import panzoom from "panzoom";

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html', 
  
  styleUrls: ['./hello.component.css']
})

export class HelloComponent implements AfterViewInit {

  clicked:boolean = false;
  evente : KeyboardEvent;

  @ViewChild('scene', { static: false }) scene: ElementRef;
  panZoomController;
  zoomLevels: number[];

  currentZoomLevel: number;

  changeState(){
    this.clicked = !this.clicked;
  }

  zoom() {
    const isSmooth = false;
    const scale = this.currentZoomLevel;


    if (scale) {
      const transform = this.panZoomController.getTransform();
      const deltaX = transform.x;
      const deltaY = transform.y;
      const offsetX = scale + deltaX;
      const offsetY = scale + deltaY;

      if (isSmooth) {
        this.panZoomController.smoothZoom(0, 0, scale);
      } else {
        this.panZoomController.zoomTo(offsetX, offsetY, scale);
      }
    }

    this.ngAfterViewInit()

  }

  zoomToggle(zoomIn: boolean) {
    const idx = this.zoomLevels.indexOf(this.currentZoomLevel);
    
    if (zoomIn) {
      if (typeof this.zoomLevels[idx + 1] !== 'undefined') {

        
        this.currentZoomLevel = this.zoomLevels[idx + 1];
        }
      
    } else {
      if (typeof this.zoomLevels[idx - 1] !== 'undefined') {
    
        this.currentZoomLevel = this.zoomLevels[idx - 1];
      
    }
    }
    if (this.currentZoomLevel >= 4) {
      
    } else {
      this.zoom();
    }

    this.ngAfterViewInit()
  }

  ngAfterViewInit() {

    this.zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
    this.currentZoomLevel = this.zoomLevels[4];
    // panzoom(document.querySelector('#scene'));
    this.panZoomController = panzoom(this.scene.nativeElement);
  }
}

Template.hmtl :

<div style="overflow: hidden">

    <img id="scene" #scene 
    src="https://c4.wallpaperflare.com/wallpaper/738/62/544/naruto-chidori-naruto-naruto-uzumaki-rasengan-naruto-sasuke-uchiha-hd-wallpaper-preview.jpg"
    >

  </div>

<br/>
      <button class="transparent-button" (click)="zoomToggle(false)">-</button>
      <span>{{currentZoomLevel * 100}}%</span>
      <button class="transparent-button" (click)="zoomToggle(true)">+</button>
      <button (click)="changeState()">Expand</button>

Answer 1

I got it. All I had to do is to add : contain:"outside" to the panZoomObject options