Merge pull request #519 from Rdornier/right-vertical

Right vertical

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",

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,13 @@ 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)
+            x = x - temp_label.size[0]
         elif align == "center":
             x = x - (temp_label.size[0] / 2)
         elif align == "right":

omero_figure/static/figure/css/figure.css

@@ -349,6 +349,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;
@@ -367,11 +370,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;

src/js/models/panel_model.js

@@ -879,7 +879,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() {

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'),
@@ -171,7 +173,7 @@
                 self = this,
                 positions = {
                     'top':[], 'bottom':[], 'left':[], 'right':[],
-                    'leftvert':[],
+                    'leftvert':[],'rightvert':[],
                     'topleft':[], 'topright':[],
                     'bottomleft':[], 'bottomright':[]
                 };
@@ -182,7 +184,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';
@@ -251,6 +253,8 @@
                 if (lbls.length === 0) return;
                 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;
         },

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

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>

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>