mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-28 17:00:04 +02:00
before big animation implementation
This commit is contained in:
parent
5ac6b035f5
commit
b7f6bfff5a
6 changed files with 86 additions and 169 deletions
|
@ -2,26 +2,28 @@ var CommitCollection = Backbone.Collection.extend({
|
||||||
model: Commit
|
model: Commit
|
||||||
});
|
});
|
||||||
|
|
||||||
var commitCollection = new CommitCollection();
|
|
||||||
|
|
||||||
var CommandCollection = Backbone.Collection.extend({
|
var CommandCollection = Backbone.Collection.extend({
|
||||||
model: Command
|
model: Command
|
||||||
});
|
});
|
||||||
|
|
||||||
var CommandBuffer = Backbone.Model.extend({
|
var CommandBuffer = Backbone.Model.extend({
|
||||||
initialize: function() {
|
defaults: {
|
||||||
|
collection: null,
|
||||||
|
},
|
||||||
|
|
||||||
|
initialize: function(options) {
|
||||||
events.on('gitCommandReady', _.bind(
|
events.on('gitCommandReady', _.bind(
|
||||||
this.addCommand, this
|
this.addCommand, this
|
||||||
));
|
));
|
||||||
|
|
||||||
this.collection = new CommandCollection();
|
options.collection.bind('add', this.addCommand, this);
|
||||||
|
|
||||||
this.buffer = [];
|
this.buffer = [];
|
||||||
this.timeout = null;
|
this.timeout = null;
|
||||||
this.delay = 300;
|
this.delay = 300;
|
||||||
},
|
},
|
||||||
|
|
||||||
addCommand: function(command) {
|
addCommand: function(command) {
|
||||||
this.collection.add(command);
|
|
||||||
this.buffer.push(command);
|
this.buffer.push(command);
|
||||||
this.touchBuffer();
|
this.touchBuffer();
|
||||||
},
|
},
|
||||||
|
@ -50,7 +52,15 @@ var CommandBuffer = Backbone.Model.extend({
|
||||||
|
|
||||||
popAndProcess: function() {
|
popAndProcess: function() {
|
||||||
var popped = this.buffer.pop();
|
var popped = this.buffer.pop();
|
||||||
events.trigger('processCommand', popped);
|
|
||||||
|
// find a command with no error
|
||||||
|
while (popped.get('error') && this.buffer.length) {
|
||||||
|
popped = buffer.pop();
|
||||||
|
}
|
||||||
|
// process it if theres no error
|
||||||
|
if (!popped.get('error')) {
|
||||||
|
events.trigger('processCommand', popped);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
clear: function() {
|
clear: function() {
|
||||||
|
@ -71,7 +81,5 @@ var CommandBuffer = Backbone.Model.extend({
|
||||||
this.clear();
|
this.clear();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var commandBuffer = new CommandBuffer();
|
|
||||||
|
|
|
@ -1,10 +1,13 @@
|
||||||
var Command = Backbone.Model.extend({
|
var Command = Backbone.Model.extend({
|
||||||
defaults: {
|
defaults: {
|
||||||
status: 'inqueue',
|
status: 'inqueue',
|
||||||
|
result: null,
|
||||||
|
error: null,
|
||||||
generalArgs: [],
|
generalArgs: [],
|
||||||
supportedMap: {},
|
supportedMap: {},
|
||||||
options: null,
|
options: null,
|
||||||
method: null,
|
method: null,
|
||||||
|
createTime: null,
|
||||||
rawStr: null
|
rawStr: null
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -12,11 +15,28 @@ var Command = Backbone.Model.extend({
|
||||||
if (!this.get('rawStr')) {
|
if (!this.get('rawStr')) {
|
||||||
throw new Error('Give me a string!');
|
throw new Error('Give me a string!');
|
||||||
}
|
}
|
||||||
|
if (!this.get('createTime')) {
|
||||||
|
this.set('createTime', new Date().toString());
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.validateAtInit();
|
this.validateAtInit();
|
||||||
this.parse();
|
this.parseOrCatch();
|
||||||
|
},
|
||||||
|
|
||||||
|
parseOrCatch: function() {
|
||||||
|
try {
|
||||||
|
this.parse();
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof CommandProcessError ||
|
||||||
|
err instanceof CommandResult ||
|
||||||
|
err instanceof GitError) {
|
||||||
|
this.set('error', err);
|
||||||
|
} else {
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
getShortcutMap: function() {
|
getShortcutMap: function() {
|
||||||
|
|
|
@ -105,36 +105,3 @@ Renderer = function(canvas) {
|
||||||
return that;
|
return that;
|
||||||
}
|
}
|
||||||
|
|
||||||
function addRandom() {
|
|
||||||
// Add some random nodes and edges to the graph!
|
|
||||||
nodes = [];
|
|
||||||
for (var i = 0; i < 15; i++) {
|
|
||||||
var id = randomString(8);
|
|
||||||
var node = sys.addNode(id);
|
|
||||||
nodes.push(node);
|
|
||||||
}
|
|
||||||
|
|
||||||
var randNode = function() {
|
|
||||||
var length = nodes.length;
|
|
||||||
var index = Math.floor(Math.random() * length);
|
|
||||||
return nodes[index];
|
|
||||||
};
|
|
||||||
|
|
||||||
var closures = [];
|
|
||||||
for (var i = 0; i < 20; i++) {
|
|
||||||
var node1 = randNode();
|
|
||||||
var node2 = randNode();
|
|
||||||
// lol will it ever end?
|
|
||||||
while (node1 === node2) {
|
|
||||||
node2 = randNode();
|
|
||||||
}
|
|
||||||
sys.addEdge(node1, node2);
|
|
||||||
}
|
|
||||||
for (var i = 0; i < nodes.length; i++) {
|
|
||||||
var node2 = randNode();
|
|
||||||
while (nodes[i] === node2) {
|
|
||||||
node2 = randNode();
|
|
||||||
}
|
|
||||||
sys.addEdge(nodes[i], node2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
20
src/mine.js
20
src/mine.js
|
@ -2,20 +2,36 @@
|
||||||
* Globals
|
* Globals
|
||||||
*/
|
*/
|
||||||
var events = _.clone(Backbone.Events);
|
var events = _.clone(Backbone.Events);
|
||||||
|
|
||||||
var sys = null;
|
var sys = null;
|
||||||
var graphicsEffects = {};
|
var graphicsEffects = {};
|
||||||
|
|
||||||
var gitEngine = null;
|
var gitEngine = null;
|
||||||
var gitVisuals = null;
|
var gitVisuals = null;
|
||||||
|
|
||||||
|
var commitCollection = null;
|
||||||
|
var commandCollection = null;
|
||||||
|
var commandBuffer = null;
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
sys = arbor.ParticleSystem(4000, 200, 0.5, false, 55, 0.005, 'verlet');
|
sys = arbor.ParticleSystem(4000, 200, 0.5, false, 55, 0.005, 'verlet');
|
||||||
sys.renderer = Renderer('#viewport');
|
sys.renderer = Renderer('#viewport');
|
||||||
|
|
||||||
|
// the two major collections that affect everything
|
||||||
|
commitCollection = new CommitCollection();
|
||||||
|
commandCollection = new CommandCollection();
|
||||||
|
|
||||||
|
commandBuffer = new CommandBuffer({
|
||||||
|
collection: commandCollection
|
||||||
|
});
|
||||||
|
|
||||||
new CommandPromptView({
|
new CommandPromptView({
|
||||||
el: $('#commandLineBar')
|
el: $('#commandLineBar'),
|
||||||
|
collection: commandCollection
|
||||||
});
|
});
|
||||||
new CommandLineHistoryView({
|
new CommandLineHistoryView({
|
||||||
el: $('#commandLineHistory')
|
el: $('#commandLineHistory'),
|
||||||
|
collection: commandCollection
|
||||||
});
|
});
|
||||||
|
|
||||||
gitEngine = new GitEngine();
|
gitEngine = new GitEngine();
|
||||||
|
|
149
src/views.js
149
src/views.js
|
@ -1,15 +1,8 @@
|
||||||
var CommandPromptView = Backbone.View.extend({
|
var CommandPromptView = Backbone.View.extend({
|
||||||
initialize: function(options) {
|
initialize: function(options) {
|
||||||
|
this.collection = options.collection;
|
||||||
this.commands = [];
|
this.commands = [];
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
|
|
||||||
events.on('commandSubmitted', _.bind(
|
|
||||||
this.parseOrCatch, this
|
|
||||||
));
|
|
||||||
|
|
||||||
events.on('processErrorGeneral', _.bind(
|
|
||||||
this.processError, this
|
|
||||||
));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
|
@ -55,24 +48,6 @@ var CommandPromptView = Backbone.View.extend({
|
||||||
this.setTextField(this.commands[this.index]);
|
this.setTextField(this.commands[this.index]);
|
||||||
},
|
},
|
||||||
|
|
||||||
processError: function(err) {
|
|
||||||
// TODO move this somewhere else!!! it's awkward here
|
|
||||||
|
|
||||||
// in this demo, every command that's not a git command will
|
|
||||||
// throw an exception. Some of these errors might be just to
|
|
||||||
// short-circuit the normal programatic flow and print stuff,
|
|
||||||
// so we handle them here
|
|
||||||
if (err instanceof CommandProcessError) {
|
|
||||||
events.trigger('commandProcessError', err);
|
|
||||||
} else if (err instanceof CommandResult) {
|
|
||||||
events.trigger('commandResultPrint', err);
|
|
||||||
} else if (err instanceof GitError) {
|
|
||||||
events.trigger('commandGitError', err);
|
|
||||||
} else {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setTextField: function(value) {
|
setTextField: function(value) {
|
||||||
this.$('#commandTextField').val(value);
|
this.$('#commandTextField').val(value);
|
||||||
},
|
},
|
||||||
|
@ -92,27 +67,20 @@ var CommandPromptView = Backbone.View.extend({
|
||||||
this.index = -1;
|
this.index = -1;
|
||||||
|
|
||||||
// split commands on semicolon
|
// split commands on semicolon
|
||||||
_.each(value.split(';'), function(command) {
|
_.each(value.split(';'), _.bind(function(command) {
|
||||||
command = command.replace(/^(\s+)/, '');
|
command = command.replace(/^(\s+)/, '');
|
||||||
command = command.replace(/(\s+)$/, '');
|
command = command.replace(/(\s+)$/, '');
|
||||||
if (command.length) {
|
if (command.length) {
|
||||||
events.trigger('commandSubmitted', command);
|
this.addToCollection(command);
|
||||||
}
|
}
|
||||||
});
|
}, this));
|
||||||
},
|
},
|
||||||
|
|
||||||
parseOrCatch: function(value) {
|
addToCollection: function(value) {
|
||||||
// TODO: move this also
|
var command = new Command({
|
||||||
try {
|
rawStr: value
|
||||||
// parse validation
|
});
|
||||||
var command = new Command({
|
this.collection.add(command);
|
||||||
rawStr: value
|
|
||||||
});
|
|
||||||
// gitCommandReady actually gives it to the gitEngine for dispatch
|
|
||||||
events.trigger('gitCommandReady', command);
|
|
||||||
} catch (err) {
|
|
||||||
events.trigger('processErrorGeneral', err);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -127,10 +95,12 @@ var CommandView = Backbone.View.extend({
|
||||||
template: _.template($('#command-template').html()),
|
template: _.template($('#command-template').html()),
|
||||||
|
|
||||||
events: {
|
events: {
|
||||||
'click': 'alert'
|
'click': 'clicked'
|
||||||
},
|
},
|
||||||
|
|
||||||
alert: function() { alert('clicked!' + this.get('status')); },
|
clicked: function(e) {
|
||||||
|
console.log('was clicked');
|
||||||
|
},
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.model.bind('change', this.render, this);
|
this.model.bind('change', this.render, this);
|
||||||
|
@ -157,92 +127,21 @@ var CommandView = Backbone.View.extend({
|
||||||
|
|
||||||
var CommandLineHistoryView = Backbone.View.extend({
|
var CommandLineHistoryView = Backbone.View.extend({
|
||||||
initialize: function(options) {
|
initialize: function(options) {
|
||||||
events.on('commandSubmitted', _.bind(
|
this.collection = options.collection;
|
||||||
this.addCommand, this
|
|
||||||
));
|
|
||||||
|
|
||||||
events.on('commandProcessError', _.bind(
|
this.collection.on('add', this.addOne, this);
|
||||||
this.commandError, this
|
this.collection.on('reset', this.addAll, this);
|
||||||
));
|
this.collection.on('all', this.render, this);
|
||||||
|
|
||||||
// TODO special errors for git?
|
|
||||||
events.on('commandGitError', _.bind(
|
|
||||||
this.commandError, this
|
|
||||||
));
|
|
||||||
|
|
||||||
events.on('commandProcessWarn', _.bind(
|
|
||||||
this.commandWarn, this
|
|
||||||
));
|
|
||||||
|
|
||||||
events.on('commandResultPrint', _.bind(
|
|
||||||
this.commandResultPrint, this
|
|
||||||
));
|
|
||||||
|
|
||||||
// TODO: move these to a real template system
|
|
||||||
this.commandTemplate = ' \
|
|
||||||
<p class="commandLine <%= className %>"> \
|
|
||||||
<span class="arrows">> > ></span> \
|
|
||||||
<%= command %> \
|
|
||||||
</p> \
|
|
||||||
';
|
|
||||||
|
|
||||||
this.resultTemplate = ' \
|
|
||||||
<p class="commandLine <%= className %>"> \
|
|
||||||
<%= result %> \
|
|
||||||
</p> \
|
|
||||||
';
|
|
||||||
},
|
},
|
||||||
|
|
||||||
addCommand: function(commandText) {
|
addOne: function(command) {
|
||||||
this.$('#commandDisplay').append(
|
var view = new CommandView({
|
||||||
_.template(
|
model: command
|
||||||
this.commandTemplate,
|
});
|
||||||
{
|
this.$('#commandDisplay').append(view.render().el);
|
||||||
className: 'pastCommand',
|
|
||||||
command: commandText
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
commandError: function(err) {
|
addAll: function() {
|
||||||
this.$('#commandDisplay').append(
|
this.collection.each(this.addOne);
|
||||||
_.template(
|
|
||||||
this.resultTemplate,
|
|
||||||
{
|
|
||||||
className: 'errorResult',
|
|
||||||
result: err.toResult()
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
commandWarn: function(msg) {
|
|
||||||
this.$('#commandDisplay').append(
|
|
||||||
_.template(
|
|
||||||
this.resultTemplate,
|
|
||||||
{
|
|
||||||
className: 'commandWarn',
|
|
||||||
result: msg
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
commandResultPrint: function(err) {
|
|
||||||
if (!err.get('msg') || !err.get('msg').length) {
|
|
||||||
console.log(err);
|
|
||||||
// blank lines
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.$('#commandDisplay').append(
|
|
||||||
_.template(
|
|
||||||
this.resultTemplate,
|
|
||||||
{
|
|
||||||
className: 'commandResult',
|
|
||||||
result: err.toResult()
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
function GitVisuals() {
|
function GitVisuals() {
|
||||||
|
this.collection = commitCollection;
|
||||||
|
|
||||||
|
this.collection.on('change', _.bind(this.collectionChanged, this));
|
||||||
events.on('drawGitVisuals', _.bind(this.drawVisuals, this));
|
events.on('drawGitVisuals', _.bind(this.drawVisuals, this));
|
||||||
events.on('fixNodePositions', _.bind(this.fixNodes, this));
|
events.on('fixNodePositions', _.bind(this.fixNodes, this));
|
||||||
}
|
}
|
||||||
|
@ -71,6 +74,10 @@ GitVisuals.prototype.drawArrow = function(ctx, start, end, headWidth, offset) {
|
||||||
ctx.stroke();
|
ctx.stroke();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
GitVisuals.prototype.collectionChanged = function() {
|
||||||
|
// redo the algorithms
|
||||||
|
};
|
||||||
|
|
||||||
GitVisuals.prototype.fixRootCommit = function(sys) {
|
GitVisuals.prototype.fixRootCommit = function(sys) {
|
||||||
// get the viewports bottom center
|
// get the viewports bottom center
|
||||||
var bottomPosScreen = {
|
var bottomPosScreen = {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue