Image region selection doesn't work in RTL layouts

[BenHenning]

Describe the bug
Image region selection has issues in RTL layouts. Regions don't seem to be selected when tapping around the image.

To Reproduce
Steps to reproduce the behavior:

1. Open the Image Region Selection Exploration under First Test Topic (requires either playing through Prototype Exploration or unlocking it via the developer options menu)
2. Try tapping around the image. Notice that no planets can be selected.

Expected behavior
Planets should be selected in this interaction. RTL shouldn't change how image region selection works.

Screenshots
None

Device

• Device: Nexus 5X

[BenHenning]

/cc @rt4914 & @seanlip as FYI

[BenHenning]

@veena14cs assigning to you since I think this might've been missed during the RTL audit.

[BenHenning]

Follow-up: strangely, Saturn is still clickable but oddly. I can't seem to click on any of the other planets. I can't quite figure out how this is wrong.

[BenHenning]

/cc @anandwana001

[veena14cs]

@veena14cs assigning to you since I think this might've been missed during the RTL audit.

Sure @BenHenning I will look into this.

[anandwana001]

@veena14cs As I tried to look into this issue, in RTL, only Jupiter and Saturn are working, that too Jupiter is selecting the wrong one.

@rt4914 @veena14cs @BenHenning How are we defining the LabeledRegion for RTL? The current 2-Dimensional Point are of imge in LTR layout, but don't we need the RTL coordinates too?

[veena14cs]

Canvas doesn't support RTL. We are using RectF() to draw region if I am not wrong. Co-ordinates for RTL is always from left-to-right instead of right-to-left.

[anandwana001]

yes, @veena14cs Could you check addRegionViews function in ClickableAreasImage.kt file, and can we put some conditions like, in RTL, the region should get fliped to support RTL?

val imageRect = RectF(
          getXCoordinate(clickableArea.region.area.upperLeft.x),
          getYCoordinate(clickableArea.region.area.upperLeft.y),
          getXCoordinate(clickableArea.region.area.lowerRight.x),
          getYCoordinate(clickableArea.region.area.lowerRight.y)
        )

Sample Example SegmentedCircularProgressView, onDraw function.

[veena14cs]

yes, @veena14cs Could you check addRegionViews function in ClickableAreasImage.kt file, and can we put some conditions like, in RTL, the region should get fliped to support RTL?

val imageRect = RectF(
          getXCoordinate(clickableArea.region.area.upperLeft.x),
          getYCoordinate(clickableArea.region.area.upperLeft.y),
          getXCoordinate(clickableArea.region.area.lowerRight.x),
          getYCoordinate(clickableArea.region.area.lowerRight.y)
        )

I tried to put some hardcoded values and also tried flipping left and right values but couldn't get it working. Let me try Sample Example SegmentedCircularProgressView, onDraw function.

[anandwana001]

I tried to put a log to check the values we are passing in RectF() function and it is the same for LTR and RTL so there should be something else that is updating for RTL.

Log.d("imageRect", " ${clickableArea.region.area.upperLeft.x} - ${clickableArea.region.area.upperLeft.y} " +
  "- ${clickableArea.region.area.lowerRight.x} - ${clickableArea.region.area.lowerRight.y}")

LTR
2021-09-16 16:56:29.673 D/imageRect:  0.010981758 - 0.09856376 - 0.048717607 - 0.17073357
2021-09-16 16:56:29.681 D/imageRect:  0.036925156 - 0.17554489 - 0.1006044 - 0.2958279
2021-09-16 16:56:29.682 D/imageRect:  0.08645345 - 0.1081864 - 0.15484968 - 0.22846942
2021-09-16 16:56:29.682 D/imageRect:  0.1477742 - 0.17554489 - 0.19258553 - 0.2717713
2021-09-16 16:56:29.682 D/imageRect:  0.19022705 - 0.06007319 - 0.5723025 - 0.81545055
2021-09-16 16:56:29.687 D/imageRect:  0.2491893 - 0.3679977 - 0.9968308 - 0.9934694
2021-09-16 16:56:29.688 D/imageRect:  0.66428363 - 0.05045055 - 0.81522703 - 0.35356376
2021-09-16 16:56:29.688 D/imageRect:  0.824661 - 0.021582626 - 0.94022703 - 0.25252602
2021-09-16 16:56:29.690 D/imageRect:  0.94022703 - 0.2236581 - 0.9779629 - 0.2958279

RTL
2021-09-16 16:57:19.742 D/imageRect:  0.010981758 - 0.09856376 - 0.048717607 - 0.17073357
2021-09-16 16:57:19.743 D/imageRect:  0.036925156 - 0.17554489 - 0.1006044 - 0.2958279
2021-09-16 16:57:19.743 D/imageRect:  0.08645345 - 0.1081864 - 0.15484968 - 0.22846942
2021-09-16 16:57:19.744 D/imageRect:  0.1477742 - 0.17554489 - 0.19258553 - 0.2717713
2021-09-16 16:57:19.744 D/imageRect:  0.19022705 - 0.06007319 - 0.5723025 - 0.81545055
2021-09-16 16:57:19.745 D/imageRect:  0.2491893 - 0.3679977 - 0.9968308 - 0.9934694
2021-09-16 16:57:19.749 D/imageRect:  0.66428363 - 0.05045055 - 0.81522703 - 0.35356376
2021-09-16 16:57:19.758 D/imageRect:  0.824661 - 0.021582626 - 0.94022703 - 0.25252602
2021-09-16 16:57:19.763 D/imageRect:  0.94022703 - 0.2236581 - 0.9779629 - 0.2958279

[veena14cs]

Can we force that particular layout to be LTR in RTL device? As it is a image and doesn't change for RTL. I have created PR PTAL @anandwana001 @rt4914 and @BenHenning.

[BenHenning]

For searching context, this issue was found in 0.6-alpha (MR3).