Stay organized with collections
Save and categorize content based on your preferences.
blockly > blockRendering > PathObject
blockRendering.PathObject class
An object that handles creating and setting each of the SVG elements used by the renderer.
Signature:
export declare class PathObject implements IPathObject
Implements: IPathObject
Constructors
Properties
Methods
| Method |
Modifiers |
Description |
| addConnectionHighlight(connection, connectionPath, offset, rtl) |
|
Adds the given path as a connection highlight for the given connection. |
| applyColour(block) |
|
Apply the stored colours to the block's path, taking into account whether the paths belong to a shadow block. |
| flipRTL() |
|
Flip the SVG paths in RTL. |
| removeConnectionHighlight(connection) |
|
Removes any highlight associated with the given connection, if it exists. |
| setClass_(className, add) |
protected |
Add or remove the given CSS class on the path object's root SVG element. |
| setPath(pathString) |
|
Set the path generated by the renderer onto the respective SVG element. |
| setStyle(blockStyle) |
|
Set the style. |
| updateDisabled_(disabled) |
protected |
Updates the look of the block to reflect a disabled state. |
| updateDraggingDelete(enable) |
|
Add or remove styling showing that a block is dragged over a delete area. |
| updateHighlighted(enable) |
|
Set whether the block shows a highlight or not. Block highlighting is often used to visually mark blocks currently being executed. |
| updateInsertionMarker(enable) |
|
Add or remove styling showing that a block is an insertion marker. |
| updateMovable(enable) |
|
Add or remove styling showing that a block is movable. |
| updateReplacementFade(enable) |
|
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. |
| updateSelected(enable) |
|
Add or remove styling showing that a block is selected. |
| updateShadow_(shadow) |
protected |
Updates the look of the block to reflect a shadow state. |
| updateShapeForInputHighlight(_conn, _enable) |
|
Add or remove styling that shows that if the dragging block is dropped, this block will be connected to the input. |
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-05-16 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-05-16 UTC."],[[["\u003cp\u003eThe \u003ccode\u003ePathObject\u003c/code\u003e class in Blockly's block rendering namespace handles the creation and management of SVG elements for rendering blocks.\u003c/p\u003e\n"],["\u003cp\u003eIt stores properties like style, SVG elements for the path, cursor, and marker, and provides methods for applying colors, updating visual states (e.g., highlighting, selection), and managing connection highlights.\u003c/p\u003e\n"],["\u003cp\u003e\u003ccode\u003ePathObject\u003c/code\u003e implements the \u003ccode\u003eIPathObject\u003c/code\u003e interface and uses a \u003ccode\u003eConstantProvider\u003c/code\u003e for consistent rendering values.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can use \u003ccode\u003ePathObject\u003c/code\u003e methods to manipulate the visual representation of blocks based on user interactions and block states, like highlighting, selection, dragging, and connections.\u003c/p\u003e\n"]]],["The `PathObject` class manages SVG elements for block rendering, implementing the `IPathObject` interface. It constructs SVG elements, sets styles and paths, and manages visual states. Key actions include applying colors, setting cursor/marker SVGs, flipping paths for RTL, and updating styles for disabled, shadow, selected, highlighted, movable, and deletion states. It also handles connection highlights and insertion markers and updates styling for input connections and replacement fades.\n"],null,["[blockly](./blockly.md) \\\u003e [blockRendering](./blockly.blockrendering_namespace.md) \\\u003e [PathObject](./blockly.blockrendering_namespace.pathobject_class.md)\n\nblockRendering.PathObject class\n-------------------------------\n\nAn object that handles creating and setting each of the SVG elements used by the renderer.\n\n**Signature:** \n\n export declare class PathObject implements IPathObject \n\n**Implements:** [IPathObject](./blockly.blockrendering_namespace.ipathobject_interface.md)\n\nConstructors\n------------\n\n| Constructor | Modifiers | Description |\n|-----------------------------------------------------------------------------------------------------------------------------|-----------|-----------------------------------------------------|\n| [(constructor)(root, style, constants)](./blockly.blockrendering_namespace.pathobject_class._constructor__1_constructor.md) | | Constructs a new instance of the `PathObject` class |\n\nProperties\n----------\n\n| Property | Modifiers | Type | Description |\n|----------------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------------------|-------------|\n| [constants](./blockly.blockrendering_namespace.pathobject_class.constants_property.md) | | [ConstantProvider](./blockly.blockrendering_namespace.constantprovider_class.md) | |\n| [style](./blockly.blockrendering_namespace.pathobject_class.style_property.md) | | BlockStyle | |\n| [svgPath](./blockly.blockrendering_namespace.pathobject_class.svgpath_property.md) | | SVGElement | |\n| [svgRoot](./blockly.blockrendering_namespace.pathobject_class.svgroot_property.md) | | SVGElement | |\n\nMethods\n-------\n\n| Method | Modifiers | Description |\n|-----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [addConnectionHighlight(connection, connectionPath, offset, rtl)](./blockly.blockrendering_namespace.pathobject_class.addconnectionhighlight_1_method.md) | | Adds the given path as a connection highlight for the given connection. |\n| [applyColour(block)](./blockly.blockrendering_namespace.pathobject_class.applycolour_1_method.md) | | Apply the stored colours to the block's path, taking into account whether the paths belong to a shadow block. |\n| [flipRTL()](./blockly.blockrendering_namespace.pathobject_class.fliprtl_1_method.md) | | Flip the SVG paths in RTL. |\n| [removeConnectionHighlight(connection)](./blockly.blockrendering_namespace.pathobject_class.removeconnectionhighlight_1_method.md) | | Removes any highlight associated with the given connection, if it exists. |\n| [setClass_(className, add)](./blockly.blockrendering_namespace.pathobject_class.setclass__1_method.md) | `protected` | Add or remove the given CSS class on the path object's root SVG element. |\n| [setPath(pathString)](./blockly.blockrendering_namespace.pathobject_class.setpath_1_method.md) | | Set the path generated by the renderer onto the respective SVG element. |\n| [setStyle(blockStyle)](./blockly.blockrendering_namespace.pathobject_class.setstyle_1_method.md) | | Set the style. |\n| [updateDisabled_(disabled)](./blockly.blockrendering_namespace.pathobject_class.updatedisabled__1_method.md) | `protected` | Updates the look of the block to reflect a disabled state. |\n| [updateDraggingDelete(enable)](./blockly.blockrendering_namespace.pathobject_class.updatedraggingdelete_1_method.md) | | Add or remove styling showing that a block is dragged over a delete area. |\n| [updateHighlighted(enable)](./blockly.blockrendering_namespace.pathobject_class.updatehighlighted_1_method.md) | | Set whether the block shows a highlight or not. Block highlighting is often used to visually mark blocks currently being executed. |\n| [updateInsertionMarker(enable)](./blockly.blockrendering_namespace.pathobject_class.updateinsertionmarker_1_method.md) | | Add or remove styling showing that a block is an insertion marker. |\n| [updateMovable(enable)](./blockly.blockrendering_namespace.pathobject_class.updatemovable_1_method.md) | | Add or remove styling showing that a block is movable. |\n| [updateReplacementFade(enable)](./blockly.blockrendering_namespace.pathobject_class.updatereplacementfade_1_method.md) | | 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. |\n| [updateSelected(enable)](./blockly.blockrendering_namespace.pathobject_class.updateselected_1_method.md) | | Add or remove styling showing that a block is selected. |\n| [updateShadow_(shadow)](./blockly.blockrendering_namespace.pathobject_class.updateshadow__1_method.md) | `protected` | Updates the look of the block to reflect a shadow state. |\n| [updateShapeForInputHighlight(_conn, _enable)](./blockly.blockrendering_namespace.pathobject_class.updateshapeforinputhighlight_1_method.md) | | Add or remove styling that shows that if the dragging block is dropped, this block will be connected to the input. |"]]
