mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-07 13:14:25 +02:00
377 lines
9.5 KiB
JavaScript
377 lines
9.5 KiB
JavaScript
function GitVisuals(options) {
|
|
this.commitCollection = options.commitCollection;
|
|
this.branchCollection = options.branchCollection;
|
|
this.visNodeMap = {};
|
|
|
|
this.edgeCollection = new VisEdgeCollection();
|
|
this.visBranchCollection = new VisBranchCollection();
|
|
|
|
this.commitMap = {};
|
|
this.rootCommit = null;
|
|
|
|
this.paperReady = false;
|
|
this.paperWidth = null;
|
|
this.paperHeight = null;
|
|
|
|
this.commitCollection.on('change', this.collectionChanged, this);
|
|
|
|
this.branchCollection.on('add', this.addBranch, this);
|
|
this.branchCollection.on('remove', this.removeBranch, this);
|
|
|
|
events.on('canvasResize', _.bind(
|
|
this.canvasResize, this
|
|
));
|
|
events.on('raphaelReady', _.bind(
|
|
this.drawTreeFirstTime, this
|
|
));
|
|
events.on('refreshTree', _.bind(
|
|
this.refreshTree, this
|
|
));
|
|
}
|
|
|
|
GitVisuals.prototype.getScreenBounds = function() {
|
|
// for now we return the node radius subtracted from the walls
|
|
return {
|
|
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
|
heightPadding: GRAPHICS.nodeRadius * 1.5
|
|
};
|
|
};
|
|
|
|
GitVisuals.prototype.toScreenCoords = function(pos) {
|
|
if (!this.paperWidth) {
|
|
throw new Error('being called too early for screen coords');
|
|
}
|
|
var bounds = this.getScreenBounds();
|
|
|
|
var shrink = function(frac, total, padding) {
|
|
return padding + frac * (total - padding * 2);
|
|
};
|
|
|
|
return {
|
|
x: shrink(pos.x, this.paperWidth, bounds.widthPadding),
|
|
y: shrink(pos.y, this.paperHeight, bounds.heightPadding)
|
|
};
|
|
};
|
|
|
|
/***************************************
|
|
== Tree Calculation Parts ==
|
|
_ __ __ _
|
|
\\/ / \ \//_
|
|
\ \ / __| __
|
|
\ \___/ /_____/ /
|
|
| _______ \
|
|
\ ( ) / \_\
|
|
\ /
|
|
| |
|
|
| |
|
|
____+-_=+-^ ^+-=_=__________
|
|
|
|
^^ I drew that :D
|
|
|
|
**************************************/
|
|
|
|
GitVisuals.prototype.refreshTree = function() {
|
|
if (!this.paperReady) { console.warn('called refresh tree when not ready yet'); return; }
|
|
|
|
this.calculateTreeCoords();
|
|
this.animateNodePositions();
|
|
this.animateEdges();
|
|
this.animateRefs();
|
|
};
|
|
|
|
GitVisuals.prototype.refreshTreeHarsh = function() {
|
|
this.calculateTreeCoords();
|
|
|
|
this.animateEdges();
|
|
this.animateNodePositions();
|
|
};
|
|
|
|
GitVisuals.prototype.calculateTreeCoords = function() {
|
|
if (!this.rootCommit) {
|
|
throw new Error('grr, no root commit!');
|
|
}
|
|
|
|
this.calcDepth();
|
|
this.calcWidth();
|
|
};
|
|
|
|
GitVisuals.prototype.calcWidth = function() {
|
|
this.maxWidthRecursive(this.rootCommit);
|
|
|
|
this.assignBoundsRecursive(this.rootCommit, 0, 1);
|
|
};
|
|
|
|
GitVisuals.prototype.maxWidthRecursive = function(commit) {
|
|
var childrenTotalWidth = 0;
|
|
_.each(commit.get('children'), function(child) {
|
|
var childWidth = this.maxWidthRecursive(child);
|
|
childrenTotalWidth += childWidth;
|
|
}, this);
|
|
|
|
var maxWidth = Math.max(1, childrenTotalWidth);
|
|
commit.get('visNode').set('maxWidth', maxWidth);
|
|
return maxWidth;
|
|
};
|
|
|
|
GitVisuals.prototype.assignBoundsRecursive = function(commit, min, max) {
|
|
|
|
// I always center myself within my bounds
|
|
var myWidthPos = (min + max) / 2.0;
|
|
commit.get('visNode').get('pos').x = myWidthPos;
|
|
|
|
if (commit.get('children').length == 0) {
|
|
return;
|
|
}
|
|
|
|
// i have a certain length to divide up
|
|
var myLength = max - min;
|
|
// I will divide up that length based on my children's max width in a
|
|
// basic box-flex model
|
|
var totalFlex = 0;
|
|
var children = commit.get('children');
|
|
_.each(children, function(child) {
|
|
totalFlex += child.get('visNode').get('maxWidth');
|
|
}, this);
|
|
|
|
var prevBound = min;
|
|
|
|
// now go through and do everything
|
|
// TODO: order so the max width children are in the middle
|
|
_.each(children, function(child) {
|
|
var flex = child.get('visNode').get('maxWidth');
|
|
var portion = (flex / totalFlex) * myLength;
|
|
var childMin = prevBound;
|
|
var childMax = childMin + portion;
|
|
this.assignBoundsRecursive(child, childMin, childMax);
|
|
prevBound = childMax;
|
|
}, this);
|
|
};
|
|
|
|
GitVisuals.prototype.calcDepth = function() {
|
|
var maxDepth = this.calcDepthRecursive(this.rootCommit, 0);
|
|
if (maxDepth > 15) {
|
|
// issue warning
|
|
events.trigger('issueWarning',
|
|
'Max Depth Exceeded! Visuals may degrade here. ' +
|
|
'Please start fresh or use reset to reduce the max depth'
|
|
);
|
|
}
|
|
|
|
var depthIncrement = this.getDepthIncrement(maxDepth);
|
|
_.each(this.visNodeMap, function(visNode) {
|
|
visNode.setDepthBasedOn(depthIncrement);
|
|
}, this);
|
|
};
|
|
|
|
/***************************************
|
|
== END Tree Calculation ==
|
|
_ __ __ _
|
|
\\/ / \ \//_
|
|
\ \ / __| __
|
|
\ \___/ /_____/ /
|
|
| _______ \
|
|
\ ( ) / \_\
|
|
\ /
|
|
| |
|
|
| |
|
|
____+-_=+-^ ^+-=_=__________
|
|
|
|
^^ I drew that :D
|
|
|
|
**************************************/
|
|
|
|
GitVisuals.prototype.animateNodePositions = function() {
|
|
_.each(this.visNodeMap, function(visNode) {
|
|
visNode.animateUpdatedPosition();
|
|
}, this);
|
|
};
|
|
|
|
GitVisuals.prototype.addBranch = function(branch) {
|
|
var visBranch = new VisBranch({
|
|
branch: branch
|
|
});
|
|
this.visBranchCollection.add(visBranch);
|
|
if (this.paperReady) {
|
|
visBranch.genGraphics();
|
|
}
|
|
};
|
|
|
|
GitVisuals.prototype.animateRefs = function() {
|
|
this.visBranchCollection.each(function(visBranch) {
|
|
visBranch.animateUpdatedPos(paper);
|
|
}, this);
|
|
};
|
|
|
|
GitVisuals.prototype.animateEdges = function() {
|
|
this.edgeCollection.each(function(edge) {
|
|
edge.animateUpdatedPath();
|
|
}, this);
|
|
};
|
|
|
|
GitVisuals.prototype.getDepthIncrement = function(maxDepth) {
|
|
// assume there are at least 7 layers until later
|
|
maxDepth = Math.max(maxDepth, 7);
|
|
var increment = 1.0 / maxDepth;
|
|
return increment;
|
|
};
|
|
|
|
GitVisuals.prototype.calcDepthRecursive = function(commit, depth) {
|
|
commit.get('visNode').set('depth', depth);
|
|
|
|
var children = commit.get('children');
|
|
var maxDepth = depth;
|
|
for (var i = 0; i < children.length; i++) {
|
|
var d = this.calcDepthRecursive(children[i], depth + 1);
|
|
maxDepth = Math.max(d, maxDepth);
|
|
}
|
|
|
|
return maxDepth;
|
|
// TODO for merge commits, a specific fancy schamncy "main" commit line
|
|
};
|
|
|
|
GitVisuals.prototype.canvasResize = function(width, height) {
|
|
this.paperWidth = width;
|
|
this.paperHeight = height;
|
|
// TODO figure out whether we are animating or not and possibly delay this
|
|
this.refreshTree();
|
|
};
|
|
|
|
GitVisuals.prototype.addNode = function(id, commit) {
|
|
this.commitMap[id] = commit;
|
|
if (commit.get('rootCommit')) {
|
|
this.rootCommit = commit;
|
|
}
|
|
|
|
var visNode = new VisNode({
|
|
id: id,
|
|
commit: commit
|
|
});
|
|
this.visNodeMap[id] = visNode;
|
|
|
|
if (this.paperReady) {
|
|
visNode.genGraphics(paper);
|
|
}
|
|
|
|
return visNode;
|
|
};
|
|
|
|
GitVisuals.prototype.addEdge = function(idTail, idHead) {
|
|
var visNodeTail = this.visNodeMap[idTail];
|
|
var visNodeHead = this.visNodeMap[idHead];
|
|
|
|
if (!visNodeTail || !visNodeHead) {
|
|
throw new Error('one of the ids in (' + idTail +
|
|
', ' + idHead + ') does not exist');
|
|
}
|
|
|
|
var edge = new VisEdge({
|
|
tail: visNodeTail,
|
|
head: visNodeHead
|
|
});
|
|
this.edgeCollection.add(edge);
|
|
|
|
if (this.paperReady) {
|
|
edge.genGraphics(paper);
|
|
}
|
|
};
|
|
|
|
GitVisuals.prototype.collectionChanged = function() {
|
|
console.log('git visuals... collection was changed');
|
|
// redo stuff
|
|
};
|
|
|
|
GitVisuals.prototype.drawTreeFirstTime = function() {
|
|
this.paperReady = true;
|
|
_.each(this.visNodeMap, function(visNode) {
|
|
visNode.genGraphics(paper);
|
|
}, this);
|
|
|
|
this.edgeCollection.each(function(edge) {
|
|
edge.genGraphics(paper);
|
|
}, this);
|
|
|
|
this.visBranchCollection.each(function(visBranch) {
|
|
visBranch.genGraphics(paper);
|
|
}, this);
|
|
|
|
this.refreshTree();
|
|
};
|
|
|
|
|
|
/************************
|
|
* Random util functions, adapted from liquidGraph
|
|
***********************/
|
|
function constructPathStringFromCoords(points,wantsToClose) {
|
|
var pathString = "M" + String(Math.round(points[0].x)) + "," + String(Math.round(points[0].y));
|
|
var lp = points[0];
|
|
|
|
_.each(points, function(point) {
|
|
var s = " L" + String(Math.round(point.x)) + "," + String(Math.round(point.y));
|
|
pathString = pathString + s;
|
|
});
|
|
|
|
if (wantsToClose) {
|
|
pathString = pathString + " Z";
|
|
}
|
|
return pathString;
|
|
};
|
|
|
|
function randomHueString() {
|
|
var hue = Math.random();
|
|
var str = 'hsb(' + String(hue) + ',0.7,1)';
|
|
return str;
|
|
};
|
|
|
|
function randomGradient() {
|
|
var hue = Math.random()*0.8;
|
|
var color1 = 'hsb(' + String(hue) + ',0.7,1)';
|
|
var color2 = 'hsb(' + String(hue + 0.2) + ',0.9,1)';
|
|
|
|
var gradient = String(Math.round(Math.random()*180)) + '-' + color1 + '-' + color2;
|
|
return gradient;
|
|
};
|
|
|
|
function cutePath(paper, pathString, options) {
|
|
options = options || {};
|
|
var wantsToFill = options.wantsToFill;
|
|
var strokeColor = options.strokeColor;
|
|
var fillColor = options.fillColor;
|
|
|
|
var path = paper.path(pathString);
|
|
|
|
if (!strokeColor) {
|
|
strokeColor = randomHueString();
|
|
}
|
|
if (!fillColor) {
|
|
fillColor = randomHueString();
|
|
}
|
|
path.attr({
|
|
'stroke-width': 2,
|
|
'stroke': strokeColor,
|
|
'stroke-linecap': 'round',
|
|
'stroke-linejoin': 'round'
|
|
});
|
|
|
|
if (wantsToFill) {
|
|
path.attr('fill',fillColor);
|
|
}
|
|
return path;
|
|
};
|
|
|
|
function cuteSmallCircle(paper, x, y, options) {
|
|
var options = options || {};
|
|
var wantsSameColor = options.sameColor;
|
|
var radius = options.radius || 4;
|
|
|
|
var c = paper.circle(x, y, radius, radius);
|
|
if (!wantsSameColor) {
|
|
c.attr("fill","hsba(0.5,0.8,0.7,1)");
|
|
} else {
|
|
c.attr("fill","hsba(" + String(Math.random()) + ",0.8,0.7,1)");
|
|
}
|
|
|
|
c.attr("stroke","#FFF");
|
|
c.attr("stroke-width",2);
|
|
return c;
|
|
};
|
|
|