diff --git a/src/Components/LegendBox.ts b/src/Components/LegendBox.ts index a6ed086..a9115ae 100644 --- 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 index bea32a2..3cd9e20 100644 --- 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 index 8f61e5a..1bce6ae 100644 --- 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)}`); +});