diff --git a/src/Components/Derived/Node.ts b/src/Components/Derived/Node.ts index c517d39..94812bf 100644 --- a/src/Components/Derived/Node.ts +++ b/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; \ No newline at end of file diff --git a/src/Components/Derived/OperationButtonPanel.ts b/src/Components/Derived/OperationButtonPanel.ts new file mode 100644 index 0000000..7a76071 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/Components/Line.ts b/src/Components/Line.ts index 85ff086..5f662ac 100644 --- a/src/Components/Line.ts +++ b/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, diff --git a/src/index.ts b/src/index.ts index 27aa8da..458adeb 100644 --- a/src/index.ts +++ b/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();