diff --git a/src/Module/Components/VisualizationComponentController.ts b/src/Module/Components/VisualizationComponentController.ts index 685d2706..61a4288b 100644 --- a/src/Module/Components/VisualizationComponentController.ts +++ b/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, edges: DataSet): 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; } } diff --git a/src/Tools/Production/Result/Nodes/ByproductNode.ts b/src/Tools/Production/Result/Nodes/ByproductNode.ts index 90b796e1..fdfc9a01 100644 --- a/src/Tools/Production/Result/Nodes/ByproductNode.ts +++ b/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: { diff --git a/src/Tools/Production/Result/Nodes/GraphNode.ts b/src/Tools/Production/Result/Nodes/GraphNode.ts index 8e60314d..ab35263b 100644 --- a/src/Tools/Production/Result/Nodes/GraphNode.ts +++ b/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(' '); diff --git a/src/Tools/Production/Result/Nodes/InputNode.ts b/src/Tools/Production/Result/Nodes/InputNode.ts index f3ec3c91..adcea067 100644 --- a/src/Tools/Production/Result/Nodes/InputNode.ts +++ b/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: { diff --git a/src/Tools/Production/Result/Nodes/MinerNode.ts b/src/Tools/Production/Result/Nodes/MinerNode.ts index c3283575..bc3674b4 100644 --- a/src/Tools/Production/Result/Nodes/MinerNode.ts +++ b/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: { diff --git a/src/Tools/Production/Result/Nodes/ProductNode.ts b/src/Tools/Production/Result/Nodes/ProductNode.ts index 4773bbd4..57ff094b 100644 --- a/src/Tools/Production/Result/Nodes/ProductNode.ts +++ b/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: { diff --git a/src/Tools/Production/Result/Nodes/RecipeNode.ts b/src/Tools/Production/Result/Nodes/RecipeNode.ts index fd821382..ddd1770e 100644 --- a/src/Tools/Production/Result/Nodes/RecipeNode.ts +++ b/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: { diff --git a/src/Tools/Production/Result/Nodes/SinkNode.ts b/src/Tools/Production/Result/Nodes/SinkNode.ts index 4be9f3e5..a335a752 100644 --- a/src/Tools/Production/Result/Nodes/SinkNode.ts +++ b/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: { diff --git a/templates/Controllers/production.html b/templates/Controllers/production.html index 0e4a6b5a..112d9286 100644 --- a/templates/Controllers/production.html +++ b/templates/Controllers/production.html @@ -846,7 +846,7 @@

- 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.