Made it possible to click through node operations

Done by making a new OperationButtonPanel component.
Can now also change node and edge color.

Issue: #78

src/Components/Derived/Node.ts

@@ -1,6 +1,9 @@
+import { colors } from "@mui/material";
 import Circle, { CircleOptions, defaultShapeOptions } from "../Circle";
 import Line from "../Line";
 import Text from "../Text"
+import { Color, MeshBasicMaterial } from "three";
+import { LineMaterial } from "three-fatline";
 
 export type NodeOptions =  CircleOptions & {
   label?: string;
@@ -142,7 +145,7 @@ class Node extends Circle {
     }
   }
 
-  setLabel(label: string) {
+  setLabel(label: string): void {
     if (this.label !== undefined) {
       this.label.setText(label);
       this.label.setFontSize(this.calculateFontSize(label, this.radius));
@@ -153,6 +156,23 @@ class Node extends Circle {
     }
   }
 
+  setColor(color: number): void {
+    this.material = new MeshBasicMaterial({
+      color: color,
+      transparent: true,
+      opacity: 0.5,
+    });
+  }
+
+  setEdgeColor(other: Node, color: number): void {
+    const index = this.adjacencyList.map((edge) => edge.node).indexOf(other);
+    if (index > -1) {
+      (this.adjacencyList[index].line.material as LineMaterial).color = new Color(color);
+      //(this.adjacencyList[index].line.material as LineMaterial).linewidth = 8;
+      //(this.adjacencyList[index].line.material as LineMaterial).opacity = 0.5;
+    }
+  }
+
 }
 
 export default Node;

src/Components/Derived/OperationButtonPanel.ts

@@ -0,0 +1,55 @@
+import Core from "../../Core";
+import Button from "../Button";
+import { GuiComponent } from "../interfaces";
+
+class OperationButtonPanel implements GuiComponent {
+  htmlElement: HTMLElement;
+  counter: number;
+  operationList: (() => void)[];
+  reverseOperationList: (() => void)[];
+  backButton: Button;
+  fourthButton: Button;
+
+  constructor(operationList: (() => void)[], reverseOperationList: (() => void)[]) {
+    const panelWrapper = document.createElement("div");
+    panelWrapper.className = "panel-wrapper";
+    this.htmlElement = panelWrapper;
+
+    this.counter = 0;
+    this.operationList = operationList;
+    this.reverseOperationList = reverseOperationList;
+    this.backButton = new Button({label: "<"});
+    this.backButton.addObserver(() => this.executePreviousOperation());
+    this.backButton.htmlElement
+    this.fourthButton = new Button({label: ">"});
+    this.fourthButton.addObserver(() => this.executeNextOperation());
+
+    this.htmlElement.appendChild(this.backButton.htmlElement );
+    this.htmlElement.appendChild(this.fourthButton.htmlElement);
+
+    /* core.addGui(this.backButton);
+    core.addGui(this.fourthButton); */
+  }
+
+  executeNextOperation(): void {
+    if (this.counter < this.operationList.length) {
+        const nextOperation = this.operationList[this.counter];
+        nextOperation();
+        this.counter++;
+    } else {
+        console.log("No more operations to perform");
+    }
+  }
+
+  executePreviousOperation(): void {
+    if (this.counter > 0) {
+      this.counter--;
+      const prevOperation = this.reverseOperationList[this.counter];
+      prevOperation();
+    } else {
+        console.log("No earlier operations to perform");
+    }
+  }
+}  
+
+export default OperationButtonPanel;

src/Components/Line.ts

@@ -23,8 +23,8 @@ export type LineOptions = {
   opacity?: number;
   transparent?: boolean;
   draggable?: Draggable;
-  curve: number;
-  label: string;
+  curve?: number;
+  label?: string;
 };
 
 export const defaultLineOptions: LineOptions = {
@@ -65,7 +65,7 @@ class Line extends Component implements Collider {
     this.start = start;
     this.end = end;
     this.arrowhead = arrowhead ?? false;
-    this.curve = curve;
+    this.curve = curve ?? 0;
     this.label = new Text(label, {fontSize: 2.5, anchorX: "center", anchorY: "middle", responsiveScale: false});
     this.material = new LineMaterial({
       color: color,

src/index.ts

@@ -19,21 +19,15 @@ export { default as Fraction } from "./Components/Derived/Fraction";
 export { default as SVGLoader } from "./Components/SVGLoader";
 export * as three from "three"; */
 
-import Grid from "./Components/Grid";
 import Core from "./Core";
 import Node from "./Components/Derived/Node"
-import Line from "./Components/Line";
-import { disconnect } from "process";
-import Arc from "./Components/Arc";
-import THREE, { Curve } from "three";
-import Bracket from "./Components/Bracket";
-import { falseDependencies } from "mathjs";
+import OperationButtonPanel from "./Components/Derived/OperationButtonPanel";
 
 
 const core = new Core();
 //const grid = new Grid();
 const node = new Node(-20,20,5,[],{label: "Node 123456789"});
-const node2 = new Node(0,-20,5,[],{label: "Node 2 Mer tekst"}));
+const node2 = new Node(0,-20,5,[],{label: "Node 2 Mer tekst"});
 const node3 = new Node(40,20,5,[],{label: "3"});
 const node4 = new Node(30,-40,5,[],{label: "4"});
 const node5 = new Node(-50,20,5,[]);
@@ -42,15 +36,36 @@ node2.connectTo(node3, true, 5);
 node2.connectTo(node4, true, 5);
 node4.connectTo(node2, true, 20);
 node.connectTo(node5, true);
-node5.connectTo(node, true);
-node.setLabel("Hei");
-node5.setLabel("5");
-//node3.connectTo(node2, true);
-//core.add(grid);
 core.add(node);
 core.add(node2);
 core.add(node3);
 core.add(node4);
 core.add(node5);
 
+const op1 = () => {
+    node.setColor(0xff0000);
+}
+const op2 = () => {
+    node2.setEdgeColor(node3, 0xff0000);
+}
+const op3 = () => {
+    node3.setColor(0xff0000);
+}
+
+const op12 = () => {
+    node.setColor(0xfaa307);
+}
+const op22 = () => {
+    node2.setEdgeColor(node3, 0x000000);
+}
+const op32 = () => {
+    node3.setColor(0xfaa307);
+}
+const lst = [op1, op2, op3];
+const lst2 = [op12, op22, op32];
+
+const operationButtonPanel = new OperationButtonPanel(lst, lst2);
+
+core.addGui(operationButtonPanel);
+
 core.run();