Skip to content

Commit

Permalink
Don't make zoom highlight elements for karyotype
Browse files Browse the repository at this point in the history 
Also don't allow mousewheel zoom on karyotype image
  • Loading branch information
@simonbrent
simonbrent committed Nov 26, 2014
1 parent 8793782 commit cef552d
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 48 deletions.
53 changes: 29 additions & 24 deletions js/Genoverse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,32 +295,37 @@ var Genoverse = Base.extend({
}
});

this.wrapper = $('<div class="gv-wrapper">').appendTo(this.container);
this.selector = $('<div class="gv-selector gv-crosshair">').appendTo(this.wrapper);
this.selectorControls = $(
'<div class="gv-selector-controls">' +
' <button class="gv-zoom-here">Zoom here</button>' +
' <button class="gv-center">Center</button>' +
' <button class="gv-cancel">Cancel</button>' +
'</div>'
).appendTo(this.selector);

this.zoomInHighlight = $(
'<div class="gv-canvas-zoom gv-i">' +
' <div class="gv-t gv-l gv-h"></div>' +
' <div class="gv-t gv-r gv-h"></div>' +
' <div class="gv-t gv-l gv-v"></div>' +
' <div class="gv-t gv-r gv-v"></div>' +
' <div class="gv-b gv-l gv-h"></div>' +
' <div class="gv-b gv-r gv-h"></div>' +
' <div class="gv-b gv-l gv-v"></div>' +
' <div class="gv-b gv-r gv-v"></div>' +
'</div>'
).appendTo('body');

this.zoomOutHighlight = this.zoomInHighlight.clone().toggleClass('gv-i gv-o').appendTo('body');
this.wrapper = $('<div class="gv-wrapper">').appendTo(this.container);
this.selector = $('<div class="gv-selector gv-crosshair">').appendTo(this.wrapper);

this.selectorControls = this.zoomInHighlight = this.zoomOutHighlight = $();

this.container.addClass('gv-canvas-container').width(width);

if (!this.isStatic) {
this.selectorControls = $(
'<div class="gv-selector-controls">' +
' <button class="gv-zoom-here">Zoom here</button>' +
' <button class="gv-center">Center</button>' +
' <button class="gv-cancel">Cancel</button>' +
'</div>'
).appendTo(this.selector);

this.zoomInHighlight = $(
'<div class="gv-canvas-zoom gv-i">' +
' <div class="gv-t gv-l gv-h"></div>' +
' <div class="gv-t gv-r gv-h"></div>' +
' <div class="gv-t gv-l gv-v"></div>' +
' <div class="gv-t gv-r gv-v"></div>' +
' <div class="gv-b gv-l gv-h"></div>' +
' <div class="gv-b gv-r gv-h"></div>' +
' <div class="gv-b gv-l gv-v"></div>' +
' <div class="gv-b gv-r gv-v"></div>' +
'</div>'
).appendTo('body');

this.zoomOutHighlight = this.zoomInHighlight.clone().toggleClass('gv-i gv-o').appendTo('body');
}
},

addUserEventHandlers: function () {
Expand Down
53 changes: 29 additions & 24 deletions js/plugins/karyotype.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@ Genoverse.Plugins.karyotype = function () {
url : false,
allData : true,
unsortable : true,

click: function (e) {
var offset = this.container.parent().offset().left;
var x = e.pageX - offset;
var f = this.featurePositions.search({ x: x, y: 1, w: 1, h: 1 })[0];

if (f) {
if (e.type === 'mouseup') {
if (!this.browser.parent.isStatic) {
Expand All @@ -37,50 +37,55 @@ Genoverse.Plugins.karyotype = function () {
} else {
if (this.hoverFeature !== f) {
this.container.tipsy('hide');

if (f.label) {
var left = offset + f.position[this.scale].start + f.position[this.scale].width / 2;

this.container.attr('title', f.label[0]).tipsy({ trigger: 'manual', container: 'body' }).tipsy('show').data('tipsy').$tip.css('left', function () { return left - $(this).width() / 2; });
}

this.hoverFeature = f;
}
}
}
},

addUserEventHandlers: function () {
var track = this;

this.base();

this.container.on({
mousemove : function (e) { track.click(e); },
mouseout : function (e) {
mousemove : function (e) { track.click(e); },
mouseout : function (e) {
if (track.browser.viewPoint.is(e.relatedTarget) || track.browser.viewPoint.find(e.relatedTarget).length) {
return true;
}

track.container.tipsy('hide');
track.hoverFeature = false;
}
}, '.gv-image-container');

// Don't allow zooming in and out on the karyotype image
this.container.on('mousewheel', '.gv-image-container, .gv-selector', function (e) {
e.stopPropagation();
});
}
})
],

afterInit: function () {
this.track = this.tracks[0];

this.updatePosition();
this.viewPoint.fadeIn();
},

afterAddDomElements: function () {
var karyotype = this;
var parent = this.parent;

this.labelContainer.remove();
this.labelContainer = $();

Expand All @@ -90,25 +95,25 @@ Genoverse.Plugins.karyotype = function () {
},
mouseout: function (e) {
var el = $(e.relatedTarget);

if (karyotype.viewPoint.is(el) || karyotype.viewPoint.find(el).length || (el[0].nodeName === 'IMG' && el.parent().is(karyotype.track.prop('imgContainers')[0]))) {
return true;
}

karyotype.track.prop('container').tipsy('hide');
karyotype.track.prop('hoverFeature', false);
}
});

if (!parent.isStatic) {
function updateLocation(e, ui) {
var scale = karyotype.chromosomeSize / karyotype.width;
var start = Math.floor(ui.position.left * scale);
var end = e.type === 'dragstop' ? start + parent.length - 1 : Math.floor(ui.helper.width() * scale) + start;

parent.moveTo(start, end, true, e.type === 'dragstop');
}

this.viewPoint.draggable({
axis : 'x',
containment : 'parent',
Expand All @@ -118,7 +123,7 @@ Genoverse.Plugins.karyotype = function () {
stop : updateLocation,
resize : function (e, ui) {
ui.element.css('left', Math.max(0, ui.position.left));

if (ui.position.left > 0) {
ui.element.width(Math.min(ui.size.width, ui.element.parent().width() - ui.position.left));
} else {
Expand All @@ -128,11 +133,11 @@ Genoverse.Plugins.karyotype = function () {
});
}
},

updatePosition: function () {
var left = this.width * this.parent.start / this.chromosomeSize;
var width = (this.width * this.parent.end / this.chromosomeSize) - left;

this.viewPoint.css({ left: left, width: width });
}
});
Expand All @@ -143,7 +148,7 @@ Genoverse.Plugins.karyotype = function () {
}).prependTo(this.labelContainer);
}
},

afterSetRange: function () {
if (this.karyotype) {
this.karyotype.updatePosition();
Expand Down

0 comments on commit cef552d

Please sign in to comment.