Add a segment tool and graph object and non positional vector grading option.

The segment tool and vector tool both derive from the line tool and
share much of the same code. The segment graph object and vector graph
object derive from the line graph object and also share much of the same
code.

Also add the `vectorsArePositional` option.  This is 0 by default which
means that if a vector is graphed that has the same magnitude and
direction as the correct answer, then it is considered correct. If the
option is set to one, then a vector must also have the same initial
point as the correct answer to be considered correct.

Note that if the `vectorsArePositional` option is 0 and a student graphs
the same vector twice at different locations, then the second vector
will not be considered correct. That is unless there are two correct
answers that are also the same vector.

However, if the student graphs the same vector twice at the same
location (so visibly only one is seen), then the second vector is
ignored, and the answer will still be correct.  This follows the usual
rule of the default grader in attempting to grade things according to
what is seen.

Author: drgrice1

htdocs/js/GraphTool/graphtool.scss

@@ -244,6 +244,10 @@
 				background-image: url('images/Quadrilateral.svg');
 			}
 
+			&.gt-segment-tool {
+				background-image: url('images/Segment.svg');
+			}
+
 			&.gt-vector-tool {
 				background-image: url('images/Vector.svg');
 			}

htdocs/js/GraphTool/images/Segment.svg

@@ -0,0 +1,153 @@
+/* global graphTool, JXG */
+
+'use strict';
+
+(() => {
+	if (!graphTool) return;
+
+	const stringify = function (gt) {
+		return [
+			this.baseObj.getAttribute('dash') === 0 ? 'solid' : 'dashed',
+			...this.definingPts.map(
+				(point) => `(${gt.snapRound(point.X(), gt.snapSizeX)},${gt.snapRound(point.Y(), gt.snapSizeY)})`
+			)
+		].join(',');
+	};
+
+	const restore = function (gt, string, objectClass) {
+		let pointData = gt.pointRegexp.exec(string);
+		const points = [];
+		while (pointData) {
+			points.push(pointData.slice(1, 3));
+			pointData = gt.pointRegexp.exec(string);
+		}
+		if (points.length < 2) return false;
+		const point1 = gt.createPoint(parseFloat(points[0][0]), parseFloat(points[0][1]));
+		const point2 = gt.createPoint(parseFloat(points[1][0]), parseFloat(points[1][1]), point1);
+		return new objectClass(point1, point2, /solid/.test(string));
+	};
+
+	const initialize = function (gt, helpText, objectClass) {
+		this.phase1 = (coords) => {
+			gt.toolTypes.LineTool.prototype.phase1.call(this, coords);
+			this.helpText = helpText;
+			gt.updateHelp();
+		};
+
+		this.phase2 = (coords) => {
+			if (!gt.boardHasPoint(coords[1], coords[2])) return;
+
+			// If the current coordinates are on top of the first,
+			// then use the highlight point coordinates instead.
+			if (
+				Math.abs(this.point1.X() - gt.snapRound(coords[1], gt.snapSizeX)) < JXG.Math.eps &&
+				Math.abs(this.point1.Y() - gt.snapRound(coords[2], gt.snapSizeY)) < JXG.Math.eps
+			)
+				coords = this.hlObjs.hl_point.coords.usrCoords;
+
+			gt.board.off('up');
+
+			const point1 = this.point1;
+			delete this.point1;
+
+			point1.setAttribute(gt.definingPointAttributes);
+
+			point1.on('down', () => gt.onPointDown(point1));
+			point1.on('up', () => gt.onPointUp(point1));
+
+			const point2 = gt.createPoint(coords[1], coords[2], point1);
+			gt.selectedObj = new objectClass(point1, point2, gt.drawSolid);
+			gt.selectedObj.focusPoint = point2;
+			gt.graphedObjs.push(gt.selectedObj);
+
+			this.finish();
+		};
+	};
+
+	if (!graphTool.segmentTool) {
+		graphTool.segmentTool = {
+			Segment: {
+				parent: 'line',
+
+				postInit(_gt, _point1, _point2, _solid) {
+					this.baseObj.setAttribute({ straightFirst: false, straightLast: false });
+				},
+
+				stringify(gt) {
+					return stringify.call(this, gt);
+				},
+
+				restore(gt, string) {
+					return restore.call(this, gt, string, gt.graphObjectTypes.segment);
+				}
+			},
+
+			SegmentTool: {
+				iconName: 'segment',
+				tooltip: 'Segment Tool: Graph a line segment.',
+				parent: 'LineTool',
+
+				initialize(gt) {
+					initialize.call(this, gt, 'Plot the other end of the line segment.', gt.graphObjectTypes.segment);
+				},
+
+				updateHighlights(gt, e) {
+					const handled = gt.toolTypes.LineTool.prototype.updateHighlights.call(this, e);
+					this.hlObjs.hl_line?.setAttribute({ straightFirst: false, straightLast: false });
+					return handled;
+				},
+
+				activate(gt) {
+					this.helpText = 'Plot the points at the ends of the line segment.';
+					gt.updateHelp();
+				}
+			}
+		};
+	}
+
+	if (!graphTool.vectorTool) {
+		graphTool.vectorTool = {
+			Vector: {
+				parent: 'line',
+
+				postInit(_gt, _point1, _point2, _solid) {
+					this.baseObj.setAttribute({ straightFirst: false, straightLast: false });
+					this.baseObj.setArrow(false, { type: 1, size: 4 });
+				},
+
+				stringify(gt) {
+					return stringify.call(this, gt);
+				},
+
+				restore(gt, string) {
+					return restore.call(this, gt, string, gt.graphObjectTypes.vector);
+				}
+			},
+
+			VectorTool: {
+				iconName: 'vector',
+				tooltip: 'Vector Tool: Graph a vector.',
+				parent: 'LineTool',
+
+				initialize(gt) {
+					initialize.call(this, gt, 'Plot the terminal point of the vector.', gt.graphObjectTypes.vector);
+				},
+
+				updateHighlights(gt, e) {
+					const handled = gt.toolTypes.LineTool.prototype.updateHighlights.call(this, e);
+					this.hlObjs.hl_line?.setAttribute({
+						straightFirst: false,
+						straightLast: false,
+						lastArrow: { type: 1, size: 6 }
+					});
+					return handled;
+				},
+
+				activate(gt) {
+					this.helpText = 'Plot the initial point and then the terminal point of the vector.';
+					gt.updateHelp();
+				}
+			}
+		};
+	}
+})();