fix: Highlight entire trainrun when hovering a trainrun section line (#534)

* fix: The trainrun section hovering highlight effect is improved.

Author: aiAdrian

src/app/view/editor-main-view/data-views/trainrunsections.view.edgeline.scss

@@ -26,6 +26,11 @@
 }
 
 /// FREQ_120
+::ng-deep path.edge_line.layer_0.Freq_120 {
+  stroke-width: 32px;
+  stroke-dasharray: none;
+}
+
 ::ng-deep path.edge_line.layer_1.Freq_120 {
   stroke-width: 2px;
 }
@@ -75,6 +80,59 @@
   stroke-width: 1px;
 }
 
+/// HOVER
+/// -------------------------------------------------------------
+/// FREQ_120:hover
+::ng-deep path.edge_line.layer_1.Freq_120.hover {
+  stroke-width: 3.25px;
+}
+
+/// FREQ_60:hover
+::ng-deep path.edge_line.layer_1.Freq_60.hover {
+  stroke-width: 3.25px;
+}
+
+/// FREQ_30:hover
+::ng-deep path.edge_line.layer_2.Freq_30.hover {
+  stroke-width: 7.5px;
+}
+
+::ng-deep path.edge_line.layer_3.Freq_30.hover {
+  stroke-width: 2.5px;
+}
+
+/// FREQ_20:hover
+::ng-deep path.edge_line.layer_1.Freq_20.hover {
+  stroke-width: 6.25px;
+}
+
+::ng-deep path.edge_line.layer_2.Freq_20.hover {
+  stroke-width: 3.75px;
+}
+
+::ng-deep path.edge_line.layer_3.Freq_20.hover {
+  stroke-width: 1.25px;
+}
+
+/// FREQ_15:hover
+::ng-deep path.edge_line.layer_0.Freq_15.hover {
+  stroke-width: 8.75px;
+  stroke-opacity: 1;
+}
+
+::ng-deep path.edge_line.layer_1.Freq_15.hover {
+  stroke-width: 6.25px;
+}
+
+::ng-deep path.edge_line.layer_2.Freq_15.hover {
+  stroke-width: 3.75px;
+}
+
+::ng-deep path.edge_line.layer_3.Freq_15.hover {
+  stroke-width: 1.25px;
+}
+/// -------------------------------------------------------------
+
 ::ng-deep path.edge_line.no_event {
   pointer-events: none;
 }

src/app/view/editor-main-view/data-views/transition.view.scss

@@ -90,6 +90,59 @@
   stroke-opacity: 1;
 }
 
+/// HOVER
+/// -------------------------------------------------------------
+/// FREQ_120:hover
+::ng-deep path.transition_line.layer_1.Freq_120.hover {
+  stroke-width: 3.25px;
+}
+
+/// FREQ_60:hover
+::ng-deep path.transition_line.layer_1.Freq_60.hover {
+  stroke-width: 3.25px;
+}
+
+/// FREQ_30:hover
+::ng-deep path.transition_line.layer_2.Freq_30.hover {
+  stroke-width: 7.5px;
+}
+
+::ng-deep path.transition_line.layer_3.Freq_30.hover {
+  stroke-width: 2.5px;
+}
+
+/// FREQ_20:hover
+::ng-deep path.transition_line.layer_1.Freq_20.hover {
+  stroke-width: 6.25px;
+}
+
+::ng-deep path.transition_line.layer_2.Freq_20.hover {
+  stroke-width: 3.75px;
+}
+
+::ng-deep path.transition_line.layer_3.Freq_20.hover {
+  stroke-width: 1.25px;
+}
+
+/// FREQ_15:hover
+::ng-deep path.transition_line.layer_0.Freq_15.hover {
+  stroke-width: 8.75px;
+  stroke-opacity: 1;
+}
+
+::ng-deep path.transition_line.layer_1.Freq_15.hover {
+  stroke-width: 6.25px;
+}
+
+::ng-deep path.transition_line.layer_2.Freq_15.hover {
+  stroke-width: 3.75px;
+}
+
+::ng-deep path.transition_line.layer_3.Freq_15.hover {
+  stroke-width: 1.25px;
+}
+/// -------------------------------------------------------------
+
 ::ng-deep polygon.transition_pin {
   opacity: 0.01;
   stroke: $NODE_DOCKABLE;