Class: SvgCanvas

svgcanvas.SvgCanvas(container, config)

The main SvgCanvas class that manages all SVG-related functions.

Constructor

new SvgCanvas(container, config)

Parameters:
Name Type Description
container HTMLElement

The container HTML element that should hold the SVG root element

config module:SVGeditor.configObj.curConfig

An object that contains configuration data

Source:

Namespaces

pathActions
textActions

Members

addedNew :boolean

Type:
  • boolean
Source:

addSVGElementFromJson :module:utilities.EditorContext#addSVGElementFromJson|module:path.EditorContext#addSVGElementFromJson

This should really be an intersection implementing all rather than a union.

Type:
Source:

addToSelection :module:path.EditorContext#addToSelection

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

Type:
Source:
Fires:

call :module:draw.DrawCanvasInit#call|module:path.EditorContext#call

The "implements" should really be an intersection applying to all types rather than a union.

Type:
Source:

clearSelection :module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection

Clears the selection. The 'selected' handler is then optionally called. This should really be an intersection applying to all types rather than a union.

Type:
Source:
Fires:

contentH :Float

Type:
Source:

contentW :Float

Type:
Source:

current_drawing_ :module:draw.Drawing

Current draw.Drawing object.

Type:
Source:

dataStorage

A storage solution aimed at replacing jQuerys data function. Implementation Note: Elements are stored in a (WeakMap)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakMap]. This makes sure the data is garbage collected when the node is removed.

Source:

getCurrentDrawing :module:draw.DrawCanvasInit#getCurrentDrawing

Returns the current Drawing.

Type:
Source:

getId :module:path.EditorContext#getId

Type:
Source:

getMouseTarget :module:path.EditorContext#getMouseTarget

Type:
Source:

getMouseTarget :module:path.EditorContext#getMouseTarget

Type:
Source:

getNextId :module:path.EditorContext#getNextId

Type:
Source:

getSelectedElements :module:utilities.EditorContext#getSelectedElements|module:draw.DrawCanvasInit#getSelectedElements|module:path.EditorContext#getSelectedElements

Should really be an intersection with all needing to apply rather than a union.

Type:
Source:

getZoom :module:path.EditorContext#getCurrentZoom|module:select.SVGFactory#getCurrentZoom

This should really be an intersection applying to all types rather than a union.

Type:
Source:

remapElement :module:path.EditorContext#remapElement

Applies coordinate changes to an element based on the given matrix.

Type:
Source:

remapElement :module:path.EditorContext#remapElement

Applies coordinate changes to an element based on the given matrix.

Type:
Source:

round :module:path.EditorContext#round

This method rounds the incoming value to the nearest value based on the currentZoom

Type:
Source:

selectorManager :module:select.SelectorManager

This object manages selectors for us.

Type:
Source:

undoMgr :module:history.HistoryEventHandler

Type:
Source:

Methods

addExtension(name, extInitFuncopt, initArgs) → {Promise.<void>}

Add an extension to the editor.

Parameters:
Name Type Attributes Description
name string

String with the ID of the extension. Used internally; no need for i18n.

extInitFunc module:svgcanvas.ExtensionInitCallback <optional>

Function supplied by the extension with its data

initArgs module:svgcanvas.ExtensionInitArgs
Source:
Fires:
Throws:

TypeError if extInitFunc is not a function, Error if extension of supplied name already exists

Type
TypeError | Error
Returns:

Resolves to undefined

Type
Promise.<void>

alignSelectedElements(type, relativeTo) → {void}

Aligns selected elements.

Parameters:
Name Type Description
type string

String with single character indicating the alignment type

relativeTo "selected" | "largest" | "smallest" | "page"
Source:
Returns:
Type
void

assignAttributes(elem, attrs, suspendLengthopt, unitCheckopt) → {void}

Assigns multiple attributes to an element.

Parameters:
Name Type Attributes Default Description
elem Element

DOM element to apply new attribute values to

attrs PlainObject.<string, string>

Object with attribute keys/values

suspendLength Integer <optional>

Milliseconds to suspend redraw

unitCheck boolean <optional>
false

Boolean to indicate the need to use units.setUnitAttr

Source:
Returns:
Type
void

assignAttributes(elem, attrs, suspendLengthopt, unitCheckopt) → {void}

Assigns multiple attributes to an element.

Parameters:
Name Type Attributes Default Description
elem Element

DOM element to apply new attribute values to

attrs PlainObject.<string, string>

Object with attribute keys/values

suspendLength Integer <optional>

Milliseconds to suspend redraw

unitCheck boolean <optional>
false

Boolean to indicate the need to use units.setUnitAttr

Source:
Returns:
Type
void

bind(ev, f) → {module:svgcanvas.EventHandler}

Attaches a callback function to an event.

Parameters:
Name Type Description
ev "changed" | "contextset" | "selected" | "pointsAdded" | "extension_added" | "extensions_added" | "message" | "transition" | "zoomed" | "updateCanvas" | "zoomDone" | "saved" | "exported" | "exportedPDF" | "setnonce" | "unsetnonce" | "cleared"

String indicating the name of the event

f module:svgcanvas.EventHandler

The callback function to bind to the event

Source:
Returns:

The previous event

Type
module:svgcanvas.EventHandler

changeSelectedAttribute(attr, val, elems) → {void}

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

Parameters:
Name Type Description
attr string

String with the attribute name

val string | Float

String or number with the new attribute value

elems Array.<Element>

The DOM elements to apply the change to

Source:
Returns:
Type
void

changeSelectedAttribute(attr, val, elems) → {void}

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

Parameters:
Name Type Description
attr string

String with the attribute name

val string | Float

String or number with the new attribute value

elems Array.<Element>

The DOM elements to apply the change to

Source:
Returns:
Type
void

cleanupElement(element) → {void}

Remove unneeded (default) attributes, making resulting SVG smaller.

Parameters:
Name Type Description
element Element

DOM element to clean up

Source:
Returns:
Type
void

cleanupElement(element) → {void}

Remove unneeded (default) attributes, making resulting SVG smaller.

Parameters:
Name Type Description
element Element

DOM element to clean up

Source:
Returns:
Type
void

clear() → {void}

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

Source:
Fires:
Returns:
Type
void

clearSvgContentElement() → {void}

This function resets the svgcontent element while keeping it in the DOM.

Source:
Returns:
Type
void

cloneSelectedElements(x, y) → {void}

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

Parameters:
Name Type Description
x Float

Float with the distance to move on the x-axis

y Float

Float with the distance to move on the y-axis

Source:
Returns:
Type
void

