4.4 LegendBox

LegendBox

A sticky box located in the upper left corner that displays an overview of which components are present in the scene in Latex. Can be collapsed into a small square, and then extended again by clicking the arrow icons.

When hovering over elements of type Plot, Point and Circle in the LegendBox, the corresponding Components in the scene are highlighted. Specific hover-functionality and which information is displayed for specific components can easily be modified further.

The following information is currently configured to be displayed for the given element types:

• Plots: <Plot name> : <Plot expression>
• Points: <Point name> : (x,y)
• State variables: <State name> : <State value>
• LegendText: Custom string
• Remaining components: <Component ClassName>

Extends:

• none

Implements:

• GuiComponent

Parameters:

Required:

• none

Optional:

• elements?: (Component | String | State<number>)[] A list of elements linked to the LegendBox. These are the elements that will be displayed in the LegendBox itself.

Default Parameters:

elements: []

Implemented Methods:

• none

Methods

• addElement(element: Component | String | State<number>) Adds an element to the LegendBox elements list

Usage:

Example #1 - Initialize without elements

Example #2 - Three ways to run the Core (ex: changing functions and states)

Example #3 - A complete usage example

//1. ADD NECESSARY IMPORTS
import Arc from "./Components/Arc";
import Circle from "./Components/Circle";
import Grid from "./Components/Grid";
import LegendBox from "./Components/LegendBox";
import LegendText from "./Components/LegendText";
import Plot from "./Components/Plot";
import Point from "./Components/Point";
import State from "./Components/State";
import Core from "./Core";

//2. CREATE GRID AND WANTED COMPONENTS, LEGENDTEXTS, STATES AND LEGENDBOX
const grid = new Grid();

//PLOTS
const plot1 = new Plot("x^2");
const plot2 = new Plot("x^3");
const plot3 = new Plot("e^x + 2x + log(x)");
const plot4 = new Plot("-3x+5");

//SHAPES
const circle1 = new Circle(0, 0, 2, { color: 0xaa74b8, segments: 32 });
const arc1 = new Arc([6, 2], [8, 5], [6, 6]);

//POINTS
const point1 = new Point(4, 2, {
  customName: "x_1",
  showName: true,
  draggable: "unrestricted",
  color: "#AA74B8",
});

const point2 = new Point(3, 5, {
  customName: "X",
  showName: false,
  legendCoordinates: "x",
});

//LEGENDTEXTS
const text1 = new LegendText("node_1: node", {
  color: "#FFFFFF",
  shape: "triangle",
  useStates: false,
});


const text2 = new LegendText("\\int_{a}^{b} x^2\\,dx", {
  color: "#faa307",
  shape: "circle",
  useStates: true,
});

//STATES WITH OPTION ON WHETHER THEY ARE DISPLAYED IN LEGENDBOX OR NOT
const state1 = new State("a", 5, { inLegend: false });
const state2 = new State("b", 100);

//LEGEND BOX
const legend = new LegendBox([plot1, plot2, plot3, plot4, point1, point2, circle1, arc1, text1, text2, state1, state2]);


//3. CREATE CORE AND ADD GRID AND COMPONENTS (NOTE: LEGENDTEXT AND STATES DO NOT NEED TO BE ADDED TO CORE)
const core = new Core();
core.add(grid);
core.add(plot1);
core.add(plot2);
core.add(plot3);
core.add(plot4);
core.add(point1);
core.add(point2);
core.add(circle1);
core.add(arc1);
core.addGui(legend);

//4. RUN THE CORE (EXAMPLE OF 3 DIFFERENT WAYS)

//4A RUN CORE NORMALLY
core.run();

//4B RUN CORE WITH A CHANGING FUNCTION
core.run((t) => {
      plot1.setExpression(`x^2+${(t / 10).toFixed(2)}`);
    });
    
//4C RUN CORE WITH STATE
core.run((t) => {
    state1.setState(state1.getState() + t / 100);
    state2.setState(state2.getState() + t / 100);
});