Switch to a better extension system for the GraphTool.

For JavaScript instead of piecing together the parts of the class
definition, use a function that returns the class definition directly.
This has the advantage of being able to use `super` directly to access
methods of the parent class, and is just much easier to work with.

All of the graph objects and graph tools are now in separate files
(except the SelectTool and SolidDashTool which are core functionality).

For Perl, all graph objects are packages that derive from the
GraphTool::GraphObject package instead of the previous method of
defining cmp and tikz subroutines in a hash. A mapping from the string
identifier to the package is maintained and used to construct the
correct perl object for a graph tool object. There is a compatibility
layer for objects added the old way.

Author: drgrice1

htdocs/js/GraphTool/circletool.js

@@ -0,0 +1,205 @@
+/* global graphTool, JXG */
+
+'use strict';
+
+(() => {
+	if (graphTool && graphTool.circleTool) return;
+
+	graphTool.circleTool = {
+		Circle(gt) {
+			return class Circle extends gt.GraphObject {
+				static strId = 'circle';
+
+				constructor(center, point, solid) {
+					super(
+						gt.board.create('circle', [center, point], {
+							fixed: true,
+							highlight: false,
+							strokeColor: gt.color.curve,
+							dash: solid ? 0 : 2
+						})
+					);
+					this.definingPts.push(center, point);
+					this.focusPoint = center;
+
+					// Redefine the circle's hasPoint method to return true if the center point has the given
+					// coordinates, so that a pointer over the center point will give focus to the object with the
+					// center point activated.
+					const circleHasPoint = this.baseObj.hasPoint.bind(this.baseObj);
+					this.baseObj.hasPoint = (x, y) => circleHasPoint(x, y) || center.hasPoint(x, y);
+				}
+
+				stringify() {
+					return [
+						this.constructor.strId,
+						this.baseObj.getAttribute('dash') == 0 ? 'solid' : 'dashed',
+						...this.definingPts.map(
+							(point) =>
+								`(${gt.snapRound(point.X(), gt.snapSizeX)},${gt.snapRound(point.Y(), gt.snapSizeY)})`
+						)
+					].join(',');
+				}
+
+				fillCmp(point) {
+					return gt.sign(
+						this.baseObj.stdform[3] * (point[1] * point[1] + point[2] * point[2]) +
+							JXG.Math.innerProduct(point, this.baseObj.stdform)
+					);
+				}
+
+				static restore(string) {
+					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 center = gt.createPoint(parseFloat(points[0][0]), parseFloat(points[0][1]));
+					const point = gt.createPoint(parseFloat(points[1][0]), parseFloat(points[1][1]), center);
+					return new this(center, point, /solid/.test(string));
+				}
+			};
+		},
+
+		CircleTool(gt) {
+			return class CirlceTool extends gt.GenericTool {
+				object = 'circle';
+				useStandardActivation = true;
+				activationHelpText = 'Plot the center of the circle.';
+				useStandardDeactivation = true;
+				constructionObjects = ['center'];
+
+				constructor(container, iconName, tooltip) {
+					super(container, iconName ?? 'circle', tooltip ?? 'Circle Tool: Graph a circle.');
+					this.supportsSolidDash = true;
+				}
+
+				handleKeyEvent(e) {
+					if (!this.hlObjs.hl_point || !gt.board.containerObj.contains(document.activeElement)) return;
+
+					if (e.key === 'Enter' || e.key === ' ') {
+						e.preventDefault();
+						e.stopPropagation();
+
+						if (this.center) this.phase2(this.hlObjs.hl_point.coords.usrCoords);
+						else this.phase1(this.hlObjs.hl_point.coords.usrCoords);
+					}
+				}
+
+				updateHighlights(e) {
+					this.hlObjs.hl_circle?.setAttribute({ dash: gt.drawSolid ? 0 : 2 });
+					this.hlObjs.hl_point?.rendNode.focus();
+
+					let coords;
+					if (e instanceof MouseEvent && e.type === 'pointermove') {
+						coords = gt.getMouseCoords(e);
+						this.hlObjs.hl_point?.setPosition(JXG.COORDS_BY_USER, [
+							coords.usrCoords[1],
+							coords.usrCoords[2]
+						]);
+					} else if (e instanceof KeyboardEvent && e.type === 'keydown') {
+						coords = this.hlObjs.hl_point.coords;
+					} else if (e instanceof JXG.Coords) {
+						coords = e;
+						this.hlObjs.hl_point?.setPosition(JXG.COORDS_BY_USER, [
+							coords.usrCoords[1],
+							coords.usrCoords[2]
+						]);
+					} else return false;
+
+					if (!this.hlObjs.hl_point) {
+						this.hlObjs.hl_point = gt.board.create('point', [coords.usrCoords[1], coords.usrCoords[2]], {
+							size: 2,
+							color: gt.color.underConstruction,
+							snapToGrid: true,
+							highlight: false,
+							snapSizeX: gt.snapSizeX,
+							snapSizeY: gt.snapSizeY,
+							withLabel: false
+						});
+						this.hlObjs.hl_point.rendNode.focus();
+					}
+
+					// Make sure the highlight point is not moved off the board or on the center.
+					if (e instanceof Event) gt.adjustDragPosition(e, this.hlObjs.hl_point, this.center);
+
+					if (this.center && !this.hlObjs.hl_circle) {
+						this.hlObjs.hl_circle = gt.board.create('circle', [this.center, this.hlObjs.hl_point], {
+							fixed: true,
+							strokeColor: gt.color.underConstruction,
+							highlight: false,
+							dash: gt.drawSolid ? 0 : 2
+						});
+					}
+
+					gt.setTextCoords(this.hlObjs.hl_point.X(), this.hlObjs.hl_point.Y());
+					gt.board.update();
+					return true;
+				}
+
+				// In phase1 the user has selected a point. If the point is on the board, then create the center of the
+				// circle, and set up phase2.
+				phase1(coords) {
+					if (!gt.boardHasPoint(coords[1], coords[2])) return;
+
+					gt.board.off('up');
+
+					this.center = gt.board.create('point', [coords[1], coords[2]], {
+						size: 2,
+						withLabel: false,
+						highlight: false,
+						snapToGrid: true,
+						snapSizeX: gt.snapSizeX,
+						snapSizeY: gt.snapSizeY
+					});
+					this.center.setAttribute({ fixed: true });
+
+					// Get a new x coordinate that is to the right, unless that is off the board.
+					// In that case go left instead.
+					let newX = this.center.X() + gt.snapSizeX;
+					if (newX > gt.board.getBoundingBox()[2]) newX = this.center.X() - gt.snapSizeX;
+
+					this.updateHighlights(new JXG.Coords(JXG.COORDS_BY_USER, [newX, this.center.Y()], gt.board));
+
+					this.helpText = 'Plot a point on the circle.';
+					gt.updateHelp();
+
+					gt.board.on('up', (e) => this.phase2(gt.getMouseCoords(e).usrCoords));
+
+					gt.board.update();
+				}
+
+				// In phase2 the user has selected a second point.
+				// If that point is on the board, then finalize the circle.
+				phase2(coords) {
+					if (!gt.boardHasPoint(coords[1], coords[2])) return;
+
+					// If the current coordinates are the same those of the first point,
+					// then use the highlight point coordinates instead.
+					if (
+						Math.abs(this.center.X() - gt.snapRound(coords[1], gt.snapSizeX)) < JXG.Math.eps &&
+						Math.abs(this.center.Y() - gt.snapRound(coords[2], gt.snapSizeY)) < JXG.Math.eps
+					)
+						coords = this.hlObjs.hl_point.coords.usrCoords;
+
+					gt.board.off('up');
+
+					const center = this.center;
+					delete this.center;
+
+					center.setAttribute(gt.definingPointAttributes);
+					center.on('down', () => gt.onPointDown(center));
+					center.on('up', () => gt.onPointUp(center));
+
+					const point = gt.createPoint(coords[1], coords[2], center);
+					gt.selectedObj = new gt.graphObjectTypes[this.object](center, point, gt.drawSolid);
+					gt.selectedObj.focusPoint = point;
+					gt.graphedObjs.push(gt.selectedObj);
+
+					this.finish();
+				}
+			};
+		}
+	};
+})();