{$_(
{point, scale},
"Dilation about %(point)s by %(scale)s"
)}
);
},
value: function() {
var scale = this.refs.scale.getValue();
var x = this.refs.x.getValue();
var y = this.refs.y.getValue();
return {
scale: scale,
center: [x, y],
};
},
/* InputPath API */
setInputValue: function(path, value, cb) {
var id = _.first(path);
var scale = this.state.scale;
var center = _.clone(this.state.center);
if (id === "x") {
center[0] = value;
} else if (id === "y") {
center[1] = value;
} else if (id === "scale") {
scale = value;
}
this.setState({scale: scale, center: center}, () => {
this.props.onChange(cb);
});
},
getInputPaths: function() {
return [["x"], ["y"], ["scale"]];
},
}),
},
};
/* Various functions to deal with different shape types */
var ShapeTypes = {
getPointCountForType: function(type) {
var splitType = type.split("-");
if (splitType[0] === "polygon") {
return splitType[1] || 3;
} else if (splitType[0] === "line" || splitType[0] === "lineSegment") {
return 2;
} else if (splitType[0] === "angle") {
return 3;
} else if (splitType[0] === "circle") {
return 2;
} else if (splitType[0] === "point") {
return 1;
}
},
addMovableShape: function(graphie, options) {
if (options.editable && options.translatable) {
throw new Error(
"It doesn't make sense to have a movable shape " +
"where you can stretch the points and translate them " +
"simultaneously. options: " +
JSON.stringify(options)
);
}
var shape;
var points = _.map(options.shape.coords, function(coord) {
var currentPoint;
var isMoving = false;
var previousCoord = coord;
var onMove = function(x, y) {
if (!isMoving) {
previousCoord = currentPoint.coord;
isMoving = true;
}
var moveVector = kvector.subtract([x, y], currentPoint.coord);
// Translate from (x, y) semantics to (dX, dY) semantics
// This is more useful for translations on multiple points,
// where we care about how the points moved, not where any
// individual point ended up
if (options.onMove) {
moveVector = options.onMove(moveVector[0], moveVector[1]);
}
// Perform a translation on all points in this shape when
// any point moves
if (options.translatable) {
_.each(points, function(point) {
// The point itself will be updated by the
// movablePoint class, so only translate the other
// points
if (point !== currentPoint) {
point.setCoord(
kvector.add(point.coord, moveVector)
);
}
});
}
// Update our shape and our currentPoint
// Without this, some shapes (circles, angles) appear
// "bouncy" as they are updated with currentPoint at the
// current mouse coordinate (oldCoord), rather than newCoord
var oldCoord = currentPoint.coord;
var newCoord = kvector.add(currentPoint.coord, moveVector);
// Temporarily change our coordinate so that
// shape.update() sees the new coordinate
currentPoint.coord = newCoord;
shape.update();
// ...But don't break onMove, which assumes it
// is the only thing changing our coord
currentPoint.coord = oldCoord;
return newCoord;
};
var onMoveEnd = function() {
// onMove isn't guaranteed to be called before onMoveEnd, so
// we have to take into account that we may not have moved and
// set previousCoord.
if (options.onMoveEnd && isMoving) {
isMoving = false;
// We don't use the supplied x and y parameters here
// because MovablePoint's onMoveEnd semantics suck.
// It returns the mouseX, mouseY without processing them
// through onMove, leaving us with weird fractional moves
var change = kvector.subtract(
currentPoint.coord,
previousCoord
);
options.onMoveEnd(change[0], change[1]);
}
shape.update();
};
currentPoint = graphie.addMovablePoint({
coord: coord,
normalStyle: options.normalPointStyle,
highlightStyle: options.highlightPointStyle,
constraints: {
fixed: !options.translatable && !options.editable,
},
visible: options.showPoints,
snapX: (options.snap && options.snap[0]) || 0,
snapY: (options.snap && options.snap[1]) || 0,
bounded: false, // Don't bound it when placing it on the graph
onMove: onMove,
onMoveEnd: onMoveEnd,
});
// Bound it when moving
// We can't set this earlier, because doing so would mean any
// points outside of the graph would be moved into a moved into
// a position that doesn't preserve the shape
currentPoint.bounded = true;
return currentPoint;
});
shape = ShapeTypes.addShape(graphie, options, points);
var removeShapeWithoutPoints = shape.remove;
shape.remove = function() {
removeShapeWithoutPoints.apply(shape);
_.invoke(points, "remove");
};
return shape;
},
addShape: function(graphie, options, points) {
points = points || options.shape.coords;
var types = ShapeTypes._typesOf(options.shape);
var typeOptions =
options.shape.options || ShapeTypes.defaultOptions(types);
var shapes = ShapeTypes._mapTypes(types, points, function(type, points, i) {
var shapeOptions = _.extend({}, options, typeOptions[i]);
return ShapeTypes._addType(graphie, type, points, shapeOptions);
});
var updateFuncs = _.filter(_.pluck(shapes, "update"), _.identity);
var update = function() {
_.invoke(updateFuncs, "call");
};
var removeFuncs = _.filter(_.pluck(shapes, "remove"), _.identity);
var remove = function() {
_.invoke(removeFuncs, "call");
};
var getOptions = function() {
return _.map(shapes, function(shape) {
if (shape.getOptions) {
return shape.getOptions();
} else {
return {};
}
});
};
var toJSON = function() {
var coords = _.map(points, function(pt) {
if (_.isArray(pt)) {
return pt;
} else {
return pt.coord;
}
});
return {
type: types,
coords: coords,
options: getOptions(),
};
};
return {
type: types,
points: points,
update: update,
remove: remove,
toJSON: toJSON,
getOptions: getOptions,
};
},
equal: function(shape1, shape2) {
var types1 = ShapeTypes._typesOf(shape1);
var types2 = ShapeTypes._typesOf(shape2);
if (types1.length !== types2.length) {
return false;
}
var shapes1 = ShapeTypes._mapTypes(
types1,
shape1.coords,
ShapeTypes._combine
);
var shapes2 = ShapeTypes._mapTypes(
types2,
shape2.coords,
ShapeTypes._combine
);
return _.all(
_.map(shapes1, function(partialShape1, i) {
var partialShape2 = shapes2[i];
if (partialShape1.type !== partialShape2.type) {
return false;
}
return ShapeTypes._forType(partialShape1.type).equal(
partialShape1.coords,
partialShape2.coords
);
})
);
},
_typesOf: function(shape) {
var types = shape.type;
if (!_.isArray(types)) {
types = [types];
}
return _.map(types, function(type) {
if (type === "polygon") {
return "polygon-3";
} else {
return type;
}
});
},
defaultOptions: function(types) {
return _.map(types, function(type) {
var typeDefaultOptions = ShapeTypes._forType(type).defaultOptions;
return _.extend({}, typeDefaultOptions);
});
},
_forType: function(type) {
var baseType = type.split("-")[0];
return ShapeTypes[baseType];
},
_mapTypes: function(types, points, func, context) {
return _.map(types, function(type, i) {
var pointCount = ShapeTypes.getPointCountForType(type);
var currentPoints = _.first(points, pointCount);
points = _.rest(points, pointCount);
return func.call(context, type, currentPoints, i);
});
},
_addType: function(graphie, type, points, options) {
var lineCoords = _.isArray(points[0])
? {
coordA: points[0],
coordZ: points[1],
}
: {
pointA: points[0],
pointZ: points[1],
};
type = type.split("-")[0];
if (type === "polygon") {
var polygon = graphie.addMovablePolygon(
_.extend({}, options, {
fixed: !options.editable,
snapX: (options.snap && options.snap[0]) || 0,
snapY: (options.snap && options.snap[1]) || 0,
points: points,
constrainToGraph: false,
})
);
return {
update: polygon.transform.bind(polygon),
remove: polygon.remove.bind(polygon),
};
} else if (type === "line" || type === "lineSegment") {
var line = graphie.addMovableLineSegment(
_.extend({}, options, lineCoords, {
movePointsWithLine: true,
fixed: true,
constraints: {
fixed: true,
},
extendLine: type === "line",
})
);
// TODO(jack): Hide points on uneditable lines when translation
// is a vector.
// We can't just remove the points yet, because they are the
// translation handle for the line.
return {
update: line.transform.bind(line, true),
remove: line.remove.bind(line),
};
} else if (type === "angle") {
// If this angle is editable, we want to be able to make angles
// both larger and smaller than 180 degrees.
// If this angle is not editable, it should always maintain
// it's angle measure, even if it is reflected (causing the
// clockwise-ness of the points to change)
var shouldChangeReflexivity = options.editable ? null : false;
var angle = graphie.addMovableAngle({
angleLabel: "$deg0",
fixed: true,
points: points,
normalStyle: options.normalStyle,
reflex: options.reflex,
});
// Hide non-vertex points on uneditable angles
if (!_.isArray(points[0]) && !options.editable) {
points[0].remove();
points[2].remove();
}
return {
update: angle.update.bind(angle, shouldChangeReflexivity),
remove: angle.remove.bind(angle),
getOptions: function() {
return {
reflex: angle.isReflex(),
};
},
};
} else if (type === "circle") {
var perimeter = {
// temporary object for the first removal
remove: _.identity,
};
var redrawPerim = function() {
var coord0 = points[0].coord || points[0];
var coord1 = points[1].coord || points[1];
var radius = kpoint.distanceToPoint(coord0, coord1);
perimeter.remove();
perimeter = graphie.circle(
coord0,
radius,
_.extend(
{
stroke: KhanColors.DYNAMIC,
"stroke-width": 2,
},
options.normalStyle
)
);
};
redrawPerim();
if (points[1].remove && !options.editable) {
points[1].remove();
}
return {
update: redrawPerim,
remove: function() {
// Not _.bind because the remove function changes
// when the perimeter is redrawn
perimeter.remove();
},
};
} else if (type === "point") {
// do nothing
return {
update: null,
remove: null,
};
} else {
throw new Error("Invalid shape type " + type);
}
},
_combine: function(type, coords) {
return {
type: type,
coords: coords,
};
},
polygon: {
equal: orderInsensitiveCoordsEqual,
},
line: {
equal: kline.equal,
},
lineSegment: {
equal: orderInsensitiveCoordsEqual,
},
angle: {
equal: function(points1, points2) {
if (!kpoint.equal(points1[1], points2[1])) {
return false;
}
var line1_0 = [points1[1], points1[0]];
var line1_2 = [points1[1], points1[2]];
var line2_0 = [points2[1], points2[0]];
var line2_2 = [points2[1], points2[2]];
var equalUnflipped =
kray.equal(line1_0, line2_0) && kray.equal(line1_2, line2_2);
var equalFlipped =
kray.equal(line1_0, line2_2) && kray.equal(line1_2, line2_0);
return equalUnflipped || equalFlipped;
},
defaultOptions: {
reflex: false,
},
},
circle: {
equal: function(points1, points2) {
var radius1 = kpoint.distanceToPoint(points1[0], points1[1]);
var radius2 = kpoint.distanceToPoint(points2[0], points2[1]);
return (
kpoint.equal(points1[0], points2[0]) &&
knumber.equal(radius1, radius2)
);
},
},
point: {
equal: kpoint.equal,
},
};
var TransformationListItem = TransformOps.ListItem;
var TransformationList = createReactClass({
render: function() {
if (this.props.mode === "static") {
return ; // don't render anything
}
var transformationList = _.map(
this.props.transformations,
function(transform, i) {
return (
);
},
this
);
return (
);
},
changeSelected: function(tool) {
if (tool) {
this.props.addTool(tool);
}
},
});
var Transformer = createReactClass({
propTypes: {
apiOptions: ApiOptions.propTypes,
keypadElement: keypadElementPropType,
trackInteraction: PropTypes.func.isRequired,
},
getDefaultProps: function() {
return _.defaults(
{
transformations: [],
},
defaultTransformerProps
);
},
render: function() {
// Fill in any missing value in this.props.graph
// this can happen because the graph json doesn't include
// box, for example
var graph = _.extend(
defaultGraphProps(this.props.graph, defaultBoxSize),
this.props.graph
);
var interactiveToolsMode = this.props.graphMode === "interactive";
var ToolsBarClass = interactiveToolsMode ? ToolsBar : AddTransformBar;
// This style is applied inline because it is dependent on the
// size of the graph as set by the graph.box prop, and this also
// lets us specify it in the same place the graph's width is
// specified.
var toolsBar = (
);
return (
{!interactiveToolsMode && "Add transformations below:"}
{this.props.graphMode === "static" && [
,
{" "}Note: For this question, the shape will not
move.{" "}
,
]}
{interactiveToolsMode && toolsBar}
{!interactiveToolsMode && toolsBar}
);
},
componentDidMount: function() {
this.setupGraphie(this.graphie());
},
componentDidUpdate: function(prevProps) {
if (this.shouldSetupGraphie(this.props, prevProps)) {
this.refs.graph.reset();
} else if (!deepEq(this.props.transformations, this.transformations)) {
this.setTransformations(this.props.transformations);
}
},
shouldSetupGraphie: function(nextProps, prevProps) {
if (!deepEq(prevProps.starting, nextProps.starting)) {
return true;
} else if (prevProps.graphMode !== nextProps.graphMode) {
return true;
} else if (prevProps.listMode !== nextProps.listMode) {
return true;
} else if (
prevProps.drawSolutionShape !== nextProps.drawSolutionShape
) {
return true;
} else if (
nextProps.drawSolutionShape &&
!deepEq(prevProps.correct.shape, nextProps.correct.shape)
) {
return true;
} else if (!deepEq(this.tools, nextProps.tools)) {
return true;
} else {
return false;
}
},
graphie: function() {
return this.refs.graph.graphie();
},
setupGraphie: function(graphie) {
// A background image of our solution:
if (
this.props.drawSolutionShape &&
this.props.correct.shape &&
this.props.correct.shape.coords
) {
ShapeTypes.addShape(graphie, {
fixed: true,
shape: this.props.correct.shape,
normalStyle: {
stroke: KhanColors.GRAY,
"stroke-dasharray": "",
"stroke-width": 2,
},
});
}
this.currentTool = null;
this.refs.toolsBar.changeSelected(null);
this.addTransformerShape(
this.props.starting.shape,
/* translatable */ false
);
this.setTransformations(this.props.transformations);
// Save a copy of our tools so that we can check future
// this.props.tools changes against them
// This seems weird, but gives us an easy way to tell whether
// props changes were self-inflicted (for which a graphie reset
// is not required, and is in fact a bad idea right now because
// of resetting the size of the dilation tool).
// TODO (jack): A deepClone method would be nice here
this.tools = {
translation: _.clone(this.props.tools.translation),
rotation: _.clone(this.props.tools.rotation),
reflection: _.clone(this.props.tools.reflection),
dilation: _.clone(this.props.tools.dilation),
};
},
/* Applies all transformations in `transformations`
* to the starting shape, and updates this.transformations
* to reflect this
*
* Usually called with this.props.transformations
*/
setTransformations: function(transformations) {
this.resetCoords();
this.transformations = _.clone(transformations);
_.each(this.transformations, this.applyTransform);
},
// the polygon that we transform
addTransformerShape: function(shape, translatable) {
var self = this;
var graphie = this.graphie();
this.shape = ShapeTypes.addMovableShape(graphie, {
shape: shape,
editable: false,
showPoints: this.props.graphMode !== "static",
translatable: translatable,
onMove: function(dX, dY) {
dX = KhanMath.roundToNearest(graphie.snap[0], dX);
dY = KhanMath.roundToNearest(graphie.snap[1], dY);
self.addTransform({
type: "translation",
vector: [dX, dY],
});
return [dX, dY];
},
normalPointStyle: {
fill: translatable
? KhanColors.INTERACTIVE
: KhanColors.DYNAMIC,
stroke: translatable
? KhanColors.INTERACTIVE
: KhanColors.DYNAMIC,
},
highlightPointStyle: {
fill: KhanColors.INTERACTING,
stroke: KhanColors.INTERACTING,
},
});
},
addTool: function(toolId) {
var self = this;
if (this.props.graphMode === "interactive") {
if (toolId === "translation") {
this.currentTool = this.addTranslationTool();
} else if (toolId === "rotation") {
this.currentTool = this.addRotationTool();
} else if (toolId === "reflection") {
this.currentTool = this.addReflectionTool();
} else if (toolId === "dilation") {
this.currentTool = this.addDilationTool();
} else {
throw new Error("Invalid tool id: " + toolId);
}
} else {
var transform;
if (toolId === "translation") {
transform = {
type: toolId,
vector: [null, null],
};
} else if (toolId === "rotation") {
transform = {
type: toolId,
center: [null, null],
angleDeg: null,
};
} else if (toolId === "reflection") {
// Reflections with nulls in them won't be applied until
// fills in the blanks
transform = {
type: toolId,
line: [[null, null], [null, null]],
};
} else if (toolId === "dilation") {
transform = {
type: toolId,
center: [null, null],
scale: null,
};
} else {
throw new Error("Invalid tool id: " + toolId);
}
this.doTransform(transform, function() {
self.refs.transformationList.focusLast();
});
}
},
removeTool: function(toolId) {
if (this.currentTool) {
this.currentTool.remove();
}
this.currentTool = null;
},
addTranslationTool: function() {
var self = this;
this.shape.remove();
this.addTransformerShape(this.shape.toJSON(), /* translatable */ true);
return {
remove: function() {
self.shape.remove();
self.addTransformerShape(
self.shape.toJSON(),
/* translatable */ false
);
},
};
},
// Snaps a coord to this.graphie()'s snap
snapCoord: function(coord) {
var graphie = this.graphie();
return _.map(coord, function(val, dim) {
return KhanMath.roundToNearest(graphie.snap[dim], val);
});
},
// Normalize the coords into something that fits the new 45 degree
// reflection line.
normalizeReflectionCoords: function(messyCoords) {
var midpoint = this.snapCoord(kline.midpoint(messyCoords));
var origDirectionPolar = kvector.polarDegFromCart(
kvector.subtract(messyCoords[0], messyCoords[1])
);
var directionPolar = [
1,
KhanMath.roundToNearest(45, origDirectionPolar[1]),
];
var direction = kvector.cartFromPolarDeg(directionPolar);
var coords = _.map(
[-1, 1],
function(directionCoefficient) {
var coord = kvector.add(
midpoint,
kvector.scale(
direction,
directionCoefficient *
this.scaleToCurrentRange(REFLECT_ROTATE_HANDLE_DIST)
)
);
return this.snapCoord(coord);
},
this
);
return coords;
},
addReflectionTool: function() {
var options = this.props.tools.reflection;
if (!options.enabled) {
return;
}
var self = this;
var graphie = this.refs.graph.graphie();
var updateReflectionTool = function() {
self.changeTool("reflection", {
coords: _.pluck(reflectPoints, "coord"),
});
};
var coords = this.normalizeReflectionCoords(options.coords);
// The points defining the line of reflection; hidden from the
// user.
var reflectPoints = _.map(
coords,
function(coord) {
return graphie.addMovablePoint({
coord: coord,
visible: false,
});
},
this
);
// the line of reflection
// TODO(jack): graphie.style here is a hack to prevent the dashed
// style from leaking into the rest of the shapes. Remove when
// graphie.addMovableLineSegment doesn't leak styles anymore.
var reflectLine;
var normalColor = colorForTool(options);
graphie.style({}, function() {
reflectLine = graphie.addMovableLineSegment({
fixed: options.constraints.fixed,
constraints: options.constraints,
pointA: reflectPoints[0],
pointZ: reflectPoints[1],
snapX: graphie.snap[0],
snapY: graphie.snap[1],
extendLine: true,
normalStyle: {
stroke: normalColor,
"stroke-width": 2,
"stroke-dasharray": "- ",
},
highlightStyle: {
stroke: KhanColors.INTERACTING,
"stroke-width": 2,
"stroke-dasharray": "- ", // TODO(jack) solid doesn't
// work here, but would be
// nicer
},
movePointsWithLine: true,
onMoveEnd: updateReflectionTool,
});
});
// the "button" point in the center of the line of reflection
var reflectButton = graphie.addReflectButton({
fixed: options.constraints.fixed,
line: reflectLine,
size: this.scaleToCurrentRange(REFLECT_BUTTON_SIZE),
onClick: function() {
self.doTransform({
type: "reflection",
line: _.pluck(reflectPoints, "coord"),
});
if (reflectRotateHandle) {
// flip the rotation handle
reflectRotateHandle.setCoord(
kvector.add(
reflectButton.coord,
kvector.subtract(
reflectButton.coord,
reflectRotateHandle.coord
)
)
);
reflectRotateHandle.update();
}
},
normalStyle: {
stroke: normalColor,
"stroke-width": 2,
fill: normalColor,
},
highlightStyle: {
stroke: KhanColors.INTERACTING,
"stroke-width": 3,
fill: KhanColors.INTERACTING,
},
onMoveEnd: updateReflectionTool,
});
var reflectRotateHandle = null;
if (!options.constraints.fixed) {
// The rotation handle for rotating the line of reflection
var initRotateHandleAngle =
kvector.polarDegFromCart(
kvector.subtract(
reflectPoints[1].coord,
reflectPoints[0].coord
)
)[1] + 90; // 90 degrees off of the line
reflectRotateHandle = graphie.addRotateHandle({
center: reflectButton,
radius: this.scaleToCurrentRange(REFLECT_ROTATE_HANDLE_DIST),
angleDeg: initRotateHandleAngle,
width: this.scaleToCurrentRange(0.24),
hoverWidth: this.scaleToCurrentRange(0.4),
lengthAngle: 17,
onMove: function(newAngle) {
return KhanMath.roundToNearest(45, newAngle);
},
onMoveEnd: updateReflectionTool,
});
}
// Move the reflectButton and reflectRotateHandle with the line
$(reflectLine).on("move", function() {
reflectButton.update();
$(reflectButton).trigger("move"); // update the rotation handle,
// which watches for this in util/interactive.js.
});
// Update the line and reflect button when the reflectRotateHandle is
// rotated
if (reflectRotateHandle) {
$(reflectRotateHandle).on("move", function() {
var rotateHandleApprox = self.snapCoord(
reflectRotateHandle.coord
);
var rotateVector = kvector.subtract(
rotateHandleApprox,
reflectButton.coord
);
var flipped = reflectButton.isFlipped() ? 1 : 0;
reflectPoints[flipped].setCoord(
kvector.add(
reflectButton.coord,
kvector.rotateDeg(rotateVector, 90)
)
);
reflectPoints[1 - flipped].setCoord(
kvector.add(
reflectButton.coord,
kvector.rotateDeg(rotateVector, -90)
)
);
reflectLine.transform(true);
reflectButton.update();
});
}
return {
remove: function() {
reflectButton.remove();
if (reflectRotateHandle) {
reflectRotateHandle.remove();
}
reflectLine.remove();
reflectPoints[0].remove();
reflectPoints[1].remove();
},
};
},
/* Scales a distance from the default range of
* [-10, 10] to the current this.props.graph.range
*
* Used for sizing various transformation tools
* (rotation handle, dilation circle)
*/
scaleToCurrentRange: function(dist) {
return scaleToRange(dist, this.refs.graph.props.range);
},
addRotationTool: function() {
var options = this.props.tools.rotation;
if (!options.enabled) {
return;
}
var self = this;
var graphie = this.refs.graph.graphie();
var pointColor = colorForTool(options);
// The center of our rotation, which can be moved to change the
// center of rotation
this.rotatePoint = graphie.addMovablePoint({
constraints: options.constraints,
coord: options.coord,
snapX: graphie.snap[0],
snapY: graphie.snap[1],
normalStyle: {
// ugh, this seems to be a global and
"stroke-dasharray": "", // is set to dash above
stroke: pointColor,
fill: pointColor,
},
highlightStyle: {
"stroke-dasharray": "",
stroke: KhanColors.INTERACTING,
fill: KhanColors.INTERACTING,
},
});
// The point that we move around the center of rotation to actually
// cause rotations
this.rotateHandle = graphie.addRotateHandle({
center: this.rotatePoint,
radius: this.scaleToCurrentRange(ROTATE_HANDLE_DIST),
width: this.scaleToCurrentRange(0.24),
hoverWidth: this.scaleToCurrentRange(0.4),
onMove: function(newAngle, oldAngle) {
var transform = self.getRotationTransformFromAngle(
self.rotatePoint.coord,
newAngle - oldAngle
);
// Rotate polygon with rotateHandle
self.doTransform(transform);
return oldAngle + transform.angleDeg;
},
});
// Update tools.rotation.coord
this.rotatePoint.onMoveEnd = function(x, y) {
self.changeTool("rotation", {
coord: [x, y],
});
};
return {
remove: function() {
self.rotateHandle.remove();
self.rotatePoint.remove();
},
};
},
addDilationTool: function() {
var options = this.props.tools.dilation;
if (!options.enabled) {
return;
}
var self = this;
var graphie = this.refs.graph.graphie();
var pointColor = colorForTool(options);
// the circle for causing dilation transforms
self.dilationCircle = graphie.addCircleGraph({
centerConstraints: options.constraints,
center: options.coord,
radius: self.scaleToCurrentRange(2),
snapX: graphie.snap[0],
snapY: graphie.snap[1],
minRadius: self.scaleToCurrentRange(1),
snapRadius: self.scaleToCurrentRange(0.5),
onResize: function(newRadius, oldRadius) {
self.doTransform({
type: "dilation",
center: self.dilationCircle.centerPoint.coord,
scale: newRadius / oldRadius,
});
},
circleNormalStyle: {
stroke: pointColor,
"stroke-width": 2,
"stroke-dasharray": "- ",
"fill-opacity": 0,
},
circleHighlightStyle: {
stroke: KhanColors.INTERACTING,
"stroke-width": 2,
"stroke-dasharray": "",
fill: KhanColors.INTERACTING,
"fill-opacity": 0.05,
},
centerNormalStyle: {
stroke: pointColor,
fill: pointColor,
"stroke-width": 2,
"stroke-dasharray": "",
},
centerHighlightStyle: {
stroke: pointColor,
fill: pointColor,
"stroke-width": 2,
"stroke-dasharray": "",
},
});
var origOnMoveEnd = this.dilationCircle.centerPoint.onMoveEnd;
this.dilationCircle.centerPoint.onMoveEnd = function() {
if (origOnMoveEnd) {
origOnMoveEnd.apply(this, _.toArray(arguments));
}
self.changeTool("dilation", {
coord: self.dilationCircle.centerPoint.coord,
});
};
return {
remove: function() {
self.dilationCircle.remove();
},
};
},
// returns a transformation object representing a rotation
// rounds the angle to the nearest 15 degrees
getRotationTransformFromAngle: function(center, angleChanged) {
angleChanged = (angleChanged + 360) % 360;
if (angleChanged > 180) {
angleChanged -= 360;
}
var roundedAngle =
Math.round(angleChanged / ROTATE_SNAP_DEGREES) *
ROTATE_SNAP_DEGREES;
return {
type: "rotation",
center: center,
angleDeg: roundedAngle,
};
},
// apply and save a transform
doTransform: function(transform, callback) {
this.applyTransform(transform);
this.addTransform(transform, callback);
},
// apply a transform to our polygon (without modifying our transformation
// list)
applyTransform: function(transform) {
if (this.props.graphMode !== "static") {
var transformFunc = TransformOps.apply(transform);
this.applyCoordTransformation(transformFunc);
}
},
// transform our polygon by transforming each point using a given function
applyCoordTransformation: function(pointTransform) {
_.each(this.shape.points, function(point) {
var newCoord = pointTransform(point.coord);
point.setCoord(newCoord);
});
this.shape.update();
},
resetCoords: function() {
var startCoords = this.props.starting.shape.coords;
_.each(this.shape.points, function(point, i) {
point.setCoord(startCoords[i]);
});
this.shape.update();
},
// Remove the last transformation
handleUndoClick: function() {
this.refs.toolsBar.changeSelected(null);
if (this.props.transformations.length) {
this.props.onChange({
transformations: _.initial(this.props.transformations),
});
}
},
setTransformationProps: function(newTransfomationList, callback) {
this.props.onChange(
{
transformations: newTransfomationList,
},
callback
);
},
// add a transformation to our props list of transformation
addTransform: function(transform, callback) {
this.transformations = TransformOps.append(
this.transformations,
transform
);
this.props.onChange(
{
transformations: _.clone(this.transformations),
},
callback
);
},
changeTool: function(tool, changes) {
var newTools = _.clone(this.props.tools);
newTools[tool] = _.extend({}, this.props.tools[tool], changes);
this.tools[tool] = _.clone(newTools[tool]);
this.props.onChange({
tools: newTools,
});
this.props.trackInteraction();
},
simpleValidate: function(rubric) {
return Transformer.validate(this.getUserInput(), rubric);
},
/**
* Calculate where the coordinates would be if they were
* moved, even if we're in formal mode with no movement
* (and thus the actual movablepoints may not have moved
*/
getCoords: function() {
var startCoords = this.props.starting.shape.coords;
var transforms = this.props.transformations;
return _.reduce(
transforms,
function(coords, transform) {
return _.map(coords, TransformOps.apply(transform));
},
startCoords
);
},
getEditorJSON: function() {
var json = _.pick(
this.props,
"grading",
"starting",
"graphMode",
"listMode",
"tools",
"drawSolutionShape",
"gradeEmpty"
);
json.graph = this.refs.graph.toJSON();
json.version = 1.2; // Give us some safety to change the format
// when we realize that I wrote
// a horrible json spec for this widget
json.answer = this.getUserInput();
return json;
},
getUserInput: function() {
return {
transformations: this.props.transformations,
// This doesn't call this.shape.toJSON() because that doesn't
// handle coordinates in formal mode without movement, since
// the movablepoints never move
shape: {
type: this.shape.type,
coords: this.getCoords(),
options: this.shape.getOptions(),
},
};
},
/* InputPath API */
_handleFocus: function() {
var path = Array.prototype.slice.call(arguments);
this.props.onFocus(path);
},
_handleBlur: function() {
var path = Array.prototype.slice.call(arguments);
this.props.onBlur(path);
},
_getTransformationForID: function(transformationID) {
// Returns the 'transformation' component corresponding to a given ID
var refPath = [
"transformationList",
"transformation" + transformationID,
];
// Follow the path of references
var component = this;
_.each(refPath, ref => {
component = component.refs[ref];
});
return component;
},
getInputPaths: function() {
// If we're in static mode, then there is no transformation list, and,
// as a result, no input paths.
if (this.props.listMode === "static") {
return [];
}
var inputPaths = [];
_.each(this.props.transformations, (transformation, i) => {
var transformation = this._getTransformationForID(i);
var innerPaths = transformation.getInputPaths();
var fullPaths = _.map(innerPaths, innerPath => {
return ["" + i].concat(innerPath);
});
inputPaths = inputPaths.concat(fullPaths);
});
return inputPaths;
},
_passToInner: function(functionName, path) {
if (!path || !path.length) {
return;
}
// First argument tells us which transformation will receive the call;
// remaining arguments are used within that transformation to identify
// a specific input.
var innerPath = _.rest(path);
var args = [innerPath].concat(_.rest(arguments, 2));
// Pass arguments down to appropriate 'transformation' component
var transformationID = _.head(path);
var caller = this._getTransformationForID(transformationID);
return caller[functionName].apply(caller, args);
},
focus: function() {
// Just focus the first showing input
var inputs = this.getInputPaths();
if (inputs.length > 0) {
this.focusInputPath(inputs[0]);
return true;
}
return false;
},
focusInputPath: function(path) {
// Since the transformer exposes the input API, it needs to be robust
// to empty paths. We don't expect this to happen, as entire-widget
// focusing is typically done through the focus() method, which already
// handles the empty path case properly, but it's better to be safe
// here.
if (path.length === 0) {
return false;
}
assert(path.length >= 2);
return this._passToInner("focusInputPath", path);
},
blurInputPath: function(path) {
// Since the transformer exposes the input API, it needs to be robust
// to empty paths (which indicate a blurring of the entire widget,
// e.g., when switching from interacting with the transformer to
// interacting with some other widget).
if (path.length === 0) {
return false;
}
assert(path.length >= 2);
return this._passToInner("blurInputPath", path);
},
setInputValue: function(path, value, cb) {
assert(path.length >= 2);
return this._passToInner("setInputValue", path, value, cb);
},
getDOMNodeForPath: function(path) {
assert(path.length >= 2);
return this._passToInner("getDOMNodeForPath", path);
},
getGrammarTypeForPath: function(path) {
assert(path.length >= 2);
return this._passToInner("getGrammarTypeForPath", path);
},
});
_.extend(Transformer, {
validate: function(guess, rubric) {
// Check for any required transformations
for (var type in Transformations) {
if (rubric.tools[type].required) {
var isUsed = _.any(
_.map(guess.transformations, function(transform) {
// Required transformations must appear in the
// transformation list, and must not be no-ops
return (
transform.type === type &&
!TransformOps.isEmpty(transform) &&
!TransformOps.isNoOp(transform)
);
})
);
if (!isUsed) {
return {
type: "invalid",
message: i18n._(
"Your transformation must use a " + "%(type)s.",
{
type: Transformations[type].lowerNounName,
}
),
};
}
}
}
// Compare shapes
if (ShapeTypes.equal(guess.shape, rubric.correct.shape)) {
return {
type: "points",
earned: 1,
total: 1,
message: null,
};
} else if (
!rubric.gradeEmpty &&
deepEq(guess.shape.coords, rubric.starting.shape.coords)
) {
return {
type: "invalid",
message: i18n._(
"Use the interactive graph to define a " +
"correct transformation."
),
};
} else {
return {
type: "points",
earned: 0,
total: 1,
message: null,
};
}
},
});
_module_.exports = {
name: "transformer",
displayName: "Transformer",
widget: Transformer,
};
export default _module_.exports;