mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-27 16:38:50 +02:00
big finish on the rebase animation
This commit is contained in:
parent
b106e22ac3
commit
311e429ba3
4 changed files with 59 additions and 49 deletions
|
@ -42,25 +42,7 @@ AnimationFactory.prototype.genCommitBirthAnimation = function(animationQueue, co
|
||||||
};
|
};
|
||||||
|
|
||||||
AnimationFactory.prototype.genCommitBirthAnimationInSequence = function(animationQueue, index, commits) {
|
AnimationFactory.prototype.genCommitBirthAnimationInSequence = function(animationQueue, index, commits) {
|
||||||
if (!animationQueue) { throw new Error("rawrr"); }
|
|
||||||
|
|
||||||
var time = GRAPHICS.defaultAnimationTime * 1.0;
|
|
||||||
var bounceTime = time * 2.0;
|
|
||||||
|
|
||||||
var toHide = commits.slice(index + 1);
|
|
||||||
var visNode = commits[index].get('visNode');
|
|
||||||
|
|
||||||
var animation = function() {
|
|
||||||
visNode.parentInFront();
|
|
||||||
|
|
||||||
visNode.animateUpdatedPosition(bounceTime, 'bounce');
|
|
||||||
visNode.animateOutgoingEdges(time);
|
|
||||||
};
|
|
||||||
|
|
||||||
animationQueue.add(new Animation({
|
|
||||||
closure: animation,
|
|
||||||
duration: Math.max(time, bounceTime)
|
|
||||||
}));
|
|
||||||
};
|
};
|
||||||
|
|
||||||
AnimationFactory.prototype.refreshTree = function(animationQueue) {
|
AnimationFactory.prototype.refreshTree = function(animationQueue) {
|
||||||
|
|
65
src/git.js
65
src/git.js
|
@ -487,32 +487,54 @@ GitEngine.prototype.rebaseStarter = function() {
|
||||||
// was a fastforward or already up to date
|
// was a fastforward or already up to date
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.rebaseAnimation(response);
|
this.rebaseAnimation(response);
|
||||||
};
|
};
|
||||||
|
|
||||||
GitEngine.prototype.rebaseAnimation = function(response) {
|
GitEngine.prototype.rebaseAnimation = function(response) {
|
||||||
var newCommits = response;
|
|
||||||
|
|
||||||
var start = function() {
|
var start = function() {
|
||||||
gitVisuals.calcTreeCoords();
|
// maybe search stuff??
|
||||||
gitVisuals.animateEdges();
|
|
||||||
gitVisuals.animateNodePositions();
|
|
||||||
|
|
||||||
_.each(newCommits, function(c) {
|
|
||||||
c.get('visNode').setBirth();
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
this.animationQueue.add(new Animation({
|
this.animationQueue.add(new Animation({
|
||||||
closure: start
|
closure: start
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
// first set all birth positions...
|
||||||
|
_.each(response, function(step) {
|
||||||
|
step.newCommit.get('visNode').setBirth();
|
||||||
|
}, this);
|
||||||
|
|
||||||
gitVisuals.calcTreeCoords();
|
var fixedOpacity = 0.8;
|
||||||
// make a bunch of birthing animations
|
// then fix all opacities... ugh
|
||||||
for (var i = 0; i < newCommits.length; i++) {
|
_.each(response, function(step) {
|
||||||
newCommits[i].get('visNode').setBirth();
|
_.each(step.snapshot, function(obj) {
|
||||||
animationFactory.genCommitBirthAnimationInSequence(this.animationQueue, i, newCommits);
|
_.each(obj, function(attr) {
|
||||||
}
|
if (attr.opacity !== undefined) {
|
||||||
|
attr.opacity = fixedOpacity;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var time = GRAPHICS.defaultAnimationTime;
|
||||||
|
var bounceTime = time * 2.0;
|
||||||
|
|
||||||
|
_.each(response, function(step) {
|
||||||
|
this.animationQueue.add(new Animation({
|
||||||
|
closure: function() {
|
||||||
|
var id = step.newCommit.get('id');
|
||||||
|
var vNode = step.newCommit.get('visNode');
|
||||||
|
|
||||||
|
vNode.setBirth();
|
||||||
|
vNode.setOutgoingEdgesBirthPosition();
|
||||||
|
|
||||||
|
vNode.animateOutgoingEdgesFromSnapshot(step.snapshot, bounceTime, 'bounce');
|
||||||
|
vNode.animateFromAttr(step.snapshot[id], bounceTime, 'bounce');
|
||||||
|
},
|
||||||
|
duration: Math.max(bounceTime, time)
|
||||||
|
}));
|
||||||
|
}, this);
|
||||||
|
|
||||||
animationFactory.refreshTree(this.animationQueue);
|
animationFactory.refreshTree(this.animationQueue);
|
||||||
};
|
};
|
||||||
|
@ -572,21 +594,26 @@ GitEngine.prototype.rebase = function(targetSource, currentLocation) {
|
||||||
// now pop all of these commits onto targetLocation
|
// now pop all of these commits onto targetLocation
|
||||||
var base = this.getCommitFromRef(targetSource);
|
var base = this.getCommitFromRef(targetSource);
|
||||||
|
|
||||||
var newCommits = [];
|
var animationInfo = [];
|
||||||
|
|
||||||
for (var i = 0; i < toRebase.length; i++) {
|
for (var i = 0; i < toRebase.length; i++) {
|
||||||
var old = toRebase[i];
|
var old = toRebase[i];
|
||||||
var newId = this.rebaseAltId(old.get('id'));
|
var newId = this.rebaseAltId(old.get('id'));
|
||||||
var newCommit = this.makeCommit([base], newId);
|
var newCommit = this.makeCommit([base], newId);
|
||||||
newCommits.push(newCommit);
|
|
||||||
base = newCommit;
|
base = newCommit;
|
||||||
|
|
||||||
|
animationInfo.push({
|
||||||
|
oldCommit: old,
|
||||||
|
newCommit: newCommit,
|
||||||
|
snapshot: gitVisuals.genSnapshot()
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// now we just need to update where we are
|
// now we just need to update where we are
|
||||||
this.setLocationTarget(currentLocation, base);
|
this.setLocationTarget(currentLocation, base);
|
||||||
|
|
||||||
// for animation
|
// for animation
|
||||||
return newCommits;
|
return animationInfo;
|
||||||
};
|
};
|
||||||
|
|
||||||
GitEngine.prototype.mergeStarter = function() {
|
GitEngine.prototype.mergeStarter = function() {
|
||||||
|
|
19
src/tree.js
19
src/tree.js
|
@ -320,10 +320,10 @@ var VisBranch = Backbone.Model.extend({
|
||||||
|
|
||||||
animateUpdatedPos: function(speed, easing) {
|
animateUpdatedPos: function(speed, easing) {
|
||||||
var attr = this.getAttributes();
|
var attr = this.getAttributes();
|
||||||
this.animateFromAttributes(speed, easing, attr);
|
this.animateFromAttr(attr, speed, easing);
|
||||||
},
|
},
|
||||||
|
|
||||||
animateFromAttributes: function(speed, easing, attr) {
|
animateFromAttr: function(attr, speed, easing) {
|
||||||
var s = speed !== undefined ? speed : this.get('animationSpeed');
|
var s = speed !== undefined ? speed : this.get('animationSpeed');
|
||||||
var e = easing || this.get('animationEasing');
|
var e = easing || this.get('animationEasing');
|
||||||
|
|
||||||
|
@ -422,10 +422,10 @@ var VisNode = Backbone.Model.extend({
|
||||||
|
|
||||||
animateUpdatedPosition: function(speed, easing) {
|
animateUpdatedPosition: function(speed, easing) {
|
||||||
var attr = this.getAttributes();
|
var attr = this.getAttributes();
|
||||||
this.animateFromAttr(speed, easing, attr);
|
this.animateFromAttr(attr, speed, easing);
|
||||||
},
|
},
|
||||||
|
|
||||||
animateFromAttr: function(speed, easing, attr) {
|
animateFromAttr: function(attr, speed, easing) {
|
||||||
this.get('circle').stop().animate(
|
this.get('circle').stop().animate(
|
||||||
attr.circle,
|
attr.circle,
|
||||||
speed !== undefined ? speed : this.get('animationSpeed'),
|
speed !== undefined ? speed : this.get('animationSpeed'),
|
||||||
|
@ -469,6 +469,13 @@ var VisNode = Backbone.Model.extend({
|
||||||
}, this);
|
}, this);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
animateOutgoingEdgesFromSnapshot: function(snapshot, speed, easing) {
|
||||||
|
_.each(this.get('outgoingEdges'), function(edge) {
|
||||||
|
var attr = snapshot[edge.getID()];
|
||||||
|
edge.animateFromAttr(attr, speed, easing);
|
||||||
|
}, this);
|
||||||
|
},
|
||||||
|
|
||||||
setOutgoingEdgesBirthPosition: function() {
|
setOutgoingEdgesBirthPosition: function() {
|
||||||
var parentCoords = this.getParentScreenCoords();
|
var parentCoords = this.getParentScreenCoords();
|
||||||
_.each(this.get('outgoingEdges'), function(edge) {
|
_.each(this.get('outgoingEdges'), function(edge) {
|
||||||
|
@ -611,10 +618,10 @@ var VisEdge = Backbone.Model.extend({
|
||||||
|
|
||||||
animateUpdatedPath: function(speed, easing) {
|
animateUpdatedPath: function(speed, easing) {
|
||||||
var attr = this.getAttributes();
|
var attr = this.getAttributes();
|
||||||
this.animateFromAttributes(speed, easing, attr);
|
this.animateFromAttr(attr, speed, easing);
|
||||||
},
|
},
|
||||||
|
|
||||||
animateFromAttributes: function(speed, easing, attr) {
|
animateFromAttr: function(attr, speed, easing) {
|
||||||
this.get('path').toBack();
|
this.get('path').toBack();
|
||||||
this.get('path').stop().animate(
|
this.get('path').stop().animate(
|
||||||
attr.path,
|
attr.path,
|
||||||
|
|
6
todo.txt
6
todo.txt
|
@ -1,9 +1,3 @@
|
||||||
The Tree.Snapshot() idea
|
|
||||||
|
|
||||||
|
|
||||||
TERMINAL IS DONEEeeeee :DDD
|
|
||||||
|
|
||||||
|
|
||||||
closures on animations with those snapshots
|
closures on animations with those snapshots
|
||||||
integrate animation into all git commands
|
integrate animation into all git commands
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue