`, ``, etc).
+* Note that 0-opacity, off-screen etc elements are still considered "visible"
+* for this function.
+* @function module:utilities.getVisibleElements
+* @param {Element} parentElement - The parent DOM element to search within
+* @returns {Element[]} All "visible" elements.
+*/
+export const getVisibleElements = function (parentElement) {
+ if (!parentElement) {
+ parentElement = $(editorContext_.getSVGContent()).children(); // Prevent layers from being included
+ }
+
+ const contentElems = [];
+ $(parentElement).children().each(function (i, elem) {
+ if (elem.getBBox) {
+ contentElems.push(elem);
+ }
+ });
+ return contentElems.reverse();
+};
+
+/**
+* Get the bounding box for one or more stroked and/or transformed elements.
+* @function module:utilities.getStrokedBBoxDefaultVisible
+* @param {Element[]} elems - Array with DOM elements to check
+* @returns {module:utilities.BBoxObject} A single bounding box object
+*/
+export const getStrokedBBoxDefaultVisible = function (elems) {
+ if (!elems) { elems = getVisibleElements(); }
+ return getStrokedBBox(
+ elems,
+ editorContext_.addSVGElementFromJson,
+ editorContext_.pathActions
+ );
+};
+
+/**
+* Get the rotation angle of the given transform list.
+* @function module:utilities.getRotationAngleFromTransformList
+* @param {SVGTransformList} tlist - List of transforms
+* @param {boolean} toRad - When true returns the value in radians rather than degrees
+* @returns {Float} 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;
+ for (let i = 0; i < N; ++i) {
+ const xform = tlist.getItem(i);
+ if (xform.type === 4) {
+ return toRad ? xform.angle * Math.PI / 180.0 : xform.angle;
+ }
+ }
+ return 0.0;
+};
+
+/**
+* Get the rotation angle of the given/selected DOM element.
+* @function module:utilities.getRotationAngle
+* @param {Element} [elem] - DOM element to get the angle for. Default to first of selected elements.
+* @param {boolean} [toRad=false] - When true returns the value in radians rather than degrees
+* @returns {Float} The angle in degrees or radians
+*/
+export let getRotationAngle = function (elem, toRad) { // eslint-disable-line import/no-mutable-exports
+ const selected = elem || editorContext_.getSelectedElements()[0];
+ // find the rotation transform (if any) and set it
+ const tlist = getTransformList(selected);
+ return getRotationAngleFromTransformList(tlist, toRad);
+};
+
+/**
+* Get the reference element associated with the given attribute value.
+* @function module:utilities.getRefElem
+* @param {string} attrVal - The attribute value as a string
+* @returns {Element} Reference element
+*/
+export const getRefElem = function (attrVal) {
+ return getElem(getUrlFromAttr(attrVal).substr(1));
+};
+
+/**
+* Get a DOM element by ID within the SVG root element.
+* @function module:utilities.getElem
+* @param {string} id - String with the element's new ID
+* @returns {?Element}
+*/
+export const getElem = (supportsSelectors())
+ ? function (id) {
+ // querySelector lookup
+ return svgroot_.querySelector('#' + id);
+ }
+ : supportsXpath()
+ ? function (id) {
+ // xpath lookup
+ return domdoc_.evaluate(
+ 'svg:svg[@id="svgroot"]//svg:*[@id="' + id + '"]',
+ domcontainer_,
+ function () { return NS.SVG; },
+ 9,
+ null
+ ).singleNodeValue;
+ }
+ : function (id) {
+ // jQuery lookup: twice as slow as xpath in FF
+ return $(svgroot_).find(`[id=${id}]`)[0];
+ };
+
+/**
+* Assigns multiple attributes to an element.
+* @function module:utilities.assignAttributes
+* @param {Element} elem - DOM element to apply new attribute values to
+* @param {PlainObject<string, string>} attrs - Object with attribute keys/values
+* @param {Integer} [suspendLength] - Milliseconds to suspend redraw
+* @param {boolean} [unitCheck=false] - Boolean to indicate the need to use units.setUnitAttr
+* @returns {void}
+*/
+export const assignAttributes = function (elem, attrs, suspendLength, unitCheck) {
+ for (const [key, value] of Object.entries(attrs)) {
+ const ns = (key.substr(0, 4) === 'xml:'
+ ? NS.XML
+ : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null);
+ if (isNullish(value)) {
+ if (ns) {
+ elem.removeAttributeNS(ns, key);
+ } else {
+ elem.removeAttribute(key);
+ }
+ continue;
+ }
+ if (ns) {
+ elem.setAttributeNS(ns, key, value);
+ } else if (!unitCheck) {
+ elem.setAttribute(key, value);
+ } else {
+ setUnitAttr(elem, key, value);
+ }
+ }
+};
+
+/**
+* Remove unneeded (default) attributes, making resulting SVG smaller.
+* @function module:utilities.cleanupElement
+* @param {Element} element - DOM element to clean up
+* @returns {void}
+*/
+export const cleanupElement = function (element) {
+ const defaults = {
+ 'fill-opacity': 1,
+ 'stop-opacity': 1,
+ opacity: 1,
+ stroke: 'none',
+ 'stroke-dasharray': 'none',
+ 'stroke-linejoin': 'miter',
+ 'stroke-linecap': 'butt',
+ 'stroke-opacity': 1,
+ 'stroke-width': 1,
+ rx: 0,
+ ry: 0
+ };
+
+ if (element.nodeName === 'ellipse') {
+ // Ellipse elements require rx and ry attributes
+ delete defaults.rx;
+ delete defaults.ry;
+ }
+
+ Object.entries(defaults).forEach(([attr, val]) => {
+ if (element.getAttribute(attr) === String(val)) {
+ element.removeAttribute(attr);
+ }
+ });
+};
+
+/**
+* Round value to for snapping.
+* @function module:utilities.snapToGrid
+* @param {Float} value
+* @returns {Integer}
+*/
+export const snapToGrid = function (value) {
+ const unit = editorContext_.getBaseUnit();
+ let stepSize = editorContext_.getSnappingStep();
+ if (unit !== 'px') {
+ stepSize *= getTypeMap()[unit];
+ }
+ value = Math.round(value / stepSize) * stepSize;
+ return value;
+};
+
+/**
+* Escapes special characters in a regular expression.
+* @function module:utilities.regexEscape
+* @param {string} str
+* @returns {string}
+*/
+export const regexEscape = function (str) {
+ // Originally from: http://phpjs.org/functions
+ return String(str).replace(/[.\\+*?[^\]$(){}=!<>|:-]/g, '\\$&');
+};
+
+/**
+ * Prevents default browser click behaviour on the given element.
+ * @function module:utilities.preventClickDefault
+ * @param {Element} img - The DOM element to prevent the click on
+ * @returns {void}
+ */
+export const preventClickDefault = function (img) {
+ $(img).click(function (e) { e.preventDefault(); });
+};
+
+/**
+ * @callback module:utilities.GetNextID
+ * @returns {string} The ID
+ */
+
+/**
+ * Whether a value is `null` or `undefined`.
+ * @param {any} val
+ * @returns {boolean}
+ */
+export const isNullish = (val) => {
+ return val === null || val === undefined;
+};
+
+/**
+* Overwrite methods for unit testing.
+* @function module:utilities.mock
+* @param {PlainObject} mockMethods
+* @param {module:utilities.getHref} mockMethods.getHref
+* @param {module:utilities.setHref} mockMethods.setHref
+* @param {module:utilities.getRotationAngle} mockMethods.getRotationAngle
+* @returns {void}
+*/
+export const mock = ({
+ getHref: getHrefUser, setHref: setHrefUser, getRotationAngle: getRotationAngleUser
+}) => {
+ getHref = getHrefUser;
+ setHref = setHrefUser;
+ getRotationAngle = getRotationAngleUser;
+};
+
+export const $q = (sel) => document.querySelector(sel);
+export const $qq = (sel) => [...document.querySelectorAll(sel)];
diff --git a/dist/editor/browser-not-supported.html b/dist/editor/browser-not-supported.html
new file mode 100644
index 00000000..6ec7af4e
--- /dev/null
+++ b/dist/editor/browser-not-supported.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8" />
+ <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
+ <link rel="icon" type="image/png" href="images/logo.png"/>
+ <link rel="stylesheet" href="svg-editor.css"/>
+ <title>Browser does not support SVG | SVG-edit
+
+
+
+ 
+ Sorry, but your browser does not support SVG. Below is a list of
+ alternate browsers and versions that support SVG and SVG-edit
+ (from caniuse.com).
+
+ Try the latest version of
+ Firefox,
+ Chrome,
+ Safari,
+ Opera or
+ Internet Explorer.
+
+
+
+
+
+