72 make legend box component

src/Components/Arc.ts

@@ -66,6 +66,7 @@ class Arc extends Component {
     this.textOffset = textOffset;
     this.resolution = resolution;
     this.dynamic = dynamic;
+    this.name = "Arc";
 
     this._curvedOutline = new Line2(
       undefined,

src/Components/Bracket.ts

@@ -27,6 +27,7 @@ class Bracket extends Component {
     );
     this.add(this._bracket);
     this._updateBracketGeometry();
+    this.name = "Bracket";
 
     this._text = new Text(content, {
       fontSize: 20,

src/Components/Circle.ts

@@ -33,23 +33,24 @@ class Circle extends Component implements Collider {
     const { color, segments } = { ...defaultShapeOptions, ...options };
 
     const geometry = new CircleGeometry(radius, segments);
-    const material = new MeshBasicMaterial({
-      color: color,
-      transparent: true,
-      opacity: 0.5,
-    });
     this.segments = segments;
     const strokeGeometry = new RingGeometry(radius - 1, radius, this.segments);
     const strokeMaterial = new MeshBasicMaterial({ color: "#080007" });
     // set mesh of the point instance
-    const circleMesh = new Mesh(geometry, material);
+    const geometryMaterial = new MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.5,
+    });
+    const circleMesh = new Mesh(geometry, geometryMaterial);
     this._strokeMesh = new Mesh(strokeGeometry, strokeMaterial);
     this._strokeMesh.position.set(0, 0, 1);
     this.geometry = circleMesh.geometry;
     this.material = circleMesh.material;
     this.add(this._strokeMesh);
     // set position of the mesh
     this.position.set(x, y, 0);
+    this.name = "Circle";
   }
 
   collidesWith(other: Object3D): boolean {
@@ -87,6 +88,24 @@ class Circle extends Component implements Collider {
       this.segments
     );
   }
+
+  hover() {
+    const color = this.getColorAsNumber();
+    this.material = new MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.7,
+    });
+  }
+
+  unhover() {
+    const color = this.getColorAsNumber();
+    this.material = new MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.5,
+    });
+  }
 }
 
 export default Circle;

src/Components/Derived/Fraction.ts

