Stricter logic for shape property in LegendText (#88)

* When writing Latex in LegendBox, only the expression with inserted values appears

Related to #86

* Add a bit space between LegendBox and the top/left

* Add props to Point which give the ability to:
- show/hide name from Points in the grid (showName)
- give Points custom names (customName)
- display only x or only y coordinates for points in LegendBox (legendCoordinates)

Related to #86

* Make it possible to use States without them being displayed in LegendBox

Related to #86

* States can now be added both before and after Latex-strings in constructor and with addElement met

* Make sure it is not possible to add the same element twice to the LegendBox

* Remove parenthesis from when only showing x or y coordinates on point

* Create LegendText object
- LegendText replaces/extends the possibility of adding LaTex-strings to the LegendBox
- LegendText is initialized with an expression-string and some optionals: color for icon-color,  shape for icon-shape and useStates for deciding if the expression should listen to defined states

This gives more freedom and flexibility in adding text, LaTeX and the use of states in LegendBox

Related to #86

* Lint fix and make spacing between LegendBox and top&left a bit smaller

* Export LegendText in index.ts

* Small fix for State making it more general

* Small fix: a bit stricter definition of shape type in LegendText

Closes #86

src/Components/LegendText.ts

@@ -1,44 +1,46 @@
 type LegendTextOptions = {
+  shape?: "circle" | "rectangle" | "triangle";
   color?: string;
-  shape?: string;
   useStates?: boolean;
 };
 
 const defaultLegendTextOptions = {
-  color: "#faa307",
+
   shape: "circle",
+  color: "#faa307",
   useStates: false,
 };
 
 class LegendText {
   private expression: string;
-  private color: string;
+
   private shape: string;
+  private color: string;
   private useStates: boolean;
 
   constructor(expression: string, options?: LegendTextOptions) {
-    const { color, shape, useStates } = {
+    const { shape, color, useStates } = {
       ...defaultLegendTextOptions,
       ...options,
     };
     this.expression = expression;
-    this.color = color;
     this.shape = shape;
+    this.color = color;
     this.useStates = useStates;
   }
 
   getExpression(): string {
     return this.expression;
   }
 
-  getColor(): string {
-    return this.color;
-  }
-
   getShape(): string {
     return this.shape;
   }
 
+  getColor(): string {
+    return this.color;
+  }
+
   getUseStates(): boolean {
     return this.useStates;
   }

src/Components/State.ts

@@ -40,11 +40,11 @@ class State<T> {
     this.emitter.emit(STATE_CHANGE_EVENT, this.state);
   }
 
-  addObserver(callback: (state: number) => void): void {
+  addObserver(callback: (state: T) => void): void {
     this.emitter.on(STATE_CHANGE_EVENT, callback);
   }
 
-  removeObserver(callback: (state: number) => void): void {
+  removeObserver(callback: (state: T) => void): void {
     this.emitter.off(STATE_CHANGE_EVENT, callback);
   }
 }