feat: add "done" state to visualization

src/Module/Components/VisualizationComponentController.ts

@@ -139,6 +139,16 @@ export class VisualizationComponentController implements IController
 					color: 'rgba(238, 238, 238, 1)',
 				},
 				smooth: smooth,
+				// the following options are needed to "cut" the edges when the opacity of the node is less than 1,
+				// without this the edges will start and end at the center of the nodes
+				arrowStrikethrough: false,
+				arrows: {
+					from: {
+						enabled: true,
+						scaleFactor: 0,
+						type: 'image'
+					},
+				},
 			} as any);
 		}
 
@@ -219,7 +229,7 @@ export class VisualizationComponentController implements IController
 
 	private drawVisualisation(nodes: DataSet<IVisNode>, edges: DataSet<IVisEdge>): Network
 	{
-		return new Network(this.$element[0], {
+		const network = new Network(this.$element[0], {
 			nodes: nodes,
 			edges: edges,
 		}, {
@@ -264,6 +274,20 @@ export class VisualizationComponentController implements IController
 				tooltipDelay: 0,
 			},
 		});
+
+		network.on('doubleClick', (event) => {
+			if (!event.nodes?.length) return
+
+			(event.nodes as number[]).forEach((nodeId) => {
+				const node = this.result.graph.nodes.find((graphNode) => graphNode.id === nodeId);
+				if (!node) return;
+
+				node.toggleDone();
+				nodes.update(node.getVisNode());
+			});
+		});
+
+		return network;
 	}
 
 }

src/Tools/Production/Result/Nodes/ByproductNode.ts

@@ -46,10 +46,10 @@ export class ByproductNode extends GraphNode
 			label: this.getTitle(),
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(27, 112, 137, 1)',
+				background: `rgba(27, 112, 137, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(38, 159, 194, 1)',
+					background: `rgba(38, 159, 194, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

src/Tools/Production/Result/Nodes/GraphNode.ts

@@ -8,6 +8,9 @@ export abstract class GraphNode
 	public id: number;
 
 	public connectedEdges: GraphEdge[] = [];
+	public done: boolean = false;
+
+	public static readonly DONE_OPACITY = '0.2';
 
 	public abstract getInputs(): ResourceAmount[];
 	public abstract getOutputs(): ResourceAmount[];
@@ -27,6 +30,11 @@ export abstract class GraphNode
 		return false;
 	}
 
+	public toggleDone(): void
+	{
+		this.done = !this.done;
+	}
+
 	protected formatText(text: string, bold: boolean = true)
 	{
 		const parts = text.split(' ');

src/Tools/Production/Result/Nodes/InputNode.ts

@@ -46,10 +46,10 @@ export class InputNode extends GraphNode
 			label: this.getTitle(),
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(175, 109, 14, 1)',
+				background: `rgba(175, 109, 14, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(234, 146, 18, 1)',
+					background: `rgba(234, 146, 18, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

src/Tools/Production/Result/Nodes/MinerNode.ts

@@ -46,10 +46,10 @@ export class MinerNode extends GraphNode
 			label: this.getTitle(),
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(78, 93, 108, 1)',
+				background: `rgba(78, 93, 108, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(105, 125, 145, 1)',
+					background: `rgba(105, 125, 145, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

src/Tools/Production/Result/Nodes/ProductNode.ts

@@ -46,10 +46,10 @@ export class ProductNode extends GraphNode
 			label: this.getTitle(),
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(80, 160, 80, 1)',
+				background: `rgba(80, 160, 80, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(111, 182, 111, 1)',
+					background: `rgba(111, 182, 111, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

src/Tools/Production/Result/Nodes/RecipeNode.ts

@@ -73,10 +73,10 @@ export class RecipeNode extends GraphNode
 			title: el as unknown as string,
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(223, 105, 26, 1)',
+				background: `rgba(223, 105, 26, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(231, 122, 49, 1)',
+					background: `rgba(231, 122, 49, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

src/Tools/Production/Result/Nodes/SinkNode.ts

@@ -46,10 +46,10 @@ export class SinkNode extends GraphNode
 			label: this.getTitle(),
 			color: {
 				border: 'rgba(0, 0, 0, 0)',
-				background: 'rgba(217, 83, 79, 1)',
+				background: `rgba(217, 83, 79, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				highlight: {
 					border: 'rgba(238, 238, 238, 1)',
-					background: 'rgba(224, 117, 114, 1)',
+					background: `rgba(224, 117, 114, ${this.done ? GraphNode.DONE_OPACITY : 1})`,
 				},
 			},
 			font: {

templates/Controllers/production.html

@@ -846,7 +846,7 @@ <h4 class="d-flex card-header cursor-pointer" ng-click="ctrl.tab.state.overviewC
 
 		<div ng-show="ctrl.tab.resultTab === 'visualization'">
 			<div class="border-left border-right border-secondary p-2">
-				You can move the nodes around using drag'n'drop.
+				You can move the nodes around using drag'n'drop. Mark a node as "done" by double-clicking it.
 			</div>
 			<visualization result="ctrl.tab.resultNew" ng-class="{visualization: 1, loading: ctrl.tab.state.resultLoading}"></visualization>
 		</div>