Hello guys, i have few questions. 1- I couldn't figure out how to get something like this with Comp...

# compose

[Hachemi Hamadi]

Hello guys, i have few questions.
1- I couldn't figure out how to get something like this with Compose. I have a text element but couldn't not figure how to make these custom border. Which are shown when the element is clicked and gone when i click outside of it.
2- Is it okay if i have multiple texts elements, photos, and shapes all drawn in the same Box with tap gestures for each one (from performance perspective)

[Nader Jawad]

Seems like something that can be accomplished with a draw modifier on the text composable. I would recommend using Modifier.drawWithContent and call drawContent() first to draw the text then you can draw the additional lines/circles/squares on top of it. You can optionally add this modifier to your composable whenever your text is clicked based on a mutableStateOf boolean flag

[Se7eN]

1. I've done it with a Box and aligned the controls inside the box with some offset to properly position them. It's easier to click them this way.
2. It works great for me.

[Hachemi Hamadi]

@Nader Jawad Thanks a lot it did work, but i couldn’t find a way to make them clickable. my main goal is to use them with gestures to scale / rotate the text component

[Nader Jawad]

I think you would either need to have a single gesture modifier after the drawWithCache implementation that determines if the touch is within any of the drawn "handles" or separate composable for each they have a click modifier on it. @matvei had built several of the gesture modifiers in compose. I think he might know of an easier solution? I think doing one gesture modifier that determines if the touch is in the handles would be the most efficient but more work as you would need to re-implement click basically

[matvei]

I think both Modifier.transformable and Modifier.clickable should work together alright. Or sub clickable with Modifier.pointerInput . It works and can be seen there: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]/samples/TransformableSample.kt;l=73?q=TransformableSample.kt

[Hachemi Hamadi]

Thanks @matvei I already have the gestures working on the text component (rotation, scale and dragging) using Modifier.pointerInput . What i am trying to do is allowing the user to also use the circles in the image above as controllers for those gestures too. for now i am drawing them using Modifier.drawWithContent so i am asking if there is a way to add gestures to drawCircle

[Hachemi Hamadi]

@Nader Jawad Thanks for the tip, i guess the only way is to to determine if the touch is in the handles using Modifier.pointerInput from the parent component, it’s going to be hard to implement for someone like me who is to Compose. but worth it. Thanks again 🙏

[Nader Jawad]

Yes there is no way to attach touch events to the draw calls within a DrawScope. This lambda is of a different type. Instead the same data that is passed down to the draw implementation can also be used to see if the touch events are within the circular handles

[matvei]

It seems like if you want your grabbers interactable - it might qualify them to be a separate component and not just decoration. Otherwise you can just prevent the scale/zoom transformation and enabled drag as soon as you draw them 🙂 Tricky stuff