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

identation requirement to eslint

master
JFH 2021-05-28 10:35:46 +02:00
parent 1e73db7f5c
commit 01b022b1e7
39 changed files with 1832 additions and 1846 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@ -23,6 +23,8 @@ module.exports = {
rules: {
/** @todo len should probably more 120-150 */
"max-len": [ "warn", { "code": 250 } ],
"indent": [ "error", 2 ],
"no-var": "error",
/** @todo jsdoc should be made warn or error */
"valid-jsdoc": "off",
/** @todo cognitive complexity should be much lower (25-50?) */

2
cypress/integration/unit/recalculate.js
View File

@ -33,7 +33,7 @@ describe('recalculate', function () {
return this._storage.has(element) && this._storage.get(element).has(key);
},
remove: function (element, key) {
var ret = this._storage.get(element).delete(key);
let ret = this._storage.get(element).delete(key);
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
}

2
cypress/integration/unit/select.js
View File

@ -27,7 +27,7 @@ describe('select', function () {
return this._storage.has(element) && this._storage.get(element).has(key);
},
remove: function (element, key) {
var ret = this._storage.get(element).delete(key);
let ret = this._storage.get(element).delete(key);
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
}

12
docs/tutorials/ExtensionDocs.md
View File

@ -145,13 +145,13 @@ import { importSetGlobalDefault } from '../external/dynamic-import-polyfill/impo
(async () => {
const url = `${svgEditor.curConfig.extPath}ext-locale/<extNameWithoutExtPrefix>/<lang>.js`;
const localeStrings = await importSetGlobalDefault(url, {
global: 'svgEditorExtensionLocale_imagelib_' + lang
});
const url = `${svgEditor.curConfig.extPath}ext-locale/<extNameWithoutExtPrefix>/<lang>.js`;
const localeStrings = await importSetGlobalDefault(url, {
global: 'svgEditorExtensionLocale_imagelib_' + lang
});
// Use `localeStrings`
console.info(localeStrings);
// Use `localeStrings`
console.info(localeStrings);
})();
```

142
src/common/browser.js
View File

@ -11,7 +11,7 @@ import 'pathseg';
import { NS } from './namespaces.js';
const supportsSVG_ = (function () {
return Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg').createSVGRect);
return Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg').createSVGRect);
}());
/**
@ -33,108 +33,108 @@ const isMac_ = userAgent.includes('Macintosh');
const isTouch_ = 'ontouchstart' in window;
const supportsSelectors_ = (function () {
return Boolean(svg.querySelector);
return Boolean(svg.querySelector);
}());
const supportsXpath_ = (function () {
return Boolean(document.evaluate);
return Boolean(document.evaluate);
}());
// segList functions (for FF1.5 and 2.0)
const supportsPathReplaceItem_ = (function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.replaceItem(seg, 1);
return true;
}catch (err) {/* empty */}
return false;
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.replaceItem(seg, 1);
return true;
}catch (err) {/* empty */}
return false;
}());
const supportsPathInsertItemBefore_ = (function () {
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.insertItemBefore(seg, 1);
return true;
}catch (err) {/* empty */}
return false;
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,10');
const seglist = path.pathSegList;
const seg = path.createSVGPathSegLinetoAbs(5, 5);
try {
seglist.insertItemBefore(seg, 1);
return true;
}catch (err) {/* empty */}
return false;
}());
// text character positioning (for IE9 and now Chrome)
const supportsGoodTextCharPos_ = (function () {
const svgroot = document.createElementNS(NS.SVG, 'svg');
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgroot);
svgcontent.setAttribute('x', 5);
svgroot.append(svgcontent);
const text = document.createElementNS(NS.SVG, 'text');
text.textContent = 'a';
svgcontent.append(text);
try { // Chrome now fails here
const pos = text.getStartPositionOfChar(0).x;
return (pos === 0);
} catch (err) {
return false;
} finally {
svgroot.remove();
}
const svgroot = document.createElementNS(NS.SVG, 'svg');
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgroot);
svgcontent.setAttribute('x', 5);
svgroot.append(svgcontent);
const text = document.createElementNS(NS.SVG, 'text');
text.textContent = 'a';
svgcontent.append(text);
try { // Chrome now fails here
const pos = text.getStartPositionOfChar(0).x;
return (pos === 0);
} catch (err) {
return false;
} finally {
svgroot.remove();
}
}());
const supportsPathBBox_ = (function () {
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C0,0 10,10 10,0');
svgcontent.append(path);
const bbox = path.getBBox();
svgcontent.remove();
return (bbox.height > 4 && bbox.height < 5);
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 C0,0 10,10 10,0');
svgcontent.append(path);
const bbox = path.getBBox();
svgcontent.remove();
return (bbox.height > 4 && bbox.height < 5);
}());
// Support for correct bbox sizing on groups with horizontal/vertical lines
const supportsHVLineContainerBBox_ = (function () {
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,0');
const path2 = document.createElementNS(NS.SVG, 'path');
path2.setAttribute('d', 'M5,0 15,0');
const g = document.createElementNS(NS.SVG, 'g');
g.append(path, path2);
svgcontent.append(g);
const bbox = g.getBBox();
svgcontent.remove();
// Webkit gives 0, FF gives 10, Opera (correctly) gives 15
return (bbox.width === 15);
const svgcontent = document.createElementNS(NS.SVG, 'svg');
document.documentElement.append(svgcontent);
const path = document.createElementNS(NS.SVG, 'path');
path.setAttribute('d', 'M0,0 10,0');
const path2 = document.createElementNS(NS.SVG, 'path');
path2.setAttribute('d', 'M5,0 15,0');
const g = document.createElementNS(NS.SVG, 'g');
g.append(path, path2);
svgcontent.append(g);
const bbox = g.getBBox();
svgcontent.remove();
// Webkit gives 0, FF gives 10, Opera (correctly) gives 15
return (bbox.width === 15);
}());
const supportsEditableText_ = (function () {
// TODO: Find better way to check support for this
return isOpera_;
return isOpera_;
}());
const supportsNonScalingStroke_ = (function () {
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'vector-effect:non-scaling-stroke');
return rect.style.vectorEffect === 'non-scaling-stroke';
const rect = document.createElementNS(NS.SVG, 'rect');
rect.setAttribute('style', 'vector-effect:non-scaling-stroke');
return rect.style.vectorEffect === 'non-scaling-stroke';
}());
let supportsNativeSVGTransformLists_ = (function () {
const rect = document.createElementNS(NS.SVG, 'rect');
const rxform = rect.transform.baseVal;
const t1 = svg.createSVGTransform();
rxform.appendItem(t1);
const r1 = rxform.getItem(0);
const isSVGTransform = (o) => {
const rect = document.createElementNS(NS.SVG, 'rect');
const rxform = rect.transform.baseVal;
const t1 = svg.createSVGTransform();
rxform.appendItem(t1);
const r1 = rxform.getItem(0);
const isSVGTransform = (o) => {
// https://developer.mozilla.org/en-US/docs/Web/API/SVGTransform
return o && typeof o === 'object' && typeof o.setMatrix === 'function' && 'angle' in o;
};
return isSVGTransform(r1) && isSVGTransform(t1) &&
return o && typeof o === 'object' && typeof o.setMatrix === 'function' && 'angle' in o;
};
return isSVGTransform(r1) && isSVGTransform(t1) &&
r1.type === t1.type && r1.angle === t1.angle &&
r1.matrix.a === t1.matrix.a &&
r1.matrix.b === t1.matrix.b &&

18
src/editor/Editor.js
View File

@ -281,11 +281,11 @@ class Editor extends EditorStartup {
parentSelector = document;
}
var parents = [];
var p = el.parentNode;
let parents = [];
let p = el.parentNode;
while (p !== parentSelector) {
var o = p;
let o = p;
parents.push(o);
p = o.parentNode;
}
@ -609,12 +609,12 @@ class Editor extends EditorStartup {
if (!this.multiselected) {
// eslint-disable-next-line sonarjs/no-small-switch
switch (mode) {
case 'rotate': {
const ang = this.svgCanvas.getRotationAngle(elem);
$id('angle').value = ang;
(ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled');
break;
}
case 'rotate': {
const ang = this.svgCanvas.getRotationAngle(elem);
$id('angle').value = ang;
(ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled');
break;
}
}
}
this.svgCanvas.runExtensions('elementTransition', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementTransition} */ {

4
src/editor/EditorStartup.js
View File

@ -255,8 +255,8 @@ class EditorStartup {
});
function addListenerMulti(element, eventNames, listener) {
var events = eventNames.split(' ');
for (var i=0, iLen=events.length; i<iLen; i++) {
let events = eventNames.split(' ');
for (let i=0, iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i], listener, false);
}
}

2
src/editor/components/PaintBox.js
View File

@ -75,7 +75,7 @@ class PaintBox {
console.error(`the color ${color} is referenced by an url that can't be identified - using 'none'`);
opts.solidColor = 'none';
} else {
opts[refElem.tagName] = refElem;
opts[refElem.tagName] = refElem;
}
} else if (color.startsWith('#')) {
opts.solidColor = color.substr(1);

2
src/editor/components/jgraduate/Util.js
View File

@ -102,7 +102,7 @@ export function getClosest(elem, selector) {
* @param {String} selector The class, id, data attribute, or tag to look for
* @return {Array} Null if no match
*/
export function getParents(elem, selector) {
export function getParents(elem, selector) {
const parents = [];
let firstChar;
if ( selector ) {

2
src/editor/components/jgraduate/jQuery.jPicker.js
View File

@ -608,7 +608,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc
sets = mergeDeep(sets, options);
const that = elem,
settings = sets;
settings = sets;
if (that.nodeName.toLowerCase() === 'input') { // Add color picker icon if binding to an input element and bind the events to the input
Object.assign(settings, {
window: {

2
src/editor/components/seColorPicker.js
View File

@ -674,7 +674,7 @@ export class SeColorPicker extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.i18next = i18next;
this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color'));
}

6
src/editor/dialogs/cmenuDialog.js
View File

@ -168,9 +168,9 @@ export class SeCMenuDialog extends HTMLElement {
*/
static get observedAttributes () {
return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut',
'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group',
'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down',
'tools-move_back' ];
'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group',
'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down',
'tools-move_back' ];
}
/**
* @function attributeChangedCallback

2
src/editor/dialogs/cmenuLayersDialog.js
View File

@ -97,7 +97,7 @@ export class SeCMenuLayerDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('layers-dupe', i18next.t('layers.dupe'));
this.setAttribute('layers-del', i18next.t('layers.del'));
this.setAttribute('layers-merge_down', i18next.t('layers.merge_down'));

2
src/editor/dialogs/editorPreferencesDialog.js
View File

@ -267,7 +267,7 @@ export class SeEditPrefsDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('config-editor_prefs', i18next.t('config.editor_prefs'));

2
src/editor/dialogs/exportDialog.js
View File

@ -101,7 +101,7 @@ export class SeExportDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('ui-quality', i18next.t('ui.quality'));

10
src/editor/dialogs/imagePropertiesDialog.js
View File

@ -145,7 +145,7 @@ export class SeImgPropDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('config-image_props', i18next.t('config.image_props'));
@ -166,10 +166,10 @@ export class SeImgPropDialog extends HTMLElement {
*/
static get observedAttributes () {
return [ 'title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok',
'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims',
'common-width', 'common-height', 'config-select_predefined',
'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed',
'config-image_opt_ref' ];
'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims',
'common-width', 'common-height', 'config-select_predefined',
'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed',
'config-image_opt_ref' ];
}
/**
* @function attributeChangedCallback

2
src/editor/dialogs/svgSourceDialog.js
View File

@ -99,7 +99,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('tools-source_save', i18next.t('tools.source_save'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('notification-source_dialog_note', i18next.t('notification.source_dialog_note'));

2
src/editor/extensions/ext-foreignobject/ext-foreignobject.js
View File

@ -221,7 +221,7 @@ export default {
// setSelectMode();
});
var oldToolSourceCancel = $id('tool_source_cancel');
let oldToolSourceCancel = $id('tool_source_cancel');
const toolSourceCancel = oldToolSourceCancel.cloneNode(true);
toolSourceCancel.style.display = 'none';
toolSourceCancel.id = 'foreign_cancel';

4
src/editor/extensions/ext-grid/ext-grid.js
View File

@ -7,9 +7,9 @@
*
*/
const name = "grid";
const name = "grid";
const loadExtensionTranslation = async function (svgEditor) {
const loadExtensionTranslation = async function (svgEditor) {
let translationModule;
const lang = svgEditor.configObj.pref('lang');
try {

316
src/editor/extensions/ext-imagelib/ext-imagelib.js
View File

@ -9,22 +9,22 @@
*
*/
const name = "imagelib";
const name = "imagelib";
const loadExtensionTranslation = async function (svgEditor) {
let translationModule;
const lang = svgEditor.configObj.pref('lang');
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${lang}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/en.js`);
}
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
};
const loadExtensionTranslation = async function (svgEditor) {
let translationModule;
const lang = svgEditor.configObj.pref('lang');
try {
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${lang}.js`);
} catch (_error) {
// eslint-disable-next-line no-console
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
// eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/en.js`);
}
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
};
export default {
name,
@ -192,154 +192,154 @@ export default {
let entry, curMeta, svgStr, imgStr;
switch (type) {
case 'meta': {
// Metadata
transferStopped = false;
curMeta = response;
case 'meta': {
// Metadata
transferStopped = false;
curMeta = response;
// Should be safe to add dynamic property as passed metadata
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]
// Should be safe to add dynamic property as passed metadata
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection]
const name = (curMeta.name || 'file');
const name = (curMeta.name || 'file');
const message = svgEditor.i18next.t('notification.retrieving').replace('%s', name);
const message = svgEditor.i18next.t('notification.retrieving').replace('%s', name);
if (mode !== 'm') {
await seConfirm(message);
transferStopped = true;
} else {
entry = document.createElement('div');
entry.textContent = message;
entry.dataset.id = curMeta.id;
preview.appendChild(entry);
curMeta.entry = entry;
}
return;
if (mode !== 'm') {
await seConfirm(message);
transferStopped = true;
} else {
entry = document.createElement('div');
entry.textContent = message;
entry.dataset.id = curMeta.id;
preview.appendChild(entry);
curMeta.entry = entry;
}
case '<':
return;
}
case '<':
svgStr = true;
break;
case 'd': {
if (response.startsWith('data:image/svg+xml')) {
const pre = 'data:image/svg+xml;base64,';
const src = response.substring(pre.length);
response = decode64(src);
svgStr = true;
break;
case 'd': {
if (response.startsWith('data:image/svg+xml')) {
const pre = 'data:image/svg+xml;base64,';
const src = response.substring(pre.length);
response = decode64(src);
svgStr = true;
break;
} else if (response.startsWith('data:image/')) {
imgStr = true;
break;
}
} else if (response.startsWith('data:image/')) {
imgStr = true;
break;
}
// Else fall through
default:
// TODO: See if there's a way to base64 encode the binary data stream
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
}
// Else fall through
default:
// TODO: See if there's a way to base64 encode the binary data stream
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true);
// Assume it's raw image data
// importImage(str);
// Assume it's raw image data
// importImage(str);
// Don't give warning as postMessage may have been used by something else
if (mode !== 'm') {
closeBrowser();
} else {
pending[id].entry.remove();
}
// await alert('Unexpected data was returned: ' + response, function() {
// if (mode !== 'm') {
// closeBrowser();
// } else {
// pending[id].entry.remove();
// }
// });
return;
// Don't give warning as postMessage may have been used by something else
if (mode !== 'm') {
closeBrowser();
} else {
pending[id].entry.remove();
}
// await alert('Unexpected data was returned: ' + response, function() {
// if (mode !== 'm') {
// closeBrowser();
// } else {
// pending[id].entry.remove();
// }
// });
return;
}
switch (mode) {
case 's':
// Import one
if (svgStr) {
svgEditor.svgCanvas.importSvgString(response);
} else if (imgStr) {
importImage(response);
}
closeBrowser();
break;
case 'm': {
// Import multiple
multiArr.push([ (svgStr ? 'svg' : 'img'), response ]);
curMeta = pending[id];
let title;
if (svgStr) {
if (curMeta && curMeta.name) {
title = curMeta.name;
} else {
// Try to find a title
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')';
}
if (curMeta) {
Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) {
if (curMeta.preview_url) {
const img = document.createElement("img");
img.src = curMeta.preview_url;
const span = document.createElement("span");
span.appendChild(img);
element.append(span);
} else {
element.textContent = title;
}
submit.removeAttribute('disabled');
}
});
} else {
const div = document.createElement("div");
div.textContent = title;
preview.appendChild(div);
submit.removeAttribute('disabled');
}
} else {
if (curMeta && curMeta.preview_url) {
title = curMeta.name || '';
entry = document.createElement('span');
const img = document.createElement("img");
img.src = curMeta.preview_url;
entry.appendChild(img);
entry.appendChild(document.createTextNode(title));
} else {
entry = document.createElement("img");
entry.src = response;
}
if (curMeta) {
Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) {
element.appendChild(entry);
submit.removeAttribute('disabled');
}
});
} else {
const div = document.createElement("div");
div.appendChild(entry);
preview.appendChild(div);
submit.removeAttribute('disabled');
}
}
break;
} case 'o': {
// Open
if (!svgStr) { break; }
closeBrowser();
const ok = await svgEditor.openPrep();
if (!ok) { return; }
svgCanvas.clear();
svgCanvas.setSvgString(response);
// updateCanvas();
break;
case 's':
// Import one
if (svgStr) {
svgEditor.svgCanvas.importSvgString(response);
} else if (imgStr) {
importImage(response);
}
closeBrowser();
break;
case 'm': {
// Import multiple
multiArr.push([ (svgStr ? 'svg' : 'img'), response ]);
curMeta = pending[id];
let title;
if (svgStr) {
if (curMeta && curMeta.name) {
title = curMeta.name;
} else {
// Try to find a title
// `dropXMLInternalSubset` is to help prevent the billion laughs attack
const xml = new DOMParser().parseFromString(dropXMLInternalSubset(response), 'text/xml').documentElement; // lgtm [js/xml-bomb]
title = xml.querySelector('title').textContent || '(SVG #' + response.length + ')';
}
if (curMeta) {
Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) {
if (curMeta.preview_url) {
const img = document.createElement("img");
img.src = curMeta.preview_url;
const span = document.createElement("span");
span.appendChild(img);
element.append(span);
} else {
element.textContent = title;
}
submit.removeAttribute('disabled');
}
});
} else {
const div = document.createElement("div");
div.textContent = title;
preview.appendChild(div);
submit.removeAttribute('disabled');
}
} else {
if (curMeta && curMeta.preview_url) {
title = curMeta.name || '';
entry = document.createElement('span');
const img = document.createElement("img");
img.src = curMeta.preview_url;
entry.appendChild(img);
entry.appendChild(document.createTextNode(title));
} else {
entry = document.createElement("img");
entry.src = response;
}
if (curMeta) {
Array.from(preview.children).forEach(function (element) {
if (element.dataset.id === id) {
element.appendChild(entry);
submit.removeAttribute('disabled');
}
});
} else {
const div = document.createElement("div");
div.appendChild(entry);
preview.appendChild(div);
submit.removeAttribute('disabled');
}
}
break;
} case 'o': {
// Open
if (!svgStr) { break; }
closeBrowser();
const ok = await svgEditor.openPrep();
if (!ok) { return; }
svgCanvas.clear();
svgCanvas.setSvgString(response);
// updateCanvas();
break;
}
}
}
@ -475,15 +475,15 @@ export default {
select.addEventListener('change', function () {
mode = this.value;
switch (mode) {
case 's':
case 'o':
toggleMulti(false);
break;
case 's':
case 'o':
toggleMulti(false);
break;
case 'm':
// Import multiple
toggleMulti(true);
break;
case 'm':
// Import multiple
toggleMulti(true);
break;
}
});
select.setAttribute('style', `margin-top: 10px;`);
@ -507,7 +507,7 @@ export default {
libOpts.style.display = 'none';
back.style.display = 'block';
});
var span = document.createElement("span");
let span = document.createElement("span");
span.textContent = description;
li.appendChild(span);
});

12
src/editor/extensions/ext-imagelib/index.js
View File

@ -41,14 +41,14 @@ Array.prototype.forEach.call(atags, function (aEle) {
img.src = href;
} else {
fetch(href)
.then( (r) => r.text())
.then( (r) => r.text())
// eslint-disable-next-line promise/always-return
.then( (data) => {
post({ href, data });
return data;
})
.then( (data) => {
post({ href, data });
return data;
})
// eslint-disable-next-line no-console
.catch( (error) => console.log(error));
.catch( (error) => console.log(error));
}
return false;
});

4
src/editor/extensions/ext-mathjax/ext-mathjax.js
View File

@ -232,7 +232,7 @@ export default {
},
callback () {
const head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style = document.createElement('style');
style.textContent = '#mathjax fieldset{' +
'padding: 5px;' +
'margin: 5px;' +
@ -281,7 +281,7 @@ export default {
'display: block;' +
'height: 100px;' +
'}';
head.appendChild(style);
head.appendChild(style);
}
};
}

2
src/editor/extensions/ext-overview_window/ext-overview_window.js
View File

@ -81,7 +81,7 @@ export default {
// Compensate for changes in zoom and canvas size.
const updateViewDimensions = function () {
const viewWidth = parseFloat(getComputedStyle($id("svgroot"), null).width.replace("px", ""));
const viewWidth = parseFloat(getComputedStyle($id("svgroot"), null).width.replace("px", ""));
const viewHeight = parseFloat(getComputedStyle($id("svgroot"), null).height.replace("px", ""));
const viewX = 640;

4
src/editor/extensions/ext-placemark/ext-placemark.js
View File

@ -104,7 +104,7 @@ export default {
const items = txt.split(';');
selElems.forEach((elem) => {
if (elem && elem.getAttribute('class').includes('placemark')) {
var elements = elem.children;
let elements = elem.children;
Array.prototype.forEach.call(elements, function(i, _){
const [ , , type, n ] = i.id.split('_');
if (type === 'txt') {
@ -125,7 +125,7 @@ export default {
font = font.join(' ');
selElems.forEach((elem) => {
if (elem && elem.getAttribute('class').includes('placemark')) {
var elements = elem.children;
let elements = elem.children;
Array.prototype.forEach.call(elements, function(i, _){
const [ , , type ] = i.id.split('_');
if (type === 'txt') {

2
src/editor/extensions/ext-server_opensave/ext-php_savefile.js
View File

@ -30,7 +30,7 @@ export default {
}).then( (res) => {
return res;
})
.catch( (error) => { console.info('error =', error);});
.catch( (error) => { console.info('error =', error);});
}
});
}

2
src/editor/extensions/ext-storage/storageDialog.js
View File

@ -94,7 +94,7 @@ export class SeStorageDialog extends HTMLElement {
* @param {any} name
* @returns {void}
*/
init (i18next) {
init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('notify-editor_pref_msg', i18next.t('notification.editorPreferencesMsg'));

2
src/editor/locale.js
View File

@ -8,7 +8,7 @@
*
*/
import i18next from 'i18next';
import i18next from 'i18next';
/**
* Used, for example, in the ImageLibs extension, to present libraries

202
src/editor/panels/BottomPanel.js
View File

@ -16,132 +16,132 @@ class BottomPanel {
constructor (editor) {
this.editor = editor;
}
/**
/**
* @type {module}
*/
get selectedElement () {
return this.editor.selectedElement;
}
/**
get selectedElement () {
return this.editor.selectedElement;
}
/**
* @type {module}
*/
get multiselected () {
return this.editor.multiselected;
}
/**
get multiselected () {
return this.editor.multiselected;
}
/**
* @type {module}
*/
changeStrokeWidth (e) {
let val = e.target.value;
if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) {
val = 1;
}
this.editor.svgCanvas.setStrokeWidth(val);
changeStrokeWidth (e) {
let val = e.target.value;
if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) {
val = 1;
}
/**
this.editor.svgCanvas.setStrokeWidth(val);
}
/**
* @type {module}
*/
changeZoom (value) {
switch (value) {
case 'canvas':
case 'selection':
case 'layer':
case 'content':
this.editor.zoomChanged(window, value);
break;
default:
{
const zoomlevel = Number(value) / 100;
if (zoomlevel < 0.001) {
value = 0.1;
return;
}
const zoom = this.editor.svgCanvas.getZoom();
const wArea = this.editor.workarea;
this.editor.zoomChanged(window, {
width: 0,
height: 0,
// center pt of scroll position
x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
zoom: zoomlevel
}, true);
}
changeZoom (value) {
switch (value) {
case 'canvas':
case 'selection':
case 'layer':
case 'content':
this.editor.zoomChanged(window, value);
break;
default:
{
const zoomlevel = Number(value) / 100;
if (zoomlevel < 0.001) {
value = 0.1;
return;
}
const zoom = this.editor.svgCanvas.getZoom();
const wArea = this.editor.workarea;
this.editor.zoomChanged(window, {
width: 0,
height: 0,
// center pt of scroll position
x: (wArea.scrollLeft + parseFloat(getComputedStyle(wArea, null).width.replace("px", "")) / 2) / zoom,
y: (wArea.scrollTop + parseFloat(getComputedStyle(wArea, null).height.replace("px", "")) / 2) / zoom,
zoom: zoomlevel
}, true);
}
/**
}
}
/**
* @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
* @returns {void}
*/
updateToolButtonState () {
const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ];
const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path'
];
updateToolButtonState () {
const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ];
const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path'
];
if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanel.clickSelect();
}
$id(btn).disabled = true;
});
} else {
buttonsNeedingStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
if (bNoStroke && bNoFill) {
// eslint-disable-next-line sonarjs/no-identical-functions
buttonsNeedingFillAndStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanel.clickSelect();
}
$id(btn).disabled = true;
});
} else {
buttonsNeedingFillAndStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
this.editor.svgCanvas.runExtensions(
'toolButtonStateUpdate',
/** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
nofill: bNoFill,
nostroke: bNoStroke
if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanel.clickSelect();
}
);
$id(btn).disabled = true;
});
} else {
buttonsNeedingStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
/**
if (bNoStroke && bNoFill) {
// eslint-disable-next-line sonarjs/no-identical-functions
buttonsNeedingFillAndStroke.forEach((btn) => {
// if btn is pressed, change to select button
if ($id(btn).pressed) {
this.editor.leftPanel.clickSelect();
}
$id(btn).disabled = true;
});
} else {
buttonsNeedingFillAndStroke.forEach((btn) => {
$id(btn).disabled = false;
});
}
this.editor.svgCanvas.runExtensions(
'toolButtonStateUpdate',
/** @type {module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate} */ {
nofill: bNoFill,
nostroke: bNoStroke
}
);
}
/**
* @type {module}
*/
handleColorPicker (type, evt) {
const { paint } = evt.detail;
this.editor.svgCanvas.setPaint(type, paint);
this.updateToolButtonState();
}
/**
handleColorPicker (type, evt) {
const { paint } = evt.detail;
this.editor.svgCanvas.setPaint(type, paint);
this.updateToolButtonState();
}
/**
* @type {module}
*/
handleStrokeAttr (type, evt) {
this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
}
/**
handleStrokeAttr (type, evt) {
this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
}
/**
* @type {module}
*/
handleOpacity (evt) {
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.editor.svgCanvas.setOpacity(val / 100);
}
handleOpacity (evt) {
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.editor.svgCanvas.setOpacity(val / 100);
}
/**
* @type {module}
*/
handlePalette (e) {
handlePalette (e) {
e.preventDefault();
// shift key or right click for stroke
const { picker, color } = e.detail;
@ -233,7 +233,7 @@ class BottomPanel {
/**
* @type {module}
*/
updateColorpickers (apply) {
updateColorpickers (apply) {
$id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
$id('stroke_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
}

30
src/editor/panels/LayersPanel.js
View File

@ -92,20 +92,20 @@ class LayersPanel {
lmenuFunc(e) {
const action = e?.detail?.trigger;
switch (action) {
case "dupe":
this.cloneLayer();
break;
case "delete":
this.deleteLayer();
break;
case "merge_down":
this.mergeLayer();
break;
case "merge_all":
this.editor.svgCanvas.mergeAllLayers();
this.updateContextPanel();
this.populateLayers();
break;
case "dupe":
this.cloneLayer();
break;
case "delete":
this.deleteLayer();
break;
case "merge_down":
this.mergeLayer();
break;
case "merge_all":
this.editor.svgCanvas.mergeAllLayers();
this.updateContextPanel();
this.populateLayers();
break;
}
}
/**
@ -283,7 +283,7 @@ class LayersPanel {
index(el) {
if (!el) return -1;
var i = 0;
let i = 0;
do {
i++;
} while (el == el.previousElementSibling);

98
src/editor/panels/TopPanel.js
View File

@ -68,48 +68,48 @@ class TopPanel {
let i, len;
if (!isNullish(this.selectedElement)) {
switch (this.selectedElement.tagName) {
case "use":
case "image":
case "foreignObject":
break;
case "g":
case "a": {
// Look for common styles
const childs = this.selectedElement.getElementsByTagName("*");
let gWidth = null;
for (i = 0, len = childs.length; i < len; i++) {
const swidth = childs[i].getAttribute("stroke-width");
case "use":
case "image":
case "foreignObject":
break;
case "g":
case "a": {
// Look for common styles
const childs = this.selectedElement.getElementsByTagName("*");
let gWidth = null;
for (i = 0, len = childs.length; i < len; i++) {
const swidth = childs[i].getAttribute("stroke-width");
if (i === 0) {
gWidth = swidth;
} else if (gWidth !== swidth) {
gWidth = null;
}
if (i === 0) {
gWidth = swidth;
} else if (gWidth !== swidth) {
gWidth = null;
}
$id("stroke_width").value = (gWidth === null ? "" : gWidth);
this.editor.bottomPanel.updateColorpickers(true);
break;
}
default: {
this.editor.bottomPanel.updateColorpickers(true);
$id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1;
$id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none";
$id("stroke_width").value = (gWidth === null ? "" : gWidth);
this.editor.bottomPanel.updateColorpickers(true);
break;
}
default: {
this.editor.bottomPanel.updateColorpickers(true);
let attr =
$id("stroke_width").value = this.selectedElement.getAttribute("stroke-width") || 1;
$id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none";
let attr =
this.selectedElement.getAttribute("stroke-linejoin") || "miter";
if ($id("linejoin_" + attr).length) {
this.setStrokeOpt($id("linejoin_" + attr));
}
attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
if ($id("linecap_" + attr).length) {
this.setStrokeOpt($id("linecap_" + attr));
}
if ($id("linejoin_" + attr).length) {
this.setStrokeOpt($id("linejoin_" + attr));
}
attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
if ($id("linecap_" + attr).length) {
this.setStrokeOpt($id("linecap_" + attr));
}
}
}
}
@ -332,21 +332,21 @@ class TopPanel {
const textAnchorMiddle = $id("tool_text_anchor_middle");
const textAnchorEnd = $id("tool_text_anchor_end");
switch (elem.getAttribute("text-anchor")) {
case "start":
textAnchorStart.pressed = true;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = false;
break;
case "middle":
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = true;
textAnchorEnd.pressed = false;
break;
case "end":
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = true;
break;
case "start":
textAnchorStart.pressed = true;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = false;
break;
case "middle":
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = true;
textAnchorEnd.pressed = false;
break;
case "end":
textAnchorStart.pressed = false;
textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = true;
break;
}
if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9

372
src/svgcanvas/coords.js
View File

@ -115,192 +115,192 @@ export const remapElement = function (selected, changes, m) {
// now we have a set of changes and an applied reduced transform list
// we apply the changes directly to the DOM
switch (elName) {
case 'foreignObject':
case 'rect':
case 'image': {
// Allow images to be inverted (give them matrix when flipped)
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
// Convert to matrix
const chlist = getTransformList(selected);
const mt = editorContext_.getSVGRoot().createSVGTransform();
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
chlist.clear();
chlist.appendItem(mt);
} else {
const pt1 = remap(changes.x, changes.y);
changes.width = scalew(changes.width);
changes.height = scaleh(changes.height);
changes.x = pt1.x + Math.min(0, changes.width);
changes.y = pt1.y + Math.min(0, changes.height);
changes.width = Math.abs(changes.width);
changes.height = Math.abs(changes.height);
}
finishUp();
break;
} case 'ellipse': {
const c = remap(changes.cx, changes.cy);
changes.cx = c.x;
changes.cy = c.y;
changes.rx = scalew(changes.rx);
changes.ry = scaleh(changes.ry);
changes.rx = Math.abs(changes.rx);
changes.ry = Math.abs(changes.ry);
finishUp();
break;
} case 'circle': {
const c = remap(changes.cx, changes.cy);
changes.cx = c.x;
changes.cy = c.y;
// take the minimum of the new selected box's dimensions for the new circle radius
const tbox = transformBox(box.x, box.y, box.width, box.height, m);
const w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y;
changes.r = Math.min(w / 2, h / 2);
if (changes.r) { changes.r = Math.abs(changes.r); }
finishUp();
break;
} case 'line': {
const pt1 = remap(changes.x1, changes.y1);
const pt2 = remap(changes.x2, changes.y2);
changes.x1 = pt1.x;
changes.y1 = pt1.y;
changes.x2 = pt2.x;
changes.y2 = pt2.y;
} // Fallthrough
case 'text':
case 'tspan':
case 'use': {
finishUp();
break;
} case 'g': {
const dataStorage = editorContext_.getDataStorage();
const gsvg = dataStorage.get(selected, 'gsvg');
if (gsvg) {
assignAttributes(gsvg, changes, 1000, true);
}
break;
} case 'polyline':
case 'polygon': {
const len = changes.points.length;
for (let i = 0; i < len; ++i) {
const pt = changes.points[i];
const { x, y } = remap(pt.x, pt.y);
changes.points[i].x = x;
changes.points[i].y = y;
}
// const len = changes.points.length;
let pstr = '';
for (let i = 0; i < len; ++i) {
const pt = changes.points[i];
pstr += pt.x + ',' + pt.y + ' ';
}
selected.setAttribute('points', pstr);
break;
} case 'path': {
const segList = selected.pathSegList;
let len = segList.numberOfItems;
changes.d = [];
for (let i = 0; i < len; ++i) {
const seg = segList.getItem(i);
changes.d[i] = {
type: seg.pathSegType,
x: seg.x,
y: seg.y,
x1: seg.x1,
y1: seg.y1,
x2: seg.x2,
y2: seg.y2,
r1: seg.r1,
r2: seg.r2,
angle: seg.angle,
largeArcFlag: seg.largeArcFlag,
sweepFlag: seg.sweepFlag
};
}
len = changes.d.length;
const firstseg = changes.d[0],
currentpt = remap(firstseg.x, firstseg.y);
changes.d[0].x = currentpt.x;
changes.d[0].y = currentpt.y;
for (let i = 1; i < len; ++i) {
const seg = changes.d[i];
const { type } = seg;
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
// if relative, we want to scalew, scaleh
if (type % 2 === 0) { // absolute
const thisx = (seg.x !== undefined) ? seg.x : currentpt.x, // for V commands
thisy = (seg.y !== undefined) ? seg.y : currentpt.y; // for H commands
const pt = remap(thisx, thisy);
const pt1 = remap(seg.x1, seg.y1);
const pt2 = remap(seg.x2, seg.y2);
seg.x = pt.x;
seg.y = pt.y;
seg.x1 = pt1.x;
seg.y1 = pt1.y;
seg.x2 = pt2.x;
seg.y2 = pt2.y;
seg.r1 = scalew(seg.r1);
seg.r2 = scaleh(seg.r2);
} else { // relative
seg.x = scalew(seg.x);
seg.y = scaleh(seg.y);
seg.x1 = scalew(seg.x1);
seg.y1 = scaleh(seg.y1);
seg.x2 = scalew(seg.x2);
seg.y2 = scaleh(seg.y2);
seg.r1 = scalew(seg.r1);
seg.r2 = scaleh(seg.r2);
}
} // for each segment
let dstr = '';
len = changes.d.length;
for (let i = 0; i < len; ++i) {
const seg = changes.d[i];
const { type } = seg;
dstr += pathMap[type];
switch (type) {
case 13: // relative horizontal line (h)
case 12: // absolute horizontal line (H)
dstr += seg.x + ' ';
break;
case 15: // relative vertical line (v)
case 14: // absolute vertical line (V)
dstr += seg.y + ' ';
break;
case 3: // relative move (m)
case 5: // relative line (l)
case 19: // relative smooth quad (t)
case 2: // absolute move (M)
case 4: // absolute line (L)
case 18: // absolute smooth quad (T)
dstr += seg.x + ',' + seg.y + ' ';
break;
case 7: // relative cubic (c)
case 6: // absolute cubic (C)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
seg.x + ',' + seg.y + ' ';
break;
case 9: // relative quad (q)
case 8: // absolute quad (Q)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' ';
break;
case 11: // relative elliptical arc (a)
case 10: // absolute elliptical arc (A)
dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' ';
break;
case 17: // relative smooth cubic (s)
case 16: // absolute smooth cubic (S)
dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' ';
break;
}
}
selected.setAttribute('d', dstr);
break;
case 'foreignObject':
case 'rect':
case 'image': {
// Allow images to be inverted (give them matrix when flipped)
if (elName === 'image' && (m.a < 0 || m.d < 0)) {
// Convert to matrix
const chlist = getTransformList(selected);
const mt = editorContext_.getSVGRoot().createSVGTransform();
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
chlist.clear();
chlist.appendItem(mt);
} else {
const pt1 = remap(changes.x, changes.y);
changes.width = scalew(changes.width);
changes.height = scaleh(changes.height);
changes.x = pt1.x + Math.min(0, changes.width);
changes.y = pt1.y + Math.min(0, changes.height);
changes.width = Math.abs(changes.width);
changes.height = Math.abs(changes.height);
}
finishUp();
break;
} case 'ellipse': {
const c = remap(changes.cx, changes.cy);
changes.cx = c.x;
changes.cy = c.y;
changes.rx = scalew(changes.rx);
changes.ry = scaleh(changes.ry);
changes.rx = Math.abs(changes.rx);
changes.ry = Math.abs(changes.ry);
finishUp();
break;
} case 'circle': {
const c = remap(changes.cx, changes.cy);
changes.cx = c.x;
changes.cy = c.y;
// take the minimum of the new selected box's dimensions for the new circle radius
const tbox = transformBox(box.x, box.y, box.width, box.height, m);
const w = tbox.tr.x - tbox.tl.x, h = tbox.bl.y - tbox.tl.y;
changes.r = Math.min(w / 2, h / 2);
if (changes.r) { changes.r = Math.abs(changes.r); }
finishUp();
break;
} case 'line': {
const pt1 = remap(changes.x1, changes.y1);
const pt2 = remap(changes.x2, changes.y2);
changes.x1 = pt1.x;
changes.y1 = pt1.y;
changes.x2 = pt2.x;
changes.y2 = pt2.y;
} // Fallthrough
case 'text':
case 'tspan':
case 'use': {
finishUp();
break;
} case 'g': {
const dataStorage = editorContext_.getDataStorage();
const gsvg = dataStorage.get(selected, 'gsvg');
if (gsvg) {
assignAttributes(gsvg, changes, 1000, true);
}
break;
} case 'polyline':
case 'polygon': {
const len = changes.points.length;
for (let i = 0; i < len; ++i) {
const pt = changes.points[i];
const { x, y } = remap(pt.x, pt.y);
changes.points[i].x = x;
changes.points[i].y = y;
}
// const len = changes.points.length;
let pstr = '';
for (let i = 0; i < len; ++i) {
const pt = changes.points[i];
pstr += pt.x + ',' + pt.y + ' ';
}
selected.setAttribute('points', pstr);
break;
} case 'path': {
const segList = selected.pathSegList;
let len = segList.numberOfItems;
changes.d = [];
for (let i = 0; i < len; ++i) {
const seg = segList.getItem(i);
changes.d[i] = {
type: seg.pathSegType,
x: seg.x,
y: seg.y,
x1: seg.x1,
y1: seg.y1,
x2: seg.x2,
y2: seg.y2,
r1: seg.r1,
r2: seg.r2,
angle: seg.angle,
largeArcFlag: seg.largeArcFlag,
sweepFlag: seg.sweepFlag
};
}
len = changes.d.length;
const firstseg = changes.d[0],
currentpt = remap(firstseg.x, firstseg.y);
changes.d[0].x = currentpt.x;
changes.d[0].y = currentpt.y;
for (let i = 1; i < len; ++i) {
const seg = changes.d[i];
const { type } = seg;
// if absolute or first segment, we want to remap x, y, x1, y1, x2, y2
// if relative, we want to scalew, scaleh
if (type % 2 === 0) { // absolute
const thisx = (seg.x !== undefined) ? seg.x : currentpt.x, // for V commands
thisy = (seg.y !== undefined) ? seg.y : currentpt.y; // for H commands
const pt = remap(thisx, thisy);
const pt1 = remap(seg.x1, seg.y1);
const pt2 = remap(seg.x2, seg.y2);
seg.x = pt.x;
seg.y = pt.y;
seg.x1 = pt1.x;
seg.y1 = pt1.y;
seg.x2 = pt2.x;
seg.y2 = pt2.y;
seg.r1 = scalew(seg.r1);
seg.r2 = scaleh(seg.r2);
} else { // relative
seg.x = scalew(seg.x);
seg.y = scaleh(seg.y);
seg.x1 = scalew(seg.x1);
seg.y1 = scaleh(seg.y1);
seg.x2 = scalew(seg.x2);
seg.y2 = scaleh(seg.y2);
seg.r1 = scalew(seg.r1);
seg.r2 = scaleh(seg.r2);
}
} // for each segment
let dstr = '';
len = changes.d.length;
for (let i = 0; i < len; ++i) {
const seg = changes.d[i];
const { type } = seg;
dstr += pathMap[type];
switch (type) {
case 13: // relative horizontal line (h)
case 12: // absolute horizontal line (H)
dstr += seg.x + ' ';
break;
case 15: // relative vertical line (v)
case 14: // absolute vertical line (V)
dstr += seg.y + ' ';
break;
case 3: // relative move (m)
case 5: // relative line (l)
case 19: // relative smooth quad (t)
case 2: // absolute move (M)
case 4: // absolute line (L)
case 18: // absolute smooth quad (T)
dstr += seg.x + ',' + seg.y + ' ';
break;
case 7: // relative cubic (c)
case 6: // absolute cubic (C)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x2 + ',' + seg.y2 + ' ' +
seg.x + ',' + seg.y + ' ';
break;
case 9: // relative quad (q)
case 8: // absolute quad (Q)
dstr += seg.x1 + ',' + seg.y1 + ' ' + seg.x + ',' + seg.y + ' ';
break;
case 11: // relative elliptical arc (a)
case 10: // absolute elliptical arc (A)
dstr += seg.r1 + ',' + seg.r2 + ' ' + seg.angle + ' ' + Number(seg.largeArcFlag) +
' ' + Number(seg.sweepFlag) + ' ' + seg.x + ',' + seg.y + ' ';
break;
case 17: // relative smooth cubic (s)
case 16: // absolute smooth cubic (S)
dstr += seg.x2 + ',' + seg.y2 + ' ' + seg.x + ',' + seg.y + ' ';
break;
}
}
selected.setAttribute('d', dstr);
break;
}
}
};

2
src/svgcanvas/copy-elem.js
View File

@ -13,7 +13,7 @@ export const copyElem = function (el, getNextId) {
// manually create a copy of the element
const newEl = document.createElementNS(el.namespaceURI, el.nodeName);
Object.values(el.attributes).forEach((attr) => {
newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);
newEl.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.value);
});
// set the copied element's new id
newEl.removeAttribute('id');

60
src/svgcanvas/elem-get-set.js
View File

@ -265,29 +265,29 @@ export const setBBoxZoomMethod = function (val, editorW, editorH) {
}
switch (val) {
case 'selection': {
if (!selectedElements[0]) { return undefined; }
const selectedElems = selectedElements.map(function (n, _) {
if (n) {
return n;
}
return undefined;
});
bb = getStrokedBBoxDefaultVisible(selectedElems);
break;
} case 'canvas': {
const res = elemContext_.getCanvas().getResolution();
spacer = 0.95;
bb = { width: res.w, height: res.h, x: 0, y: 0 };
break;
} case 'content':
bb = getStrokedBBoxDefaultVisible();
break;
case 'layer':
bb = getStrokedBBoxDefaultVisible(getVisibleElements(elemContext_.getCanvas().getCurrentDrawing().getCurrentLayer()));
break;
default:
case 'selection': {
if (!selectedElements[0]) { return undefined; }
const selectedElems = selectedElements.map(function (n, _) {
if (n) {
return n;
}
return undefined;
});
bb = getStrokedBBoxDefaultVisible(selectedElems);
break;
} case 'canvas': {
const res = elemContext_.getCanvas().getResolution();
spacer = 0.95;
bb = { width: res.w, height: res.h, x: 0, y: 0 };
break;
} case 'content':
bb = getStrokedBBoxDefaultVisible();
break;
case 'layer':
bb = getStrokedBBoxDefaultVisible(getVisibleElements(elemContext_.getCanvas().getCurrentDrawing().getCurrentLayer()));
break;
default:
return undefined;
}
return calcZoom(bb);
};
@ -476,14 +476,14 @@ export const setPaintMethod = function (type, paint) {
// now set the current paint object
elemContext_.setCurProperties(type + '_paint', p);
switch (p.type) {
case 'solidColor':
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
break;
case 'linearGradient':
case 'radialGradient':
elemContext_.setCanvas(type + 'Grad', p[p.type]);
elemContext_.getCanvas().setGradient(type);
break;
case 'solidColor':
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
break;
case 'linearGradient':
case 'radialGradient':
elemContext_.setCanvas(type + 'Grad', p[p.type]);
elemContext_.getCanvas().setGradient(type);
break;
}
};
/**

1678
src/svgcanvas/event.js
View File

File diff suppressed because it is too large Load Diff

142
src/svgcanvas/recalculate.js
View File

@ -163,17 +163,17 @@ export const recalculateDimensions = function (selected) {
// If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
switch (selected.tagName) {
// Ignore these elements, as they can absorb the [M]
case 'line':
case 'polyline':
case 'polygon':
case 'path':
break;
default:
if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
// Ignore these elements, as they can absorb the [M]
case 'line':
case 'polyline':
case 'polygon':
case 'path':
break;
default:
if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
(tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) {
return null;
}
return null;
}
}
// Grouped SVG element
const gsvg = (dataStorage.has(selected, 'gsvg')) ? dataStorage.get(selected, 'gsvg') : undefined;
@ -185,42 +185,42 @@ export const recalculateDimensions = function (selected) {
let initial = null;
let attrs = [];
switch (selected.tagName) {
case 'line':
attrs = [ 'x1', 'y1', 'x2', 'y2' ];
break;
case 'circle':
attrs = [ 'cx', 'cy', 'r' ];
break;
case 'ellipse':
attrs = [ 'cx', 'cy', 'rx', 'ry' ];
break;
case 'foreignObject':
case 'rect':
case 'image':
attrs = [ 'width', 'height', 'x', 'y' ];
break;
case 'use':
case 'text':
case 'tspan':
attrs = [ 'x', 'y' ];
break;
case 'polygon':
case 'polyline': {
initial = {};
initial.points = selected.getAttribute('points');
const list = selected.points;
const len = list.numberOfItems;
changes.points = new Array(len);
for (let i = 0; i < len; ++i) {
const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y };
}
break;
} case 'path':
initial = {};
initial.d = selected.getAttribute('d');
changes.d = selected.getAttribute('d');
break;
case 'line':
attrs = [ 'x1', 'y1', 'x2', 'y2' ];
break;
case 'circle':
attrs = [ 'cx', 'cy', 'r' ];
break;
case 'ellipse':
attrs = [ 'cx', 'cy', 'rx', 'ry' ];
break;
case 'foreignObject':
case 'rect':
case 'image':
attrs = [ 'width', 'height', 'x', 'y' ];
break;
case 'use':
case 'text':
case 'tspan':
attrs = [ 'x', 'y' ];
break;
case 'polygon':
case 'polyline': {
initial = {};
initial.points = selected.getAttribute('points');
const list = selected.points;
const len = list.numberOfItems;
changes.points = new Array(len);
for (let i = 0; i < len; ++i) {
const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y };
}
break;
} case 'path':
initial = {};
initial.d = selected.getAttribute('d');
changes.d = selected.getAttribute('d');
break;
} // switch on element type to get initial values
if (attrs.length) {
@ -702,34 +702,34 @@ export const recalculateDimensions = function (selected) {
// Remap all point-based elements
m = transformListToTransform(tlist).matrix;
switch (selected.tagName) {
case 'line':
changes = {
x1: selected.getAttribute('x1'),
y1: selected.getAttribute('y1'),
x2: selected.getAttribute('x2'),
y2: selected.getAttribute('y2'),
};
case 'line':
changes = {
x1: selected.getAttribute('x1'),
y1: selected.getAttribute('y1'),
x2: selected.getAttribute('x2'),
y2: selected.getAttribute('y2'),
};
// Fallthrough
case 'polyline':
case 'polygon':
changes.points = selected.getAttribute('points');
if (changes.points) {
const list = selected.points;
const len = list.numberOfItems;
changes.points = new Array(len);
for (let i = 0; i < len; ++i) {
const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y };
}
case 'polyline':
case 'polygon':
changes.points = selected.getAttribute('points');
if (changes.points) {
const list = selected.points;
const len = list.numberOfItems;
changes.points = new Array(len);
for (let i = 0; i < len; ++i) {
const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y };
}
}
// Fallthrough
case 'path':
changes.d = selected.getAttribute('d');
operation = 1;
tlist.clear();
break;
default:
break;
case 'path':
changes.d = selected.getAttribute('d');
operation = 1;
tlist.clear();
break;
default:
break;
}
// if it was a rotation, put the rotate back and return without a command
// (this function has zero work to do for a rotate())

124
src/svgcanvas/selected-elem.js
View File

@ -237,7 +237,7 @@ export const cloneSelectedElements = function (x, y) {
function index(el) {
if (!el) return -1;
var i = 0;
let i = 0;
do {
i++;
} while (el == el.previousElementSibling);
@ -300,40 +300,40 @@ export const alignSelectedElements = function (type, relativeTo) {
// now bbox is axis-aligned and handles rotation
switch (relativeTo) {
case 'smallest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
case 'smallest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight > bboxes[i].height))
) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
case 'largest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
case 'largest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight < bboxes[i].height))
) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
default: // 'selected'
if (bboxes[i].x < minx) { minx = bboxes[i].x; }
if (bboxes[i].y < miny) { miny = bboxes[i].y; }
if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width; }
if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }
break;
) {
minx = bboxes[i].x;
miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width;
curheight = bboxes[i].height;
}
break;
default: // 'selected'
if (bboxes[i].x < minx) { minx = bboxes[i].x; }
if (bboxes[i].y < miny) { miny = bboxes[i].y; }
if (bboxes[i].x + bboxes[i].width > maxx) { maxx = bboxes[i].x + bboxes[i].width; }
if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }
break;
}
} // loop for each element to find the bbox and adjust min/max
@ -353,30 +353,30 @@ export const alignSelectedElements = function (type, relativeTo) {
dx[i] = 0;
dy[i] = 0;
switch (type) {
case 'l': // left (horizontal)
case 'left': // left (horizontal)
dx[i] = minx - bbox.x;
break;
case 'c': // center (horizontal)
case 'center': // center (horizontal)
dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
break;
case 'r': // right (horizontal)
case 'right': // right (horizontal)
dx[i] = maxx - (bbox.x + bbox.width);
break;
case 't': // top (vertical)
case 'top': // top (vertical)
dy[i] = miny - bbox.y;
break;
case 'm': // middle (vertical)
case 'middle': // middle (vertical)
dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
break;
case 'b': // bottom (vertical)
case 'bottom': // bottom (vertical)
dy[i] = maxy - (bbox.y + bbox.height);
break;
case 'l': // left (horizontal)
case 'left': // left (horizontal)
dx[i] = minx - bbox.x;
break;
case 'c': // center (horizontal)
case 'center': // center (horizontal)
dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
break;
case 'r': // right (horizontal)
case 'right': // right (horizontal)
dx[i] = maxx - (bbox.x + bbox.width);
break;
case 't': // top (vertical)
case 'top': // top (vertical)
dy[i] = miny - bbox.y;
break;
case 'm': // middle (vertical)
case 'middle': // middle (vertical)
dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
break;
case 'b': // bottom (vertical)
case 'bottom': // bottom (vertical)
dy[i] = maxy - (bbox.y + bbox.height);
break;
}
}
moveSelectedElements(dx, dy);
@ -460,15 +460,15 @@ export const groupSelectedElements = function (type, urlArg) {
// eslint-disable-next-line sonarjs/no-small-switch
switch (type) {
case 'a': {
cmdStr = 'Make hyperlink';
url = urlArg || '';
break;
} default: {
type = 'g';
cmdStr = 'Group Elements';
break;
}
case 'a': {
cmdStr = 'Make hyperlink';
url = urlArg || '';
break;
} default: {
type = 'g';
cmdStr = 'Group Elements';
break;
}
}
const batchCmd = new BatchCommand(cmdStr);

50
src/svgcanvas/svg-exec.js
View File

@ -247,31 +247,31 @@ export const svgToString = function (elem, indent) {
for (let i = 0; i < childs.length; i++) {
const child = childs.item(i);
switch (child.nodeType) {
case 1: // element node
out.push('\n');
out.push(this.svgToString(child, indent));
break;
case 3: { // text node
const str = child.nodeValue.replace(/^\s+|\s+$/g, '');
if (str !== '') {
bOneLine = true;
out.push(String(toXml(str)));
}
break;
} case 4: // cdata node
out.push('\n');
out.push(new Array(indent + 1).join(' '));
out.push('<![CDATA[');
out.push(child.nodeValue);
out.push(']]>');
break;
case 8: // comment
out.push('\n');
out.push(new Array(indent + 1).join(' '));
out.push('<!--');
out.push(child.data);
out.push('-->');
break;
case 1: // element node
out.push('\n');
out.push(this.svgToString(child, indent));
break;
case 3: { // text node
const str = child.nodeValue.replace(/^\s+|\s+$/g, '');
if (str !== '') {
bOneLine = true;
out.push(String(toXml(str)));
}
break;
} case 4: // cdata node
out.push('\n');
out.push(new Array(indent + 1).join(' '));
out.push('<![CDATA[');
out.push(child.nodeValue);
out.push(']]>');
break;
case 8: // comment
out.push('\n');
out.push(new Array(indent + 1).join(' '));
out.push('<!--');
out.push(child.data);
out.push('-->');
break;
} // switch on node type
}
indent--;

106
src/svgcanvas/svgcanvas.js
View File

@ -209,7 +209,7 @@ class SvgCanvas {
return this._storage.has(element) && this._storage.get(element).has(key);
},
remove: function (element, key) {
var ret = this._storage.get(element).delete(key);
let ret = this._storage.get(element).delete(key);
if (!this._storage.get(element).size === 0) {
this._storage.delete(element);
}
@ -787,65 +787,49 @@ class SvgCanvas {
*/
// Object to contain image data for raster images that were found encodable
const encodableImages = {},
const encodableImages = {};
// Object with save options
/**
* @type {module:svgcanvas.SaveOptions}
*/
const saveOptions = { round_digits: 5 };
// Object with IDs for imported files, to see if one was already added
const importIds = {};
// Current text style properties
const curText = allProperties.text;
// Object to contain all included extensions
const extensions = {};
// Map of deleted reference elements
const removedElements = {};
// Object with save options
/**
* @type {module:svgcanvas.SaveOptions}
*/
saveOptions = { round_digits: 5 },
// Object with IDs for imported files, to see if one was already added
importIds = {},
// Current text style properties
curText = allProperties.text,
// Object to contain all included extensions
extensions = {},
// Map of deleted reference elements
removedElements = {};
let
// String with image URL of last loadable image
lastGoodImgUrl = curConfig.imgPath + 'logo.svg',
// Boolean indicating whether or not a draw action has been started
started = false,
// String with an element's initial transform attribute value
startTransform = null,
// String indicating the current editor mode
currentMode = 'select',
// String with the current direction in which an element is being resized
currentResizeMode = 'none',
// Current general properties
curProperties = curShape,
// Array with selected elements' Bounding box object
// selectedBBoxes = new Array(1),
// The DOM element that was just selected
justSelected = null,
// DOM element for selection rectangle drawn by the user
rubberBox = null,
// Array of current BBoxes, used in getIntersectionList().
curBBoxes = [],
// Canvas point for the most recent right click
lastClickPoint = null;
// String with image URL of last loadable image
let lastGoodImgUrl = curConfig.imgPath + 'logo.svg';
// Boolean indicating whether or not a draw action has been started
let started = false;
// String with an element's initial transform attribute value
let startTransform = null;
// String indicating the current editor mode
let currentMode = 'select';
// String with the current direction in which an element is being resized
let currentResizeMode = 'none';
// Current general properties
let curProperties = curShape;
// Array with selected elements' Bounding box object
// selectedBBoxes = new Array(1),
// The DOM element that was just selected
let justSelected = null;
// DOM element for selection rectangle drawn by the user
let rubberBox = null;
// Array of current BBoxes, used in getIntersectionList().
let curBBoxes = [];
// Canvas point for the most recent right click
let lastClickPoint = null;
this.runExtension = function (name, action, vars) {
return this.runExtensions(action, vars, false, (n) => n === name);
};
/* eslint-disable max-len */
/**
/* eslint-disable max-len */
/**
* @todo Consider: Should this return an array by default, so extension results aren't overwritten?
* @todo 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
* @function module:svgcanvas.SvgCanvas#runExtensions
@ -855,7 +839,7 @@ class SvgCanvas {
* @param {module:svgcanvas.ExtensionNameFilter} nameFilter
* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus.
*/
/* eslint-enable max-len */
/* eslint-enable max-len */
this.runExtensions = runExtensionsMethod;
@ -1037,14 +1021,14 @@ class SvgCanvas {
* @event module:svgcanvas.SvgCanvas#event:exportedPDF
* @type {module:svgcanvas.PDFExportedResults}
*/
/* eslint-disable max-len */
/**
/* eslint-disable max-len */
/**
* Creating a cover-all class until {@link https://github.com/jsdoc3/jsdoc/issues/1545} may be supported.
* `undefined` may be returned by {@link 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".
* @event module:svgcanvas.SvgCanvas#event:GenericCanvasEvent
* @type {module:svgcanvas.SvgCanvas#event:selected|module:svgcanvas.SvgCanvas#event:changed|module:svgcanvas.SvgCanvas#event:contextset|module:svgcanvas.SvgCanvas#event:pointsAdded|module:svgcanvas.SvgCanvas#event:extension_added|module:svgcanvas.SvgCanvas#event:extensions_added|module:svgcanvas.SvgCanvas#event:message|module:svgcanvas.SvgCanvas#event:transition|module:svgcanvas.SvgCanvas#event:zoomed|module:svgcanvas.SvgCanvas#event:updateCanvas|module:svgcanvas.SvgCanvas#event:saved|module:svgcanvas.SvgCanvas#event:exported|module:svgcanvas.SvgCanvas#event:exportedPDF|module:svgcanvas.SvgCanvas#event:setnonce|module:svgcanvas.SvgCanvas#event:unsetnonce|void}
*/
/* eslint-enable max-len */
/* eslint-enable max-len */
/**
* The promise return, if present, resolves to `undefined`
@ -1059,7 +1043,7 @@ class SvgCanvas {
* @listens module:svgcanvas.SvgCanvas#event:GenericCanvasEvent
* @returns {module:svgcanvas.EventHandlerReturn}
*/
/* eslint-disable max-len */
/* eslint-disable max-len */
/**
* Attaches a callback function to an event.
* @function module:svgcanvas.SvgCanvas#bind
@ -1067,7 +1051,7 @@ class SvgCanvas {
* @param {module:svgcanvas.EventHandler} f - The callback function to bind to the event
* @returns {module:svgcanvas.EventHandler} The previous event
*/
/* eslint-enable max-len */
/* eslint-enable max-len */
canvas.bind = function (ev, f) {
const old = events[ev];
events[ev] = f;

250
src/svgcanvas/utilities.js
View File

@ -628,70 +628,70 @@ export const getBBox = function (elem) {
let ret = null;
switch (elname) {
case 'text':
if (selected.textContent === '') {
selected.textContent = 'a'; // Some character needed for the selector to use.
ret = selected.getBBox();
selected.textContent = '';
} else if (selected.getBBox) {
ret = selected.getBBox();
}
break;
case 'path':
if (!supportsPathBBox()) {
ret = getPathBBox(selected);
} else if (selected.getBBox) {
ret = selected.getBBox();
}
break;
case 'g':
case 'a':
ret = groupBBFix(selected);
break;
default:
case 'text':
if (selected.textContent === '') {
selected.textContent = 'a'; // Some character needed for the selector to use.
ret = selected.getBBox();
selected.textContent = '';
} else if (selected.getBBox) {
ret = selected.getBBox();
}
break;
case 'path':
if (!supportsPathBBox()) {
ret = getPathBBox(selected);
} else if (selected.getBBox) {
ret = selected.getBBox();
}
break;
case 'g':
case 'a':
ret = groupBBFix(selected);
break;
default:
if (elname === 'use') {
ret = groupBBFix(selected); // , true);
if (elname === 'use') {
ret = groupBBFix(selected); // , true);
}
if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) {
if (!ret) { ret = selected.getBBox(); }
// This is resolved in later versions of webkit, perhaps we should
// have a featured detection for correct 'use' behavior?
// ——————————
if (!isWebkit()) {
const { x, y, width, height } = ret;
const bb = {
width,
height,
x: x + Number.parseFloat(selected.getAttribute('x') || 0),
y: y + Number.parseFloat(selected.getAttribute('y') || 0)
};
ret = bb;
}
if (elname === 'use' || (elname === 'foreignObject' && isWebkit())) {
if (!ret) { ret = selected.getBBox(); }
// This is resolved in later versions of webkit, perhaps we should
// have a featured detection for correct 'use' behavior?
// ——————————
if (!isWebkit()) {
const { x, y, width, height } = ret;
const bb = {
} else if (visElemsArr.includes(elname)) {
if (selected) {
try {
ret = selected.getBBox();
} catch (err) {
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
const extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph
const width = selected.getComputedTextLength(); // width of the tspan
ret = {
x: extent.x,
y: extent.y,
width,
height,
x: x + Number.parseFloat(selected.getAttribute('x') || 0),
y: y + Number.parseFloat(selected.getAttribute('y') || 0)
height: extent.height
};
ret = bb;
}
} else if (visElemsArr.includes(elname)) {
if (selected) {
try {
ret = selected.getBBox();
} catch (err) {
// tspan (and textPath apparently) have no `getBBox` in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=937268
// Re: Chrome returning bbox for containing text element, see: https://bugs.chromium.org/p/chromium/issues/detail?id=349835
const extent = selected.getExtentOfChar(0); // pos+dimensions of the first glyph
const width = selected.getComputedTextLength(); // width of the tspan
ret = {
x: extent.x,
y: extent.y,
width,
height: extent.height
};
}
} else {
// Check if element is child of a foreignObject
const fo = getClosest(selected.parentNode, 'foreignObject');
if (fo.length && fo[0].getBBox) {
ret = fo[0].getBBox();
}
} else {
// Check if element is child of a foreignObject
const fo = getClosest(selected.parentNode, 'foreignObject');
if (fo.length && fo[0].getBBox) {
ret = fo[0].getBBox();
}
}
}
}
if (ret) {
ret = bboxToObj(ret);
@ -739,76 +739,76 @@ export const getPathDFromElement = function (elem) {
let num = 1.81;
let d, rx, ry;
switch (elem.tagName) {
case 'ellipse':
case 'circle': {
rx = elem.getAttribute('rx');
ry = elem.getAttribute('ry');
const cx = elem.getAttribute('cx');
const cy = elem.getAttribute('cy');
if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
ry = elem.getAttribute('r');
rx = ry;
}
d = getPathDFromSegments([
[ 'M', [ (cx - rx), (cy) ] ],
[ 'C', [ (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry) ] ],
[ 'C', [ (cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy) ] ],
[ 'C', [ (cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry) ] ],
[ 'C', [ (cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy) ] ],
case 'ellipse':
case 'circle': {
rx = elem.getAttribute('rx');
ry = elem.getAttribute('ry');
const cx = elem.getAttribute('cx');
const cy = elem.getAttribute('cy');
if (elem.tagName === 'circle' && elem.hasAttribute('r')) {
ry = elem.getAttribute('r');
rx = ry;
}
d = getPathDFromSegments([
[ 'M', [ (cx - rx), (cy) ] ],
[ 'C', [ (cx - rx), (cy - ry / num), (cx - rx / num), (cy - ry), (cx), (cy - ry) ] ],
[ 'C', [ (cx + rx / num), (cy - ry), (cx + rx), (cy - ry / num), (cx + rx), (cy) ] ],
[ 'C', [ (cx + rx), (cy + ry / num), (cx + rx / num), (cy + ry), (cx), (cy + ry) ] ],
[ 'C', [ (cx - rx / num), (cy + ry), (cx - rx), (cy + ry / num), (cx - rx), (cy) ] ],
[ 'Z', [] ]
]);
break;
} case 'path':
d = elem.getAttribute('d');
break;
case 'line': {
const x1 = elem.getAttribute('x1');
const y1 = elem.getAttribute('y1');
const x2 = elem.getAttribute('x2');
const y2 = elem.getAttribute('y2');
d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2;
}
break;
case 'polyline':
d = 'M' + elem.getAttribute('points');
break;
case 'polygon':
d = 'M' + elem.getAttribute('points') + ' Z';
break;
case 'rect': {
rx = elem.getAttribute('rx');
ry = elem.getAttribute('ry');
const b = elem.getBBox();
const { x, y } = b,
w = b.width,
h = b.height;
num = 4 - num; // Why? Because!
d = (!rx && !ry)
// Regular rect
? getPathDFromSegments([
[ 'M', [ x, y ] ],
[ 'L', [ x + w, y ] ],
[ 'L', [ x + w, y + h ] ],
[ 'L', [ x, y + h ] ],
[ 'L', [ x, y ] ],
[ 'Z', [] ]
])
: getPathDFromSegments([
[ 'M', [ x, y + ry ] ],
[ 'C', [ x, y + ry / num, x + rx / num, y, x + rx, y ] ],
[ 'L', [ x + w - rx, y ] ],
[ 'C', [ x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry ] ],
[ 'L', [ x + w, y + h - ry ] ],
[ 'C', [ x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h ] ],
[ 'L', [ x + rx, y + h ] ],
[ 'C', [ x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry ] ],
[ 'L', [ x, y + ry ] ],
[ 'Z', [] ]
]);
break;
} case 'path':
d = elem.getAttribute('d');
break;
case 'line': {
const x1 = elem.getAttribute('x1');
const y1 = elem.getAttribute('y1');
const x2 = elem.getAttribute('x2');
const y2 = elem.getAttribute('y2');
d = 'M' + x1 + ',' + y1 + 'L' + x2 + ',' + y2;
}
break;
case 'polyline':
d = 'M' + elem.getAttribute('points');
break;
case 'polygon':
d = 'M' + elem.getAttribute('points') + ' Z';
break;
case 'rect': {
rx = elem.getAttribute('rx');
ry = elem.getAttribute('ry');
const b = elem.getBBox();
const { x, y } = b,
w = b.width,
h = b.height;
num = 4 - num; // Why? Because!
d = (!rx && !ry)
// Regular rect
? getPathDFromSegments([
[ 'M', [ x, y ] ],
[ 'L', [ x + w, y ] ],
[ 'L', [ x + w, y + h ] ],
[ 'L', [ x, y + h ] ],
[ 'L', [ x, y ] ],
[ 'Z', [] ]
])
: getPathDFromSegments([
[ 'M', [ x, y + ry ] ],
[ 'C', [ x, y + ry / num, x + rx / num, y, x + rx, y ] ],
[ 'L', [ x + w - rx, y ] ],
[ 'C', [ x + w - rx / num, y, x + w, y + ry / num, x + w, y + ry ] ],
[ 'L', [ x + w, y + h - ry ] ],
[ 'C', [ x + w, y + h - ry / num, x + w - rx / num, y + h, x + w - rx, y + h ] ],
[ 'L', [ x + rx, y + h ] ],
[ 'C', [ x + rx / num, y + h, x, y + h - ry / num, x, y + h - ry ] ],
[ 'L', [ x, y + ry ] ],
[ 'Z', [] ]
]);
break;
} default:
break;
break;
} default:
break;
}
return d;