Small ROIs lost behind bigger ROIs

[will-moore]

See https://forum.image.sc/t/rois-deletion-on-omero-figure/78831

Adding a list of Shapes (as in iviewer) is one solution.
An alternative is to re-order Shapes so that smaller ones are always on top.

[imagesc-bot]

This issue has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/rois-deletion-on-omero-figure/78831/2

[Rdornier]

Hello @will-moore ,

I tried to figured out more clearly the behavior.

• If the ROI is completly inside another one, then it is impossible to reach it
• If the ROI partially overlapping a larger ROI, then (see gif) :
  • if you first select the large ROI, unselect everything and click on the overlapped part of the small shape, the large ROI is selected instead of the small one
  • if you first select the small ROI, unselect everything and click on the overlapped part of the small shape, the small ROI is now selected

It seems that there is a re-organization of the shapes internally by putting the last selected shape on the top layer. Do you know where this re-organisation is done in the code ? I try to find it but I didn't get any relevant result.

[Rdornier]

@will-moore any news on that ?

[will-moore]

Hi @Rdornier - That code is all hosted at https://github.com/ome/shape-editor. The idea was originally to create a library that we might use elsewhere, although that never happened. It uses It uses https://dmitrybaranovskiy.github.io/raphael/

If you clone the shape-editor repo, npm install, then grunt watch and you can open the index.html test page to run the code.
That tries to load a background image which isn't on-line any more, but if you edit the index.html to add black background then you can see the shapes:

+++ b/index.html
@@ -17,6 +17,7 @@
                        }
                        .imageWrapper div, .imageWrapper img {
                                position: absolute;
+                               background-color: black;
                        }
                </style>
        </head>

When you click on a Shape, it calls ShapeManager.prototype.selectShapes() which calls shape.setSelected(true); on each Shape. That triggers each shape to call shape.drawShape()

There is logic there to move the shape to the front if it's selected:
https://github.com/ome/shape-editor/blob/6e0f76c5a94168096577063d74dd17b25e5c400e/src/js/shapes/ellipse.js#L353

I guess we need to figure out at what point a smaller shape should be compared to a bigger shape and be brought up to the front?
E.g. after all the shapes have been drawn, maybe after each shape is created.
Also, how to compare sizes of shapes and whether to bring a shape to the front if it's just smaller than another shape, or overlapping, or only if it's completely obscured?!

Apologies that we are having to handle all this low level logic - I would have liked to find an existing drawing library that could have done all this, but at the time I never did find one, so I wrote my own!

[Rdornier]

Hello,

Thank you for your advice. I didn't remember this repo !
I'll work on it as soon as I can.

Rémy.