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..254a3a476 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,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": 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/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..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'), @@ -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; }, 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/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 @@ + +
+
+ <% _.each(labels, function(l, i) { %> +
<%= l.text %>
+ <% }); %> +
+
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 @@