The main SvgCanvas class that manages all SVG-related functions
| container | The container HTML element that should hold the SVG root element |
| config | An object that contains configuration data |
| SvgCanvas | The main SvgCanvas class that manages all SVG-related functions |
| toXml | Converts characters in a string to XML-friendly entities. |
| fromXml | Converts XML entities in a string to single characters. |
| 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/ | |
| ChangeElementCommand | History command to make a change to an element. |
| ChangeElementCommand. | Performs the stored change action |
| ChangeElementCommand. | Reverses the stored change action |
| ChangeElementCommand. | Returns array with element associated with this command |
| InsertElementCommand | History command for an element that was added to the DOM |
| InsertElementCommand. | Re-Inserts the new element |
| InsertElementCommand. | Removes the element |
| InsertElementCommand. | Returns array with element associated with this command |
| RemoveElementCommand | History command for an element removed from the DOM |
| RemoveElementCommand. | Re-removes the new element |
| RemoveElementCommand. | Re-adds the new element |
| RemoveElementCommand. | Returns array with element associated with this command |
| MoveElementCommand | History command for an element that had its DOM position changed |
| MoveElementCommand. | Re-positions the element |
| MoveElementCommand. | Positions the element back to its original location |
| MoveElementCommand. | Returns array with element associated with this command |
| BatchCommand | History command that can contain/execute multiple other commands |
| BatchCommand. | Runs “apply” on all subcommands |
| BatchCommand. | Runs “unapply” on all subcommands |
| BatchCommand. | Iterate through all our subcommands and returns all the elements we are changing |
| BatchCommand. | Adds a given command to the history stack |
| BatchCommand. | Returns a boolean indicating whether or not the batch command is empty |
| resetUndoStack | Resets the undo stack, effectively clearing the undo/redo history |
| undoMgr. | Integer with the current size of the undo history stack |
| undoMgr. | Integer with the current size of the redo history stack |
| undoMgr. | String associated with the next undo command |
| undoMgr. | 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. | Used to reset the id and element that the selector is attached to |
| Selector. | Show the resize grips of this selector |
| Selector. | Updates cursors for corner grips on rotation so arrows point the right way |
| Selector. | Updates the selector to match the element’s size |
| SelectorManager | Public class to manage all selector objects (selection boxes) |
| SelectorManager. | Resets the parent selector group element |
| SelectorManager. | Returns the selector based on the given element |
| SelectorManager. | Removes the selector of the given element (hides selection box) |
| SelectorManager. | 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 |
| shortFloat | Rounds a given value to a float with number of digits defined in save_options |
| 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 |
| 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 |
| 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 |
| 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 |
| setSegType | Sets the new segment type to the selected segment(s). |
| 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. |
| convertToPath | Convert selected element to a path, or get the BBox of an element-as-path |
| 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 |
| updateCanvas | Updates the editor canvas width/height/position after a zoom has occurred |
| getVersion | Returns a string which describes the revision number of SvgCanvas. |
The main SvgCanvas class that manages all SVG-related functions
| container | The container HTML element that should hold the SVG root element |
| config | An object that contains configuration data |
| SvgCanvas | The main SvgCanvas class that manages all SVG-related functions |
| Utils. | Converts characters in a string to XML-friendly entities. |
| Utils. | Converts XML entities in a string to single characters. |
| Utils. | Converts a string to base64 |
| Utils. | Converts a string from base64 |
| Utils. | 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 |
| 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/ | |
| ChangeElementCommand | History command to make a change to an element. |
| ChangeElementCommand. | Performs the stored change action |
| ChangeElementCommand. | Reverses the stored change action |
| ChangeElementCommand. | Returns array with element associated with this command |
| InsertElementCommand | History command for an element that was added to the DOM |
| InsertElementCommand. | Re-Inserts the new element |
| InsertElementCommand. | Removes the element |
| InsertElementCommand. | Returns array with element associated with this command |
| RemoveElementCommand | History command for an element removed from the DOM |
| RemoveElementCommand. | Re-removes the new element |
| RemoveElementCommand. | Re-adds the new element |
| RemoveElementCommand. | Returns array with element associated with this command |
| MoveElementCommand | History command for an element that had its DOM position changed |
| MoveElementCommand. | Re-positions the element |
| MoveElementCommand. | Positions the element back to its original location |
| MoveElementCommand. | Returns array with element associated with this command |
| BatchCommand | History command that can contain/execute multiple other commands |
| BatchCommand. | Runs “apply” on all subcommands |
| BatchCommand. | Runs “unapply” on all subcommands |
| BatchCommand. | Iterate through all our subcommands and returns all the elements we are changing |
| BatchCommand. | Adds a given command to the history stack |
| BatchCommand. | Returns a boolean indicating whether or not the batch command is empty |
| resetUndoStack | Resets the undo stack, effectively clearing the undo/redo history |
| undoMgr. | Integer with the current size of the undo history stack |
| undoMgr. | Integer with the current size of the redo history stack |
| undoMgr. | String associated with the next undo command |
| undoMgr. | 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. | Used to reset the id and element that the selector is attached to |
| Selector. | Show the resize grips of this selector |
| Selector. | Updates cursors for corner grips on rotation so arrows point the right way |
| Selector. | Updates the selector to match the element’s size |
| SelectorManager | Public class to manage all selector objects (selection boxes) |
| SelectorManager. | Resets the parent selector group element |
| SelectorManager. | Returns the selector based on the given element |
| SelectorManager. | Removes the selector of the given element (hides selection box) |
| SelectorManager. | 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 |
| 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 |
"snapToAngle": function( x1, y1, x2, y2 )
Returns a 45 degree angle coordinate associated with the two given coordinates
| x1 | First coordinate’s x value |
| x2 | Second coordinate’s x value |
| y1 | First coordinate’s y value |
| y2 | Second coordinate’s y value |
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": function( sXML )
Cross-browser compatible method of converting a string to an XML tree found this function here: http://groups.google.com
Public class to manage all selector objects (selection boxes)
| SelectorManager. | Resets the parent selector group element |
| SelectorManager. | Returns the selector based on the given element |
| SelectorManager. | Removes the selector of the given element (hides selection box) |
| SelectorManager. | 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 |
| shortFloat | Rounds a given value to a float with number of digits defined in save_options |
| 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 |
| 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 |
| 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 |
| 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 |
| setSegType | Sets the new segment type to the selected segment(s). |
| 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. |
| convertToPath | Convert selected element to a path, or get the BBox of an element-as-path |
| 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 |
| updateCanvas | Updates the editor canvas width/height/position after a zoom has occurred |
| getVersion | Returns a string which describes the revision number of SvgCanvas. |
Public class to manage all selector objects (selection boxes)
| SelectorManager. | Resets the parent selector group element |
| SelectorManager. | Returns the selector based on the given element |
| SelectorManager. | Removes the selector of the given element (hides selection box) |
| SelectorManager. | 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 |
| 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 |
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
| data | Object with the following keys/values: |
Returns: The new element
var shortFloat = function( val )
Rounds a given value to a float with number of digits defined in save_options
| val | The value as a String, Number or Array of two numbers to be rounded |
If a string/number was given, returns a Float. If an array, return a string with comma-seperated floats
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
| parent | The parent DOM element to search within |
| includeBBox | Boolean to indicate that an object should return with the element and its bbox |
An array with all “visible” elements, or if includeBBox is true, an array with objects that include:
var getUrlFromAttr = this.getUrlFromAttr = function( attrVal )
Extracts the URL from the url(...) syntax of some attributes. Three variants:
| attrVal | The attribute value as a string |
String with just the URL, like someFile.svg#foo
var getRotationAngle = this.getRotationAngle = function( elem, to_rad )
Get the rotation angle of the given/selected DOM element
| elem | Optional DOM element to get the angle for |
| to_rad | Boolean that when true returns the value in radians rather than degrees |
Float with the angle in degrees or radians
var addToSelection = this.addToSelection = function( elemsToAdd, showGrips )
Adds a list of elements to the selection. The ‘selected’ handler is then called.
| elemsToAdd | an array of DOM elements to add to the selection |
| showGrips | a boolean flag indicating whether the resize grips should be shown |
this.setSegType = function( new_type )
Sets the new segment type to the selected segment(s).
| new_type | Integer with the new segment type See http://www.w3.org |
this.changeSelectedAttributeNoUndo = function( attr, newValue, elems )
This function makes the changes to the elements. It does not add the change to the history stack.
| attr | String with the attribute name |
| newValue | String or number with the new attribute value |
| elems | The DOM elements to apply the change to |
this.convertToPath = function( elem, getBBox )
Convert selected element to a path, or get the BBox of an element-as-path
| elem | The DOM element to be converted |
| getBBox | Boolean on whether or not to only return the path’s BBox |
If the getBBox flag is true, the resulting path’s bounding box object. Otherwise the resulting path element is returned.
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.
| attr | String with the attribute name |
| newValue | String or number with the new attribute value |
| elems | The DOM elements to apply the change to |
var changeSelectedAttributeNoUndo = function( attr, newValue, elems )
This function makes the changes to the elements. It does not add the change to the history stack.
| attr | String with the attribute name |
| newValue | String or number with the new attribute value |
| elems | The DOM elements to apply the change to |
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.
| attr | String with the attribute name |
| newValue | String or number with the new attribute value |
| elems | The DOM elements to apply the change to |
this.convertToPath = function( elem, getBBox )
Convert selected element to a path, or get the BBox of an element-as-path
| elem | The DOM element to be converted |
| getBBox | Boolean on whether or not to only return the path’s BBox |
If the getBBox flag is true, the resulting path’s bounding box object. Otherwise the resulting path element is returned.
this.moveSelectedElements = function( dx, dy, undoable )
Moves selected elements on the X/Y axis
| 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 |
Batch command for the move
this.updateCanvas = function( w, h )
Updates the editor canvas width/height/position after a zoom has occurred
| w | Float with the new width |
| h | Float with the new height |
Object with the following values:
Converts characters in a string to XML-friendly entities.
toXml = function( str )
Converts XML entities in a string to single characters.
fromXml = function( str )
Converts given values to numbers.
convertToNum = function( attr, val )
Sets an element’s attribute based on the unit in its current value.
setUnitAttr = function( elem, attr, val )
Check if an attribute’s value is in a valid format
canvas.isValidUnit = function( attr, val )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
History command for an element that was added to the DOM
var InsertElementCommand = this.undoCmd.insertElement = function( elem, text )
History command for an element removed from the DOM
var RemoveElementCommand = this.undoCmd.removeElement = function( elem, parent, text )
History command for an element that had its DOM position changed
var MoveElementCommand = this.undoCmd.moveElement = function( elem, oldNextSibling, oldParent, text )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
Resets the undo stack, effectively clearing the undo/redo history
resetUndoStack = function()
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()
Walks the tree and executes the callback on each element in a top-down fashion
function walkTree( elem, cbFn )
Walks the tree and executes the callback on each element in a depth-first fashion
function walkTreePost( elem, cbFn )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Rounds a given value to a float with number of digits defined in save_options
var shortFloat = function( val )
Returns the last created DOM element ID string
getId = c.getId = function()
Creates and returns a unique ID string for a DOM element
getNextId = c.getNextId = function()
Attaches a callback function to an event
c.bind = function( event, f )
Changes the ID prefix to the given value
c.setIdPrefix = function( p )
Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
var sanitizeSvg = this.sanitizeSvg = function( node )
Extracts the URL from the url(...)
var getUrlFromAttr = this.getUrlFromAttr = function( attrVal )
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
this.getBBox = function( elem )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
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 getPathBBox = function( path )
Get the rotation angle of the given/selected DOM element
this.getRotationAngle = function( elem, to_rad )
Removes any old rotations if present, prepends a new rotation at the transformed center
this.setRotationAngle = function( val, preventUndo )
Returns an object that behaves like a SVGTransformList for the given DOM element
this.getTransformList = function( elem )
Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()
Applies coordinate changes to an element based on the given matrix
var remapElement = this.remapElement = function( selected, changes, m )
Decides the course of action based on the element’s transform list
var recalculateDimensions = this.recalculateDimensions = function( selected )
A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
var transformPoint = function( x, y, m )
Helper function to check if the matrix performs no actual transform (i.e.
var isIdentity = function( m )
This function tries to return a SVGMatrix that is the multiplication m1*m2.
var matrixMultiply = this.matrixMultiply = function()
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 transformListToTransform = this.transformListToTransform = function( tlist, min, max )
See if the given transformlist includes a non-indentity matrix transform
var hasMatrixTransform = this.hasMatrixTransform = function( tlist )
Get the matrix object for a given element
var getMatrix = function( elem )
Transforms a rectangle based on the given matrix
var transformBox = this.transformBox = function( l, t, w, h, m )
Clears the selection.
this.clearSelection = function( noCall )
Adds a list of elements to the selection.
this.addToSelection = function( elemsToAdd, showGrips )
Removes elements from the selection.
this.removeFromSelection = function( elemsToRemove )
Clears the selection, then adds all elements in the current layer to the selection.
this.selectAllInCurrentLayer = function()
Takes three points and creates a smoother line based on them
var smoothControlPoints = this.smoothControlPoints = function( ct1, ct2, pt )
Gets the desired element from a mouse event
var getMouseTarget = this.getMouseTarget = function( evt )
Looks at DOM elements inside the defs to see if they are referred to, removes them from the DOM if they are not.
var removeUnusedDefElems = this.removeUnusedDefElems = function()
Main function to set up the SVG content for output
var svgCanvasToString = this.svgCanvasToString = function()
Sub function ran on each SVG element to convert it to a string as desired
var svgToString = this.svgToString = function( elem, indent )
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
this.save = function( opts )
Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
this.rasterExport = function()
Returns the current drawing as raw SVG XML text.
this.getSvgString = function()
This function sets the current drawing as the input SVG XML.
this.setSvgString = function( xmlString )
This function imports the input SVG XML into the current layer in the drawing
this.importSvgString = function( xmlString )
Updates layer system
var identifyLayers = function()
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.createLayer = function( name )
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Returns the number of layers in the current drawing.
this.getNumLayers = function()
Returns the name of the ith layer.
this.getLayer = function( i )
Returns the name of the currently selected layer.
this.getCurrentLayer = function()
Sets the current layer.
this.setCurrentLayer = function( name )
Renames the current layer.
this.renameCurrentLayer = function( newname )
Changes the position of the current layer to the new value.
this.setCurrentLayerPosition = function( newpos )
Returns whether the layer is visible.
this.getLayerVisibility = function( layername )
Sets the visibility of the layer.
this.setLayerVisibility = function( layername, bVisible )
Moves the selected elements to layername.
this.moveSelectedToLayer = function( layername )
Returns the opacity of the given layer.
this.getLayerOpacity = function( layername )
Sets the opacity of the given layer.
this.setLayerOpacity = function( layername, opacity )
Clears the current document.
this.clear = function()
Returns the content DOM element
this.getContentElem = function()
Returns the root DOM element
this.getRootElem = function()
Returns the array with selected DOM elements
this.getSelectedElems = function()
Returns the current dimensions and zoom level in an object
this.getResolution = function()
Returns the current document title or an empty string if not found
this.getDocumentTitle = function()
Adds/updates a title element for the document with the given name.
this.setDocumentTitle = function( newtitle )
Returns the editor’s namespace URL, optionally adds it to root element
this.getEditorNS = function( add )
Changes the document’s dimensions to the given size
this.setResolution = function( x, y )
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.getOffset = function()
Sets the zoom level on the canvas-side based on the given value
this.setBBoxZoom = function( val, editor_w, editor_h )
Sets the zoom to the given level
this.setZoom = function( zoomlevel )
Returns the current editor mode string
this.getMode = function()
Sets the editor’s mode to the given string
this.setMode = function( name )
Returns the current fill/stroke option
this.getColor = function( type )
Change the current stroke/fill color/gradient value
this.setColor = function( type, val, preventUndo )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Apply the current gradient to selected element’s fill or stroke
var setGradient = this.setGradient = function( type )
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
Set a color/gradient to a fill/stroke
this.setPaint = function( type, paint )
Returns the current stroke-width value
this.getStrokeWidth = function()
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.setStrokeWidth = function( val )
Set the given stroke-related attribute the given value for selected elements
this.setStrokeAttr = function( attr, val )
Returns the current opacity
this.getOpacity = function()
Sets the given opacity to the current selected elements
this.setOpacity = function( val )
Returns the current stroke opacity
this.getStrokeOpacity = function()
Sets the current fill/stroke opacity
this.setPaintOpacity = function( type, val, preventUndo )
Gets the stdDeviation blur value of the given element
this.getBlur = function( elem )
Sets the stdDeviation blur value on the selected element without being undoable
canvas.setBlurNoUndo = function( val )
Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
canvas.setBlurOffsets = function( filter, stdDev )
Adds/updates the blur filter to the selected element
canvas.setBlur = function( val, complete )
Check whether selected element is bold or not
this.getBold = function()
Make the selected element bold or normal
this.setBold = function( b )
Check whether selected element is italic or not
this.getItalic = function()
Make the selected element italic or normal
this.setItalic = function( i )
Returns the current font family
this.getFontFamily = function()
Set the new font family
this.setFontFamily = function( val )
Returns the current font size
this.getFontSize = function()
Applies the given font size to the selected element
this.setFontSize = function( val )
Returns the current text (textContent) of the selected element
this.getText = function()
Updates the text element with the given string
this.setTextContent = function( val )
Sets the new image URL for the selected image element.
this.setImageURL = function( val )
Sets the rx & ry values to the selected rect element to change its corner radius
this.setRectRadius = function( val )
Sets the new segment type to the selected segment(s).
this.setSegType = function( new_type )
This function makes the changes to the elements.
this.changeSelectedAttributeNoUndo = function( attr, newValue, 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.changeSelectedAttribute = function( attr, val, elems )
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Wraps all the selected elements in a group (g) element
this.groupSelectedElements = function()
Unwraps all the elements in a selected group (g) element.
this.ungroupSelectedElement = function()
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
Repositions the selected element to the bottom in the DOM to appear on top of other elements
this.moveToTopSelectedElement = function()
Repositions the selected element to the top in the DOM to appear under other elements
this.moveToBottomSelectedElement = function()
Moves selected elements on the X/Y axis
this.moveSelectedElements = function( dx, dy, undoable )
Updates the editor canvas width/height/position after a zoom has occurred
this.updateCanvas = function( w, h )
Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function()
Check if two rectangles (BBoxes objects) intersect each other
"rectsIntersect": function( r1, r2 )
Returns a 45 degree angle coordinate associated with the two given coordinates
"snapToAngle": function( x1, y1, x2, y2 )
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
"text2xml": function( sXML )
Converts given values to numbers.
convertToNum = function( attr, val )
Sets an element’s attribute based on the unit in its current value.
setUnitAttr = function( elem, attr, val )
Check if an attribute’s value is in a valid format
canvas.isValidUnit = function( attr, val )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
History command for an element that was added to the DOM
var InsertElementCommand = this.undoCmd.insertElement = function( elem, text )
History command for an element removed from the DOM
var RemoveElementCommand = this.undoCmd.removeElement = function( elem, parent, text )
History command for an element that had its DOM position changed
var MoveElementCommand = this.undoCmd.moveElement = function( elem, oldNextSibling, oldParent, text )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
Resets the undo stack, effectively clearing the undo/redo history
resetUndoStack = function()
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()
Walks the tree and executes the callback on each element in a top-down fashion
function walkTree( elem, cbFn )
Walks the tree and executes the callback on each element in a depth-first fashion
function walkTreePost( elem, cbFn )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Add an extension to the editor
this.addExtension = function( name, ext_func )
Rounds a given value to a float with number of digits defined in save_options
var shortFloat = function( val )
Get the bounding box for one or more stroked and/or transformed elements
var getStrokedBBox = this.getStrokedBBox = function( elems )
Get all elements that have a BBox (excludes defs, title, etc).
var getVisibleElements = this.getVisibleElements = function( parent, includeBBox )
Create a clone of an element, updating its ID and its children’s IDs when needed
var copyElem = function( el )
Get a DOM element by ID within the SVG root element.
function getElem( id )
Returns the last created DOM element ID string
getId = c.getId = function()
Creates and returns a unique ID string for a DOM element
getNextId = c.getNextId = function()
Attaches a callback function to an event
c.bind = function( event, f )
Changes the ID prefix to the given value
c.setIdPrefix = function( p )
Sanitizes the input node and its children It only keeps what is allowed from our whitelist defined above
var sanitizeSvg = this.sanitizeSvg = function( node )
Extracts the URL from the url(...)
var getUrlFromAttr = this.getUrlFromAttr = function( attrVal )
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
var getBBox = this.getBBox = function( elem )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
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 getPathBBox = function( path )
Get the rotation angle of the given/selected DOM element
var getRotationAngle = this.getRotationAngle = function( elem, to_rad )
Removes any old rotations if present, prepends a new rotation at the transformed center
this.setRotationAngle = function( val, preventUndo )
Returns an object that behaves like a SVGTransformList for the given DOM element
var getTransformList = this.getTransformList = function( elem )
Runs recalculateDimensions on the selected elements, adding the changes to a single batch command
var recalculateAllSelectedDimensions = this.recalculateAllSelectedDimensions = function()
Applies coordinate changes to an element based on the given matrix
var remapElement = this.remapElement = function( selected, changes, m )
Decides the course of action based on the element’s transform list
var recalculateDimensions = this.recalculateDimensions = function( selected )
A (hopefully) quicker function to transform a point by a matrix (this function avoids any DOM calls and just does the math)
var transformPoint = function( x, y, m )
Helper function to check if the matrix performs no actual transform (i.e.
var isIdentity = function( m )
This function tries to return a SVGMatrix that is the multiplication m1*m2.
var matrixMultiply = this.matrixMultiply = function()
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 transformListToTransform = this.transformListToTransform = function( tlist, min, max )
See if the given transformlist includes a non-indentity matrix transform
var hasMatrixTransform = this.hasMatrixTransform = function( tlist )
Get the matrix object for a given element
var getMatrix = function( elem )
Transforms a rectangle based on the given matrix
var transformBox = this.transformBox = function( l, t, w, h, m )
Clears the selection.
var clearSelection = this.clearSelection = function( noCall )
Adds a list of elements to the selection.
var addToSelection = this.addToSelection = function( elemsToAdd, showGrips )
Removes elements from the selection.
var removeFromSelection = this.removeFromSelection = function( elemsToRemove )
Clears the selection, then adds all elements in the current layer to the selection.
this.selectAllInCurrentLayer = function()
Takes three points and creates a smoother line based on them
var smoothControlPoints = this.smoothControlPoints = function( ct1, ct2, pt )
Gets the desired element from a mouse event
var getMouseTarget = this.getMouseTarget = function( evt )
Prevents default browser click behaviour on the given element
var preventClickDefault = function( img )
Looks at DOM elements inside the defs to see if they are referred to, removes them from the DOM if they are not.
var removeUnusedDefElems = this.removeUnusedDefElems = function()
Main function to set up the SVG content for output
var svgCanvasToString = this.svgCanvasToString = function()
Sub function ran on each SVG element to convert it to a string as desired
var svgToString = this.svgToString = function( elem, indent )
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Serializes the current drawing into SVG XML text and returns it to the ‘saved’ handler.
this.save = function( opts )
Generates a PNG Data URL based on the current image, then calls “exported” with an object including the string and any issues found
this.rasterExport = function()
Returns the current drawing as raw SVG XML text.
this.getSvgString = function()
This function sets the current drawing as the input SVG XML.
this.setSvgString = function( xmlString )
This function imports the input SVG XML into the current layer in the drawing
this.importSvgString = function( xmlString )
Updates layer system
var identifyLayers = function()
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.createLayer = function( name )
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Returns the number of layers in the current drawing.
this.getNumLayers = function()
Returns the name of the ith layer.
this.getLayer = function( i )
Returns the name of the currently selected layer.
this.getCurrentLayer = function()
Sets the current layer.
this.setCurrentLayer = function( name )
Renames the current layer.
this.renameCurrentLayer = function( newname )
Changes the position of the current layer to the new value.
this.setCurrentLayerPosition = function( newpos )
Returns whether the layer is visible.
this.getLayerVisibility = function( layername )
Sets the visibility of the layer.
this.setLayerVisibility = function( layername, bVisible )
Moves the selected elements to layername.
this.moveSelectedToLayer = function( layername )
Returns the opacity of the given layer.
this.getLayerOpacity = function( layername )
Sets the opacity of the given layer.
this.setLayerOpacity = function( layername, opacity )
Clears the current document.
this.clear = function()
Returns the content DOM element
this.getContentElem = function()
Returns the root DOM element
this.getRootElem = function()
Returns the array with selected DOM elements
this.getSelectedElems = function()
Returns the current dimensions and zoom level in an object
var getResolution = this.getResolution = function()
Returns the current zoom level
this.getZoom = function()
Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function()
Update interface strings with given values
this.setUiStrings = function( strs )
Update configuration options with given values
this.setConfig = function( opts )
Returns the current document title or an empty string if not found
this.getDocumentTitle = function()
Adds/updates a title element for the document with the given name.
this.setDocumentTitle = function( newtitle )
Returns the editor’s namespace URL, optionally adds it to root element
this.getEditorNS = function( add )
Changes the document’s dimensions to the given size
this.setResolution = function( x, y )
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.getOffset = function()
Sets the zoom level on the canvas-side based on the given value
this.setBBoxZoom = function( val, editor_w, editor_h )
Sets the zoom to the given level
this.setZoom = function( zoomlevel )
Returns the current editor mode string
this.getMode = function()
Sets the editor’s mode to the given string
this.setMode = function( name )
Returns the current fill/stroke option
this.getColor = function( type )
Change the current stroke/fill color/gradient value
this.setColor = function( type, val, preventUndo )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Apply the current gradient to selected element’s fill or stroke
var setGradient = this.setGradient = function( type )
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
Set a color/gradient to a fill/stroke
this.setPaint = function( type, paint )
Returns the current stroke-width value
this.getStrokeWidth = function()
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.setStrokeWidth = function( val )
Set the given stroke-related attribute the given value for selected elements
this.setStrokeAttr = function( attr, val )
Returns the current opacity
this.getOpacity = function()
Sets the given opacity to the current selected elements
this.setOpacity = function( val )
Returns the current stroke opacity
this.getStrokeOpacity = function()
Sets the current fill/stroke opacity
this.setPaintOpacity = function( type, val, preventUndo )
Gets the stdDeviation blur value of the given element
this.getBlur = function( elem )
Sets the stdDeviation blur value on the selected element without being undoable
canvas.setBlurNoUndo = function( val )
Sets the x, y, with, height values of the filter element in order to make the blur not be clipped.
canvas.setBlurOffsets = function( filter, stdDev )
Adds/updates the blur filter to the selected element
canvas.setBlur = function( val, complete )
Check whether selected element is bold or not
this.getBold = function()
Make the selected element bold or normal
this.setBold = function( b )
Check whether selected element is italic or not
this.getItalic = function()
Make the selected element italic or normal
this.setItalic = function( i )
Returns the current font family
this.getFontFamily = function()
Set the new font family
this.setFontFamily = function( val )
Returns the current font size
this.getFontSize = function()
Applies the given font size to the selected element
this.setFontSize = function( val )
Returns the current text (textContent) of the selected element
this.getText = function()
Updates the text element with the given string
this.setTextContent = function( val )
Sets the new image URL for the selected image element.
this.setImageURL = function( val )
Sets the rx & ry values to the selected rect element to change its corner radius
this.setRectRadius = function( val )
Sets the new segment type to the selected segment(s).
this.setSegType = function( new_type )
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
This function makes the changes to the elements.
var changeSelectedAttributeNoUndo = function( attr, newValue, 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.
var changeSelectedAttribute = this.changeSelectedAttribute = function( attr, val, elems )
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Wraps all the selected elements in a group (g) element
this.groupSelectedElements = function()
Unwraps all the elements in a selected group (g) element.
this.ungroupSelectedElement = function()
Repositions the selected element to the bottom in the DOM to appear on top of other elements
this.moveToTopSelectedElement = function()
Repositions the selected element to the top in the DOM to appear under other elements
this.moveToBottomSelectedElement = function()
Moves selected elements on the X/Y axis
this.moveSelectedElements = function( dx, dy, undoable )
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
this.cloneSelectedElements = function()
Aligns selected elements
this.alignSelectedElements = function( type, relative_to )
Updates the editor canvas width/height/position after a zoom has occurred
this.updateCanvas = function( w, h )
Set the background of the editor (NOT the actual document)
this.setBackground = function( color, url )
Select the next/previous element within the current layer
this.cycleElement = function( next )
| A | |
| addCommandToHistory, SvgCanvas | |
| addSubCommand, SvgCanvas. | |
| addSvgElementFromJson, SelectorManager | |
| addToSelection, SelectorManager | |
| apply | |
| assignAttributes, SelectorManager | |
| B | |
| BatchCommand, SvgCanvas | |
| beginUndoableChange, SvgCanvas | |
| bind, SelectorManager | |
| C | |
| ChangeElementCommand, SvgCanvas | |
| changeSelectedAttribute, SelectorManager | |
| changeSelectedAttributeNoUndo, SelectorManager | |
| cleanupElement, SelectorManager | |
| clear, SelectorManager | |
| clearSelection, SelectorManager | |
| convertToNum, SvgCanvas | |
| convertToPath, SelectorManager | |
| createLayer, SelectorManager | |
| D | |
| deleteCurrentLayer, SelectorManager | |
| deleteSelectedElements, SelectorManager | |
| E | |
| elements | |
| embedImage, SelectorManager | |
| F | |
| ffClone, SelectorManager | |
| findDefs, SelectorManager | |
| findDuplicateGradient, SelectorManager | |
| finishUndoableChange, SvgCanvas | |
| fromXml, SvgCanvas | |
| G | |
| getBBox, SelectorManager | |
| getBlur, SelectorManager | |
| getBold, SelectorManager | |
| getColor, SelectorManager | |
| getContentElem, SelectorManager | |
| getCurrentLayer, SelectorManager | |
| getDocumentTitle, SelectorManager | |
| getEditorNS, SelectorManager | |
| getFontFamily, SelectorManager | |
| getFontSize, SelectorManager | |
| getId, SelectorManager | |
| getItalic, SelectorManager | |
| getLayer, SelectorManager | |
| getLayerOpacity, SelectorManager | |
| getLayerVisibility, SelectorManager | |
| getMatrix, SelectorManager | |
| getMode, SelectorManager | |
| getMouseTarget, SelectorManager | |
| getNextId, SelectorManager | |
| getNextRedoCommandText, SvgCanvas. | |
| getNextUndoCommandText, SvgCanvas. | |
| getNumLayers, SelectorManager | |
| getOffset, SelectorManager | |
| getOpacity, SelectorManager | |
| getPathBBox, SelectorManager | |
| getRedoStackSize, SvgCanvas. | |
| getResolution, SelectorManager | |
| getRootElem, SelectorManager | |
| getRotationAngle, SelectorManager | |
| getRubberBandBox, SelectorManager. | |
| getSelectedElems, SelectorManager | |
| getStrokeOpacity, SelectorManager | |
| getStrokeWidth, SelectorManager | |
| getSvgString, SelectorManager | |
| getText, SelectorManager | |
| getTransformList, SelectorManager | |
| getUndoStackSize, SvgCanvas. | |
| getUrlFromAttr, SelectorManager | |
| getVersion, SelectorManager | |
| groupSelectedElements, SelectorManager | |
| H | |
| hasMatrixTransform, SelectorManager |
| A | |
| addCommandToHistory, SvgCanvas | |
| addExtension, SelectorManager | |
| addSubCommand, SvgCanvas. | |
| addSvgElementFromJson, SelectorManager | |
| addToSelection, SelectorManager | |
| alignSelectedElements, SelectorManager | |
| apply | |
| assignAttributes, SelectorManager | |
| B | |
| BatchCommand, SvgCanvas | |
| beginUndoableChange, SvgCanvas | |
| bind, SelectorManager | |
| C | |
| ChangeElementCommand, SvgCanvas | |
| changeSelectedAttribute, SelectorManager | |
| changeSelectedAttributeNoUndo, SelectorManager | |
| cleanupElement, SelectorManager | |
| clear, SelectorManager | |
| clearSelection, SelectorManager | |
| cloneSelectedElements, SelectorManager | |
| convertToNum, SvgCanvas | |
| convertToPath, SelectorManager | |
| convertToXMLReferences, SvgCanvas. | |
| copyElem, SelectorManager | |
| createLayer, SelectorManager | |
| cycleElement, SelectorManager | |
| D | |
| decode64, SvgCanvas. | |
| deleteCurrentLayer, SelectorManager | |
| deleteSelectedElements, SelectorManager | |
| E | |
| elements | |
| embedImage, SelectorManager | |
| encode64, SvgCanvas. | |
| F | |
| ffClone, SelectorManager | |
| findDefs, SelectorManager | |
| findDuplicateGradient, SelectorManager | |
| finishUndoableChange, SvgCanvas | |
| fromXml, SvgCanvas. |
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Adds a list of elements to the selection.
this.addToSelection = function( elemsToAdd, showGrips )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
Add an extension to the editor
this.addExtension = function( name, ext_func )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Adds a list of elements to the selection.
var addToSelection = this.addToSelection = function( elemsToAdd, showGrips )
Aligns selected elements
this.alignSelectedElements = function( type, relative_to )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
Attaches a callback function to an event
c.bind = function( event, f )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
Attaches a callback function to an event
c.bind = function( event, f )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
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.changeSelectedAttribute = function( attr, val, elems )
This function makes the changes to the elements.
this.changeSelectedAttributeNoUndo = function( attr, newValue, elems )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
Clears the current document.
this.clear = function()
Clears the selection.
this.clearSelection = function( noCall )
Converts given values to numbers.
convertToNum = function( attr, val )
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
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.createLayer = function( name )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
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.
var changeSelectedAttribute = this.changeSelectedAttribute = function( attr, val, elems )
This function makes the changes to the elements.
var changeSelectedAttributeNoUndo = function( attr, newValue, elems )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
Clears the current document.
this.clear = function()
Clears the selection.
var clearSelection = this.clearSelection = function( noCall )
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
this.cloneSelectedElements = function()
Converts given values to numbers.
convertToNum = function( attr, val )
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
Create a clone of an element, updating its ID and its children’s IDs when needed
var copyElem = function( el )
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.createLayer = function( name )
Select the next/previous element within the current layer
this.cycleElement = function( next )
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()
Converts XML entities in a string to single characters.
fromXml = function( str )
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
this.getBBox = function( elem )
Gets the stdDeviation blur value of the given element
this.getBlur = function( elem )
Check whether selected element is bold or not
this.getBold = function()
Returns the current fill/stroke option
this.getColor = function( type )
Returns the content DOM element
this.getContentElem = function()
Returns the name of the currently selected layer.
this.getCurrentLayer = function()
Returns the current document title or an empty string if not found
this.getDocumentTitle = function()
Returns the editor’s namespace URL, optionally adds it to root element
this.getEditorNS = function( add )
Returns the current font family
this.getFontFamily = function()
Returns the current font size
this.getFontSize = function()
Returns the last created DOM element ID string
getId = c.getId = function()
Check whether selected element is italic or not
this.getItalic = function()
Returns the name of the ith layer.
this.getLayer = function( i )
Returns the opacity of the given layer.
this.getLayerOpacity = function( layername )
Returns whether the layer is visible.
this.getLayerVisibility = function( layername )
Get the matrix object for a given element
var getMatrix = function( elem )
Returns the current editor mode string
this.getMode = function()
Gets the desired element from a mouse event
var getMouseTarget = this.getMouseTarget = function( evt )
Creates and returns a unique ID string for a DOM element
getNextId = c.getNextId = function()
Returns the number of layers in the current drawing.
this.getNumLayers = function()
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.getOffset = function()
Returns the current opacity
this.getOpacity = function()
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 getPathBBox = function( path )
Returns the current dimensions and zoom level in an object
this.getResolution = function()
Returns the root DOM element
this.getRootElem = function()
Get the rotation angle of the given/selected DOM element
this.getRotationAngle = function( elem, to_rad )
Returns the array with selected DOM elements
this.getSelectedElems = function()
Returns the current stroke opacity
this.getStrokeOpacity = function()
Returns the current stroke-width value
this.getStrokeWidth = function()
Returns the current drawing as raw SVG XML text.
this.getSvgString = function()
Returns the current text (textContent) of the selected element
this.getText = function()
Returns an object that behaves like a SVGTransformList for the given DOM element
this.getTransformList = function( elem )
Extracts the URL from the url(...)
var getUrlFromAttr = this.getUrlFromAttr = function( attrVal )
Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function()
Wraps all the selected elements in a group (g) element
this.groupSelectedElements = function()
See if the given transformlist includes a non-indentity matrix transform
var hasMatrixTransform = this.hasMatrixTransform = function( tlist )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()
| A | |
| addCommandToHistory, SvgCanvas | |
| addSubCommand, SvgCanvas. | |
| addSvgElementFromJson, SelectorManager | |
| addToSelection, SelectorManager | |
| apply | |
| assignAttributes, SelectorManager | |
| B | |
| BatchCommand, SvgCanvas | |
| beginUndoableChange, SvgCanvas | |
| bind, SelectorManager | |
| C | |
| ChangeElementCommand, SvgCanvas | |
| changeSelectedAttribute, SelectorManager | |
| changeSelectedAttributeNoUndo, SelectorManager | |
| cleanupElement, SelectorManager | |
| clear, SelectorManager | |
| clearSelection, SelectorManager | |
| convertToNum, SvgCanvas | |
| convertToPath, SelectorManager | |
| createLayer, SelectorManager | |
| D | |
| deleteCurrentLayer, SelectorManager | |
| deleteSelectedElements, SelectorManager | |
| Document functions, SelectorManager | |
| E | |
| Element Styling, SelectorManager | |
| Element Transforms, SelectorManager | |
| elements | |
| embedImage, SelectorManager | |
| F | |
| ffClone, SelectorManager | |
| findDefs, SelectorManager | |
| findDuplicateGradient, SelectorManager | |
| finishUndoableChange, SvgCanvas | |
| fromXml, SvgCanvas | |
| Functions, Selector | |
| G | |
| getBBox, SelectorManager | |
| getBlur, SelectorManager | |
| getBold, SelectorManager | |
| getColor, SelectorManager | |
| getContentElem, SelectorManager | |
| getCurrentLayer, SelectorManager | |
| getDocumentTitle, SelectorManager | |
| getEditorNS, SelectorManager | |
| getFontFamily, SelectorManager | |
| getFontSize, SelectorManager | |
| getId, SelectorManager | |
| getItalic, SelectorManager | |
| getLayer, SelectorManager | |
| getLayerOpacity, SelectorManager | |
| getLayerVisibility, SelectorManager | |
| getMatrix, SelectorManager | |
| getMode, SelectorManager | |
| getMouseTarget, SelectorManager | |
| getNextId, SelectorManager | |
| getNextRedoCommandText, SvgCanvas. | |
| getNextUndoCommandText, SvgCanvas. | |
| getNumLayers, SelectorManager | |
| getOffset, SelectorManager | |
| getOpacity, SelectorManager | |
| getPathBBox, SelectorManager | |
| getRedoStackSize, SvgCanvas. | |
| getResolution, SelectorManager | |
| getRootElem, SelectorManager | |
| getRotationAngle, SelectorManager | |
| getRubberBandBox, SelectorManager. | |
| getSelectedElems, SelectorManager | |
| getStrokeOpacity, SelectorManager | |
| getStrokeWidth, SelectorManager | |
| getSvgString, SelectorManager | |
| getText, SelectorManager | |
| getTransformList, SelectorManager | |
| getUndoStackSize, SvgCanvas. | |
| getUrlFromAttr, SelectorManager | |
| getVersion, SelectorManager | |
| groupSelectedElements, SelectorManager | |
| H | |
| hasMatrixTransform, SelectorManager | |
| Helper functions, SelectorManager |
| A | |
| addCommandToHistory, SvgCanvas | |
| addExtension, SelectorManager | |
| Additional editor tools, SelectorManager | |
| addSubCommand, SvgCanvas. | |
| addSvgElementFromJson, SelectorManager | |
| addToSelection, SelectorManager | |
| alignSelectedElements, SelectorManager | |
| apply | |
| assignAttributes, SelectorManager | |
| B | |
| BatchCommand, SvgCanvas | |
| beginUndoableChange, SvgCanvas | |
| bind, SelectorManager | |
| C | |
| ChangeElementCommand, SvgCanvas | |
| changeSelectedAttribute, SelectorManager | |
| changeSelectedAttributeNoUndo, SelectorManager | |
| cleanupElement, SelectorManager | |
| clear, SelectorManager | |
| clearSelection, SelectorManager | |
| cloneSelectedElements, SelectorManager | |
| convertToNum, SvgCanvas | |
| convertToPath, SelectorManager | |
| convertToXMLReferences, SvgCanvas. | |
| copyElem, SelectorManager | |
| createLayer, SelectorManager | |
| cycleElement, SelectorManager | |
| D | |
| decode64, SvgCanvas. | |
| deleteCurrentLayer, SelectorManager | |
| deleteSelectedElements, SelectorManager | |
| Document functions, SelectorManager | |
| E | |
| Element manipulation, SelectorManager | |
| Element Styling, SelectorManager | |
| Element Transforms, SelectorManager | |
| elements | |
| embedImage, SelectorManager | |
| encode64, SvgCanvas. | |
| F | |
| ffClone, SelectorManager | |
| findDefs, SelectorManager | |
| findDuplicateGradient, SelectorManager | |
| finishUndoableChange, SvgCanvas | |
| fromXml, SvgCanvas. | |
| Functions, Selector |
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Adds a list of elements to the selection.
this.addToSelection = function( elemsToAdd, showGrips )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
Adds a command object to the undo history stack
addCommandToHistory = c.undoCmd.add = function( cmd )
Add an extension to the editor
this.addExtension = function( name, ext_func )
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
var addSvgElementFromJson = this.addSvgElementFromJson = function( data )
Adds a list of elements to the selection.
var addToSelection = this.addToSelection = function( elemsToAdd, showGrips )
Aligns selected elements
this.alignSelectedElements = function( type, relative_to )
Assigns multiple attributes to an element.
var assignAttributes = this.assignAttributes = function( node, attrs, suspendLength, unitCheck )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
Attaches a callback function to an event
c.bind = function( event, f )
History command that can contain/execute multiple other commands
var BatchCommand = this.undoCmd.batch = function( text )
This function tells the canvas to remember the old values of the attrName attribute for each element sent in.
c.beginUndoableChange = function( attrName, elems )
Attaches a callback function to an event
c.bind = function( event, f )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
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.changeSelectedAttribute = function( attr, val, elems )
This function makes the changes to the elements.
this.changeSelectedAttributeNoUndo = function( attr, newValue, elems )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
Clears the current document.
this.clear = function()
Clears the selection.
this.clearSelection = function( noCall )
Converts given values to numbers.
convertToNum = function( attr, val )
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
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.createLayer = function( name )
History command to make a change to an element.
var ChangeElementCommand = this.undoCmd.changeElement = function( elem, attrs, text )
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.
var changeSelectedAttribute = this.changeSelectedAttribute = function( attr, val, elems )
This function makes the changes to the elements.
var changeSelectedAttributeNoUndo = function( attr, newValue, elems )
Remove unneeded (default) attributes, makes resulting SVG smaller
var cleanupElement = this.cleanupElement = function( element )
Clears the current document.
this.clear = function()
Clears the selection.
var clearSelection = this.clearSelection = function( noCall )
Create deep DOM copies (clones) of all selected elements and move them slightly from their originals
this.cloneSelectedElements = function()
Converts given values to numbers.
convertToNum = function( attr, val )
Convert selected element to a path, or get the BBox of an element-as-path
this.convertToPath = function( elem, getBBox )
Create a clone of an element, updating its ID and its children’s IDs when needed
var copyElem = function( el )
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.createLayer = function( name )
Select the next/previous element within the current layer
this.cycleElement = function( next )
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Deletes the current layer from the drawing and then clears the selection.
this.deleteCurrentLayer = function()
Removes all selected elements from the DOM and adds the change to the history stack
this.deleteSelectedElements = function()
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Converts a given image file to a data URL when possible, then runs a given callback
this.embedImage = function( val, callback )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()
Converts XML entities in a string to single characters.
fromXml = function( str )
Get the given/selected element’s bounding box object, convert it to be more usable when necessary
this.getBBox = function( elem )
Gets the stdDeviation blur value of the given element
this.getBlur = function( elem )
Check whether selected element is bold or not
this.getBold = function()
Returns the current fill/stroke option
this.getColor = function( type )
Returns the content DOM element
this.getContentElem = function()
Returns the name of the currently selected layer.
this.getCurrentLayer = function()
Returns the current document title or an empty string if not found
this.getDocumentTitle = function()
Returns the editor’s namespace URL, optionally adds it to root element
this.getEditorNS = function( add )
Returns the current font family
this.getFontFamily = function()
Returns the current font size
this.getFontSize = function()
Returns the last created DOM element ID string
getId = c.getId = function()
Check whether selected element is italic or not
this.getItalic = function()
Returns the name of the ith layer.
this.getLayer = function( i )
Returns the opacity of the given layer.
this.getLayerOpacity = function( layername )
Returns whether the layer is visible.
this.getLayerVisibility = function( layername )
Get the matrix object for a given element
var getMatrix = function( elem )
Returns the current editor mode string
this.getMode = function()
Gets the desired element from a mouse event
var getMouseTarget = this.getMouseTarget = function( evt )
Creates and returns a unique ID string for a DOM element
getNextId = c.getNextId = function()
Returns the number of layers in the current drawing.
this.getNumLayers = function()
Returns an object with x, y values indicating the svgcontent element’s position in the editor’s canvas.
this.getOffset = function()
Returns the current opacity
this.getOpacity = function()
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 getPathBBox = function( path )
Returns the current dimensions and zoom level in an object
this.getResolution = function()
Returns the root DOM element
this.getRootElem = function()
Get the rotation angle of the given/selected DOM element
this.getRotationAngle = function( elem, to_rad )
Returns the array with selected DOM elements
this.getSelectedElems = function()
Returns the current stroke opacity
this.getStrokeOpacity = function()
Returns the current stroke-width value
this.getStrokeWidth = function()
Returns the current drawing as raw SVG XML text.
this.getSvgString = function()
Returns the current text (textContent) of the selected element
this.getText = function()
Returns an object that behaves like a SVGTransformList for the given DOM element
this.getTransformList = function( elem )
Extracts the URL from the url(...)
var getUrlFromAttr = this.getUrlFromAttr = function( attrVal )
Returns a string which describes the revision number of SvgCanvas.
this.getVersion = function()
Wraps all the selected elements in a group (g) element
this.groupSelectedElements = function()
See if the given transformlist includes a non-indentity matrix transform
var hasMatrixTransform = this.hasMatrixTransform = function( tlist )
Hack for Firefox bugs where text element features aren’t updated.
var ffClone = function( elem )
Return the document’s defs element, create it first if necessary
var findDefs = function()
Check if exact gradient already exists
var findDuplicateGradient = function( grad )
This function returns a BatchCommand object which summarizes the change since beginUndoableChange was called.
c.finishUndoableChange = function()