convertGradients(elem) → {void}

Converts gradients from userSpaceOnUse to objectBoundingBox.

Parameters:
Name Type Description
elem Element
Source:
Returns:
Type
void

convertGradients(elem) → {void}

Converts gradients from userSpaceOnUse to objectBoundingBox.

Parameters:
Name Type Description
elem Element
Source:
Returns:
Type
void

convertToNum(attr, val) → {Float}

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

Parameters:
Name Type Description
attr string

Name of the attribute associated with the value

val string

Attribute value to convert

Source:
Returns:

The converted number

Type
Float

convertToNum(attr, val) → {Float}

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

Parameters:
Name Type Description
attr string

Name of the attribute associated with the value

val string

Attribute value to convert

Source:
Returns:

The converted number

Type
Float

convertToPath(elem, getBBox) → {void|DOMRect|false|SVGPathElement|null}

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

Parameters:
Name Type Description
elem Element

The DOM element to be converted

getBBox boolean

Boolean on whether or not to only return the path's BBox

Source:
To Do:
  • (codedread): Remove the getBBox argument and split this function into two.
Returns:

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

Type
void | DOMRect | false | SVGPathElement | null

copySelectedElements() → {void}

Remembers the current selected elements on the clipboard.

Source:
Returns:
Type
void

cutSelectedElements() → {void}

Removes all selected elements from the DOM and adds the change to the history stack. Remembers removed elements on the clipboard.

Source:
Returns:
Type
void

cycleElement(next) → {void}

Select the next/previous element within the current layer.

Parameters:
Name Type Description
next boolean

true = next and false = previous element

Source:
Fires:
Returns:
Type
void

cycleElement(next) → {void}

Select the next/previous element within the current layer.

Parameters:
Name Type Description
next boolean

true = next and false = previous element

Source:
Fires:
Returns:
Type
void

deleteSelectedElements() → {void}

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

Source:
Fires:
Returns:
Type
void

embedImage(src) → {Promise.<(string|false)>}

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

Parameters:
Name Type Description
src string

The path/URL of the image

Source:
Returns:

Resolves to a Data URL (string|false)

Type
Promise.<(string|false)>

embedImage(src) → {Promise.<(string|false)>}

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

Parameters:
Name Type Description
src string

The path/URL of the image

Source:
Returns:

Resolves to a Data URL (string|false)

Type
Promise.<(string|false)>

exportPDF(exportWindowNameopt, outputTypeopt) → {Promise.<module:svgcanvas.PDFExportedResults>}

Generates a PDF based on the current image, then calls "exportedPDF" with an object including the string, the data URL, and any issues found.

Parameters:
Name Type Attributes Default Description
exportWindowName string <optional>

Will also be used for the download file name here

outputType external:jsPDF.OutputType <optional>
"dataurlstring"
Source:
Fires:
Returns:
Type
Promise.<module:svgcanvas.PDFExportedResults>

exportPDF(exportWindowNameopt, outputTypeopt) → {Promise.<module:svgcanvas.PDFExportedResults>}

Generates a PDF based on the current image, then calls "exportedPDF" with an object including the string, the data URL, and any issues found.

Parameters:
Name Type Attributes Default Description
exportWindowName string <optional>

Will also be used for the download file name here

outputType external:jsPDF.OutputType <optional>
"dataurlstring"
Source:
Fires:
Returns:
Type
Promise.<module:svgcanvas.PDFExportedResults>

findDefs() → {SVGDefsElement}

Source:
Returns:

The document's <defs> element, creating it first if necessary

Type
SVGDefsElement

findDefs() → {SVGDefsElement}

Source:
Returns:

The document's <defs> element, creating it first if necessary

Type
SVGDefsElement

getBBox(elem) → {module:utilities.BBoxObject}

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

Parameters:
Name Type Description
elem Element

Optional DOM element to get the BBox for

Source:
Returns:

Bounding box object

Type
module:utilities.BBoxObject

getBBox(elem) → {module:utilities.BBoxObject}

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

Parameters:
Name Type Description
elem Element

Optional DOM element to get the BBox for

Source:
Returns:

Bounding box object

Type
module:utilities.BBoxObject

getBlur(elem) → {string}

Gets the stdDeviation blur value of the given element.

Parameters:
Name Type Description
elem Element

The element to check the blur value for

Source:
Returns:

stdDeviation blur attribute value

Type
string

getBold() → {boolean}

Check whether selected element is bold or not.

Source:
Returns:

Indicates whether or not element is bold

Type
boolean

getBold() → {boolean}

Check whether selected element is bold or not.

Source:
Returns:

Indicates whether or not element is bold

Type
boolean

getColor(type) → {string|module:svgcanvas.PaintOptions|Float|module:jGraduate~Paint}

Parameters:
Name Type Description
type string
Source:
Returns:

The current fill/stroke option

Type
string | module:svgcanvas.PaintOptions | Float | module:jGraduate~Paint

getContentElem(data) → {module:svgcanvas.SVGAsJSON}

Parameters:
Name Type Description
data Text | Element
Source:
Returns:
Type
module:svgcanvas.SVGAsJSON

getContentElem() → {Element}

Source:
Returns:

The content DOM element

Type
Element

getDocumentTitle() → {string|void}

Source:
Returns:

The current document title or an empty string if not found

Type
string | void

getEditorNS(addopt) → {string}

Returns the editor's namespace URL, optionally adding it to the root element.

Parameters:
Name Type Attributes Description
add boolean <optional>

Indicates whether or not to add the namespace value

Source:
Returns:

The editor's namespace URL

Type
string

getElem(id) → (nullable) {Element}

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

Parameters:
Name Type Description
id string

String with the element's new ID

Source:
Returns:
Type
Element

getElem(id) → (nullable) {Element}

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

Parameters:
Name Type Description
id string

String with the element's new ID

Source:
Returns:
Type
Element

getFillOpacity() → {Float}

Source:
Returns:

the current fill opacity

Type
Float

getFontColor() → {string}

Source:
Returns:

The current font color

Type
string

getFontColor() → {string}

Source:
Returns:

The current font color

Type
string

getFontFamily() → {string}

Source:
Returns:

The current font family

Type
string

getFontFamily() → {string}

Source:
Returns:

The current font family

Type
string

getFontSize() → {Float}

Source:
Returns:

The current font size

Type
Float

getFontSize() → {Float}

Source:
Returns:

The current font size

Type
Float

getHref(elem) → {string}

Parameters:
Name Type Description
elem Element
Source:
Returns:

The given element's xlink:href value

Type
string

getHref(elem) → {string}

Parameters:
Name Type Description
elem Element
Source:
Returns:

The given element's xlink:href value

Type
string

getIntersectionList(rect) → {Array.<Element>|NodeList}

This method sends back an array or a NodeList full of elements that intersect the multi-select rubber-band-box on the currentLayer only.

We brute-force getIntersectionList for browsers that do not support it (Firefox).

Reference: Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421.

Parameters:
Name Type Description
rect SVGRect
Source:
Returns:

Bbox elements

Type
Array.<Element> | NodeList

getIntersectionList(rect) → {Array.<Element>|NodeList}

This method sends back an array or a NodeList full of elements that intersect the multi-select rubber-band-box on the currentLayer only.

We brute-force getIntersectionList for browsers that do not support it (Firefox).

Reference: Firefox does not implement getIntersectionList(), see https://bugzilla.mozilla.org/show_bug.cgi?id=501421.

Parameters:
Name Type Description
rect SVGRect
Source:
Returns:

Bbox elements

Type
Array.<Element> | NodeList

getItalic() → {boolean}

Check whether selected element is in italics or not.

Source:
Returns:

Indicates whether or not element is italic

Type
boolean

getItalic() → {boolean}

Check whether selected element is in italics or not.

Source:
Returns:

Indicates whether or not element is italic

Type
boolean

getMode() → {string}

Source:
Returns:

The current editor mode string

Type
string

getOffset() → {module:svgcanvas.ElementPositionInCanvas}

Source:
Returns:

An object with x, y values indicating the svgcontent element's position in the editor's canvas.

Type
module:svgcanvas.ElementPositionInCanvas

getOpacity() → {Float}

Source:
Returns:

the current opacity

Type
Float

getPaintOpacity(type) → {Float}

Gets the current fill/stroke opacity.

Parameters:
Name Type Description
type "fill" | "stroke"

String with "fill" or "stroke"

Source:
Returns:

Fill/stroke opacity

Type
Float

getPrivateMethods() → {module:svgcanvas.PrivateMethods}

Deprecated:
  • getPrivateMethods Since all methods are/should be public somehow, this function should be removed; we might require `import` in place of this in the future once ES6 Modules widespread Being able to access private methods publicly seems wrong somehow, but currently appears to be the best way to allow testing and provide access to them to plugins.
Source:
Returns:
Type
module:svgcanvas.PrivateMethods

getRefElem(attrVal) → {Element}

Get the reference element associated with the given attribute value.

Parameters:
Name Type Description
attrVal string

The attribute value as a string

Source:
Returns:

Reference element

Type
Element

getRefElem(attrVal) → {Element}

Get the reference element associated with the given attribute value.

Parameters:
Name Type Description
attrVal string

The attribute value as a string

Source:
Returns:

Reference element

Type
Element

getResolution() → {DimensionsAndZoom}

Source:
Returns:

The current dimensions and zoom level in an object

Type
DimensionsAndZoom

getRootElem() → {SVGSVGElement}

Source:
Returns:

The root DOM element

Type
SVGSVGElement

getRotationAngle(elemopt, toRadopt) → {Float}

Get the rotation angle of the given/selected DOM element.

Parameters:
Name Type Attributes Default Description
elem Element <optional>

DOM element to get the angle for. Default to first of selected elements.

toRad boolean <optional>
false

When true returns the value in radians rather than degrees

Source:
Returns:

The angle in degrees or radians

Type
Float

getRotationAngle(elemopt, toRadopt) → {Float}

Get the rotation angle of the given/selected DOM element.

Parameters:
Name Type Attributes Default Description
elem Element <optional>

DOM element to get the angle for. Default to first of selected elements.

toRad boolean <optional>
false

When true returns the value in radians rather than degrees

Source:
Returns:

The angle in degrees or radians

Type
Float

getSnapToGrid() → {boolean}

Source:
Returns:

The current snap to grid setting

Type
boolean

getStrokedBBox(elems) → {module:utilities.BBoxObject}

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

Parameters:
Name Type Description
elems Array.<Element>

Array with DOM elements to check

Source:
Returns:

A single bounding box object

Type
module:utilities.BBoxObject

getStrokedBBox(elems) → {module:utilities.BBoxObject}

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

Parameters:
Name Type Description
elems Array.<Element>

Array with DOM elements to check

Source:
Returns:

A single bounding box object

Type
module:utilities.BBoxObject

getStrokeOpacity() → {string}

Source:
Returns:

the current stroke opacity

Type
string

getStrokeWidth() → {Float|string}

Source:
Returns:

The current stroke-width value

Type
Float | string

getStyle() → {module:svgcanvas.StyleOptions}

Source:
Returns:

current style options

Type
module:svgcanvas.StyleOptions

getSvgOption()

Group: Serialization.

Source:

getSvgString() → {string}

Returns the current drawing as raw SVG XML text.

Source:
Returns:

The current drawing as raw SVG XML text.

Type
string

getText() → {string}

Source:
Returns:

The current text (textContent) of the selected element

Type
string

getText() → {string}

Source:
Returns:

The current text (textContent) of the selected element

Type
string

getTitle(elemopt) → {string|void}

Parameters:
Name Type Attributes Description
elem Element <optional>
Source:
Returns:

the current group/SVG's title contents or undefined if no element is passed nd there are no selected elements.

Type
string | void

getUrlFromAttr(attrVal) → {string}

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

  • <circle fill="url(someFile.svg#foo)" />
  • <circle fill="url('someFile.svg#foo')" />
  • <circle fill='url("someFile.svg#foo")' />
Parameters:
Name Type Description
attrVal string

The attribute value as a string

Source:
Returns:

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

Type
string

getUrlFromAttr(attrVal) → {string}

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

  • <circle fill="url(someFile.svg#foo)" />
  • <circle fill="url('someFile.svg#foo')" />
  • <circle fill='url("someFile.svg#foo")' />
Parameters:
Name Type Description
attrVal string

The attribute value as a string

Source:
Returns:

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

Type
string

getVersion() → {string}

Source:
Returns:

A string which describes the revision number of SvgCanvas.

Type
string

getVisibleElements(parentElement) → {Array.<Element>}

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

Parameters:
Name Type Description
parentElement Element

The parent DOM element to search within

Source:
Returns:

All "visible" elements.

Type
Array.<Element>

getVisibleElements(parentElement) → {Array.<Element>}

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

Parameters:
Name Type Description
parentElement Element

The parent DOM element to search within

Source:
Returns:

All "visible" elements.

Type
Array.<Element>

getVisibleElementsAndBBoxes(parent) → {Array.<ElementAndBBox>}

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

Parameters:
Name Type Description
parent Element

The parent DOM element to search within

Source:
Returns:

An array with objects that include:

Type
Array.<ElementAndBBox>

groupSelectedElements(typeopt, urlArgopt) → {void}

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

Parameters:
Name Type Attributes Default Description
type "a" | "g" <optional>
"g"

type of element to group into, defaults to <g>

urlArg string <optional>
Source:
Returns:
Type
void

groupSvgElem(elem) → {void}

Wrap an SVG element into a group element, mark the group as 'gsvg'.

Parameters:
Name Type Description
elem Element

SVG element to wrap

Source:
Returns:
Type
void

groupSvgElem(elem) → {void}

Wrap an SVG element into a group element, mark the group as 'gsvg'.

Parameters:
Name Type Description
elem Element

SVG element to wrap

Source:
Returns:
Type
void

hasMatrixTransform(tlistopt) → {boolean}

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

Parameters:
Name Type Attributes Description
tlist SVGTransformList <optional>

The transformlist to check

Source:
Returns:

Whether or not a matrix transform was found

Type
boolean

hasMatrixTransform(tlistopt) → {boolean}

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

Parameters:
Name Type Attributes Description
tlist SVGTransformList <optional>

The transformlist to check

Source:
Returns:

Whether or not a matrix transform was found

Type
boolean

importSvgString(xmlString) → {null|Element}

This function imports the input SVG XML as a <symbol> in the <defs>, then adds a <use> to the current layer.

Parameters:
Name Type Description
xmlString string

The SVG as XML text.

Source:
To Do:
  • - properly handle if namespace is introduced by imported content (must add to svgcontent and update all prefixes in the imported node) - properly handle recalculating dimensions, `recalculateDimensions()` doesn't handle arbitrary transform lists, but makes some assumptions about how the transform list was obtained
Fires:
Returns:

This function returns null if the import was unsuccessful, or the element otherwise.

Type
null | Element

importSvgString(xmlString) → {null|Element}

This function imports the input SVG XML as a <symbol> in the <defs>, then adds a <use> to the current layer.

Parameters:
Name Type Description
xmlString string

The SVG as XML text.

Source:
To Do:
  • - properly handle if namespace is introduced by imported content (must add to svgcontent and update all prefixes in the imported node) - properly handle recalculating dimensions, `recalculateDimensions()` doesn't handle arbitrary transform lists, but makes some assumptions about how the transform list was obtained
Fires:
Returns:

This function returns null if the import was unsuccessful, or the element otherwise.

Type
null | Element

linkControlPoints(linkPoints) → {void}

Parameters:
Name Type Description
linkPoints boolean
Source:
Returns:
Type
void

linkControlPoints(linkPoints) → {void}

Parameters:
Name Type Description
linkPoints boolean
Source:
Returns:
Type
void

Wraps the selected element(s) in an anchor element or converts group to one.

Parameters:
Name Type Description
url string
Source:
Returns:
Type
void

Wraps the selected element(s) in an anchor element or converts group to one.

Parameters:
Name Type Description
url string
Source:
Returns:
Type
void

matrixMultiply(…args) → {SVGMatrix}

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

Parameters:
Name Type Attributes Description
args SVGMatrix <repeatable>

Matrix objects to multiply

Source:
Returns:

The matrix object resulting from the calculation

Type
SVGMatrix

matrixMultiply(…args) → {SVGMatrix}

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

Parameters:
Name Type Attributes Description
args SVGMatrix <repeatable>

Matrix objects to multiply

Source:
Returns:

The matrix object resulting from the calculation

Type
SVGMatrix

moveSelectedElements(dx, dy, undoable) → {BatchCommand|void}

Moves selected elements on the X/Y axis.

Parameters:
Name Type Description
dx Float

Float with the distance to move on the x-axis

dy Float

Float with the distance to move on the y-axis

undoable boolean

Boolean indicating whether or not the action should be undoable

Source:
Fires:
Returns:

Batch command for the move

Type
BatchCommand | void

moveToBottomSelectedElement() → {void}

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

Source:
Fires:
Returns:
Type
void

moveToTopSelectedElement() → {void}

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

Source:
Fires:
Returns:
Type
void

moveUpDownSelected(dir) → {void}

Moves the select element up or down the stack, based on the visibly intersecting elements.

Parameters:
Name Type Description
dir "Up" | "Down"

String that's either 'Up' or 'Down'

Source:
Fires:
Returns:
Type
void

pasteElements(type, x, y) → {void}

Parameters:
Name Type Description
type "in_place" | "point" | void
x Integer | void

Expected if type is "point"

y Integer | void

Expected if type is "point"

Source:
Fires:
Returns:
Type
void

pasteElements(type, x, y) → {void}

Parameters:
Name Type Description
type "in_place" | "point" | void
x Integer | void

Expected if type is "point"

y Integer | void

Expected if type is "point"

Source:
Fires:
Returns:
Type
void

prepareSvg(newDoc) → {void}

Runs the SVG Document through the sanitizer and then updates its paths.

Parameters:
Name Type Description
newDoc XMLDocument

The SVG DOM document

Source:
Returns:
Type
void

prepareSvg(newDoc) → {void}

Runs the SVG Document through the sanitizer and then updates its paths.

Parameters:
Name Type Description
newDoc XMLDocument

The SVG DOM document

Source:
Returns:
Type
void

pushGroupProperties(g, undoable) → {BatchCommand|void}

Pushes all appropriate parent group properties down to its children, then removes them from the group.

Parameters:
Name Type Description
g SVGAElement | SVGGElement
undoable boolean
Source:
Returns:
Type
BatchCommand | void

randomizeIds(enableRandomizationopt) → {void}

This function determines whether to use a nonce in the prefix, when generating IDs for future documents in SVG-Edit. If you're controlling SVG-Edit externally, and want randomized IDs, call this BEFORE calling svgCanvas.setSvgString.

Parameters:
Name Type Attributes Description
enableRandomization boolean <optional>

If true, adds a nonce to the prefix. Thus svgCanvas.randomizeIds() <==> svgCanvas.randomizeIds(true)

Source:
Returns:
Type
void

rasterExport(imgTypeopt, qualityopt, exportWindowNameopt, optsopt) → {Promise.<module:svgcanvas.ImageExportedResults>}

Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image, then calls "exported" with an object including the string, image information, and any issues found.

Parameters:
Name Type Attributes Default Description
imgType "PNG" | "JPEG" | "BMP" | "WEBP" | "ICO" <optional>
"PNG"
quality Float <optional>

Between 0 and 1

