Zoom/Pan constraints

Processing Coding Questions
9

This allows you to zoom in only to a certain point. But yes, the end result is good. The question now is how to allow free zoom within the borders and then return to the original. - The code is currently:

ArrayList<line> All_draw;

float scale=1;
float translateX = 0.0;
float translateY = 0.0;
final float ZOOM_MIN = 1, ZOOM_MAX = 5;
final float pan_MIN = 1, pan_MAX = 5;

void setup(){
//  fullScreen();
  size(1500,800);
  background(51);
  All_draw = new ArrayList<line>();
}
  
void draw(){
  background(51);
 
  pushMatrix();
  
  translate(translateX,translateY);
  stroke(255);
  if (mousePressed == true && scale>=0 && mouseButton!=39) {
    All_draw.add(new line((-translateX+mouseX)/scale, (-translateY+mouseY)/scale, (-translateX+pmouseX)/scale, (-translateY+pmouseY)/scale));}
  scale (scale);
  for (line l : All_draw){
      l.display();}
  
  popMatrix();
}

void mouseDragged(MouseEvent e) {
    if (e.getButton()==39){

      translateX += mouseX - pmouseX;
      translateY += mouseY - pmouseY;}
}


void mouseWheel(MouseEvent e) {
  float p = -e.getCount()/10.0;

  if (p < 0) {
    if (scale <= ZOOM_MIN)
      return;
  } else if (scale >= ZOOM_MAX)
    return;

  float delta = pow(2, p), w = width /2, h = height / 2;
  translateX -= w;
  translateY -= h;
  scale *= delta;
  translateX *= delta;
  translateY *= delta;
  translateX += w;
  translateY += h;
  
  translateX = min(0, max(translateX, width * scale));
  translateY = min(0, max(translateY, height * scale));
}

class line {
  float x1,y1,x2,y2;
  line (float x1_temp,float y1_temp,float x2_temp,float y2_temp){
    x1=x1_temp;
    y1=y1_temp;
    x2=x2_temp;
    y2=y2_temp;
  }
  
  void display(){
    line(x1, y1, x2, y2);}

}

In addition, I attach a code that does exactly what I’m looking for but works with image and texture. I don’t know how to implement these navigation actions that will work in my code.
(How to make a 2d Zoom and Pan)

float tx, ty;
float scale;
PImage img;
float xratio, yratio;
float minScale, maxScale;

void setup() {
  //use P2D or P3D to be able to use texture() 
  size(450, 360, P2D);
  
  //load image and calculate window/image ratio
  img = loadImage("1337.jpg");
  xratio = float(width) / img.width;
  yratio = float(height) / img.height;
  
  //minumum scale is calculated to prevent texture wrapping
  minScale = max(xratio, yratio);
  maxScale = 5;
  
  //start zoomed out
  scale = minScale;
}

void draw() {
  
  //calculate width/height of the region of interest in the texture
  float tw = img.width / scale * xratio;
  float th = img.height / scale * yratio;
  
  //limit the left-top texcoords to prevent texture wrapping
  tx = constrain(tx, 0, img.width-tw);
  ty = constrain(ty, 0, img.height-th);
 
  //draw textured rectangle 
  beginShape();
  texture(img);
  vertex(0, 0, tx, ty);
  vertex(width, 0, tx+tw, ty);
  vertex(width, height, tx+tw, ty+th);
  vertex(0, height, tx, ty+th);
  endShape();
}

void mouseDragged() {
  //move left-top texcoord using scaled mouse delta
  tx -= (mouseX-pmouseX)/scale;
  ty -= (mouseY-pmouseY)/scale;
}

void mouseWheel(MouseEvent event) {
  //zoom factor needs to be between about 0.99 and 1.01 to be able to multiply so add 1
  float zoomFactor = -event.getAmount()*.01 + 1; 
  float newScale = constrain(scale * zoomFactor, minScale, maxScale);
  
  //next two lines are the most important lines of the code.
  //subtract mouse in 'old' scale from mouse in 'new' scale and apply that to position.
  tx -= (mouseX/newScale - mouseX/scale);
  ty -= (mouseY/newScale - mouseY/scale);
  scale = newScale;
}