@@ -28,6 +28,7 @@ class Fraction extends Component {
     this.position.set(x, y, this.position.z);
     this.filled = filled;
     this.divisor = divisor;
+    this.name = "Fraction";
 
     this.divisors = new Group();
     this.generateDivisors(radius, divisor, filled);

src/Components/Grid.ts

@@ -120,6 +120,7 @@ class Grid extends Component {
     this.hasLabels = labels;
     this.xLabelOffset = xLabelOffset ?? [0, 0];
     this.yLabelOffset = yLabelOffset ?? [0, 0];
+    this.name = "Grid";
     const gridGeometry = new PlaneGeometry(
       window.innerWidth,
       window.innerHeight

src/Components/InfiniteLine.ts

@@ -7,6 +7,7 @@ class InfiniteLine extends Line {
   constructor(start: InputPosition, end: InputPosition, props?: LineOptions) {
     super(start, end, props);
     this.frustumCulled = false;
+    this.name = "Infinite line";
   }
 
   _updateGeometry(camera: OrthographicCamera) {

src/Components/Label.ts

@@ -53,6 +53,7 @@ class Label extends Component {
       endPoint.x + (deltaX < 0 ? -1 : 1) * 10,
       endPoint.y,
     ]);
+    this.name = "Label";
 
     // Add line and text components to the label
     this.add(line1);

src/Components/Latex.ts

@@ -35,6 +35,7 @@ class Latex extends Component implements Collider {
     }: LatexOptions
   ) {
     super();
+    this.name = "Latex";
     const pos = toVector3(position);
     const renderedEquation = renderToString.renderToString(latex, {
       output: "mathml",

src/Components/LegendBox.ts

@@ -0,0 +1,240 @@
+import renderToString from "katex";
+import Plot from "./Plot";
+import Point from "./Point";
+import State from "./State";
+import { Component, GuiComponent } from "./interfaces";
+
+class LegendBox implements GuiComponent {
+  elements: (Component | string | State<number>)[];
+  states: { [key: string]: State<number> };
+  htmlElement: HTMLElement;
+
+  constructor(elements?: (Component | string | State<number>)[]) {
+    this.elements = elements || [];
+    this.states = {};
+    this.htmlElement = this.createLegendBoxWrapper();
+    const button = this.createSizeAdjustButton();
+    this.htmlElement.appendChild(button);
+    this.registerEventListeners();
+    this.initializeStatesAndStrings();
+    this.updateComponents();
+  }
+
+  private createLegendBoxWrapper(): HTMLElement {
+    const legendBoxWrapper = document.createElement("div");
+    legendBoxWrapper.className = "legendBox-wrapper";
+    legendBoxWrapper.style.display =
+      this.elements.length === 0 ? "none" : "block";
+    return legendBoxWrapper;
+  }
+
+  private createSizeAdjustButton(): HTMLButtonElement {
+    const button = document.createElement("button");
+    button.className = "size-adjust-button";
+    button.addEventListener("click", () => {
+      this.htmlElement.classList.toggle("minimized");
+      this.updateButton(button);
+    });
+    this.updateButton(button);
+    return button;
+  }
+
+  private updateButton(button: HTMLButtonElement): void {
+    button.innerHTML = this.htmlElement.classList.contains("minimized")
+      ? "&#8599;"
+      : "&#8601;";
+  }
+  private registerEventListeners(): void {
+    Plot.emitter.on("plotUpdated", () => this.updateComponents());
+    Point.emitter.on("pointUpdated", () => this.updateComponents());
+  }
+
+  //States and strings given in the constructor are initialized (states are added to states-dictionary and strings are added as observers to the states they contain)
+  private initializeStatesAndStrings(): void {
+    this.elements.forEach((element) => {
+      if (element instanceof State) {
+        this.states[element.getStateName()] = element;
+      } else if (typeof element === "string") {
+        this.addStringAsObserver(element);
+      }
+    });
+  }
+
+  public updateComponents() {
+    this.clearChildren();
+    if (!this.elements) {
+      return;
+    }
+    this.updateDisplay();
+    this.elements.forEach((element) => this.processElement(element));
+  }
+
+  private clearChildren() {
+    Array.from(this.htmlElement.children).forEach((child) => {
+      if (child.className !== "size-adjust-button") {
+        this.htmlElement.removeChild(child);
+      }
+    });
+  }
+
+  private updateDisplay() {
+    this.htmlElement.style.display =
+      this.elements.length === 0 ? "none" : "block";
+  }
+
+  private processElement(element: Component | string | State<number>) {
+    const functionContainer = document.createElement("div");
+    functionContainer.className = "function-container";
+    const icon = this.createIcon(element);
+    functionContainer.appendChild(icon);
+
+    const textToDisplay = this.getTextToDisplay(element);
+    const renderedEquation = renderToString.renderToString(textToDisplay, {
+      output: "mathml",
+      strict: false,
+      trust: true,
+    });
+    const htmlElementText = this.createHtmlElementText(
+      renderedEquation,
+      element
+    );
+
+    functionContainer.appendChild(htmlElementText);
+    this.htmlElement.appendChild(functionContainer);
+  }
+
+  private createIcon(element: Component | string | State<number>) {
+    const icon = document.createElement("span");
+    icon.className = this.getIconClass(element);
+    if (icon.className === "triangle-icon") {
+      icon.style.borderBottomColor = this.getIconColor(element);
+    } else {
+      icon.style.backgroundColor = this.getIconColor(element);
+    }
+    return icon;
+  }
+
+  private getTextToDisplay(element: Component | string | State<number>) {
+    let textToDisplay = "";
+
+    if (typeof element === "string") {
+      textToDisplay =
+        element + ": " + this.replaceStateNamesWithValues(element);
+    } else if (element instanceof State) {
+      textToDisplay =
+        element.getStateName() + ": " + element.getState().toFixed(1);
+    } else if (element instanceof Component) {
+      textToDisplay = element.getDisplayText
+        ? element.getName() + ": " + element.getDisplayText()
+        : element.getName();
+    }
+
+    return textToDisplay;
+  }
+
+  private createHtmlElementText(
+    renderedEquation: string,
+    element: Component | string | State<number>
+  ) {
+    const htmlElementText = document.createElement("div");
+    htmlElementText.innerHTML = renderedEquation;
+
+    if (element instanceof Component) {
+      this.addHoverListeners(htmlElementText, element);
+    }
+
+    return htmlElementText;
+  }
+
+  private addHoverListeners(
+    htmlElementText: HTMLDivElement,
+    element: Component
+  ) {
+    htmlElementText.addEventListener("mouseover", function () {
+      if (element.hover) {
+        htmlElementText.style.cursor = "pointer";
+        element.hover();
+      }
+    });
+
+    htmlElementText.addEventListener("mouseout", function () {
+      if (element.unhover) {
+        element.unhover();
+      }
+    });
+  }
+
+  private getIconClass(element: Component | string | State<number>) {
+    if (typeof element === "string" || element instanceof State) {
+      return "point-icon";
+    } else if (element instanceof Plot) {
+      return "plot-icon";
+    } else if (element instanceof Point) {
+      return "point-icon";
+    } else {
+      return "triangle-icon";
+    }
+  }
+
+  private getIconColor(element: Component | string | State<number>) {
+    if (element instanceof Component) {
+      return "#" + element.getColorAsString();
+    } else {
+      return "#faa307";
+    }
+  }
+
+  public addElement(element: Component | string | State<number>) {
+    if (this.elements.includes(element)) {
+      return;
+    }
+    this.elements.push(element);
+
+    // Add to states if the element is a state
+    if (element instanceof State) {
+      if (this.states[element.getStateName()]) {
+        return;
+      }
+      this.states[element.getStateName()] = element;
+    }
+
+    // If the element is a string, add it as an observer to the state variables it contains
+    if (typeof element === "string") {
+      this.addStringAsObserver(element);
+    }
+
+    this.updateComponents();
+  }
+
+  // Adds string as an observer to the state variables it contains
+  private addStringAsObserver(str: string) {
+    const stateNames = this.parseStateNames(str);
+    stateNames.forEach((stateName) => {
+      if (this.states[stateName]) {
+        this.states[stateName].addObserver(() => this.updateComponents());
+      }
+    });
+  }
+
+  // Returns an array with the state variables present in the string
+  private parseStateNames(str: string): string[] {
+    return Array.from(new Set(str.match(/[a-z]/gi) || []));
+  }
+
+  // Replaces the state variables in str with their current value
+  private replaceStateNamesWithValues(str: string): string {
+    let result = str;
+    const stateNames = this.parseStateNames(str);
+    stateNames.forEach((stateName) => {
+      if (this.states[stateName]) {
+        result = result.replace(
+          new RegExp(stateName, "g"),
+          this.states[stateName].getState().toFixed(1).toString()
+        );
+      }
+    });
+    return result;
+  }
+}
+
+export default LegendBox;

src/Components/Line.ts

@@ -80,6 +80,7 @@ class Line extends Component implements Collider {
       opacity: opacity,
       transparent: transparent,
     });
+    this.name = "Line";
 
     this.geometry = new LineGeometry();
     if (arrowhead) {