Scaling Draggable within Viewbox

How-to Discussions
1

I have some <Draggable> content within a <Viewbox>, which is downsampling its contents.

Is there a way to ensure the draggable contents still track correctly when dragging on screen? (currently it moves slower than the users finger, due to the downsampling)

If this can’t be automatically corrected for, is there perhaps a way of specifying delta scale for the Draggable, so I could specify a scale to counter the Viewbox?

To clarify a little on what I’m done - I’m making a tool for generating images, which allows draggable and manipulatable content. I’m using a Viewbox as I need the image generated to be a specific higher resolution (I’m then using uno to capture the result afterwards).

Thanks

2

Hi Luke,

to provide meaningful assistance, we should have some code to look at. A complete, minimal, ready-to-run project is pretty much essential. Perhaps you could isolate the component you’re making in a separate repository and share that with us?

3

Sure Uldis

A minimal example is: (although I can provide in a repo if you’d like)

<App>
	<Viewbox Width="300" Height="300">
		<Panel Width="900" Height="900" Color="#222">
			<Panel Color="#f00" Width="200" Height="200">
				<Draggable />
			</Panel>
		</Panel>
	</Viewbox>
</App>

When you have a Viewbox that is scaling everything down to a third of the size, which has draggable components, the components only move a third of the distance when you drag them (so do not track correctly with your finger).

I need a way of still maintaining a 1:1 relation when dragging them, even though they’re within a rescaled Viewbox.

Edit: Also, Draggable Bounds suffers from a similar problem: The top left corner of the bounds is correct, but the width and height of the bounding area will be 3 times the size of the container if within a Viewbox scaling it down by a third.

4

Thanks for an excellent reproduction! Nothing else is needed at this point.

This looks like a defect and I’ve logged a ticket about it, and you can follow the progress there.

5

Cheers Uldis!