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

3
.jsdoc/configuration.json
View File

@@ -4,7 +4,8 @@
"exclude": [ "exclude": [
"node_modules", "node_modules",
"dist" "dist"
] ],
"excludePattern": "^svgedit-config-"
}, },
"sourceType": "module", "sourceType": "module",
"tags": { "tags": {

4
editor/draw.js
View File

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

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

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

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

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

145
editor/history.js
View File

@@ -9,7 +9,9 @@
import {getHref, setHref, getRotationAngle} from './svgutils.js'; import {getHref, setHref, getRotationAngle} from './svgutils.js';
import {removeElementFromListMap} from './svgtransformlist.js'; import {removeElementFromListMap} from './svgtransformlist.js';
// Group: Undo/Redo history management /**
* Group: Undo/Redo history management
*/
export const HistoryEventTypes = { export const HistoryEventTypes = {
BEFORE_APPLY: 'before_apply', BEFORE_APPLY: 'before_apply',
AFTER_APPLY: 'after_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 () { elements () {
return [this.elem]; return [this.elem];
} }
} }
MoveElementCommand.type = MoveElementCommand.prototype.type; MoveElementCommand.type = MoveElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand /**
// History command for an element that was added to the DOM * @implements svgedit.history.HistoryCommand
// * History command for an element that was added to the DOM
// Parameters: *
// elem - The newly added DOM element * @param elem - The newly added DOM element
// text - An optional string visible to user related to this change * @param text - An optional string visible to user related to this change
*/
export class InsertElementCommand { export class InsertElementCommand {
constructor (elem, text) { constructor (elem, text) {
this.elem = elem; 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 () { elements () {
return [this.elem]; return [this.elem];
} }
} }
InsertElementCommand.type = InsertElementCommand.prototype.type; InsertElementCommand.type = InsertElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand /**
// History command for an element removed from the DOM * @implements svgedit.history.HistoryCommand
// * History command for an element removed from the DOM
// Parameters: * @param elem - The removed DOM element
// elem - The removed DOM element * @param oldNextSibling - The DOM element's nextSibling when it was in the DOM
// oldNextSibling - the DOM element's nextSibling when it was in the DOM * @param oldParent - The DOM element's parent
// oldParent - The DOM element's parent * @param {String} [text] - An optional string visible to user related to this change
// text - An optional string visible to user related to this change */
export class RemoveElementCommand { export class RemoveElementCommand {
constructor (elem, oldNextSibling, oldParent, text) { constructor (elem, oldNextSibling, oldParent, text) {
this.elem = elem; 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 () { elements () {
return [this.elem]; return [this.elem];
} }
} }
RemoveElementCommand.type = RemoveElementCommand.prototype.type; RemoveElementCommand.type = RemoveElementCommand.prototype.type;
// implements svgedit.history.HistoryCommand /**
// History command to make a change to an element. * @implements svgedit.history.HistoryCommand
// Usually an attribute change, but can also be textcontent. * History command to make a change to an element.
// * Usually an attribute change, but can also be textcontent.
// Parameters: * @param elem - The DOM element that was changed
// 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
// 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
// text - An optional string visible to user related to this change */
export class ChangeElementCommand { export class ChangeElementCommand {
constructor (elem, attrs, text) { constructor (elem, attrs, text) {
this.elem = elem; this.elem = elem;
@@ -360,7 +368,9 @@ export class ChangeElementCommand {
return true; return true;
} }
// Returns array with element associated with this command /**
* @returns {Array} Array with element associated with this command
*/
elements () { elements () {
return [this.elem]; 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 // 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 // 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 * @implements svgedit.history.HistoryCommand
// * History command that can contain/execute multiple other commands
// Parameters: * @param {String} [text] - An optional string visible to user related to this change
// text - An optional string visible to user related to this change */
export class BatchCommand { export class BatchCommand {
constructor (text) { constructor (text) {
this.text = text || 'Batch Command'; this.text = text || 'Batch Command';
@@ -435,24 +445,27 @@ export class BatchCommand {
return elems; return elems;
} }
// Adds a given command to the history stack /**
// * Adds a given command to the history stack
// Parameters: * @param cmd - The undo command object to add
// cmd - The undo command object to add */
addSubCommand (cmd) { addSubCommand (cmd) {
this.stack.push(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 () { isEmpty () {
return !this.stack.length; return !this.stack.length;
} }
} }
BatchCommand.type = BatchCommand.prototype.type; BatchCommand.type = BatchCommand.prototype.type;
// Parameters: /**
// historyEventHandler - an object that conforms to the HistoryEventHandler interface * @param historyEventHandler - an object that conforms to the HistoryEventHandler interface
// (see above) * (see above)
*/
export class UndoManager { export class UndoManager {
constructor (historyEventHandler) { constructor (historyEventHandler) {
this.handler_ = historyEventHandler || null; this.handler_ = historyEventHandler || null;
@@ -471,26 +484,30 @@ export class UndoManager {
this.undoStackPointer = 0; 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 () { getUndoStackSize () {
return this.undoStackPointer; 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 () { getRedoStackSize () {
return this.undoStack.length - this.undoStackPointer; return this.undoStack.length - this.undoStackPointer;
} }
// Returns: /**
// String associated with the next undo command * @returns {String} String associated with the next undo command
*/
getNextUndoCommandText () { getNextUndoCommandText () {
return this.undoStackPointer > 0 ? this.undoStack[this.undoStackPointer - 1].getText() : ''; 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 () { getNextRedoCommandText () {
return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : ''; return this.undoStackPointer < this.undoStack.length ? this.undoStack[this.undoStackPointer].getText() : '';
} }
@@ -530,15 +547,15 @@ export class UndoManager {
this.undoStackPointer = this.undoStack.length; 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 * This function tells the canvas to remember the old values of the
// are stored on a stack, so the next call to finishUndoableChange() will * attrName attribute for each element sent in. The elements and values
// pop the elements and old values off the stack, gets the current values * are stored on a stack, so the next call to finishUndoableChange() will
// from the DOM and uses all of these to construct the undo-able command. * 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: * @param attrName - The name of the attribute being changed
// attrName - The name of the attribute being changed * @param elems - Array of DOM elements being changed
// elems - Array of DOM elements being changed */
beginUndoableChange (attrName, elems) { beginUndoableChange (attrName, elems) {
const p = ++this.undoChangeStackPointer; const p = ++this.undoChangeStackPointer;
let i = elems.length; 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 * This function returns a BatchCommand object which summarizes the
// be added to the command history * change since beginUndoableChange was called. The command can then
// * be added to the command history
// Returns: * @returns Batch command object with resulting changes
// Batch command object with resulting changes */
finishUndoableChange () { finishUndoableChange () {
const p = this.undoChangeStackPointer--; const p = this.undoChangeStackPointer--;
const changeset = this.undoableChangeStack[p]; const changeset = this.undoableChangeStack[p];

23
editor/path.js
View File

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

24
editor/recalculate.js
View File

@@ -33,12 +33,12 @@ export const init = function (editorContext) {
context_ = editorContext; context_ = editorContext;
}; };
// Updates a <clipPath>s values based on the given translation of an element /**
// * Updates a <clipPath>s values based on the given translation of an element
// Parameters: * @param attr - The clip-path attribute value with the clipPath's ID
// attr - The clip-path attribute value with the clipPath's ID * @param tx - The translation's x value
// tx - The translation's x value * @param ty - The translation's y value
// ty - The translation's y value */
export const updateClipPath = function (attr, tx, ty) { export const updateClipPath = function (attr, tx, ty) {
const path = getRefElem(attr).firstChild; const path = getRefElem(attr).firstChild;
const cpXform = getTransformList(path); const cpXform = getTransformList(path);
@@ -51,13 +51,11 @@ export const updateClipPath = function (attr, tx, ty) {
recalculateDimensions(path); recalculateDimensions(path);
}; };
// Decides the course of action based on the element's transform list /**
// * Decides the course of action based on the element's transform list
// Parameters: * @param selected - The DOM element to recalculate
// selected - The DOM element to recalculate * @returns Undo command object with the resulting change
// */
// Returns:
// Undo command object with the resulting change
export const recalculateDimensions = function (selected) { export const recalculateDimensions = function (selected) {
if (selected == null) { return null; } 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; svgWhiteListNS_[elt] = attNS;
}); });
// Function: svgedit.sanitize.sanitizeSvg
/** /**
* Sanitizes the input node and its children * Sanitizes the input node and its children
* It only keeps what is allowed from our whitelist defined above * 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 let selectorManager_; // A Singleton
const gripRadius = isTouch() ? 10 : 4; const gripRadius = isTouch() ? 10 : 4;
// Private class for DOM element selection boxes /**
// * Private class for DOM element selection boxes
// Parameters: * @param id - integer to internally indentify the selector
// id - integer to internally indentify the selector * @param elem - DOM element associated with this selector
// elem - DOM element associated with this selector * @param bbox - Optional bbox to use for initialization (prevents duplicate getBBox call).
// bbox - Optional bbox to use for initialization (prevents duplicate getBBox call). */
export class Selector { export class Selector {
constructor (id, elem, bbox) { constructor (id, elem, bbox) {
// this is the selector's unique number // this is the selector's unique number
@@ -74,11 +74,11 @@ export class Selector {
this.reset(this.selectedElement, bbox); this.reset(this.selectedElement, bbox);
} }
// Used to reset the id and element that the selector is attached to /**
// * Used to reset the id and element that the selector is attached to
// Parameters: * @param e - DOM element associated with this selector
// e - DOM element associated with this selector * @param bbox - Optional bbox to use for reset (prevents duplicate getBBox call).
// bbox - Optional bbox to use for reset (prevents duplicate getBBox call). */
reset (e, bbox) { reset (e, bbox) {
this.locked = true; this.locked = true;
this.selectedElement = e; this.selectedElement = e;
@@ -86,10 +86,10 @@ export class Selector {
this.selectorGroup.setAttribute('display', 'inline'); this.selectorGroup.setAttribute('display', 'inline');
} }
// Updates cursors for corner grips on rotation so arrows point the right way /**
// * Updates cursors for corner grips on rotation so arrows point the right way
// Parameters: * @param {Number} angle - Float indicating current rotation angle in degrees
// angle - Float indicating current rotation angle in degrees */
updateGripCursors (angle) { updateGripCursors (angle) {
let dir; let dir;
const dirArr = []; 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 * Returns an object that behaves like a SVGTransformList for the given DOM element
// * @param elem - DOM element to get a transformlist from
// Parameters: */
// elem - DOM element to get a transformlist from
export const getTransformList = function (elem) { export const getTransformList = function (elem) {
if (!supportsNativeTransformLists()) { if (!supportsNativeTransformLists()) {
const id = elem.id || 'temp'; const id = elem.id || 'temp';

331
editor/svgutils.js
View File

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

8
package.json
View File

@@ -10,13 +10,13 @@
}, },
"engines": {}, "engines": {},
"scripts": { "scripts": {
"build-doc": "jsdoc -c .jsdoc/configuration.json .",
"build-config": "rollup -c rollup-config.config.js", "build-config": "rollup -c rollup-config.config.js",
"copy-deps": "cp node_modules/load-stylesheets/dist/index-es.js editor/external/load-stylesheets/index-es.js && cp node_modules/babel-polyfill/dist/polyfill.min.js editor/external/babel-polyfill/polyfill.min.js && cp node_modules/babel-polyfill/dist/polyfill.js editor/external/babel-polyfill/polyfill.js", "build-doc": "jsdoc -c .jsdoc/configuration.json .",
"compress-images": "imageoptim 'chrome-app/*.png' && imageoptim 'editor/extensions/*.png' && imageoptim 'editor/spinbtn/*.png' && imageoptim 'editor/jgraduate/images/*.{png,gif}' && imageoptim 'editor/images/*.png'",
"build-html": "node build-html.js", "build-html": "node build-html.js",
"rollup": "rollup -c", "compress-images": "imageoptim 'chrome-app/*.png' && imageoptim 'editor/extensions/*.png' && imageoptim 'editor/spinbtn/*.png' && imageoptim 'editor/jgraduate/images/*.{png,gif}' && imageoptim 'editor/images/*.png'",
"copy-deps": "cp node_modules/load-stylesheets/dist/index-es.js editor/external/load-stylesheets/index-es.js && cp node_modules/babel-polyfill/dist/polyfill.min.js editor/external/babel-polyfill/polyfill.min.js && cp node_modules/babel-polyfill/dist/polyfill.js editor/external/babel-polyfill/polyfill.js",
"eslint": "eslint .", "eslint": "eslint .",
"rollup": "rollup -c",
"start": "echo \"Open file to http://localhost:8000/test/all_tests.html\" && static -p 8000", "start": "echo \"Open file to http://localhost:8000/test/all_tests.html\" && static -p 8000",
"test-no-build": "npm run eslint && npm run build-html && npm run build-config && opn http://localhost:8000/test/all_tests.html && static -p 8000", "test-no-build": "npm run eslint && npm run build-html && npm run build-config && opn http://localhost:8000/test/all_tests.html && static -p 8000",
"test": "npm run eslint && npm run build-html && npm run rollup && npm run build-config && opn http://localhost:8000/test/all_tests.html && static -p 8000" "test": "npm run eslint && npm run build-html && npm run rollup && npm run build-config && opn http://localhost:8000/test/all_tests.html && static -p 8000"