Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Right vertical #519

Merged
merged 6 commits into from
Oct 31, 2023
Merged

Right vertical #519

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e86749e
Add right vertical choice in drop-down list
Rdornier Oct 2, 2023
b170e22
Update bounding box size + add rightvert to the panel view
Rdornier Oct 2, 2023
85bd8c3
Add css labels
Rdornier Oct 2, 2023
06f4bb5
Add right vertical to Figure_to_pdf script
Rdornier Oct 6, 2023
c023b75
Fix bug in alignment
Rdornier Oct 10, 2023
e857ab2
Add label left shifting
Rdornier Oct 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/figure_file_format.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
33 changes: 27 additions & 6 deletions omero_figure/scripts/omero/figure_scripts/Figure_To_Pdf.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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': []}

Expand Down Expand Up @@ -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'
Expand Down Expand Up @@ -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):
"""
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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 """
Expand Down Expand Up @@ -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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you also need x = x - temp_label.size[0] here to shift the labels a bit to the left:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK !

elif align == "center":
x = x - (temp_label.size[0] / 2)
elif align == "right":
Expand Down
18 changes: 18 additions & 0 deletions omero_figure/static/figure/css/figure.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
12 changes: 11 additions & 1 deletion src/js/models/panel_model.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
9 changes: 7 additions & 2 deletions src/js/views/panel_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"],

Expand Down Expand Up @@ -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'),
Expand Down Expand Up @@ -171,7 +173,7 @@
self = this,
positions = {
'top':[], 'bottom':[], 'left':[], 'right':[],
'leftvert':[],
'leftvert':[],'rightvert':[],
'topleft':[], 'topright':[],
'bottomleft':[], 'bottomright':[]
};
Expand All @@ -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';
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
},
Expand Down
2 changes: 1 addition & 1 deletion src/js/views/right_panel_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 8 additions & 0 deletions src/templates/labels/label_right_vertical_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 6 additions & 1 deletion src/templates/labels_form_inner_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down