mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-06-27 00:18:56 +02:00
random hues for branches
This commit is contained in:
parent
7d88e5564c
commit
ea6844ae04
5 changed files with 38 additions and 41 deletions
|
@ -116,7 +116,8 @@ var Command = Backbone.Model.extend({
|
||||||
branch: /^branch($|\s)/,
|
branch: /^branch($|\s)/,
|
||||||
revert: /^revert($|\s)/,
|
revert: /^revert($|\s)/,
|
||||||
log: /^log($|\s)/,
|
log: /^log($|\s)/,
|
||||||
merge: /^merge($|\s)/
|
merge: /^merge($|\s)/,
|
||||||
|
show: /^show($|\s)/
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -260,7 +261,8 @@ OptionParser.prototype.getMasterOptionMap = function() {
|
||||||
},
|
},
|
||||||
merge: {},
|
merge: {},
|
||||||
rebase: {},
|
rebase: {},
|
||||||
revert: {}
|
revert: {},
|
||||||
|
show: {}
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -28,7 +28,10 @@ var GRAPHICS = {
|
||||||
upstreamHeadOpacity: 0.5,
|
upstreamHeadOpacity: 0.5,
|
||||||
upstreamNoneOpacity: 0.2,
|
upstreamNoneOpacity: 0.2,
|
||||||
edgeUpstreamHeadOpacity: 0.4,
|
edgeUpstreamHeadOpacity: 0.4,
|
||||||
edgeUpstreamNoneOpacity: 0.15
|
edgeUpstreamNoneOpacity: 0.15,
|
||||||
|
|
||||||
|
visBranchStrokeWidth: 2,
|
||||||
|
visBranchStrokeColorNone: '#333'
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
29
src/tree.js
29
src/tree.js
|
@ -37,12 +37,17 @@ var VisBranch = Backbone.Model.extend({
|
||||||
|
|
||||||
initialize: function() {
|
initialize: function() {
|
||||||
this.validateAtInit();
|
this.validateAtInit();
|
||||||
if (this.get('branch').get('id') == 'HEAD') {
|
var id = this.get('branch').get('id');
|
||||||
|
|
||||||
|
if (id == 'HEAD') {
|
||||||
// switch to a head ref
|
// switch to a head ref
|
||||||
this.set('isHead', true);
|
this.set('isHead', true);
|
||||||
this.set('flip', -1);
|
this.set('flip', -1);
|
||||||
|
|
||||||
this.set('fill', GRAPHICS.headRectFill);
|
this.set('fill', GRAPHICS.headRectFill);
|
||||||
|
} else if (id !== 'master') {
|
||||||
|
// we need to set our color to something random
|
||||||
|
this.set('fill', randomHueString());
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -230,6 +235,12 @@ var VisBranch = Backbone.Model.extend({
|
||||||
this.get('text').toFront();
|
this.get('text').toFront();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getFill: function() {
|
||||||
|
// in the easy case, just return your own fill
|
||||||
|
// TODO check
|
||||||
|
return this.get('fill');
|
||||||
|
},
|
||||||
|
|
||||||
genGraphics: function(paper) {
|
genGraphics: function(paper) {
|
||||||
var textPos = this.getTextPosition();
|
var textPos = this.getTextPosition();
|
||||||
|
|
||||||
|
@ -246,7 +257,7 @@ var VisBranch = Backbone.Model.extend({
|
||||||
var sizeOfRect = this.getRectSize();
|
var sizeOfRect = this.getRectSize();
|
||||||
var rect = paper.rect(rectPos.x, rectPos.y, sizeOfRect.w, sizeOfRect.h, 8);
|
var rect = paper.rect(rectPos.x, rectPos.y, sizeOfRect.w, sizeOfRect.h, 8);
|
||||||
rect.attr({
|
rect.attr({
|
||||||
fill: this.get('fill'),
|
fill: this.getFill(),
|
||||||
stroke: this.get('stroke'),
|
stroke: this.get('stroke'),
|
||||||
'stroke-width': GRAPHICS.rectStrokeWidth,
|
'stroke-width': GRAPHICS.rectStrokeWidth,
|
||||||
opacity: this.getNonTextOpacity()
|
opacity: this.getNonTextOpacity()
|
||||||
|
@ -256,7 +267,7 @@ var VisBranch = Backbone.Model.extend({
|
||||||
var arrowPath = this.getArrowPath();
|
var arrowPath = this.getArrowPath();
|
||||||
var arrow = paper.path(arrowPath);
|
var arrow = paper.path(arrowPath);
|
||||||
arrow.attr({
|
arrow.attr({
|
||||||
fill: this.get('fill'),
|
fill: this.getFill(),
|
||||||
stroke: this.get('stroke'),
|
stroke: this.get('stroke'),
|
||||||
'stroke-width': GRAPHICS.rectStrokeWidth,
|
'stroke-width': GRAPHICS.rectStrokeWidth,
|
||||||
opacity: this.getNonTextOpacity()
|
opacity: this.getNonTextOpacity()
|
||||||
|
@ -630,9 +641,19 @@ var VisEdge = Backbone.Model.extend({
|
||||||
return this.genSmoothBezierPathString(this.get('tail'), this.get('head'));
|
return this.genSmoothBezierPathString(this.get('tail'), this.get('head'));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getStrokeColor: function() {
|
||||||
|
return GRAPHICS.visBranchStrokeColorNone;
|
||||||
|
},
|
||||||
|
|
||||||
genGraphics: function(paper) {
|
genGraphics: function(paper) {
|
||||||
var pathString = this.getBezierCurve();
|
var pathString = this.getBezierCurve();
|
||||||
var path = cutePath(paper, pathString);
|
|
||||||
|
var path = paper.path(pathString).attr({
|
||||||
|
'stroke-width': GRAPHICS.visBranchStrokeWidth,
|
||||||
|
'stroke': this.getStrokeColor(),
|
||||||
|
'stroke-linecap': 'round',
|
||||||
|
'stroke-linejoin': 'round'
|
||||||
|
});
|
||||||
path.toBack();
|
path.toBack();
|
||||||
this.set('path', path);
|
this.set('path', path);
|
||||||
},
|
},
|
||||||
|
|
|
@ -246,7 +246,7 @@ GitVisuals.prototype.calcDepth = function() {
|
||||||
// issue warning
|
// issue warning
|
||||||
events.trigger('issueWarning',
|
events.trigger('issueWarning',
|
||||||
'Max Depth Exceeded! Visuals may degrade here. ' +
|
'Max Depth Exceeded! Visuals may degrade here. ' +
|
||||||
'Please start fresh or use reset to reduce the max depth'
|
'Please start fresh'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -454,33 +454,6 @@ function randomGradient() {
|
||||||
return gradient;
|
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) {
|
function cuteSmallCircle(paper, x, y, options) {
|
||||||
var options = options || {};
|
var options = options || {};
|
||||||
var wantsSameColor = options.sameColor;
|
var wantsSameColor = options.sameColor;
|
||||||
|
|
10
todo.txt
10
todo.txt
|
@ -11,17 +11,19 @@ ALSO other big things:
|
||||||
- Division in their rings based on how many / what branches they are part of
|
- Division in their rings based on how many / what branches they are part of
|
||||||
- Color on branch edges??
|
- Color on branch edges??
|
||||||
|
|
||||||
- sizing on visedge arrowheads, also fill most likely
|
|
||||||
|
|
||||||
Big Graphic things:
|
Big Graphic things:
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
- colored branch edges. basically
|
- colored branch edges. basically
|
||||||
- node rings, really think we should do it
|
- node rings, really think we should do it
|
||||||
|
- When you are rebasing and you hit the bottom, all the nodes go in the wrong spot...
|
||||||
|
We need some kind of "update everything but this set of nodes" thing...
|
||||||
|
- averaging colors!
|
||||||
|
|
||||||
|
|
||||||
Medium things:
|
Medium things:
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
- Rebuilding trees from a JSON snapshot / blob. this should be easy... i think. if we remove the need for parents
|
- Rebuilding trees from a JSON snapshot / blob. this should be easy... i think. if we remove the need for parents
|
||||||
|
- sizing on visedge arrowheads, also fill most likely
|
||||||
|
|
||||||
|
|
||||||
Small things to implement:
|
Small things to implement:
|
||||||
|
@ -33,8 +35,4 @@ Small things to implement:
|
||||||
Bugs to fix:
|
Bugs to fix:
|
||||||
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
||||||
|
|
||||||
- When you are rebasing and you hit the bottom, all the nodes go in the wrong spot...
|
|
||||||
We need some kind of "update everything but this set of nodes" thing...
|
|
||||||
|
|
||||||
- always grab the maxHeight
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue