LegendBox updates if a plot is dynamic (moves)

Related to #72
kateter-platform · Jun 28, 2024 · f277f9d · f277f9d
1 parent 4af059a
commit f277f9d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 17 deletions.
diff --git a/src/Components/LegendBox.ts b/src/Components/LegendBox.ts
@@ -1,25 +1,15 @@
-import { largerEq } from "mathjs";
 import Core from "../Core";
 import renderToString from "katex";
 import Plot from "./Plot";
-import { GuiComponent } from "./interfaces";
+import { Component, GuiComponent } from "./interfaces";
 import "style.css";
-
-//usikker på om denne trengs
-type LegendBoxOptions = {
-  label: string;
-};
-
-const defaultLegendBoxOptions: LegendBoxOptions = {
-  label: "",
-};
+import { OrthographicCamera } from "three";
 
 class LegendBox implements GuiComponent {
   private core: Core;
   htmlElement: HTMLElement;
-  //   observers: (() => void)[];
 
-  constructor(core: Core, options?: LegendBoxOptions) {
+  constructor(core: Core) {
     this.core = core;
     const legendBoxWrapper = document.createElement("div");
     legendBoxWrapper.className = "legendBox-wrapper";
@@ -34,9 +24,14 @@ class LegendBox implements GuiComponent {
 
     legendBoxWrapper.appendChild(button);
     this.updatePlots();
+
+    Plot.emitter.on("expressionUpdated", (plot) => {
+      this.updatePlots();
+    });
   }
 
   updatePlots() {
+    this.htmlElement.innerHTML = "";
     for (const component of this.core.getComponents()) {
       if (!(component instanceof Plot)) {
         continue;

diff --git a/src/Components/Plot.ts b/src/Components/Plot.ts
@@ -2,6 +2,7 @@ import { Vector3, CatmullRomCurve3, Vector2, OrthographicCamera } from "three";
 import { parse } from "mathjs";
 import { Line2, LineGeometry, LineMaterial } from "three-fatline";
 import { Component } from "./interfaces";
+import { EventEmitter } from "events";
 
 type PlotOptions = {
   hideFromLegend?: boolean;
@@ -47,6 +48,7 @@ class Plot extends Component {
   private DEFAULT_RENDERTHRESHOLD = 1400;
 
   private plotMaterial: LineMaterial;
+  static emitter = new EventEmitter();
 
   constructor(func: string, options?: PlotOptions) {
     super();
@@ -135,6 +137,7 @@ class Plot extends Component {
   public setExpression(expression: string): void {
     this.func = expression;
     this.reRenderPlot(this.currentMinX, this.currentMaxX);
+    Plot.emitter.emit("expressionUpdated", this);
   }
 
   private reRenderPlot(minX: number, maxX: number): void {

diff --git a/src/index.ts b/src/index.ts
@@ -31,7 +31,6 @@ const plot3 = new Plot("x^4");
 const plot4 = new Plot("x^5");
 const plot5 = new Plot("e^x + 2x + log(x)", { hideFromLegend: true });
 const plot6 = new Plot("x^2 + 2x + 1");
-const plot7 = new Plot("e^(log(x)) + 2x + 1/2");
 
 const core = new Core();
 const legend = new LegendBox(core);
@@ -43,9 +42,10 @@ core.add(plot3);
 core.add(plot4);
 core.add(plot5);
 core.add(plot6);
-core.add(plot7);
 
 core.addGui(legend);
-console.log("hei");
+//core.run();
 
-core.run();
+core.run((t) => {
+  plot1.setExpression(`x^2+${(t / 10).toFixed(2)}`);
+});