Support overlaying content that zooms with the image.

[evant]

I'm trying to overlay the image with an aspect ratio box and I'd like it to follow any zooms & translates the user makes. Unfortunately the accessed zoomFraction includes the initial scale of the image to scale to fit so I don't know what zoom factor to apply to my overlay to match. I think either of the below that would be sufficient:

1. A user-zoom factor that goes from 1 when all the way 'zoomed out' to whatever the max zoom is.
2. An initial image scale factor I could subtract from zoomFraction to get the value to scale my ui with.

[saket]

A user-zoom factor that goes from 1 when all the way 'zoomed out' to whatever the max zoom is.

ZoomableState maintains this state internally but only exposes the final zoom factor. Will it be sufficient to expose these two values in some fashion?

telephoto/zoomable/src/commonMain/kotlin/me/saket/telephoto/zoomable/ZoomableState.kt

Lines 570 to 582 in 792274b

	internal data class ContentZoom(
	/**
	* The initial scale needed to fit [Modifier.zoomable]'s content with
	* respect to [ZoomableState.contentScale].
	* */
	val baseZoom: ScaleFactor,
	/** Zoom applied by user using gestures. */
	val userZoom: Float,
	) {
	fun finalZoom(): ScaleFactor {
	return baseZoom * userZoom
	}

I'd like it to follow any zooms & translates the user makes.

Do you have a video of an app that does this by any chance? I think I mostly understand your usecase but it'd be nice to confirm my assumptions by seeing something in action.

[evant]

Ah yep that should! Reading from userZoom is exactly what I'm looking for.

I think you can see a good example of what I'm looking to do by editing a photo and google photos and using the markup tool to mark on it.

[saket]

Got it. I'll try coming up something. 👍

I think you can see a good example of what I'm looking to do by editing a photo and google photos and using the markup tool to mark on it.

This screen?

Or were you referring to this cropping tool? It has an overlay but it does not follow the image. It stays centered.

screen-20231110-005723.3.mp4

[evant]

The first one, note that when you draw on the image it tracks when you zoom/pan around.

[saket]

Gotcha!

[saket]

@evant Wanna try out 0.7.0-SNAPSHOT to see if you're able to use this?

telephoto/zoomable/src/commonMain/kotlin/me/saket/telephoto/zoomable/ZoomableContentTransformation.kt

Lines 78 to 90 in a586a8c

	interface ScaleMetadata {
	/**
	* The default scale needed to position the content within its layout bounds with
	* respect to [ZoomableState.contentScale].
	*/
	val initialScale: ScaleFactor
	/**
	* Scale applied by the user using zoom gestures. The final scale of the content
	* is calculated using [initialScale] x [userZoom].
	*/
	val userZoom: Float
	}

[saket]

Released as part of 0.7.1.