Source: Circle.js

  1. import { Plot } from "./Plot.js";
  3. /** Class representing a circle. */
  4. export class Circle {
  5.   /**
  6.    * Create a circle.
  7.    * @param {number} x - The x value of the centre.
  8.    * @param {number} y - The y value of the centre.
  9.    * @param {number} radius - The radius.
  10.    * @param {Object} options
  11.    * @param {string} [options.stroke = "black"]
  12.    * @param {number} [options.strokeWidth = 0.1]
  13.    * @param {string} [options.fill = "none"]
  14.    */
  15.   constructor(
  16.     x,
  17.     y,
  18.     radius,
  19.     { stroke, strokeWidth, fill = "none" } = {},
  20.   ) {
  21.     this.x = x;
  22.     this.y = y;
  23.     this.radius = radius;
  24.     const plot = Plot.getContext();
  25.     this.stroke = stroke !== undefined ? stroke : plot?.stroke || "black";
  26.     this.strokeWidth = strokeWidth !== undefined ? strokeWidth : plot?.strokeWidth || 0.1;
  27.     this.fill = fill;
  28.   }
  30. 	/**
  31. 	 * Create a circle from a Vector object and a radius.
  32. 	 * @param {Vector} vector - The position of the centre of the circle.
  33. 	 * @param {number} radius - The radius.
  34. 	 * @returns {Circle}
  35. 	 */
  36. 	static fromVector(vector, radius) {
  37. 		return new Circle(vector.x, vector.y, radius);
  38. 	}
  40.   /**
  41.    *
  42.    * @returns {SVGElement}
  43.    */
  44.   toSVGElement() {
  45.     let element = document.createElementNS(
  46.       "http://www.w3.org/2000/svg",
  47.       "circle",
  48.     );
  49.     element.setAttribute("cx", this.x);
  50.     element.setAttribute("cy", this.y);
  51.     element.setAttribute("r", this.radius);
  52.     element.setAttribute("stroke", this.stroke);
  53.     element.setAttribute("fill", this.fill);
  54.     element.setAttribute("stroke-width", `${this.strokeWidth}`);
  56.     return element;
  57.   }
  58. }