better padding for vis and stuff

This commit is contained in:
Peter Cottle 2013-02-18 14:29:43 -08:00
parent e8dd24fa5c
commit 9b85b676df
8 changed files with 36 additions and 12 deletions

View file

@ -15023,7 +15023,9 @@ GitVisuals.prototype.getScreenPadding = function() {
// for now we return the node radius subtracted from the walls // for now we return the node radius subtracted from the walls
return { return {
widthPadding: GRAPHICS.nodeRadius * 1.5, widthPadding: GRAPHICS.nodeRadius * 1.5,
heightPadding: GRAPHICS.nodeRadius * 1.5 topHeightPadding: GRAPHICS.nodeRadius * 1.5,
// we pad the bottom a lot more so the branches wont go off screen
bottomHeightPadding: GRAPHICS.nodeRadius * 5
}; };
}; };
@ -15036,10 +15038,14 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
var shrink = function(frac, total, padding) { var shrink = function(frac, total, padding) {
return padding + frac * (total - padding * 2); return padding + frac * (total - padding * 2);
}; };
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
return paddingTop + frac * (total - paddingBelow - paddingTop);
};
return { return {
x: shrink(pos.x, this.paper.width, padding.widthPadding), x: shrink(pos.x, this.paper.width, padding.widthPadding),
y: shrink(pos.y, this.paper.height, padding.heightPadding) y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
}; };
}; };
@ -26461,7 +26467,9 @@ GitVisuals.prototype.getScreenPadding = function() {
// for now we return the node radius subtracted from the walls // for now we return the node radius subtracted from the walls
return { return {
widthPadding: GRAPHICS.nodeRadius * 1.5, widthPadding: GRAPHICS.nodeRadius * 1.5,
heightPadding: GRAPHICS.nodeRadius * 1.5 topHeightPadding: GRAPHICS.nodeRadius * 1.5,
// we pad the bottom a lot more so the branches wont go off screen
bottomHeightPadding: GRAPHICS.nodeRadius * 5
}; };
}; };
@ -26474,10 +26482,14 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
var shrink = function(frac, total, padding) { var shrink = function(frac, total, padding) {
return padding + frac * (total - padding * 2); return padding + frac * (total - padding * 2);
}; };
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
return paddingTop + frac * (total - paddingBelow - paddingTop);
};
return { return {
x: shrink(pos.x, this.paper.width, padding.widthPadding), x: shrink(pos.x, this.paper.width, padding.widthPadding),
y: shrink(pos.y, this.paper.height, padding.heightPadding) y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
}; };
}; };

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

2
build/bundle.min.js vendored

File diff suppressed because one or more lines are too long

View file

@ -253,11 +253,14 @@ div.canvasTerminalHolder > div.terminal-window-holder div.inside {
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
} }
div.canvasTerminalHolder > div.terminal-window-holder,
#controls { #controls {
max-width: 400px; max-width: 400px;
} }
div.canvasTerminalHolder > div.terminal-window-holder {
max-width: 500px;
}
#controls { #controls {
background: #EEE; background: #EEE;
} }

View file

@ -13,7 +13,7 @@
<meta property="og:image" content="http://pcottle.github.com/learnGitBranching/assets/learnGitBranching.png"/> <meta property="og:image" content="http://pcottle.github.com/learnGitBranching/assets/learnGitBranching.png"/>
<meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/> <meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
<link rel="stylesheet" href="build/main.42019824.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="build/main.ddc18834.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8"> <link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
</head> </head>
<body> <body>
@ -409,7 +409,7 @@
For a much easier time perusing the source, see the individual files at: For a much easier time perusing the source, see the individual files at:
https://github.com/pcottle/learnGitBranching https://github.com/pcottle/learnGitBranching
--> -->
<script src="build/bundle.min.ff85065c.js"></script> <script src="build/bundle.min.0a3d07d9.js"></script>
<!-- The advantage of github pages: super-easy, simple, slick static hostic. <!-- The advantage of github pages: super-easy, simple, slick static hostic.
The downside? No raw logs to parse for analytics, so I have to include The downside? No raw logs to parse for analytics, so I have to include

View file

@ -109,7 +109,9 @@ GitVisuals.prototype.getScreenPadding = function() {
// for now we return the node radius subtracted from the walls // for now we return the node radius subtracted from the walls
return { return {
widthPadding: GRAPHICS.nodeRadius * 1.5, widthPadding: GRAPHICS.nodeRadius * 1.5,
heightPadding: GRAPHICS.nodeRadius * 1.5 topHeightPadding: GRAPHICS.nodeRadius * 1.5,
// we pad the bottom a lot more so the branches wont go off screen
bottomHeightPadding: GRAPHICS.nodeRadius * 5
}; };
}; };
@ -122,10 +124,14 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
var shrink = function(frac, total, padding) { var shrink = function(frac, total, padding) {
return padding + frac * (total - padding * 2); return padding + frac * (total - padding * 2);
}; };
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
return paddingTop + frac * (total - paddingBelow - paddingTop);
};
return { return {
x: shrink(pos.x, this.paper.width, padding.widthPadding), x: shrink(pos.x, this.paper.width, padding.widthPadding),
y: shrink(pos.y, this.paper.height, padding.heightPadding) y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
}; };
}; };

View file

@ -253,11 +253,14 @@ div.canvasTerminalHolder > div.terminal-window-holder div.inside {
border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px;
} }
div.canvasTerminalHolder > div.terminal-window-holder,
#controls { #controls {
max-width: 400px; max-width: 400px;
} }
div.canvasTerminalHolder > div.terminal-window-holder {
max-width: 500px;
}
#controls { #controls {
background: #EEE; background: #EEE;
} }