Graphtool graph math object

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();
+				}
+			};
+		}
+	};
+})();