labels and shapes in OMERO.figure

[will-moore]

We have a lot of requests for additional objects in the figure, not just OMERO Image panels:

• Labels: https://trello.com/c/wtu7IVuN/10-stand-alone-labels
• Attachments (png etc): https://trello.com/c/46Hx9JpU/106-file-attachments-graphs-etc-added-to-figure
• Lines, boxes, arrows etc.

Currently, we use CSS transform: scale(fraction) to scale all the figure paper & panels and also overlay a non-scaled <svg> canvas to draw the selected panel outlines and handle dragging and click selections etc. So, each figure panel DOM element has a corresponding svg Rectangle.
We do this so that the blue selection lines don't zoom in thickness when the figure zooms and we don't have to scale the drag events.

However, if we add support for lots of other elements (text, shapes etc) and we want to manipulate them directly, we don't want to duplicate them all on the <svg> too.
We can use ShapeEditor to add these, but maybe also add custom Rectangles for the figure panels (to be hidden when not selected etc).

So, probably need to get rid of the unscaled <svg> and simply handle the drag events with respect to the current zoom so that the CSS transform doesn't have any effect. Also do the same for selection line thicknesses and drag-handle sizes etc.

First TODO is add support for Labels to shape-editor.js.
Also add handling for dragging when scaled via CSS transform: scale(fraction) and size of Drag Handles.

Then, we need to add UI elements to the main figure page for working with Figure-wide Shape Editor.
Model coordinates will be top-left of first page, but does the Shape-Editor canvas need to extend over the whole figure (as the SVG canvas does now). Probably YES since we're using the same canvas for selecting & dragging panels. Convert coordinates as we do currently with getModelCoords(svgCoords).

[jburel]

Probably time to look at alternative to ShapeEditor

[will-moore]

Last time I looked I couldn't find anything that could provide just the functionality we want. The behaviour is designed to fit exactly, and now we need it even more customised (scaling the drag events dependent on css transform: scale(fraction)). But I guess we can look...

[will-moore]

• http://paperjs.org/ Similar to Raphael - can define shapes etc but no out-of-the box drawing.
• https://two.js.org/ - same
• http://fabricjs.com/ Looks good - will give this a try...

[will-moore]

OK, it seems like fabric.js can do pretty much everything apart from manipulate the points in a polygon, so I'll have to hand-code that as with Shape-Editor.
It's going to be a massive rewrite but I think it will give us a lot.

[will-moore]

Obvious solution (now that I've started looking at the iviewer's openlayers viewer) is to use that for all the ROIs (and tiling big images etc) in figure. Needs some investigation and would be a big job but would mean that we're using the same solution in both places.

[will-moore]

Alternative to adding Labels support to Shape-Editor is to simply create "text panels" in the same way as image panels, and allow them to be selected, dragged and resized in the same way via the svg overlay. Also allow manually setting x, y, width, height.