Fork me on GitHub

Shape

new Shape( )

Shape class that should be extended

Members

calculatePosition

displayLabel

kill

Methods

{Shape} addAttribute( String attributeName , String attributeValue )

Adds an extra attribute to the shape
Parameters:
Name Type Description
attributeName String The name of the attribute
attributeValue String The value of the attribute
Returns:
{ Shape } The current shape

{Shape} addClass( String className )

Adds a class to the shape DOM
Parameters:
Name Type Description
className String The class to add
Returns:
{ Shape } The current shape

addProp( String prop , val )

Adds a property to the property array
Parameters:
Name Type Description
prop String The property to add
val The value to save

{Shape} addTransform( String type , String args )

Adds a transform property to the shape.
Parameters:
Name Type Description
type String The transform type ("rotate", "transform" or "scale")
args String The arguments following the transform
Returns:
{ Shape } The current shape

{Shape} applyGenericStyle( )

Applies the generic style to the shape. This is a method that applies to most shapes, hence should not be overridden. However if you create a bundle of shapes that extend another one, you may use it to set common style properties to all your shapes.
Returns:
{ Shape } The current shape

{Shape} applyStyle( )

Applies the style to the shape. This method can be extended to apply specific style to the shapes
Returns:
{ Shape } The current shape

(protected) {Boolean} areHandlesInDom( )

Returns:
{ Boolean } ```true``` if the handles are in the DOM

{Shape} autoAxes( )

Assigns the shape to the default x and y axes of the graph, only if they don't exist yet
See:
Returns:
{ Shape } The current shape

{Object} calculatePosition( [ , Number, Position index ] , Position relToPosition )

Returns a computed position object
Parameters:
Name Type Attributes Default Description
index Number | Position <optional>
0 The index of the position to compute
relToPosition Position A base position from which to compute the position (useful for dx values)
Returns:
{ Object } The computed position object in the format { x: x_in_px, y: y_in_px }

{Shape} changed( )

Triggers a ```shapeChanged``` event on the graph and a ```changed``` event on the shape
Returns:
{ Shape } The current shape

createHandles( )

Creates the handles for the shape. Should be implemented by the children shapes classes.

{Shape} displayLabel( [ , Number index ] )

Displays a hidden label
Parameters:
Name Type Attributes Default Description
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} draw( Boolean force , Boolean preventRedraw )

Initial drawing of the shape. Adds it to the DOM and creates the labels. If the shape was already in the DOM, the method simply recreates the labels and reapplies the shape style, unless ```force``` is set to ```true```
Parameters:
Name Type Description
force Boolean Forces adding the shape to the DOM (useful if the shape has changed layer)
preventRedraw Boolean Prevents the redraw method
Returns:
{ Shape } The current shape

{Shape} emptyLabels( )

Temporarily empties the labels, until the next rendering. This is used when the shape should not be displayed
Returns:
{ Shape } The current shape instance

{Shape} forceParentDom( )

Forces the DOM parent (instead of the normal layer)
Returns:
{ Shape } The current shape

{Object} getData( )

Returns:
{ Object } The shape's underlying data object

{String} getFillColor( )

Returns the fill color
Returns:
{ String } The fill color of the shape

{Object} getHighlightAttributes( )

See:
Returns:
{ Object } The attributes taken by the shape when highlighted

{Position} getLabelPosition( [ , Number index ] )

Returns the position of the label
Parameters:
Name Type Attributes Default Description
index Number <optional>
0 The index of the label
Returns:
{ Position } The current position of the label

{String} getLabelText( [ , Number index ] )

Returns the text of the label
Parameters:
Name Type Attributes Default Description
index Number <optional>
0 The index of the label
Returns:
{ String } The text of the label

{Number} getLayer( )

Returns the layer on which the shape is placed
Returns:
{ Number } The layer number (1 being the lowest layer)

{String} getMaskingID( )

Returns the masking id of the shape. Returns null if the shape does not behave as a mask
Returns:
{ String } The ```id``` attribute of the shape

{Position} getPosition( [ , Number index ] )

Returns a stored position object
Parameters:
Name Type Attributes Default Description
index Number <optional>
0 The index of the position to compute
Returns:
{ Position } The position at the proper index, or undefined

getProp( String prop [ , index ] )

Returns a property of the shape
Parameters:
Name Type Attributes Default Description
prop String The property to retrieve
index <optional>
0 The index of the property array