exportWindowName string <optional>
opts PlainObject <optional>
Properties
Name Type Attributes Description
avoidEvent boolean <optional>
Source:
To Do:
  • Confirm/fix ICO type
Fires:
Returns:
Type
Promise.<module:svgcanvas.ImageExportedResults>

rasterExport(imgTypeopt, qualityopt, exportWindowNameopt, optsopt) → {Promise.<module:svgcanvas.ImageExportedResults>}

Generates a PNG (or JPG, BMP, WEBP) Data URL based on the current image, then calls "exported" with an object including the string, image information, and any issues found.

Parameters:
Name Type Attributes Default Description
imgType "PNG" | "JPEG" | "BMP" | "WEBP" | "ICO" <optional>
"PNG"
quality Float <optional>

Between 0 and 1

exportWindowName string <optional>
opts PlainObject <optional>
Properties
Name Type Attributes Description
avoidEvent boolean <optional>
Source:
To Do:
  • Confirm/fix ICO type
Fires:
Returns:
Type
Promise.<module:svgcanvas.ImageExportedResults>

recalculateAllSelectedDimensions() → {void}

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

Source:
Fires:
Returns:
Type
void

recalculateAllSelectedDimensions() → {void}

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

Source:
Fires:
Returns:
Type
void

recalculateDimensions(selected) → {Command}

Decides the course of action based on the element's transform list.

Parameters:
Name Type Description
selected Element

The DOM element to recalculate

Source:
Returns:

Undo command object with the resulting change

Type
Command

recalculateDimensions(selected) → {Command}

Decides the course of action based on the element's transform list.

Parameters:
Name Type Description
selected Element

The DOM element to recalculate

Source:
Returns:

Undo command object with the resulting change

Type
Command

removeFromSelection(elemsToRemove) → {void}

Removes elements from the selection.

Parameters:
Name Type Description
elemsToRemove Array.<Element>

An array of elements to remove from selection

Source:
Returns:
Type
void
Source:
Returns:
Type
void
Source:
Returns:
Type
void

removeUnusedDefElems() → {Integer}

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

Source:
Returns:

The number of elements that were removed

Type
Integer

removeUnusedDefElems() → {Integer}

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

Source:
Returns:

The number of elements that were removed

Type
Integer

runExtensions(action, varsopt, returnArrayopt, nameFilter) → {GenericArray.<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false}

Parameters:
Name Type Attributes Description
action "mouseDown" | "mouseMove" | "mouseUp" | "zoomChanged" | "IDsUpdated" | "canvasUpdated" | "toolButtonStateUpdate" | "selectedChanged" | "elementTransition" | "elementChanged" | "langReady" | "langChanged" | "addLangData" | "onNewDocument" | "workareaResized"
vars module:svgcanvas.SvgCanvas#event:ext_mouseDown | module:svgcanvas.SvgCanvas#event:ext_mouseMove | module:svgcanvas.SvgCanvas#event:ext_mouseUp | module:svgcanvas.SvgCanvas#event:ext_zoomChanged | module:svgcanvas.SvgCanvas#event:ext_IDsUpdated | module:svgcanvas.SvgCanvas#event:ext_canvasUpdated | module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate | module:svgcanvas.SvgCanvas#event:ext_selectedChanged | module:svgcanvas.SvgCanvas#event:ext_elementTransition | module:svgcanvas.SvgCanvas#event:ext_elementChanged | module:svgcanvas.SvgCanvas#event:ext_langReady | module:svgcanvas.SvgCanvas#event:ext_langChanged | module:svgcanvas.SvgCanvas#event:ext_addLangData | module:svgcanvas.SvgCanvas#event:ext_onNewDocument | module:svgcanvas.SvgCanvas#event:ext_workareaResized | module:svgcanvas.ExtensionVarBuilder <optional>
returnArray boolean <optional>
nameFilter module:svgcanvas.ExtensionNameFilter
Source:
To Do:
  • Consider: Should this return an array by default, so extension results aren't overwritten?
  • Would be easier to document if passing in object with key of action and vars as value; could then define an interface which tied both together
Returns:

See Extension Docs on the ExtensionStatus.

Type
GenericArray.<module:svgcanvas.ExtensionStatus> | module:svgcanvas.ExtensionStatus | false

runExtensions(action, varsopt, returnArrayopt, nameFilter) → {GenericArray.<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false}

Parameters:
Name Type Attributes Description
action "mouseDown" | "mouseMove" | "mouseUp" | "zoomChanged" | "IDsUpdated" | "canvasUpdated" | "toolButtonStateUpdate" | "selectedChanged" | "elementTransition" | "elementChanged" | "langReady" | "langChanged" | "addLangData" | "onNewDocument" | "workareaResized"
vars module:svgcanvas.SvgCanvas#event:ext_mouseDown | module:svgcanvas.SvgCanvas#event:ext_mouseMove | module:svgcanvas.SvgCanvas#event:ext_mouseUp | module:svgcanvas.SvgCanvas#event:ext_zoomChanged | module:svgcanvas.SvgCanvas#event:ext_IDsUpdated | module:svgcanvas.SvgCanvas#event:ext_canvasUpdated | module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate | module:svgcanvas.SvgCanvas#event:ext_selectedChanged | module:svgcanvas.SvgCanvas#event:ext_elementTransition | module:svgcanvas.SvgCanvas#event:ext_elementChanged | module:svgcanvas.SvgCanvas#event:ext_langReady | module:svgcanvas.SvgCanvas#event:ext_langChanged | module:svgcanvas.SvgCanvas#event:ext_addLangData | module:svgcanvas.SvgCanvas#event:ext_onNewDocument | module:svgcanvas.SvgCanvas#event:ext_workareaResized | module:svgcanvas.ExtensionVarBuilder <optional>
returnArray boolean <optional>
nameFilter module:svgcanvas.ExtensionNameFilter
Source:
To Do:
  • Consider: Should this return an array by default, so extension results aren't overwritten?
  • Would be easier to document if passing in object with key of action and vars as value; could then define an interface which tied both together
Returns:

See Extension Docs on the ExtensionStatus.

Type
GenericArray.<module:svgcanvas.ExtensionStatus> | module:svgcanvas.ExtensionStatus | false

sanitizeSvg(node) → {void}

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

Parameters:
Name Type Description
node Text | Element

