Permalink
Browse files

Revert to Raphael 1.5.2

Reverts the following commits:

807fb8b Use the newest version of raphael
c347773 Fix rotation in derivative intuition
1b63c14 Fix bar scaling in creating bar charts
de985b8 Fix bugs with mean/median/stddev
009aa9f Fix drawing lines with interactive
765c97b Fix divisibility intuition
7d24651 Make protractor work
c6ead2b Fix weird fixed-point bug in telling time 2
2f15f1f Refactor movable points to make more sense
b2a5173 Remove a stray quote
3c7c513 Re-draw the bar instead of scaling
83483d9 Actually fix it by double-buffering
72cbc21 Fix up styling and methods
  • Loading branch information...
1 parent 6697bd8 commit c9054941883bde5e72a4e5e36dd42c7cd80059e1 @beneater beneater committed Jun 29, 2012
@@ -40,65 +40,53 @@
<div class="graphie" id="barchart">
init({
- range: [[-2, 17], [-3, 12]],
- scale: [30, 30]
+ range: [ [ -2, 17 ], [ -3, 12 ] ],
+ scale: [ 30, 30 ]
});
addMouseLayer();
- for (var y = 1; y &lt; 11; ++y) {
- label([0, y], y, "left", false);
- line([0, y], [16, y], { stroke: "black", strokeWidth: 1, opacity: 0.3} );
+ for ( var y = 1; y &lt;= 10; ++y ) {
+ label( [ 0, y ], y, "left", false );
+ style({ stroke: "#000", strokeWidth: 1, opacity: 0.3 }, function() {
+ line( [ 0, y ], [ 16, y ] )
+ });
}
-
graph.leftPoints = [];
graph.rightPoints = [];
graph.lines = [];
- var axes = [];
-
- for (var index = 0; index &lt; CATEGORIES.length; ++index) {
- graph.leftPoints[index] = addMovablePoint({ coord: [index * 3 + 1, 0.5], visible: false });
- graph.rightPoints[index] = addMovablePoint({ coord: [index * 3 + 3, 0.5], visible: false });
- graph.lines[index] = addMovableLineSegment({
- pointA: graph.leftPoints[index],
- pointZ: graph.rightPoints[index],
- snapY: 0.5,
- constraints: { constrainX: true }
+ for ( var index = 0; index &lt; CATEGORIES.length; ++index ) {
+ graph.leftPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 1, 0.5 ], visible: false });
+ graph.rightPoints[ index ] = addMovablePoint({ coord: [ index * 3 + 3, 0.5 ], visible: false });
+ graph.lines[ index ] = addMovableLineSegment({ pointA: graph.leftPoints[ index ], pointZ: graph.rightPoints[ index ], snapY: 0.5, constraints: { constrainX: true } });
+// graph.lines[ index ] = {};
+ style({ stroke: "none", fill: "#9ab8ed", opacity: 1.0 }, function() {
+ graph.lines[ index ].bar = path([ [ index * 3 + 1, 0 ], [ index * 3 + 1, 0.5 ], [ index * 3 + 3, 0.5 ], [ index * 3 + 3, 0 ], [ index * 3 + 1, 0 ] ]);
});
+// graph.lines[ index ].toFront();
- graph.lines[index].bar = path([[graph.lines[index].coordA[0], 0],
- [graph.lines[index].coordZ[0], 0],
- graph.lines[index].coordZ,
- graph.lines[index].coordA, true],
- { stroke: BLUE, fill: BLUE });
-
- label([index * 3 + 2, 0], capitalize(CATEGORIES[index]), "below", false);
+ label( [ index * 3 + 2, 0 ], CATEGORIES[ index ], "below", false ).css( "text-transform", "capitalize" );
var bar = index;
- graph.lines[index].onMove = function(dX, dY) {
- if (this.coordA[1] &lt; 0 || this.coordA[1] &gt; 10) {
+ graph.lines[ index ].onMove = function( dX, dY ) {
+ if ( this.coordA[1] &lt; 0 || this.coordA[1] &gt; 10 ) {
this.coordA[1] -= dY;
this.coordZ[1] -= dY;
}
- this.pointA.setCoord([this.pointA.coord[0], this.coordA[1]]);
- this.pointZ.setCoord([this.pointZ.coord[0], this.coordA[1]]);
+ this.pointA.setCoord([ this.pointA.coord[0], this.coordA[1] ]);
+ this.pointZ.setCoord([ this.pointZ.coord[0], this.coordA[1] ]);
this.pointA.updateLineEnds();
this.pointZ.updateLineEnds();
- var oldBar = this.bar;
- this.bar = path([[this.coordA[0], 0], [this.coordZ[0], 0],
- this.coordZ, this.coordA, true],
- { stroke: BLUE, fill: BLUE });
- oldBar.remove();
- _.invoke(axes, "toFront");
+ this.bar.scale( 1, Math.max( 0.01, this.coordA[1] * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
};
}
style({ stroke: "#000", strokeWidth: 2, opacity: 1.0 }, function() {
- axes.push(line([0, 0], [16, 0]));
- axes.push(line([0, 0], [0, 10]));
+ line( [ 0, 0 ], [ 16, 0 ] );
+ line( [ 0, 0 ], [ 0, 10 ] );
});
- label([8, -0.8], "&lt;b&gt;" + capitalize(SUBJECT) + "&lt;/b&gt;", "below", false );
- $(label([-1.5, 5], "&lt;b&gt;Number of " + plural(RESPONDENT) + "&lt;/b&gt;", "center", false)).addClass("rotate");
- label([8, 10.5], "&lt;b&gt;Favorite " + SUBJECT + "s&lt;/b&gt;", "above", false);
+ label( [ 8, -0.8 ], "&lt;b&gt;" + SUBJECT + "&lt;/b&gt;", "below", false ).css( "text-transform", "capitalize" );
+ $( label( [ -1.5, 5 ], "&lt;b&gt;Number of " + plural( RESPONDENT ) + "&lt;/b&gt;", "center", false ) ).addClass( "rotate" );
+ label( [ 8, 10.5 ], "&lt;b&gt;Favorite " + SUBJECT + "s&lt;/b&gt;", "above", false );
</div>
</div>
@@ -114,17 +102,12 @@
return _.isEqual( guess, DATA );
</div>
<div class="show-guess">
- $.each(guess, function(index) {
- graph.lines[index].pointA.setCoord([graph.lines[index].pointA.coord[0], this]);
- graph.lines[index].pointZ.setCoord([graph.lines[index].pointZ.coord[0], this]);
- graph.lines[index].pointA.updateLineEnds();
- graph.lines[index].pointZ.updateLineEnds();
- graph.lines[index].bar.remove();
- graph.lines[index].bar = path([[graph.lines[index].coordA[0], 0],
- [graph.lines[index].coordZ[0], 0],
- graph.lines[index].coordZ,
- graph.lines[index].coordA, true],
- { stroke: BLUE, fill: BLUE });
+ $.each( guess, function( index ) {
+ graph.lines[ index ].pointA.setCoord([ graph.lines[ index ].pointA.coord[0], this ]);
+ graph.lines[ index ].pointZ.setCoord([ graph.lines[ index ].pointZ.coord[0], this ]);
+ graph.lines[ index ].pointA.updateLineEnds();
+ graph.lines[ index ].pointZ.updateLineEnds();
+ graph.lines[ index ].bar.scale( 1, Math.max( 0.01, this * 2 ), scalePoint( 0 )[0], scalePoint( 0 )[1] );
});
</div>
</div>
@@ -134,29 +117,21 @@
<div class="hints">
<div data-each="DATA as INDEX, NUM">
<p>
- <code><var>NUM</var></code> <var>plural(RESPONDENT, NUM)</var> said <var>plural(randFromArray(["his", "her"]), "their", NUM)</var>
- favorite <var>SUBJECT</var> was <var>CATEGORIES[INDEX]</var>.
+ <code><var>NUM</var></code> <var>plural( RESPONDENT, NUM )</var> said <var>plural( randFromArray([ "his", "her" ]), "their", NUM )</var>
+ favorite <var>SUBJECT</var> was <var>CATEGORIES[ INDEX ]</var>.
<span data-if="NUM > 0">
- So the top of the bar for "<var>capitalize(CATEGORIES[INDEX])</var>" should line up with the number
+ So the top of the bar for "<span style="text-transform: capitalize"><var>CATEGORIES[ INDEX ]</var></span>" should line up with the number
<code><var>NUM</var></code> on the left side of the chart.
</span>
<span data-else>
- So there should be no bar above "<var>capitalize(CATEGORIES[INDEX])</var>". Drag the top of the bar all
+ So there should be no bar above "<span style="text-transform: capitalize"><var>CATEGORIES[ INDEX ]</var></span>". Drag the top of the bar all
the way to the bottom to get rid of the bar.
</span>
</p>
<div data-if="NUM > 0" class="graphie" data-update="barchart">
- path([[INDEX * 3 + 1, 0],
- [INDEX * 3 + 1, NUM],
- [INDEX * 3 + 3, NUM],
- [INDEX * 3 + 3, 0]],
- {
- stroke: ORANGE,
- fill: "none",
- strokeWidth: 1,
- strokeDasharray: "- "
- }
- ).toBack();
+ style({ stroke: ORANGE, fill: "none", strokeWidth: 1, strokeDasharray: "- " }, function() {
+ path([ [ INDEX * 3 + 1, 0 ], [ INDEX * 3 + 1, NUM ], [ INDEX * 3 + 3, NUM ], [ INDEX * 3 + 3, 0 ] ]).toBack();
+ });
</div>
</div>
</div>
@@ -52,8 +52,9 @@
{ stroke: BLUE, fill: BLUE, opacity: 0.6 }));
});
- graph.handle.stop();
- graph.handle.transform("T"+(graph.width * 20)+","+(graph.height * 10)+"S"+graph.handle.scale);
+ graph.handle.translate(
+ graph.width * 20 - graph.handle[0].attr("translation").x,
+ graph.height * 10 - graph.handle[0].attr("translation").y);
graph.topLabel = label([graph.width / 2 - 0.5, 1], graph.width, "above");
graph.leftLabel = label([-1, -graph.height / 2 + 0.5], graph.height, "left");
@@ -79,18 +80,15 @@
graph.handle.push(line(
[0.12, 0],
[0.12, 1], { stroke: BLUE, opacity: 1.0 }));
- graph.handle.scale = 1.0;
graph.dragHandle.visibleShape.remove();
graph.dragHandle.mouseTarget.attr({ scale: 2.0 });
$(graph.dragHandle.mouseTarget[0]).bind("vmouseover", function(event) {
- graph.handle.scale = 1.5;
- graph.handle.animate({ transform: "T"+(graph.width * 20)+","+(graph.height * 10)+"S1.5", stroke: BLUE }, 30);
+ graph.handle.animate({ scale: 1.5, stroke: BLUE }, 50);
});
$(graph.dragHandle.mouseTarget[0]).bind("vmouseout", function(event) {
- graph.handle.scale = 1.0;
- graph.handle.animate({ transform: "T"+(graph.width * 20)+","+(graph.height * 10)+"S1.0", stroke: BLUE }, 30);
+ graph.handle.animate({ scale: 1.0, stroke: BLUE }, 50);
});
graph.redraw();
@@ -180,7 +180,9 @@
centerPoint = addMovablePoint({
coord: [0, 0],
- fixed: true,
+ constraints: {
+ fixed: true
+ },
normalStyle: {
fill: "#fff",
stroke: "#000",
@@ -179,14 +179,14 @@ $.extend(KhanUtil, {
if (event.type === "vmouseover") {
KhanUtil.highlight = true;
if (!KhanUtil.dragging) {
- graph.slopePoints[index].animate({ rx: 8, ry: 8 }, 50);
+ graph.slopePoints[index].animate({ scale: 2 }, 50);
graph.tangentLines[index].animate({ "stroke": KhanUtil.DDX_COLOR }, 100);
}
} else if (event.type === "vmouseout") {
KhanUtil.highlight = false;
if (!KhanUtil.dragging) {
- graph.slopePoints[index].animate({ rx: 4, ry: 4 }, 50);
+ graph.slopePoints[index].animate({ scale: 1 }, 50);
graph.tangentLines[index].animate({ "stroke": KhanUtil.TANGENT_COLOR }, 100);
}
@@ -209,7 +209,7 @@ $.extend(KhanUtil, {
if (event.type === "vmousemove") {
$($("div#solutionarea :text")[index]).val(KhanUtil.roundTo(2, coordY));
$($("div#solutionarea .answer-label")[index]).text(KhanUtil.roundTo(2, coordY));
- graph.tangentLines[index].transform("R"+(-Math.atan(coordY * (graph.scale[1] / graph.scale[0])) * (180 / Math.PI)));
+ graph.tangentLines[index].rotate(-Math.atan(coordY * (graph.scale[1] / graph.scale[0])) * (180 / Math.PI), true);
graph.slopePoints[index].attr("cy", mouseY);
graph.mouseTargets[index].attr("cy", mouseY);
@@ -222,7 +222,7 @@ $.extend(KhanUtil, {
graph.tangentLines[index].animate({ scale: 1 }, 200);
if (!KhanUtil.highlight) {
- graph.slopePoints[index].animate({ rx: 4, ry: 4 }, 200);
+ graph.slopePoints[index].animate({ scale: 1 }, 200);
graph.tangentLines[index].animate({ "stroke": KhanUtil.TANGENT_COLOR }, 100);
}
@@ -258,7 +258,7 @@ $.extend(KhanUtil, {
$($("div#solutionarea :text")[index]).val(KhanUtil.roundTo(2, coordY));
$($("div#solutionarea .answer-label")[index]).text(KhanUtil.roundTo(2, coordY));
- graph.tangentLines[index].transform("R"+(-Math.atan(coordY * (graph.scale[1] / graph.scale[0])) * (180 / Math.PI)));
+ graph.tangentLines[index].rotate(-Math.atan(coordY * (graph.scale[1] / graph.scale[0])) * (180 / Math.PI), true);
graph.slopePoints[index].attr("cy", (graph.range[1][1] - coordY) * graph.scale[1]);
graph.mouseTargets[index].attr("cy", (graph.range[1][1] - coordY) * graph.scale[1]);
},
View
@@ -32,11 +32,6 @@
return [(x - xRange[0]) * xScale, (yRange[1] - y) * yScale];
};
- var unscalePoint = function(point) {
- var x = point[0], y = point[1];
- return [x / xScale + xRange[0], yRange[1] - y / yScale];
- }
-
var svgPath = function(points) {
// Bound a number by 1e-6 and 1e20 to avoid exponents after toString
function boundNumber(num) {
@@ -166,12 +161,9 @@
subpath.arrowheadsDrawn = true;
path.remove();
- head.attr(attrs).attr({
- "stroke-linejoin": "round",
- "stroke-linecap": "round"
- }).transform("t" + almostTheEnd.x + "," +
- almostTheEnd.y + "r" + angle + ",0.75,0" +
- "s" + s + "," + s + ",0.75,0");
+ head.rotate(angle, 0.75, 0).scale(s, s, 0.75, 0)
+ .translate(almostTheEnd.x, almostTheEnd.y).attr(attrs)
+ .attr({ "stroke-linejoin": "round", "stroke-linecap": "round" });
head.arrowheadsDrawn = true;
set.push(subpath);
set.push(head);
@@ -406,7 +398,6 @@
scalePoint: scalePoint,
scaleVector: scaleVector,
- unscalePoint: unscalePoint,
polar: polar,
cartToPolar: cartToPolar
Oops, something went wrong.

0 comments on commit c905494

Please sign in to comment.