From e86749e612b9ac9227ca741127f1831752b891b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Mon, 2 Oct 2023 10:45:15 +0200
Subject: [PATCH 1/6] Add right vertical choice in drop-down list

---
 src/js/views/right_panel_view.js              | 2 +-
 src/templates/labels_form_inner_template.html | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js
index c91641e52..53dca6857 100644
--- a/src/js/views/right_panel_view.js
+++ b/src/js/views/right_panel_view.js
@@ -507,7 +507,7 @@
         render: function() {
 
             var self = this,
-                positions = {'top':{}, 'bottom':{}, 'left':{}, 'leftvert':{}, 'right':{},
+                positions = {'top':{}, 'bottom':{}, 'left':{}, 'leftvert':{}, 'right':{},'rightvert':{},
                     'topleft':{}, 'topright':{}, 'bottomleft':{}, 'bottomright':{}};
             this.models.forEach(function(m){
                 // group labels by position
diff --git a/src/templates/labels_form_inner_template.html b/src/templates/labels_form_inner_template.html
index efb061fc7..a0298f252 100644
--- a/src/templates/labels_form_inner_template.html
+++ b/src/templates/labels_form_inner_template.html
@@ -74,7 +74,7 @@
         <button type="button" class="label-position btn btn-default btn-sm dropdown-toggle" 
                 title="Position" data-toggle="dropdown">
             <span data-position="<%= position %>" class="labelicon-<%= position %> glyphicon 
-                <% if (_.contains(['top','bottom','left','leftvert','right'],position)) print('glyphicon-log-out'); else {print('glyphicon-new-window')} %>"></span>
+                <% if (_.contains(['top','bottom','left','leftvert','right','rightvert'],position)) print('glyphicon-log-out'); else {print('glyphicon-new-window')} %>"></span>
             <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">
@@ -112,6 +112,11 @@
             <li><a href="#">
                 <span data-position="right" class="labelicon-right glyphicon glyphicon-log-out"></span> Right</a>
             </li>
+            <li><a href="#">
+                <span data-position="rightvert" class="labelicon-rightvert glyphicon glyphicon-log-out"></span> 
+                Right vertical
+            </a>
+        </li>
             <li><a href="#">
                 <span data-position="bottom" class="labelicon-bottom glyphicon glyphicon-log-out"></span> Bottom</a>
             </li>

From b170e220d7a6c0492b717e0d96d078ae9f8cf9db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Mon, 2 Oct 2023 11:13:32 +0200
Subject: [PATCH 2/6] Update bounding box size + add rightvert to the panel
 view

---
 src/js/models/panel_model.js | 12 +++++++++++-
 src/js/views/panel_view.js   |  6 +++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/js/models/panel_model.js b/src/js/models/panel_model.js
index 7e3c02a67..b65e860fa 100644
--- a/src/js/models/panel_model.js
+++ b/src/js/models/panel_model.js
@@ -877,7 +877,17 @@
 
         getBoundingBoxRight: function() {
             // Ignore right (horizontal) labels since we don't know how long they are
-            return this.get('x') + this.get('width');
+            // but include right vertical labels
+            var labels = this.get("labels");
+            var x = this.get('x') + this.get('width');
+            // get labels by position
+            var right_labels = labels.filter(function(l) {return l.position === 'rightvert'});
+            // offset by font-size of each
+            x = right_labels.reduce(function(prev, l){
+                return prev + (LINE_HEIGHT * l.size);
+            }, x);
+
+            return x;
         },
 
         getBoundingBoxBottom: function() {
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index ca9f1599f..8a7a1a766 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -171,7 +171,7 @@
                 self = this,
                 positions = {
                     'top':[], 'bottom':[], 'left':[], 'right':[],
-                    'leftvert':[],
+                    'leftvert':[],'rightvert':[],
                     'topleft':[], 'topright':[],
                     'bottomleft':[], 'bottomright':[]
                 };
@@ -182,7 +182,7 @@
                 var ljson = $.extend(true, {}, l);
                 // If label is same color as page (and is outside of panel)
                 if (ljson.color.toLowerCase() == self.page_color.toLowerCase() &&
-                        ["top", "bottom", "left", "right", "leftvert"].indexOf(l.position) > -1 ) {
+                        ["top", "bottom", "left", "right", "leftvert", "rightvert"].indexOf(l.position) > -1 ) {
                     // If black -> white, otherwise -> black
                     if (ljson.color === '000000') {
                         ljson.color = 'ffffff';
@@ -249,7 +249,7 @@
             _.each(positions, function(lbls, p) {
                 var json = {'position':p, 'labels':lbls};
                 if (lbls.length === 0) return;
-                if (p == 'leftvert') {  // vertical
+                if (p == 'leftvert'|| p == 'rightvert') {  // vertical
                     html += self.label_vertical_template(json);
                 } else if (p == 'left' || p == 'right') {
                     html += self.label_table_template(json);

From 85bd8c36fe6d6d0409fb7452922c8446c704e415 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Mon, 2 Oct 2023 13:29:00 +0200
Subject: [PATCH 3/6] Add css labels

---
 omero_figure/static/figure/css/figure.css      | 18 ++++++++++++++++++
 src/js/views/panel_view.js                     |  7 ++++++-
 .../labels/label_right_vertical_template.html  |  8 ++++++++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/templates/labels/label_right_vertical_template.html

diff --git a/omero_figure/static/figure/css/figure.css b/omero_figure/static/figure/css/figure.css
index 332b65788..7f78579ee 100644
--- a/omero_figure/static/figure/css/figure.css
+++ b/omero_figure/static/figure/css/figure.css
@@ -344,6 +344,9 @@
     .left_vlabels>div {
         margin-bottom: 5px;
     }
+    .right_vlabels>div {
+        margin-bottom: 5px;
+    }
     .label_middle, .label_middle table, .label_middle td {
         height:100%;
         width:10000px;
@@ -362,11 +365,26 @@
         -webkit-transform: rotate(-90deg);
         transform: rotate(-90deg);
     }
+    .right_vlabels{
+        position: absolute;
+        left: 100%;
+        height: 300%;
+        top: -100%;
+        width: 300%;
+        text-align: center;
+        -webkit-transform: rotate(90deg);
+        transform: rotate(90deg);
+    }
     .left_vlabels>div {
         position: absolute;
         bottom:0;
         width:100%;
     }
+    .right_vlabels>div {
+        position: absolute;
+        bottom:0;
+        width:100%;
+    }
 
     .previewIdChange .glyphicon-ok {
         color: #0f0;
diff --git a/src/js/views/panel_view.js b/src/js/views/panel_view.js
index 8a7a1a766..3bbfa4f5f 100644
--- a/src/js/views/panel_view.js
+++ b/src/js/views/panel_view.js
@@ -7,6 +7,7 @@
         template: JST["src/templates/figure_panel_template.html"],
         label_template: JST["src/templates/labels/label_template.html"],
         label_vertical_template: JST["src/templates/labels/label_vertical_template.html"],
+        label_right_vertical_template: JST["src/templates/labels/label_right_vertical_template.html"],
         label_table_template: JST["src/templates/labels/label_table_template.html"],
         scalebar_template: JST["src/templates/scalebar_panel_template.html"],
 
@@ -76,6 +77,7 @@
 
             // container needs to be square for rotation to vertical
             $('.left_vlabels', this.$el).css('width', 3 * h + 'px');
+            $('.right_vlabels', this.$el).css('width', 3 * h + 'px');
 
             // update the img within the panel
             var zoom = this.model.get('zoom'),
@@ -249,8 +251,10 @@
             _.each(positions, function(lbls, p) {
                 var json = {'position':p, 'labels':lbls};
                 if (lbls.length === 0) return;
-                if (p == 'leftvert'|| p == 'rightvert') {  // vertical
+                if (p == 'leftvert') {  // vertical
                     html += self.label_vertical_template(json);
+                } else if (p == 'rightvert') {
+                    html += self.label_right_vertical_template(json);
                 } else if (p == 'left' || p == 'right') {
                     html += self.label_table_template(json);
                 } else {
@@ -261,6 +265,7 @@
 
             // 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');
 
             return this;
         },
diff --git a/src/templates/labels/label_right_vertical_template.html b/src/templates/labels/label_right_vertical_template.html
new file mode 100644
index 000000000..61ed50c16
--- /dev/null
+++ b/src/templates/labels/label_right_vertical_template.html
@@ -0,0 +1,8 @@
+
+<div class="label_layout right_vlabels">
+    <div>
+        <% _.each(labels, function(l, i) { %>
+            <div style='color:#<%= l.color %>; font-size:<%= l.size %>px'><%= l.text %></div>
+        <% }); %>
+    </div>
+</div>

From 06f4bb5ce17119ea23fcee62b0e6f1372d62513b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Fri, 6 Oct 2023 10:18:29 +0200
Subject: [PATCH 4/6] Add right vertical to Figure_to_pdf script

---
 docs/figure_file_format.rst                   |  2 +-
 .../omero/figure_scripts/Figure_To_Pdf.py     | 33 +++++++++++++++----
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/docs/figure_file_format.rst b/docs/figure_file_format.rst
index 3218d2483..e56e5ee9f 100644
--- a/docs/figure_file_format.rst
+++ b/docs/figure_file_format.rst
@@ -105,7 +105,7 @@ Optional settings for each panel::
     ],
 
     // labels on the panel
-    // positions are: top, left, right, leftvert, bottom, topleft, topright, bottomleft, bottomright
+    // positions are: top, left, right, leftvert, rightvert, bottom, topleft, topright, bottomleft, bottomright
     "labels": [
         {
             "text": "GFP-INCENP",
diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index a4652c9ff..1c24f142c 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -1153,7 +1153,7 @@ def draw_labels(self, panel, page):
 
         # group by 'position':
         positions = {'top': [], 'bottom': [], 'left': [],
-                     'leftvert': [], 'right': [],
+                     'leftvert': [], 'right': [], 'rightvert': [],
                      'topleft': [], 'topright': [],
                      'bottomleft': [], 'bottomright': []}
 
@@ -1310,7 +1310,7 @@ def draw_labels(self, panel, page):
             page_color = self.figure_json.get('page_color', 'ffffff').lower()
             label_color = l['color'].lower()
             label_on_page = pos in ('left', 'right', 'top',
-                                    'bottom', 'leftvert')
+                                    'bottom', 'leftvert', 'rightvert')
             if label_on_page:
                 if label_color == '000000' and page_color == '000000':
                     l['color'] = 'ffffff'
@@ -1395,7 +1395,14 @@ def draw_lab(label, lx, ly, align='left'):
                 labels.reverse()
                 for l in labels:
                     lx = lx - l['size'] - spacer
-                    draw_lab(l, lx, ly, align='vertical')
+                    draw_lab(l, lx, ly, align='left-vertical')
+            elif key == 'rightvert':
+                lx = x + width + spacer
+                ly = y + (height/2)
+                labels.reverse()
+                for l in labels:
+                    lx = lx + l['size'] + spacer
+                    draw_lab(l, lx, ly, align='right-vertical')
 
     def draw_scalebar(self, panel, region_width, page):
         """
@@ -2024,7 +2031,7 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
             x = x - para_width
         elif (align == "left"):
             pass
-        elif align == 'vertical':
+        elif align == 'left-vertical':
             # Switch axes
             c.rotate(90)
             px = x
@@ -2033,6 +2040,15 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
             # Align center
             alignment = TA_CENTER
             x = x - (para_width/2)
+        elif align == 'right-vertical':
+            # Switch axes
+            c.rotate(-90)
+            px = x
+            x = y
+            y = -px
+            # Align center
+            alignment = TA_CENTER
+            x = x + (para_width/2)
 
         # set fully opaque background color to avoid transparent text
         c.setFillColorRGB(0, 0, 0, 1)
@@ -2050,8 +2066,10 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
         para.drawOn(c, x, y - h + int(fontsize * 0.25))
 
         # Rotate back again
-        if align == 'vertical':
+        if align == 'left-vertical':
             c.rotate(-90)
+        elif align == 'right-vertical':
+            c.rotate(90)
 
     def draw_scalebar_line(self, x, y, x2, y2, width, rgb):
         """ Adds line to PDF. Overwritten for TIFF below """
@@ -2308,9 +2326,12 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
 
         temp_label = self.draw_temp_label(text, fontsize, rgb)
 
-        if align == "vertical":
+        if align == "left-vertical":
             temp_label = temp_label.rotate(90, expand=True)
             y = y - (temp_label.size[1]/2)
+        elif align == "right-vertical":
+            temp_label = temp_label.rotate(-90, expand=True)
+            y = y - (temp_label.size[1]/2)
         elif align == "center":
             x = x - (temp_label.size[0] / 2)
         elif align == "right":

From c023b75f9af397487b857ca15d0f8951831f2f36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Tue, 10 Oct 2023 08:42:41 +0200
Subject: [PATCH 5/6] Fix bug in alignment

---
 omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index 1c24f142c..aa0adfea5 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -2044,11 +2044,11 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
             # Switch axes
             c.rotate(-90)
             px = x
-            x = y
-            y = -px
+            x = -y
+            y = px
             # Align center
             alignment = TA_CENTER
-            x = x + (para_width/2)
+            x = x - (para_width/2)
 
         # set fully opaque background color to avoid transparent text
         c.setFillColorRGB(0, 0, 0, 1)

From e857ab224e255adeef21c50b9cd19c02ae988eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9my=20Dornier?= <remy.dornier@epfl.ch>
Date: Wed, 18 Oct 2023 08:28:14 +0200
Subject: [PATCH 6/6] Add label left shifting

---
 omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
index aa0adfea5..254a3a476 100644
--- a/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
+++ b/omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
@@ -2332,6 +2332,7 @@ def draw_text(self, text, x, y, fontsize, rgb, align="center"):
         elif align == "right-vertical":
             temp_label = temp_label.rotate(-90, expand=True)
             y = y - (temp_label.size[1]/2)
+            x = x - temp_label.size[0]
         elif align == "center":
             x = x - (temp_label.size[0] / 2)
         elif align == "right":