Skip to content

fix!: Normalize Zelos connection indicators #9565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gonfunko wants to merge 2 commits into
base: v13
Choose a base branch
from
Open

fix!: Normalize Zelos connection indicators #9565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f4ec3a
fix: Normalize Zelos connection indicators
gonfunko Jan 12, 2026
b6db9fe
feat: Add `IPathObject.updateReplacing()`
gonfunko Jan 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 8 additions & 18 deletions core/block_svg.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -781,6 +781,13 @@ export class BlockSvg
}
}

/**
* Returns whether or not this block is currently being dragged.
*/
isDragging() {
return this.dragging;
}

/**
* Set whether this block is movable or not.
*
Expand Down Expand Up @@ -1728,24 +1735,7 @@ export class BlockSvg
* @internal
*/
fadeForReplacement(add: boolean) {
// TODO (7204): Remove these internal methods.
(this.pathObject as AnyDuringMigration).updateReplacementFade(add);
}

/**
* Visual effect to show that if the dragging block is dropped it will connect
* to this input.
*
* @param conn The connection on the input to highlight.
* @param add True if highlighting should be added.
* @internal
*/
highlightShapeForInput(conn: RenderedConnection, add: boolean) {
// TODO (7204): Remove these internal methods.
(this.pathObject as AnyDuringMigration).updateShapeForInputHighlight(
conn,
add,
);
this.pathObject.updateReplacing?.(add);
}

/**
Expand Down
8 changes: 8 additions & 0 deletions core/insertion_marker_previewer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ export class InsertionMarkerPreviewer implements IConnectionPreviewer {
staticConn.highlight();
}

if (this.workspace.getRenderer().shouldHighlightConnection(draggedConn)) {
draggedConn.highlight();
}

this.draggedConn = draggedConn;
this.staticConn = staticConn;
} finally {
Expand Down Expand Up @@ -224,6 +228,10 @@ export class InsertionMarkerPreviewer implements IConnectionPreviewer {
this.staticConn.unhighlight();
this.staticConn = null;
}
if (this.draggedConn) {
this.draggedConn.unhighlight();
this.draggedConn = null;
}
if (this.fadedBlock) {
this.fadedBlock.fadeForReplacement(false);
this.fadedBlock = null;
Expand Down
1 change: 1 addition & 0 deletions core/rendered_connection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -332,6 +332,7 @@ export class RenderedConnection
const highlightSvg = this.findHighlightSvg();
if (highlightSvg) {
highlightSvg.style.display = '';
highlightSvg.parentElement?.appendChild(highlightSvg);
Copy link
Collaborator

@BenHenning BenHenning Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might cause focus loss problems. I'm also curious why this is necessary--shouldn't the highly SVG already be properly parented since it exists in the DOM at this stage?

Or is this the means to try and 'bring it to front'?

Copy link
Contributor Author

@gonfunko gonfunko Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is the means to bring it to the front. Experimentally, there don't appear to be any focus issues, I think because the highlight SVG is not itself the thing that has focus; I was able to move blocks using keyboard nav and Zelos and it behaved as expected.

}
}

Expand Down
9 changes: 9 additions & 0 deletions core/renderers/common/i_path_object.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,4 +106,13 @@ export interface IPathObject {
* @param blockStyle The block style to use.
*/
setStyle?(blockStyle: BlockStyle): void;

/**
* Add or remove styling indicating that a block will be bumped out and
* replaced by another block that is mid-move.
*
* @param replacing True if the block is at risk of being replaced, false
* otherwise.
*/
updateReplacing?(replacing: boolean): void;
}
24 changes: 6 additions & 18 deletions core/renderers/common/path_object.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
// Former goog.module ID: Blockly.blockRendering.PathObject

import type {BlockSvg} from '../../block_svg.js';
import type {Connection} from '../../connection.js';
import {RenderedConnection} from '../../rendered_connection.js';
import type {BlockStyle} from '../../theme.js';
import {Coordinate} from '../../utils/coordinate.js';
Expand Down Expand Up @@ -193,25 +192,14 @@ export class PathObject implements IPathObject {
}

/**
* 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.
* Add or remove styling indicating that a block will be bumped out and
* replaced by another block that is mid-move.
*
* @param enable True if styling should be added.
*/
updateReplacementFade(enable: boolean) {
this.setClass_('blocklyReplaceable', enable);
}

/**
* 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.
* @param replacing True if the block is at risk of being replaced, false
* otherwise.
*/
updateShapeForInputHighlight(_conn: Connection, _enable: boolean) {
// NOOP
updateReplacing(replacing: boolean) {
this.setClass_('blocklyReplaceable', replacing);
}

/** Adds the given path as a connection highlight for the given connection. */
Expand Down
7 changes: 4 additions & 3 deletions core/renderers/common/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type {BlockSvg} from '../../block_svg.js';
import {Connection} from '../../connection.js';
import {ConnectionType} from '../../connection_type.js';
import type {IRegistrable} from '../../interfaces/i_registrable.js';
import type {RenderedConnection} from '../../rendered_connection.js';
import type {BlockStyle, Theme} from '../../theme.js';
import {ConstantProvider} from './constants.js';
import {Drawer} from './drawer.js';
Expand Down Expand Up @@ -188,11 +189,11 @@ export class Renderer implements IRegistrable {
/**
* Determine whether or not to highlight a connection.
*
* @param _conn The connection to determine whether or not to highlight.
* @param connection The connection to determine whether or not to highlight.
* @returns True if we should highlight the connection.
*/
shouldHighlightConnection(_conn: Connection): boolean {
return true;
shouldHighlightConnection(connection: RenderedConnection): boolean {
return !connection.getSourceBlock().isDragging();
}

/**
Expand Down
99 changes: 0 additions & 99 deletions core/renderers/zelos/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,12 +105,6 @@ export class ConstantProvider extends BaseConstantProvider {
/** The size of the selected glow. */
SELECTED_GLOW_SIZE = 0.5;

/** The replacement glow colour. */
REPLACEMENT_GLOW_COLOUR = '#fff200';

/** The size of the selected glow. */
REPLACEMENT_GLOW_SIZE = 2;

/**
* The ID of the selected glow filter, or the empty string if no filter is
* set.
Expand All @@ -122,17 +116,6 @@ export class ConstantProvider extends BaseConstantProvider {
*/
private selectedGlowFilter: SVGElement | null = null;

/**
* The ID of the replacement glow filter, or the empty string if no filter
* is set.
*/
replacementGlowFilterId = '';

/**
* The <filter> element to use for a replacement glow, or null if not set.
*/
private replacementGlowFilter: SVGElement | null = null;

/**
* The object containing information about the hexagon used for a boolean
* reporter block. Null before init is called.
Expand Down Expand Up @@ -269,26 +252,13 @@ export class ConstantProvider extends BaseConstantProvider {
selectedGlowSize && !isNaN(selectedGlowSize)
? selectedGlowSize
: this.SELECTED_GLOW_SIZE;
this.REPLACEMENT_GLOW_COLOUR =
theme.getComponentStyle('replacementGlowColour') ||
this.REPLACEMENT_GLOW_COLOUR;
const replacementGlowSize = Number(
theme.getComponentStyle('replacementGlowSize'),
);
this.REPLACEMENT_GLOW_SIZE =
replacementGlowSize && !isNaN(replacementGlowSize)
? replacementGlowSize
: this.REPLACEMENT_GLOW_SIZE;
}

override dispose() {
super.dispose();
if (this.selectedGlowFilter) {
dom.removeNode(this.selectedGlowFilter);
}
if (this.replacementGlowFilter) {
dom.removeNode(this.replacementGlowFilter);
}
}

override makeStartHat() {
Expand Down Expand Up @@ -740,67 +710,6 @@ export class ConstantProvider extends BaseConstantProvider {
this.selectedGlowFilterId = selectedGlowFilter.id;
this.selectedGlowFilter = selectedGlowFilter;

// Using a dilate distorts the block shape.
// Instead use a gaussian blur, and then set all alpha to 1 with a transfer.
const replacementGlowFilter = dom.createSvgElement(
Svg.FILTER,
{
'id': 'blocklyReplacementGlowFilter' + this.randomIdentifier,
'height': '160%',
'width': '180%',
'y': '-30%',
'x': '-40%',
},
defs,
);
dom.createSvgElement(
Svg.FEGAUSSIANBLUR,
{'in': 'SourceGraphic', 'stdDeviation': this.REPLACEMENT_GLOW_SIZE},
replacementGlowFilter,
);
// Set all gaussian blur pixels to 1 opacity before applying flood
const replacementComponentTransfer = dom.createSvgElement(
Svg.FECOMPONENTTRANSFER,
{'result': 'outBlur'},
replacementGlowFilter,
);
dom.createSvgElement(
Svg.FEFUNCA,
{'type': 'table', 'tableValues': '0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1'},
replacementComponentTransfer,
);
// Color the highlight
dom.createSvgElement(
Svg.FEFLOOD,
{
'flood-color': this.REPLACEMENT_GLOW_COLOUR,
'flood-opacity': 1,
'result': 'outColor',
},
replacementGlowFilter,
);
dom.createSvgElement(
Svg.FECOMPOSITE,
{
'in': 'outColor',
'in2': 'outBlur',
'operator': 'in',
'result': 'outGlow',
},
replacementGlowFilter,
);
dom.createSvgElement(
Svg.FECOMPOSITE,
{
'in': 'SourceGraphic',
'in2': 'outGlow',
'operator': 'over',
},
replacementGlowFilter,
);
this.replacementGlowFilterId = replacementGlowFilter.id;
this.replacementGlowFilter = replacementGlowFilter;

if (injectionDivIfIsParent) {
// If this renderer is for the parent workspace, add CSS variables scoped
// to the injection div referencing the created patterns so that CSS can
Expand All @@ -809,10 +718,6 @@ export class ConstantProvider extends BaseConstantProvider {
'--blocklySelectedGlowFilter',
`url(#${this.selectedGlowFilterId})`,
);
injectionDivIfIsParent.style.setProperty(
'--blocklyReplacementGlowFilter',
`url(#${this.replacementGlowFilterId})`,
);
}
}

Expand Down Expand Up @@ -904,10 +809,6 @@ export class ConstantProvider extends BaseConstantProvider {
`fill: none;`,
`filter: var(--blocklySelectedGlowFilter);`,
`}`,

`${selector} .blocklyReplaceable>.blocklyPath {`,
`filter: var(--blocklyReplacementGlowFilter);`,
`}`,
];
}
}
21 changes: 0 additions & 21 deletions core/renderers/zelos/path_object.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
// Former goog.module ID: Blockly.zelos.PathObject

import type {BlockSvg} from '../../block_svg.js';
import type {Connection} from '../../connection.js';
import {FocusManager} from '../../focus_manager.js';
import type {BlockStyle} from '../../theme.js';
import * as dom from '../../utils/dom.js';
Expand Down Expand Up @@ -113,26 +112,6 @@ export class PathObject extends BasePathObject {
}
}

override updateReplacementFade(enable: boolean) {
this.setClass_('blocklyReplaceable', enable);
}

override updateShapeForInputHighlight(conn: Connection, enable: boolean) {
const name = conn.getParentInput()!.name;
const outlinePath = this.getOutlinePath(name);
if (!outlinePath) {
return;
}
if (enable) {
outlinePath.setAttribute(
'filter',
'url(#' + this.constants.replacementGlowFilterId + ')',
);
} else {
outlinePath.removeAttribute('filter');
}
}

/**
* Method that's called when the drawer is about to draw the block.
*/
Expand Down
15 changes: 15 additions & 0 deletions core/renderers/zelos/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
// Former goog.module ID: Blockly.zelos.Renderer

import type {BlockSvg} from '../../block_svg.js';
import {ConnectionType} from '../../connection_type.js';
import type {RenderedConnection} from '../../rendered_connection.js';
import type {BlockStyle} from '../../theme.js';
import * as blockRendering from '../common/block_rendering.js';
import type {RenderInfo as BaseRenderInfo} from '../common/info.js';
Expand Down Expand Up @@ -86,6 +88,19 @@ export class Renderer extends BaseRenderer {
override getConstants(): ConstantProvider {
return this.constants_;
}

/**
* Determine whether or not to highlight a connection.
*
* @param connection The connection to determine whether or not to highlight.
* @returns True if we should highlight the connection.
*/
override shouldHighlightConnection(connection: RenderedConnection): boolean {
return (
super.shouldHighlightConnection(connection) ||
connection.type === ConnectionType.INPUT_VALUE
);
}
}

blockRendering.register('zelos', Renderer);
2 changes: 0 additions & 2 deletions core/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,6 @@ export namespace Theme {
cursorColour?: string;
selectedGlowColour?: string;
selectedGlowOpacity?: number;
replacementGlowColour?: string;
replacementGlowOpacity?: number;
}

export interface FontStyle {
Expand Down
Loading