{Object} getProperties( )

Gets all dumpable properties of the shape
Returns:
{ Object } properties - The properties object

getProps( String prop )

Returns all the properties of the shape
Parameters:
Name Type Description
prop String The property to retrieve

getSelectStyle( Object.<String, String> The )

Returns the special style of the shape when it is selected.
Parameters:
Name Type Description
The Object.<String, String> SVG attributes to apply to the shape
See:

{Serie} getSerie( )

Returns:
{ Serie } The serie associated to the shape

{String} getStrokeColor( )

Returns the stroke color
Returns:
{ String } The stroke color of the shape

{String} getStrokeWidth( )

Returns the stroke width
Returns:
{ String } The stroke width of the shape

{String} getType( )

Returns:
{ String } The type of the shape

{XAxis} getXAxis( )

Returns the x axis associated to the shape. If non-existent, assigns it automatically
Returns:
{ XAxis } The x axis associated to the shape.

{YAxis} getYAxis( )

Returns the y axis associated to the shape. If non-existent, assigns it automatically
Returns:
{ YAxis } The y axis associated to the shape.

handleMouseDown( Event e )

Handles mouse down events
Parameters:
Name Type Description
e Event The native event
Returns:
The result of the Shape#handleMouseDownImpl method.prototype

{Boolean} hasHandles( Boolean setter )

Sets or queries whether the shape can have handles. Even if the property is set to false, the getter can return true if the property ```statichandles``` is true (used when handles never disappear)
Parameters:
Name Type Description
setter Boolean If used, defined if the shape has handles or not
Returns:
{ Boolean } true is the shape has handles, false otherwise
Examples
Shape.hasHandles( true ); // Sets that the shape has handles
Shape.hasHandles( false ); // Sets that the shape has no handles
Shape.hasHandles( ); // Queries the shape to determine if it has handles or not. Also returns true if handles are static

{Boolean} hasStaticHandles( )

Returns:
{ Boolean } ```true``` if the shape has static handles, ```false``` otherwise

{Shape} hide( )

Hides the shape
Returns:
{ Shape } The current shape

{Shape} hideLabel( [ , Number index ] )

Hides a displayed label
Parameters:
Name Type Attributes Default Description
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} highlight( [ , Object.<String, String> attributes ] [ , String saveDomName ] )

Highlights the shape with attributes
Parameters:
Name Type Attributes Default Description
attributes Object.<String, String> <optional>
A hashmap of attributes to apply. If omitted, Shape#getHighlightAttributes will be called
saveDomName String <optional>
highlight The name to which the current shape attributes will be saved to be recovered later with the Shape#unHighlight method
See:
Returns:
{ Shape } The current shape
Example
shape.highlight( { fill: 'red', 'fill-opacity': 0.5 } );

{Shape} init( Graph graph , Object properties )

Initializes the shape
Parameters:
Name Type Description
graph Graph The graph containing the shape
properties Object The properties object (not copied)
Returns:
{ Shape } The current shape

initImpl( )

Implentation of the init method. To be extended if necessary on extended Shape classes

{Boolean} isHidden( )

Returns whether the shape is hidden or not
Returns:
{ Boolean } true if the shape is hidden, false otherwise

{Boolean} isLabelEditable( Number labelIndex )

Determines if the label is editable
Parameters:
Name Type Description
labelIndex Number The index of the label
Returns:
{ Boolean } ```true``` if the label is editable, ```false``` otherwise

{Boolean} isLocked( )

Returns:
{ Boolean } True if the shape is locked, false otherwise

{Boolean} isMovable( )

Returns:
{ Boolean } True if the shape is movable, false otherwise

{Boolean} isResizable( )

Returns:
{ Boolean } True if the shape is resizable, false otherwise

{Boolean} isSelectable( )

Returns:
{ Boolean } True if the shape is selectable, false otherwise

{Boolean} isSelected( )

Returns the shape selection status
Returns:
{ Boolean } true is the shape is selected, false otherwise

{Boolean} isVisible( )

Returns whether the shape is visible or not
Returns:
{ Boolean } true if the shape is visible, false if it is hidden

kill( )

Removes the shape from the DOM and unlinks it from the graph

{Shape} lock( )

Locks the shape (prevents selection, resizing and moving)
Returns:
{ Shape } The current shape

{Shape} maskWith( Shape maskingShape )

Masks the current shape with another shape passed as the first parameter of the method
Parameters:
Name Type Description
maskingShape Shape The shape used to mask the current shape
Returns:
{ Shape } The current shape

{Shape} movable( )

Makes the shape moveable
Returns:
{ Shape } The current shape

{Shape} redraw( )

Redraws the shape. Repositions it, applies the style and updates the labels
Returns:
{ Shape } The current shape

redrawImpl( )

Implementation of the redraw method. Extended Shape classes should override this method

{Shape} removeClass( String className )

Removes a class from the shape DOM
Parameters:
Name Type Description
className String The class to remove
Returns:
{ Shape } The current shape

resetProp( String prop )

Resets the property array
Parameters:
Name Type Description
prop String The property to reset

{Shape} resetTransforms( )

Resets the transforms
See:
Returns:
{ Shape } The current shape

{Shape} resizable( )

Makes the shape resizable
Returns:
{ Shape } The current shape

{Shape} selectable( )

Makes the shape selectable
Returns:
{ Shape } The current shape

{Shape} setAttributes( Object.<String, String> attributes )

Sets any extra attributes to the DOM element of the shape
Parameters:
Name Type Description
attributes Object.<String, String> An extra attribute array to apply to the shape DOM
Returns:
{ Shape } The current shape
Example
shape.setAttributes( { "data-bindable" : true } );
shape.applyStyle();

setDom( )

Sets a DOM property to the shape

setDomGroup( )

Sets a DOM property to the shape group

{Shape} setEventReceptacle( )

Creates an event receptacle with the coordinates of the shape bounding box
Returns:
{ Shape } The current shape

{Shape} setFillColor( String color )

Saves the fill color
Parameters:
Name Type Description
color String The filling color
Returns:
{ Shape } The current shape

{Shape} setFillOpacity( Number opacity )

Saves the opacity of the filling color of the shape
Parameters:
Name Type Description
opacity Number The filling opacity (0 to 1)
Returns:
{ Shape } The current shape

{Shape} setHighlightAttributes( [ , Object.<String, String> attributes ] )

Sets the attributes the shape will take when highlighted
Parameters:
Name Type Attributes Description
attributes Object.<String, String> <optional>
A hashmap of attributes to apply when the shape is highlighted
See:
Returns:
{ Shape } The current shape

{Shape} setLabelAnchor( String anchor [ , Number index ] )

Sets the anchoring of the label.
Parameters:
Name Type Attributes Default Description
anchor String The anchor of the label. Values can be ```start```, ```middle```, ```end``` or ```inherit```.
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelAngle( Number angle [ , Number index ] )

Sets the angle of the label
Parameters:
Name Type Attributes Default Description
angle Number The angle of the label in degrees (0 to 360°)
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelBackgroundColor( String color [ , Number index ] )

Sets the color of the background of the label.
Parameters:
Name Type Attributes Default Description
color String The color of the background
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelBackgroundOpacity( Number opacity [ , Number index ] )

Sets the opacity of the background of the label.
Parameters:
Name Type Attributes Default Description
opacity Number The opacity of the background, between 0 and 1
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelBaseline( String baseline [ , Number index ] )

Sets the baseline of the label, which affects its y position with respect to the text direction. For text along the x direction, different baselines will reference differently the text to the ```y``` coordinate.
Parameters:
Name Type Attributes Default Description
baseline String The baseline of the label. Most common baselines are ```no-change```, ```central```, ```middle``` and ```hanging```. You will find an explanation of those significations on the corresponding MDN article
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelColor( String color [ , Number index ] )

Sets the color of the label
Parameters:
Name Type Attributes Default Description
color String The color of the label
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelData( String data [ , Number index ] )

Sets the text of the label
Parameters:
Name Type Attributes Default Description
data String Some additional HTML tags that will be set to the label
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelFontSize( String size [ , Number index ] )

Sets the font size of the label
Parameters:
Name Type Attributes Default Description
size String The font size (in px) of the label
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelPosition( Position position [ , Number index ] )

Sets the position of the label
Parameters:
Name Type Attributes Default Description
position Position The position of the label
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelSize( String size [ , Number index ] )

Sets the anchoring of the label.
Parameters:
Name Type Attributes Default Description
size String The font size in px
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelStrokeColor( String color [ , Number index ] )

Sets the color of the stroke of the label.
Parameters:
Name Type Attributes Default Description
color String The color of the stroke
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelStrokeWidth( Number width [ , Number index ] )

