Skip to content

Commit

Permalink
proper class declarations
Browse files Browse the repository at this point in the history
  • Loading branch information
ihh committed Jun 28, 2016
1 parent d3d79c5 commit 1d96ce6
Show file tree
Hide file tree
Showing 12 changed files with 328 additions and 276 deletions.
13 changes: 13 additions & 0 deletions css/main.css
Expand Up @@ -11,11 +11,24 @@
border-color: #f8f8f8;
}

.rotunda_view {
position: relative;
}

.rotunda_tracklist {
margin-left: 1px;
z-index: 1;
position: absolute;
top: 0;
}

.rotunda_svg_wrapper {
border-style: solid;
border-width: 0px 1px 1px 1px;
border-color: #f8f8f8;
overflow-y: scroll;
position: absolute;
top: 0;
}

.rotunda_svg {
Expand Down
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -11,7 +11,7 @@
</div>

<!-- load Rotunda.js explicitly for debugging -->
<script type="text/javascript" src="src/Rotunda/Rotunda.js"></script>
<!-- script type="text/javascript" src="src/Rotunda/Rotunda.js"></script -->

<script type="text/javascript" src="init.js"></script>
</body>
Expand Down
65 changes: 0 additions & 65 deletions src/JBrowse/View/Animation.js

This file was deleted.

62 changes: 45 additions & 17 deletions src/Rotunda/Rotunda.js
Expand Up @@ -2,6 +2,7 @@ define([
'dojo/_base/declare',
'dojo/_base/lang',
'dojo/query',
'dojo/dnd/Source',
'd3/d3',
'Rotunda/util',
'Rotunda/colors',
Expand All @@ -12,6 +13,7 @@ define([
declare,
lang,
query,
dndSource,
libd3,
util,
colors,
Expand Down Expand Up @@ -68,20 +70,32 @@ return declare( null, {
// initialize view coords
this.scale = this.minScale
this.rotate = 0

this.colors = colors

// build view
d3.select("#"+this.id)
.attr("class", "rotunda_container")

this.createNavBox (query("#"+this.id)[0])

this.svg_wrapper = d3.select("#"+this.id)
// slightly funky mixture of dojo/d3 here...
// use dojo to create navbox and track list
var dojoContainer = query("#"+this.id)
this.container = dojoContainer[0]

this.container.setAttribute("class", "rotunda_container")
this.container.setAttribute("style", "width: " + this.width + "px")

this.createNavBox (this.container)

this.viewContainer = dojo.create( 'div', { id: this.id+'_view',
class: 'rotunda_view' },
this.container );

// use d3 to create the SVG
var d3view = d3.select("#"+this.id+"_view") // d3 selection
this.svg_wrapper = d3view
.append("div")
.attr("id", this.id+"_svg_wrapper")
.attr("class", "rotunda_svg_wrapper")
.attr("style", "height: " + this.height + "px")

this.dragBehavior = d3.behavior.drag()
.on("dragstart", function(d,i) {
rot.dragDeltaRadians = 0
Expand All @@ -102,7 +116,11 @@ return declare( null, {
rot.rotateTo (rot.rotate + rot.dragDeltaRadians)
rot.dragging = false
})

// create track list
// this.createTrackList (this.viewContainer)

// draw
this.draw()
},

Expand All @@ -123,7 +141,7 @@ return declare( null, {
// createNavBox mostly lifted from JBrowse Browser.js
createNavBox: function( parent ) {
var align = 'left';
var navbox = dojo.create( 'div', { id: parent.id+'_navbox',
var navbox = dojo.create( 'div', { id: this.id+'_navbox',
class: 'rotunda_navbox',
style: { 'text-align': align } },
parent );
Expand Down Expand Up @@ -220,16 +238,24 @@ return declare( null, {
this.rotate = newRads
this.redraw()
},

createTrackList: function (parent) {
var trackList = dojo.create( 'div', { id: this.id+'_tracklist',
class: 'rotunda_tracklist' },
parent )
var trackListDnd = new dndSource (trackList)
trackListDnd.insertNodes (false, ['a','b','c'])
},

slide: function(distance) {
var rotunda = this
if (this.animation) return;
var deltaRads = 2 * distance * Math.atan (.5 * this.width / (this.radius * this.scale))
var newRads = this.rotate + deltaRads
new Slider (newRads,
rotunda,
new Slider (rotunda,
function() { rotunda.rotateTo(newRads) },
700)
700,
newRads)
},

zoomIn: function(e, zoomLoc, steps) {
Expand All @@ -255,20 +281,20 @@ return declare( null, {
zoomTo: function (newScale) {
var rot = this
if (newScale != rot.scale)
new Zoomer (newScale,
rot,
new Zoomer (rot,
function() {
rot.scale = newScale
rot.calculateTrackSizes()
rot.redraw()
},
700)
700,
newScale)
},

gTransformRotate: function (degrees) {
this.g.attr("transform",
"translate(" + this.width/2 + "," + this.radius*this.scale + ") rotate(" + degrees + ")")
d3.selectAll(".rotundaLabel")
this.labels
.attr("transform", "rotate(" + (-degrees) + ")")
},

Expand All @@ -281,7 +307,7 @@ return declare( null, {
}
this.g.attr("transform",
"scale(" + xfactor + "," + yfactor + ") translate(" + (this.width/2) / factor + "," + (this.radius * this.scale + yShift) + ")")
d3.selectAll(".rotundaLabel")
this.labels
.attr("transform", "scale(" + (1/xfactor) + "," + (1/yfactor) + ")")
},

Expand Down Expand Up @@ -329,6 +355,8 @@ return declare( null, {
this.tracks.forEach (function (track, trackNum) {
rot.drawTrack (track, trackNum, amin, amax)
})

this.labels = d3.selectAll(".rotundaLabel")
},

drawTrack: function (track, trackNum, minAngle, maxAngle) {
Expand Down
67 changes: 67 additions & 0 deletions src/Rotunda/View/Animation.js
@@ -0,0 +1,67 @@
define(['dojo/_base/declare'
],
function(declare) {
/**
* @class
*/
return declare (null, {
constructor: function(subject, callback, time) {
//subject: what's being animated
//callback: function to call at the end of the animation
//time: time for the animation to run

//don't want a zoom and a slide going on at the same time
if ("animation" in subject) subject.animation.stop();
this.index = 0;
this.time = time;
this.subject = subject;
this.callback = callback;

var myAnim = this;
this.animFunction = function() { myAnim.animate(); };
// number of milliseconds between frames (e.g., 33ms at 30fps)
this.animID = setTimeout(this.animFunction, 33);

this.frames = 0;

subject.animation = this;
},

animate: function() {
if (this.finished) {
this.stop();
return;
}

// number of milliseconds between frames (e.g., 33ms at 30fps)
var nextTimeout = 33;
var elapsed = 0;
if (!("startTime" in this)) {
this.startTime = (new Date()).getTime();
} else {
elapsed = (new Date()).getTime() - this.startTime;
//set the next timeout to be the average of the
//frame times we've achieved so far.
//The goal is to avoid overloading the browser
//and getting a jerky animation.
nextTimeout = Math.max(33, elapsed / this.frames);
}

if (elapsed < this.time) {
this.step(elapsed / this.time);
this.frames++;
} else {
this.step(1);
this.finished = true;
//console.log("final timeout: " + nextTimeout);
}
this.animID = setTimeout(this.animFunction, nextTimeout);
},

stop: function() {
clearTimeout(this.animID);
delete this.subject.animation;
this.callback.call(this.subject,this);
}
})
});
30 changes: 15 additions & 15 deletions src/Rotunda/View/Animation/Slider.js
@@ -1,20 +1,20 @@
define(['JBrowse/View/Animation'],
function(Animation) {
define(['dojo/_base/declare',
'Rotunda/View/Animation'],
function(declare,
Animation) {

/**
* @class
*/
function Slider(radians, rotunda, callback, time) {
Animation.call(this, rotunda, callback, time)
this.rotunda = rotunda
this.degrees = (radians - rotunda.rotate) * 180 / Math.PI
}
return declare (Animation,
{
constructor: function(rotunda, callback, time, radians) {
this.rotunda = rotunda
this.degrees = (radians - rotunda.rotate) * 180 / Math.PI
},

Slider.prototype = new Animation();

Slider.prototype.step = function(pos) {
this.rotunda.gTransformRotate (this.degrees * pos)
};

return Slider;
});
step: function(pos) {
this.rotunda.gTransformRotate (this.degrees * pos)
}
})
});

0 comments on commit 1d96ce6

Please sign in to comment.