# SvgCanvas

The main SvgCanvas class that manages all SVG-related functions

#### Parameters

container | The container HTML element that should hold the SVG root element
config | An object that contains configuration data

Summary

SvgCanvas | The main SvgCanvas class that manages all SVG-related functions
Utils.toXml | Converts characters in a string to XML-friendly entities.
Utils.fromXml | Converts XML entities in a string to single characters.
Utils.encode64 | Converts a string to base64
Utils.decode64 | Converts a string from base64
Utils.convertToXMLReferences | Converts a string to use XML references
rectsIntersect | Check if two rectangles (BBoxes objects) intersect each other
snapToAngle | Returns a 45 degree angle coordinate associated with the two given coordinates
text2xml | Cross-browser compatible method of converting a string to an XML tree found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f
Unit conversion functions |
convertToNum | Converts given values to numbers.
setUnitAttr | Sets an element’s attribute based on the unit in its current value.
isValidUnit | Check if an attribute’s value is in a valid format
Undo/Redo history management |
ChangeElementCommand | History command to make a change to an element.
ChangeElementCommand.apply | Performs the stored change action
ChangeElementCommand.unapply | Reverses the stored change action
ChangeElementCommand.elements | Returns array with element associated with this command
InsertElementCommand | History command for an element that was added to the DOM
InsertElementCommand.apply | Re-Inserts the new element
InsertElementCommand.unapply | Removes the element
InsertElementCommand.elements | Returns array with element associated with this command
RemoveElementCommand | History command for an element removed from the DOM
RemoveElementCommand.apply | Re-removes the new element
RemoveElementCommand.unapply | Re-adds the new element
RemoveElementCommand.elements | Returns array with element associated with this command
MoveElementCommand | History command for an element that had its DOM position changed
MoveElementCommand.unapply | Re-positions the element
MoveElementCommand.unapply | Positions the element back to its original location
MoveElementCommand.elements | Returns array with element associated with this command
BatchCommand | History command that can contain/execute multiple other commands
BatchCommand.apply | Runs “apply” on all subcommands
BatchCommand.unapply | Runs “unapply” on all subcommands
BatchCommand.elements | Iterate through all our subcommands and returns all the elements we are changing
BatchCommand.addSubCommand | Adds a given command to the history stack
BatchCommand.isEmpty | Returns a boolean indicating whether or not the batch command is empty
resetUndoStack | Resets the undo stack, effectively clearing the undo/redo history
undoMgr.getUndoStackSize | Integer with the current size of the undo history stack
undoMgr.getRedoStackSize | Integer with the current size of the redo history stack
undoMgr.getNextUndoCommandText | String associated with the next undo command
undoMgr.getNextRedoCommandText | String associated with the next redo command
undoMgr.undo | Performs an undo step
undoMgr.redo | Performs a redo step
addCommandToHistory | Adds a command object to the undo history stack
beginUndoableChange | This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
finishUndoableChange | This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
Selector | Private class for DOM element selection boxes
Functions |
Selector.reset | Used to reset the id and element that the selector is attached to
Selector.showGrips | Show the resize grips of this selector
Selector.updateGripCursors | Updates cursors for corner grips on rotation so arrows point the right way
Selector.resize | Updates the selector to match the element’s size
SelectorManager | Public class to manage all selector objects (selection boxes)
SelectorManager.initGroup | Resets the parent selector group element
SelectorManager.requestSelector | Returns the selector based on the given element
SelectorManager.releaseSelector | Removes the selector of the given element (hides selection box)
SelectorManager.getRubberBandBox | Returns the rubberBandBox DOM element.
Helper functions |
walkTree | Walks the tree and executes the callback on each element in a top-down fashion
walkTreePost | Walks the tree and executes the callback on each element in a depth-first fashion
assignAttributes | Assigns multiple attributes to an element.
cleanupElement | Remove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJson | Create a new SVG element based on the given object keys/values and add it to the current layer The element will be ran through cleanupElement before being returned
addExtension | Add an extension to the editor
shortFloat | Rounds a given value to a float with number of digits defined in save_options
getStrokedBBox | Get the bounding box for one or more stroked and/or transformed elements
getVisibleElements | Get all elements that have a BBox (excludes <defs>, <title>, etc).
copyElem | Create a clone of an element, updating its ID and its children’s IDs when needed
getElem | Get a DOM element by ID within the SVG root element.
getId | Returns the last created DOM element ID string
getNextId | Creates and returns a unique ID string for a DOM element
bind | Attaches a callback function to an event
setIdPrefix | Changes the ID prefix to the given value
sanitizeSvg | Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttr | Extracts the URL from the url(...)
getBBox | Get the given/selected element’s bounding box object, convert it to be more usable when necessary
ffClone | Hack for Firefox bugs where text element features aren’t updated.
getPathBBox | Get correct BBox for a path in Webkit Converted from code found here: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
Element Transforms |
getRotationAngle | Get the rotation angle of the given/selected DOM element
setRotationAngle | Removes any old rotations if present, prepends a new rotation at the transformed center
getTransformList | Returns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensions | Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElement | Applies coordinate changes to an element based on the given matrix
recalculateDimensions | Decides the course of action based on the element’s transform list
transformPoint | A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentity | Helper function to check if the matrix performs no actual transform (i.e.
matrixMultiply | This function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransform | This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransform | See if the given transformlist includes a non-indentity matrix transform
getMatrix | Get the matrix object for a given element
transformBox | Transforms a rectangle based on the given matrix
Selection |
clearSelection | Clears the selection.
addToSelection | Adds a list of elements to the selection.
removeFromSelection | Removes elements from the selection.
selectAllInCurrentLayer | Clears the selection, then adds all elements in the current layer to the selection.
smoothControlPoints | Takes three points and creates a smoother line based on them
getMouseTarget | Gets the desired element from a mouse event
preventClickDefault | Prevents default browser click behaviour on the given element
Text edit functions | Functions relating to editing text elements
Path edit functions | Functions relating to editing path elements
Serialization |
removeUnusedDefElems | Looks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToString | Main function to set up the SVG content for output
svgToString | Sub function ran on each SVG element to convert it to a string as desired
embedImage | Converts a given image file to a data URL when possible, then runs a given callback
save | Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExport | Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgString | Returns the current drawing as raw SVG XML text.
setSvgString | This function sets the current drawing as the input SVG XML.
importSvgString | This function imports the input SVG XML into the current layer in the drawing
Layers |
identifyLayers | Updates layer system
createLayer | Creates a new top-level layer in the drawing with the given name, sets the current layer to it, and then clears the selection This function then calls the ‘changed’ handler.
deleteCurrentLayer | Deletes the current layer from the drawing and then clears the selection.
getNumLayers | Returns the number of layers in the current drawing.
getLayer | Returns the name of the ith layer.
getCurrentLayer | Returns the name of the currently selected layer.
setCurrentLayer | Sets the current layer.
renameCurrentLayer | Renames the current layer.
setCurrentLayerPosition | Changes the position of the current layer to the new value.
getLayerVisibility | Returns whether the layer is visible.
setLayerVisibility | Sets the visibility of the layer.
moveSelectedToLayer | Moves the selected elements to layername.
getLayerOpacity | Returns the opacity of the given layer.
setLayerOpacity | Sets the opacity of the given layer.
Document functions |
clear | Clears the current document.
linkControlPoints | Alias function
getContentElem | Returns the content DOM element
getRootElem | Returns the root DOM element
getSelectedElems | Returns the array with selected DOM elements
getResolution | Returns the current dimensions and zoom level in an object
getZoom | Returns the current zoom level
getVersion | Returns a string which describes the revision number of SvgCanvas.
setUiStrings | Update interface strings with given values
setConfig | Update configuration options with given values
getDocumentTitle | Returns the current document title or an empty string if not found
setDocumentTitle | Adds/updates a title element for the document with the given name.
getEditorNS | Returns the editor’s namespace URL, optionally adds it to root element
setResolution | Changes the document’s dimensions to the given size
getOffset | Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoom | Sets the zoom level on the canvas-side based on the given value
setZoom | Sets the zoom to the given level
getMode | Returns the current editor mode string
setMode | Sets the editor’s mode to the given string
Element Styling |
getColor | Returns the current fill/stroke option
setColor | Change the current stroke/fill color/gradient value
findDefs | Return the document’s <defs> element, create it first if necessary
setGradient | Apply the current gradient to selected element’s fill or stroke
findDuplicateGradient | Check if exact gradient already exists
setPaint | Set a color/gradient to a fill/stroke
getStrokeWidth | Returns the current stroke-width value
setStrokeWidth | Sets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttr | Set the given stroke-related attribute the given value for selected elements
getOpacity | Returns the current opacity
setOpacity | Sets the given opacity to the current selected elements
getOpacity | Returns the current fill opacity
getStrokeOpacity | Returns the current stroke opacity
setPaintOpacity | Sets the current fill/stroke opacity
getBlur | Gets the stdDeviation blur value of the given element
setBlurNoUndo | Sets the stdDeviation blur value on the selected element without being undoable
setBlurOffsets | Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlur | Adds/updates the blur filter to the selected element
getBold | Check whether selected element is bold or not
setBold | Make the selected element bold or normal
getItalic | Check whether selected element is italic or not
setItalic | Make the selected element italic or normal
getFontFamily | Returns the current font family
setFontFamily | Set the new font family
getFontSize | Returns the current font size
setFontSize | Applies the given font size to the selected element
getText | Returns the current text (textContent) of the selected element
setTextContent | Updates the text element with the given string
setImageURL | Sets the new image URL for the selected image element.
setRectRadius | Sets the rx & ry values to the selected rect element to change its corner radius
Element manipulation |
setSegType | Sets the new segment type to the selected segment(s).
convertToPath | Convert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndo | This function makes the changes to the elements.
changeSelectedAttribute | Change the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElements | Removes all selected elements from the DOM and adds the change to the history stack
groupSelectedElements | Wraps all the selected elements in a group (g) element
ungroupSelectedElement | Unwraps all the elements in a selected group (g) element.
moveToTopSelectedElement | Repositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElement | Repositions the selected element to the top in the DOM to appear under other elements
moveSelectedElements | Moves selected elements on the X/Y axis
cloneSelectedElements | Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElements | Aligns selected elements
Additional editor tools |
updateCanvas | Updates the editor canvas width/height/position after a zoom has occurred
setBackground | Set the background of the editor (NOT the actual document)
cycleElement | Select the next/previous element within the current layer

### Utils.toXml

Converts characters in a string to XML-friendly entities.

Example: “&” becomes “&amp;”

#### Parameters

str | The string to be converted

#### Returns

The converted string

### Utils.fromXml

Converts XML entities in a string to single characters. Example: “&amp;” becomes “&”

#### Parameters

str | The string to be converted

#### Returns

The converted string

### Utils.encode64

Converts a string to base64

### Utils.decode64

Converts a string from base64

### Utils.convertToXMLReferences

Converts a string to use XML references

### rectsIntersect

> "rectsIntersect": function( | r1,
> | r2 | )

Check if two rectangles (BBoxes objects) intersect each other

#### Paramaters

r1 | The first BBox-like object
r2 | The second BBox-like object

#### Returns

Boolean that’s true if rectangles intersect

### snapToAngle

> "snapToAngle": function( | x1,
> | y1,
> | x2,
> | y2 | )

Returns a 45 degree angle coordinate associated with the two given coordinates

#### Parameters

x1 | First coordinate’s x value
x2 | Second coordinate’s x value
y1 | First coordinate’s y value
y2 | Second coordinate’s y value

#### Returns

Object with the following values: x - The angle-snapped x value y - The angle-snapped y value snapangle - The angle at which to snap

### text2xml

> "text2xml": function( | sXML | )

Cross-browser compatible method of converting a string to an XML tree found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f

### Unit conversion functions

### convertToNum

> convertToNum = function( | attr,
> | val | )

Converts given values to numbers. Attributes must be supplied in case a percentage is given

#### Parameters

attr | String with the name of the attribute associated with the value
val | String with the attribute value to convert

### setUnitAttr

> setUnitAttr = function( | elem,
> | attr,
> | val | )

Sets an element’s attribute based on the unit in its current value.

#### Parameters

elem | DOM element to be changed
attr | String with the name of the attribute associated with the value
val | String with the attribute value to convert

### isValidUnit

> canvas.isValidUnit = function( | attr,
> | val | )

Check if an attribute’s value is in a valid format

#### Parameters

attr | String with the name of the attribute associated with the value
val | String with the attribute value to check

### Undo/Redo history management

### ChangeElementCommand

> var ChangeElementCommand = this.undoCmd.changeElement = function( | elem,
> | attrs,
> | text | )

History command to make a change to an element. Usually an attribute change, but can also be textcontent.

#### Parameters

elem | The DOM element that was changed
attrs | An object with the attributes to be changed and the values they had before the change
text | An optional string visible to user related to this change

### ChangeElementCommand.apply

Performs the stored change action

### ChangeElementCommand.unapply

Reverses the stored change action

### ChangeElementCommand.elements

Returns array with element associated with this command

### InsertElementCommand

> var InsertElementCommand = this.undoCmd.insertElement = function( | elem,
> | text | )

History command for an element that was added to the DOM

#### Parameters

elem | The newly added DOM element
text | An optional string visible to user related to this change

### InsertElementCommand.apply

Re-Inserts the new element

### InsertElementCommand.unapply

Removes the element

### InsertElementCommand.elements

Returns array with element associated with this command

### RemoveElementCommand

> var RemoveElementCommand = this.undoCmd.removeElement = function( | elem,
> | parent,
> | text | )

History command for an element removed from the DOM

#### Parameters

elem | The removed DOM element
parent | The DOM element’s parent
text | An optional string visible to user related to this change

### RemoveElementCommand.apply

Re-removes the new element

### RemoveElementCommand.unapply

Re-adds the new element

### RemoveElementCommand.elements

Returns array with element associated with this command

### MoveElementCommand

> var MoveElementCommand = this.undoCmd.moveElement = function( | elem,
> | oldNextSibling,
> | oldParent,
> | text | )

History command for an element that had its DOM position changed

#### Parameters

elem | The DOM element that was moved
oldNextSibling | The element’s next sibling before it was moved
oldParent | The element’s parent before it was moved
text | An optional string visible to user related to this change

### MoveElementCommand.unapply

Re-positions the element

### MoveElementCommand.unapply

Positions the element back to its original location

### MoveElementCommand.elements

Returns array with element associated with this command

### BatchCommand

> var BatchCommand = this.undoCmd.batch = function( | text | )

History command that can contain/execute multiple other commands

#### Parameters

text | An optional string visible to user related to this change

### BatchCommand.apply

Runs “apply” on all subcommands

### BatchCommand.unapply

Runs “unapply” on all subcommands

### BatchCommand.elements

Iterate through all our subcommands and returns all the elements we are changing

### BatchCommand.addSubCommand

Adds a given command to the history stack

#### Parameters

cmd | The undo command object to add

### BatchCommand.isEmpty

Returns a boolean indicating whether or not the batch command is empty

### resetUndoStack

> resetUndoStack = function()

Resets the undo stack, effectively clearing the undo/redo history

### undoMgr.getUndoStackSize

#### Returns

Integer with the current size of the undo history stack

### undoMgr.getRedoStackSize

#### Returns

Integer with the current size of the redo history stack

### undoMgr.getNextUndoCommandText

#### Returns

String associated with the next undo command

### undoMgr.getNextRedoCommandText

#### Returns

String associated with the next redo command

### undoMgr.undo

Performs an undo step

### undoMgr.redo

Performs a redo step

### addCommandToHistory

> addCommandToHistory = c.undoCmd.add = function( | cmd | )

Adds a command object to the undo history stack

#### Parameters

cmd | The command object to add

### beginUndoableChange

> c.beginUndoableChange = function( | attrName,
> | elems | )

This function tells the canvas to remember the old values of the attrName attribute for each element sent in. The elements and values are stored on a stack, so the next call to finishUndoableChange() will pop the elements and old values off the stack, gets the current values from the DOM and uses all of these to construct the undo-able command.

#### Parameters

attrName | The name of the attribute being changed
elems | Array of DOM elements being changed

### finishUndoableChange

> c.finishUndoableChange = function()

This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called. The command can then be added to the command history

#### Returns

Batch command object with resulting changes

## Selector

Private class for DOM element selection boxes

#### Parameters

id | integer to internally indentify the selector
elem | DOM element associated with this selector

Summary

Functions |
Selector.reset | Used to reset the id and element that the selector is attached to
Selector.showGrips | Show the resize grips of this selector
Selector.updateGripCursors | Updates cursors for corner grips on rotation so arrows point the right way
Selector.resize | Updates the selector to match the element’s size

### Functions

### Selector.reset

Used to reset the id and element that the selector is attached to

#### Parameters

e | DOM element associated with this selector

### Selector.showGrips

Show the resize grips of this selector

#### Parameters

show | boolean indicating whether grips should be shown or not

### Selector.updateGripCursors

Updates cursors for corner grips on rotation so arrows point the right way

#### Parameters

angle | Float indicating current rotation angle in degrees

### Selector.resize

Updates the selector to match the element’s size

## SelectorManager

Public class to manage all selector objects (selection boxes)

Summary

SelectorManager.initGroup | Resets the parent selector group element
SelectorManager.requestSelector | Returns the selector based on the given element
SelectorManager.releaseSelector | Removes the selector of the given element (hides selection box)
SelectorManager.getRubberBandBox | Returns the rubberBandBox DOM element.
Helper functions |
walkTree | Walks the tree and executes the callback on each element in a top-down fashion
walkTreePost | Walks the tree and executes the callback on each element in a depth-first fashion
assignAttributes | Assigns multiple attributes to an element.
cleanupElement | Remove unneeded (default) attributes, makes resulting SVG smaller
addSvgElementFromJson | Create a new SVG element based on the given object keys/values and add it to the current layer The element will be ran through cleanupElement before being returned
addExtension | Add an extension to the editor
shortFloat | Rounds a given value to a float with number of digits defined in save_options
getStrokedBBox | Get the bounding box for one or more stroked and/or transformed elements
getVisibleElements | Get all elements that have a BBox (excludes <defs>, <title>, etc).
copyElem | Create a clone of an element, updating its ID and its children’s IDs when needed
getElem | Get a DOM element by ID within the SVG root element.
getId | Returns the last created DOM element ID string
getNextId | Creates and returns a unique ID string for a DOM element
bind | Attaches a callback function to an event
setIdPrefix | Changes the ID prefix to the given value
sanitizeSvg | Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
getUrlFromAttr | Extracts the URL from the url(...)
getBBox | Get the given/selected element’s bounding box object, convert it to be more usable when necessary
ffClone | Hack for Firefox bugs where text element features aren’t updated.
getPathBBox | Get correct BBox for a path in Webkit Converted from code found here: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
Element Transforms |
getRotationAngle | Get the rotation angle of the given/selected DOM element
setRotationAngle | Removes any old rotations if present, prepends a new rotation at the transformed center
getTransformList | Returns an object that behaves like a SVGTransformList for the given DOM element
recalculateAllSelectedDimensions | Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
remapElement | Applies coordinate changes to an element based on the given matrix
recalculateDimensions | Decides the course of action based on the element’s transform list
transformPoint | A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
isIdentity | Helper function to check if the matrix performs no actual transform (i.e.
matrixMultiply | This function tries to return a SVGMatrix that is the multiplication m1*m2.
transformListToTransform | This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments
hasMatrixTransform | See if the given transformlist includes a non-indentity matrix transform
getMatrix | Get the matrix object for a given element
transformBox | Transforms a rectangle based on the given matrix
Selection |
clearSelection | Clears the selection.
addToSelection | Adds a list of elements to the selection.
removeFromSelection | Removes elements from the selection.
selectAllInCurrentLayer | Clears the selection, then adds all elements in the current layer to the selection.
smoothControlPoints | Takes three points and creates a smoother line based on them
getMouseTarget | Gets the desired element from a mouse event
preventClickDefault | Prevents default browser click behaviour on the given element
Text edit functions | Functions relating to editing text elements
Path edit functions | Functions relating to editing path elements
Serialization |
removeUnusedDefElems | Looks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.
svgCanvasToString | Main function to set up the SVG content for output
svgToString | Sub function ran on each SVG element to convert it to a string as desired
embedImage | Converts a given image file to a data URL when possible, then runs a given callback
save | Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
rasterExport | Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
getSvgString | Returns the current drawing as raw SVG XML text.
setSvgString | This function sets the current drawing as the input SVG XML.
importSvgString | This function imports the input SVG XML into the current layer in the drawing
Layers |
identifyLayers | Updates layer system
createLayer | Creates a new top-level layer in the drawing with the given name, sets the current layer to it, and then clears the selection This function then calls the ‘changed’ handler.
deleteCurrentLayer | Deletes the current layer from the drawing and then clears the selection.
getNumLayers | Returns the number of layers in the current drawing.
getLayer | Returns the name of the ith layer.
getCurrentLayer | Returns the name of the currently selected layer.
setCurrentLayer | Sets the current layer.
renameCurrentLayer | Renames the current layer.
setCurrentLayerPosition | Changes the position of the current layer to the new value.
getLayerVisibility | Returns whether the layer is visible.
setLayerVisibility | Sets the visibility of the layer.
moveSelectedToLayer | Moves the selected elements to layername.
getLayerOpacity | Returns the opacity of the given layer.
setLayerOpacity | Sets the opacity of the given layer.
Document functions |
clear | Clears the current document.
linkControlPoints | Alias function
getContentElem | Returns the content DOM element
getRootElem | Returns the root DOM element
getSelectedElems | Returns the array with selected DOM elements
getResolution | Returns the current dimensions and zoom level in an object
getZoom | Returns the current zoom level
getVersion | Returns a string which describes the revision number of SvgCanvas.
setUiStrings | Update interface strings with given values
setConfig | Update configuration options with given values
getDocumentTitle | Returns the current document title or an empty string if not found
setDocumentTitle | Adds/updates a title element for the document with the given name.
getEditorNS | Returns the editor’s namespace URL, optionally adds it to root element
setResolution | Changes the document’s dimensions to the given size
getOffset | Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
setBBoxZoom | Sets the zoom level on the canvas-side based on the given value
setZoom | Sets the zoom to the given level
getMode | Returns the current editor mode string
setMode | Sets the editor’s mode to the given string
Element Styling |
getColor | Returns the current fill/stroke option
setColor | Change the current stroke/fill color/gradient value
findDefs | Return the document’s <defs> element, create it first if necessary
setGradient | Apply the current gradient to selected element’s fill or stroke
findDuplicateGradient | Check if exact gradient already exists
setPaint | Set a color/gradient to a fill/stroke
getStrokeWidth | Returns the current stroke-width value
setStrokeWidth | Sets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead
setStrokeAttr | Set the given stroke-related attribute the given value for selected elements
getOpacity | Returns the current opacity
setOpacity | Sets the given opacity to the current selected elements
getOpacity | Returns the current fill opacity
getStrokeOpacity | Returns the current stroke opacity
setPaintOpacity | Sets the current fill/stroke opacity
getBlur | Gets the stdDeviation blur value of the given element
setBlurNoUndo | Sets the stdDeviation blur value on the selected element without being undoable
setBlurOffsets | Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
setBlur | Adds/updates the blur filter to the selected element
getBold | Check whether selected element is bold or not
setBold | Make the selected element bold or normal
getItalic | Check whether selected element is italic or not
setItalic | Make the selected element italic or normal
getFontFamily | Returns the current font family
setFontFamily | Set the new font family
getFontSize | Returns the current font size
setFontSize | Applies the given font size to the selected element
getText | Returns the current text (textContent) of the selected element
setTextContent | Updates the text element with the given string
setImageURL | Sets the new image URL for the selected image element.
setRectRadius | Sets the rx & ry values to the selected rect element to change its corner radius
Element manipulation |
setSegType | Sets the new segment type to the selected segment(s).
convertToPath | Convert selected element to a path, or get the BBox of an element-as-path
changeSelectedAttributeNoUndo | This function makes the changes to the elements.
changeSelectedAttribute | Change the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.
deleteSelectedElements | Removes all selected elements from the DOM and adds the change to the history stack
groupSelectedElements | Wraps all the selected elements in a group (g) element
ungroupSelectedElement | Unwraps all the elements in a selected group (g) element.
moveToTopSelectedElement | Repositions the selected element to the bottom in the DOM to appear on top of other elements
moveToBottomSelectedElement | Repositions the selected element to the top in the DOM to appear under other elements
moveSelectedElements | Moves selected elements on the X/Y axis
cloneSelectedElements | Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
alignSelectedElements | Aligns selected elements
Additional editor tools |
updateCanvas | Updates the editor canvas width/height/position after a zoom has occurred
setBackground | Set the background of the editor (NOT the actual document)
cycleElement | Select the next/previous element within the current layer

### SelectorManager.initGroup

Resets the parent selector group element

### SelectorManager.requestSelector

Returns the selector based on the given element

#### Parameters

elem | DOM element to get the selector for

### SelectorManager.releaseSelector

Removes the selector of the given element (hides selection box)

#### Parameters

elem | DOM element to remove the selector for

### SelectorManager.getRubberBandBox

Returns the rubberBandBox DOM element. This is the rectangle drawn by the user for selecting/zooming

### Helper functions

### walkTree

> function walkTree( | elem,
> | cbFn | )

Walks the tree and executes the callback on each element in a top-down fashion

#### Parameters

elem | DOM element to traverse
cbFn | Callback function to run on each element

### walkTreePost

> function walkTreePost( | elem,
> | cbFn | )

Walks the tree and executes the callback on each element in a depth-first fashion

#### Parameters

elem | DOM element to traverse
cbFn | Callback function to run on each element

### assignAttributes

> var assignAttributes = this.assignAttributes = function( | node,
> | attrs,
> | suspendLength,
> | unitCheck | )

Assigns multiple attributes to an element.

#### Parameters

node | DOM element to apply new attribute values to
attrs | Object with attribute keys/values
suspendLength | Optional integer of milliseconds to suspend redraw
unitCheck | Boolean to indicate the need to use setUnitAttr

### cleanupElement

> var cleanupElement = this.cleanupElement = function( | element | )

Remove unneeded (default) attributes, makes resulting SVG smaller

#### Parameters

element | DOM element to clean up

### addSvgElementFromJson

> var addSvgElementFromJson = this.addSvgElementFromJson = function( | data | )

Create a new SVG element based on the given object keys/values and add it to the current layer The element will be ran through cleanupElement before being returned

#### Parameters

data | Object with the following keys/values:

- element - DOM element to create
- attr - Object with attributes/values to assign to the new element
- curStyles - Boolean indicating that current style attributes should be applied first

Returns: The new element

### addExtension

> this.addExtension = function( | name,
> | ext_func | )

Add an extension to the editor

#### Parameters

name | String with the ID of the extension
ext_func | Function supplied by the extension with its data

### shortFloat

> var shortFloat = function( | val | )

Rounds a given value to a float with number of digits defined in save_options

#### Parameters

val | The value as a String, Number or Array of two numbers to be rounded

#### Returns

If a string/number was given, returns a Float. If an array, return a string with comma-seperated floats

### getStrokedBBox

> var getStrokedBBox = this.getStrokedBBox = function( | elems | )

Get the bounding box for one or more stroked and/or transformed elements

#### Parameters

elems | Array with DOM elements to check

#### Returns

A single bounding box object

### getVisibleElements

> var getVisibleElements = this.getVisibleElements = function( | parent,
> | includeBBox | )

Get all elements that have a BBox (excludes <defs>, <title>, etc). Note that 0-opacity, off-screen etc elements are still considered “visible” for this function

#### Parameters

parent | The parent DOM element to search within
includeBBox | Boolean to indicate that an object should return with the element and its bbox

#### Returns

An array with all “visible” elements, or if includeBBox is true, an array with objects that include:

- elem - The element
- bbox - The element’s BBox as retrieved from getStrokedBBox

### copyElem

> var copyElem = function( | el | )

Create a clone of an element, updating its ID and its children’s IDs when needed

#### Parameters

el | DOM element to clone

Returns: The cloned element

### getElem

> function getElem( | id | )

Get a DOM element by ID within the SVG root element.

#### Parameters

id | String with the element’s new ID

### getId

> getId = c.getId = function()

Returns the last created DOM element ID string

### getNextId

> getNextId = c.getNextId = function()

Creates and returns a unique ID string for a DOM element

### bind

> c.bind = function( | event,
> | f | )

Attaches a callback function to an event

#### Parameters

event | String indicating the name of the event
f | The callback function to bind to the event

#### Return

The previous event

### setIdPrefix

> c.setIdPrefix = function( | p | )

Changes the ID prefix to the given value

#### Parameters

p | String with the new prefix

### sanitizeSvg

> var sanitizeSvg = this.sanitizeSvg = function( | node | )

Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above

#### Parameters

node | The DOM element to be checked, will also check its children

### getUrlFromAttr

> var getUrlFromAttr = this.getUrlFromAttr = function( | attrVal | )

Extracts the URL from the url(...) syntax of some attributes. Three variants:

- <circle fill=”url(someFile.svg#foo)” />
- <circle fill=”url(‘someFile.svg#foo’)” />
- <circle fill=’url(“someFile.svg#foo”)’ />

#### Parameters

attrVal | The attribute value as a string

#### Returns

String with just the URL, like someFile.svg#foo

### getBBox

> var getBBox = this.getBBox = function( | elem | )

Get the given/selected element’s bounding box object, convert it to be more usable when necessary

#### Parameters

elem | Optional DOM element to get the BBox for

### ffClone

> var ffClone = function( | elem | )

Hack for Firefox bugs where text element features aren’t updated. This function clones the element and re-selects it TODO: Test for this bug on load and add it to “support” object instead of browser sniffing

#### Parameters

elem | The (text) DOM element to clone

### getPathBBox

> var getPathBBox = function( | path | )

Get correct BBox for a path in Webkit Converted from code found here: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html

#### Parameters

path | The path DOM element to get the BBox for

#### Returns

A BBox-like object

### Element Transforms

### getRotationAngle

> var getRotationAngle = this.getRotationAngle = function( | elem,
> | to_rad | )

Get the rotation angle of the given/selected DOM element

#### Parameters

elem | Optional DOM element to get the angle for
to_rad | Boolean that when true returns the value in radians rather than degrees

#### Returns

Float with the angle in degrees or radians

### setRotationAngle

> this.setRotationAngle = function( | val,
> | preventUndo | )

Removes any old rotations if present, prepends a new rotation at the transformed center

#### Parameters

val | The new rotation angle in degrees
preventUndo | Boolean indicating whether the action should be undoable or not

### getTransformList

> var getTransformList = this.getTransformList = function( | elem | )

Returns an object that behaves like a SVGTransformList for the given DOM element

#### Parameters

elem | DOM element to get a transformlist from

### recalculateAllSelectedDimensions

> var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()

Runs recalculateDimensions on the selected elements, adding the changes to a single batch command

### remapElement

> var remapElement = this.remapElement = function( | selected,
> | changes,
> | m | )

Applies coordinate changes to an element based on the given matrix

#### Parameters

selected | DOM element to be changed
changes | Object with changes to be remapped
m | Matrix object to use for remapping coordinates

### recalculateDimensions

> var recalculateDimensions = this.recalculateDimensions = function( | selected | )

Decides the course of action based on the element’s transform list

#### Parameters

selected | The DOM element to recalculate

#### Returns

Undo command object with the resulting change

### transformPoint

> var transformPoint = function( | x,
> | y,
> | m | )

A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)

#### Parameters

x | Float representing the x coordinate
y | Float representing the y coordinate
m | Matrix object to transform the point with Returns a x,y object representing the transformed point

### isIdentity

> var isIdentity = function( | m | )

Helper function to check if the matrix performs no actual transform (i.e. exists for identity purposes)

#### Parameters

m | The matrix object to check

#### Returns

Boolean indicating whether or not the matrix is 1,0,0,1,0,0

### matrixMultiply

> var matrixMultiply = this.matrixMultiply = function()

This function tries to return a SVGMatrix that is the multiplication m1*m2. We also round to zero when it’s near zero

#### Parameters

>     = 2 Matrix objects to multiply

#### Returns

The matrix object resulting from the calculation

### transformListToTransform

> var transformListToTransform = this.transformListToTransform = function( | tlist,
> | min,
> | max | )

This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments

#### Parameters

tlist | The transformlist object
min | Optional integer indicating start transform position
max | Optional integer indicating end transform position

#### Returns

A single matrix transform object

### hasMatrixTransform

> var hasMatrixTransform = this.hasMatrixTransform = function( | tlist | )

See if the given transformlist includes a non-indentity matrix transform

#### Parameters

tlist | The transformlist to check

#### Returns

Boolean on whether or not a matrix transform was found

### getMatrix

> var getMatrix = function( | elem | )

Get the matrix object for a given element

#### Parameters

elem | The DOM element to check

#### Returns

The matrix object associated with the element’s transformlist

### transformBox

> var transformBox = this.transformBox = function( | l,
> | t,
> | w,
> | h,
> | m | )

Transforms a rectangle based on the given matrix

#### Parameters

l | Float with the box’s left coordinate
t | Float with the box’s top coordinate
w | Float with the box width
h | Float with the box height
m | Matrix object to transform the box by

#### Returns

An object with the following values:

- tl - The top left coordinate (x,y object)
- tr - The top right coordinate (x,y object)
- bl - The bottom left coordinate (x,y object)
- br - The bottom right coordinate (x,y object)
- aabox - Object with the following values:
- Float with the axis-aligned x coordinate
- Float with the axis-aligned y coordinate
- Float with the axis-aligned width coordinate
- Float with the axis-aligned height coordinate

### Selection

### clearSelection

> var clearSelection = this.clearSelection = function( | noCall | )

Clears the selection. The ‘selected’ handler is then called. Parameters: noCall - Optional boolean that when true does not call the “selected” handler

### addToSelection

> var addToSelection = this.addToSelection = function( | elemsToAdd,
> | showGrips | )

Adds a list of elements to the selection. The ‘selected’ handler is then called.

#### Parameters

elemsToAdd | an array of DOM elements to add to the selection
showGrips | a boolean flag indicating whether the resize grips should be shown

### removeFromSelection

> var removeFromSelection = this.removeFromSelection = function( | elemsToRemove | )

Removes elements from the selection.

#### Parameters

elemsToRemove | an array of elements to remove from selection

### selectAllInCurrentLayer

> this.selectAllInCurrentLayer = function()

Clears the selection, then adds all elements in the current layer to the selection. This function then fires the selected event.

### smoothControlPoints

> var smoothControlPoints = this.smoothControlPoints = function( | ct1,
> | ct2,
> | pt | )

Takes three points and creates a smoother line based on them

#### Parameters

ct1 | Object with x and y values (first control point)
ct2 | Object with x and y values (second control point)
pt | Object with x and y values (third point)

#### Returns

Array of two “smoothed” point objects

### getMouseTarget

> var getMouseTarget = this.getMouseTarget = function( | evt | )

Gets the desired element from a mouse event

#### Parameters

evt | Event object from the mouse event

#### Returns

DOM element we want

### preventClickDefault

> var preventClickDefault = function( | img | )

Prevents default browser click behaviour on the given element

#### Parameters

img | The DOM element to prevent the cilck on

### Text edit functions

Functions relating to editing text elements

### Path edit functions

Functions relating to editing path elements

### Serialization

### removeUnusedDefElems

> var removeUnusedDefElems = this.removeUnusedDefElems = function()

Looks at DOM elements inside the <defs> to see if they are referred to, removes them from the DOM if they are not.

#### Returns

The amount of elements that were removed

### svgCanvasToString

> var svgCanvasToString = this.svgCanvasToString = function()

Main function to set up the SVG content for output

#### Returns

String containing the SVG image for output

### svgToString

> var svgToString = this.svgToString = function( | elem,
> | indent | )

Sub function ran on each SVG element to convert it to a string as desired

#### Parameters

elem | The SVG element to convert
indent | Integer with the amount of spaces to indent this tag

#### Returns

String with the given element as an SVG tag

### embedImage

> this.embedImage = function( | val,
> | callback | )

Converts a given image file to a data URL when possible, then runs a given callback

#### Parameters

val | String with the path/URL of the image
callback | Optional function to run when image data is found, supplies the result (data URL or false) as first parameter.

### save

> this.save = function( | opts | )

Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler. This function also includes the XML prolog. Clients of the SvgCanvas bind their save function to the ‘saved’ event.

#### Returns

Nothing

### rasterExport

> this.rasterExport = function()

Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found

### getSvgString

> this.getSvgString = function()

Returns the current drawing as raw SVG XML text.

#### Returns

The current drawing as raw SVG XML text.

### setSvgString

> this.setSvgString = function( | xmlString | )

This function sets the current drawing as the input SVG XML.

#### Parameters

xmlString | The SVG as XML text.

#### Returns

This function returns false if the set was unsuccessful, true otherwise.

### importSvgString

> this.importSvgString = function( | xmlString | )

This function imports the input SVG XML into the current layer in the drawing

#### Parameters

xmlString | The SVG as XML text.

#### Returns

This function returns false if the import was unsuccessful, true otherwise. TODO:

- properly handle if namespace is introduced by imported content (must add to svgcontent and update all prefixes in the imported node)
- properly handle recalculating dimensions, recalculateDimensions() doesn’t handle arbitrary transform lists, but makes some assumptions about how the transform list was obtained
- import should happen in top-left of current zoomed viewport
- create a new layer for the imported SVG

### Layers

### identifyLayers

> var identifyLayers = function()

Updates layer system

### createLayer

> this.createLayer = function( | name | )

Creates a new top-level layer in the drawing with the given name, sets the current layer to it, and then clears the selection This function then calls the ‘changed’ handler. This is an undoable action.

#### Parameters

name | The given name

### deleteCurrentLayer

> this.deleteCurrentLayer = function()

Deletes the current layer from the drawing and then clears the selection. This function then calls the ‘changed’ handler. This is an undoable action.

### getNumLayers

> this.getNumLayers = function()

Returns the number of layers in the current drawing.

#### Returns

The number of layers in the current drawing.

### getLayer

> this.getLayer = function( | i | )

Returns the name of the ith layer. If the index is out of range, an empty string is returned.

#### Parameters

i | the zero-based index of the layer you are querying.

#### Returns

The name of the ith layer

### getCurrentLayer

> this.getCurrentLayer = function()

Returns the name of the currently selected layer. If an error occurs, an empty string is returned.

#### Returns

The name of the currently active layer.

### setCurrentLayer

> this.setCurrentLayer = function( | name | )

Sets the current layer. If the name is not a valid layer name, then this function returns false. Otherwise it returns true. This is not an undo-able action.

#### Parameters

name | the name of the layer you want to switch to.

#### Returns

true if the current layer was switched, otherwise false

### renameCurrentLayer

> this.renameCurrentLayer = function( | newname | )

Renames the current layer. If the layer name is not valid (i.e. unique), then this function does nothing and returns false, otherwise it returns true. This is an undo-able action.

#### Parameters

newname | the new name you want to give the current layer. This name must be unique among all layer names.

#### Returns

true if the rename succeeded, false otherwise.

### setCurrentLayerPosition

> this.setCurrentLayerPosition = function( | newpos | )

Changes the position of the current layer to the new value. If the new index is not valid, this function does nothing and returns false, otherwise it returns true. This is an undo-able action.

#### Parameters

newpos | The zero-based index of the new position of the layer. This should be between
0 and (number of layers | 1)

#### Returns

true if the current layer position was changed, false otherwise.

### getLayerVisibility

> this.getLayerVisibility = function( | layername | )

Returns whether the layer is visible. If the layer name is not valid, then this function returns false.

#### Parameters

layername | the name of the layer which you want to query.

#### Returns

The visibility state of the layer, or false if the layer name was invalid.

### setLayerVisibility

> this.setLayerVisibility = function( | layername,
> | bVisible | )

Sets the visibility of the layer. If the layer name is not valid, this function return false, otherwise it returns true. This is an undo-able action.

#### Parameters

layername | the name of the layer to change the visibility
bVisible | true/false, whether the layer should be visible

#### Returns

true if the layer’s visibility was set, false otherwise

### moveSelectedToLayer

> this.moveSelectedToLayer = function( | layername | )

Moves the selected elements to layername. If the name is not a valid layer name, then false is returned. Otherwise it returns true. This is an undo-able action.

#### Parameters

layername | the name of the layer you want to which you want to move the selected elements

#### Returns

true if the selected elements were moved to the layer, false otherwise.

### getLayerOpacity

> this.getLayerOpacity = function( | layername | )

Returns the opacity of the given layer. If the input name is not a layer, null is returned.

#### Parameters

layername | name of the layer on which to get the opacity

#### Returns

The opacity value of the given layer. This will be a value between 0.0 and 1.0, or null if layername is not a valid layer

### setLayerOpacity

> this.setLayerOpacity = function( | layername,
> | opacity | )

Sets the opacity of the given layer. If the input name is not a layer, nothing happens. This is not an undo-able action. NOTE: this function exists solely to apply a highlighting/de-emphasis effect to a layer, when it is possible for a user to affect the opacity of a layer, we will need to allow this function to produce an undo-able action. If opacity is not a value between 0.0 and 1.0, then nothing happens.

#### Parameters

layername | name of the layer on which to set the opacity
opacity | a float value in the range 0.0-1.0

### Document functions

### clear

> this.clear = function()

Clears the current document. This is not an undoable action.

### linkControlPoints

Alias function

### getContentElem

> this.getContentElem = function()

Returns the content DOM element

### getRootElem

> this.getRootElem = function()

Returns the root DOM element

### getSelectedElems

> this.getSelectedElems = function()

Returns the array with selected DOM elements

### getResolution

> var getResolution = this.getResolution = function()

Returns the current dimensions and zoom level in an object

### getZoom

> this.getZoom = function()

Returns the current zoom level

### getVersion

> this.getVersion = function()

Returns a string which describes the revision number of SvgCanvas.

### setUiStrings

> this.setUiStrings = function( | strs | )

Update interface strings with given values

#### Parameters

strs | Object with strings (see uiStrings for examples)

### setConfig

> this.setConfig = function( | opts | )

Update configuration options with given values

#### Parameters

opts | Object with options (see curConfig for examples)

### getDocumentTitle

> this.getDocumentTitle = function()

Returns the current document title or an empty string if not found

### setDocumentTitle

> this.setDocumentTitle = function( | newtitle | )

Adds/updates a title element for the document with the given name. This is an undoable action

#### Parameters

newtitle | String with the new title

### getEditorNS

> this.getEditorNS = function( | add | )

Returns the editor’s namespace URL, optionally adds it to root element

#### Parameters

add | Boolean to indicate whether or not to add the namespace value

### setResolution

> this.setResolution = function( | x,
> | y | )

Changes the document’s dimensions to the given size

#### Parameters

x | Number with the width of the new dimensions in user units. Can also be the string “fit” to indicate “fit to content”
y | Number with the height of the new dimensions in user units.

#### Returns

Boolean to indicate if resolution change was succesful. It will fail on “fit to content” option with no content to fit to.

### getOffset

> this.getOffset = function()

Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.

### setBBoxZoom

> this.setBBoxZoom = function( | val,
> | editor_w,
> | editor_h | )

Sets the zoom level on the canvas-side based on the given value

#### Parameters

val | Bounding box object to zoom to or string indicating zoom option
editor_w | Integer with the editor’s workarea box’s width
editor_h | Integer with the editor’s workarea box’s height

### setZoom

> this.setZoom = function( | zoomlevel | )

Sets the zoom to the given level

#### Parameters

zoomlevel | Float indicating the zoom level to change to

### getMode

> this.getMode = function()

Returns the current editor mode string

### setMode

> this.setMode = function( | name | )

Sets the editor’s mode to the given string

#### Parameters

name | String with the new mode to change to

### Element Styling

### getColor

> this.getColor = function( | type | )

Returns the current fill/stroke option

### setColor

> this.setColor = function( | type,
> | val,
> | preventUndo | )

Change the current stroke/fill color/gradient value

#### Parameters

type | String indicating fill or stroke
val | The value to set the stroke attribute to
preventUndo | Boolean indicating whether or not this should be and undoable option

### findDefs

> var findDefs = function()

Return the document’s <defs> element, create it first if necessary

### setGradient

> var setGradient = this.setGradient = function( | type | )

Apply the current gradient to selected element’s fill or stroke

Parameters type - String indicating “fill” or “stroke” to apply to an element

### findDuplicateGradient

> var findDuplicateGradient = function( | grad | )

Check if exact gradient already exists

#### Parameters

grad | The gradient DOM element to compare to others

#### Returns

The existing gradient if found, null if not

### setPaint

> this.setPaint = function( | type,
> | paint | )

Set a color/gradient to a fill/stroke

#### Parameters

type | String with “fill” or “stroke”
paint | The jGraduate paint object to apply

### getStrokeWidth

> this.getStrokeWidth = function()

Returns the current stroke-width value

### setStrokeWidth

> this.setStrokeWidth = function( | val | )

Sets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead

#### Parameters

val | A Float indicating the new stroke width value

### setStrokeAttr

> this.setStrokeAttr = function( | attr,
> | val | )

Set the given stroke-related attribute the given value for selected elements

#### Parameters

attr | String with the attribute name
val | String or number with the attribute value

### getOpacity

> this.getOpacity = function()

Returns the current opacity

### setOpacity

> this.setOpacity = function( | val | )

Sets the given opacity to the current selected elements

### getOpacity

Returns the current fill opacity

### getStrokeOpacity

> this.getStrokeOpacity = function()

Returns the current stroke opacity

### setPaintOpacity

> this.setPaintOpacity = function( | type,
> | val,
> | preventUndo | )

Sets the current fill/stroke opacity

#### Parameters

type | String with “fill” or “stroke”
val | Float with the new opacity value
preventUndo | Boolean indicating whether or not this should be an undoable action

### getBlur

> this.getBlur = function( | elem | )

Gets the stdDeviation blur value of the given element

#### Parameters

elem | The element to check the blur value for

### setBlurNoUndo

> canvas.setBlurNoUndo = function( | val | )

Sets the stdDeviation blur value on the selected element without being undoable

#### Parameters

val | The new stdDeviation value

### setBlurOffsets

> canvas.setBlurOffsets = function( | filter,
> | stdDev | )

Sets the x, y, with, height values of the filter element in order to make the blur not be clipped. Removes them if not neeeded

#### Parameters

filter | The filter DOM element to update
stdDev | The standard deviation value on which to base the offset size

### setBlur

> canvas.setBlur = function( | val,
> | complete | )

Adds/updates the blur filter to the selected element

#### Parameters

val | Float with the new stdDeviation blur value
complete | Boolean indicating whether or not the action should be completed (to add to the undo manager)

### getBold

> this.getBold = function()

Check whether selected element is bold or not

#### Returns

Boolean indicating whether or not element is bold

### setBold

> this.setBold = function( | b | )

Make the selected element bold or normal

#### Parameters

b | Boolean indicating bold (true) or normal (false)

### getItalic

> this.getItalic = function()

Check whether selected element is italic or not

#### Returns

Boolean indicating whether or not element is italic

### setItalic

> this.setItalic = function( | i | )

Make the selected element italic or normal

#### Parameters

b | Boolean indicating italic (true) or normal (false)

### getFontFamily

> this.getFontFamily = function()

Returns the current font family

### setFontFamily

> this.setFontFamily = function( | val | )

Set the new font family

#### Parameters

val | String with the new font family

### getFontSize

> this.getFontSize = function()

Returns the current font size

### setFontSize

> this.setFontSize = function( | val | )

Applies the given font size to the selected element

#### Parameters

val | Float with the new font size

### getText

> this.getText = function()

Returns the current text (textContent) of the selected element

### setTextContent

> this.setTextContent = function( | val | )

Updates the text element with the given string

#### Parameters

val | String with the new text

### setImageURL

> this.setImageURL = function( | val | )

Sets the new image URL for the selected image element. Updates its size if a new URL is given

#### Parameters

val | String with the image URL/path

### setRectRadius

> this.setRectRadius = function( | val | )

Sets the rx & ry values to the selected rect element to change its corner radius

#### Parameters

val | The new radius

### Element manipulation

### setSegType

> this.setSegType = function( | new_type | )

Sets the new segment type to the selected segment(s).

#### Parameters

new_type | Integer with the new segment type See http://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list

### convertToPath

> this.convertToPath = function( | elem,
> | getBBox | )

Convert selected element to a path, or get the BBox of an element-as-path

#### Parameters

elem | The DOM element to be converted
getBBox | Boolean on whether or not to only return the path’s BBox

#### Returns

If the getBBox flag is true, the resulting path’s bounding box object. Otherwise the resulting path element is returned.

### changeSelectedAttributeNoUndo

> var changeSelectedAttributeNoUndo = function( | attr,
> | newValue,
> | elems | )

This function makes the changes to the elements. It does not add the change to the history stack.

#### Parameters

attr | String with the attribute name
newValue | String or number with the new attribute value
elems | The DOM elements to apply the change to

### changeSelectedAttribute

> var changeSelectedAttribute = this.changeSelectedAttribute = function( | attr,
> | val,
> | elems | )

Change the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument. If you want to change only a subset of selectedElements, then send the subset to this function in the elems argument.

#### Parameters

attr | String with the attribute name
newValue | String or number with the new attribute value
elems | The DOM elements to apply the change to

### deleteSelectedElements

> this.deleteSelectedElements = function()

Removes all selected elements from the DOM and adds the change to the history stack

### groupSelectedElements

> this.groupSelectedElements = function()

Wraps all the selected elements in a group (g) element

### ungroupSelectedElement

> this.ungroupSelectedElement = function()

Unwraps all the elements in a selected group (g) element. This requires significant recalculations to apply group’s transforms, etc to its children

### moveToTopSelectedElement

> this.moveToTopSelectedElement = function()

Repositions the selected element to the bottom in the DOM to appear on top of other elements

### moveToBottomSelectedElement

> this.moveToBottomSelectedElement = function()

Repositions the selected element to the top in the DOM to appear under other elements

### moveSelectedElements

> this.moveSelectedElements = function( | dx,
> | dy,
> | undoable | )

Moves selected elements on the X/Y axis

#### Parameters

dx | Float with the distance to move on the x-axis
dy | Float with the distance to move on the y-axis
undoable | Boolean indicating whether or not the action should be undoable

#### Returns

Batch command for the move

### cloneSelectedElements

> this.cloneSelectedElements = function()

Create deep DOM copies (clones) of all selected elements and move them slightly from their originals

### alignSelectedElements

> this.alignSelectedElements = function( | type,
> | relative_to | )

Aligns selected elements

#### Parameters

type | String with single character indicating the alignment type
relative_to | String that must be one of the following: “selected”, “largest”, “smallest”, “page”

### Additional editor tools

### updateCanvas

> this.updateCanvas = function( | w,
> | h | )

Updates the editor canvas width/height/position after a zoom has occurred

#### Parameters

w | Float with the new width
h | Float with the new height

#### Returns

Object with the following values:

- x - The canvas’ new x coordinate
- y - The canvas’ new y coordinate
- old_x - The canvas’ old x coordinate
- old_y - The canvas’ old y coordinate
- d_x - The x position difference
- d_y - The y position difference

### setBackground

> this.setBackground = function( | color,
> | url | )

Set the background of the editor (NOT the actual document)

#### Parameters

color | String with fill color to apply
url | URL or path to image to use

### cycleElement

> this.cycleElement = function( | next | )

Select the next/previous element within the current layer

#### Parameters

next | Boolean where true = next and false = previous element

> "rectsIntersect": function( | r1,
> | r2 | )

Check if two rectangles (BBoxes objects) intersect each other

> "snapToAngle": function( | x1,
> | y1,
> | x2,
> | y2 | )

Returns a 45 degree angle coordinate associated with the two given coordinates

> "text2xml": function( | sXML | )

Cross-browser compatible method of converting a string to an XML tree found this function here: http://groups.google.com/group/jquery-dev/browse_thread/thread/c6d11387c580a77f

> convertToNum = function( | attr,
> | val | )

Converts given values to numbers.

> setUnitAttr = function( | elem,
> | attr,
> | val | )

Sets an element’s attribute based on the unit in its current value.

> canvas.isValidUnit = function( | attr,
> | val | )

Check if an attribute’s value is in a valid format

> var ChangeElementCommand = this.undoCmd.changeElement = function( | elem,
> | attrs,
> | text | )

History command to make a change to an element.

> var InsertElementCommand = this.undoCmd.insertElement = function( | elem,
> | text | )

History command for an element that was added to the DOM

> var RemoveElementCommand = this.undoCmd.removeElement = function( | elem,
> | parent,
> | text | )

History command for an element removed from the DOM

> var MoveElementCommand = this.undoCmd.moveElement = function( | elem,
> | oldNextSibling,
> | oldParent,
> | text | )

History command for an element that had its DOM position changed

> var BatchCommand = this.undoCmd.batch = function( | text | )

History command that can contain/execute multiple other commands

> resetUndoStack = function()

Resets the undo stack, effectively clearing the undo/redo history

> addCommandToHistory = c.undoCmd.add = function( | cmd | )

Adds a command object to the undo history stack

> c.beginUndoableChange = function( | attrName,
> | elems | )

This function tells the canvas to remember the old values of the attrName attribute for each element sent in.

> c.finishUndoableChange = function()

This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.

> function walkTree( | elem,
> | cbFn | )

Walks the tree and executes the callback on each element in a top-down fashion

> function walkTreePost( | elem,
> | cbFn | )

Walks the tree and executes the callback on each element in a depth-first fashion

> var assignAttributes = this.assignAttributes = function( | node,
> | attrs,
> | suspendLength,
> | unitCheck | )

Assigns multiple attributes to an element.

> var cleanupElement = this.cleanupElement = function( | element | )

Remove unneeded (default) attributes, makes resulting SVG smaller

> var addSvgElementFromJson = this.addSvgElementFromJson = function( | data | )

Create a new SVG element based on the given object keys/values and add it to the current layer The element will be ran through cleanupElement before being returned

> this.addExtension = function( | name,
> | ext_func | )

Add an extension to the editor

> var shortFloat = function( | val | )

Rounds a given value to a float with number of digits defined in save_options

> var getStrokedBBox = this.getStrokedBBox = function( | elems | )

Get the bounding box for one or more stroked and/or transformed elements

> var getVisibleElements = this.getVisibleElements = function( | parent,
> | includeBBox | )

Get all elements that have a BBox (excludes defs, title, etc).

> var copyElem = function( | el | )

Create a clone of an element, updating its ID and its children’s IDs when needed

> function getElem( | id | )

Get a DOM element by ID within the SVG root element.

> getId = c.getId = function()

Returns the last created DOM element ID string

> getNextId = c.getNextId = function()

Creates and returns a unique ID string for a DOM element

> c.bind = function( | event,
> | f | )

Attaches a callback function to an event

> c.setIdPrefix = function( | p | )

Changes the ID prefix to the given value

> var sanitizeSvg = this.sanitizeSvg = function( | node | )

Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above

> var getUrlFromAttr = this.getUrlFromAttr = function( | attrVal | )

Extracts the URL from the url(...)

> var getBBox = this.getBBox = function( | elem | )

Get the given/selected element’s bounding box object, convert it to be more usable when necessary

> var ffClone = function( | elem | )

Hack for Firefox bugs where text element features aren’t updated.

> var getPathBBox = function( | path | )

Get correct BBox for a path in Webkit Converted from code found here: http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html

> var getRotationAngle = this.getRotationAngle = function( | elem,
> | to_rad | )

Get the rotation angle of the given/selected DOM element

> this.setRotationAngle = function( | val,
> | preventUndo | )

Removes any old rotations if present, prepends a new rotation at the transformed center

> var getTransformList = this.getTransformList = function( | elem | )

Returns an object that behaves like a SVGTransformList for the given DOM element

> var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()

Runs recalculateDimensions on the selected elements, adding the changes to a single batch command

> var remapElement = this.remapElement = function( | selected,
> | changes,
> | m | )

Applies coordinate changes to an element based on the given matrix

> var recalculateDimensions = this.recalculateDimensions = function( | selected | )

Decides the course of action based on the element’s transform list

> var transformPoint = function( | x,
> | y,
> | m | )

A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)

> var isIdentity = function( | m | )

Helper function to check if the matrix performs no actual transform (i.e.

> var matrixMultiply = this.matrixMultiply = function()

This function tries to return a SVGMatrix that is the multiplication m1*m2.

> var transformListToTransform = this.transformListToTransform = function( | tlist,
> | min,
> | max | )

This returns a single matrix Transform for a given Transform List (this is the equivalent of SVGTransformList.consolidate() but unlike that method, this one does not modify the actual SVGTransformList) This function is very liberal with its min,max arguments

> var hasMatrixTransform = this.hasMatrixTransform = function( | tlist | )

See if the given transformlist includes a non-indentity matrix transform

> var getMatrix = function( | elem | )

Get the matrix object for a given element

> var transformBox = this.transformBox = function( | l,
> | t,
> | w,
> | h,
> | m | )

Transforms a rectangle based on the given matrix

> var clearSelection = this.clearSelection = function( | noCall | )

Clears the selection.

> var addToSelection = this.addToSelection = function( | elemsToAdd,
> | showGrips | )

Adds a list of elements to the selection.

> var removeFromSelection = this.removeFromSelection = function( | elemsToRemove | )

Removes elements from the selection.

> this.selectAllInCurrentLayer = function()

Clears the selection, then adds all elements in the current layer to the selection.

> var smoothControlPoints = this.smoothControlPoints = function( | ct1,
> | ct2,
> | pt | )

Takes three points and creates a smoother line based on them

> var getMouseTarget = this.getMouseTarget = function( | evt | )

Gets the desired element from a mouse event

> var preventClickDefault = function( | img | )

Prevents default browser click behaviour on the given element

> var removeUnusedDefElems = this.removeUnusedDefElems = function()

Looks at DOM elements inside the defs to see if they are referred to, removes them from the DOM if they are not.

> var svgCanvasToString = this.svgCanvasToString = function()

Main function to set up the SVG content for output

> var svgToString = this.svgToString = function( | elem,
> | indent | )

Sub function ran on each SVG element to convert it to a string as desired

> this.embedImage = function( | val,
> | callback | )

Converts a given image file to a data URL when possible, then runs a given callback

> this.save = function( | opts | )

Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.

> this.rasterExport = function()

Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found

> this.getSvgString = function()

Returns the current drawing as raw SVG XML text.

> this.setSvgString = function( | xmlString | )

This function sets the current drawing as the input SVG XML.

> this.importSvgString = function( | xmlString | )

This function imports the input SVG XML into the current layer in the drawing

> var identifyLayers = function()

Updates layer system

> this.createLayer = function( | name | )

Creates a new top-level layer in the drawing with the given name, sets the current layer to it, and then clears the selection This function then calls the ‘changed’ handler.

> this.deleteCurrentLayer = function()

Deletes the current layer from the drawing and then clears the selection.

> this.getNumLayers = function()

Returns the number of layers in the current drawing.

> this.getLayer = function( | i | )

Returns the name of the ith layer.

> this.getCurrentLayer = function()

Returns the name of the currently selected layer.

> this.setCurrentLayer = function( | name | )

Sets the current layer.

> this.renameCurrentLayer = function( | newname | )

Renames the current layer.

> this.setCurrentLayerPosition = function( | newpos | )

Changes the position of the current layer to the new value.

> this.getLayerVisibility = function( | layername | )

Returns whether the layer is visible.

> this.setLayerVisibility = function( | layername,
> | bVisible | )

Sets the visibility of the layer.

> this.moveSelectedToLayer = function( | layername | )

Moves the selected elements to layername.

> this.getLayerOpacity = function( | layername | )

Returns the opacity of the given layer.

> this.setLayerOpacity = function( | layername,
> | opacity | )

Sets the opacity of the given layer.

> this.clear = function()

Clears the current document.

> this.getContentElem = function()

Returns the content DOM element

> this.getRootElem = function()

Returns the root DOM element

> this.getSelectedElems = function()

Returns the array with selected DOM elements

> var getResolution = this.getResolution = function()

Returns the current dimensions and zoom level in an object

> this.getZoom = function()

Returns the current zoom level

> this.getVersion = function()

Returns a string which describes the revision number of SvgCanvas.

> this.setUiStrings = function( | strs | )

Update interface strings with given values

> this.setConfig = function( | opts | )

Update configuration options with given values

> this.getDocumentTitle = function()

Returns the current document title or an empty string if not found

> this.setDocumentTitle = function( | newtitle | )

Adds/updates a title element for the document with the given name.

> this.getEditorNS = function( | add | )

Returns the editor’s namespace URL, optionally adds it to root element

> this.setResolution = function( | x,
> | y | )

Changes the document’s dimensions to the given size

> this.getOffset = function()

Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.

> this.setBBoxZoom = function( | val,
> | editor_w,
> | editor_h | )

Sets the zoom level on the canvas-side based on the given value

> this.setZoom = function( | zoomlevel | )

Sets the zoom to the given level

> this.getMode = function()

Returns the current editor mode string

> this.setMode = function( | name | )

Sets the editor’s mode to the given string

> this.getColor = function( | type | )

Returns the current fill/stroke option

> this.setColor = function( | type,
> | val,
> | preventUndo | )

Change the current stroke/fill color/gradient value

> var findDefs = function()

Return the document’s defs element, create it first if necessary

> var setGradient = this.setGradient = function( | type | )

Apply the current gradient to selected element’s fill or stroke

> var findDuplicateGradient = function( | grad | )

Check if exact gradient already exists

> this.setPaint = function( | type,
> | paint | )

Set a color/gradient to a fill/stroke

> this.getStrokeWidth = function()

Returns the current stroke-width value

> this.setStrokeWidth = function( | val | )

Sets the stroke width for the current selected elements When attempting to set a line’s width to 0, this changes it to 1 instead

> this.setStrokeAttr = function( | attr,
> | val | )

Set the given stroke-related attribute the given value for selected elements

> this.getOpacity = function()

Returns the current opacity

> this.setOpacity = function( | val | )

Sets the given opacity to the current selected elements

> this.getStrokeOpacity = function()

Returns the current stroke opacity

> this.setPaintOpacity = function( | type,
> | val,
> | preventUndo | )

Sets the current fill/stroke opacity

> this.getBlur = function( | elem | )

Gets the stdDeviation blur value of the given element

> canvas.setBlurNoUndo = function( | val | )

Sets the stdDeviation blur value on the selected element without being undoable

> canvas.setBlurOffsets = function( | filter,
> | stdDev | )

Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.

> canvas.setBlur = function( | val,
> | complete | )

Adds/updates the blur filter to the selected element

> this.getBold = function()

Check whether selected element is bold or not

> this.setBold = function( | b | )

Make the selected element bold or normal

> this.getItalic = function()

Check whether selected element is italic or not

> this.setItalic = function( | i | )

Make the selected element italic or normal

> this.getFontFamily = function()

Returns the current font family

> this.setFontFamily = function( | val | )

Set the new font family

> this.getFontSize = function()

Returns the current font size

> this.setFontSize = function( | val | )

Applies the given font size to the selected element

> this.getText = function()

Returns the current text (textContent) of the selected element

> this.setTextContent = function( | val | )

Updates the text element with the given string

> this.setImageURL = function( | val | )

Sets the new image URL for the selected image element.

> this.setRectRadius = function( | val | )

Sets the rx & ry values to the selected rect element to change its corner radius

> this.setSegType = function( | new_type | )

Sets the new segment type to the selected segment(s).

> this.convertToPath = function( | elem,
> | getBBox | )

Convert selected element to a path, or get the BBox of an element-as-path

> var changeSelectedAttributeNoUndo = function( | attr,
> | newValue,
> | elems | )

This function makes the changes to the elements.

> var changeSelectedAttribute = this.changeSelectedAttribute = function( | attr,
> | val,
> | elems | )

Change the given/selected element and add the original value to the history stack If you want to change all selectedElements, ignore the elems argument.

> this.deleteSelectedElements = function()

Removes all selected elements from the DOM and adds the change to the history stack

> this.groupSelectedElements = function()

Wraps all the selected elements in a group (g) element

> this.ungroupSelectedElement = function()

Unwraps all the elements in a selected group (g) element.

> this.moveToTopSelectedElement = function()

Repositions the selected element to the bottom in the DOM to appear on top of other elements

> this.moveToBottomSelectedElement = function()

Repositions the selected element to the top in the DOM to appear under other elements

> this.moveSelectedElements = function( | dx,
> | dy,
> | undoable | )

Moves selected elements on the X/Y axis

> this.cloneSelectedElements = function()

Create deep DOM copies (clones) of all selected elements and move them slightly from their originals

> this.alignSelectedElements = function( | type,
> | relative_to | )

Aligns selected elements

> this.updateCanvas = function( | w,
> | h | )

Updates the editor canvas width/height/position after a zoom has occurred

> this.setBackground = function( | color,
> | url | )

Set the background of the editor (NOT the actual document)

> this.cycleElement = function( | next | )

Select the next/previous element within the current layer
Close