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

Jump to bottom

Xywh width height button #193

Merged
merged 9 commits into from
Mar 28, 2017
Merged

Xywh width height button #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c62313e
Add button for controlling aspect ratio and manage callback
Nov 30, 2016
383b872
Manage Button color and add readonly box to highlight the link button…
Nov 30, 2016
b81be85
Make changes based on Will's suggestions
Jan 23, 2017
5761db0
Merge remote-tracking branch 'origin/master' into xywh_width_height_b…
Jan 24, 2017
20befb7
remove complied figure.js and templates.js
Jan 25, 2017
9c1edbd
Remove whitespace, ===true, and hide glyphicon-ok-sign by default whe…
Jan 25, 2017
e0a40a1
commit based on feedback
Jan 27, 2017
1a3939b
Clean up and make button names fit to common naming policy
Jan 27, 2017
c263aeb
Fix tool tip typo
Feb 6, 2017
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
9 changes: 9 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 @@ -903,3 +903,12 @@
max-height: 15px;
}

.aspectRatioSelected .okSign {
display: inline-block
}
.aspectRatioSelected {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}
.okSign {
display: none
}
40 changes: 38 additions & 2 deletions src/js/views/right_panel_view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -700,6 +700,7 @@
"click .clear_dpi": "clear_dpi",
"blur .xywh_form input": "handle_xywh",
"keyup .xywh_form input": "handle_xywh",
"click .setAspectRatio": "lockAspectRatio"
},

handle_xywh: function(event) {
Expand All @@ -720,6 +721,7 @@
// Avoid re-rendering and losing focus everytime there is a Blur event
// set(attr, value) will not cause render()
this.ignoreChange = true;
var aspectRatioStatus = false;
this.models.forEach(function(m) {
if (attr === 'x' || attr ==='y') {
var old = m.get(attr);
Expand Down Expand Up @@ -747,14 +749,43 @@
this.render();
return;
}
m.set(attr, value);

//Check aspect ratio button state
//If selected, check attribute and value and then recalculate other attribute value
//Set both values parallely
var newWidthHeight = {};
newWidthHeight[attr] = value;

if ($(".setAspectRatio", this.$el).hasClass("aspectRatioSelected")) {
aspectRatioStatus = true;
var widthCur = m.get('width');
var heightCur = m.get('height');
var aspRatio = widthCur/heightCur;

if (attr === 'width'){
var heightNew = value/aspRatio;
newWidthHeight['height'] = heightNew;
}
else {
var widthNew = value * aspRatio;
newWidthHeight['width'] = widthNew;
}
this.ignoreChange = false;
}
m.save(newWidthHeight);
}
}.bind(this));
// Timout for ignoreChange
// Only reset this AFTER render() is called
setTimeout(function(){
this.ignoreChange = false;
}, 50);
// keep locked status of the aspect ratio button the same,
// when the focus shifts because of a blur event
if (aspectRatioStatus) {
$(".setAspectRatio", this.$el).addClass("aspectRatioSelected");
}
}.bind(this), 50);

},

set_dpi: function(event) {
Expand All @@ -777,6 +808,11 @@
$("#setIdModal .imgId").val("").focus();
},

lockAspectRatio: function(event) {
event.preventDefault();
$(".setAspectRatio", this.$el).toggleClass("aspectRatioSelected");
},

// just update x,y,w,h by rendering ONE template
drag_resize: function(xywh) {
$("#xywh_table").remove();
Expand Down
11 changes: 8 additions & 3 deletions src/templates/xywh_panel_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

</td></tr>
<tr><td>
<form class="form-horizontal xywh_form" role="form">
<form class="form-horizontal xywh_form" role="form" style="position:relative">
<div class="form-group">
<label class="col-sm-2 control-label">X</label>
<div class="col-sm-4">
Expand All @@ -35,16 +35,21 @@
<input type="number" name="width" min="0" class="form-control input-sm" value="<%= width %>">
</div>
</div>
<div class="form-group" style="margin-bottom: -15px;">
<div class="form-group" style="margin-bottom: -15px">
<label class="col-sm-2 control-label">Y</label>
<div class="col-sm-4">
<input type="number" name="y" min="0" class="form-control input-sm" value="<%= y %>">
</div>
<label class="col-sm-2 control-label">Height</label>
<label class="col-sm-2 control-label">
Height
</label>
<div class="col-sm-4">
<input type="number" name="height" min="0" class="form-control input-sm" value="<%= height %>">
</div>
</div>
<button type="button" class="btn btn-link setAspectRatio"
style="position:absolute; left:195px; top:25px; padding:3px; width:23px; height:24px; outline:none !important" title="Maintain aspect ratio"><span class="glyphicon glyphicon-link"></span><span class="glyphicon glyphicon-ok-sign okSign" style="left:-28px; top:-7px; font-size:10px; color:green"></span></button>
<div style="position:absolute;left: 220px;top: 12px;border: solid #bbb 1px;width: 12px;height: 48px;border-right: 0px;"></div>
</form>
</td></tr>
</tbody>
Expand Down