I ve a formulary app with a lot of different input types tex

Question

I ve a formulary app with a lot of different input types text radio check signature etc I can zoom in out and drag the form around I ve notice performance issues lots of lag when zooming and panning when doing this ```inputs forEach TextFieldWrapper id = text = onTextChanged = my callback implementation ``` More in thread

Guilherme Delgado · Answer

Where ``` Composable fun TextFieldWrapper id String text String onTextChanged id String text String gt Unit = null BasicTextField value = input onValueChange = input = it onTextChanged invoke id it text ``` But if instead I define the callback like this ```val onInputTextChanged id String text String gt Unit = remember key id text gt inputs forEach TextFieldWrapper id = text = onTextChanged = onInputTextChanged ``` The performance issues appear to be gone Any thoughts on this I mean it makes sense but I would like to hear from you

Zach Klippenstein (he/him) [MOD] · Answer

Zooming and panning alone if you re using `graphicsLayer` shouldn t trigger any recomposition or layout or text events Can you share your transformation code

Guilherme Delgado · Answer

Yes here it goes ```val imageModifier = remember fillHeight Modifier onGloballyPositioned coordinates gt imageTopLeft = coordinates boundsInRoot topLeft imageBottomRight = coordinates boundsInRoot bottomRight if imageDrawnSize == IntSize Zero imageDrawnSize = coordinates size Box modifier = Modifier fillMaxSize background Color LightGray copy alpha = 0 4f pointerInput gesturesEnabled if gesturesEnabled detectTransformGestures pan zoom gt val new = scale zoom scale = when new lt 1f gt 1f new gt 3f gt 3f else gt new if scale gt 1 translateOffset += pan val inBounds = imageTopLeft x lt = 0f amp amp imageTopLeft y lt = 0f amp amp imageBottomRight x gt = imageDrawnSize width toFloat amp amp imageBottomRight y gt = imageDrawnSize height toFloat if inBounds var deltaX = 0f if imageTopLeft x gt 0f deltaX = imageTopLeft x else if imageBottomRight x lt imageDrawnSize width toFloat deltaX = imageDrawnSize width toFloat imageBottomRight x var deltaY = 0f if imageTopLeft y gt 0f deltaY = imageTopLeft y else if imageBottomRight y lt imageDrawnSize height toFloat deltaY = imageDrawnSize height toFloat imageBottomRight y translateOffset = Offset translateOffset x + deltaX translateOffset y + deltaY else translateOffset = Offset 0f 0f graphicsLayer scaleX = scale scaleY = scale translationX = translateOffset x translationY = translateOffset y ```

Guilherme Delgado · Answer

The form has a png image as background and the fields will be drawn on top of the image

Zach Klippenstein (he/him) [MOD] · Answer

You always want to use the lambda form of `graphicsLayer` for stuff like this so that the layer can be adjusted during animation gestures without recomposing

Zach Klippenstein (he/him) [MOD] · Answer

Also unrelated but it looks like an antipattern that your BasicTextField is sending text events to its caller but also maintaining its own copy of what it thinks the text should be Whatever is receiving your 2 param onTextChanged events should probably be the source of truth for the text field contents

Guilherme Delgado · Answer

yup using the lambda form solves it but since now it doesn t trigger recomposition for instance if you have a piece of text selected the manual selectors wont update their position if we drag the form

Guilherme Delgado · Answer

regarding the BasicTextField the source of truth is being changed by the callback but the element is not being recomposed upon text change only if it gains focus or the form is dragged That s why I also have the `input = it` but in the end if recomposition is triggered the source of truth will provide the value Dunno if I explained myself sweat smile