Extend default connection previewer

microsoft · Mar 4, 2024 · 766f3c0 · 766f3c0
1 parent a1cc74f
commit 766f3c0
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 20 deletions.
diff --git a/pxtblocks/plugins/renderer/connectionPreviewer.ts b/pxtblocks/plugins/renderer/connectionPreviewer.ts
@@ -1,14 +1,14 @@
 import * as Blockly from "blockly";
 
-export class ConnectionPreviewer implements Blockly.IConnectionPreviewer {
+export class ConnectionPreviewer extends Blockly.InsertionMarkerPreviewer {
     static CONNECTION_INDICATOR_RADIUS = 9;
 
     protected connectionLine: SVGLineElement;
-    protected staticConnectionIndicator: SVGElement;
     protected draggedConnectionIndicator: SVGElement;
     protected staticConnection: Blockly.RenderedConnection;
 
     previewReplacement(draggedConn: Blockly.RenderedConnection, staticConn: Blockly.RenderedConnection, replacedBlock: Blockly.BlockSvg): void {
+        super.previewReplacement(draggedConn, staticConn, replacedBlock);
         if (!this.connectionLine) {
             this.connectionLine = Blockly.utils.dom.createSvgElement(
                 'line',
@@ -25,14 +25,6 @@ export class ConnectionPreviewer implements Blockly.IConnectionPreviewer {
             this.draggedConnectionIndicator = this.createConnectionIndicator(draggedConn);
         }
 
-        if (this.staticConnection !== staticConn) {
-            if (this.staticConnectionIndicator) {
-                this.staticConnectionIndicator.remove();
-            }
-            this.staticConnection = staticConn;
-            this.staticConnectionIndicator = this.createConnectionIndicator(staticConn);
-        }
-
         const radius = ConnectionPreviewer.CONNECTION_INDICATOR_RADIUS;
         const offset = draggedConn.getOffsetInBlock();
 
@@ -64,26 +56,17 @@ export class ConnectionPreviewer implements Blockly.IConnectionPreviewer {
         }
     }
 
-    previewConnection(draggedConn: Blockly.RenderedConnection, staticConn: Blockly.RenderedConnection): void {
-
-    }
-
     hidePreview(): void {
+        super.hidePreview();
         if (this.connectionLine) {
             this.connectionLine.remove();
             this.connectionLine = null;
-            this.staticConnectionIndicator.remove();
-            this.staticConnectionIndicator = null;
             this.draggedConnectionIndicator.remove();
             this.draggedConnectionIndicator = null;
             this.staticConnection = null;
         }
     }
 
-    dispose(): void {
-        this.hidePreview();
-    }
-
     protected createConnectionIndicator(connection: Blockly.RenderedConnection): SVGElement {
         const result = Blockly.utils.dom.createSvgElement('g',
             { 'class': 'blocklyInputConnectionIndicator' },

diff --git a/pxtblocks/plugins/renderer/pathObject.ts b/pxtblocks/plugins/renderer/pathObject.ts
@@ -5,6 +5,8 @@ const DOTTED_OUTLINE_HOVER_CLASS = "blockly-dotted-outline-on-hover"
 const HOVER_CLASS = "hover"
 
 export class PathObject extends Blockly.zelos.PathObject {
+    static CONNECTION_INDICATOR_RADIUS = 9;
+
     protected svgPathHighlighted: SVGElement;
     protected hasError: boolean;
 
@@ -13,6 +15,9 @@ export class PathObject extends Blockly.zelos.PathObject {
     protected mouseOverData: Blockly.browserEvents.Data;
     protected mouseLeaveData: Blockly.browserEvents.Data;
 
+    protected connectionPointIndicators = new WeakMap<Blockly.RenderedConnection, SVGElement>();
+
+
     override updateHighlighted(enable: boolean) {
         // this.setClass_('blocklySelected', enable);
         if (enable) {
@@ -42,6 +47,33 @@ export class PathObject extends Blockly.zelos.PathObject {
         super.updateSelected(enable);
     }
 
+    override addConnectionHighlight(connection: Blockly.RenderedConnection, connectionPath: string, offset: Blockly.utils.Coordinate, rtl: boolean): void {
+        super.addConnectionHighlight(connection, connectionPath, offset, rtl);
+
+        if (connection.type === Blockly.INPUT_VALUE || connection.type === Blockly.OUTPUT_VALUE) {
+            const indicator = Blockly.utils.dom.createSvgElement('g',
+                { 'class': 'blocklyInputConnectionIndicator' }
+            );
+            Blockly.utils.dom.createSvgElement('circle',
+                { 'r': PathObject.CONNECTION_INDICATOR_RADIUS }, indicator);
+
+            const offset = connection.getOffsetInBlock();
+            indicator.setAttribute('transform',
+                'translate(' + offset.x + ',' + offset.y + ')');
+            this.connectionPointIndicators.set(connection, indicator);
+            this.svgRoot.appendChild(indicator);
+        }
+    }
+
+    override removeConnectionHighlight(connection: Blockly.RenderedConnection): void {
+        super.removeConnectionHighlight(connection);
+
+        if (this.connectionPointIndicators.has(connection)) {
+            this.connectionPointIndicators.get(connection).remove();
+            this.connectionPointIndicators.delete(connection);
+        }
+    }
+
     setHasDottedOutllineOnHover(enabled: boolean) {
         this.hasDottedOutlineOnHover = enabled;