[Interest] Best practices on pinch-zoomable item container with non-zoomable item attached

[Shawn Rutledge]

> On 13 Sep 2018, at 14:41, Alexander Ivash <elderorb at gmail.com> wrote:
> 
> I need pinch-zoomable item container with non-zoomable item container
> attached to the bottom. Like this:
> 
> Item {
>   id: item
>   Item {
>     id: zoomable
>    }
> 
>   Item {
>     id: nonzoomable
>   }
> }
> 
> (anchoring, geometry omitted for simplicity)
> 
> I see at least the following solutions:
> 
> 1. Change 'scale' of the whole item (zoomable + non-zoomable), then
> change 'scale' of non-zoomable to compensate parent scaling. It feels
> a bit wrong so I'd like to avoid it. Also doing in this way leads to
> some issues with anchoring non-zoomable item to zoomable one properly.
> 
> 2. Change 'scale' of the zoomable part only. But in this case I need
> to adjust x/y of 'item', otherwise scaling will always be happening
> relatively top/left (and I need relatively to the center)

PinchArea only sets the scale property of the zoomable item directly, and that is relative to the Item transformOrigin which defaults to center.

PinchHandler zooms relative to the centroid between the touchpoints, which is more typical behavior like what you get in most non-Qt interfaces (you need to be able to zoom into a particular geographical area of a map, or an interesting part of some drawing, for example).  It normally does that by setting the scale and the x and y properties at the same time.  But it’s not overriding anchors.centerIn: parent, so you can still use that to keep your item centered.

If yours is always zooming toward the top left, it must be because of your anchors or bindings, or because of setting  transformOrigin to TopLeft.

You could use another wrapper item to hold the place in the layout, and then add your zoomable item to that.  If it has no bindings or anchors, it can be free to zoom and move around within that space.  If you want to disable movement, or allow movement only within certain confines, you can try the minimumX/Y and maximumX/Y properties.

> Is there better way to do it?
> 
> If there would be a way to center parent in child - I could anchor
> 'item' to the center of 'zoomable' and everything would work
> magically. But such kinds of anchors are not supported.

anchors.centerIn: parent

What I sometimes wish we had is _bindable_ centerX/Y properties.  But at least we have anchors.