#Component Class Reference
The Victor::Component
class provides you with means to create standalone SVG components that can be composed together.
#Initialization
Victor::Component
is an abstract class. Create a class that inherits it:
#Required Implementation Methods
All components are rendered with 100% width and height, and with a given viewBox
that is determined by x
, y
, width
and height
as provided by the object itself.
Your class is required to implement these methods:
##body
This method will be called once and once only when the SVG is rendered. In this method you are expected to build your SVG by calling add.*
and append
(or its alias, embed
) to add SVG elements.
##height
/ #width
Since components are designed to be composable, each component is required to advertise its point height and width. This becomes useful when a container component needs to set its own size based on the size of the guest components.
You can either provide these values as method overrides, or as instance variables.
#Optional Implementation Methods
##x
/ #y
Similar to the width
and height
properties, you may define the x
and y
origin of your object. By default, these are set to 0.
This is useful when you wish to provide a host component with the ability to set the object's location, without resorting to positioning by other means, such as SVG's <g transform='translate(...)'>
tag.
You can either provide these values as method overrides, or as instance variables.
##style
The Component class is designed to allow each component to define its own CSS stylesheet, and is responsible for merging all styles together whenever you call the append
/ embed
method.
To achieve this, you can define a style
method that returns a hash.
#Additional Methods
#add
This is an alias to the underlying Victor::SVG
object. It is intended to be used in your #body
implementation to add SVG elements.
##append
/ #embed
Use this method in your your #body
implementation, to embed another component. This method is doing two things:
- Appending the SVG of the guest component.
- Merging the CSS (
#style
) of the guest component into its own.
##svg
Returns the final Victor::SVG
object, after rendering all its guest components and their CSS styles.
Under most normal circumstances, you do not need to call this method directly, it is called as needed by other methods.
Important
Once the svg
method was called, the rendered SVG is considered frozen. This mechanism is in place in order to ensure that your body
implementation is called only once, and applies to other methods (such as render
and save
) that call svg
under the hood.