From 5d3ba79ab3825467b7c71abc1576447b6dfd077f Mon Sep 17 00:00:00 2001
From: Christopher Allen <cpcallen+git@google.com>
Date: Fri, 9 Sep 2022 18:00:59 +0100
Subject: [PATCH] fix!(connection): Correctly handle multiple highlighted
 connections (#6416)

Modify RenderedConnection.prototype.highlight and .unhighlight to
store the highlight path on this rather than as a static property
on Connection (which is where it had been stored since this
functionality was originally created, previously to RenderedConnection
and Connection being split).
---
 core/rendered_connection.ts | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/core/rendered_connection.ts b/core/rendered_connection.ts
index 984ba52de..049cfe966 100644
--- a/core/rendered_connection.ts
+++ b/core/rendered_connection.ts
@@ -53,6 +53,7 @@ export class RenderedConnection extends Connection {
   private readonly dbOpposite_: ConnectionDB;
   private readonly offsetInBlock_: Coordinate;
   private trackedState_: TrackedState;
+  private highlightPath: SVGPathElement | null = null;
 
   /** Connection this connection connects to.  Null if not connected. */
   override targetConnection: RenderedConnection|null = null;
@@ -302,26 +303,22 @@ export class RenderedConnection extends Connection {
     const xy = this.sourceBlock_.getRelativeToSurfaceXY();
     const x = this.x - xy.x;
     const y = this.y - xy.y;
-    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
-    // on type 'typeof Connection'.
-    (Connection as AnyDuringMigration).highlightedPath_ = dom.createSvgElement(
-        Svg.PATH, {
-          'class': 'blocklyHighlightedConnectionPath',
-          'd': steps,
-          'transform': 'translate(' + x + ',' + y + ')' +
-              (this.sourceBlock_.RTL ? ' scale(-1 1)' : ''),
-        },
-        this.sourceBlock_.getSvgRoot());
+    this.highlightPath = dom.createSvgElement(
+      Svg.PATH, {
+        'class': 'blocklyHighlightedConnectionPath',
+        'd': steps,
+        'transform': 'translate(' + x + ',' + y + ')' +
+            (this.sourceBlock_.RTL ? ' scale(-1 1)' : ''),
+      },
+      this.sourceBlock_.getSvgRoot());
   }
 
   /** Remove the highlighting around this connection. */
   unhighlight() {
-    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
-    // on type 'typeof Connection'.
-    dom.removeNode((Connection as AnyDuringMigration).highlightedPath_);
-    // AnyDuringMigration because:  Property 'highlightedPath_' does not exist
-    // on type 'typeof Connection'.
-    delete (Connection as AnyDuringMigration).highlightedPath_;
+    if (this.highlightPath) {
+      dom.removeNode(this.highlightPath);
+      this.highlightPath = null;
+    }
   }
 
   /**