Max and Min Scale

[ugurcanbulut]

Hello there! Thank you for such a great library. It was really what I need and very light-weight comparing the others. Yet what I would like to see is an option that I can set max and min scale values. I would be appreciated if you can help me with that.

[ugurcanbulut]

Hello, I really need some help with that. I would be appreciated if you can.

[anitasv]

You can do this if you keep track of zoom in rotscale function, would you like to attempt?

[anitasv]

There is another long refactor in progress in another branch, so I won't take this soon.

[ugurcanbulut]

Thank you for your response. You think how long is it going to take for you to add this option? I don't know how can I help but it might be good to see your logic on this so I may go further with it.

[anitasv]

I am actually only blocked on testing 1.0.7 version, then I can add this feature.
https://github.com/anitasv/zoom/tree/in_flight_stage
If you can verify it is working fine, I can merge it and add your request.

[anitasv]

Might be better to start a beta channel, so I can easily merge changes there. I had tested before releasing new version; but didn't check if new built binaries are correct. Because I usually check in at least one iOS and one android device.

[ugurcanbulut]

Are you asking if min and max scale limit is working with 1.0.7 version? If so, I don’t see an instruction about how to do it? If you’re asking about regardless of min/max scale limit, library is working like a charm in IOS and Android, even in Windows 10 kiosk mode.

[anitasv]

Ah brilliant, I will merge then and add your feature.

[ugurcanbulut]

Awesome! Looking forward to it, thanks a lot...

[anitasv]

I have run into some problems, mainly due to state management; zoom limits are easy but haven't worked out how to manage events when it has maxed out. Will probably try again next weekend.

[rafael-pinheiro]

Is it something that is about to ship?
Would really like to see that :)

[anitasv]

Not yet. @rubavahini do you have any clever ideas?

[rrufino]

I had the same need. All I did was simple modify the function that return the css matrix.
I fixed the position and put a minimum scale to zoom. You can do the same and put a maximum scale to zoom.

Transform.prototype.css = function() {
    var A = this.A;
    var b = this.b;

    // Set min scale to zoom = 1
    if (A[0][0] < 1 && A[1][1] < 1) {
    	this.A[0][0] = 1;
    	this.A[1][1] = 1;
    }
    // Fixed the position when the zoom is at min scale
    if (A[0][0] == 1 && A[1][1] == 1) {
    	this.b[0] = 0;
    	this.b[1] = 0;
    }

    return 'matrix(' + A[0][0] + ',' + A[0][1] + ',' + A[1][0] + ',' + A[1][1] +
            ',' + b[0] + ',' + b[1] + ')';
};

Is not a fancy solution but it works.
By the way it's an excelent plugin. Keep up with the good work.

[diachedelic]

the difficulty with the feature is, when using rotation and panning, it is not clear how to gracefully return the element to its original bounds as the scale is reduced.

[anitasv]

@diachedelic the idea i had was cancel the transform if the scale exceeds or goes below the limits.

[anitasv]

for example in https://github.com/anitasv/zoom/blob/master/zoom.js#L379, if resultantZoom has higher zoom then do not update. But the problem is rotation also gets cancelled. Ideally additionalZoom can be realigned to maintain rotation but don't scale.

[diachedelic]

@anitasv what about gradually blending the transform with identity as the scale gets closer to min?

Although, if min < 1, elem will not take up its original bounds

[diachedelic]

@anitasv wait, that doesn't help with rotation. i think the main challenge is animating it smoothly at the min & max

[anitasv]

smoothness is fine, it will just stop updating once it hits the maximum/minimum. At least I guess, should code and see how it looks.

[diachedelic]

but what if the element was panned during zooming? it will not end up back in its original position, which is surprising for the user

i suppose this is really two separate issues:

• placing limits on the zoom
• correcting bounds at the zoom limits

[diachedelic]

I am sorry I do not think I am explaining it very well

[anitasv]

Yes, pan and rotation will stop the moment fingers are too wide causing zoom level to exceed max. It will act stuck, until you bring the fingers closer.

[anitasv]

But it is not too hard to fix that as well, the magnitude of zoom can be calculated and renormalized.

[diachedelic]

ok! I will do a proof of concept

[anitasv]

transform = [ [ c s; -c s]; pan]
z = sqrt(c^2 + s^2) will be zoom
if z > max:
adjust = max / z
transform = [ adjust * [c s; -c s], pan]

something like this will not have pan and rotation issue, but not sure if above pseudo code is right or not.