From 2ca44f238c4eb34653589823823a6612695bca65 Mon Sep 17 00:00:00 2001 From: Martin Gregoire Date: Thu, 3 Oct 2024 11:38:24 +0200 Subject: [PATCH 1/2] feat: add "done" state to visualization Allows to mark nodes in the visualization as "done" by double-clicking on them. A "done" node will be shown with a green background. Double-clicking on a "done" node will reset them to their initial state. Note: this "done" state is not persisted in LocalStorage, it is only saved in the visualization state. This means that if you e.g. reload the page, all nodes will loose their "done" state. --- .../VisualizationComponentController.ts | 26 ++++++++++++++++++- .../Production/Result/Nodes/ByproductNode.ts | 4 +-- .../Production/Result/Nodes/GraphNode.ts | 8 ++++++ .../Production/Result/Nodes/InputNode.ts | 4 +-- .../Production/Result/Nodes/MinerNode.ts | 4 +-- .../Production/Result/Nodes/ProductNode.ts | 4 +-- .../Production/Result/Nodes/RecipeNode.ts | 4 +-- src/Tools/Production/Result/Nodes/SinkNode.ts | 4 +-- templates/Controllers/production.html | 2 +- 9 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/Module/Components/VisualizationComponentController.ts b/src/Module/Components/VisualizationComponentController.ts index 685d2706..02b76bd2 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) { + (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.
From 4a67ad41a81e6d92f6c59b0a0bdd380f8afbeb3d Mon Sep 17 00:00:00 2001 From: Martin Gregoire Date: Sun, 25 Jan 2026 12:13:51 +0100 Subject: [PATCH 2/2] fixup! feat: add "done" state to visualization --- .../VisualizationComponentController.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Module/Components/VisualizationComponentController.ts b/src/Module/Components/VisualizationComponentController.ts index 02b76bd2..61a4288b 100644 --- a/src/Module/Components/VisualizationComponentController.ts +++ b/src/Module/Components/VisualizationComponentController.ts @@ -276,15 +276,15 @@ export class VisualizationComponentController implements IController }); network.on('doubleClick', (event) => { - if (event.nodes?.length) { - (event.nodes as number[]).forEach((nodeId) => { - const node = this.result.graph.nodes.find((graphNode) => graphNode.id === nodeId); - if (!node) return; + if (!event.nodes?.length) return - node.toggleDone(); - nodes.update(node.getVisNode()); - }); - } + (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;