Fix labels around border

[Rdornier]

Resolves #614, resolves #615

[will-moore]

better to use border = panel.get('border') which won't cause an error if border is missing

[will-moore]

The app JS fix looks good.

The PDF labels are shifted OK for single labels in some positions, but where we have multiple labels (e.g top right panel) or labels on the inside corners then it's not looking right.
Also left-vertical labels (bottom-left panel) is too far left.

Screenshot shows app (top-left), PDF with this PR (top-right) and PDF without this PR (bottom). All borders are 15 px:

[Rdornier]

Hello Will,

Thanks for you careful review. I've made a fix to correct that.

There is only one remaining thing. When you re-open the figure, with vertical labels on panel with borders, the vertical labels are very far away from the panel. If you move the panel, then the position of the labels are correctly updated.

I found out that this behavior is coming from those two lines

            // need to force update of vertical labels layout
            $('.left_vlabels', self.$el).css('width', 3 * self.$el.height() + 'px');
            $('.right_vlabels', self.$el).css('width', 3 * self.$el.height() + 'px');

If I remove them, this behavior disappear. But I don't know if I'm allowed to remove them, as they should be needed for something, right ?

Rémy.

[will-moore]

OK, so this took me quite a bit of digging...

You do need those force update lines... I saw the commit that added them mentioned "fix labels on non-square panesl" or something like that, and if you have a rectangular panel you'll see that they are really needed!

I also noticed that if you simply toggle the border (hide then show) then it fixes the issue, which turns out that simply calling render_labels() again is all that's needed.

Then I tried adding an extra call to render_labels() into the setTimeout() block (in the diff below), and that ALSO fixed the problem!
It took a while to work out that self.$el.height() (in the "problematic" lines that you tried removing) returns 2 different values: When render_labels() is first called on the initial render(), and again after the timeout. The difference in the heights is equivalent to 2 x border width.

It turns out that the first time that render() and render_labels() is called is BEFORE the panel has been added to the DOM. At that point it's just a jQuery object. After the timeout it is then attached to the DOM, and is then subject to different page layout css etc. So, calling render_labels() again gives a different self.$el.height().

If I update the code to avoid calling render() until AFTER the panel is added to the DOM, then it all behaves much better.
I also found that render_labels() is being called lots of times, so I've tried to clean that up too.

With that change, it also turns out that we don't need render_shapes() to be called after a timeout either! It needed that before because Raphael code was unhappy if the elements weren't on the page DOM.

Give this a try!

diff --git a/src/js/views/figure_view.js b/src/js/views/figure_view.js
index 361c3535..4eeff4df 100644
--- a/src/js/views/figure_view.js
+++ b/src/js/views/figure_view.js
@@ -796,7 +796,9 @@
         addOne: function(panel) {
             var page_color = this.model.get('page_color');
             var view = new PanelView({model:panel, page_color:page_color});
-            this.$figure.append(view.render().el);
+            this.$figure.append(view.el);
+            // render works better AFTER attaching element to the DOM
+            view.render();
         },
 
         renderLoadingSpinner: function() {
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 4efa11a6..a5ce5b6a 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -48,7 +48,6 @@
             if (opts.page_color) {
                 this.page_color = opts.page_color;
             }
-            this.render();
         },
 
         events: {
@@ -373,15 +372,8 @@
 
             // update src, layout etc.
             this.render_image();
-            this.render_labels();
-            this.render_scalebar();     // also calls render_layout()
-
-            // At this point, element is not ready for Raphael svg
-            // If we wait a short time, works fine
-            var self = this;
-            setTimeout(function(){
-                self.render_shapes();
-            }, 10);
+            this.render_scalebar();     // also calls render_layout() -> render_labels()
+            this.render_shapes();
 
             return this;

[Rdornier]

Hi @will-moore

Indeed, it's a deep review you did here, thanks for your time !
I've tested it and the bug indeed disappear. I don't see any other bug that could be induced by those changes, at least on what I've tested. So, I think it's good.

Thanks again for finding the solution,
Rémy.

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#345. See the console output for more details.
Possible conflicts:

• PR Colorbar feature #605 Tom-TBT 'Colorbar feature'
  • src/js/views/panel_view.js

--conflicts

[Tom-TBT]

the conflict with #605 is coming from here

https://github.com/ome/omero-figure/pull/605/files#diff-fd31cdc90e2bd6fb92184b2b54474aa097d94dcbcc6ebf591b99715c6c0b0744R449-R452

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#346. See the console output for more details.
Possible conflicts:

• PR Colorbar feature #605 Tom-TBT 'Colorbar feature'
  • src/js/views/panel_view.js

--conflicts

[snoopycrimecop]

Conflicting PR. Removed from build OMERO-plugins-push#347. See the console output for more details.
Possible conflicts:

• PR Colorbar feature #605 Tom-TBT 'Colorbar feature'
  • src/js/views/panel_view.js

--conflicts