feat: connection highlighter interface

core/block_svg.ts

@@ -1715,7 +1715,8 @@ export class BlockSvg
    * @internal
    */
   fadeForReplacement(add: boolean) {
-    this.pathObject.updateReplacementFade(add);
+    // TODO (7204): Remove these internal methods.
+    (this.pathObject as AnyDuringMigration).updateReplacementFade(add);
   }
 
   /**
@@ -1727,6 +1728,10 @@ export class BlockSvg
    * @internal
    */
   highlightShapeForInput(conn: RenderedConnection, add: boolean) {
-    this.pathObject.updateShapeForInputHighlight(conn, add);
+    // TODO (7204): Remove these internal methods.
+    (this.pathObject as AnyDuringMigration).updateShapeForInputHighlight(
+      conn,
+      add,
+    );
   }
 }

core/interfaces/i_connection_highlighter.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type {RenderedConnection} from '../rendered_connection';
+
+/**
+ * Visually highlights connections, usually to preview where a block will be
+ * connected if it is dropped.
+ *
+ * Often implemented by IPathObject classes.
+ */
+export interface IConnectionHighlighter {
+  /** Visually highlights the given connection. */
+  highlightConnection(conn: RenderedConnection): void;
+
+  /** Visually unhighlights the given connnection (if it was highlighted). */
+  unhighlightConnection(conn: RenderedConnection): void;
+}

core/renderers/common/i_path_object.ts

@@ -9,7 +9,6 @@
 import type {BlockStyle} from '../../theme.js';
 import type {BlockSvg} from '../../block_svg.js';
 import type {ConstantProvider} from './constants.js';
-import {RenderedConnection} from '../../rendered_connection.js';
 
 /**
  * An interface for a block's path object.
@@ -120,22 +119,4 @@ export interface IPathObject {
    * @param enable True if the block is movable, false otherwise.
    */
   updateMovable(enabled: boolean): void;
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be replaced.  If a shadow block, it will disappear.
-   * Otherwise it will bump.
-   *
-   * @param enable True if styling should be added.
-   */
-  updateReplacementFade(enabled: boolean): void;
-
-  /**
-   * Add or remove styling that shows that if the dragging block is dropped,
-   * this block will be connected to the input.
-   *
-   * @param conn The connection on the input to highlight.
-   * @param enable True if styling should be added.
-   */
-  updateShapeForInputHighlight(conn: RenderedConnection, enable: boolean): void;
 }