Move Container in Canvas only to a certain point

[afcode]

Hello, 

I have a Canvas that is as large as the browser window (I want to support from 1080p to 4k). Currently I can move my container, which is most of the time larger than the canvas, I can move it around everywhere -> also out of the canvas vision. I want to restrict the container to only move out of the desired corner like about 30px. 

Please see the figures for a better understanding. I managed to get something like this with checking the current position of the container after very drag and drop and in this event to set the position of it to an allowed setting. But my solution does not work on different screen sizes. 

 

 

[Teckniel]

Hello.

Do you mean panning and zooming the canvas?
If so: here is a example: http://embed.plnkr.co/II6lgj511fsQ7l0QCoRi/

[afcode]

4 hours ago, Teckniel said:

Hello.

Do you mean panning and zooming the canvas?
If so: here is a example: http://embed.plnkr.co/II6lgj511fsQ7l0QCoRi/

Hey, 

Thanks for your answer. Thats pretty much what I got so far. But I want to restrict the user from moving the outer yellow rectangle outside of my view (see the screenshot for a better understanding). 

 

[Exca]

When you handle the movement just add clamping to values that don't allow it to go any further.

So in your case if I assume that at 0,0 the container is at topleft of canvas then you could do something like this:

 

function clamp( min, max, value ) {
  return Math.min(max, Math.max(min, value));
}

const maxBorder = 30

container.x = clamp( maxBorder, container.width - canvas.width - maxBorder );
container.y = clamp( maxBorder, container.height - canvas.height - maxBorder);

Might be an error in the logic somewhere, dont have a proper testbed currently.

In that code you would call the clamping after you have set your containers position based on mouse movement.

Edited May 6, 2021 by Exca

[afcode]

Hello @Exca

Thank your for your answer, can you explain the clamp method in more detail, especially what these function call in it should do?  

[Exca]

Oops, just noticed that I forgot to write Math.max and Math.min. I edited the above response to correct.

But basically this is how it works:

Let's say you have a value of 10 and your allowed range is 2-5.

First you take the maximum of range start (2) and your value (10). This returns 10 and if you had for example -1 as value then the value would be 2. So basically it sets the return value to range start or the value itself. Then do the same to end of range with minimum to get a value that's less than 5 and you end up with a value that's in wanted range.

You could also implement clampin to value with if statements:
 

function clamp( min, max, value)
{
  if( value < min) return min;
  if( value > max) return max;
  return value;  
}