The DOM element to be checked (we'll also check its children) or text node to be cleaned up

Source:
Returns:
Type
void

sanitizeSvg(node) → {void}

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

Parameters:
Name Type Description
node Text | Element

The DOM element to be checked (we'll also check its children) or text node to be cleaned up

Source:
Returns:
Type
void

selectAllInCurrentLayer() → {void}

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

Source:
Returns:
Type
void

selectOnly(elems, showGrips) → {void}

Selects only the given elements, shortcut for clearSelection(); addToSelection().

Parameters:
Name Type Description
elems Array.<Element>

an array of DOM elements to be selected

showGrips boolean

Indicates whether the resize grips should be shown

Source:
Returns:
Type
void

setBackground(color, url) → {void}

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

Parameters:
Name Type Description
color string

String with fill color to apply

url string

URL or path to image to use

Source:
Returns:
Type
void

setBackground(color, url) → {void}

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

Parameters:
Name Type Description
color string

String with fill color to apply

url string

URL or path to image to use

Source:
Returns:
Type
void

setBBoxZoom(val, editorW, editorH) → {module:svgcanvas.ZoomAndBBox|void}

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

Parameters:
Name Type Description
val "selection" | "canvas" | "content" | "layer" | module:SVGEditor.BBoxObjectWithFactor

Bounding box object to zoom to or string indicating zoom option. Note: the object value type is defined in svg-editor.js

editorW Integer

The editor's workarea box's width

editorH Integer

The editor's workarea box's height

Source:
Returns:
Type
module:svgcanvas.ZoomAndBBox | void

setBlur(val, complete) → {void}

Adds/updates the blur filter to the selected element.

Parameters:
Name Type Description
val Float

Float with the new stdDeviation blur value

complete boolean

Whether or not the action should be completed (to add to the undo manager)

Source:
Returns:
Type
void

setBlur(val, complete) → {void}

Adds/updates the blur filter to the selected element.

Parameters:
Name Type Description
val Float

Float with the new stdDeviation blur value

complete boolean

Whether or not the action should be completed (to add to the undo manager)

Source:
Returns:
Type
void

setBlurNoUndo(val) → {void}

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

Parameters:
Name Type Description
val Float

The new stdDeviation value

Source:
Returns:
Type
void

setBlurNoUndo(val) → {void}

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

Parameters:
Name Type Description
val Float

The new stdDeviation value

Source:
Returns:
Type
void

setBlurOffsets(filterElem, stdDev) → {void}

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

Parameters:
Name Type Description
filterElem Element

The filter DOM element to update

stdDev Float

The standard deviation value on which to base the offset size

Source:
Returns:
Type
void

setBlurOffsets(filterElem, stdDev) → {void}

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

Parameters:
Name Type Description
filterElem Element

The filter DOM element to update

stdDev Float

The standard deviation value on which to base the offset size

Source:
Returns:
Type
void

setBold(b) → {void}

Make the selected element bold or normal.

Parameters:
Name Type Description
b boolean

Indicates bold (true) or normal (false)

Source:
Returns:
Type
void

setBold(b) → {void}

Make the selected element bold or normal.

Parameters:
Name Type Description
b boolean

Indicates bold (true) or normal (false)

Source:
Returns:
Type
void

setColor(type, val, preventUndo) → {void}

Change the current stroke/fill color/gradient value.

Parameters:
Name Type Description
type string

String indicating fill or stroke

val string

The value to set the stroke attribute to

preventUndo boolean

Boolean indicating whether or not this should be an undoable option

Source:
Fires:
Returns:
Type
void

setConfig(opts) → {void}

Update configuration options with given values.

Parameters:
Name Type Description
opts module:SVGEditor.Config

Object with options

Source:
Returns:
Type
void

setDocumentTitle(newTitle) → {void}

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

Parameters:
Name Type Description
newTitle string

String with the new title

Source:
Returns:
Type
void

setFillPaint(paint) → {void}

Parameters:
Name Type Description
paint module:jGraduate~Paint
Source:
Returns:
Type
void

setFontColor(val) → {void}

Set the new font color.

Parameters:
Name Type Description
val string

String with the new font color

Source:
Returns:
Type
void

setFontColor(val) → {void}

Set the new font color.

Parameters:
Name Type Description
val string

String with the new font color

Source:
Returns:
Type
void

setFontFamily(val) → {void}

Set the new font family.

Parameters:
Name Type Description
val string

String with the new font family

Source:
Returns:
Type
void

setFontFamily(val) → {void}

Set the new font family.

Parameters:
Name Type Description
val string

String with the new font family

Source:
Returns:
Type
void

setFontSize(val) → {void}

Applies the given font size to the selected element.

Parameters:
Name Type Description
val Float

Float with the new font size

Source:
Returns:
Type
void

setFontSize(val) → {void}

Applies the given font size to the selected element.

Parameters:
Name Type Description
val Float

Float with the new font size

Source:
Returns:
Type
void

setGoodImage(val) → {void}

Sets a given URL to be a "last good image" URL.

Parameters:
Name Type Description
val string
Source:
Returns:
Type
void

setGradient(type) → {void}

Apply the current gradient to selected element's fill or stroke.

Parameters:
Name Type Description
type "fill" | "stroke"

String indicating "fill" or "stroke" to apply to an element

Source:
Returns:
Type
void

setGroupTitle(val) → {void}

Sets the group/SVG's title content.

Parameters:
Name Type Description
val string
Source:
To Do:
  • Combine this with `setDocumentTitle`
Returns:
Type
void

setHref(elem, val) → {void}

Sets the given element's xlink:href value.

Parameters:
Name Type Description
elem Element
val string
Source:
Returns:
Type
void

setHref(elem, val) → {void}

Sets the given element's xlink:href value.

Parameters:
Name Type Description
elem Element
val string
Source:
Returns:
Type
void

setIdPrefix(p) → {void}

Changes the ID prefix to the given value.

Parameters:
Name Type Description
p string

String with the new prefix

Source:
Returns:
Type
void

setImageURL(val) → {void}

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

Parameters:
Name Type Description
val string

String with the image URL/path

Source:
Fires:
Returns:
Type
void

setImageURL(val) → {void}

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

Parameters:
Name Type Description
val string

String with the image URL/path

Source:
Fires:
Returns:
Type
void

setItalic(i) → {void}

Make the selected element italic or normal.

Parameters:
Name Type Description
i boolean

Indicates italic (true) or normal (false)

Source:
Returns:
Type
void

setItalic(i) → {void}

Make the selected element italic or normal.

Parameters:
Name Type Description
i boolean

Indicates italic (true) or normal (false)

Source:
Returns:
Type
void

setLinkURL(val) → {void}

Sets the new link URL for the selected anchor element.

Parameters:
Name Type Description
val string

String with the link URL/path

Source:
Returns:
Type
void

setLinkURL(val) → {void}

Sets the new link URL for the selected anchor element.

Parameters:
Name Type Description
val string

String with the link URL/path

Source:
Returns:
Type
void

setMode(name) → {void}

Sets the editor's mode to the given string.

Parameters:
Name Type Description
name string

String with the new mode to change to

Source:
Returns:
Type
void

setOpacity(val) → {void}

Sets the given opacity on the current selected elements.

Parameters:
Name Type Description
val string
Source:
Returns:
Type
void

setPaint(type, paint) → {void}

Set a color/gradient to a fill/stroke.

Parameters:
Name Type Description
type "fill" | "stroke"

String with "fill" or "stroke"

paint module:jGraduate.jGraduatePaintOptions

The jGraduate paint object to apply

Source:
Returns:
Type
void

setPaintOpacity(type, val, preventUndo) → {void}

Sets the current fill/stroke opacity.

Parameters:
Name Type Description
type string

String with "fill" or "stroke"

val Float

Float with the new opacity value

preventUndo boolean

Indicates whether or not this should be an undoable action

Source:
Returns:
Type
void

setRectRadius(val) → {void}

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

Parameters:
Name Type Description
val string | Float

The new radius

Source:
Fires:
Returns:
Type
void

setRectRadius(val) → {void}

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

Parameters:
Name Type Description
val string | Float

The new radius

Source:
Fires:
Returns:
Type
void

setResolution(x, y) → {boolean}

Changes the document's dimensions to the given size.

Parameters:
Name Type Description
x Float | "fit"

Number with the width of the new dimensions in user units. Can also be the string "fit" to indicate "fit to content".

y Float

Number with the height of the new dimensions in user units.

Source:
Fires:
Returns:

Indicates if resolution change was successful. It will fail on "fit to content" option with no content to fit to.

Type
boolean

setRotationAngle(val, preventUndo) → {void}

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

Parameters:
Name Type Description
val string | Float

The new rotation angle in degrees

preventUndo boolean

Indicates whether the action should be undoable or not

Source:
Fires:
Returns:
Type
void

setRotationAngle(val, preventUndo) → {void}

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

Parameters:
Name Type Description
val string | Float

The new rotation angle in degrees

preventUndo boolean

Indicates whether the action should be undoable or not

Source:
Fires:
Returns:
Type
void

setSegType(newType) → {void}

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

Parameters:
Name Type Description
newType Integer

New segment type. See https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list

Source:
Returns:
Type
void

setSegType(newType) → {void}

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

Parameters:
Name Type Description
newType Integer

New segment type. See https://www.w3.org/TR/SVG/paths.html#InterfaceSVGPathSeg for list

Source:
Returns:
Type
void

setStrokeAttr(attr, val) → {void}

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

Parameters:
Name Type Description
attr string

String with the attribute name

val string | Float

String or number with the attribute value

Source:
Fires:
Returns:
Type
void

setStrokePaint(paint) → {void}

Parameters:
Name Type Description
paint module:jGraduate~Paint
Source:
Returns:
Type
void

setStrokeWidth(val) → {void}

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

Parameters:
Name Type Description
val Float

A Float indicating the new stroke width value

Source:
Fires:
Returns:
Type
void

setSvgString(xmlString, preventUndoopt) → {boolean}

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

Parameters:
Name Type Attributes Default Description
xmlString string

The SVG as XML text.

preventUndo boolean <optional>
false

Indicates if we want to do the changes without adding them to the undo stack - e.g. for initializing a drawing on page load.

Source:
Fires:
Returns:

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

Type
boolean

setSvgString(xmlString, preventUndoopt) → {boolean}

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

Parameters:
Name Type Attributes Default Description
xmlString string

The SVG as XML text.

preventUndo boolean <optional>
false

Indicates if we want to do the changes without adding them to the undo stack - e.g. for initializing a drawing on page load.

Source:
Fires:
Returns:

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

Type
boolean

setTextAnchor(textAnchor) → {void}

Set the new text anchor.

Parameters:
Name Type Description
textAnchor string

The value of the text anchor (start, middle or end)

Source:
Returns:
Type
void

setTextAnchorMethod Set the new text anchor(value) → {void}

Parameters:
Name Type Description
value string

The text anchor value (start, middle or end)

Source:
Returns:
Type
void

setTextContent(val) → {void}

Updates the text element with the given string.

Parameters:
Name Type Description
val string

String with the new text

Source:
Returns:
Type
void

setTextContent(val) → {void}

Updates the text element with the given string.

Parameters:
Name Type Description
val string

String with the new text

Source:
Returns:
Type
void

setUiStrings(strs) → {void}

Update interface strings with given values.

Parameters:
Name Type Description
strs module:path.uiStrings

Object with strings (see the locales API and the tutorial)

Source:
Returns:
Type
void

setUseData(parent) → {void}

Assigns reference data for each use element.

Parameters:
Name Type Description
parent Element
Source:
Returns:
Type
void

setUseData(parent) → {void}

Assigns reference data for each use element.

Parameters:
Name Type Description
parent Element
Source:
Returns:
Type
void

setZoom(zoomLevel) → {void}

Sets the zoom to the given level.

Parameters:
Name Type Description
zoomLevel Float

Float indicating the zoom level to change to

Source:
Fires:
Returns:
Type
void

svgCanvasToString() → {string}

Main function to set up the SVG content for output.

Source:
Returns:

The SVG image for output

Type
string

svgCanvasToString() → {string}

Main function to set up the SVG content for output.

Source:
Returns:

The SVG image for output

Type
string

svgToString(elem, indent) → {string}

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

Parameters:
Name Type Description
elem Element

The SVG element to convert

indent Integer

Number of spaces to indent this tag

Source:
Returns:

The given element as an SVG tag

Type
string

svgToString(elem, indent) → {string}

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

Parameters:
Name Type Description
elem Element

The SVG element to convert

indent Integer

Number of spaces to indent this tag

Source:
Returns:

The given element as an SVG tag

Type
string

transformListToTransform(tlist, minopt, maxopt) → {SVGTransform}

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

Parameters:
Name Type Attributes Default Description
tlist SVGTransformList

The transformlist object

min Integer <optional>
0

Optional integer indicating start transform position

max Integer <optional>

Optional integer indicating end transform position; defaults to one less than the tlist's numberOfItems

Source:
Returns:

A single matrix transform object

Type
SVGTransform

transformListToTransform(tlist, minopt, maxopt) → {SVGTransform}

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

Parameters:
Name Type Attributes Default Description
tlist SVGTransformList

The transformlist object

min Integer <optional>
0

Optional integer indicating start transform position

max Integer <optional>

Optional integer indicating end transform position; defaults to one less than the tlist's numberOfItems

Source:
Returns:

A single matrix transform object

Type
SVGTransform

ungroupSelectedElement() → {void}

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

Source:
Returns:
Type
void

uniquifyElems(g) → {void}

Ensure each element has a unique ID.

Parameters:
Name Type Description
g Element

The parent element of the tree to give unique IDs

Source:
Returns:
Type
void

uniquifyElems(g) → {void}

Ensure each element has a unique ID.

Parameters:
Name Type Description
g Element

The parent element of the tree to give unique IDs

Source:
Returns:
Type
void

updateCanvas(w, h) → {module:svgcanvas.CanvasInfo}

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

Parameters:
Name Type Description
w Float

Float with the new width

h Float

Float with the new height

Source:
Fires:
Returns:
Type
module:svgcanvas.CanvasInfo

updateCanvas(w, h) → {module:svgcanvas.CanvasInfo}

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

Parameters:
Name Type Description
w Float

Float with the new width

h Float

Float with the new height

Source:
Fires:
Returns:
Type
module:svgcanvas.CanvasInfo

zoomChanged(win, bbox, autoCenter) → {void}

Parameters:
Name Type Description
win external:Window
bbox module:svgcanvas.SvgCanvas#event:zoomed
autoCenter boolean
Source:
Listens to Events:
Returns:
Type
void

Events

event:changed

Array of what was changed (elements, layers).

Type:
  • Array.<Element>
Source:
Listeners of This Event:

event:cleared

Type:
  • void
Source:

event:contextset

The Element is always SVGGElement? If not null, will be the set current group element.

Type:
  • null | Element
Source:
Listeners of This Event:

event:exported

Type:
Source:
Listeners of This Event:

event:exportedPDF

Type:
Source:
Listeners of This Event:

event:ext_addLangData

Means for an extension to add locale data. The two-letter language code.

Type:
Properties:
Name Type Description
lang string
importLocale module:SVGEditor~ImportLocale
Source:

event:ext_callback

Called upon addition of the extension, or, if svgicons are set, after the icons are ready when extension SVG icons have loaded.

Type:
  • void
Source:

event:ext_canvasUpdated

Invoked upon updates to the canvas.

Type:
Properties:
Name Type Description
new_x Integer
new_y Integer
old_x string

(Of Integer)

old_y string

(Of Integer)

d_x Integer
d_y Integer
Source:

event:ext_elementChanged

One or more elements were changed.

Type:
Properties:
Name Type Description
elems Array.<Element>

Array of the affected elements

Source:

event:ext_elementTransition

Called when part of element is in process of changing, generally on mousemove actions like rotate, move, etc.

Type:
Properties:
Name Type Description
elems Array.<Element>

Array of transitioning elements

Source:

event:ext_IDsUpdated

Triggered when pasteElements is called from a paste action (context menu or key).

Type:
Properties:
Name Type Description
elems Array.<module:svgcanvas.SVGAsJSON>
changes module:svgcanvas.ChangedIDs

Maps past ID (on attribute) to current ID

Source:

event:ext_langChanged

The language was changed. Two-letter code of the new language.

Type:
  • string
Source:

event:ext_langReady

Invoked as soon as the locale is ready.

Type:
Properties:
Name Type Description
lang string

The two-letter language code

uiStrings module:SVGEditor.uiStrings
importLocale module:SVGEditor~ImportLocale
Source:

event:ext_mouseDown

The main (left) mouse button is held down on the canvas area.

Type:
Properties:
Name Type Description
event MouseEvent

The event object

start_x Float

x coordinate on canvas

start_y Float

y coordinate on canvas

selectedElements Array.<Element>

An array of the selected Elements

Source:

event:ext_mouseMove

The mouse has moved on the canvas area.

Type:
Properties:
Name Type Description
event MouseEvent

The event object

mouse_x Float

x coordinate on canvas

mouse_y Float

y coordinate on canvas

selected Element

Refers to the first selected element

Source:

event:ext_mouseUp

The main (left) mouse button is released (anywhere).

Type:
Properties:
Name Type Description
event MouseEvent

The event object

mouse_x Float

x coordinate on canvas

mouse_y Float

y coordinate on canvas

Source:

event:ext_onNewDocument

Called when new image is created.

Type:
  • void
Source:

event:ext_selectedChanged

The element selection has changed (elements were added/removed from selection).

Type:
Properties:
Name Type Description
elems Array.<Element>

Array of the newly selected elements

selectedElement Element | null

The single selected element

multiselected boolean

Indicates whether one or more elements were selected

Source:

event:ext_toolButtonStateUpdate

The bottom panel was updated.

Type:
Properties:
Name Type Description
nofill boolean

Indicates fill is disabled

nostroke boolean

Indicates stroke is disabled

Source:

event:ext_workareaResized

Called when sidepanel is resized or toggled.

Type:
  • void
Source:

event:ext_zoomChanged

The zoom level has changed. Supplies the new zoom level as a number (not percentage).

Type:
Source:

event:extension_added

Generalized extension object response of init() along with the name of the extension.

Type:
Source:
Listeners of This Event:

event:extensions_added

Type:
  • void
Source:

event:GenericCanvasEvent

Creating a cover-all class until https://github.com/jsdoc3/jsdoc/issues/1545 may be supported. undefined may be returned by module:svgcanvas.SvgCanvas#event:extension_added if the extension's init returns undefined It is also the type for the following events "zoomDone", "unsetnonce", "cleared", and "extensions_added".

Type:
Source:
Listeners of This Event:

event:message

Type:
Source:

event:pointsAdded

Type:
Properties:
Name Type Description
closedSubpath boolean
grips Array.<SVGCircleElement>

Grips elements

Source:

event:saved

SVG canvas converted to string.

Type:
  • string
Source:
Listeners of This Event:

event:selected

Array of selected elements.

Type:
  • Array.<Element>
Source:
Listeners of This Event:

event:setnonce

Type:
Source:

event:transition

Array of selected elements.

Type:
  • Array.<Element>
Source:
Listeners of This Event:

event:unsetnonce

Type:
  • void
Source:

event:updateCanvas

Type:
Properties:
Name Type Description
center false
newCtr module:math.XYObject
Source:

event:zoomDone

Type:
  • void
Source:

event:zoomed

Type:
Properties:
Name Type Description
x Float
y Float
width Float
height Float
factor 0.5 | 2
Source:
See:
  • module:SVGEditor.BBoxObjectWithFactor
Listeners of This Event: