github/svgedit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- npm: Alphabetize scripts

Browse Source 
- JSDoc: Exclude svgedit config files
- JSDoc: Convert remaining items in old format to JSDoc (as could easily be found)
This commit is contained in:
Brett Zamir
2018-05-29 20:31:24 +08:00
parent fb413a8e9f
commit dc79fe7fde
14 changed files with 804 additions and 825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
editor/draw.js
View File

@@ -674,7 +674,9 @@ export const randomizeIds = function (enableRandomization, currentDrawing) {
// Layer API Functions
// Group: Layers
/**
* Group: Layers
*/
let canvas_;
export const init = function (canvas) {

15
editor/extensions/ext-foreignobject.js
View File

@@ -45,15 +45,12 @@ svgEditor.addExtension('foreignObject', function (S) {
newFO,
editingforeign = false;
// Function: setForeignString(xmlString, elt)
// This function sets the content of element elt to the input XML.
//
// Parameters:
// xmlString - The XML text.
// elt - the parent element to append to
//
// Returns:
// This function returns false if the set was unsuccessful, true otherwise.
/**
* This function sets the content of element elt to the input XML.
* @param {String} xmlString - The XML text.
* @param elt - the parent element to append to
* @returns {Boolean} This function returns false if the set was unsuccessful, true otherwise.
*/
function setForeignString (xmlString) {
const elt = selElems[0];
try {

8
editor/extensions/ext-markers.js
View File

@@ -103,9 +103,11 @@ svgEditor.addExtension('Markers', function (S) {
markerTypes[v + '_o'] = markerTypes[v];
});
// elem = a graphic element will have an attribute like marker-start
// attr - marker-start, marker-mid, or marker-end
// returns the marker element that is linked to the graphic element
/**
* @param elem - A graphic element will have an attribute like marker-start
* @param attr - marker-start, marker-mid, or marker-end
* @returns The marker element that is linked to the graphic element
*/
function getLinked (elem, attr) {
const str = elem.getAttribute(attr);
if (!str) { return null; }

145
editor/history.js
View File

@@ -9,7 +9,9 @@
import {getHref, setHref, getRotationAngle} from './svgutils.js';
import {removeElementFromListMap} from './svgtransformlist.js';
// Group: Undo/Redo history management
/**
* Group: Undo/Redo history management
*/
export const HistoryEventTypes = {
BEFORE_APPLY: 'before_apply',
AFTER_APPLY: 'after_apply',
@@ -99,19 +101,22 @@ export class MoveElementCommand {
}
}
// Returns array with element associated with this command
/**
* @returns {Array} Array with element associated with this command
*/
elements () {
return [this.elem];
}
}
MoveElementCommand.type = MoveElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand
// History command for an element that was added to the DOM
//
// Parameters:
// elem - The newly added DOM element
// text - An optional string visible to user related to this change
/**
* @implements svgedit.history.HistoryCommand
* History command for an element that was added to the DOM
*
* @param elem - The newly added DOM element
* @param text - An optional string visible to user related to this change
*/
export class InsertElementCommand {
constructor (elem, text) {
this.elem = elem;
@@ -155,21 +160,23 @@ export class InsertElementCommand {
}
}
// Returns array with element associated with this command
/**
* @returns {Array} Array with element associated with this command
*/
elements () {
return [this.elem];
}
}
InsertElementCommand.type = InsertElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand
// History command for an element removed from the DOM
//
// Parameters:
// elem - The removed DOM element
// oldNextSibling - the DOM element's nextSibling when it was in the DOM
// oldParent - The DOM element's parent
// text - An optional string visible to user related to this change
/**
* @implements svgedit.history.HistoryCommand
* History command for an element removed from the DOM
* @param elem - The removed DOM element
* @param oldNextSibling - The DOM element's nextSibling when it was in the DOM
* @param oldParent - The DOM element's parent
* @param {String} [text] - An optional string visible to user related to this change
*/
export class RemoveElementCommand {
constructor (elem, oldNextSibling, oldParent, text) {
this.elem = elem;
@@ -222,22 +229,23 @@ export class RemoveElementCommand {
}
}
// Function: RemoveElementCommand.elements
// Returns array with element associated with this command
/**
* @returns {Array} Array with element associated with this command
*/
elements () {
return [this.elem];
}
}
RemoveElementCommand.type = RemoveElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand
// History command to make a change to an element.
// Usually an attribute change, but can also be textcontent.
//
// Parameters:
// elem - The DOM element that was changed
// attrs - An object with the attributes to be changed and the values they had *before* the change
// text - An optional string visible to user related to this change
/**
* @implements svgedit.history.HistoryCommand
* History command to make a change to an element.
* Usually an attribute change, but can also be textcontent.
* @param elem - The DOM element that was changed
* @param attrs - An object with the attributes to be changed and the values they had *before* the change
* @param {String} text - An optional string visible to user related to this change
*/
export class ChangeElementCommand {
constructor (elem, attrs, text) {
this.elem = elem;
@@ -360,7 +368,9 @@ export class ChangeElementCommand {
return true;
}
// Returns array with element associated with this command
/**
* @returns {Array} Array with element associated with this command
*/
elements () {
return [this.elem];
}
@@ -371,11 +381,11 @@ ChangeElementCommand.type = ChangeElementCommand.prototype.type;
// if a new Typing command is created and the top command on the stack is also a Typing
// and they both affect the same element, then collapse the two commands into one
// implements svgedit.history.HistoryCommand
// History command that can contain/execute multiple other commands
//
// Parameters:
// text - An optional string visible to user related to this change
/**
* @implements svgedit.history.HistoryCommand
* History command that can contain/execute multiple other commands
* @param {String} [text] - An optional string visible to user related to this change
*/
export class BatchCommand {
constructor (text) {
this.text = text || 'Batch Command';
@@ -435,24 +445,27 @@ export class BatchCommand {
return elems;
}
// Adds a given command to the history stack
//
// Parameters:
// cmd - The undo command object to add
/**
* Adds a given command to the history stack
* @param cmd - The undo command object to add
*/
addSubCommand (cmd) {
this.stack.push(cmd);
}
// Returns a boolean indicating whether or not the batch command is empty
/**
* @returns {Boolean} Indicates whether or not the batch command is empty
*/
isEmpty () {
return !this.stack.length;
}
}
BatchCommand.type = BatchCommand.prototype.type;
// Parameters:
// historyEventHandler - an object that conforms to the HistoryEventHandler interface
// (see above)
/**
* @param historyEventHandler - an object that conforms to the HistoryEventHandler interface
* (see above)
*/
export class UndoManager {
constructor (historyEventHandler) {
this.handler_ = historyEventHandler || null;
@@ -471,26 +484,30 @@ export class UndoManager {
this.undoStackPointer = 0;
}
// Returns:
// Integer with the current size of the undo history stack
/**
* @returns {Number} Integer with the current size of the undo history stack
*/
getUndoStackSize () {
return this.undoStackPointer;
}
// Returns:
// Integer with the current size of the redo history stack
/**
* @returns {Number} Integer with the current size of the redo history stack
*/
getRedoStackSize () {
return this.undoStack.length - this.undoStackPointer;
}
// Returns:
// String associated with the next undo command
/**
* @returns {String} String associated with the next undo command
*/
getNextUndoCommandText () {
return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer - 1].getText() : '';
}
// Returns:
// String associated with the next redo command
/**
* @returns {String} String associated with the next redo command
*/
getNextRedoCommandText () {
return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : '';
}
@@ -530,15 +547,15 @@ export class UndoManager {
this.undoStackPointer = this.undoStack.length;
}
// This function tells the canvas to remember the old values of the
// attrName attribute for each element sent in. The elements and values
// are stored on a stack, so the next call to finishUndoableChange() will
// pop the elements and old values off the stack, gets the current values
// from the DOM and uses all of these to construct the undo-able command.
//
// Parameters:
// attrName - The name of the attribute being changed
// elems - Array of DOM elements being changed
/**
* This function tells the canvas to remember the old values of the
* attrName attribute for each element sent in. The elements and values
* are stored on a stack, so the next call to finishUndoableChange() will
* pop the elements and old values off the stack, gets the current values
* from the DOM and uses all of these to construct the undo-able command.
* @param attrName - The name of the attribute being changed
* @param elems - Array of DOM elements being changed
*/
beginUndoableChange (attrName, elems) {
const p = ++this.undoChangeStackPointer;
let i = elems.length;
@@ -556,12 +573,12 @@ export class UndoManager {
};
}
// This function returns a BatchCommand object which summarizes the
// change since beginUndoableChange was called. The command can then
// be added to the command history
//
// Returns:
// Batch command object with resulting changes
/**
* This function returns a BatchCommand object which summarizes the
* change since beginUndoableChange was called. The command can then
* be added to the command history
* @returns Batch command object with resulting changes
*/
finishUndoableChange () {
const p = this.undoChangeStackPointer--;
const changeset = this.undoableChangeStack[p];

23
editor/path.js
View File

@@ -370,16 +370,13 @@ export const getSegSelector = function (seg, update) {
return segLine;
};
// Function: smoothControlPoints
// Takes three points and creates a smoother line based on them
//
// Parameters:
// ct1 - Object with x and y values (first control point)
// ct2 - Object with x and y values (second control point)
// pt - Object with x and y values (third point)
//
// Returns:
// Array of two "smoothed" point objects
/**
* Takes three points and creates a smoother line based on them
* @param ct1 - Object with x and y values (first control point)
* @param ct2 - Object with x and y values (second control point)
* @param pt - Object with x and y values (third point)
* @returns Array of two "smoothed" point objects
*/
export const smoothControlPoints = function (ct1, ct2, pt) {
// each point must not be the origin
const x1 = ct1.x - pt.x,
@@ -1279,8 +1276,10 @@ function pathDSegment (letter, points, morePoints, lastPoint) {
return segment;
}
// Group: Path edit functions
// Functions relating to editing path elements
/**
* Group: Path edit functions
* Functions relating to editing path elements
*/
export const pathActions = (function () {
let subpath = false;
let newPoint, firstCtrl;

24
editor/recalculate.js
View File

@@ -33,12 +33,12 @@ export const init = function (editorContext) {
context_ = editorContext;
};
// Updates a <clipPath>s values based on the given translation of an element
//
// Parameters:
// attr - The clip-path attribute value with the clipPath's ID
// tx - The translation's x value
// ty - The translation's y value
/**
* Updates a <clipPath>s values based on the given translation of an element
* @param attr - The clip-path attribute value with the clipPath's ID
* @param tx - The translation's x value
* @param ty - The translation's y value
*/
export const updateClipPath = function (attr, tx, ty) {
const path = getRefElem(attr).firstChild;
const cpXform = getTransformList(path);
@@ -51,13 +51,11 @@ export const updateClipPath = function (attr, tx, ty) {
recalculateDimensions(path);
};
// Decides the course of action based on the element's transform list
//
// Parameters:
// selected - The DOM element to recalculate
//
// Returns:
// Undo command object with the resulting change
/**
* Decides the course of action based on the element's transform list
* @param selected - The DOM element to recalculate
* @returns Undo command object with the resulting change
*/
export const recalculateDimensions = function (selected) {
if (selected == null) { return null; }

1
editor/sanitize.js
View File

@@ -98,7 +98,6 @@ Object.entries(svgWhiteList_).forEach(function ([elt, atts]) {
svgWhiteListNS_[elt] = attNS;
});
// Function: svgedit.sanitize.sanitizeSvg
/**
* Sanitizes the input node and its children
* It only keeps what is allowed from our whitelist defined above

30
editor/select.js
View File

@@ -20,12 +20,12 @@ let config_;
let selectorManager_; // A Singleton
const gripRadius = isTouch() ? 10 : 4;
// Private class for DOM element selection boxes
//
// Parameters:
// id - integer to internally indentify the selector
// elem - DOM element associated with this selector
// bbox - Optional bbox to use for initialization (prevents duplicate getBBox call).
/**
* Private class for DOM element selection boxes
* @param id - integer to internally indentify the selector
* @param elem - DOM element associated with this selector
* @param bbox - Optional bbox to use for initialization (prevents duplicate getBBox call).
*/
export class Selector {
constructor (id, elem, bbox) {
// this is the selector's unique number
@@ -74,11 +74,11 @@ export class Selector {
this.reset(this.selectedElement, bbox);
}
// Used to reset the id and element that the selector is attached to
//
// Parameters:
// e - DOM element associated with this selector
// bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
/**
* Used to reset the id and element that the selector is attached to
* @param e - DOM element associated with this selector
* @param bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
*/
reset (e, bbox) {
this.locked = true;
this.selectedElement = e;
@@ -86,10 +86,10 @@ export class Selector {
this.selectorGroup.setAttribute('display', 'inline');
}
// Updates cursors for corner grips on rotation so arrows point the right way
//
// Parameters:
// angle - Float indicating current rotation angle in degrees
/**
* Updates cursors for corner grips on rotation so arrows point the right way
* @param {Number} angle - Float indicating current rotation angle in degrees
*/
updateGripCursors (angle) {
let dir;
const dirArr = [];

1024
editor/svgcanvas.js
View File

File diff suppressed because it is too large Load Diff

9
editor/svgtransformlist.js
View File

@@ -252,11 +252,10 @@ export let removeElementFromListMap = function (elem) {
}
};
// Function: getTransformList
// Returns an object that behaves like a SVGTransformList for the given DOM element
//
// Parameters:
// elem - DOM element to get a transformlist from
/**
* Returns an object that behaves like a SVGTransformList for the given DOM element
* @param elem - DOM element to get a transformlist from
*/
export const getTransformList = function (elem) {
if (!supportsNativeTransformLists()) {
const id = elem.id || 'temp';

331
editor/svgutils.js
View File

@@ -47,29 +47,24 @@ export const init = function (editorContext) {
svgroot_ = editorContext.getSVGRoot();
};
// Converts characters in a string to XML-friendly entities.
//
// Example: '&' becomes '&amp;'
//
// Parameters:
// str - The string to be converted
//
// Returns:
// The converted string
/**
* Converts characters in a string to XML-friendly entities.
* @example: '&' becomes '&amp;'
* @param str - The string to be converted
* @returns {String} The converted string
*/
export const toXml = function (str) {
// &apos; is ok in XML, but not HTML
// &gt; does not normally need escaping, though it can if within a CDATA expression (and preceded by "]]")
return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/, '&#x27;');
};
// Converts XML entities in a string to single characters.
// Example: '&amp;' becomes '&'
//
// Parameters:
// str - The string to be converted
//
// Returns:
// The converted string
/**
* Converts XML entities in a string to single characters.
* @example '&amp;amp;' becomes '&amp;'
* @param str - The string to be converted
* @returns The converted string
*/
export const fromXml = function (str) {
return $('<p/>').html(str).text();
};
@@ -244,13 +239,11 @@ export const text2xml = function (sXML) {
return out;
};
// Converts a SVGRect into an object.
//
// Parameters:
// bbox - a SVGRect
//
// Returns:
// An object with properties names x, y, width, height.
/**
* Converts a SVGRect into an object.
* @param bbox - a SVGRect
* @returns An object with properties names x, y, width, height.
*/
export const bboxToObj = function (bbox) {
return {
x: bbox.x,
@@ -260,11 +253,11 @@ export const bboxToObj = function (bbox) {
};
};
// Walks the tree and executes the callback on each element in a top-down fashion
//
// Parameters:
// elem - DOM element to traverse
// cbFn - Callback function to run on each element
/**
* Walks the tree and executes the callback on each element in a top-down fashion
* @param elem - DOM element to traverse
* @param {Function} cbFn - Callback function to run on each element
*/
export const walkTree = function (elem, cbFn) {
if (elem && elem.nodeType === 1) {
cbFn(elem);
@@ -275,12 +268,12 @@ export const walkTree = function (elem, cbFn) {
}
};
// Walks the tree and executes the callback on each element in a depth-first fashion
// TODO: FIXME: Shouldn't this be calling walkTreePost?
//
// Parameters:
// elem - DOM element to traverse
// cbFn - Callback function to run on each element
/**
* Walks the tree and executes the callback on each element in a depth-first fashion
* @todo FIXME: Shouldn't this be calling walkTreePost?
* @param elem - DOM element to traverse
* @param {Function} cbFn - Callback function to run on each element
*/
export const walkTreePost = function (elem, cbFn) {
if (elem && elem.nodeType === 1) {
let i = elem.childNodes.length;
@@ -291,17 +284,15 @@ export const walkTreePost = function (elem, cbFn) {
}
};
// Extracts the URL from the url(...) syntax of some attributes.
// Three variants:
// * <circle fill="url(someFile.svg#foo)" />
// * <circle fill="url('someFile.svg#foo')" />
// * <circle fill='url("someFile.svg#foo")' />
//
// Parameters:
// attrVal - The attribute value as a string
//
// Returns:
// String with just the URL, like someFile.svg#foo
/**
* 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")' />
* @param attrVal - The attribute value as a string
* @returns {String} String with just the URL, like "someFile.svg#foo"
*/
export const getUrlFromAttr = function (attrVal) {
if (attrVal) {
// url("#somegrad")
@@ -319,18 +310,25 @@ export const getUrlFromAttr = function (attrVal) {
return null;
};
// Returns the given element's xlink:href value
/**
* @returns The given element's xlink:href value
*/
export let getHref = function (elem) {
return elem.getAttributeNS(NS.XLINK, 'href');
};
// Sets the given element's xlink:href value
/**
* Sets the given element's xlink:href value
* @param elem
* @param {String} val
*/
export let setHref = function (elem, val) {
elem.setAttributeNS(NS.XLINK, 'xlink:href', val);
};
// Returns:
// The document's <defs> element, create it first if necessary
/**
* @returns The document's &lt;defs> element, create it first if necessary
*/
export const findDefs = function () {
const svgElement = editorContext_.getSVGContent();
let defs = svgElement.getElementsByTagNameNS(NS.SVG, 'defs');
@@ -350,15 +348,13 @@ export const findDefs = function () {
// TODO(codedread): Consider moving the next to functions to bbox.js
// Get correct BBox for a path in Webkit
// Converted from code found here:
// http://blog.hackers-cafe.net/2009/06/how-to-calculate-bezier-curves-bounding.html
//
// Parameters:
// path - The path DOM element to get the BBox for
//
// Returns:
// A BBox-like object
/**
* 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
* @param path - The path DOM element to get the BBox for
* @returns A BBox-like object
*/
export const getPathBBox = function (path) {
const seglist = path.pathSegList;
const tot = seglist.numberOfItems;
@@ -429,13 +425,14 @@ export const getPathBBox = function (path) {
};
};
// Get the given/selected element's bounding box object, checking for
// horizontal/vertical lines (see issue 717)
// Note that performance is currently terrible, so some way to improve would
// be great.
//
// Parameters:
// selected - Container or <use> DOM element
/**
* Get the given/selected element's bounding box object, checking for
* horizontal/vertical lines (see issue 717)
* Note that performance is currently terrible, so some way to improve would
* be great.
* @param selected - Container or &lt;use> DOM element
* @returns Bounding box object
*/
function groupBBFix (selected) {
if (supportsHVLineContainerBBox()) {
try { return selected.getBBox(); } catch (e) {}
@@ -475,11 +472,12 @@ function groupBBFix (selected) {
return ret;
}
// Get the given/selected element's bounding box object, convert it to be more
// usable when necessary
//
// Parameters:
// elem - Optional DOM element to get the BBox for
/**
* Get the given/selected element's bounding box object, convert it to be more
* usable when necessary
* @param elem - Optional DOM element to get the BBox for
* @returns Bounding box object
*/
export const getBBox = function (elem) {
const selected = elem || editorContext_.geSelectedElements()[0];
if (elem.nodeType !== 1) { return null; }
@@ -560,14 +558,12 @@ export const getBBox = function (elem) {
return ret;
};
// Create a path 'd' attribute from path segments.
// Each segment is an array of the form: [singleChar, [x,y, x,y, ...]]
//
// Parameters:
// pathSegments - An array of path segments to be converted
//
// Returns:
// The converted path d attribute.
/**
* Create a path 'd' attribute from path segments.
* Each segment is an array of the form: [singleChar, [x,y, x,y, ...]]
* @param pathSegments - An array of path segments to be converted
* @returns The converted path d attribute.
*/
export const getPathDFromSegments = function (pathSegments) {
let d = '';
@@ -582,13 +578,11 @@ export const getPathDFromSegments = function (pathSegments) {
return d;
};
// Make a path 'd' attribute from a simple SVG element shape.
//
// Parameters:
// elem - The element to be converted
//
// Returns:
// The path d attribute or `undefined` if the element type is unknown.
/**
* Make a path 'd' attribute from a simple SVG element shape.
* @param elem - The element to be converted
* @returns The path d attribute or `undefined` if the element type is unknown.
*/
export const getPathDFromElement = function (elem) {
// Possibly the cubed root of 6, but 1.81 works best
let num = 1.81;
@@ -664,13 +658,11 @@ export const getPathDFromElement = function (elem) {
return d;
};
// Get a set of attributes from an element that is useful for convertToPath.
//
// Parameters:
// elem - The element to be probed
//
// Returns:
// An object with attributes.
/**
* Get a set of attributes from an element that is useful for convertToPath.
* @param elem - The element to be probed
* @returns {Object} An object with attributes.
*/
export const getExtraAttributesForConvertToPath = function (elem) {
const attrs = {};
// TODO: make this list global so that we can properly maintain it
@@ -684,15 +676,13 @@ export const getExtraAttributesForConvertToPath = function (elem) {
return attrs;
};
// Get the BBox of an element-as-path
//
// Parameters:
// elem - The DOM element to be probed
// addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
// pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
//
// Returns:
// The resulting path's bounding box object.
/**
* Get the BBox of an element-as-path
* @param elem - The DOM element to be probed
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
* @param pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions.
* @returns The resulting path's bounding box object.
*/
export const getBBoxOfElementAsPath = function (elem, addSvgElementFromJson, pathActions) {
const path = addSvgElementFromJson({
element: 'path',
@@ -727,20 +717,18 @@ export const getBBoxOfElementAsPath = function (elem, addSvgElementFromJson, pat
return bb;
};
// Convert selected element to a path.
//
// Parameters:
// elem - The DOM element to be converted
// attrs - Apply attributes to new path. see canvas.convertToPath
// addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
// pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
// clearSelection - see canvas.clearSelection
// addToSelection - see canvas.addToSelection
// history - see svgedit.history
// addCommandToHistory - see canvas.addCommandToHistory
//
// Returns:
// The converted path element or null if the DOM element was not recognized.
/**
* Convert selected element to a path.
* @param elem - The DOM element to be converted
* @param attrs - Apply attributes to new path. see canvas.convertToPath
* @param addSvgElementFromJson - Function to add the path element to the current layer. See canvas.addSvgElementFromJson
* @param pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions.
* @param clearSelection - see canvas.clearSelection
* @param addToSelection - see canvas.addToSelection
* @param history - see svgedit.history
* @param addCommandToHistory - see canvas.addCommandToHistory
* @returns The converted path element or null if the DOM element was not recognized.
*/
export const convertToPath = function (elem, attrs, addSvgElementFromJson, pathActions, clearSelection, addToSelection, history, addCommandToHistory) {
const batchCmd = new history.BatchCommand('Convert element to Path');
@@ -799,27 +787,26 @@ export const convertToPath = function (elem, attrs, addSvgElementFromJson, pathA
}
};
// Can the bbox be optimized over the native getBBox? The optimized bbox is the same as the native getBBox when
// the rotation angle is a multiple of 90 degrees and there are no complex transforms.
// Getting an optimized bbox can be dramatically slower, so we want to make sure it's worth it.
//
// The best example for this is a circle rotate 45 degrees. The circle doesn't get wider or taller when rotated
// about it's center.
//
// The standard, unoptimized technique gets the native bbox of the circle, rotates the box 45 degrees, uses
// that width and height, and applies any transforms to get the final bbox. This means the calculated bbox
// is much wider than the original circle. If the angle had been 0, 90, 180, etc. both techniques render the
// same bbox.
//
// The optimization is not needed if the rotation is a multiple 90 degrees. The default technique is to call
// getBBox then apply the angle and any transforms.
//
// Parameters:
// angle - The rotation angle in degrees
// hasMatrixTransform - True if there is a matrix transform
//
// Returns:
// True if the bbox can be optimized.
/**
* Can the bbox be optimized over the native getBBox? The optimized bbox is the same as the native getBBox when
* the rotation angle is a multiple of 90 degrees and there are no complex transforms.
* Getting an optimized bbox can be dramatically slower, so we want to make sure it's worth it.
*
* The best example for this is a circle rotate 45 degrees. The circle doesn't get wider or taller when rotated
* about it's center.
*
* The standard, unoptimized technique gets the native bbox of the circle, rotates the box 45 degrees, uses
* that width and height, and applies any transforms to get the final bbox. This means the calculated bbox
* is much wider than the original circle. If the angle had been 0, 90, 180, etc. both techniques render the
* same bbox.
*
* The optimization is not needed if the rotation is a multiple 90 degrees. The default technique is to call
* getBBox then apply the angle and any transforms.
*
* @param angle - The rotation angle in degrees
* @param {Boolean} hasMatrixTransform - True if there is a matrix transform
* @returns {Boolean} True if the bbox can be optimized.
*/
function bBoxCanBeOptimizedOverNativeGetBBox (angle, hasMatrixTransform) {
const angleModulo90 = angle % 90;
const closeTo90 = angleModulo90 < -89.99 || angleModulo90 > 89.99;
@@ -954,7 +941,7 @@ export const getStrokedBBox = function (elems, addSvgElementFromJson, pathAction
};
/**
* Get all elements that have a BBox (excludes <defs>, <title>, etc).
* Get all elements that have a BBox (excludes `&lt;defs>`, `&lt;title>`, etc).
* Note that 0-opacity, off-screen etc elements are still considered "visible"
* for this function
* @param parent - The parent DOM element to search within
@@ -988,14 +975,12 @@ export const getStrokedBBoxDefaultVisible = function (elems) {
);
};
// Get the rotation angle of the given transform list.
//
// Parameters:
// tlist - List of transforms
// toRad - Boolean that when true returns the value in radians rather than degrees
//
// Returns:
// Float with the angle in degrees or radians
/**
* Get the rotation angle of the given transform list.
* @param tlist - List of transforms
* @param {Boolean} toRad - When true returns the value in radians rather than degrees
* @returns {Number} Float with the angle in degrees or radians
*/
export const getRotationAngleFromTransformList = function (tlist, toRad) {
if (!tlist) { return 0; } // <svg> elements have no tlist
const N = tlist.numberOfItems;
@@ -1008,14 +993,12 @@ export const getRotationAngleFromTransformList = function (tlist, toRad) {
return 0.0;
};
// Get the rotation angle of the given/selected DOM element
//
// Parameters:
// elem - Optional DOM element to get the angle for
// toRad - Boolean that when true returns the value in radians rather than degrees
//
// Returns:
// Float with the angle in degrees or radians
/**
* Get the rotation angle of the given/selected DOM element
* @param elem - Optional DOM element to get the angle for
* @param {Boolean} toRad - When true returns the value in radians rather than degrees
* @returns {Number} Float with the angle in degrees or radians
*/
export let getRotationAngle = function (elem, toRad) {
const selected = elem || editorContext_.getSelectedElements()[0];
// find the rotation transform (if any) and set it
@@ -1023,19 +1006,19 @@ export let getRotationAngle = function (elem, toRad) {
return getRotationAngleFromTransformList(tlist, toRad);
};
// Function getRefElem
// Get the reference element associated with the given attribute value
//
// Parameters:
// attrVal - The attribute value as a string
/**
* Get the reference element associated with the given attribute value
* @param {String} attrVal - The attribute value as a string
* @returns Reference element
*/
export const getRefElem = function (attrVal) {
return getElem(getUrlFromAttr(attrVal).substr(1));
};
// Get a DOM element by ID within the SVG root element.
//
// Parameters:
// id - String with the element's new ID
/**
* Get a DOM element by ID within the SVG root element.
* @param {String} id - String with the element's new ID
*/
export const getElem = (supportsSelectors())
? function (id) {
// querySelector lookup
@@ -1055,13 +1038,13 @@ export const getElem = (supportsSelectors())
return $(svgroot_).find('[id=' + id + ']')[0];
};
// Assigns multiple attributes to an element.
//
// Parameters:
// node - DOM element to apply new attribute values to
// attrs - Object with attribute keys/values
// suspendLength - Optional integer of milliseconds to suspend redraw
// unitCheck - Boolean to indicate the need to use svgedit.units.setUnitAttr
/**
* Assigns multiple attributes to an element.
* @param node - DOM element to apply new attribute values to
* @param {Object} attrs - Object with attribute keys/values
* @param {Number} suspendLength - Optional integer of milliseconds to suspend redraw
* @param {Boolean} unitCheck - Boolean to indicate the need to use svgedit.units.setUnitAttr
*/
export const assignAttributes = function (node, attrs, suspendLength, unitCheck) {
for (const i in attrs) {
const ns = (i.substr(0, 4) === 'xml:'
@@ -1078,10 +1061,10 @@ export const assignAttributes = function (node, attrs, suspendLength, unitCheck)
}
};
// Remove unneeded (default) attributes, makes resulting SVG smaller
//
// Parameters:
// element - DOM element to clean up
/**
* Remove unneeded (default) attributes, makes resulting SVG smaller
* @param element - DOM element to clean up
*/
export const cleanupElement = function (element) {
const defaults = {
'fill-opacity': 1,

4
editor/units.js
View File

@@ -77,7 +77,9 @@ export const init = function (elementContainer) {
};
};
// Group: Unit conversion functions
/**
* Group: Unit conversion functions
*/
/**
* @returns The unit object with values for each unit