Sets the width of the stroke of the label.
Parameters:
Name Type Attributes Default Description
width Number The width of the stroke
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLabelText( String text [ , Number index ] )

Sets the text of the label
Parameters:
Name Type Attributes Default Description
text String The text of the label
index Number <optional>
0 The index of the label
Returns:
{ Shape } The current shape

{Shape} setLayer( Number layer )

Sets the layer of the shape
Parameters:
Name Type Description
layer Number The layer number (1 being the lowest)
See:
Returns:
{ Shape } The current shape

{Shape} setPosition( Position position [ , Number index ] )

Sets a position object
Parameters:
Name Type Attributes Default Description
position Position The position object to store
index Number <optional>
0 The index of the position to store
Returns:
{ Shape } The current shape

{Shape} setProp( String prop , val [ , index ] )

Sets a property to the shape that is remembered and can be later reexported (or maybe reimported)
Parameters:
Name Type Attributes Default Description
prop String The property to save
val The value to save
index <optional>
0 The index of the property array to save the property
Returns:
{ Shape } The current shape

{Shape} setProperties( Object properties )

Sets all dumpable properties of the shape
Parameters:
Name Type Description
properties Object The properties object
Returns:
{ Shape } The current shape

{Shape} setSelectStyle( [ , Object.<String, String> attr ] )

Defines the style that is applied to the shape when it is selected. The style extends the default style of the shape
Parameters:
Name Type Attributes Default Description
attr Object.<String, String> <optional>
{} The SVG attributes to apply to the shape
Returns:
{ Shape } the current shape
Example
rectangle.setSelectStyle( { fill: 'red' } );

{Shape} setSerie( Serie The )

Assigns a serie to the shape
Parameters:
Name Type Description
The Serie serie that owns the shape
Returns:
{ Shape } The current shape

{Shape} setStaticHandles( Boolean staticHandles )

Assigns static handles to the shape. In this mode, handles will not disappear
Parameters:
Name Type Description
staticHandles Boolean true to enable static handles, false to disable them.
Returns:
{ Shape } the current shape

{Shape} setStrokeColor( )

Saves the stroke color
Returns:
{ Shape } The current shape

{Shape} setStrokeDasharray( String dasharray )

Saves the stroke dash array
Parameters:
Name Type Description
dasharray String The dasharray string
Returns:
{ Shape } The current shape
Example
shape.setStrokeDasharray("5,5,1,4");
shape.applyStyle();

{Shape} setStrokeWidth( String width )

Saves the stroke width
Parameters:
Name Type Description
width String The stroke width
Returns:
{ Shape } The current shape

{Shape} setXAxis( XAxis The )

Assigns the shape to an x axis
Parameters:
Name Type Description
The XAxis X axis related to the shape
Returns:
{ Shape } The current shape

{Shape} setYAxis( YAxis The )

Assigns the shape to an y axis
Parameters:
Name Type Description
The YAxis Y axis related to the shape
Returns:
{ Shape } The current shape

{Shape} show( )

Shows the shape
Returns:
{ Shape } The current shape

{Position} sortPositions( function sortFunction )

Sorts the positions
Parameters:
Name Type Description
sortFunction function Function passed into the ```Array.sort``` method
Returns:
{ Position } The current shape

{Shape} unHighlight( [ , String saveDomName ] )

Removes the highlight properties from the same
Parameters:
Name Type Attributes Default Description
saveDomName String <optional>
highlight The name to which the current shape attributes will be saved to be recovered later with the Shape#unHighlight method
See:
Returns:
{ Shape } The current shape

{Shape} unlock( )

Unlocks the shape (prevents selection, resizing and moving)
Returns:
{ Shape } The current shape

{Shape} unmovable( )

Makes the shape non-moveable
Returns:
{ Shape } The current shape

{Shape} unresizable( )

Makes the shape non-resizable
Returns:
{ Shape } The current shape

{Shape} unselectable( )

Makes the shape non-selectable
Returns:
{ Shape } The current shape

{Shape} updateMask( )

Manually updates the mask of the shape. This is needed because the shape needs to be surrounded by a white rectangle (because transparent is treated as black and will not render the shape) This method will work well for rectangles but should be overridden for other shapes
To Do:
  • Explore a way to make it compatible for all kinds of shapes. Maybe the masker position should span the whole graph...
Returns:
{ Shape } The current shape