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

identation requirement to eslint

Browse Source
This commit is contained in:
JFH
2021-05-28 10:35:46 +02:00
parent 1e73db7f5c
commit 01b022b1e7
39 changed files with 1832 additions and 1846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@@ -23,6 +23,8 @@ module.exports = {
rules: { rules: {
/** @todo len should probably more 120-150 */ /** @todo len should probably more 120-150 */
"max-len": [ "warn", { "code": 250 } ], "max-len": [ "warn", { "code": 250 } ],
"indent": [ "error", 2 ],
"no-var": "error",
/** @todo jsdoc should be made warn or error */ /** @todo jsdoc should be made warn or error */
"valid-jsdoc": "off", "valid-jsdoc": "off",
/** @todo cognitive complexity should be much lower (25-50?) */ /** @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); return this._storage.has(element) && this._storage.get(element).has(key);
}, },
remove: function (element, 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) { if (!this._storage.get(element).size === 0) {
this._storage.delete(element); 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); return this._storage.has(element) && this._storage.get(element).has(key);
}, },
remove: function (element, 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) { if (!this._storage.get(element).size === 0) {
this._storage.delete(element); this._storage.delete(element);
} }

12
docs/tutorials/ExtensionDocs.md
View File

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

142
src/common/browser.js
View File

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

18
src/editor/Editor.js
View File

@@ -281,11 +281,11 @@ class Editor extends EditorStartup {
parentSelector = document; parentSelector = document;
} }
var parents = []; let parents = [];
var p = el.parentNode; let p = el.parentNode;
while (p !== parentSelector) { while (p !== parentSelector) {
var o = p; let o = p;
parents.push(o); parents.push(o);
p = o.parentNode; p = o.parentNode;
} }
@@ -609,12 +609,12 @@ class Editor extends EditorStartup {
if (!this.multiselected) { if (!this.multiselected) {
// eslint-disable-next-line sonarjs/no-small-switch // eslint-disable-next-line sonarjs/no-small-switch
switch (mode) { switch (mode) {
case 'rotate': { case 'rotate': {
const ang = this.svgCanvas.getRotationAngle(elem); const ang = this.svgCanvas.getRotationAngle(elem);
$id('angle').value = ang; $id('angle').value = ang;
(ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled'); (ang === 0) ? $id('tool_reorient').classList.add('disabled') : $id('tool_reorient').classList.remove('disabled');
break; break;
} }
} }
} }
this.svgCanvas.runExtensions('elementTransition', /** @type {module:svgcanvas.SvgCanvas#event:ext_elementTransition} */ { 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) { function addListenerMulti(element, eventNames, listener) {
var events = eventNames.split(' '); let events = eventNames.split(' ');
for (var i=0, iLen=events.length; i<iLen; i++) { for (let i=0, iLen=events.length; i<iLen; i++) {
element.addEventListener(events[i], listener, false); 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'`); console.error(`the color ${color} is referenced by an url that can't be identified - using 'none'`);
opts.solidColor = 'none'; opts.solidColor = 'none';
} else { } else {
opts[refElem.tagName] = refElem; opts[refElem.tagName] = refElem;
} }
} else if (color.startsWith('#')) { } else if (color.startsWith('#')) {
opts.solidColor = color.substr(1); 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 * @param {String} selector The class, id, data attribute, or tag to look for
* @return {Array} Null if no match * @return {Array} Null if no match
*/ */
export function getParents(elem, selector) { export function getParents(elem, selector) {
const parents = []; const parents = [];
let firstChar; let firstChar;
if ( selector ) { 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); sets = mergeDeep(sets, options);
const that = elem, 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 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, { Object.assign(settings, {
window: { window: {

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

@@ -674,7 +674,7 @@ export class SeColorPicker extends HTMLElement {
* @param {any} name * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.i18next = i18next; this.i18next = i18next;
this.setAttribute('config-change_xxx_color', i18next.t('config.change_xxx_color')); 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 () { static get observedAttributes () {
return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut', return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems', 'tools-cut',
'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group', 'tools-copy', 'tools-paste', 'tools-paste_in_place', 'tools-delete', 'tools-group',
'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down', 'tools-ungroup', 'tools-move_front', 'tools-move_up', 'tools-move_down',
'tools-move_back' ]; 'tools-move_back' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback

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

@@ -97,7 +97,7 @@ export class SeCMenuLayerDialog extends HTMLElement {
* @param {any} name * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('layers-dupe', i18next.t('layers.dupe')); this.setAttribute('layers-dupe', i18next.t('layers.dupe'));
this.setAttribute('layers-del', i18next.t('layers.del')); this.setAttribute('layers-del', i18next.t('layers.del'));
this.setAttribute('layers-merge_down', i18next.t('layers.merge_down')); 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 * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok')); this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('config-editor_prefs', i18next.t('config.editor_prefs')); 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 * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok')); this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('ui-quality', i18next.t('ui.quality')); 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 * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok')); this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('config-image_props', i18next.t('config.image_props')); this.setAttribute('config-image_props', i18next.t('config.image_props'));
@@ -166,10 +166,10 @@ export class SeImgPropDialog extends HTMLElement {
*/ */
static get observedAttributes () { static get observedAttributes () {
return [ 'title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok', return [ 'title', 'width', 'height', 'save', 'dialog', 'embed', 'common-ok',
'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims', 'common-cancel', 'config-image_props', 'config-doc_title', 'config-doc_dims',
'common-width', 'common-height', 'config-select_predefined', 'common-width', 'common-height', 'config-select_predefined',
'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed', 'tools-fit-to-content', 'config-included_images', 'config-image_opt_embed',
'config-image_opt_ref' ]; 'config-image_opt_ref' ];
} }
/** /**
* @function attributeChangedCallback * @function attributeChangedCallback

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

@@ -99,7 +99,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement {
* @param {any} name * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('tools-source_save', i18next.t('tools.source_save')); this.setAttribute('tools-source_save', i18next.t('tools.source_save'));
this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('notification-source_dialog_note', i18next.t('notification.source_dialog_note')); 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(); // setSelectMode();
}); });
var oldToolSourceCancel = $id('tool_source_cancel'); let oldToolSourceCancel = $id('tool_source_cancel');
const toolSourceCancel = oldToolSourceCancel.cloneNode(true); const toolSourceCancel = oldToolSourceCancel.cloneNode(true);
toolSourceCancel.style.display = 'none'; toolSourceCancel.style.display = 'none';
toolSourceCancel.id = 'foreign_cancel'; 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; let translationModule;
const lang = svgEditor.configObj.pref('lang'); const lang = svgEditor.configObj.pref('lang');
try { 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) { const loadExtensionTranslation = async function (svgEditor) {
let translationModule; let translationModule;
const lang = svgEditor.configObj.pref('lang'); const lang = svgEditor.configObj.pref('lang');
try { try {
// eslint-disable-next-line no-unsanitized/method // eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/${lang}.js`); translationModule = await import(`./locale/${lang}.js`);
} catch (_error) { } catch (_error) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.warn(`Missing translation (${lang}) for ${name} - using 'en'`); console.warn(`Missing translation (${lang}) for ${name} - using 'en'`);
// eslint-disable-next-line no-unsanitized/method // eslint-disable-next-line no-unsanitized/method
translationModule = await import(`./locale/en.js`); translationModule = await import(`./locale/en.js`);
} }
svgEditor.i18next.addResourceBundle(lang, name, translationModule.default); svgEditor.i18next.addResourceBundle(lang, name, translationModule.default);
}; };
export default { export default {
name, name,
@@ -192,154 +192,154 @@ export default {
let entry, curMeta, svgStr, imgStr; let entry, curMeta, svgStr, imgStr;
switch (type) { switch (type) {
case 'meta': { case 'meta': {
// Metadata // Metadata
transferStopped = false; transferStopped = false;
curMeta = response; curMeta = response;
// Should be safe to add dynamic property as passed metadata // Should be safe to add dynamic property as passed metadata
pending[curMeta.id] = curMeta; // lgtm [js/remote-property-injection] 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') { if (mode !== 'm') {
await seConfirm(message); await seConfirm(message);
transferStopped = true; transferStopped = true;
} else { } else {
entry = document.createElement('div'); entry = document.createElement('div');
entry.textContent = message; entry.textContent = message;
entry.dataset.id = curMeta.id; entry.dataset.id = curMeta.id;
preview.appendChild(entry); preview.appendChild(entry);
curMeta.entry = entry; curMeta.entry = entry;
}
return;
} }
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; svgStr = true;
break; break;
case 'd': { } else if (response.startsWith('data:image/')) {
if (response.startsWith('data:image/svg+xml')) { imgStr = true;
const pre = 'data:image/svg+xml;base64,'; break;
const src = response.substring(pre.length);
response = decode64(src);
svgStr = true;
break;
} else if (response.startsWith('data:image/')) {
imgStr = true;
break;
}
} }
// Else fall through }
default: // Else fall through
// TODO: See if there's a way to base64 encode the binary data stream default:
// const str = 'data:;base64,' + svgedit.utilities.encode64(response, true); // 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 // Assume it's raw image data
// importImage(str); // importImage(str);
// Don't give warning as postMessage may have been used by something else // Don't give warning as postMessage may have been used by something else
if (mode !== 'm') { if (mode !== 'm') {
closeBrowser(); closeBrowser();
} else { } else {
pending[id].entry.remove(); pending[id].entry.remove();
} }
// await alert('Unexpected data was returned: ' + response, function() { // await alert('Unexpected data was returned: ' + response, function() {
// if (mode !== 'm') { // if (mode !== 'm') {
// closeBrowser(); // closeBrowser();
// } else { // } else {
// pending[id].entry.remove(); // pending[id].entry.remove();
// } // }
// }); // });
return; return;
} }
switch (mode) { switch (mode) {
case 's': case 's':
// Import one // Import one
if (svgStr) { if (svgStr) {
svgEditor.svgCanvas.importSvgString(response); svgEditor.svgCanvas.importSvgString(response);
} else if (imgStr) { } else if (imgStr) {
importImage(response); 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;
} }
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 () { select.addEventListener('change', function () {
mode = this.value; mode = this.value;
switch (mode) { switch (mode) {
case 's': case 's':
case 'o': case 'o':
toggleMulti(false); toggleMulti(false);
break; break;
case 'm': case 'm':
// Import multiple // Import multiple
toggleMulti(true); toggleMulti(true);
break; break;
} }
}); });
select.setAttribute('style', `margin-top: 10px;`); select.setAttribute('style', `margin-top: 10px;`);
@@ -507,7 +507,7 @@ export default {
libOpts.style.display = 'none'; libOpts.style.display = 'none';
back.style.display = 'block'; back.style.display = 'block';
}); });
var span = document.createElement("span"); let span = document.createElement("span");
span.textContent = description; span.textContent = description;
li.appendChild(span); 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; img.src = href;
} else { } else {
fetch(href) fetch(href)
.then( (r) => r.text()) .then( (r) => r.text())
// eslint-disable-next-line promise/always-return // eslint-disable-next-line promise/always-return
.then( (data) => { .then( (data) => {
post({ href, data }); post({ href, data });
return data; return data;
}) })
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
.catch( (error) => console.log(error)); .catch( (error) => console.log(error));
} }
return false; return false;
}); });

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

@@ -232,7 +232,7 @@ export default {
}, },
callback () { callback () {
const head = document.head || document.getElementsByTagName('head')[0], const head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style'); style = document.createElement('style');
style.textContent = '#mathjax fieldset{' + style.textContent = '#mathjax fieldset{' +
'padding: 5px;' + 'padding: 5px;' +
'margin: 5px;' + 'margin: 5px;' +
@@ -281,7 +281,7 @@ export default {
'display: block;' + 'display: block;' +
'height: 100px;' + '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. // Compensate for changes in zoom and canvas size.
const updateViewDimensions = function () { 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 viewHeight = parseFloat(getComputedStyle($id("svgroot"), null).height.replace("px", ""));
const viewX = 640; const viewX = 640;

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

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

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

@@ -30,7 +30,7 @@ export default {
}).then( (res) => { }).then( (res) => {
return 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 * @param {any} name
* @returns {void} * @returns {void}
*/ */
init (i18next) { init (i18next) {
this.setAttribute('common-ok', i18next.t('common.ok')); this.setAttribute('common-ok', i18next.t('common.ok'));
this.setAttribute('common-cancel', i18next.t('common.cancel')); this.setAttribute('common-cancel', i18next.t('common.cancel'));
this.setAttribute('notify-editor_pref_msg', i18next.t('notification.editorPreferencesMsg')); 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 * 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) { constructor (editor) {
this.editor = editor; this.editor = editor;
} }
/** /**
* @type {module} * @type {module}
*/ */
get selectedElement () { get selectedElement () {
return this.editor.selectedElement; return this.editor.selectedElement;
} }
/** /**
* @type {module} * @type {module}
*/ */
get multiselected () { get multiselected () {
return this.editor.multiselected; return this.editor.multiselected;
} }
/** /**
* @type {module} * @type {module}
*/ */
changeStrokeWidth (e) { changeStrokeWidth (e) {
let val = e.target.value; let val = e.target.value;
if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) { if (val === 0 && this.editor.selectedElement && [ 'line', 'polyline' ].includes(this.editor.selectedElement.nodeName)) {
val = 1; val = 1;
}
this.editor.svgCanvas.setStrokeWidth(val);
} }
/** this.editor.svgCanvas.setStrokeWidth(val);
}
/**
* @type {module} * @type {module}
*/ */
changeZoom (value) { changeZoom (value) {
switch (value) { switch (value) {
case 'canvas': case 'canvas':
case 'selection': case 'selection':
case 'layer': case 'layer':
case 'content': case 'content':
this.editor.zoomChanged(window, value); this.editor.zoomChanged(window, value);
break; break;
default: default:
{ {
const zoomlevel = Number(value) / 100; const zoomlevel = Number(value) / 100;
if (zoomlevel < 0.001) { if (zoomlevel < 0.001) {
value = 0.1; value = 0.1;
return; 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);
}
} }
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 * @fires module:svgcanvas.SvgCanvas#event:ext_toolButtonStateUpdate
* @returns {void} * @returns {void}
*/ */
updateToolButtonState () { updateToolButtonState () {
const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none'); const bNoFill = (this.editor.svgCanvas.getColor('fill') === 'none');
const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none'); const bNoStroke = (this.editor.svgCanvas.getColor('stroke') === 'none');
const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ]; const buttonsNeedingStroke = [ 'tool_fhpath', 'tool_line' ];
const buttonsNeedingFillAndStroke = [ const buttonsNeedingFillAndStroke = [
'tools_rect', 'tools_ellipse', 'tools_rect', 'tools_ellipse',
'tool_text', 'tool_path' 'tool_text', 'tool_path'
]; ];
if (bNoStroke) { if (bNoStroke) {
buttonsNeedingStroke.forEach((btn) => { buttonsNeedingStroke.forEach((btn) => {
// if btn is pressed, change to select button // if btn is pressed, change to select button
if ($id(btn).pressed) { if ($id(btn).pressed) {
this.editor.leftPanel.clickSelect(); 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
} }
); $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} * @type {module}
*/ */
handleColorPicker (type, evt) { handleColorPicker (type, evt) {
const { paint } = evt.detail; const { paint } = evt.detail;
this.editor.svgCanvas.setPaint(type, paint); this.editor.svgCanvas.setPaint(type, paint);
this.updateToolButtonState(); this.updateToolButtonState();
} }
/** /**
* @type {module} * @type {module}
*/ */
handleStrokeAttr (type, evt) { handleStrokeAttr (type, evt) {
this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value); this.editor.svgCanvas.setStrokeAttr(type, evt.detail.value);
} }
/** /**
* @type {module} * @type {module}
*/ */
handleOpacity (evt) { handleOpacity (evt) {
const val = Number.parseInt(evt.currentTarget.value.split('%')[0]); const val = Number.parseInt(evt.currentTarget.value.split('%')[0]);
this.editor.svgCanvas.setOpacity(val / 100); this.editor.svgCanvas.setOpacity(val / 100);
} }
/** /**
* @type {module} * @type {module}
*/ */
handlePalette (e) { handlePalette (e) {
e.preventDefault(); e.preventDefault();
// shift key or right click for stroke // shift key or right click for stroke
const { picker, color } = e.detail; const { picker, color } = e.detail;
@@ -233,7 +233,7 @@ class BottomPanel {
/** /**
* @type {module} * @type {module}
*/ */
updateColorpickers (apply) { updateColorpickers (apply) {
$id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply); $id('fill_color').update(this.editor.svgCanvas, this.editor.selectedElement, apply);
$id('stroke_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) { lmenuFunc(e) {
const action = e?.detail?.trigger; const action = e?.detail?.trigger;
switch (action) { switch (action) {
case "dupe": case "dupe":
this.cloneLayer(); this.cloneLayer();
break; break;
case "delete": case "delete":
this.deleteLayer(); this.deleteLayer();
break; break;
case "merge_down": case "merge_down":
this.mergeLayer(); this.mergeLayer();
break; break;
case "merge_all": case "merge_all":
this.editor.svgCanvas.mergeAllLayers(); this.editor.svgCanvas.mergeAllLayers();
this.updateContextPanel(); this.updateContextPanel();
this.populateLayers(); this.populateLayers();
break; break;
} }
} }
/** /**
@@ -283,7 +283,7 @@ class LayersPanel {
index(el) { index(el) {
if (!el) return -1; if (!el) return -1;
var i = 0; let i = 0;
do { do {
i++; i++;
} while (el == el.previousElementSibling); } while (el == el.previousElementSibling);

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

@@ -68,48 +68,48 @@ class TopPanel {
let i, len; let i, len;
if (!isNullish(this.selectedElement)) { if (!isNullish(this.selectedElement)) {
switch (this.selectedElement.tagName) { switch (this.selectedElement.tagName) {
case "use": case "use":
case "image": case "image":
case "foreignObject": case "foreignObject":
break; break;
case "g": case "g":
case "a": { case "a": {
// Look for common styles // Look for common styles
const childs = this.selectedElement.getElementsByTagName("*"); const childs = this.selectedElement.getElementsByTagName("*");
let gWidth = null; let gWidth = null;
for (i = 0, len = childs.length; i < len; i++) { for (i = 0, len = childs.length; i < len; i++) {
const swidth = childs[i].getAttribute("stroke-width"); const swidth = childs[i].getAttribute("stroke-width");
if (i === 0) { if (i === 0) {
gWidth = swidth; gWidth = swidth;
} else if (gWidth !== swidth) { } else if (gWidth !== swidth) {
gWidth = null; 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_width").value = (gWidth === null ? "" : gWidth);
$id("stroke_style").value = this.selectedElement.getAttribute("stroke-dasharray") || "none"; 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"; this.selectedElement.getAttribute("stroke-linejoin") || "miter";
if ($id("linejoin_" + attr).length) { if ($id("linejoin_" + attr).length) {
this.setStrokeOpt($id("linejoin_" + attr)); this.setStrokeOpt($id("linejoin_" + attr));
}
attr = this.selectedElement.getAttribute("stroke-linecap") || "butt";
if ($id("linecap_" + attr).length) {
this.setStrokeOpt($id("linecap_" + 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 textAnchorMiddle = $id("tool_text_anchor_middle");
const textAnchorEnd = $id("tool_text_anchor_end"); const textAnchorEnd = $id("tool_text_anchor_end");
switch (elem.getAttribute("text-anchor")) { switch (elem.getAttribute("text-anchor")) {
case "start": case "start":
textAnchorStart.pressed = true; textAnchorStart.pressed = true;
textAnchorMiddle.pressed = false; textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = false; textAnchorEnd.pressed = false;
break; break;
case "middle": case "middle":
textAnchorStart.pressed = false; textAnchorStart.pressed = false;
textAnchorMiddle.pressed = true; textAnchorMiddle.pressed = true;
textAnchorEnd.pressed = false; textAnchorEnd.pressed = false;
break; break;
case "end": case "end":
textAnchorStart.pressed = false; textAnchorStart.pressed = false;
textAnchorMiddle.pressed = false; textAnchorMiddle.pressed = false;
textAnchorEnd.pressed = true; textAnchorEnd.pressed = true;
break; break;
} }
if (this.editor.svgCanvas.addedNew) { if (this.editor.svgCanvas.addedNew) {
// Timeout needed for IE9 // 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 // now we have a set of changes and an applied reduced transform list
// we apply the changes directly to the DOM // we apply the changes directly to the DOM
switch (elName) { switch (elName) {
case 'foreignObject': case 'foreignObject':
case 'rect': case 'rect':
case 'image': { case 'image': {
// Allow images to be inverted (give them matrix when flipped) // Allow images to be inverted (give them matrix when flipped)
if (elName === 'image' && (m.a < 0 || m.d < 0)) { if (elName === 'image' && (m.a < 0 || m.d < 0)) {
// Convert to matrix // Convert to matrix
const chlist = getTransformList(selected); const chlist = getTransformList(selected);
const mt = editorContext_.getSVGRoot().createSVGTransform(); const mt = editorContext_.getSVGRoot().createSVGTransform();
mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m)); mt.setMatrix(matrixMultiply(transformListToTransform(chlist).matrix, m));
chlist.clear(); chlist.clear();
chlist.appendItem(mt); chlist.appendItem(mt);
} else { } else {
const pt1 = remap(changes.x, changes.y); const pt1 = remap(changes.x, changes.y);
changes.width = scalew(changes.width); changes.width = scalew(changes.width);
changes.height = scaleh(changes.height); changes.height = scaleh(changes.height);
changes.x = pt1.x + Math.min(0, changes.width); changes.x = pt1.x + Math.min(0, changes.width);
changes.y = pt1.y + Math.min(0, changes.height); changes.y = pt1.y + Math.min(0, changes.height);
changes.width = Math.abs(changes.width); changes.width = Math.abs(changes.width);
changes.height = Math.abs(changes.height); 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;
} }
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 // manually create a copy of the element
const newEl = document.createElementNS(el.namespaceURI, el.nodeName); const newEl = document.createElementNS(el.namespaceURI, el.nodeName);
Object.values(el.attributes).forEach((attr) => { 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 // set the copied element's new id
newEl.removeAttribute('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) { switch (val) {
case 'selection': { case 'selection': {
if (!selectedElements[0]) { return undefined; } if (!selectedElements[0]) { return undefined; }
const selectedElems = selectedElements.map(function (n, _) { const selectedElems = selectedElements.map(function (n, _) {
if (n) { if (n) {
return 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 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); return calcZoom(bb);
}; };
@@ -476,14 +476,14 @@ export const setPaintMethod = function (type, paint) {
// now set the current paint object // now set the current paint object
elemContext_.setCurProperties(type + '_paint', p); elemContext_.setCurProperties(type + '_paint', p);
switch (p.type) { switch (p.type) {
case 'solidColor': case 'solidColor':
this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none'); this.setColor(type, p.solidColor !== 'none' ? '#' + p.solidColor : 'none');
break; break;
case 'linearGradient': case 'linearGradient':
case 'radialGradient': case 'radialGradient':
elemContext_.setCanvas(type + 'Grad', p[p.type]); elemContext_.setCanvas(type + 'Grad', p[p.type]);
elemContext_.getCanvas().setGradient(type); elemContext_.getCanvas().setGradient(type);
break; 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). // If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
switch (selected.tagName) { switch (selected.tagName) {
// Ignore these elements, as they can absorb the [M] // Ignore these elements, as they can absorb the [M]
case 'line': case 'line':
case 'polyline': case 'polyline':
case 'polygon': case 'polygon':
case 'path': case 'path':
break; break;
default: default:
if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) || if ((tlist.numberOfItems === 1 && tlist.getItem(0).type === 1) ||
(tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) { (tlist.numberOfItems === 2 && tlist.getItem(0).type === 1 && tlist.getItem(0).type === 4)) {
return null; return null;
} }
} }
// Grouped SVG element // Grouped SVG element
const gsvg = (dataStorage.has(selected, 'gsvg')) ? dataStorage.get(selected, 'gsvg') : undefined; const gsvg = (dataStorage.has(selected, 'gsvg')) ? dataStorage.get(selected, 'gsvg') : undefined;
@@ -185,42 +185,42 @@ export const recalculateDimensions = function (selected) {
let initial = null; let initial = null;
let attrs = []; let attrs = [];
switch (selected.tagName) { switch (selected.tagName) {
case 'line': case 'line':
attrs = [ 'x1', 'y1', 'x2', 'y2' ]; attrs = [ 'x1', 'y1', 'x2', 'y2' ];
break; break;
case 'circle': case 'circle':
attrs = [ 'cx', 'cy', 'r' ]; attrs = [ 'cx', 'cy', 'r' ];
break; break;
case 'ellipse': case 'ellipse':
attrs = [ 'cx', 'cy', 'rx', 'ry' ]; attrs = [ 'cx', 'cy', 'rx', 'ry' ];
break; break;
case 'foreignObject': case 'foreignObject':
case 'rect': case 'rect':
case 'image': case 'image':
attrs = [ 'width', 'height', 'x', 'y' ]; attrs = [ 'width', 'height', 'x', 'y' ];
break; break;
case 'use': case 'use':
case 'text': case 'text':
case 'tspan': case 'tspan':
attrs = [ 'x', 'y' ]; attrs = [ 'x', 'y' ];
break; break;
case 'polygon': case 'polygon':
case 'polyline': { case 'polyline': {
initial = {}; initial = {};
initial.points = selected.getAttribute('points'); initial.points = selected.getAttribute('points');
const list = selected.points; const list = selected.points;
const len = list.numberOfItems; const len = list.numberOfItems;
changes.points = new Array(len); changes.points = new Array(len);
for (let i = 0; i < len; ++i) { for (let i = 0; i < len; ++i) {
const pt = list.getItem(i); const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y }; changes.points[i] = { x: pt.x, y: pt.y };
} }
break; break;
} case 'path': } case 'path':
initial = {}; initial = {};
initial.d = selected.getAttribute('d'); initial.d = selected.getAttribute('d');
changes.d = selected.getAttribute('d'); changes.d = selected.getAttribute('d');
break; break;
} // switch on element type to get initial values } // switch on element type to get initial values
if (attrs.length) { if (attrs.length) {
@@ -702,34 +702,34 @@ export const recalculateDimensions = function (selected) {
// Remap all point-based elements // Remap all point-based elements
m = transformListToTransform(tlist).matrix; m = transformListToTransform(tlist).matrix;
switch (selected.tagName) { switch (selected.tagName) {
case 'line': case 'line':
changes = { changes = {
x1: selected.getAttribute('x1'), x1: selected.getAttribute('x1'),
y1: selected.getAttribute('y1'), y1: selected.getAttribute('y1'),
x2: selected.getAttribute('x2'), x2: selected.getAttribute('x2'),
y2: selected.getAttribute('y2'), y2: selected.getAttribute('y2'),
}; };
// Fallthrough // Fallthrough
case 'polyline': case 'polyline':
case 'polygon': case 'polygon':
changes.points = selected.getAttribute('points'); changes.points = selected.getAttribute('points');
if (changes.points) { if (changes.points) {
const list = selected.points; const list = selected.points;
const len = list.numberOfItems; const len = list.numberOfItems;
changes.points = new Array(len); changes.points = new Array(len);
for (let i = 0; i < len; ++i) { for (let i = 0; i < len; ++i) {
const pt = list.getItem(i); const pt = list.getItem(i);
changes.points[i] = { x: pt.x, y: pt.y }; changes.points[i] = { x: pt.x, y: pt.y };
}
} }
}
// Fallthrough // Fallthrough
case 'path': case 'path':
changes.d = selected.getAttribute('d'); changes.d = selected.getAttribute('d');
operation = 1; operation = 1;
tlist.clear(); tlist.clear();
break; break;
default: default:
break; break;
} }
// if it was a rotation, put the rotate back and return without a command // if it was a rotation, put the rotate back and return without a command
// (this function has zero work to do for a rotate()) // (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) { function index(el) {
if (!el) return -1; if (!el) return -1;
var i = 0; let i = 0;
do { do {
i++; i++;
} while (el == el.previousElementSibling); } while (el == el.previousElementSibling);
@@ -300,40 +300,40 @@ export const alignSelectedElements = function (type, relativeTo) {
// now bbox is axis-aligned and handles rotation // now bbox is axis-aligned and handles rotation
switch (relativeTo) { switch (relativeTo) {
case 'smallest': case 'smallest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') && if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) || (curwidth === Number.MIN_VALUE || curwidth > bboxes[i].width)) ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') && ((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight > bboxes[i].height)) (curheight === Number.MIN_VALUE || curheight > bboxes[i].height))
) { ) {
minx = bboxes[i].x; minx = bboxes[i].x;
miny = bboxes[i].y; miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width; maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height; maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width; curwidth = bboxes[i].width;
curheight = bboxes[i].height; curheight = bboxes[i].height;
} }
break; break;
case 'largest': case 'largest':
if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') && if (((type === 'l' || type === 'c' || type === 'r' || type === 'left' || type === 'center' || type === 'right') &&
(curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) || (curwidth === Number.MIN_VALUE || curwidth < bboxes[i].width)) ||
((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') && ((type === 't' || type === 'm' || type === 'b' || type === 'top' || type === 'middle' || type === 'bottom') &&
(curheight === Number.MIN_VALUE || curheight < bboxes[i].height)) (curheight === Number.MIN_VALUE || curheight < bboxes[i].height))
) { ) {
minx = bboxes[i].x; minx = bboxes[i].x;
miny = bboxes[i].y; miny = bboxes[i].y;
maxx = bboxes[i].x + bboxes[i].width; maxx = bboxes[i].x + bboxes[i].width;
maxy = bboxes[i].y + bboxes[i].height; maxy = bboxes[i].y + bboxes[i].height;
curwidth = bboxes[i].width; curwidth = bboxes[i].width;
curheight = bboxes[i].height; curheight = bboxes[i].height;
} }
break; break;
default: // 'selected' default: // 'selected'
if (bboxes[i].x < minx) { minx = bboxes[i].x; } if (bboxes[i].x < minx) { minx = bboxes[i].x; }
if (bboxes[i].y < miny) { miny = bboxes[i].y; } 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].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; } if (bboxes[i].y + bboxes[i].height > maxy) { maxy = bboxes[i].y + bboxes[i].height; }
break; break;
} }
} // loop for each element to find the bbox and adjust min/max } // 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; dx[i] = 0;
dy[i] = 0; dy[i] = 0;
switch (type) { switch (type) {
case 'l': // left (horizontal) case 'l': // left (horizontal)
case 'left': // left (horizontal) case 'left': // left (horizontal)
dx[i] = minx - bbox.x; dx[i] = minx - bbox.x;
break; break;
case 'c': // center (horizontal) case 'c': // center (horizontal)
case 'center': // center (horizontal) case 'center': // center (horizontal)
dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2); dx[i] = (minx + maxx) / 2 - (bbox.x + bbox.width / 2);
break; break;
case 'r': // right (horizontal) case 'r': // right (horizontal)
case 'right': // right (horizontal) case 'right': // right (horizontal)
dx[i] = maxx - (bbox.x + bbox.width); dx[i] = maxx - (bbox.x + bbox.width);
break; break;
case 't': // top (vertical) case 't': // top (vertical)
case 'top': // top (vertical) case 'top': // top (vertical)
dy[i] = miny - bbox.y; dy[i] = miny - bbox.y;
break; break;
case 'm': // middle (vertical) case 'm': // middle (vertical)
case 'middle': // middle (vertical) case 'middle': // middle (vertical)
dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2); dy[i] = (miny + maxy) / 2 - (bbox.y + bbox.height / 2);
break; break;
case 'b': // bottom (vertical) case 'b': // bottom (vertical)
case 'bottom': // bottom (vertical) case 'bottom': // bottom (vertical)
dy[i] = maxy - (bbox.y + bbox.height); dy[i] = maxy - (bbox.y + bbox.height);
break; break;
} }
} }
moveSelectedElements(dx, dy); moveSelectedElements(dx, dy);
@@ -460,15 +460,15 @@ export const groupSelectedElements = function (type, urlArg) {
// eslint-disable-next-line sonarjs/no-small-switch // eslint-disable-next-line sonarjs/no-small-switch
switch (type) { switch (type) {
case 'a': { case 'a': {
cmdStr = 'Make hyperlink'; cmdStr = 'Make hyperlink';
url = urlArg || ''; url = urlArg || '';
break; break;
} default: { } default: {
type = 'g'; type = 'g';
cmdStr = 'Group Elements'; cmdStr = 'Group Elements';
break; break;
} }
} }
const batchCmd = new BatchCommand(cmdStr); 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++) { for (let i = 0; i < childs.length; i++) {
const child = childs.item(i); const child = childs.item(i);
switch (child.nodeType) { switch (child.nodeType) {
case 1: // element node case 1: // element node
out.push('\n'); out.push('\n');
out.push(this.svgToString(child, indent)); out.push(this.svgToString(child, indent));
break; break;
case 3: { // text node case 3: { // text node
const str = child.nodeValue.replace(/^\s+|\s+$/g, ''); const str = child.nodeValue.replace(/^\s+|\s+$/g, '');
if (str !== '') { if (str !== '') {
bOneLine = true; bOneLine = true;
out.push(String(toXml(str))); out.push(String(toXml(str)));
} }
break; break;
} case 4: // cdata node } case 4: // cdata node
out.push('\n'); out.push('\n');
out.push(new Array(indent + 1).join(' ')); out.push(new Array(indent + 1).join(' '));
out.push('<![CDATA['); out.push('<![CDATA[');
out.push(child.nodeValue); out.push(child.nodeValue);
out.push(']]>'); out.push(']]>');
break; break;
case 8: // comment case 8: // comment
out.push('\n'); out.push('\n');
out.push(new Array(indent + 1).join(' ')); out.push(new Array(indent + 1).join(' '));
out.push('<!--'); out.push('<!--');
out.push(child.data); out.push(child.data);
out.push('-->'); out.push('-->');
break; break;
} // switch on node type } // switch on node type
} }
indent--; 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); return this._storage.has(element) && this._storage.get(element).has(key);
}, },
remove: function (element, 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) { if (!this._storage.get(element).size === 0) {
this._storage.delete(element); this._storage.delete(element);
} }
@@ -787,65 +787,49 @@ class SvgCanvas {
*/ */
// Object to contain image data for raster images that were found encodable // 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 // String with image URL of last loadable image
/** let lastGoodImgUrl = curConfig.imgPath + 'logo.svg';
* @type {module:svgcanvas.SaveOptions} // Boolean indicating whether or not a draw action has been started
*/ let started = false;
saveOptions = { round_digits: 5 }, // String with an element's initial transform attribute value
let startTransform = null;
// Object with IDs for imported files, to see if one was already added // String indicating the current editor mode
importIds = {}, let currentMode = 'select';
// String with the current direction in which an element is being resized
// Current text style properties let currentResizeMode = 'none';
curText = allProperties.text, // Current general properties
let curProperties = curShape;
// Object to contain all included extensions // Array with selected elements' Bounding box object
extensions = {}, // selectedBBoxes = new Array(1),
// The DOM element that was just selected
// Map of deleted reference elements let justSelected = null;
removedElements = {}; // DOM element for selection rectangle drawn by the user
let rubberBox = null;
let // Array of current BBoxes, used in getIntersectionList().
// String with image URL of last loadable image let curBBoxes = [];
lastGoodImgUrl = curConfig.imgPath + 'logo.svg', // Canvas point for the most recent right click
let lastClickPoint = null;
// 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;
this.runExtension = function (name, action, vars) { this.runExtension = function (name, action, vars) {
return this.runExtensions(action, vars, false, (n) => n === name); 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 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 * @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 * @function module:svgcanvas.SvgCanvas#runExtensions
@@ -855,7 +839,7 @@ class SvgCanvas {
* @param {module:svgcanvas.ExtensionNameFilter} nameFilter * @param {module:svgcanvas.ExtensionNameFilter} nameFilter
* @returns {GenericArray<module:svgcanvas.ExtensionStatus>|module:svgcanvas.ExtensionStatus|false} See {@tutorial ExtensionDocs} on the ExtensionStatus. * @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; this.runExtensions = runExtensionsMethod;
@@ -1037,14 +1021,14 @@ class SvgCanvas {
* @event module:svgcanvas.SvgCanvas#event:exportedPDF * @event module:svgcanvas.SvgCanvas#event:exportedPDF
* @type {module:svgcanvas.PDFExportedResults} * @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. * 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". * `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 * @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} * @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` * The promise return, if present, resolves to `undefined`
@@ -1059,7 +1043,7 @@ class SvgCanvas {
* @listens module:svgcanvas.SvgCanvas#event:GenericCanvasEvent * @listens module:svgcanvas.SvgCanvas#event:GenericCanvasEvent
* @returns {module:svgcanvas.EventHandlerReturn} * @returns {module:svgcanvas.EventHandlerReturn}
*/ */
/* eslint-disable max-len */ /* eslint-disable max-len */
/** /**
* Attaches a callback function to an event. * Attaches a callback function to an event.
* @function module:svgcanvas.SvgCanvas#bind * @function module:svgcanvas.SvgCanvas#bind
@@ -1067,7 +1051,7 @@ class SvgCanvas {
* @param {module:svgcanvas.EventHandler} f - The callback function to bind to the event * @param {module:svgcanvas.EventHandler} f - The callback function to bind to the event
* @returns {module:svgcanvas.EventHandler} The previous event * @returns {module:svgcanvas.EventHandler} The previous event
*/ */
/* eslint-enable max-len */ /* eslint-enable max-len */
canvas.bind = function (ev, f) { canvas.bind = function (ev, f) {
const old = events[ev]; const old = events[ev];
events[ev] = f; events[ev] = f;

250
src/svgcanvas/utilities.js
View File

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