(abstract) new ElementRenderer()
Base class for all circuit element renderers in the JSCircuit Editor.
- Description:
Base class for all circuit element renderers in the JSCircuit Editor.
This abstract renderer provides common functionality for rendering circuit elements on the HTML5 canvas, including terminal rendering, label placement, selection indicators, and hover effects.
Renderer Architecture:
- Follows the Template Method pattern
- Provides common rendering utilities (terminals, labels, selection)
- Extended by specific renderers (ResistorRenderer, CapacitorRenderer, etc.)
- Uses delegation pattern for element-specific rendering logic
Common Rendering Features:
- Terminal points (connection nodes)
- Element labels with automatic positioning
- Selection highlighting with customizable colors
- Hover effects for user interaction feedback
- Alignment guides for development/debugging
- Source:
Example
class CustomRenderer extends ElementRenderer {
render(element, isSelected, isHovered) {
// Custom element rendering logic
this.renderTerminals(element.nodes);
this.renderLabel(element.label, x, y);
}
}Classes
- ElementRenderer
- Creates a new ElementRenderer instance.
Methods
applyRotation(element, centerX, centerY)
Apply element rotation to the canvas context.
- Description:
Apply element rotation to the canvas context. This should be called before drawing, and must be paired with restoreRotation().
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
element |
Object | The element with rotation properties. |
centerX |
number | Center X coordinate for rotation. |
centerY |
number | Center Y coordinate for rotation. |
calculateTextPosition(centerX, centerY, angle) → {Object}
Calculates text position based on component center and rotation
.- Description:
Calculates text position based on component center and rotation
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
centerX |
number | Component center X |
centerY |
number | Component center Y |
angle |
number | Rotation angle in radians |
Returns:
Text positioning info {textX, textY, textAlign}
- Type
- Object
formatValue(propertyKey, value) → {string}
Formats a component value with its unit for display
.- Description:
Formats a component value with its unit for display
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
propertyKey |
string | The property key (e.g., 'resistance', 'capacitance') |
value |
number | The numeric value |
Returns:
Formatted value with unit (e.g., "10 Ω", "1.5 μF")
- Type
- string
formatWithPrefix(value, unit) → {string}
Formats a number with appropriate SI prefix and unit
.- Description:
Formats a number with appropriate SI prefix and unit
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
value |
number | The numeric value |
unit |
string | The base unit (e.g., 'Ω', 'F', 'H') |
Returns:
Formatted string with prefix and unit
- Type
- string
getElementRotation(element) → {number}
Get the rotation angle in radians from element properties.
- Description:
Get the rotation angle in radians from element properties.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
element |
Object | The element with properties. |
Returns:
Rotation angle in radians.
- Type
- number
getPrimaryProperty(element) → {string|null}
Gets the primary property key for a component type
.- Description:
Gets the primary property key for a component type
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
element |
Object | The element |
Returns:
The primary property key
- Type
- string | null
renderAlignmentGuide(position)
Optional: Renders an alignment guide (e.g., a small cross) at a given position.
- Description:
Optional: Renders an alignment guide (e.g., a small cross) at a given position. This can be used to visualize the grid intersections.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
position |
Position | The position to mark. |
renderElement(element)
Abstract method for rendering an element.
- Description:
Abstract method for rendering an element.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
element |
Object | The element to render. |
renderLabel(text, x, y)
Renders a label at a given position.
- Description:
Renders a label at a given position.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
text |
string | The label text. |
x |
number | X-coordinate. |
y |
number | Y-coordinate. |
renderProperties(element, centerX, centerY, angle)
Renders element properties (label and/or value) below/beside the component
.- Description:
Renders element properties (label and/or value) below/beside the component
- Source:
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
element |
Object | The element to render properties for |
|
centerX |
number | Center X coordinate of the component |
|
centerY |
number | Center Y coordinate of the component |
|
angle |
number |
0
|
Rotation angle in radians |
renderTerminal(position)
Renders a terminal as a small circle.
- Description:
Renders a terminal as a small circle.
- Source:
Parameters:
| Name | Type | Description |
|---|---|---|
position |
Position | The terminal's position. |
restoreRotation()
Restore canvas context after rotation.
- Description:
Restore canvas context after rotation. Only call this if applyRotation() returned true.
- Source: