mirror/pcottle.learnGitBranching
1
0
Fork 0
mirror of https://github.com/pcottle/learnGitBranching.git synced 2025-06-28 17:00:04 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[Origin] Makes two visualizations now and links the objects and small graphical updates

Browse source
This commit is contained in:
Peter Cottle 2013-05-26 16:34:54 -07:00
parent 5e151238c9
commit 91f0e13132
5 changed files with 180 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

186
build/bundle.js
View file

@ -3155,12 +3155,13 @@ var GRAPHICS = {
defaultEasing: 'easeInOut',
defaultAnimationTime: 400,
//rectFill: '#FF3A3A',
rectFill: 'hsb(0.8816909813322127,0.7,1)',
headRectFill: '#2831FF',
rectStroke: '#FFF',
rectStrokeWidth: '3',
originDash: '- ',
multiBranchY: 20,
upstreamHeadOpacity: 0.5,
upstreamNoneOpacity: 0.2,
@ -15850,6 +15851,8 @@ var VisNode = VisBase.extend({
var pos = this.getScreenCoords();
var textPos = this.getTextScreenCoords();
var opacity = this.getOpacity();
var dashArray = (this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
return {
circle: {
@ -15859,6 +15862,7 @@ var VisNode = VisBase.extend({
r: this.getRadius(),
fill: this.getFill(),
'stroke-width': this.get('stroke-width'),
'stroke-dasharray': dashArray,
stroke: this.get('stroke')
},
text: {
@ -15903,19 +15907,16 @@ var VisNode = VisBase.extend({
this.animateToAttr(snapShot[this.getID()], speed, easing);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.get('circle').attr(attr.circle);
this.get('text').attr(attr.text);
return;
}
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'circle'];
this.setAttrBase(keys, attr, instant, speed, easing);
},
animateToAttr: function(attr, speed, easing) {
VisBase.prototype.animateToAttr.apply(this, arguments);
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.get('circle').stop().animate(attr.circle, s, e);
this.get('text').stop().animate(attr.text, s, e);
if (easing == 'bounce' &&
attr.circle && attr.circle.cx !== undefined &&
attr.text && attr.text.x !== undefined ) {
@ -16192,6 +16193,50 @@ var VisBase = Backbone.Model.extend({
}, this);
},
getNonAnimateKeys: function() {
return [
'stroke-dasharray'
];
},
getIsInOrigin: function() {
if (!this.get('gitEngine')) {
return false;
}
return this.get('gitEngine').isOrigin();
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
},
setAttrBase: function(keys, attr, instant, speed, easing) {
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
// some keys dont support animating too, so set those instantly here
_.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
}
}, this);
}
if (attr.css) {
$(this.get(key).node).css(attr.css);
}
}, this);
},
animateAttrKeys: function(keys, attrObj, speed, easing) {
// either we animate a specific subset of keys or all
// possible things we could animate
@ -16527,7 +16572,7 @@ var VisBranch = VisBase.extend({
var name = this.get('branch').getName();
var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
var after = (selected) ? '*' : '';
var after = (selected && !this.getIsInOrigin()) ? '*' : '';
return name + after;
},
@ -16665,7 +16710,8 @@ var VisBranch = VisBase.extend({
var rectSize = this.getRectSize();
var arrowPath = this.getArrowPath();
var dashArray = (this.getIsRemote()) ? '--' : '';
var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
var cursorStyle = (this.shouldDisableClick()) ?
'auto' :
'pointer';
@ -16687,7 +16733,7 @@ var VisBranch = VisBase.extend({
opacity: nonTextOpacity,
fill: this.getFill(),
stroke: this.get('stroke'),
'stroke-dasharray': dashArray,
//'stroke-dasharray': dashArray,
'stroke-width': this.get('stroke-width')
},
arrow: {
@ -16713,26 +16759,7 @@ var VisBranch = VisBase.extend({
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'rect', 'arrow'];
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
}
$(this.get(key).node).css(attr.css);
}, this);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
this.setAttrBase(keys, attr, instant, speed, easing);
}
});
@ -27463,12 +27490,13 @@ var GRAPHICS = {
defaultEasing: 'easeInOut',
defaultAnimationTime: 400,
//rectFill: '#FF3A3A',
rectFill: 'hsb(0.8816909813322127,0.7,1)',
headRectFill: '#2831FF',
rectStroke: '#FFF',
rectStrokeWidth: '3',
originDash: '- ',
multiBranchY: 20,
upstreamHeadOpacity: 0.5,
upstreamNoneOpacity: 0.2,
@ -31783,6 +31811,50 @@ var VisBase = Backbone.Model.extend({
}, this);
},
getNonAnimateKeys: function() {
return [
'stroke-dasharray'
];
},
getIsInOrigin: function() {
if (!this.get('gitEngine')) {
return false;
}
return this.get('gitEngine').isOrigin();
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
},
setAttrBase: function(keys, attr, instant, speed, easing) {
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
// some keys dont support animating too, so set those instantly here
_.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
}
}, this);
}
if (attr.css) {
$(this.get(key).node).css(attr.css);
}
}, this);
},
animateAttrKeys: function(keys, attrObj, speed, easing) {
// either we animate a specific subset of keys or all
// possible things we could animate
@ -32119,7 +32191,7 @@ var VisBranch = VisBase.extend({
var name = this.get('branch').getName();
var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
var after = (selected) ? '*' : '';
var after = (selected && !this.getIsInOrigin()) ? '*' : '';
return name + after;
},
@ -32257,7 +32329,8 @@ var VisBranch = VisBase.extend({
var rectSize = this.getRectSize();
var arrowPath = this.getArrowPath();
var dashArray = (this.getIsRemote()) ? '--' : '';
var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
var cursorStyle = (this.shouldDisableClick()) ?
'auto' :
'pointer';
@ -32279,7 +32352,7 @@ var VisBranch = VisBase.extend({
opacity: nonTextOpacity,
fill: this.getFill(),
stroke: this.get('stroke'),
'stroke-dasharray': dashArray,
//'stroke-dasharray': dashArray,
'stroke-width': this.get('stroke-width')
},
arrow: {
@ -32305,26 +32378,7 @@ var VisBranch = VisBase.extend({
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'rect', 'arrow'];
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
}
$(this.get(key).node).css(attr.css);
}, this);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
this.setAttrBase(keys, attr, instant, speed, easing);
}
});
@ -32638,6 +32692,8 @@ var VisNode = VisBase.extend({
var pos = this.getScreenCoords();
var textPos = this.getTextScreenCoords();
var opacity = this.getOpacity();
var dashArray = (this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
return {
circle: {
@ -32647,6 +32703,7 @@ var VisNode = VisBase.extend({
r: this.getRadius(),
fill: this.getFill(),
'stroke-width': this.get('stroke-width'),
'stroke-dasharray': dashArray,
stroke: this.get('stroke')
},
text: {
@ -32691,19 +32748,16 @@ var VisNode = VisBase.extend({
this.animateToAttr(snapShot[this.getID()], speed, easing);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.get('circle').attr(attr.circle);
this.get('text').attr(attr.text);
return;
}
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'circle'];
this.setAttrBase(keys, attr, instant, speed, easing);
},
animateToAttr: function(attr, speed, easing) {
VisBase.prototype.animateToAttr.apply(this, arguments);
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.get('circle').stop().animate(attr.circle, s, e);
this.get('text').stop().animate(attr.text, s, e);
if (easing == 'bounce' &&
attr.circle && attr.circle.cx !== undefined &&
attr.text && attr.text.x !== undefined ) {

3
src/js/util/constants.js
View file

@ -25,12 +25,13 @@ var GRAPHICS = {
defaultEasing: 'easeInOut',
defaultAnimationTime: 400,
//rectFill: '#FF3A3A',
rectFill: 'hsb(0.8816909813322127,0.7,1)',
headRectFill: '#2831FF',
rectStroke: '#FFF',
rectStrokeWidth: '3',
originDash: '- ',
multiBranchY: 20,
upstreamHeadOpacity: 0.5,
upstreamNoneOpacity: 0.2,

44
src/js/visuals/visBase.js
View file

@ -10,6 +10,50 @@ var VisBase = Backbone.Model.extend({
}, this);
},
getNonAnimateKeys: function() {
return [
'stroke-dasharray'
];
},
getIsInOrigin: function() {
if (!this.get('gitEngine')) {
return false;
}
return this.get('gitEngine').isOrigin();
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
},
setAttrBase: function(keys, attr, instant, speed, easing) {
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
// some keys dont support animating too, so set those instantly here
_.forEach(this.getNonAnimateKeys(), function(nonAnimateKey) {
if (attr[key] && attr[key][nonAnimateKey] !== undefined) {
this.get(key).attr(nonAnimateKey, attr[key][nonAnimateKey]);
}
}, this);
}
if (attr.css) {
$(this.get(key).node).css(attr.css);
}
}, this);
},
animateAttrKeys: function(keys, attrObj, speed, easing) {
// either we animate a specific subset of keys or all
// possible things we could animate

28
src/js/visuals/visBranch.js
View file

@ -297,7 +297,7 @@ var VisBranch = VisBase.extend({
var name = this.get('branch').getName();
var selected = this.get('branch') === this.gitEngine.HEAD.get('target');
var after = (selected) ? '*' : '';
var after = (selected && !this.getIsInOrigin()) ? '*' : '';
return name + after;
},
@ -435,7 +435,8 @@ var VisBranch = VisBase.extend({
var rectSize = this.getRectSize();
var arrowPath = this.getArrowPath();
var dashArray = (this.getIsRemote()) ? '--' : '';
var dashArray = (this.getIsRemote() || this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
var cursorStyle = (this.shouldDisableClick()) ?
'auto' :
'pointer';
@ -457,7 +458,7 @@ var VisBranch = VisBase.extend({
opacity: nonTextOpacity,
fill: this.getFill(),
stroke: this.get('stroke'),
'stroke-dasharray': dashArray,
//'stroke-dasharray': dashArray,
'stroke-width': this.get('stroke-width')
},
arrow: {
@ -483,26 +484,7 @@ var VisBranch = VisBase.extend({
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'rect', 'arrow'];
_.each(keys, function(key) {
if (instant) {
this.get(key).attr(attr[key]);
} else {
this.get(key).stop().animate(attr[key], speed, easing);
}
$(this.get(key).node).css(attr.css);
}, this);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.setAttr(attr, /* instant */ true);
return;
}
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.setAttr(attr, /* instance */ false, s, e);
this.setAttrBase(keys, attr, instant, speed, easing);
}
});

18
src/js/visuals/visNode.js
View file

@ -109,6 +109,8 @@ var VisNode = VisBase.extend({
var pos = this.getScreenCoords();
var textPos = this.getTextScreenCoords();
var opacity = this.getOpacity();
var dashArray = (this.getIsInOrigin()) ?
GRAPHICS.originDash : '';
return {
circle: {
@ -118,6 +120,7 @@ var VisNode = VisBase.extend({
r: this.getRadius(),
fill: this.getFill(),
'stroke-width': this.get('stroke-width'),
'stroke-dasharray': dashArray,
stroke: this.get('stroke')
},
text: {
@ -162,19 +165,16 @@ var VisNode = VisBase.extend({
this.animateToAttr(snapShot[this.getID()], speed, easing);
},
animateToAttr: function(attr, speed, easing) {
if (speed === 0) {
this.get('circle').attr(attr.circle);
this.get('text').attr(attr.text);
return;
}
setAttr: function(attr, instant, speed, easing) {
var keys = ['text', 'circle'];
this.setAttrBase(keys, attr, instant, speed, easing);
},
animateToAttr: function(attr, speed, easing) {
VisBase.prototype.animateToAttr.apply(this, arguments);
var s = speed !== undefined ? speed : this.get('animationSpeed');
var e = easing || this.get('animationEasing');
this.get('circle').stop().animate(attr.circle, s, e);
this.get('text').stop().animate(attr.text, s, e);
if (easing == 'bounce' &&
attr.circle && attr.circle.cx !== undefined &&
attr.text && attr.text.x !== undefined ) {