Skip to content
This repository has been archived by the owner on Aug 26, 2019. It is now read-only.

Commit

Permalink
Working #256/Fixed #255: Opacity/ledger lines
Browse files Browse the repository at this point in the history 
Ledger lines now disappear when you press “h” hotkey. Temporarily disabled the opacity sliders in order to move on to other things but we will revisit the issue. Additionally updated the shift-clik alerts since they are able to shift click at least 2 neumes.
  • Loading branch information
@zoemcl
zoemcl committed Aug 3, 2017
1 parent 34b4da5 commit a80f20d
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 75 deletions.
20 changes: 3 additions & 17 deletions src/nn/squarenote/squarenoteinteraction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ Toe.View.SquareNoteInteraction.prototype.handleEdit = function(e) {
var e = aObject.e;
if(e && e.shiftKey){
gui.rendEng.canvas.deactivateAll();
gui.showAlert("Cannot use shift-click to select neumes. Drag select instead.");
gui.showAlert("Cannot use shift-click for more than two neumes. Drag select instead.");
}
else{
gui.handleEventObjectSelected(aObject);
Expand All @@ -112,7 +112,7 @@ Toe.View.SquareNoteInteraction.prototype.handleEdit = function(e) {
var e = aObject.e;
if(e && e.shiftKey){
gui.rendEng.canvas.deactivateAll();
gui.showAlert("Cannot use shift-click to select neumes. Drag select instead.");
gui.showAlert("Cannot use shift-click for more than two neumes. Drag select instead.");
}
else{
gui.handleEventSelectionCreated(aObject);
Expand Down Expand Up @@ -3122,22 +3122,8 @@ Toe.View.SquareNoteInteraction.prototype.handleObjectsMoved = function(delta_x,
}

Toe.View.SquareNoteInteraction.prototype.handleEventObjectModified = function(gui, aObject) {
// Check if aObject is a group
var objects = aObject.target.objects;
var lenObjects = objects.length;
var ctr = 0;
$.each(objects, function(idx, obj){
if(!(obj.eleRef instanceof Toe.Model.SquareNoteSystem)){
ctr++;
}
});

if (lenObjects == ctr){
gui.rendEng.canvas.deactivateAll();
gui.showAlert("Cannot use shift-click to select neumes. Drag select instead.");
}

else if (aObject.target.hasOwnProperty('eleRef')) {
if (aObject.target.hasOwnProperty('eleRef')) {
switch (aObject.target.eleRef.constructor) {
// Switch on element reference type.
case Toe.Model.SquareNoteSystem:
Expand Down
124 changes: 66 additions & 58 deletions src/views/gui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,9 @@ Toe.View.GUI = function(apiprefix, meipath, rendEng, page, guiToggles) {

this.setupNavBar();

var parentDivId = "#gui-sidebar";
this.setupSideBar(parentDivId, toggles);
//TODO: Implement glyoh opacity and backround image opacity sliders
// var parentDivId = "#gui-sidebar";
// this.setupSideBar(parentDivId, toggles);

this.bindHotkeys();
}
Expand Down Expand Up @@ -122,61 +123,62 @@ Toe.View.GUI.prototype.setupNavBar = function() {
}
}

Toe.View.GUI.prototype.setupSideBar = function(parentDivId, toggles) {
// cache instance variable
var gui = this;
var elements = gui.rendEng.canvas.getObjects();

// create container for appearance sliders
if ($("#sidebar-app").length == 0) {
$(parentDivId).prepend('<span id="sidebar-app"><li class="nav-header">Appearance</li>\n</span>');

// create background image opacity slider
if (toggles.sldr_bgImgOpacity) {
$("#sidebar-app").append('<li>\n<label for="sldr_bgImgOpacity"><b>Image Opacity</b>:</label>\n' +
'<input id="sldr_bgImgOpacity" style="width: 95%;" type="range" name="bgImgOpacity" ' +
'min="0.0" max="1.0" step="0.05" value="' + toggles.initBgImgOpacity + '" />\n</li>');

$("#sldr_bgImgOpacity").bind("change", function() {
if(elements[0]._element){
elements[0].opacity = $(this).val();
}
gui.rendEng.repaint();
});
}

// create glyph opacity slider
if (toggles.sldr_glyphOpacity) {
$("#sidebar-app").append('<li>\n<label for="sldr_glyphOpacity"><b>Glyph Opacity</b>:</label>\n' +
'<input id="sldr_glyphOpacity" style="width: 95%;" type="range" name="glyphOpacity" ' +
'min="0.0" max="1.0" step="0.05" value="' + toggles.initGlyphOpacity + '" />\n</li>');

$("#sldr_glyphOpacity").bind("change", function() {
var opacity = $(this).val();
gui.rendEng.canvas.forEachObject(function(obj) {
if(obj.eleRef){
obj.setOpacity(opacity);
}
});

gui.rendEng.repaint();
});
}

// TODO: finish global scale
// this is the beginning of the implementation of changing he scale. Uncomment to continue development.
// $("#sidebar-app").append('<li>\n<label for="sldr_elementScale"><b>Element Scale (Experimental)</b>:</label>\n' +
// '<input id="sldr_elementScale" style="width: 95%;" type="range" name="elementScale" ' +
// 'min="0.0" max="1.0" step="0.02" value="' + gui.rendEng.getGlobalScale() + '" />\n</li>');
//
// $("#sldr_elementScale").bind("change", function() {
// var scale = $(this).val();
// gui.rendEng.setGlobalScale(scale);
//
// gui.rendEng.repaint();
// });
}
}
// //TODO: GLyoh and BkrdImage opacity sliders
// Toe.View.GUI.prototype.setupSideBar = function(parentDivId, toggles) {
// // cache instance variable
// var gui = this;
// var elements = gui.rendEng.canvas.getObjects();
//
// // create container for appearance sliders
// if ($("#sidebar-app").length == 0) {
// $(parentDivId).prepend('<span id="sidebar-app"><li class="nav-header">Appearance</li>\n</span>');
//
// // create background image opacity slider
// if (toggles.sldr_bgImgOpacity) {
// $("#sidebar-app").append('<li>\n<label for="sldr_bgImgOpacity"><b>Image Opacity</b>:</label>\n' +
// '<input id="sldr_bgImgOpacity" style="width: 95%;" type="range" name="bgImgOpacity" ' +
// 'min="0.0" max="1.0" step="0.05" value="' + toggles.initBgImgOpacity + '" />\n</li>');
//
// $("#sldr_bgImgOpacity").bind("change", function() {
// if(elements[0]._element){
// elements[0].opacity = $(this).val();
// }
// gui.rendEng.repaint();
// });
// }
//
// // create glyph opacity slider
// if (toggles.sldr_glyphOpacity) {
// $("#sidebar-app").append('<li>\n<label for="sldr_glyphOpacity"><b>Glyph Opacity</b>:</label>\n' +
// '<input id="sldr_glyphOpacity" style="width: 95%;" type="range" name="glyphOpacity" ' +
// 'min="0.0" max="1.0" step="0.05" value="' + toggles.initGlyphOpacity + '" />\n</li>');
//
// $("#sldr_glyphOpacity").bind("change", function() {
// var opacity = $(this).val();
// gui.rendEng.canvas.forEachObject(function(obj) {
// if(obj.eleRef){
// obj.setOpacity(opacity);
// }
// });
//
// gui.rendEng.repaint();
// });
// }
//
// //TODO: finish global scale
// //this is the beginning of the implementation of changing he scale. Uncomment to continue development.
// // $("#sidebar-app").append('<li>\n<label for="sldr_elementScale"><b>Element Scale (Experimental)</b>:</label>\n' +
// // '<input id="sldr_elementScale" style="width: 95%;" type="range" name="elementScale" ' +
// // 'min="0.0" max="1.0" step="0.02" value="' + gui.rendEng.getGlobalScale() + '" />\n</li>');
// //
// // $("#sldr_elementScale").bind("change", function() {
// // var scale = $(this).val();
// // gui.rendEng.setGlobalScale(scale);
// //
// // gui.rendEng.repaint();
// // });
// }
//}

Toe.View.GUI.prototype.bindHotkeys = function() {
// edit mode hotkey
Expand All @@ -195,6 +197,9 @@ Toe.View.GUI.prototype.bindHotkeys = function() {
Mousetrap.bind(['h'], $.proxy(function() {
this.rendEng.canvas.forEachObject(function(obj) {
if(obj.eleRef){
if (obj.eleRef.view.ledgerLines) {
obj.eleRef.view.ledgerLines.setOpacity(0);
}
obj.setOpacity(0);
}
});
Expand All @@ -204,7 +209,10 @@ Toe.View.GUI.prototype.bindHotkeys = function() {

Mousetrap.bind(['h'], $.proxy(function() {
this.rendEng.canvas.forEachObject(function(obj) {
if(obj.eleRef){
if(obj.eleRef) {
if (obj.eleRef.view.ledgerLines) {
obj.eleRef.view.ledgerLines.setOpacity(1);
}
obj.setOpacity(1);
}
});
Expand Down

0 comments on commit a80f20d

Please sign in to comment.