diff --git a/.eslintrc.js b/.eslintrc.js index 681f0768..ed2edc3a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,7 +11,7 @@ module.exports = { "plugin:sonarjs/recommended", "eslint:recommended" ], - plugins: ["jsdoc", "promise", "html", "import", "sonarjs"], + plugins: [ "jsdoc", "promise", "html", "import", "sonarjs" ], parserOptions: { ecmaVersion: 2020, sourceType: "module" @@ -22,15 +22,19 @@ module.exports = { }, rules: { "node/no-unsupported-features/es-syntax": 0, - "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], - "sonarjs/cognitive-complexity": ["warn", 40], + "no-unused-vars": [ "error", { "argsIgnorePattern": "^_" } ], + "sonarjs/cognitive-complexity": [ "warn", 40 ], "sonarjs/no-duplicate-string": 0, "semi" : "error", + "no-trailing-spaces": "error", + "array-bracket-spacing": [ "error", "always" ], + "comma-spacing": "error", + "object-curly-spacing": [ "error", "always" ], }, overrides: [ { - files: [ 'cypress/**/*'], - extends: [ + files: [ 'cypress/**/*' ], + extends: [ "plugin:cypress/recommended" ], env: { @@ -42,12 +46,12 @@ module.exports = { }, rules: { // with ci, instrumented is not created before linter - "import/no-unresolved": [2, { ignore: ['instrumented'] }], + "import/no-unresolved": [ 2, { ignore: [ 'instrumented' ] } ], "node/no-missing-import": 0 } }, { - files: [ 'docs/**/*'], + files: [ 'docs/**/*' ], rules: { // md files have example that don't need a strict checking "no-undef": 0, "import/no-unresolved": 0, diff --git a/cypress/integration/ui/accessibility.js b/cypress/integration/ui/accessibility.js index 5ee13042..bb383668 100644 --- a/cypress/integration/ui/accessibility.js +++ b/cypress/integration/ui/accessibility.js @@ -13,10 +13,10 @@ describe('UI - Accessibility', function () { cy.configureAxe({ // Todo: Reenable when have time to fix // See https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#user-content-parameters-1 - rules: [{ + rules: [ { id: 'meta-viewport', enabled: false - }] + } ] /* branding: { brand: String, @@ -32,10 +32,10 @@ describe('UI - Accessibility', function () { {}, { rules: { - 'label-title-only': {enabled: false}, - 'page-has-heading-one': {enabled: false}, - region: {enabled: false}, - 'scrollable-region-focusable': {enabled: false} + 'label-title-only': { enabled: false }, + 'page-has-heading-one': { enabled: false }, + region: { enabled: false }, + 'scrollable-region-focusable': { enabled: false } } } ); diff --git a/cypress/integration/ui/clipboard.js b/cypress/integration/ui/clipboard.js index d9bbb944..26d423b6 100644 --- a/cypress/integration/ui/clipboard.js +++ b/cypress/integration/ui/clipboard.js @@ -11,13 +11,13 @@ describe('UI - Clipboard', function () { cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 - `, {force: true, parseSpecialCharSequences: false}); + `, { force: true, parseSpecialCharSequences: false }); cy.get('#tool_source_save').click(); cy.get('#testCircle').should('exist'); cy.get('#svg_1').should('not.exist'); @@ -25,20 +25,20 @@ describe('UI - Clipboard', function () { // Copy. cy.get('#testCircle').click().rightclick(); - cy.get('#cmenu_canvas a[href="#copy"]').click({force: true}); + cy.get('#cmenu_canvas a[href="#copy"]').click({ force: true }); // Paste. // Scrollbars fail to recenter in Cypress test. Works fine in reality. // Thus forcing click is needed since workspace is mostly offscreen. - cy.get('#svgroot').rightclick({force: true}); - cy.get('#cmenu_canvas a[href="#paste"]').click({force: true}); + cy.get('#svgroot').rightclick({ force: true }); + cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true }); cy.get('#testCircle').should('exist'); cy.get('#svg_1').should('exist'); cy.get('#svg_2').should('not.exist'); // Cut. cy.get('#testCircle').click().rightclick(); - cy.get('#cmenu_canvas a[href="#cut"]').click({force: true}); + cy.get('#cmenu_canvas a[href="#cut"]').click({ force: true }); cy.get('#testCircle').should('not.exist'); cy.get('#svg_1').should('exist'); cy.get('#svg_2').should('not.exist'); @@ -46,17 +46,17 @@ describe('UI - Clipboard', function () { // Paste. // Scrollbars fail to recenter in Cypress test. Works fine in reality. // Thus forcing click is needed since workspace is mostly offscreen. - cy.get('#svgroot').rightclick({force: true}); - cy.get('#cmenu_canvas a[href="#paste"]').click({force: true}); + cy.get('#svgroot').rightclick({ force: true }); + cy.get('#cmenu_canvas a[href="#paste"]').click({ force: true }); cy.get('#testCircle').should('not.exist'); cy.get('#svg_1').should('exist'); cy.get('#svg_2').should('exist'); // Delete. cy.get('#svg_2').click().rightclick(); - cy.get('#cmenu_canvas a[href="#delete"]').click({force: true}); + cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true }); cy.get('#svg_1').click().rightclick(); - cy.get('#cmenu_canvas a[href="#delete"]').click({force: true}); + cy.get('#cmenu_canvas a[href="#delete"]').click({ force: true }); cy.get('#svg_1').should('not.exist'); cy.get('#svg_2').should('not.exist'); }); diff --git a/cypress/integration/ui/control-points.js b/cypress/integration/ui/control-points.js index 4f1fe7a3..0dcc6c3c 100644 --- a/cypress/integration/ui/control-points.js +++ b/cypress/integration/ui/control-points.js @@ -11,23 +11,23 @@ describe('UI - Control Points', function () { const randomOffset = () => 2 + Math.round(10 + Math.random() * 40); cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 - `, {force: true, parseSpecialCharSequences: false}); - cy.get('#tool_source_save').click({force: true}); + `, { force: true, parseSpecialCharSequences: false }); + cy.get('#tool_source_save').click({ force: true }); - cy.get('#svg_1').click({force: true}).click({force: true}); + cy.get('#svg_1').click({ force: true }).click({ force: true }); - cy.get('#pathpointgrip_0').trigger('mousedown', {which: 1, force: true}) - .trigger('mousemove', randomOffset(), randomOffset(), {force: true}) - .trigger('mouseup', {force: true}); - cy.get('#pathpointgrip_1').trigger('mousedown', {which: 1, force: true}) - .trigger('mousemove', randomOffset(), randomOffset(), {force: true}) - .trigger('mouseup', {force: true}); + cy.get('#pathpointgrip_0').trigger('mousedown', { which: 1, force: true }) + .trigger('mousemove', randomOffset(), randomOffset(), { force: true }) + .trigger('mouseup', { force: true }); + cy.get('#pathpointgrip_1').trigger('mousedown', { which: 1, force: true }) + .trigger('mousemove', randomOffset(), randomOffset(), { force: true }) + .trigger('mouseup', { force: true }); cy.get('#svg_1[d]').should('not.contain', 'NaN'); }); diff --git a/cypress/integration/ui/export.js b/cypress/integration/ui/export.js index 48d68ba2..f77877c8 100644 --- a/cypress/integration/ui/export.js +++ b/cypress/integration/ui/export.js @@ -14,7 +14,7 @@ describe('UI - Export tests', function () { it('Editor - No parameters: Export button clicking; dialog opens', () => { openMainMenu(); - cy.get('#tool_export').click({force: true}); + cy.get('#tool_export').click({ force: true }); cy.get('#dialog_content select'); }); }); diff --git a/cypress/integration/ui/issues/issue-359.js b/cypress/integration/ui/issues/issue-359.js index fed05e2f..d93fb5b9 100644 --- a/cypress/integration/ui/issues/issue-359.js +++ b/cypress/integration/ui/issues/issue-359.js @@ -11,13 +11,13 @@ describe('Fix issue 359', function () { it('can undo without throwing', function () { cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 - `, {parseSpecialCharSequences: false, force: true}); + `, { parseSpecialCharSequences: false, force: true }); cy.get('#tool_source_save').click(); cy.get('#tool_undo').click(); cy.get('#tool_redo').click(); // test also redo to make the test more comprehensive diff --git a/cypress/integration/ui/issues/issue-407.js b/cypress/integration/ui/issues/issue-407.js index 69e67875..a7597aed 100644 --- a/cypress/integration/ui/issues/issue-407.js +++ b/cypress/integration/ui/issues/issue-407.js @@ -11,7 +11,7 @@ describe('Fix issue 407', function () { it('can enter edit on text child', function () { cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 @@ -20,16 +20,16 @@ describe('Fix issue 407', function () { hello - `, {force: true, parseSpecialCharSequences: false}); + `, { force: true, parseSpecialCharSequences: false }); cy.get('#tool_source_save').click(); cy.get('#svg_1').click().dblclick(); cy.get('#a_text').should('exist'); cy.get('#a_text') - .trigger('mousedown', {which: 1, force: true}) - .trigger('mouseup', {force: true}) - .dblclick({force: true}); + .trigger('mousedown', { which: 1, force: true }) + .trigger('mouseup', { force: true }) + .dblclick({ force: true }); // svgedit use the #text text field to capture the text - cy.get('#text').type('1234', {force: true}); + cy.get('#text').type('1234', { force: true }); cy.get('#a_text').should('have.text', 'he1234llo'); }); }); diff --git a/cypress/integration/ui/issues/issue-408.js b/cypress/integration/ui/issues/issue-408.js index b7524235..fdf1bb32 100644 --- a/cypress/integration/ui/issues/issue-408.js +++ b/cypress/integration/ui/issues/issue-408.js @@ -11,7 +11,7 @@ describe('Fix issue 408', function () { it('should not throw when showing/saving svg content', function () { cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 @@ -20,7 +20,7 @@ describe('Fix issue 408', function () { - `, {force: true, parseSpecialCharSequences: false}); + `, { force: true, parseSpecialCharSequences: false }); cy.get('#tool_source_save').click(); cy.get('#svg_6').click().dblclick(); // change context cy.get('#tool_source').click(); // reopen tool_source diff --git a/cypress/integration/ui/issues/issue-423.js b/cypress/integration/ui/issues/issue-423.js index 005d2311..6ab956fc 100644 --- a/cypress/integration/ui/issues/issue-423.js +++ b/cypress/integration/ui/issues/issue-423.js @@ -11,7 +11,7 @@ describe('Fix issue 423', function () { it('should not throw when undoing the move', function () { cy.get('#tool_source').click(); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 @@ -22,12 +22,12 @@ describe('Fix issue 423', function () { - `, {parseSpecialCharSequences: false, force: true}); - cy.get('#tool_source_save').click({force: true}); + `, { parseSpecialCharSequences: false, force: true }); + cy.get('#tool_source_save').click({ force: true }); cy.get('#TANK1') - .trigger('mousedown', {force: true}) - .trigger('mousemove', 50, 0, {force: true}) - .trigger('mouseup', {force: true}); - cy.get('#tool_undo').click({force: true}); + .trigger('mousedown', { force: true }) + .trigger('mousemove', 50, 0, { force: true }) + .trigger('mouseup', { force: true }); + cy.get('#tool_undo').click({ force: true }); }); }); diff --git a/cypress/integration/ui/scenario.js b/cypress/integration/ui/scenario.js index e5566709..df1eec6a 100644 --- a/cypress/integration/ui/scenario.js +++ b/cypress/integration/ui/scenario.js @@ -12,97 +12,97 @@ describe('use various parts of svg-edit', function () { }); it('check tool_source', function () { - cy.get('#tool_source').click({force: true}); + cy.get('#tool_source').click({ force: true }); cy.get('#svg_source_textarea') - .type('{selectall}', {force: true}) + .type('{selectall}', { force: true }) .type(` Layer 1 - `, {force: true, parseSpecialCharSequences: false}); - cy.get('#tool_source_save').click({force: true}); + `, { force: true, parseSpecialCharSequences: false }); + cy.get('#tool_source_save').click({ force: true }); testSnapshot(); }); it('check tool_fhpath', function () { cy.get('#tool_fhpath') - .click({force: true}); + .click({ force: true }); cy.get('#rect') - .trigger('mousemove', 200, 200, {force: true}) - .trigger('mousedown', 200, 200, {force: true}) - .trigger('mousemove', 20, 20, {force: true}) - .trigger('mouseup', {force: true}); + .trigger('mousemove', 200, 200, { force: true }) + .trigger('mousedown', 200, 200, { force: true }) + .trigger('mousemove', 20, 20, { force: true }) + .trigger('mouseup', { force: true }); cy.get('#svgcontent').toMatchSnapshot(); }); it('check tool_text', function () { cy.get('#tool_text') - .click({force: true}); + .click({ force: true }); cy.get('#rect') - .trigger('mousedown', 46, 35, {force: true}) - .trigger('mouseup', {force: true}); + .trigger('mousedown', 46, 35, { force: true }) + .trigger('mouseup', { force: true }); // svgedit use the #text text field to capture the text - cy.get('#text').type('AB', {force: true}); + cy.get('#text').type('AB', { force: true }); testSnapshot(); }); it('check tool_clone', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_clone') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_italic', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_italic') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_bold', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_bold') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check change color', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('[data-rgb="#ffff00"]') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_text_anchor_start', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_text_anchor_start') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_text_anchor_middle', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_text_anchor_middle') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_text_anchor_end', function () { - cy.get('#svg_1').click({force: true}); + cy.get('#svg_1').click({ force: true }); cy.get('#tool_text_anchor_end') - .click({force: true}); + .click({ force: true }); testSnapshot(); }); it('check tool_star', function () { cy.get('#tool_star') - .click({force: true}); + .click({ force: true }); cy.get('#svgcontent') - .trigger('mousedown', 300, 150, {force: true}) - .trigger('mousemove', 300, 250, {force: true}) - .trigger('mouseup', {force: true}); + .trigger('mousedown', 300, 150, { force: true }) + .trigger('mousemove', 300, 250, { force: true }) + .trigger('mouseup', { force: true }); testSnapshot(); }); it('check tool_polygon', function () { cy.get('#tool_polygon') - .click({force: true}); + .click({ force: true }); cy.get('#svgcontent') - .trigger('mousedown', 350, 250, {force: true}) - .trigger('mousemove', 350, 370, {force: true}) - .trigger('mouseup', {force: true}); + .trigger('mousedown', 350, 250, { force: true }) + .trigger('mousemove', 350, 370, { force: true }) + .trigger('mouseup', { force: true }); testSnapshot(); }); }); diff --git a/cypress/integration/ui/tool-selection.js b/cypress/integration/ui/tool-selection.js index d96d37b2..c2e63289 100644 --- a/cypress/integration/ui/tool-selection.js +++ b/cypress/integration/ui/tool-selection.js @@ -11,7 +11,7 @@ describe('UI - Tool selection', function () { cy.get('#tools_rect') .should('not.have.attr', 'pressed'); cy.get('#tools_rect') - .trigger('click', {force: true}) + .trigger('click', { force: true }) .should('have.attr', 'pressed'); }); }); diff --git a/cypress/integration/unit/contextmenu.js b/cypress/integration/unit/contextmenu.js index ef3fce6d..63e15a2f 100644 --- a/cypress/integration/unit/contextmenu.js +++ b/cypress/integration/unit/contextmenu.js @@ -19,26 +19,26 @@ describe('contextmenu', function () { it('Test svgedit.contextmenu does not add invalid menu item', function () { assert.throws( - () => contextmenu.add({id: 'justanid'}), + () => contextmenu.add({ id: 'justanid' }), null, null, 'menu item with just an id is invalid' ); assert.throws( - () => contextmenu.add({id: 'idandlabel', label: 'anicelabel'}), + () => contextmenu.add({ id: 'idandlabel', label: 'anicelabel' }), null, null, 'menu item with just an id and label is invalid' ); assert.throws( - () => contextmenu.add({id: 'idandlabel', label: 'anicelabel', action: 'notafunction'}), + () => contextmenu.add({ id: 'idandlabel', label: 'anicelabel', action: 'notafunction' }), null, null, 'menu item with action that is not a function is invalid' ); }); it('Test svgedit.contextmenu adds valid menu item', function () { - const validItem = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; + const validItem = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }; contextmenu.add(validItem); assert.ok(contextmenu.hasCustomHandler('valid'), 'Valid menu item is added.'); @@ -46,8 +46,8 @@ describe('contextmenu', function () { }); it('Test svgedit.contextmenu rejects valid duplicate menu item id', function () { - const validItem1 = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; - const validItem2 = {id: 'valid', label: 'anicelabel', action () { /* empty fn */ }}; + const validItem1 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }; + const validItem2 = { id: 'valid', label: 'anicelabel', action () { /* empty fn */ } }; contextmenu.add(validItem1); assert.throws( diff --git a/cypress/integration/unit/coords.js b/cypress/integration/unit/coords.js index 51dd7ee0..22fcd23f 100644 --- a/cypress/integration/unit/coords.js +++ b/cypress/integration/unit/coords.js @@ -1,6 +1,6 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; import * as coords from '../../../instrumented/svgcanvas/coords.js'; diff --git a/cypress/integration/unit/draw.js b/cypress/integration/unit/draw.js index 0bb610bf..f18338e5 100644 --- a/cypress/integration/unit/draw.js +++ b/cypress/integration/unit/draw.js @@ -1,6 +1,6 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as draw from '../../../instrumented/svgcanvas/draw.js'; import * as units from '../../../instrumented/common/units.js'; @@ -61,7 +61,7 @@ describe('draw.Drawing', function () { */ function createSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); - Object.entries(jsonMap.attr).forEach(([attr, value]) => { + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { elem.setAttribute(attr, value); }); return elem; @@ -86,7 +86,7 @@ describe('draw.Drawing', function () { layer3.append(layer3Title); svgElem.append(layer3); - return [layer1, layer2, layer3]; + return [ layer1, layer2, layer3 ]; }; const createSomeElementsInGroup = function (group) { @@ -101,11 +101,11 @@ describe('draw.Drawing', function () { // }), createSVGElement({ element: 'rect', - attr: {x: '0', y: '1', width: '5', height: '10'} + attr: { x: '0', y: '1', width: '5', height: '10' } }), createSVGElement({ element: 'line', - attr: {x1: '0', y1: '1', x2: '5', y2: '6'} + attr: { x1: '0', y1: '1', x2: '5', y2: '6' } }) ); @@ -115,7 +115,7 @@ describe('draw.Drawing', function () { }); g.append(createSVGElement({ element: 'rect', - attr: {x: '0', y: '1', width: '5', height: '10'} + attr: { x: '0', y: '1', width: '5', height: '10' } })); group.append(g); return 4; diff --git a/cypress/integration/unit/history.js b/cypress/integration/unit/history.js index 11b00cd6..f9d13e2a 100644 --- a/cypress/integration/unit/history.js +++ b/cypress/integration/unit/history.js @@ -1,6 +1,6 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; import * as hstory from '../../../instrumented/svgcanvas/history.js'; @@ -402,7 +402,7 @@ describe('history', function () { it('Test ChangeElementCommand', function () { this.div1.setAttribute('title', 'new title'); let change = new hstory.ChangeElementCommand(this.div1, - {title: 'old title', class: 'foo'}); + { title: 'old title', class: 'foo' }); assert.ok(change.unapply); assert.ok(change.apply); assert.equal(typeof change.unapply, typeof function () { /* empty fn */ }); @@ -418,7 +418,7 @@ describe('history', function () { this.div1.textContent = 'inner text'; change = new hstory.ChangeElementCommand(this.div1, - {'#text': null}); + { '#text': null }); change.unapply(); assert.ok(!this.div1.textContent); @@ -428,7 +428,7 @@ describe('history', function () { this.div1.textContent = ''; change = new hstory.ChangeElementCommand(this.div1, - {'#text': 'old text'}); + { '#text': 'old text' }); change.unapply(); assert.equal(this.div1.textContent, 'old text'); @@ -457,7 +457,7 @@ describe('history', function () { gethrefvalue = '#newhref'; change = new hstory.ChangeElementCommand(rect, - {'#href': '#oldhref'}); + { '#href': '#oldhref' }); assert.equal(justCalled, 'getHref'); justCalled = null; @@ -472,7 +472,7 @@ describe('history', function () { const line = document.createElementNS(NS.SVG, 'line'); line.setAttribute('class', 'newClass'); - change = new hstory.ChangeElementCommand(line, {class: 'oldClass'}); + change = new hstory.ChangeElementCommand(line, { class: 'oldClass' }); assert.ok(change.unapply); assert.ok(change.apply); diff --git a/cypress/integration/unit/math.js b/cypress/integration/unit/math.js index 3852a2a0..deba647d 100644 --- a/cypress/integration/unit/math.js +++ b/cypress/integration/unit/math.js @@ -1,6 +1,6 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as math from '../../../instrumented/svgcanvas/math.js'; describe('math', function () { @@ -17,7 +17,7 @@ describe('math', function () { }); it('Test svgedit.math.transformPoint() function', function () { - const {transformPoint} = math; + const { transformPoint } = math; const m = svg.createSVGMatrix(); m.a = 1; m.b = 0; @@ -51,7 +51,7 @@ describe('math', function () { it('Test svgedit.math.matrixMultiply() function', function () { const mult = math.matrixMultiply; - const {isIdentity} = math; + const { isIdentity } = math; // translate there and back const tr1 = svg.createSVGMatrix().translate(100, 50), @@ -84,7 +84,7 @@ describe('math', function () { }); it('Test svgedit.math.transformBox() function', function () { - const {transformBox} = math; + const { transformBox } = math; const m = svg.createSVGMatrix(); m.a = 1; m.b = 0; diff --git a/cypress/integration/unit/path.js b/cypress/integration/unit/path.js index 2c82c12e..1636b79c 100644 --- a/cypress/integration/unit/path.js +++ b/cypress/integration/unit/path.js @@ -3,11 +3,11 @@ import 'pathseg'; import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; import * as pathModule from '../../../instrumented/svgcanvas/path.js'; -import {Path, Segment} from '../../../instrumented/svgcanvas/path-method.js'; -import {init as unitsInit} from '../../../instrumented/common/units.js'; +import { Path, Segment } from '../../../instrumented/svgcanvas/path-method.js'; +import { init as unitsInit } from '../../../instrumented/common/units.js'; describe('path', function () { /** @@ -48,7 +48,7 @@ describe('path', function () { const path = document.createElementNS(NS.SVG, 'path'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); - const [mockPathContext, mockUtilitiesContext] = getMockContexts(); + const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(); pathModule.init(mockPathContext); utilities.init(mockUtilitiesContext); new Path(path); // eslint-disable-line no-new @@ -57,7 +57,7 @@ describe('path', function () { assert.equal(path.pathSegList.getItem(1).x, 10); assert.equal(path.pathSegList.getItem(1).y, 11); - pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [30, 31], path); + pathModule.replacePathSeg(SVGPathSeg.PATHSEG_LINETO_REL, 1, [ 30, 31 ], path); assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'l'); assert.equal(path.pathSegList.getItem(1).x, 30); @@ -68,7 +68,7 @@ describe('path', function () { const path = document.createElementNS(NS.SVG, 'path'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); - const [mockPathContext, mockUtilitiesContext] = getMockContexts(); + const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(); pathModule.init(mockPathContext); utilities.init(mockUtilitiesContext); new Path(path); // eslint-disable-line no-new @@ -78,7 +78,7 @@ describe('path', function () { assert.equal(path.pathSegList.getItem(1).y, 11); const segment = new Segment(1, path.pathSegList.getItem(1)); - segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [30, 31]); + segment.setType(SVGPathSeg.PATHSEG_LINETO_REL, [ 30, 31 ]); assert.equal(segment.item.pathSegTypeAsLetter, 'l'); assert.equal(segment.item.x, 30); assert.equal(segment.item.y, 31); @@ -96,7 +96,7 @@ describe('path', function () { path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z'); svg.append(path); - const [mockPathContext, mockUtilitiesContext] = getMockContexts(svg); + const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(svg); pathModule.init(mockPathContext); utilities.init(mockUtilitiesContext); const segment = new Segment(1, path.pathSegList.getItem(1)); @@ -110,7 +110,7 @@ describe('path', function () { assert.equal(path.pathSegList.getItem(1).x, 15); assert.equal(path.pathSegList.getItem(1).y, 16); - segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [30, 31, 32, 33, 34, 35]); + segment.setType(SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL, [ 30, 31, 32, 33, 34, 35 ]); assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'c'); assert.equal(path.pathSegList.getItem(1).x1, 32); assert.equal(path.pathSegList.getItem(1).y1, 33); @@ -124,7 +124,7 @@ describe('path', function () { const path = document.createElementNS(NS.SVG, 'path'); path.setAttribute('d', 'M0,0 L10,11 L20,21Z'); - const [mockPathContext, mockUtilitiesContext] = getMockContexts(); + const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(); pathModule.init(mockPathContext); utilities.init(mockUtilitiesContext); new Path(path); // eslint-disable-line no-new @@ -144,7 +144,7 @@ describe('path', function () { const path = document.createElementNS(NS.SVG, 'path'); path.setAttribute('d', 'M0,0 C11,12 13,14 15,16 Z'); - const [mockPathContext, mockUtilitiesContext] = getMockContexts(); + const [ mockPathContext, mockUtilitiesContext ] = getMockContexts(); pathModule.init(mockPathContext); utilities.init(mockUtilitiesContext); new Path(path); // eslint-disable-line no-new diff --git a/cypress/integration/unit/sanitize.js b/cypress/integration/unit/sanitize.js index 4ff4f853..45a95a98 100644 --- a/cypress/integration/unit/sanitize.js +++ b/cypress/integration/unit/sanitize.js @@ -1,6 +1,6 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as sanitize from '../../../instrumented/svgcanvas/sanitize.js'; describe('sanitize', function () { diff --git a/cypress/integration/unit/select.js b/cypress/integration/unit/select.js index 8d3b2672..0ee2a376 100644 --- a/cypress/integration/unit/select.js +++ b/cypress/integration/unit/select.js @@ -1,7 +1,7 @@ import '../../../instrumented/editor/jquery.min.js'; import * as select from '../../../instrumented/svgcanvas/select.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; describe('select', function () { const sandbox = document.createElement('div'); @@ -10,7 +10,7 @@ describe('select', function () { let svgroot; let svgcontent; const mockConfig = { - dimensions: [640, 480] + dimensions: [ 640, 480 ] }; const dataStorage = { _storage: new WeakMap(), @@ -33,7 +33,7 @@ describe('select', function () { } return ret; } - }; + }; /** * @implements {module:select.SVGFactory} @@ -41,7 +41,7 @@ describe('select', function () { const mockFactory = { createSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); - Object.entries(jsonMap.attr).forEach(([attr, value]) => { + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { elem.setAttribute(attr, value); }); return elem; @@ -58,11 +58,11 @@ describe('select', function () { beforeEach(() => { svgroot = mockFactory.createSVGElement({ element: 'svg', - attr: {id: 'svgroot'} + attr: { id: 'svgroot' } }); svgcontent = mockFactory.createSVGElement({ element: 'svg', - attr: {id: 'svgcontent'} + attr: { id: 'svgcontent' } }); svgroot.append(svgcontent); diff --git a/cypress/integration/unit/svgtransformlist.js b/cypress/integration/unit/svgtransformlist.js index f5a35859..888b4a3e 100644 --- a/cypress/integration/unit/svgtransformlist.js +++ b/cypress/integration/unit/svgtransformlist.js @@ -1,8 +1,8 @@ import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js'; -import {disableSupportsNativeTransformLists} from '../../../instrumented/common/browser.js'; +import { disableSupportsNativeTransformLists } from '../../../instrumented/common/browser.js'; import almostEqualsPlugin from '../../support/assert-almostEquals.js'; import expectOutOfBoundsExceptionPlugin from '../../support/assert-expectOutOfBoundsException.js'; diff --git a/cypress/integration/unit/test1.js b/cypress/integration/unit/test1.js index fe073e37..64f2ee83 100644 --- a/cypress/integration/unit/test1.js +++ b/cypress/integration/unit/test1.js @@ -34,14 +34,14 @@ describe('Basic Module', function () { workarea.append(svgcanvas); const toolsLeft = document.createElement('div'); toolsLeft.id = 'tools_left'; - + svgEditor.append(workarea, toolsLeft); document.body.append(svgEditor); svgCanvas = new SvgCanvas( document.getElementById('svgcanvas'), { canvas_expansion: 3, - dimensions: [640, 480], + dimensions: [ 640, 480 ], initFill: { color: 'FF0000', // solid red opacity: 1 @@ -55,7 +55,7 @@ describe('Basic Module', function () { imgPath: '../editor/images/', langPath: 'locale/', extPath: 'extensions/', - extensions: ['ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js'], + extensions: [ 'ext-arrows.js', 'ext-connector.js', 'ext-eyedropper.js' ], initTool: 'select', wireframe: false } diff --git a/cypress/integration/unit/units.js b/cypress/integration/unit/units.js index b3e9e36e..6134ea55 100644 --- a/cypress/integration/unit/units.js +++ b/cypress/integration/unit/units.js @@ -51,7 +51,7 @@ describe('units', function () { assert.ok(units.shortFloat); assert.equal(typeof units.shortFloat, typeof function () { /* empty fn */ }); - const {shortFloat} = units; + const { shortFloat } = units; assert.equal(shortFloat(0.00000001), 0); assert.equal(shortFloat(1), 1); assert.equal(shortFloat(3.45678), 3.4568); @@ -63,7 +63,7 @@ describe('units', function () { assert.ok(units.isValidUnit); assert.equal(typeof units.isValidUnit, typeof function () { /* empty fn */ }); - const {isValidUnit} = units; + const { isValidUnit } = units; assert.ok(isValidUnit('0')); assert.ok(isValidUnit('1')); assert.ok(isValidUnit('1.1')); diff --git a/cypress/integration/unit/utilities-bbox.js b/cypress/integration/unit/utilities-bbox.js index c21108f0..433c1d44 100644 --- a/cypress/integration/unit/utilities-bbox.js +++ b/cypress/integration/unit/utilities-bbox.js @@ -3,7 +3,7 @@ import 'pathseg'; import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js'; import * as math from '../../../instrumented/svgcanvas/math.js'; @@ -20,7 +20,7 @@ describe('utilities bbox', function () { */ function mockCreateSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); - Object.entries(jsonMap.attr).forEach(([attr, value]) => { + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { elem.setAttribute(attr, value); }); return elem; @@ -55,7 +55,7 @@ describe('utilities bbox', function () { const type = seg.pathSegType; if (type === 1) { continue; } const pts = []; - ['', 1, 2].forEach(function (n) { + [ '', 1, 2 ].forEach(function (n) { const x = seg['x' + n], y = seg['y' + n]; if (x !== undefined && y !== undefined) { const pt = math.transformPoint(x, y, m); @@ -82,7 +82,7 @@ describe('utilities bbox', function () { svgroot = mockCreateSVGElement({ element: 'svg', - attr: {id: 'svgroot'} + attr: { id: 'svgroot' } }); sandbox.append(svgroot); @@ -101,41 +101,41 @@ describe('utilities bbox', function () { }); it('Test getBBoxWithTransform and no transform', function () { - const {getBBoxWithTransform} = utilities; + const { getBBoxWithTransform } = utilities; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 L2,3'} + attr: { id: 'path', d: 'M0,1 L2,3' } }); svgroot.append(elem); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); assert.equal(mockaddSVGElementFromJsonCallCount, 0); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.equal(mockaddSVGElementFromJsonCallCount, 0); elem.remove(); elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); assert.equal(mockaddSVGElementFromJsonCallCount, 0); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); const g = mockCreateSVGElement({ element: 'g', @@ -144,17 +144,17 @@ describe('utilities bbox', function () { g.append(elem); svgroot.append(g); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); assert.equal(mockaddSVGElementFromJsonCallCount, 0); g.remove(); }); it.skip('Test getBBoxWithTransform and a rotation transform', function () { - const {getBBoxWithTransform} = utilities; + const { getBBoxWithTransform } = utilities; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)'} + attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' } }); svgroot.append(elem); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -166,7 +166,7 @@ describe('utilities bbox', function () { elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)'} + attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -177,12 +177,12 @@ describe('utilities bbox', function () { assert.equal(mockaddSVGElementFromJsonCallCount, 1); elem.remove(); - const rect = {x: 10, y: 10, width: 10, height: 20}; + const rect = { x: 10, y: 10, width: 10, height: 20 }; const angle = 45; - const origin = {x: 15, y: 20}; // eslint-disable-line no-shadow + const origin = { x: 15, y: 20 }; // eslint-disable-line no-shadow elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'} + attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' } }); svgroot.append(elem); mockaddSVGElementFromJsonCallCount = 0; @@ -198,11 +198,11 @@ describe('utilities bbox', function () { // Same as previous but wrapped with g and the transform is with the g. elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height} + attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height } }); const g = mockCreateSVGElement({ element: 'g', - attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')'} + attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ')' } }); g.append(elem); svgroot.append(g); @@ -217,7 +217,7 @@ describe('utilities bbox', function () { elem = mockCreateSVGElement({ element: 'ellipse', - attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)'} + attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' } }); svgroot.append(elem); mockaddSVGElementFromJsonCallCount = 0; @@ -232,7 +232,7 @@ describe('utilities bbox', function () { }); it.skip('Test getBBoxWithTransform with rotation and matrix transforms', function () { - const {getBBoxWithTransform} = utilities; + const { getBBoxWithTransform } = utilities; let tx = 10; // tx right let ty = 10; // tx down @@ -241,7 +241,7 @@ describe('utilities bbox', function () { let matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix} + attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix } }); svgroot.append(elem); let bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -256,7 +256,7 @@ describe('utilities bbox', function () { matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix} + attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -266,9 +266,9 @@ describe('utilities bbox', function () { assert.close(bbox.height, 10, EPSILON); elem.remove(); - const rect = {x: 10, y: 10, width: 10, height: 20}; + const rect = { x: 10, y: 10, width: 10, height: 20 }; const angle = 45; - const origin = {x: 15, y: 20}; // eslint-disable-line no-shadow + const origin = { x: 15, y: 20 }; // eslint-disable-line no-shadow tx = 10; // tx right ty = 10; // tx down txInRotatedSpace = Math.sqrt(tx * tx + ty * ty); // translate in rotated 45 space. @@ -276,7 +276,7 @@ describe('utilities bbox', function () { matrix = 'matrix(1,0,0,1,' + txInRotatedSpace + ',' + tyInRotatedSpace + ')'; elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix} + attr: { id: 'rect2', x: rect.x, y: rect.y, width: rect.width, height: rect.height, transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -290,11 +290,11 @@ describe('utilities bbox', function () { // Same as previous but wrapped with g and the transform is with the g. elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height} + attr: { id: 'rect3', x: rect.x, y: rect.y, width: rect.width, height: rect.height } }); const g = mockCreateSVGElement({ element: 'g', - attr: {transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix} + attr: { transform: 'rotate(' + angle + ' ' + origin.x + ',' + origin.y + ') ' + matrix } }); g.append(elem); svgroot.append(g); @@ -307,7 +307,7 @@ describe('utilities bbox', function () { elem = mockCreateSVGElement({ element: 'ellipse', - attr: {id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix} + attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix } }); svgroot.append(elem); bbox = getBBoxWithTransform(elem, mockaddSVGElementFromJson, mockPathActions); @@ -320,39 +320,39 @@ describe('utilities bbox', function () { }); it('Test getStrokedBBox with stroke-width 10', function () { - const {getStrokedBBox} = utilities; + const { getStrokedBBox } = utilities; const strokeWidth = 10; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth} + attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth } }); svgroot.append(elem); - let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth}); + let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }); elem.remove(); elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth } }); const g = mockCreateSVGElement({ element: 'g', @@ -360,44 +360,44 @@ describe('utilities bbox', function () { }); g.append(elem); svgroot.append(g); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }); g.remove(); }); it("Test getStrokedBBox with stroke-width 'none'", function () { - const {getStrokedBBox} = utilities; + const { getStrokedBBox } = utilities; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none'} + attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' } }); svgroot.append(elem); - let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); + let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); elem.remove(); elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none'} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' } }); const g = mockCreateSVGElement({ element: 'g', @@ -405,44 +405,44 @@ describe('utilities bbox', function () { }); g.append(elem); svgroot.append(g); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); g.remove(); }); it('Test getStrokedBBox with no stroke-width attribute', function () { - const {getStrokedBBox} = utilities; + const { getStrokedBBox } = utilities; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 L2,3'} + attr: { id: 'path', d: 'M0,1 L2,3' } }); svgroot.append(elem); - let bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 2, height: 2}); + let bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); elem.remove(); elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }); svgroot.append(elem); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); const g = mockCreateSVGElement({ element: 'g', @@ -450,8 +450,8 @@ describe('utilities bbox', function () { }); g.append(elem); svgroot.append(g); - bbox = getStrokedBBox([elem], mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + bbox = getStrokedBBox([ elem ], mockaddSVGElementFromJson, mockPathActions); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); g.remove(); }); @@ -473,7 +473,7 @@ describe('utilities bbox', function () { */ function rotatePoint (point, angle, origin) { // eslint-disable-line no-shadow if (!origin) { - origin = {x: 0, y: 0}; + origin = { x: 0, y: 0 }; } const x = point.x - origin.x; const y = point.y - origin.y; @@ -491,10 +491,10 @@ describe('utilities bbox', function () { * @returns {module:utilities.BBoxObject} */ function rotateRect (rect, angle, origin) { // eslint-disable-line no-shadow - const tl = rotatePoint({x: rect.x, y: rect.y}, angle, origin); - const tr = rotatePoint({x: rect.x + rect.width, y: rect.y}, angle, origin); - const br = rotatePoint({x: rect.x + rect.width, y: rect.y + rect.height}, angle, origin); - const bl = rotatePoint({x: rect.x, y: rect.y + rect.height}, angle, origin); + const tl = rotatePoint({ x: rect.x, y: rect.y }, angle, origin); + const tr = rotatePoint({ x: rect.x + rect.width, y: rect.y }, angle, origin); + const br = rotatePoint({ x: rect.x + rect.width, y: rect.y + rect.height }, angle, origin); + const bl = rotatePoint({ x: rect.x, y: rect.y + rect.height }, angle, origin); const minx = Math.min(tl.x, tr.x, bl.x, br.x); const maxx = Math.max(tl.x, tr.x, bl.x, br.x); diff --git a/cypress/integration/unit/utilities-performance.js b/cypress/integration/unit/utilities-performance.js index ef683ec0..bd737e4b 100644 --- a/cypress/integration/unit/utilities-performance.js +++ b/cypress/integration/unit/utilities-performance.js @@ -2,7 +2,7 @@ import 'pathseg'; import '../../../instrumented/editor/jquery.min.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; import * as transformlist from '../../../instrumented/svgcanvas/svgtransformlist.js'; import * as math from '../../../instrumented/svgcanvas/math.js'; @@ -82,7 +82,7 @@ describe('utilities performance', function () { */ function mockCreateSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); - Object.entries(jsonMap.attr).forEach(([attr, value]) => { + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { elem.setAttribute(attr, value); }); return elem; @@ -111,7 +111,7 @@ describe('utilities performance', function () { const clone = elem.cloneNode(true); // t: deep clone // Make sure you set a unique ID like a real document. clone.setAttribute('id', elemId + index); - const {parentNode} = elem; + const { parentNode } = elem; parentNode.append(clone); } } @@ -135,7 +135,7 @@ describe('utilities performance', function () { continue; } const pts = []; - ['', 1, 2].forEach(function (n) { + [ '', 1, 2 ].forEach(function (n) { const x = seg['x' + n], y = seg['y' + n]; if (x !== undefined && y !== undefined) { @@ -183,8 +183,8 @@ describe('utilities performance', function () { // Pass2 svgCanvas.getStrokedBBox total ms 17, ave ms 0.2, min/max 0 23 it('Test svgCanvas.getStrokedBBox() performance with matrix transforms', function () { - const {getStrokedBBox} = utilities; - const {children} = currentLayer; + const { getStrokedBBox } = utilities; + const { children } = currentLayer; let lastTime, now, min = Number.MAX_VALUE, @@ -200,7 +200,7 @@ describe('utilities performance', function () { // Skip the first child which is the title. for (let index = 1; index < count; index++) { const child = children[index]; - /* const obj = */ getStrokedBBox([child], mockaddSVGElementFromJson, mockPathActions); + /* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions); now = Date.now(); const delta = now - lastTime; lastTime = now; total += delta; min = Math.min(min, delta); @@ -220,7 +220,7 @@ describe('utilities performance', function () { // Skip the first child which is the title. for (let index = 1; index < ct; index++) { const child = children[index]; - /* const obj = */ getStrokedBBox([child], mockaddSVGElementFromJson, mockPathActions); + /* const obj = */ getStrokedBBox([ child ], mockaddSVGElementFromJson, mockPathActions); now = Date.now(); const delta = now - lastTime; lastTime = now; total += delta; min = Math.min(min, delta); diff --git a/cypress/integration/unit/utilities.js b/cypress/integration/unit/utilities.js index e0190053..3e590bff 100644 --- a/cypress/integration/unit/utilities.js +++ b/cypress/integration/unit/utilities.js @@ -3,7 +3,7 @@ import '../../../instrumented/editor/jquery.min.js'; import * as browser from '../../../instrumented/common/browser.js'; import * as utilities from '../../../instrumented/svgcanvas/utilities.js'; -import {NS} from '../../../instrumented/common/namespaces.js'; +import { NS } from '../../../instrumented/common/namespaces.js'; describe('utilities', function () { /** @@ -13,7 +13,7 @@ describe('utilities', function () { */ function mockCreateSVGElement (jsonMap) { const elem = document.createElementNS(NS.SVG, jsonMap.element); - Object.entries(jsonMap.attr).forEach(([attr, value]) => { + Object.entries(jsonMap.attr).forEach(([ attr, value ]) => { elem.setAttribute(attr, value); }); return elem; @@ -28,7 +28,7 @@ describe('utilities', function () { svgroot.append(elem); return elem; } - const mockPathActions = {resetOrientation () { /* empty fn */ }}; + const mockPathActions = { resetOrientation () { /* empty fn */ } }; let mockHistorySubCommands = []; const mockHistory = { BatchCommand: class { @@ -92,7 +92,7 @@ describe('utilities', function () { svg = document.createElementNS(NS.SVG, 'svg'); svgroot = mockCreateSVGElement({ element: 'svg', - attr: {id: 'svgroot'} + attr: { id: 'svgroot' } }); sandbox.append(svgroot); document.body.append(sandbox); @@ -105,7 +105,7 @@ describe('utilities', function () { }); it('Test svgedit.utilities.toXml() function', function () { - const {toXml} = utilities; + const { toXml } = utilities; assert.equal(toXml('a'), 'a'); assert.equal(toXml('ABC_'), 'ABC_'); @@ -116,7 +116,7 @@ describe('utilities', function () { }); it('Test svgedit.utilities.fromXml() function', function () { - const {fromXml} = utilities; + const { fromXml } = utilities; assert.equal(fromXml('a'), 'a'); assert.equal(fromXml('ABC_'), 'ABC_'); @@ -127,7 +127,7 @@ describe('utilities', function () { }); it('Test svgedit.utilities.encode64() function', function () { - const {encode64} = utilities; + const { encode64 } = utilities; assert.equal(encode64('abcdef'), 'YWJjZGVm'); assert.equal(encode64('12345'), 'MTIzNDU='); @@ -136,7 +136,7 @@ describe('utilities', function () { }); it('Test svgedit.utilities.decode64() function', function () { - const {decode64} = utilities; + const { decode64 } = utilities; assert.equal(decode64('YWJjZGVm'), 'abcdef'); assert.equal(decode64('MTIzNDU='), '12345'); @@ -151,7 +151,7 @@ describe('utilities', function () { }); it('Test svgedit.utilities.bboxToObj() function', function () { - const {bboxToObj} = utilities; + const { bboxToObj } = utilities; const rect = svg.createSVGRect(); rect.x = 1; @@ -188,38 +188,38 @@ describe('utilities', function () { }); it('Test getPathDFromSegments', function () { - const {getPathDFromSegments} = utilities; + const { getPathDFromSegments } = utilities; const doc = utilities.text2xml(''); const path = doc.createElementNS(NS.SVG, 'path'); path.setAttribute('d', 'm0,0l5,0l0,5l-5,0l0,-5z'); let d = getPathDFromSegments([ - ['M', [1, 2]], - ['Z', []] + [ 'M', [ 1, 2 ] ], + [ 'Z', [] ] ]); assert.equal(d, 'M1,2 Z'); d = getPathDFromSegments([ - ['M', [1, 2]], - ['M', [3, 4]], - ['Z', []] + [ 'M', [ 1, 2 ] ], + [ 'M', [ 3, 4 ] ], + [ 'Z', [] ] ]); assert.equal(d, 'M1,2 M3,4 Z'); d = getPathDFromSegments([ - ['M', [1, 2]], - ['C', [3, 4, 5, 6]], - ['Z', []] + [ 'M', [ 1, 2 ] ], + [ 'C', [ 3, 4, 5, 6 ] ], + [ 'Z', [] ] ]); assert.equal(d, 'M1,2 C3,4 5,6 Z'); }); it('Test getPathDFromElement', function () { - const {getPathDFromElement} = utilities; + const { getPathDFromElement } = utilities; let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 Z'} + attr: { id: 'path', d: 'M0,1 Z' } }); svgroot.append(elem); assert.equal(getPathDFromElement(elem), 'M0,1 Z'); @@ -227,7 +227,7 @@ describe('utilities', function () { elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); svgroot.append(elem); assert.equal(getPathDFromElement(elem), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z'); @@ -235,7 +235,7 @@ describe('utilities', function () { elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11'} + attr: { id: 'roundrect', x: '0', y: '1', rx: '2', ry: '3', width: '10', height: '11' } }); svgroot.append(elem); const closeEnough = /M0,13 C0,2.3\d* 0.9\d*,1 02,1 L8,1 C9.0\d*,1 10,2.3\d* 10,13 L10,9 C10,10.6\d* 9.08675799086758,12 8,12 L02,12 C0.9\d*,12 0,10.6\d* 0,9 L0,13 Z/; @@ -244,7 +244,7 @@ describe('utilities', function () { elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }); svgroot.append(elem); assert.equal(getPathDFromElement(elem), 'M0,1L5,6'); @@ -252,7 +252,7 @@ describe('utilities', function () { elem = mockCreateSVGElement({ element: 'circle', - attr: {id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10'} + attr: { id: 'circle', cx: '10', cy: '11', rx: '5', ry: '10' } }); svgroot.append(elem); assert.equal(getPathDFromElement(elem), 'M5,11 C5,5.475138121546961 7.237569060773481,1 10,1 C102.7624309392265194,1 105,5.475138121546961 105,11 C105,115.524861878453039 102.7624309392265194,1110 10,1110 C7.237569060773481,1110 5,115.524861878453039 5,11 Z'); @@ -260,13 +260,13 @@ describe('utilities', function () { elem = mockCreateSVGElement({ element: 'polyline', - attr: {id: 'polyline', points: '0,1 5,1 5,11 0,11'} + attr: { id: 'polyline', points: '0,1 5,1 5,11 0,11' } }); svgroot.append(elem); assert.equal(getPathDFromElement(elem), 'M0,1 5,1 5,11 0,11'); elem.remove(); - assert.equal(getPathDFromElement({tagName: 'something unknown'}), undefined); + assert.equal(getPathDFromElement({ tagName: 'something unknown' }), undefined); }); it('Test getBBoxOfElementAsPath', function () { @@ -281,36 +281,36 @@ describe('utilities', function () { let elem = mockCreateSVGElement({ element: 'path', - attr: {id: 'path', d: 'M0,1 Z'} + attr: { id: 'path', d: 'M0,1 Z' } }); svgroot.append(elem); let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 0, height: 0}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 }); elem.remove(); elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); svgroot.append(elem); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 10}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }); elem.remove(); elem = mockCreateSVGElement({ element: 'line', - attr: {id: 'line', x1: '0', y1: '1', x2: '5', y2: '6'} + attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }); svgroot.append(elem); bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementFromJson, mockPathActions); - assert.deepEqual(bbox, {x: 0, y: 1, width: 5, height: 5}); + assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }); elem.remove(); // TODO: test element with transform. Need resetOrientation above to be working or mock it. }); it('Test convertToPath rect', function () { - const {convertToPath} = utilities; + const { convertToPath } = utilities; const attrs = { fill: 'red', stroke: 'white', @@ -320,7 +320,7 @@ describe('utilities', function () { const elem = mockCreateSVGElement({ element: 'rect', - attr: {id: 'rect', x: '0', y: '1', width: '5', height: '10'} + attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }); svgroot.append(elem); const path = convertToPath(elem, attrs, mockaddSVGElementFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory); @@ -337,7 +337,7 @@ describe('utilities', function () { }); it('Test convertToPath unknown element', function () { - const {convertToPath} = utilities; + const { convertToPath } = utilities; const attrs = { fill: 'red', stroke: 'white', diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index e9e3eab1..b0a4e8cc 100644 --- a/cypress/plugins/index.js +++ b/cypress/plugins/index.js @@ -11,6 +11,6 @@ // *********************************************************** require('@babel/register')({ - plugins: ['@babel/plugin-transform-modules-commonjs'] + plugins: [ '@babel/plugin-transform-modules-commonjs' ] }); module.exports = require('./main.js').default; diff --git a/cypress/support/assert-almostEquals.js b/cypress/support/assert-almostEquals.js index 08451b50..b2b42c73 100644 --- a/cypress/support/assert-almostEquals.js +++ b/cypress/support/assert-almostEquals.js @@ -12,7 +12,7 @@ const NEAR_ZERO = 5e-6; // 0.000005, Firefox fails at higher levels of precision function almostEquals (actual, expected, message) { message = message || (actual + ' did not equal ' + expected); const result = Math.abs(actual - expected) < NEAR_ZERO; - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** diff --git a/cypress/support/assert-close.js b/cypress/support/assert-close.js index 7b79341b..62c5df7d 100644 --- a/cypress/support/assert-close.js +++ b/cypress/support/assert-close.js @@ -25,7 +25,7 @@ function close (actual, expected, maxDifference, message) { const actualDiff = (actual === expected) ? 0 : Math.abs(actual - expected), result = actualDiff <= maxDifference; message = message || (actual + ' should be within ' + maxDifference + ' (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff)); - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** @@ -55,7 +55,7 @@ function closePercent (actual, expected, maxPercentDifference, message) { } message = message || (actual + ' should be within ' + maxPercentDifference + '% (inclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%')); - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** @@ -74,7 +74,7 @@ function notClose (actual, expected, minDifference, message) { const actualDiff = Math.abs(actual - expected), result = actualDiff > minDifference; message = message || (actual + ' should not be within ' + minDifference + ' (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff)); - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** @@ -104,7 +104,7 @@ function notClosePercent (actual, expected, minPercentDifference, message) { } message = message || (actual + ' should not be within ' + minPercentDifference + '% (exclusive) of ' + expected + (result ? '' : '. Actual: ' + actualDiff + '%')); - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** diff --git a/cypress/support/assert-expectOutOfBoundsException.js b/cypress/support/assert-expectOutOfBoundsException.js index 9285ecfc..de884e1f 100644 --- a/cypress/support/assert-expectOutOfBoundsException.js +++ b/cypress/support/assert-expectOutOfBoundsException.js @@ -19,7 +19,7 @@ function expectOutOfBoundsException (obj, fn, arg1) { } } const actual = result; - return {result, message, actual, expected}; + return { result, message, actual, expected }; } /** diff --git a/cypress/support/assertion-wrapper.js b/cypress/support/assertion-wrapper.js index 18670779..65a02776 100644 --- a/cypress/support/assertion-wrapper.js +++ b/cypress/support/assertion-wrapper.js @@ -6,7 +6,7 @@ function setAssertionMethods (_chai, _utils) { return (method) => { return (...args) => { - const {result, message, actual, expected} = method(...args); + const { result, message, actual, expected } = method(...args); const assertion = new _chai.Assertion(); assertion.assert(result, `Expected ${actual} to be ${expected}`, message); }; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 0bbd68c7..2384dcbf 100644 --- a/cypress/support/commands.js +++ b/cypress/support/commands.js @@ -25,7 +25,7 @@ // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) // remove the style attributes that is causing differences in snapshots -const ngAttributes = ['style']; +const ngAttributes = [ 'style' ]; Cypress.Commands.add( 'cleanSnapshot', diff --git a/cypress/support/ui-test-helper.js b/cypress/support/ui-test-helper.js index f91b9b2e..80ca022f 100644 --- a/cypress/support/ui-test-helper.js +++ b/cypress/support/ui-test-helper.js @@ -9,7 +9,7 @@ export const visitAndApproveStorage = () => { }; export const openMainMenu = () => { - return cy.get('#main_button').click({force: true}); + return cy.get('#main_button').click({ force: true }); }; export const openEditorPreferences = () => { diff --git a/demos/canvas.html b/demos/canvas.html index 321b03c6..d7f14b0e 100644 --- a/demos/canvas.html +++ b/demos/canvas.html @@ -28,17 +28,17 @@ import SvgCanvas from '../src/svgcanvas/svgcanvas.js'; const container = document.querySelector('#editorContainer'); -const {width, height} = {width: 500, height: 300}; +const { width, height } = { width: 500, height: 300 }; window.width = width; window.height = height; const config = { - initFill: {color: 'FFFFFF', opacity: 1}, - initStroke: {color: '000000', opacity: 1, width: 1}, - text: {stroke_width: 0, font_size: 24, font_family: 'serif'}, + initFill: { color: 'FFFFFF', opacity: 1 }, + initStroke: { color: '000000', opacity: 1, width: 1 }, + text: { stroke_width: 0, font_size: 24, font_family: 'serif' }, initOpacity: 1, imgPath: 'editor/images/', - dimensions: [width, height], + dimensions: [ width, height ], baseUnit: 'px' }; diff --git a/docs/jsdoc-config.js b/docs/jsdoc-config.js index e833febe..5461f541 100644 --- a/docs/jsdoc-config.js +++ b/docs/jsdoc-config.js @@ -2,7 +2,7 @@ 'use strict'; module.exports = { - plugins: ['plugins/markdown'], + plugins: [ 'plugins/markdown' ], markdown: { // tags: ['examples'] /* diff --git a/docs/tutorials/ConfigOptions.md b/docs/tutorials/ConfigOptions.md index 61d64124..c57e367d 100644 --- a/docs/tutorials/ConfigOptions.md +++ b/docs/tutorials/ConfigOptions.md @@ -43,7 +43,7 @@ repository editor code ```js svgEditor.setConfig({ - dimensions: [320, 240], + dimensions: [ 320, 240 ], canvas_expansion: 5, initFill: { color: '0000FF' @@ -160,7 +160,7 @@ To add your own stylesheets along with the default stylesheets, ensure `"@default"` is present in the array along with your own. For example: ```js -svgEditor.setConfig({stylesheets: ['@default', 'myStylesheet.css']}); +svgEditor.setConfig({ stylesheets: [ '@default', 'myStylesheet.css' ] }); ``` (In version 2.8, the CSS file `editor/custom.css` was included by default, diff --git a/docs/tutorials/ExtensionDocs.md b/docs/tutorials/ExtensionDocs.md index 9bdd182a..b25bc987 100644 --- a/docs/tutorials/ExtensionDocs.md +++ b/docs/tutorials/ExtensionDocs.md @@ -79,7 +79,7 @@ export default { init () { return { svgicons: 'extensions/helloworld-icon.xml', - buttons: [{ /* ... */ }], + buttons: [ { /* ... */ } ], mouseDown () { // ... }, @@ -139,7 +139,7 @@ property should follow the format naming conflicts in the non-modular version of SVGEdit. ```js -import {importSetGlobalDefault} from '../external/dynamic-import-polyfill/importModule.js'; +import { importSetGlobalDefault } from '../external/dynamic-import-polyfill/importModule.js'; // ... diff --git a/docs/versions/3.0.0.md b/docs/versions/3.0.0.md index be5a7c8e..8c7f58c0 100644 --- a/docs/versions/3.0.0.md +++ b/docs/versions/3.0.0.md @@ -119,7 +119,7 @@ these files). The default behavior is equivalent to this: ```js svgEditor.setConfig({ - stylesheets: ['@default', '../svgedit-custom.css'] + stylesheets: [ '@default', '../svgedit-custom.css' ] }); ``` diff --git a/rollup.config.js b/rollup.config.js index 8bdbd355..29a65765 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -4,16 +4,16 @@ // 'npm run build' import path from 'path'; -import {lstatSync, readdirSync} from 'fs'; +import { lstatSync, readdirSync } from 'fs'; import rimraf from 'rimraf'; import babel from '@rollup/plugin-babel'; import copy from 'rollup-plugin-copy'; -import {nodeResolve} from '@rollup/plugin-node-resolve'; +import { nodeResolve } from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import nodePolyfills from 'rollup-plugin-node-polyfills'; import url from '@rollup/plugin-url'; // for XML/SVG files import dynamicImportVars from '@rollup/plugin-dynamic-import-vars'; -import {terser} from 'rollup-plugin-terser'; +import { terser } from 'rollup-plugin-terser'; // import progress from 'rollup-plugin-progress'; import filesize from 'rollup-plugin-filesize'; @@ -29,15 +29,15 @@ const getDirectories = (source) => { const extensionDirs = getDirectories('src/editor/extensions'); /** @todo should we support systemjs? */ -const dest = ['dist/editor' /* , 'dist/editor/system' */]; +const dest = [ 'dist/editor' ]; // remove existing distribution // eslint-disable-next-line no-console rimraf('./dist', () => console.info('recreating dist')); // config for svgedit core module -const config = [{ - input: ['src/editor/index.js'], +const config = [ { + input: [ 'src/editor/index.js' ], output: [ { format: 'es', @@ -95,13 +95,13 @@ const config = [{ dest: 'dist/editor/system' }, */ - {src: 'src/editor/images', dest}, - {src: 'src/editor/extensions/ext-shapes/shapelib', dest: dest.map((d) => `${d}/extensions/ext-shapes`)}, - {src: 'src/editor/embedapi.html', dest}, - {src: 'src/editor/embedapi.js', dest}, - {src: 'src/editor/browser-not-supported.html', dest}, - {src: 'src/editor/browser-not-supported.js', dest}, - {src: 'src/editor/svgedit.css', dest} + { src: 'src/editor/images', dest }, + { src: 'src/editor/extensions/ext-shapes/shapelib', dest: dest.map((d) => `${d}/extensions/ext-shapes`) }, + { src: 'src/editor/embedapi.html', dest }, + { src: 'src/editor/embedapi.js', dest }, + { src: 'src/editor/browser-not-supported.html', dest }, + { src: 'src/editor/browser-not-supported.js', dest }, + { src: 'src/editor/svgedit.css', dest } ] }), nodeResolve({ @@ -109,13 +109,13 @@ const config = [{ preferBuiltins: false }), commonjs(), - dynamicImportVars({include: `src/editor/locale.js`}), - babel({babelHelpers: 'bundled', exclude: [/\/core-js\//]}), // exclude core-js to avoid circular dependencies. + dynamicImportVars({ include: `src/editor/locale.js` }), + babel({ babelHelpers: 'bundled', exclude: [ /\/core-js\// ] }), // exclude core-js to avoid circular dependencies. nodePolyfills(), - terser({keep_fnames: true}), // keep_fnames is needed to avoid an error when calling extensions. + terser({ keep_fnames: true }), // keep_fnames is needed to avoid an error when calling extensions. filesize() ] -}]; +} ]; // config for dynamic extensions extensionDirs.forEach((extensionDir) => { @@ -141,7 +141,7 @@ extensionDirs.forEach((extensionDir) => { ], plugins: [ url({ - include: ['**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif', '**/*.xml'], + include: [ '**/*.svg', '**/*.png', '**/*.jpg', '**/*.gif', '**/*.xml' ], limit: 0, fileName: '[name][extname]' }), @@ -149,11 +149,11 @@ extensionDirs.forEach((extensionDir) => { browser: true, preferBuiltins: true }), - commonjs({exclude: `src/editor/extensions/${extensionName}/${extensionName}.js`}), - dynamicImportVars({include: `src/editor/extensions/${extensionName}/${extensionName}.js`}), - babel({babelHelpers: 'bundled', exclude: [/\/core-js\//]}), + commonjs({ exclude: `src/editor/extensions/${extensionName}/${extensionName}.js` }), + dynamicImportVars({ include: `src/editor/extensions/${extensionName}/${extensionName}.js` }), + babel({ babelHelpers: 'bundled', exclude: [ /\/core-js\// ] }), nodePolyfills(), - terser({keep_fnames: true}) + terser({ keep_fnames: true }) ] } ); diff --git a/src/common/browser.js b/src/common/browser.js index 4b39472e..e83f1cc0 100644 --- a/src/common/browser.js +++ b/src/common/browser.js @@ -8,7 +8,7 @@ import 'pathseg'; -import {NS} from './namespaces.js'; +import { NS } from './namespaces.js'; const supportsSVG_ = (function () { return Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg').createSVGRect); @@ -20,7 +20,7 @@ return Boolean(document.createElementNS && document.createElementNS(NS.SVG, 'svg */ export const supportsSvg = () => supportsSVG_; -const {userAgent} = navigator; +const { userAgent } = navigator; const svg = document.createElementNS(NS.SVG, 'svg'); // Note: Browser sniffing should only be used if no other detection method is possible diff --git a/src/common/namespaces.js b/src/common/namespaces.js index aa17b405..b85448dd 100644 --- a/src/common/namespaces.js +++ b/src/common/namespaces.js @@ -27,7 +27,7 @@ export const NS = { */ export const getReverseNS = function () { const reverseNS = {}; - Object.entries(NS).forEach(([name, URI]) => { + Object.entries(NS).forEach(([ name, URI ]) => { reverseNS[URI] = name.toLowerCase(); }); return reverseNS; diff --git a/src/common/units.js b/src/common/units.js index 128b3564..a80a4cb8 100644 --- a/src/common/units.js +++ b/src/common/units.js @@ -6,11 +6,11 @@ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller */ -import {NS} from './namespaces.js'; +import { NS } from './namespaces.js'; -const wAttrs = ['x', 'x1', 'cx', 'rx', 'width']; -const hAttrs = ['y', 'y1', 'cy', 'ry', 'height']; -const unitAttrs = ['r', 'radius', ...wAttrs, ...hAttrs]; +const wAttrs = [ 'x', 'x1', 'cx', 'rx', 'width' ]; +const hAttrs = [ 'y', 'y1', 'cy', 'ry', 'height' ]; +const unitAttrs = [ 'r', 'radius', ...wAttrs, ...hAttrs ]; // unused /* const unitNumMap = { @@ -202,14 +202,14 @@ export const setUnitAttr = function (elem, attr, val) { }; const attrsToConvert = { - line: ['x1', 'x2', 'y1', 'y2'], - circle: ['cx', 'cy', 'r'], - ellipse: ['cx', 'cy', 'rx', 'ry'], - foreignObject: ['x', 'y', 'width', 'height'], - rect: ['x', 'y', 'width', 'height'], - image: ['x', 'y', 'width', 'height'], - use: ['x', 'y', 'width', 'height'], - text: ['x', 'y'] + line: [ 'x1', 'x2', 'y1', 'y2' ], + circle: [ 'cx', 'cy', 'r' ], + ellipse: [ 'cx', 'cy', 'rx', 'ry' ], + foreignObject: [ 'x', 'y', 'width', 'height' ], + rect: [ 'x', 'y', 'width', 'height' ], + image: [ 'x', 'y', 'width', 'height' ], + use: [ 'x', 'y', 'width', 'height' ], + text: [ 'x', 'y' ] }; /** diff --git a/src/editor/ConfigObj.js b/src/editor/ConfigObj.js index 11d770e9..6a83d64d 100644 --- a/src/editor/ConfigObj.js +++ b/src/editor/ConfigObj.js @@ -1,6 +1,6 @@ // eslint-disable-next-line node/no-unpublished-import import deparam from 'deparam'; -import {mergeDeep} from './components/jgraduate/Util.js'; +import { mergeDeep } from './components/jgraduate/Util.js'; /** * Escapes special characters in a regular expression. @@ -126,7 +126,7 @@ export default class ConfigObj { imgPath: './images/', // DOCUMENT PROPERTIES // Change the following to a preference (already in the Document Properties dialog)? - dimensions: [640, 480], + dimensions: [ 640, 480 ], // EDITOR OPTIONS // Change the following to preferences (already in the Editor Options dialog)? gridSnapping: false, @@ -204,7 +204,7 @@ export default class ConfigObj { * @returns {void} */ setupCurPrefs () { - const curPrefs = {...this.defaultPrefs, ...this.curPrefs}; // Now safe to merge with priority for curPrefs in the event any are already set + const curPrefs = { ...this.defaultPrefs, ...this.curPrefs }; // Now safe to merge with priority for curPrefs in the event any are already set // Export updated prefs this.curPrefs = curPrefs; } @@ -213,11 +213,11 @@ export default class ConfigObj { * @returns {void} */ setupCurConfig () { - const curConfig = {...this.defaultConfig, ...this.curConfig}; // Now safe to merge with priority for curConfig in the event any are already set + const curConfig = { ...this.defaultConfig, ...this.curConfig }; // Now safe to merge with priority for curConfig in the event any are already set // Now deal with extensions and other array config if (!curConfig.noDefaultExtensions) { - curConfig.extensions = [...this.defaultExtensions]; + curConfig.extensions = [ ...this.defaultExtensions ]; } // Export updated config this.curConfig = curConfig; @@ -227,12 +227,12 @@ export default class ConfigObj { * @returns {void} */ loadFromURL () { - const {search, searchParams} = new URL(location); + const { search, searchParams } = new URL(location); if (search) { this.urldata = deparam(searchParams.toString()); - ['initStroke', 'initFill'].forEach((prop) => { + [ 'initStroke', 'initFill' ].forEach((prop) => { if (searchParams.has(`${prop}[color]`)) { // Restore back to original non-deparamed value to avoid color // strings being converted to numbers @@ -260,7 +260,7 @@ export default class ConfigObj { // security reasons, even for same-domain // ones given potential to interact in undesirable // ways with other script resources - ['userExtensions', 'imgPath'] + [ 'userExtensions', 'imgPath' ] .forEach(function (pathConfig) { if (this.urldata[pathConfig]) { delete this.urldata[pathConfig]; @@ -269,11 +269,11 @@ export default class ConfigObj { // Note: `source` and `url` (as with `storagePrompt` later) are not // set on config but are used below - this.setConfig(this.urldata, {overwrite: false}); + this.setConfig(this.urldata, { overwrite: false }); this.setupCurConfig(); if (!this.curConfig.preventURLContentLoading) { - let {source} = this.urldata; + let { source } = this.urldata; if (!source) { // urldata.source may have been null if it ended with '=' const src = searchParams.get('source'); if (src && src.startsWith('data:')) { @@ -396,7 +396,7 @@ export default class ConfigObj { cfgObj[key] = val; } }; - Object.entries(opts).forEach(([key, val]) => { + Object.entries(opts).forEach(([ key, val ]) => { // Only allow prefs defined in configObj.defaultPrefs or... if (this.defaultPrefs[key]) { if (cfgCfg.overwrite === false && ( @@ -410,11 +410,11 @@ export default class ConfigObj { } else { this.pref(key, val); } - } else if (['extensions', 'userExtensions', 'allowedOrigins'].includes(key)) { + } else if ([ 'extensions', 'userExtensions', 'allowedOrigins' ].includes(key)) { if (cfgCfg.overwrite === false && ( this.curConfig.preventAllURLConfig || - ['allowedOrigins'].includes(key) || + [ 'allowedOrigins' ].includes(key) || (key === 'extensions' && this.curConfig.lockExtensions) ) ) { diff --git a/src/editor/Editor.js b/src/editor/Editor.js index c09aa7b2..d8442f8b 100644 --- a/src/editor/Editor.js +++ b/src/editor/Editor.js @@ -52,7 +52,7 @@ class Editor extends EditorStartup { * @type {"ignore"|"waiting"|"closed"} */ this.storagePromptState = 'ignore'; - + this.svgCanvas = null; this.isReady = false; this.customExportImage = false; @@ -67,7 +67,7 @@ class Editor extends EditorStartup { this.configObj.preferences = false; this.canvMenu = null; // eslint-disable-next-line max-len - this.goodLangs = ['ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW']; + this.goodLangs = [ 'ar', 'cs', 'de', 'en', 'es', 'fa', 'fr', 'fy', 'hi', 'it', 'ja', 'nl', 'pl', 'pt-BR', 'ro', 'ru', 'sk', 'sl', 'zh-CN', 'zh-TW' ]; const modKey = (isMac() ? 'meta+' : 'ctrl+'); this.shortcuts = [ // Shortcuts not associated with buttons @@ -79,26 +79,26 @@ class Editor extends EditorStartup { { key: 'shift+p', fn: () => { this.svgCanvas.cycleElement(1); } }, { key: 'tab', fn: () => { this.svgCanvas.cycleElement(0); } }, { key: 'shift+tab', fn: () => { this.svgCanvas.cycleElement(1); } }, - { key: [modKey + 'arrowup', true], fn: () => { this.zoomImage(2); } }, - { key: [modKey + 'arrowdown', true], fn: () => { this.zoomImage(0.5); } }, - { key: [modKey + ']', true], fn: () => { this.moveUpDownSelected('Up'); } }, - { key: [modKey + '[', true], fn: () => { this.moveUpDownSelected('Down'); } }, - { key: ['arrowup', true], fn: () => { this.moveSelected(0, -1); } }, - { key: ['arrowdown', true], fn: () => { this.moveSelected(0, 1); } }, - { key: ['arrowleft', true], fn: () => { this.moveSelected(-1, 0); } }, - { key: ['arrowright', true], fn: () => { this.moveSelected(1, 0); } }, + { key: [ modKey + 'arrowup', true ], fn: () => { this.zoomImage(2); } }, + { key: [ modKey + 'arrowdown', true ], fn: () => { this.zoomImage(0.5); } }, + { key: [ modKey + ']', true ], fn: () => { this.moveUpDownSelected('Up'); } }, + { key: [ modKey + '[', true ], fn: () => { this.moveUpDownSelected('Down'); } }, + { key: [ 'arrowup', true ], fn: () => { this.moveSelected(0, -1); } }, + { key: [ 'arrowdown', true ], fn: () => { this.moveSelected(0, 1); } }, + { key: [ 'arrowleft', true ], fn: () => { this.moveSelected(-1, 0); } }, + { key: [ 'arrowright', true ], fn: () => { this.moveSelected(1, 0); } }, { key: 'shift+arrowup', fn: () => { this.moveSelected(0, -10); } }, { key: 'shift+arrowdown', fn: () => { this.moveSelected(0, 10); } }, { key: 'shift+arrowleft', fn: () => { this.moveSelected(-10, 0); } }, { key: 'shift+arrowright', fn: () => { this.moveSelected(10, 0); } }, - { key: ['alt+arrowup', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, -1); } }, - { key: ['alt+arrowdown', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, 1); } }, - { key: ['alt+arrowleft', true], fn: () => { this.svgCanvas.cloneSelectedElements(-1, 0); } }, - { key: ['alt+arrowright', true], fn: () => { this.svgCanvas.cloneSelectedElements(1, 0); } }, - { key: ['alt+shift+arrowup', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, -10); } }, - { key: ['alt+shift+arrowdown', true], fn: () => { this.svgCanvas.cloneSelectedElements(0, 10); } }, - { key: ['alt+shift+arrowleft', true], fn: () => { this.svgCanvas.cloneSelectedElements(-10, 0); } }, - { key: ['alt+shift+arrowright', true], fn: () => { this.svgCanvas.cloneSelectedElements(10, 0); } }, + { key: [ 'alt+arrowup', true ], fn: () => { this.svgCanvas.cloneSelectedElements(0, -1); } }, + { key: [ 'alt+arrowdown', true ], fn: () => { this.svgCanvas.cloneSelectedElements(0, 1); } }, + { key: [ 'alt+arrowleft', true ], fn: () => { this.svgCanvas.cloneSelectedElements(-1, 0); } }, + { key: [ 'alt+arrowright', true ], fn: () => { this.svgCanvas.cloneSelectedElements(1, 0); } }, + { key: [ 'alt+shift+arrowup', true ], fn: () => { this.svgCanvas.cloneSelectedElements(0, -10); } }, + { key: [ 'alt+shift+arrowdown', true ], fn: () => { this.svgCanvas.cloneSelectedElements(0, 10); } }, + { key: [ 'alt+shift+arrowleft', true ], fn: () => { this.svgCanvas.cloneSelectedElements(-10, 0); } }, + { key: [ 'alt+shift+arrowright', true ], fn: () => { this.svgCanvas.cloneSelectedElements(10, 0); } }, { key: 'a', fn: () => { this.svgCanvas.selectAllInCurrentLayer(); } }, { key: modKey + 'a', fn: () => { this.svgCanvas.selectAllInCurrentLayer(); } }, { key: modKey + 'x', fn: () => { this.cutSelected(); } }, @@ -294,7 +294,7 @@ class Editor extends EditorStartup { '4/Shift+4': 'tools_rect', '5/Shift+5': 'tools_ellipse' }; - Object.entries(keyAssocs).forEach(([keyval, sel]) => { + Object.entries(keyAssocs).forEach(([ keyval, sel ]) => { const parentsElements = this.getParents($id(sel), $id('main_menu')); const menu = (parentsElements.length); @@ -384,7 +384,7 @@ class Editor extends EditorStartup { this.exportWindow.location.href = data.bloburl || data.datauri; const done = this.configObj.pref('export_notice_done'); if (done !== 'all') { - let note = this.i18next.t('notification.saveFromBrowser', { type: data.type}); + let note = this.i18next.t('notification.saveFromBrowser', { type: data.type }); // Check if there are issues if (issues.length) { @@ -1083,7 +1083,7 @@ class Editor extends EditorStartup { resolve(cb()); return; } - this.callbacks.push([cb, resolve, reject]); + this.callbacks.push([ cb, resolve, reject ]); }); } @@ -1094,16 +1094,16 @@ class Editor extends EditorStartup { */ async runCallbacks() { try { - await Promise.all(this.callbacks.map(([cb]) => { + await Promise.all(this.callbacks.map(([ cb ]) => { return cb(); })); } catch (err) { - this.callbacks.forEach(([, , reject]) => { + this.callbacks.forEach(([ , , reject ]) => { reject(); }); throw err; } - this.callbacks.forEach(([, resolve]) => { + this.callbacks.forEach(([ , resolve ]) => { resolve(); }); this.isReady = true; diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js index c7c3b453..367e3ec9 100644 --- a/src/editor/EditorStartup.js +++ b/src/editor/EditorStartup.js @@ -1,6 +1,6 @@ /* globals $ seConfirm seAlert */ import './touch.js'; -import {convertUnit} from '../common/units.js'; +import { convertUnit } from '../common/units.js'; import { putLocale } from './locale.js'; @@ -41,7 +41,7 @@ const readySignal = () => { } }; -const {$id} = SvgCanvas; +const { $id } = SvgCanvas; /** * @@ -118,7 +118,7 @@ class EditorStartup { this.layersPanel.init(); this.mainMenu.init(); - const {undoMgr} = this.svgCanvas; + const { undoMgr } = this.svgCanvas; this.workarea = document.getElementById('workarea'); this.canvMenu = document.getElementById('se-cmenu_canvas'); this.exportWindow = null; @@ -160,7 +160,7 @@ class EditorStartup { if (!data.output) { // Ignore Chrome return; } - const {exportWindowName} = data; + const { exportWindowName } = data; if (exportWindowName) { this.exportWindow = window.open('', this.exportWindowName); // A hack to get the window via JSON-able name without opening a new one } @@ -182,7 +182,7 @@ class EditorStartup { * @listens module:svgcanvas.SvgCanvas#event:updateCanvas * @returns {void} */ - function (win, {center, newCtr}) { + function (win, { center, newCtr }) { this.updateCanvas(center, newCtr); }.bind(this) ); @@ -279,7 +279,7 @@ class EditorStartup { let lastX = null, lastY = null, panning = false, keypan = false; - $id('svgcanvas').addEventListener('mouseup', function(evt) { + $id('svgcanvas').addEventListener('mouseup', function(evt) { if (panning === false) { return true; } wArea.scrollLeft -= (evt.clientX - lastX); @@ -290,9 +290,9 @@ class EditorStartup { if (evt.type === 'mouseup') { panning = false; } return false; - }); + }); // eslint-disable-next-line sonarjs/no-identical-functions - $id('svgcanvas').addEventListener('mousemove', function(evt) { + $id('svgcanvas').addEventListener('mousemove', function(evt) { if (panning === false) { return true; } wArea.scrollLeft -= (evt.clientX - lastX); @@ -322,10 +322,10 @@ class EditorStartup { if (e.target.nodeName !== 'BODY') return; if(e.code.toLowerCase() === 'space'){ this.svgCanvas.spaceKey = keypan = true; - e.preventDefault(); + e.preventDefault(); } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){ this.workarea.style.cursor = zoomOutIcon; - e.preventDefault(); + e.preventDefault(); } else { return; } @@ -335,10 +335,10 @@ class EditorStartup { if (e.target.nodeName !== 'BODY') return; if(e.code.toLowerCase() === 'space'){ this.svgCanvas.spaceKey = keypan = false; - e.preventDefault(); + e.preventDefault(); } else if((e.key.toLowerCase() === 'shift') && (this.svgCanvas.getMode() === 'zoom')){ this.workarea.style.cursor = zoomInIcon; - e.preventDefault(); + e.preventDefault(); } else { return; } @@ -367,7 +367,7 @@ class EditorStartup { el.addEventListener("focus", (e) => { inp = e.currentTarget; this.uiContext = 'toolbars'; - this.workarea.addEventListener('mousedown', unfocus); + this.workarea.addEventListener('mousedown', unfocus); }); el.addEventListener("blur", () => { this.uiContext = 'canvas'; @@ -399,12 +399,12 @@ class EditorStartup { ); } const winWh = { - width: getWidth(), + width: getWidth(), height: getHeight() }; window.addEventListener('resize', () => { - Object.entries(winWh).forEach(([type, val]) => { + Object.entries(winWh).forEach(([ type, val ]) => { const curval = (type === 'width') ? window.innerWidth - 15 : window.innerHeight; this.workarea['scroll' + (type === 'width' ? 'Left' : 'Top')] -= (curval - val) / 2; winWh[type] = curval; @@ -619,14 +619,14 @@ class EditorStartup { editorObj.svgCanvas.alignSelectedElements('m', 'page'); editorObj.svgCanvas.alignSelectedElements('c', 'page'); // highlight imported element, otherwise we get strange empty selectbox - editorObj.svgCanvas.selectOnly([newElement]); + editorObj.svgCanvas.selectOnly([ newElement ]); document.getElementById('se-prompt-dialog').setAttribute('close', true); }; reader.readAsText(file); } else { // bitmap handling reader = new FileReader(); - reader.onloadend = function ({target: {result}}) { + reader.onloadend = function ({ target: { result } }) { /** * Insert the new image until we know its dimensions. * @param {Float} imageWidth @@ -646,7 +646,7 @@ class EditorStartup { } }); editorObj.svgCanvas.setHref(newImage, result); - editorObj.svgCanvas.selectOnly([newImage]); + editorObj.svgCanvas.selectOnly([ newImage ]); editorObj.svgCanvas.alignSelectedElements('m', 'page'); editorObj.svgCanvas.alignSelectedElements('c', 'page'); editorObj.topPanelHandlers.updateContextPanel(); @@ -715,8 +715,8 @@ class EditorStartup { */ // eslint-disable-next-line no-unsanitized/method const imported = await import(`./extensions/${encodeURIComponent(extname)}/${encodeURIComponent(extname)}.js`); - const {name = extname, init: initfn} = imported.default; - return this.addExtension(name, (initfn && initfn.bind(this)), {$, langParam: 'en'}); /** @todo change to current lng */ + const { name = extname, init: initfn } = imported.default; + return this.addExtension(name, (initfn && initfn.bind(this)), { $, langParam: 'en' }); /** @todo change to current lng */ } catch (err) { // Todo: Add config to alert any errors console.error('Extension failed to load: ' + extname + '; ', err); @@ -739,8 +739,8 @@ class EditorStartup { */ // eslint-disable-next-line no-unsanitized/method const imported = await import(encodeURI(extPathName)); - const {name, init: initfn} = imported.default; - return this.addExtension(name, (initfn && initfn.bind(this)), {$}); + const { name, init: initfn } = imported.default; + return this.addExtension(name, (initfn && initfn.bind(this)), { $ }); } catch (err) { // Todo: Add config to alert any errors console.error('Extension failed to load: ' + extPathName + '; ', err); @@ -790,9 +790,9 @@ class EditorStartup { * @fires module:svgcanvas.SvgCanvas#event:message * @returns {void} */ - messageListener ({data, origin}) { + messageListener ({ data, origin }) { // console.log('data, origin, extensionsAdded', data, origin, extensionsAdded); - const messageObj = {data, origin}; + const messageObj = { data, origin }; if (!this.extensionsAdded) { this.messageQueue.push(messageObj); } else { diff --git a/src/editor/MainMenu.js b/src/editor/MainMenu.js index bb80ecf9..b07b0425 100644 --- a/src/editor/MainMenu.js +++ b/src/editor/MainMenu.js @@ -1,7 +1,7 @@ /* globals seConfirm, seAlert */ import SvgCanvas from "../svgcanvas/svgcanvas.js"; -import {convertUnit, isValidUnit} from '../common/units.js'; -import {isChrome} from '../common/browser.js'; +import { convertUnit, isValidUnit } from '../common/units.js'; +import { isChrome } from '../common/browser.js'; const { $id } = SvgCanvas; const homePage = 'https://github.com/SVG-Edit/svgedit'; @@ -26,7 +26,7 @@ class MainMenu { * @returns {void} */ async clickClear() { - const [x, y] = this.editor.configObj.curConfig.dimensions; + const [ x, y ] = this.editor.configObj.curConfig.dimensions; const ok = await seConfirm(this.editor.i18next.t('notification.QwantToClear')); if (ok === "Cancel") { return; @@ -183,7 +183,7 @@ class MainMenu {

${loadingImage}

`; if (typeof URL !== "undefined" && URL.createObjectURL) { - const blob = new Blob([popHTML], { type: "text/html" }); + const blob = new Blob([ popHTML ], { type: "text/html" }); popURL = URL.createObjectURL(blob); } else { popURL = "data:text/html;base64;charset=utf-8," + popHTML; @@ -305,7 +305,7 @@ class MainMenu { init() { // add Top panel const template = document.createElement("template"); - const {i18next} = this.editor; + const { i18next } = this.editor; // eslint-disable-next-line no-unsanitized/property template.innerHTML = ` diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js index 4a4dbed3..4888b541 100644 --- a/src/editor/Rulers.js +++ b/src/editor/Rulers.js @@ -1,4 +1,4 @@ -import {getTypeMap} from '../common/units.js'; +import { getTypeMap } from '../common/units.js'; import rulersTemplate from './templates/rulersTemplate.js'; /** * @@ -52,7 +52,7 @@ class Rulers { const dim = isX ? 'x' : 'y'; const lentype = isX ? 'width' : 'height'; const contentDim = Number(contentElem.getAttribute(dim)); - const {$id} = this.svgCanvas; + const { $id } = this.svgCanvas; const $hcanvOrig = $id('ruler_' + dim).querySelector('canvas'); // Bit of a hack to fully clear the canvas in Safari & IE9 diff --git a/src/editor/components/PaintBox.js b/src/editor/components/PaintBox.js index 7840f102..6335cafe 100644 --- a/src/editor/components/PaintBox.js +++ b/src/editor/components/PaintBox.js @@ -1,4 +1,4 @@ -import {jGraduate} from './jgraduate/jQuery.jGraduate.js'; +import { jGraduate } from './jgraduate/jQuery.jGraduate.js'; /** * */ @@ -67,7 +67,7 @@ class PaintBox { */ static getPaint (svgCanvas, color, opac, type) { // update the editor's fill paint - const opts = {alpha: opac}; + const opts = { alpha: opac }; if (color.startsWith('url(#')) { let refElem = svgCanvas.getRefElem(color); refElem = (refElem) ? refElem.cloneNode(true) : document.querySelectorAll('#' + type + '_color defs *')[0]; @@ -88,7 +88,7 @@ class PaintBox { update (svgcanvas, selectedElement) { if (!selectedElement) { return null; } - const {type} = this; + const { type } = this; switch (selectedElement.tagName) { case 'use': case 'image': diff --git a/src/editor/components/jgraduate/ColorValuePicker.js b/src/editor/components/jgraduate/ColorValuePicker.js index fff29566..09fae4b2 100644 --- a/src/editor/components/jgraduate/ColorValuePicker.js +++ b/src/editor/components/jgraduate/ColorValuePicker.js @@ -232,7 +232,7 @@ export default class ColorValuePicker { break; case ahex: color.value = 'ahex'; - ahex.value = color.value.substring(6); + ahex.value = color.value.substring(6); break; } } @@ -349,7 +349,7 @@ export default class ColorValuePicker { value = inputs[2], hex = inputs[(inputs.length > 7) ? 7 : 6], ahex = inputs.length > 7 ? inputs[8] : null; - Object.assign(that, {destroy}); + Object.assign(that, { destroy }); red.addEventListener('keyup', keyUp); green.addEventListener('keyup', keyUp); blue.addEventListener('keyup', keyUp); diff --git a/src/editor/components/jgraduate/Slider.js b/src/editor/components/jgraduate/Slider.js index 34bcf172..75100531 100644 --- a/src/editor/components/jgraduate/Slider.js +++ b/src/editor/components/jgraduate/Slider.js @@ -1,5 +1,5 @@ /* eslint-disable no-bitwise */ -import {findPos} from './Util.js'; +import { findPos } from './Util.js'; /** * Whether a value is `null` or `undefined`. * @param {any} val @@ -38,7 +38,7 @@ export default class Slider { */ function mouseDown (e) { const off = findPos(bar); - offset = {l: off.left | 0, t: off.top | 0}; + offset = { l: off.left | 0, t: off.top | 0 }; clearTimeout(timeout); // using setTimeout for visual updates - once the style is updated the browser will re-render internally allowing the next Javascript to run timeout = setTimeout(function () { @@ -146,7 +146,7 @@ export default class Slider { case 'x': return x; case 'y': return y; case 'xy': - default: return {x, y}; + default: return { x, y }; } } if (!isNullish(context) && context === that) return undefined; @@ -216,12 +216,12 @@ export default class Slider { switch (name.toLowerCase()) { case 'minx': return minX; case 'maxx': return maxX; - case 'rangex': return {minX, maxX, rangeX}; + case 'rangex': return { minX, maxX, rangeX }; case 'miny': return minY; case 'maxy': return maxY; - case 'rangey': return {minY, maxY, rangeY}; + case 'rangey': return { minY, maxY, rangeY }; case 'all': - default: return {minX, maxX, rangeX, minY, maxY, rangeY}; + default: return { minX, maxX, rangeX, minY, maxY, rangeY }; } } let // changed = false, diff --git a/src/editor/components/jgraduate/jQuery.jGraduate.js b/src/editor/components/jgraduate/jQuery.jGraduate.js index bcc8340f..2a2362fe 100644 --- a/src/editor/components/jgraduate/jQuery.jGraduate.js +++ b/src/editor/components/jgraduate/jQuery.jGraduate.js @@ -20,8 +20,8 @@ * @example $.jGraduate.Paint({hex: '#rrggbb', linearGradient: o}); // throws an exception? */ import Paint from './paint.js'; -import {jPickerDefaults, jPickerMethod} from './jQuery.jPicker.js'; -import {findPos} from './Util.js'; +import { jPickerDefaults, jPickerMethod } from './jQuery.jPicker.js'; +import { findPos } from './Util.js'; /** * @todo JFH: This jQuery plugin was adapted to work within a Web Component. @@ -126,11 +126,11 @@ const isGecko = navigator.userAgent.includes('Gecko/'); */ function setAttrs (elem, attrs) { if (isGecko) { - Object.entries(attrs).forEach(([aname, val]) => { + Object.entries(attrs).forEach(([ aname, val ]) => { elem.setAttribute(aname, val); }); } else { - Object.entries(attrs).forEach(([aname, val]) => { + Object.entries(attrs).forEach(([ aname, val ]) => { const prop = elem[aname]; if (prop && prop.constructor === 'SVGLength') { prop.baseVal.value = val; @@ -221,7 +221,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { }; Object.assign($this, { // make a copy of the incoming paint - paint: new jGraduate.Paint({copy: $settings.paint}), + paint: new jGraduate.Paint({ copy: $settings.paint }), okCallback: typeof okCallback === 'function' ? okCallback : null, cancelCallback: typeof cancelCallback === 'function' ? cancelCallback : null }); @@ -231,7 +231,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { const $win = window; if ($this.paint.type === 'none') { - $this.paint = new jGraduate.Paint({solidColor: 'ffffff'}); + $this.paint = new jGraduate.Paint({ solidColor: 'ffffff' }); } $this.classList.add('jGraduate_Picker'); /* eslint-disable max-len */ @@ -531,7 +531,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { $elem.style.top = e.target.value * MAX; } }; - for (const [, attr] of ['x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy'].entries()) { + for (const [ , attr ] of [ 'x1', 'y1', 'x2', 'y2', 'cx', 'cy', 'fx', 'fy' ].entries()) { const isRadial = isNaN(attr[1]); let attrval = curGradient.getAttribute(attr); @@ -620,9 +620,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { jqPickerElem.style.left = '100px'; jqPickerElem.style.bottom = '15px'; jPickerMethod(jqPickerElem, { - window: {title: 'Pick the start color and opacity for the gradient'}, - images: {clientPath: $settings.images.clientPath}, - color: {active: colr, alphaSupport: true} + window: { title: 'Pick the start color and opacity for the gradient' }, + images: { clientPath: $settings.images.clientPath }, + color: { active: colr, alphaSupport: true } }, function (clr) { stopColor = clr.val('hex') ? ('#' + clr.val('hex')) : 'none'; stopOpacity = clr.val('a') !== null ? clr.val('a') / 256 : 1; @@ -752,9 +752,9 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { } drag.setAttribute('transform', xfStr); - const jqpgpath = $this.querySelector('#'+drag.dataset.bg); + const jqpgpath = $this.querySelector('#'+drag.dataset.bg); jqpgpath.setAttribute('transform', xfStr); - const stop = $this.querySelector('#'+drag.dataset.stop); + const stop = $this.querySelector('#'+drag.dataset.stop); const sX = (x - 10) / MAX; stop.setAttribute('offset', sX); @@ -795,7 +795,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { stopMakerSVG.addEventListener('click', function (evt) { stopOffset = findPos(stopMakerDiv); - const {target} = evt; + const { target } = evt; if (target.tagName === 'path') return; let x = evt.pageX - stopOffset.left - 8; x = x < 10 ? 10 : x > MAX + 10 ? MAX + 10 : x; @@ -983,7 +983,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { let slider; const setSlider = function (e) { - const {offset: {left}} = slider; + const { offset: { left } } = slider; const divi = slider.parent; let x = (e.pageX - left - Number.parseInt(getComputedStyle(divi, null).getPropertyValue('border-left-width'))); if (x > SLIDERW) x = SLIDERW; @@ -1088,7 +1088,7 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { val: angleVal } }; - for (const [, [type, data]] of Object.entries(Object.entries(sliders))) { + for (const [ , [ type, data ] ] of Object.entries(Object.entries(sliders))) { const handle = $this.querySelector(data.handle); const sInput = $this.querySelector(data.input); handle.addEventListener('mousedown', function (evt) { @@ -1177,15 +1177,15 @@ export function jGraduateMethod (elem, options, okCallback, cancelCallback) { } // This should be done somewhere else, probably Object.assign(jPickerDefaults.window, { - alphaSupport: true, effects: {type: 'show', speed: 0} + alphaSupport: true, effects: { type: 'show', speed: 0 } }); jPickerMethod( colPicker, { - window: {title: $settings.window.pickerTitle}, - images: {clientPath: $settings.images.clientPath}, - color: {active: color, alphaSupport: true} + window: { title: $settings.window.pickerTitle }, + images: { clientPath: $settings.images.clientPath }, + color: { active: color, alphaSupport: true } }, function (clr) { $this.paint.type = 'solidColor'; diff --git a/src/editor/components/jgraduate/jQuery.jPicker.js b/src/editor/components/jgraduate/jQuery.jPicker.js index 41da0de5..6b9f2fb2 100755 --- a/src/editor/components/jgraduate/jQuery.jPicker.js +++ b/src/editor/components/jgraduate/jQuery.jPicker.js @@ -19,7 +19,7 @@ /* eslint-disable max-len */ import ColorValuePicker from './ColorValuePicker.js'; import Slider from './Slider.js'; -import {findPos,mergeDeep} from './Util.js'; +import { findPos, mergeDeep } from './Util.js'; /** * @external Math @@ -121,7 +121,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (isNullish(name) || name === '') name = 'all'; if (isNullish(r)) return null; switch (name.toLowerCase()) { - case 'ahex': return ColorMethods.rgbaToHex({r, g, b, a}); + case 'ahex': return ColorMethods.rgbaToHex({ r, g, b, a }); case 'hex': return val('ahex').substring(0, 6); case 'all': return { r, g, b, a, h, s, v, @@ -131,7 +131,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { default: { ret = {}; const nameLength = name.length; - [...name].forEach((ch) => { + [ ...name ].forEach((ch) => { switch (ch) { case 'r': if (nameLength === 1) ret = r; @@ -234,7 +234,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (value.h !== undefined && !name.includes('h')) name += 'h'; if (value.s !== undefined && !name.includes('s')) name += 's'; if (value.v !== undefined && !name.includes('v')) name += 'v'; - [...name].forEach((ch) => { + [ ...name ].forEach((ch) => { switch (ch) { case 'r': if (hsv) return; @@ -243,7 +243,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.r < 0) newV.r = 0; else if (newV.r > 255) newV.r = 255; if (r !== newV.r) { - ({r} = newV); + ({ r } = newV); changed = true; } break; @@ -254,7 +254,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.g < 0) newV.g = 0; else if (newV.g > 255) newV.g = 255; if (g !== newV.g) { - ({g} = newV); + ({ g } = newV); changed = true; } break; @@ -265,7 +265,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.b < 0) newV.b = 0; else if (newV.b > 255) newV.b = 255; if (b !== newV.b) { - ({b} = newV); + ({ b } = newV); changed = true; } break; @@ -274,7 +274,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.a < 0) newV.a = 0; else if (newV.a > 255) newV.a = 255; if (a !== newV.a) { - ({a} = newV); + ({ a } = newV); changed = true; } break; @@ -285,7 +285,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.h < 0) newV.h = 0; else if (newV.h > 360) newV.h = 360; if (h !== newV.h) { - ({h} = newV); + ({ h } = newV); changed = true; } break; @@ -296,7 +296,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.s < 0) newV.s = 0; else if (newV.s > 100) newV.s = 100; if (s !== newV.s) { - ({s} = newV); + ({ s } = newV); changed = true; } break; @@ -307,7 +307,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { if (newV.v < 0) newV.v = 0; else if (newV.v > 100) newV.v = 100; if (v !== newV.v) { - ({v} = newV); + ({ v } = newV); changed = true; } break; @@ -318,14 +318,14 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { r = r || 0; g = g || 0; b = b || 0; - const ret = ColorMethods.rgbToHsv({r, g, b}); - ({h, s, v} = ret); + const ret = ColorMethods.rgbToHsv({ r, g, b }); + ({ h, s, v } = ret); } else if (hsv) { h = h || 0; s = !isNullish(s) ? s : 100; v = !isNullish(v) ? v : 100; - const ret = ColorMethods.hsvToRgb({h, s, v}); - ({r, g, b} = ret); + const ret = ColorMethods.hsvToRgb({ h, s, v }); + ({ r, g, b } = ret); } a = !isNullish(a) ? a : 255; fireChangeEvents.call(that, context || that); @@ -375,7 +375,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { val( (!isNullish(init.a) ? 'a' : '') + 'hex', !isNullish(init.a) - ? {ahex: init.hex + ColorMethods.intToHex(init.a)} + ? { ahex: init.hex + ColorMethods.intToHex(init.a) } : init ); } else if (!isNullish(init.r) && !isNullish(init.g) && !isNullish(init.b)) { @@ -408,7 +408,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { * @returns {module:jPicker.RGBA} */ hexToRgba (hex) { - if (hex === '' || hex === 'none') return {r: null, g: null, b: null, a: null}; + if (hex === '' || hex === 'none') return { r: null, g: null, b: null, a: null }; hex = this.validateHex(hex); let r = '00', g = '00', b = '00', a = '255'; if (hex.length === 6) hex += 'ff'; @@ -476,7 +476,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { * @returns {module:jPicker.HSV} */ rgbToHsv (rgb) { - const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = {h: 0, s: 0, v: 0}; + const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255, hsv = { h: 0, s: 0, v: 0 }; let min = 0, max = 0; if (r >= g && r >= b) { max = r; @@ -509,8 +509,8 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { * @returns {module:jPicker.RGB} */ hsvToRgb (hsv) { - const rgb = {r: 0, g: 0, b: 0, a: 100}; - let {h, s, v} = hsv; + const rgb = { r: 0, g: 0, b: 0, a: 100 }; + let { h, s, v } = hsv; if (s === 0) { if (v === 0) rgb.r = rgb.g = rgb.b = 0; else rgb.r = rgb.g = rgb.b = (v * 255 / 100) | 0; @@ -564,7 +564,7 @@ export const jPicker = /** @lends external:jQuery.jPicker */ { } } }; -const {Color, List, ColorMethods} = jPicker; // local copies for YUI compressor +const { Color, List, ColorMethods } = jPicker; // local copies for YUI compressor /** * @function external:jQuery.fn.jPicker * @see {@link external:jQuery.fn.$.fn.jPicker} @@ -617,11 +617,11 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc } }); if (that.value === '') { - settings.color.active = new Color({hex: null}); - settings.color.current = new Color({hex: null}); + settings.color.active = new Color({ hex: null }); + settings.color.current = new Color({ hex: null }); } else if (ColorMethods.validateHex(that.value)) { - settings.color.active = new Color({hex: that.value, a: settings.color.active.val('a')}); - settings.color.current = new Color({hex: that.value, a: settings.color.active.val('a')}); + settings.color.active = new Color({ hex: that.value, a: settings.color.active.val('a') }); + settings.color.current = new Color({ hex: that.value, a: settings.color.active.val('a') }); } } if (settings.window.expandable) { @@ -646,7 +646,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc * @returns {void} */ function setColorMode (colorMode) { - const {active} = color, // local copies for YUI compressor + const { active } = color, // local copies for YUI compressor // {clientPath} = images, hex = active.val('hex'); let rgbMap, rgbBar; @@ -671,10 +671,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc setImgLoc.call(that, colorBarL6, 260); setAlpha.call(that, colorBarL6, 100); }, 0); - colorMap.range('all', {minX: 0, maxX: 100, minY: 0, maxY: 100}); - colorBar.range('rangeY', {minY: 0, maxY: 360}); + colorMap.range('all', { minX: 0, maxX: 100, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 360 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('s'), y: 100 - active.val('v')}, colorMap); + colorMap.val('xy', { x: active.val('s'), y: 100 - active.val('v') }, colorMap); colorBar.val('y', 360 - active.val('h'), colorBar); break; case 's': @@ -687,10 +687,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc setImgLoc.call(that, colorBarL6, 260); setAlpha.call(that, colorBarL6, 100); }, 0); - colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100}); - colorBar.range('rangeY', {minY: 0, maxY: 100}); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 100 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap); + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); colorBar.val('y', 100 - active.val('s'), colorBar); break; case 'v': @@ -705,37 +705,37 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc setImgLoc.call(that, colorBarL6, 260); setAlpha.call(that, colorBarL6, 100); }, 0); - colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100}); - colorBar.range('rangeY', {minY: 0, maxY: 100}); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 100 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('s')}, colorMap); + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('s') }, colorMap); colorBar.val('y', 100 - active.val('v'), colorBar); break; case 'r': rgbMap = -1040; rgbBar = -780; - colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255}); - colorBar.range('rangeY', {minY: 0, maxY: 255}); + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('g')}, colorMap); + colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('g') }, colorMap); colorBar.val('y', 255 - active.val('r'), colorBar); break; case 'g': rgbMap = -1560; rgbBar = -1820; - colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255}); - colorBar.range('rangeY', {minY: 0, maxY: 255}); + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('b'), y: 255 - active.val('r')}, colorMap); + colorMap.val('xy', { x: active.val('b'), y: 255 - active.val('r') }, colorMap); colorBar.val('y', 255 - active.val('g'), colorBar); break; case 'b': rgbMap = -2080; rgbBar = -2860; - colorMap.range('all', {minX: 0, maxX: 255, minY: 0, maxY: 255}); - colorBar.range('rangeY', {minY: 0, maxY: 255}); + colorMap.range('all', { minX: 0, maxX: 255, minY: 0, maxY: 255 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('r'), y: 255 - active.val('g')}, colorMap); + colorMap.val('xy', { x: active.val('r'), y: 255 - active.val('g') }, colorMap); colorBar.val('y', 255 - active.val('b'), colorBar); break; case 'a': @@ -749,10 +749,10 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc setImgLoc.call(that, colorBarL6, 0); setAlpha.call(that, colorBarL6, 100); }, 0); - colorMap.range('all', {minX: 0, maxX: 360, minY: 0, maxY: 100}); - colorBar.range('rangeY', {minY: 0, maxY: 255}); + colorMap.range('all', { minX: 0, maxX: 360, minY: 0, maxY: 100 }); + colorBar.range('rangeY', { minY: 0, maxY: 255 }); if (isNullish(active.val('ahex'))) break; - colorMap.val('xy', {x: active.val('h'), y: 100 - active.val('v')}, colorMap); + colorMap.val('xy', { x: active.val('h'), y: 100 - active.val('v') }, colorMap); colorBar.val('y', 255 - active.val('a'), colorBar); break; default: @@ -817,28 +817,28 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc * @returns {void} */ function mapValueChanged (ui, context) { - const {active} = color; + const { active } = color; if (context !== colorMap && isNullish(active.val())) return; const xy = ui.val('all'); switch (settings.color.mode) { case 'h': - active.val('sv', {s: xy.x, v: 100 - xy.y}, context); + active.val('sv', { s: xy.x, v: 100 - xy.y }, context); break; case 's': case 'a': - active.val('hv', {h: xy.x, v: 100 - xy.y}, context); + active.val('hv', { h: xy.x, v: 100 - xy.y }, context); break; case 'v': - active.val('hs', {h: xy.x, s: 100 - xy.y}, context); + active.val('hs', { h: xy.x, s: 100 - xy.y }, context); break; case 'r': - active.val('gb', {g: 255 - xy.y, b: xy.x}, context); + active.val('gb', { g: 255 - xy.y, b: xy.x }, context); break; case 'g': - active.val('rb', {r: 255 - xy.y, b: xy.x}, context); + active.val('rb', { r: 255 - xy.y, b: xy.x }, context); break; case 'b': - active.val('rg', {r: xy.x, g: 255 - xy.y}, context); + active.val('rg', { r: xy.x, g: 255 - xy.y }, context); break; } } @@ -850,26 +850,26 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc * @returns {void} */ function colorBarValueChanged (ui, context) { - const {active} = color; + const { active } = color; if (context !== colorBar && isNullish(active.val())) return; switch (settings.color.mode) { case 'h': - active.val('h', {h: 360 - ui.val('y')}, context); + active.val('h', { h: 360 - ui.val('y') }, context); break; case 's': - active.val('s', {s: 100 - ui.val('y')}, context); + active.val('s', { s: 100 - ui.val('y') }, context); break; case 'v': - active.val('v', {v: 100 - ui.val('y')}, context); + active.val('v', { v: 100 - ui.val('y') }, context); break; case 'r': - active.val('r', {r: 255 - ui.val('y')}, context); + active.val('r', { r: 255 - ui.val('y') }, context); break; case 'g': - active.val('g', {g: 255 - ui.val('y')}, context); + active.val('g', { g: 255 - ui.val('y') }, context); break; case 'b': - active.val('b', {b: 255 - ui.val('y')}, context); + active.val('b', { b: 255 - ui.val('y') }, context); break; case 'a': active.val('a', 255 - ui.val('y'), context); @@ -888,29 +888,29 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc switch (settings.color.mode) { case 'h': { const sv = ui.val('sv'); - colorMap.val('xy', {x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100)}, context); + colorMap.val('xy', { x: !isNullish(sv) ? sv.s : 100, y: 100 - (!isNullish(sv) ? sv.v : 100) }, context); break; } case 's': // Fall through case 'a': { const hv = ui.val('hv'); - colorMap.val('xy', {x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100)}, context); + colorMap.val('xy', { x: (hv && hv.h) || 0, y: 100 - (!isNullish(hv) ? hv.v : 100) }, context); break; } case 'v': { const hs = ui.val('hs'); - colorMap.val('xy', {x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100)}, context); + colorMap.val('xy', { x: (hs && hs.h) || 0, y: 100 - (!isNullish(hs) ? hs.s : 100) }, context); break; } case 'r': { const bg = ui.val('bg'); - colorMap.val('xy', {x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0)}, context); + colorMap.val('xy', { x: (bg && bg.b) || 0, y: 255 - ((bg && bg.g) || 0) }, context); break; } case 'g': { const br = ui.val('br'); - colorMap.val('xy', {x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0)}, context); + colorMap.val('xy', { x: (br && br.b) || 0, y: 255 - ((br && br.r) || 0) }, context); break; } case 'b': { const rg = ui.val('rg'); - colorMap.val('xy', {x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0)}, context); + colorMap.val('xy', { x: (rg && rg.r) || 0, y: 255 - ((rg && rg.g) || 0) }, context); break; } } @@ -963,7 +963,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc function updateMapVisuals (ui) { switch (settings.color.mode) { case 'h': - setBG.call(that, colorMapDiv, new Color({h: ui.val('h') || 0, s: 100, v: 100}).val('hex')); + setBG.call(that, colorMapDiv, new Color({ h: ui.val('h') || 0, s: 100, v: 100 }).val('hex')); break; case 's': case 'a': { @@ -999,14 +999,14 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc break; } case 's': { const hva = ui.val('hva'), - saturatedColor = new Color({h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100}); + saturatedColor = new Color({ h: (hva && hva.h) || 0, s: 100, v: !isNullish(hva) ? hva.v : 100 }); setBG.call(that, colorBarDiv, saturatedColor.val('hex')); setAlpha.call(that, colorBarL2, 100 - (!isNullish(hva) ? hva.v : 100)); setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hva && hva.a) || 0)) * 100) / 255, 4)); break; } case 'v': { const hsa = ui.val('hsa'), - valueColor = new Color({h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100}); + valueColor = new Color({ h: (hsa && hsa.h) || 0, s: !isNullish(hsa) ? hsa.s : 100, v: 100 }); setBG.call(that, colorBarDiv, valueColor.val('hex')); setAlpha.call(that, colorBarL5, toFixedNumeric(((255 - ((hsa && hsa.a) || 0)) * 100) / 255, 4)); break; @@ -1487,7 +1487,7 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc for (let i = 0; i < color.quickList.length; i++) { /* if default colors are hex strings, change them to color objects */ if ((typeof (color.quickList[i])).toString().toLowerCase() === 'string') { - color.quickList[i] = new Color({hex: color.quickList[i]}); + color.quickList[i] = new Color({ hex: color.quickList[i] }); } const alpha = color.quickList[i].val('a'); let ahex = color.quickList[i].val('ahex'); @@ -1588,23 +1588,23 @@ export function jPickerMethod (elem, options, commitCallback, liveCallback, canc } } } - const {images, localization} = settings; // local copies for YUI compressor + const { images, localization } = settings; // local copies for YUI compressor const color = { active: (typeof settings.color.active).toString().toLowerCase() === 'string' - ? new Color({ahex: !settings.window.alphaSupport && settings.color.active + ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' : settings.color.active }) - : new Color({ahex: !settings.window.alphaSupport && + : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') }), current: (typeof settings.color.active).toString().toLowerCase() === 'string' - ? new Color({ahex: !settings.window.alphaSupport && settings.color.active + ? new Color({ ahex: !settings.window.alphaSupport && settings.color.active ? settings.color.active.substring(0, 6) + 'ff' - : settings.color.active}) - : new Color({ahex: !settings.window.alphaSupport && + : settings.color.active }) + : new Color({ ahex: !settings.window.alphaSupport && settings.color.active.val('ahex') ? settings.color.active.val('ahex').substring(0, 6) + 'ff' : settings.color.active.val('ahex') @@ -1770,79 +1770,79 @@ export const jPickerDefaults = { }, color: { mode: 'h', - active: new Color({ahex: '#ffcc00ff'}), + active: new Color({ ahex: '#ffcc00ff' }), quickList: [ - new Color({h: 360, s: 33, v: 100}), - new Color({h: 360, s: 66, v: 100}), - new Color({h: 360, s: 100, v: 100}), - new Color({h: 360, s: 100, v: 75}), - new Color({h: 360, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 100}), - new Color({h: 30, s: 33, v: 100}), - new Color({h: 30, s: 66, v: 100}), - new Color({h: 30, s: 100, v: 100}), - new Color({h: 30, s: 100, v: 75}), - new Color({h: 30, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 90}), - new Color({h: 60, s: 33, v: 100}), - new Color({h: 60, s: 66, v: 100}), - new Color({h: 60, s: 100, v: 100}), - new Color({h: 60, s: 100, v: 75}), - new Color({h: 60, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 80}), - new Color({h: 90, s: 33, v: 100}), - new Color({h: 90, s: 66, v: 100}), - new Color({h: 90, s: 100, v: 100}), - new Color({h: 90, s: 100, v: 75}), - new Color({h: 90, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 70}), - new Color({h: 120, s: 33, v: 100}), - new Color({h: 120, s: 66, v: 100}), - new Color({h: 120, s: 100, v: 100}), - new Color({h: 120, s: 100, v: 75}), - new Color({h: 120, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 60}), - new Color({h: 150, s: 33, v: 100}), - new Color({h: 150, s: 66, v: 100}), - new Color({h: 150, s: 100, v: 100}), - new Color({h: 150, s: 100, v: 75}), - new Color({h: 150, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 50}), - new Color({h: 180, s: 33, v: 100}), - new Color({h: 180, s: 66, v: 100}), - new Color({h: 180, s: 100, v: 100}), - new Color({h: 180, s: 100, v: 75}), - new Color({h: 180, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 40}), - new Color({h: 210, s: 33, v: 100}), - new Color({h: 210, s: 66, v: 100}), - new Color({h: 210, s: 100, v: 100}), - new Color({h: 210, s: 100, v: 75}), - new Color({h: 210, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 30}), - new Color({h: 240, s: 33, v: 100}), - new Color({h: 240, s: 66, v: 100}), - new Color({h: 240, s: 100, v: 100}), - new Color({h: 240, s: 100, v: 75}), - new Color({h: 240, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 20}), - new Color({h: 270, s: 33, v: 100}), - new Color({h: 270, s: 66, v: 100}), - new Color({h: 270, s: 100, v: 100}), - new Color({h: 270, s: 100, v: 75}), - new Color({h: 270, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 10}), - new Color({h: 300, s: 33, v: 100}), - new Color({h: 300, s: 66, v: 100}), - new Color({h: 300, s: 100, v: 100}), - new Color({h: 300, s: 100, v: 75}), - new Color({h: 300, s: 100, v: 50}), - new Color({h: 180, s: 0, v: 0}), - new Color({h: 330, s: 33, v: 100}), - new Color({h: 330, s: 66, v: 100}), - new Color({h: 330, s: 100, v: 100}), - new Color({h: 330, s: 100, v: 75}), - new Color({h: 330, s: 100, v: 50}), + new Color({ h: 360, s: 33, v: 100 }), + new Color({ h: 360, s: 66, v: 100 }), + new Color({ h: 360, s: 100, v: 100 }), + new Color({ h: 360, s: 100, v: 75 }), + new Color({ h: 360, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 100 }), + new Color({ h: 30, s: 33, v: 100 }), + new Color({ h: 30, s: 66, v: 100 }), + new Color({ h: 30, s: 100, v: 100 }), + new Color({ h: 30, s: 100, v: 75 }), + new Color({ h: 30, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 90 }), + new Color({ h: 60, s: 33, v: 100 }), + new Color({ h: 60, s: 66, v: 100 }), + new Color({ h: 60, s: 100, v: 100 }), + new Color({ h: 60, s: 100, v: 75 }), + new Color({ h: 60, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 80 }), + new Color({ h: 90, s: 33, v: 100 }), + new Color({ h: 90, s: 66, v: 100 }), + new Color({ h: 90, s: 100, v: 100 }), + new Color({ h: 90, s: 100, v: 75 }), + new Color({ h: 90, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 70 }), + new Color({ h: 120, s: 33, v: 100 }), + new Color({ h: 120, s: 66, v: 100 }), + new Color({ h: 120, s: 100, v: 100 }), + new Color({ h: 120, s: 100, v: 75 }), + new Color({ h: 120, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 60 }), + new Color({ h: 150, s: 33, v: 100 }), + new Color({ h: 150, s: 66, v: 100 }), + new Color({ h: 150, s: 100, v: 100 }), + new Color({ h: 150, s: 100, v: 75 }), + new Color({ h: 150, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 50 }), + new Color({ h: 180, s: 33, v: 100 }), + new Color({ h: 180, s: 66, v: 100 }), + new Color({ h: 180, s: 100, v: 100 }), + new Color({ h: 180, s: 100, v: 75 }), + new Color({ h: 180, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 40 }), + new Color({ h: 210, s: 33, v: 100 }), + new Color({ h: 210, s: 66, v: 100 }), + new Color({ h: 210, s: 100, v: 100 }), + new Color({ h: 210, s: 100, v: 75 }), + new Color({ h: 210, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 30 }), + new Color({ h: 240, s: 33, v: 100 }), + new Color({ h: 240, s: 66, v: 100 }), + new Color({ h: 240, s: 100, v: 100 }), + new Color({ h: 240, s: 100, v: 75 }), + new Color({ h: 240, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 20 }), + new Color({ h: 270, s: 33, v: 100 }), + new Color({ h: 270, s: 66, v: 100 }), + new Color({ h: 270, s: 100, v: 100 }), + new Color({ h: 270, s: 100, v: 75 }), + new Color({ h: 270, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 10 }), + new Color({ h: 300, s: 33, v: 100 }), + new Color({ h: 300, s: 66, v: 100 }), + new Color({ h: 300, s: 100, v: 100 }), + new Color({ h: 300, s: 100, v: 75 }), + new Color({ h: 300, s: 100, v: 50 }), + new Color({ h: 180, s: 0, v: 0 }), + new Color({ h: 330, s: 33, v: 100 }), + new Color({ h: 330, s: 66, v: 100 }), + new Color({ h: 330, s: 100, v: 100 }), + new Color({ h: 330, s: 100, v: 75 }), + new Color({ h: 330, s: 100, v: 50 }), new Color() ] }, diff --git a/src/editor/components/seButton.js b/src/editor/components/seButton.js index 4ca4a209..7715d4fe 100644 --- a/src/editor/components/seButton.js +++ b/src/editor/components/seButton.js @@ -51,7 +51,7 @@ export class ToolButton extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component this.$div = this._shadowRoot.querySelector('div'); @@ -62,7 +62,7 @@ export class ToolButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'pressed', 'disabled', 'size', 'style']; + return [ 'title', 'src', 'pressed', 'disabled', 'size', 'style' ]; } /** * @function attributeChangedCallback diff --git a/src/editor/components/seColorPicker.js b/src/editor/components/seColorPicker.js index 3fa60db1..12d7838a 100644 --- a/src/editor/components/seColorPicker.js +++ b/src/editor/components/seColorPicker.js @@ -1,5 +1,5 @@ /* eslint-disable max-len */ -import {jGraduate, jGraduateMethod} from './jgraduate/jQuery.jGraduate.js'; +import { jGraduate, jGraduateMethod } from './jgraduate/jQuery.jGraduate.js'; import PaintBox from './PaintBox.js'; const template = document.createElement('template'); @@ -658,7 +658,7 @@ export class SeColorPicker extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$logo = this._shadowRoot.getElementById('logo'); this.$label = this._shadowRoot.getElementById('label'); @@ -672,7 +672,7 @@ export class SeColorPicker extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['label', 'src', 'type']; + return [ 'label', 'src', 'type' ]; } /** * @function attributeChangedCallback @@ -754,9 +754,9 @@ export class SeColorPicker extends HTMLElement { update (svgCanvas, selectedElement, apply) { const paint = this.paintBox.update(svgCanvas, selectedElement); if (paint && apply) { - const changeEvent = new CustomEvent('change', {detail: { + const changeEvent = new CustomEvent('change', { detail: { paint - }}); + } }); this.dispatchEvent(changeEvent); } } @@ -775,21 +775,21 @@ export class SeColorPicker extends HTMLElement { connectedCallback () { this.paintBox = new PaintBox(this.$block, this.type); this.$picker.addEventListener('click', () => { - let {paint} = this.paintBox; + let { paint } = this.paintBox; jGraduateMethod( this.$color_picker, { - images: {clientPath: './components/jgraduate/images/'}, + images: { clientPath: './components/jgraduate/images/' }, paint, - window: {pickerTitle: this.label}, + window: { pickerTitle: this.label }, newstop: 'inverse' }, (p) => { paint = new jGraduate.Paint(p); this.setPaint(paint); - const changeEvent = new CustomEvent('change', {detail: { + const changeEvent = new CustomEvent('change', { detail: { paint - }}); + } }); this.dispatchEvent(changeEvent); this.$color_picker.style.display = 'none'; }, diff --git a/src/editor/components/seDropdown.js b/src/editor/components/seDropdown.js index 450a6e3d..aaf1039b 100644 --- a/src/editor/components/seDropdown.js +++ b/src/editor/components/seDropdown.js @@ -1,7 +1,7 @@ import ListComboBox from 'elix/define/ListComboBox.js'; -import {defaultState} from 'elix/src/base/internal.js'; -import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; -import {internal} from 'elix'; +import { defaultState } from 'elix/src/base/internal.js'; +import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js'; +import { internal } from 'elix'; import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js'; /** @@ -56,7 +56,7 @@ class Dropdown extends ListComboBox { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'inputsize', 'value']; + return [ 'title', 'src', 'inputsize', 'value' ]; } /** * @function attributeChangedCallback @@ -105,7 +105,7 @@ class Dropdown extends ListComboBox { e.preventDefault(); const value = e.detail?.closeResult?.getAttribute('value'); if (value) { - const closeEvent = new CustomEvent('change', {detail: {value}}); + const closeEvent = new CustomEvent('change', { detail: { value } }); this.dispatchEvent(closeEvent); } }); @@ -123,7 +123,7 @@ class Dropdown extends ListComboBox { * @returns {void} */ set src (src) { - this[internal.setState]({src}); + this[internal.setState]({ src }); } /** * @function inputsize @@ -137,7 +137,7 @@ class Dropdown extends ListComboBox { * @returns {void} */ set inputsize (inputsize) { - this[internal.setState]({inputsize}); + this[internal.setState]({ inputsize }); } /** * @function value @@ -151,7 +151,7 @@ class Dropdown extends ListComboBox { * @returns {void} */ set value (value) { - this[internal.setState]({value}); + this[internal.setState]({ value }); } } diff --git a/src/editor/components/seExplorerButton.js b/src/editor/components/seExplorerButton.js index 04126acb..8d1673a3 100644 --- a/src/editor/components/seExplorerButton.js +++ b/src/editor/components/seExplorerButton.js @@ -107,7 +107,7 @@ export class ExplorerButton extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component this.$button = this._shadowRoot.querySelector('.menu-button'); @@ -124,7 +124,7 @@ export class ExplorerButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'pressed', 'disabled', 'lib', 'src']; + return [ 'title', 'pressed', 'disabled', 'lib', 'src' ]; } /** * @function attributeChangedCallback @@ -160,7 +160,7 @@ export class ExplorerButton extends HTMLElement { try { const response = await fetch(`${newValue}index.json`); const json = await response.json(); - const {lib} = json; + const { lib } = json; this.$menu.innerHTML = lib.map((menu, i) => ( `
${menu}
` )).join(''); @@ -295,9 +295,9 @@ export class ExplorerButton extends HTMLElement { const size = json.size ?? 300; const fill = json.fill ? '#333' : 'none'; const off = size * 0.05; - const vb = [-off, -off, size + off * 2, size + off * 2].join(' '); + const vb = [ -off, -off, size + off * 2, size + off * 2 ].join(' '); const stroke = json.fill ? 0 : (size / 30); - this.$lib.innerHTML = Object.entries(this.data).map(([key, path]) => { + this.$lib.innerHTML = Object.entries(this.data).map(([ key, path ]) => { const encoded = btoa(` diff --git a/src/editor/components/seFlyingButton.js b/src/editor/components/seFlyingButton.js index 7e42e28d..1b7bfddb 100644 --- a/src/editor/components/seFlyingButton.js +++ b/src/editor/components/seFlyingButton.js @@ -88,7 +88,7 @@ export class FlyingButton extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component this.$button = this._shadowRoot.querySelector('.menu-button'); @@ -105,7 +105,7 @@ export class FlyingButton extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'pressed', 'disabled', 'opened']; + return [ 'title', 'pressed', 'disabled', 'opened' ]; } /** * @function attributeChangedCallback diff --git a/src/editor/components/seInput.js b/src/editor/components/seInput.js index 876140dc..a4cd4d8f 100644 --- a/src/editor/components/seInput.js +++ b/src/editor/components/seInput.js @@ -35,7 +35,7 @@ export class SEInput extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component this.$img = this._shadowRoot.querySelector('img'); @@ -48,7 +48,7 @@ export class SEInput extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['value', 'label', 'src', 'size']; + return [ 'value', 'label', 'src', 'size' ]; } /** * @function attributeChangedCallback diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js index a68e77fe..3e1504c3 100644 --- a/src/editor/components/seList.js +++ b/src/editor/components/seList.js @@ -35,7 +35,7 @@ export class SeList extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$dropdown = this._shadowRoot.querySelector('elix-dropdown-list'); this.$label = this._shadowRoot.querySelector('label'); @@ -45,7 +45,7 @@ export class SeList extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['label', 'width', 'height']; + return [ 'label', 'width', 'height' ]; } /** @@ -128,7 +128,7 @@ export class SeList extends HTMLElement { e.preventDefault(); if (e?.detail?.selectedIndex !== undefined) { const value = this.$dropdown.selectedItem.getAttribute('value'); - const closeEvent = new CustomEvent('change', {detail: {value}}); + const closeEvent = new CustomEvent('change', { detail: { value } }); currentObj.dispatchEvent(closeEvent); currentObj.value = value; } diff --git a/src/editor/components/seListItem.js b/src/editor/components/seListItem.js index c238b203..80052b57 100644 --- a/src/editor/components/seListItem.js +++ b/src/editor/components/seListItem.js @@ -25,7 +25,7 @@ export class SeListItem extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$menuitem = this._shadowRoot.querySelector('elix-option'); this.$svg = this.$menuitem.shadowRoot.querySelector('#checkmark'); @@ -36,7 +36,7 @@ export class SeListItem extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['option']; + return [ 'option' ]; } /** diff --git a/src/editor/components/seMenu.js b/src/editor/components/seMenu.js index 2c25a39a..3b5fef77 100644 --- a/src/editor/components/seMenu.js +++ b/src/editor/components/seMenu.js @@ -39,7 +39,7 @@ export class SeMenu extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$menu = this._shadowRoot.querySelector('elix-menu-button'); this.$label = this.$menu.shadowRoot.querySelector('#popupToggle').shadowRoot; @@ -49,7 +49,7 @@ export class SeMenu extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['label', 'src']; + return [ 'label', 'src' ]; } /** diff --git a/src/editor/components/seMenuItem.js b/src/editor/components/seMenuItem.js index d9c0a421..67cbd9d7 100644 --- a/src/editor/components/seMenuItem.js +++ b/src/editor/components/seMenuItem.js @@ -22,7 +22,7 @@ export class SeMenuItem extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$img = this._shadowRoot.querySelector('img'); this.$label = this._shadowRoot.querySelector('span'); @@ -35,7 +35,7 @@ export class SeMenuItem extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['label', 'src']; + return [ 'label', 'src' ]; } /** * @function attributeChangedCallback diff --git a/src/editor/components/sePalette.js b/src/editor/components/sePalette.js index b138761f..eb844693 100644 --- a/src/editor/components/sePalette.js +++ b/src/editor/components/sePalette.js @@ -92,21 +92,21 @@ export class SEPalette extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$strip = this._shadowRoot.querySelector('#js-se-palette'); palette.forEach((rgb) => { const newDiv = document.createElement('div'); newDiv.classList.add('square'); if(rgb === 'none') { - const img = document.createElement('img'); + const img = document.createElement('img'); img.src = `data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgY2xhc3M9InN2Z19pY29uIj48c3ZnIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CiAgICA8bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNkNDAwMDAiIGlkPSJzdmdfOTAiIHkyPSIyNCIgeDI9IjI0IiB5MT0iMCIgeDE9IjAiLz4KICAgIDxsaW5lIGlkPSJzdmdfOTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0MDAwMCIgeTI9IjI0IiB4Mj0iMCIgeTE9IjAiIHgxPSIyNCIvPgogIDwvc3ZnPjwvc3ZnPg==`; img.style.width = "15px"; img.style.height = "15px"; newDiv.append(img); } else { newDiv.style.backgroundColor = rgb; - } + } newDiv.dataset.rgb = rgb; newDiv.addEventListener('click', (evt) => { evt.preventDefault(); @@ -117,7 +117,7 @@ export class SEPalette extends HTMLElement { if (color === 'none' || color === 'transparent' || color === 'initial') { color = 'none'; } - const paletteEvent = new CustomEvent('change', {detail: {picker, color}, bubbles: false}); + const paletteEvent = new CustomEvent('change', { detail: { picker, color }, bubbles: false }); this.dispatchEvent(paletteEvent); }); this.$strip.append(newDiv); diff --git a/src/editor/components/sePlainBorderButton.js b/src/editor/components/sePlainBorderButton.js index eedcd24b..c210f59c 100644 --- a/src/editor/components/sePlainBorderButton.js +++ b/src/editor/components/sePlainBorderButton.js @@ -1,5 +1,5 @@ -import {template} from 'elix/src/base/internal.js'; -import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import { template } from 'elix/src/base/internal.js'; +import { fragmentFrom } from 'elix/src/core/htmlLiterals.js'; import PlainButton from 'elix/src/plain/PlainButton.js'; /** diff --git a/src/editor/components/sePlainMenuButton.js b/src/editor/components/sePlainMenuButton.js index e2771273..1a9206da 100644 --- a/src/editor/components/sePlainMenuButton.js +++ b/src/editor/components/sePlainMenuButton.js @@ -1,5 +1,5 @@ import PlainMenuButton from 'elix/src/plain/PlainMenuButton.js'; -import {defaultState} from 'elix/src/base/internal.js'; +import { defaultState } from 'elix/src/base/internal.js'; import sePlainBorderButton from './sePlainBorderButton.js'; /** diff --git a/src/editor/components/seSpinInput.js b/src/editor/components/seSpinInput.js index 6f1de6a9..ee097e8c 100644 --- a/src/editor/components/seSpinInput.js +++ b/src/editor/components/seSpinInput.js @@ -49,7 +49,7 @@ export class SESpinInput extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); // locate the component this.$img = this._shadowRoot.querySelector('img'); @@ -62,7 +62,7 @@ export class SESpinInput extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['value', 'label', 'src', 'size', 'min', 'max', 'step']; + return [ 'value', 'label', 'src', 'size', 'min', 'max', 'step' ]; } /** * @function attributeChangedCallback diff --git a/src/editor/components/seZoom.js b/src/editor/components/seZoom.js index 0c3c936d..05f90ad0 100644 --- a/src/editor/components/seZoom.js +++ b/src/editor/components/seZoom.js @@ -1,6 +1,6 @@ import ListComboBox from 'elix/define/ListComboBox.js'; import * as internal from 'elix/src/base/internal.js'; -import {templateFrom, fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import { templateFrom, fragmentFrom } from 'elix/src/core/htmlLiterals.js'; import NumberSpinBox from '../dialogs/se-elix/define/NumberSpinBox.js'; /** @@ -66,7 +66,7 @@ class Zoom extends ListComboBox { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'src', 'inputsize', 'value']; + return [ 'title', 'src', 'inputsize', 'value' ]; } /** * @function attributeChangedCallback @@ -115,7 +115,7 @@ class Zoom extends ListComboBox { e.preventDefault(); const value = e.detail?.closeResult?.getAttribute('value'); if (value) { - const closeEvent = new CustomEvent('change', {detail: {value}}); + const closeEvent = new CustomEvent('change', { detail: { value } }); this.dispatchEvent(closeEvent); } }); @@ -133,7 +133,7 @@ class Zoom extends ListComboBox { * @returns {void} */ set src (src) { - this[internal.setState]({src}); + this[internal.setState]({ src }); } /** * @function inputsize @@ -147,7 +147,7 @@ class Zoom extends ListComboBox { * @returns {void} */ set inputsize (inputsize) { - this[internal.setState]({inputsize}); + this[internal.setState]({ inputsize }); } /** * @function value @@ -161,7 +161,7 @@ class Zoom extends ListComboBox { * @returns {void} */ set value (value) { - this[internal.setState]({value}); + this[internal.setState]({ value }); } } diff --git a/src/editor/dialogs/SePlainAlertDialog.js b/src/editor/dialogs/SePlainAlertDialog.js index a3b2c0b1..3a00b3f7 100644 --- a/src/editor/dialogs/SePlainAlertDialog.js +++ b/src/editor/dialogs/SePlainAlertDialog.js @@ -1,6 +1,6 @@ import PlainAlertDialog from 'elix/src/plain/PlainAlertDialog.js'; -import {template} from 'elix/src/base/internal.js'; -import {fragmentFrom} from 'elix/src/core/htmlLiterals.js'; +import { template } from 'elix/src/base/internal.js'; +import { fragmentFrom } from 'elix/src/core/htmlLiterals.js'; /** * @class SePlainAlertDialog diff --git a/src/editor/dialogs/cmenuDialog.js b/src/editor/dialogs/cmenuDialog.js index 4610a858..3673d88e 100644 --- a/src/editor/dialogs/cmenuDialog.js +++ b/src/editor/dialogs/cmenuDialog.js @@ -127,7 +127,7 @@ export class SeCMenuDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this._workarea = document.getElementById('workarea'); this.$dialog = this._shadowRoot.querySelector('#cmenu_canvas'); @@ -148,7 +148,7 @@ export class SeCMenuDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['disableallmenu', 'enablemenuitems', 'disablemenuitems']; + return [ 'disableallmenu', 'enablemenuitems', 'disablemenuitems' ]; } /** * @function attributeChangedCallback @@ -251,9 +251,9 @@ export class SeCMenuDialog extends HTMLElement { } }; const onMenuClickHandler = (e, action) => { - const triggerEvent = new CustomEvent('change', {detail: { + const triggerEvent = new CustomEvent('change', { detail: { trigger: action - }}); + } }); this.dispatchEvent(triggerEvent); }; this._workarea.addEventListener('contextmenu', onMenuOpenHandler); diff --git a/src/editor/dialogs/cmenuLayersDialog.js b/src/editor/dialogs/cmenuLayersDialog.js index 9e2ab506..a7bb48c1 100644 --- a/src/editor/dialogs/cmenuLayersDialog.js +++ b/src/editor/dialogs/cmenuLayersDialog.js @@ -80,7 +80,7 @@ export class SeCMenuLayerDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.source = ''; this._workarea = undefined; @@ -96,7 +96,7 @@ export class SeCMenuLayerDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['value', 'leftclick']; + return [ 'value', 'leftclick' ]; } /** * @function attributeChangedCallback @@ -168,10 +168,10 @@ export class SeCMenuLayerDialog extends HTMLElement { } }; const onMenuClickHandler = (e, action, id) => { - const triggerEvent = new CustomEvent('change', {detail: { + const triggerEvent = new CustomEvent('change', { detail: { trigger: action, source: id - }}); + } }); this.dispatchEvent(triggerEvent); current.$dialog.style.display = 'none'; }; diff --git a/src/editor/dialogs/editorPreferencesDialog.js b/src/editor/dialogs/editorPreferencesDialog.js index 9b7e793c..9c83c7c3 100644 --- a/src/editor/dialogs/editorPreferencesDialog.js +++ b/src/editor/dialogs/editorPreferencesDialog.js @@ -251,8 +251,8 @@ export class SeEditPrefsDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this.colorBlocks = ['#FFF', '#888', '#000', 'chessboard']; - this._shadowRoot = this.attachShadow({mode: 'open'}); + this.colorBlocks = [ '#FFF', '#888', '#000', 'chessboard' ]; + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$dialog = this._shadowRoot.querySelector('#svg_prefs'); this.$saveBtn = this._shadowRoot.querySelector('#tool_prefs_save'); @@ -273,7 +273,7 @@ export class SeEditPrefsDialog extends HTMLElement { */ static get observedAttributes () { // eslint-disable-next-line max-len - return ['dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit']; + return [ 'dialog', 'lang', 'iconsize', 'canvasbg', 'bgurl', 'gridsnappingon', 'gridsnappingstep', 'gridcolor', 'showrulers', 'baseunit' ]; } /** * @function attributeChangedCallback @@ -494,14 +494,14 @@ export class SeEditPrefsDialog extends HTMLElement { */ connectedCallback () { const onCancelHandler = () => { - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { dialog: 'closed' - }}); + } }); this.dispatchEvent(closeEvent); }; const onSaveHandler = () => { const color = this.$bgBlocks.querySelector('.cur_background').dataset.bgColor || '#FFF'; - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { lang: this.$langSelect.value, dialog: 'close', iconsize: this.$iconSize.value, @@ -511,7 +511,7 @@ export class SeEditPrefsDialog extends HTMLElement { gridsnappingstep: this.$gridSnappingStep.value, showrulers: this.$showRulers.checked, baseunit: this.$baseUnit.value - }}); + } }); this.dispatchEvent(closeEvent); }; // Set up editor background functionality diff --git a/src/editor/dialogs/exportDialog.js b/src/editor/dialogs/exportDialog.js index 28e74306..4f5962a8 100644 --- a/src/editor/dialogs/exportDialog.js +++ b/src/editor/dialogs/exportDialog.js @@ -91,7 +91,7 @@ export class SeExportDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$dialog = this._shadowRoot.querySelector('#export_box'); this.$okBtn = this._shadowRoot.querySelector('#export_ok'); @@ -106,7 +106,7 @@ export class SeExportDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['dialog']; + return [ 'dialog' ]; } /** * @function attributeChangedCallback @@ -161,11 +161,11 @@ export class SeExportDialog extends HTMLElement { if (action === 'cancel') { document.getElementById('se-export-dialog').setAttribute('dialog', 'close'); } else { - const triggerEvent = new CustomEvent('change', {detail: { + const triggerEvent = new CustomEvent('change', { detail: { trigger: action, imgType: this.$exportOption.value, quality: this.value - }}); + } }); this.dispatchEvent(triggerEvent); } }; diff --git a/src/editor/dialogs/imagePropertiesDialog.js b/src/editor/dialogs/imagePropertiesDialog.js index 1a52cf5a..a88dd9a4 100644 --- a/src/editor/dialogs/imagePropertiesDialog.js +++ b/src/editor/dialogs/imagePropertiesDialog.js @@ -1,4 +1,4 @@ -import {isValidUnit} from '../../common/units.js'; +import { isValidUnit } from '../../common/units.js'; const template = document.createElement('template'); template.innerHTML = ` @@ -127,7 +127,7 @@ export class SeImgPropDialog extends HTMLElement { super(); // create the shadowDom and insert the template this.eventlisten = false; - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$saveBtn = this._shadowRoot.querySelector('#tool_docprops_save'); this.$cancelBtn = this._shadowRoot.querySelector('#tool_docprops_cancel'); @@ -144,7 +144,7 @@ export class SeImgPropDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'width', 'height', 'save', 'dialog', 'embed']; + return [ 'title', 'width', 'height', 'save', 'dialog', 'embed' ]; } /** * @function attributeChangedCallback @@ -343,22 +343,22 @@ export class SeImgPropDialog extends HTMLElement { if (this.$imageOptRef.getAttribute('checked') === 'true') { saveOpt = 'ref'; } - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { title: this.$canvasTitle.value, w: this.$canvasWidth.value, h: this.$canvasHeight.value, save: saveOpt, dialog: 'close' - }}); + } }); this.$canvasWidth.removeAttribute('disabled'); this.$canvasHeight.removeAttribute('disabled'); this.$resolution.selectedIndex = 0; this.dispatchEvent(closeEvent); }; const onCancelHandler = () => { - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { dialog: 'closed' - }}); + } }); this.$canvasWidth.removeAttribute('disabled'); this.$canvasHeight.removeAttribute('disabled'); this.$resolution.selectedIndex = 0; diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js index 8d83e2f8..33223c4c 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -3,7 +3,7 @@ import SePlainAlertDialog from './SePlainAlertDialog.js'; const seAlert = (text) => { const dialog = new SePlainAlertDialog(); dialog.textContent = text; - dialog.choices = ['Ok']; + dialog.choices = [ 'Ok' ]; dialog.open(); }; diff --git a/src/editor/dialogs/seConfirmDialog.js b/src/editor/dialogs/seConfirmDialog.js index eee1c0c1..b111edd2 100644 --- a/src/editor/dialogs/seConfirmDialog.js +++ b/src/editor/dialogs/seConfirmDialog.js @@ -3,7 +3,7 @@ import SePlainAlertDialog from './SePlainAlertDialog.js'; const seConfirm = async (text, choices) => { const dialog = new SePlainAlertDialog(); dialog.textContent = text; - dialog.choices = (choices === undefined) ? ['Ok', 'Cancel'] : choices; + dialog.choices = (choices === undefined) ? [ 'Ok', 'Cancel' ] : choices; dialog.open(); const response = await dialog.whenClosed(); return response.choice; diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js index 17fb7cd5..4420e553 100644 --- a/src/editor/dialogs/sePromptDialog.js +++ b/src/editor/dialogs/sePromptDialog.js @@ -9,7 +9,7 @@ export class SePromptDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this.dialog = new SePlainAlertDialog(); } /** @@ -17,7 +17,7 @@ export class SePromptDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title', 'close']; + return [ 'title', 'close' ]; } /** * @function attributeChangedCallback @@ -33,7 +33,7 @@ export class SePromptDialog extends HTMLElement { this.dialog.close(); } this.dialog.textContent = newValue; - this.dialog.choices = ['Cancel']; + this.dialog.choices = [ 'Cancel' ]; this.dialog.open(); break; case 'close': diff --git a/src/editor/dialogs/svgSourceDialog.js b/src/editor/dialogs/svgSourceDialog.js index ae76e1f4..3d77c95d 100644 --- a/src/editor/dialogs/svgSourceDialog.js +++ b/src/editor/dialogs/svgSourceDialog.js @@ -89,7 +89,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement { constructor () { super(); // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); + this._shadowRoot = this.attachShadow({ mode: 'open' }); this._shadowRoot.append(template.content.cloneNode(true)); this.$dialog = this._shadowRoot.querySelector('#svg_source_editor'); this.$copyBtn = this._shadowRoot.querySelector('#copy_save_done'); @@ -104,7 +104,7 @@ export class SeSvgSourceEditorDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['dialog', 'value', 'applysec', 'copysec']; + return [ 'dialog', 'value', 'applysec', 'copysec' ]; } /** * @function attributeChangedCallback @@ -213,9 +213,9 @@ export class SeSvgSourceEditorDialog extends HTMLElement { */ connectedCallback () { const onCancelHandler = () => { - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { dialog: 'closed' - }}); + } }); this.dispatchEvent(closeEvent); }; const onCopyHandler = () => { @@ -228,10 +228,10 @@ export class SeSvgSourceEditorDialog extends HTMLElement { this.dispatchEvent(closeEvent); }; const onSaveHandler = () => { - const closeEvent = new CustomEvent('change', {detail: { + const closeEvent = new CustomEvent('change', { detail: { value: this.$sourceTxt.value, dialog: 'close' - }}); + } }); this.dispatchEvent(closeEvent); }; this.$copyBtn.addEventListener('click', onCopyHandler); diff --git a/src/editor/dragmove/dragmove.js b/src/editor/dragmove/dragmove.js index 38c8566d..720beabc 100644 --- a/src/editor/dragmove/dragmove.js +++ b/src/editor/dragmove/dragmove.js @@ -47,7 +47,7 @@ export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag }); // On leaving click, stop moving. - document.addEventListener(_isTouch ? "touchend" : "mouseup", function() { + document.addEventListener(_isTouch ? "touchend" : "mouseup", function() { if (onEnd && hasStarted) { onEnd(target, parent, parseInt(target.style.left), parseInt(target.style.top)); } @@ -57,11 +57,11 @@ export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag }); // On leaving click, stop moving. - document.addEventListener(_isTouch ? "touchmove" : "mousemove", function() { + document.addEventListener(_isTouch ? "touchmove" : "mousemove", function() { if (onDrag && hasStarted) { onDrag(target, parseInt(target.style.left), parseInt(target.style.top)); } - }); + }); // Register mouse-move callback to move the element. _callbacks.push(function move(x, y) { @@ -94,4 +94,4 @@ export const dragmove = function(target, handler, parent, onStart, onEnd, onDrag }); }; -export { dragmove as default }; \ No newline at end of file +export { dragmove as default }; \ No newline at end of file diff --git a/src/editor/embedapi-dom.js b/src/editor/embedapi-dom.js index a7954a0c..7f1e05de 100644 --- a/src/editor/embedapi-dom.js +++ b/src/editor/embedapi-dom.js @@ -3,7 +3,7 @@ * @module EmbeddedSVGEditDOM */ import EmbeddedSVGEdit from './embedapi.js'; -import {isChrome} from '../common/browser.js'; +import { isChrome } from '../common/browser.js'; let svgCanvas = null; @@ -106,8 +106,8 @@ iframe.src = frameBase + framePath + : ''); // Append arguments to this file onto the iframe iframe.addEventListener('load', function () { - svgCanvas = new EmbeddedSVGEdit(frame, [new URL(frameBase).origin]); - const {$id} = svgCanvas; + svgCanvas = new EmbeddedSVGEdit(frame, [ new URL(frameBase).origin ]); + const { $id } = svgCanvas; // Hide main button, as we will be controlling new, load, save, etc. from the host document let doc; try { diff --git a/src/editor/embedapi.js b/src/editor/embedapi.js index ddb60148..db9d5cbe 100644 --- a/src/editor/embedapi.js +++ b/src/editor/embedapi.js @@ -43,7 +43,7 @@ function getCallbackSetter (funcName) { * @param {Integer} data.id * @returns {void} */ -function addCallback (t, {result, error, id: callbackID}) { +function addCallback (t, { result, error, id: callbackID }) { if (typeof callbackID === 'number' && t.callbacks[callbackID]) { // These should be safe both because we check `cbid` is numeric and // because the calls are from trusted origins @@ -62,10 +62,10 @@ function addCallback (t, {result, error, id: callbackID}) { function messageListener (e) { // We accept and post strings as opposed to objects for the sake of IE9 support; this // will most likely be changed in the future - if (!e.data || !['string', 'object'].includes(typeof e.data)) { + if (!e.data || ![ 'string', 'object' ].includes(typeof e.data)) { return; } - const {allowedOrigins} = this, + const { allowedOrigins } = this, data = typeof e.data === 'object' ? e.data : JSON.parse(e.data); if (!data || typeof data !== 'object' || data.namespace !== 'svg-edit' || e.source !== this.frame.contentWindow || @@ -329,10 +329,10 @@ class EmbeddedSVGEdit { // Older IE may need a polyfill for addEventListener, but so it would for SVG window.addEventListener('message', getMessageListener(this)); window.addEventListener('keydown', (e) => { - const {type, key} = e; + const { type, key } = e; if (key === 'Backspace') { e.preventDefault(); - const keyboardEvent = new KeyboardEvent(type, {key}); + const keyboardEvent = new KeyboardEvent(type, { key }); that.frame.contentDocument.dispatchEvent(keyboardEvent); } }); @@ -372,8 +372,8 @@ class EmbeddedSVGEdit { // of the current JSON-based communication API (e.g., not passing // callbacks). We might be able to address these shortcomings; see // the todo elsewhere in this file. - const message = {id: callbackID}, - {svgEditor: {canvas: svgCanvas}} = that.frame.contentWindow; + const message = { id: callbackID }, + { svgEditor: { canvas: svgCanvas } } = that.frame.contentWindow; try { message.result = svgCanvas[name](...args); } catch (err) { diff --git a/src/editor/extensions/ext-arrows/ext-arrows.js b/src/editor/extensions/ext-arrows/ext-arrows.js index 79105019..a492bc84 100644 --- a/src/editor/extensions/ext-arrows/ext-arrows.js +++ b/src/editor/extensions/ext-arrows/ext-arrows.js @@ -26,11 +26,11 @@ export default { async init (S) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor); - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const addElem = svgCanvas.addSVGElementFromJson, - {nonce} = S, + { nonce } = S, prefix = 'se_arrow_'; let selElems, arrowprefix, randomizeIds = S.randomize_ids; @@ -64,8 +64,8 @@ export default { arrowprefix = (randomizeIds) ? `${prefix}${nonce}_` : prefix; const pathdata = { - fw: {d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw'}, - bk: {d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk'} + fw: { d: 'm0,0l10,5l-10,5l5,-5l-5,-5z', refx: 8, id: arrowprefix + 'fw' }, + bk: { d: 'm10,0l-10,5l10,5l-5,-5l5,-5z', refx: 2, id: arrowprefix + 'bk' } }; /** @@ -214,14 +214,14 @@ export default { */ function colorChanged (elem) { const color = elem.getAttribute('stroke'); - const mtypes = ['start', 'mid', 'end']; + const mtypes = [ 'start', 'mid', 'end' ]; const defs = svgCanvas.findDefs(); mtypes.forEach(function(type){ const marker = getLinked(elem, 'marker-' + type); if (!marker) { return; } - const curColor = marker.children.getAttribute('fill'); + const curColor = marker.children.getAttribute('fill'); const curD = marker.children.getAttribute('d'); if (curColor === color) { return; } @@ -236,7 +236,7 @@ export default { newMarker = marker; } }); - + if (!newMarker) { // Create a new marker with this color const lastId = marker.id; @@ -290,12 +290,12 @@ export default { }), callback () { $id("arrow_panel").style.display = 'none'; - + // Set ID so it can be translated in locale file $id('arrow_list option').setAttribute('id', 'connector_no_arrow'); }, - async addLangData ({_lang, importLocale}) { - const {langList} = await importLocale(); + async addLangData ({ _lang, importLocale }) { + const { langList } = await importLocale(); return { data: langList }; @@ -304,7 +304,7 @@ export default { // Use this to update the current selected elements selElems = opts.elems; - const markerElems = ['line', 'path', 'polyline', 'polygon']; + const markerElems = [ 'line', 'path', 'polyline', 'polygon' ]; let i = selElems.length; while (i--) { const elem = selElems[i]; diff --git a/src/editor/extensions/ext-arrows/locale/en.js b/src/editor/extensions/ext-arrows/locale/en.js index b5f0a884..d63f7eb6 100644 --- a/src/editor/extensions/ext-arrows/locale/en.js +++ b/src/editor/extensions/ext-arrows/locale/en.js @@ -1,7 +1,7 @@ export default { name: 'Arrows', langList: [ - {id: 'arrow_none', textContent: 'No arrow'} + { id: 'arrow_none', textContent: 'No arrow' } ], contextTools: [ { diff --git a/src/editor/extensions/ext-arrows/locale/fr.js b/src/editor/extensions/ext-arrows/locale/fr.js index ea223018..e8ec3aef 100644 --- a/src/editor/extensions/ext-arrows/locale/fr.js +++ b/src/editor/extensions/ext-arrows/locale/fr.js @@ -1,7 +1,7 @@ export default { name: 'Arrows', langList: [ - {id: 'arrow_none', textContent: 'Sans flèche'} + { id: 'arrow_none', textContent: 'Sans flèche' } ], contextTools: [ { diff --git a/src/editor/extensions/ext-arrows/locale/zh-CN.js b/src/editor/extensions/ext-arrows/locale/zh-CN.js index bbe2e860..47d5e640 100755 --- a/src/editor/extensions/ext-arrows/locale/zh-CN.js +++ b/src/editor/extensions/ext-arrows/locale/zh-CN.js @@ -1,7 +1,7 @@ export default { name: '箭头', langList: [ - {id: 'arrow_none', textContent: '无箭头'} + { id: 'arrow_none', textContent: '无箭头' } ], contextTools: [ { diff --git a/src/editor/extensions/ext-closepath/ext-closepath.js b/src/editor/extensions/ext-closepath/ext-closepath.js index 0e057555..6e61cb1e 100644 --- a/src/editor/extensions/ext-closepath/ext-closepath.js +++ b/src/editor/extensions/ext-closepath/ext-closepath.js @@ -24,10 +24,10 @@ const loadExtensionTranslation = async function (lang) { // The button toggles whether the path is open or closed export default { name: 'closepath', - async init ({_importLocale}) { + async init ({ _importLocale }) { const svgEditor = this; - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); let selElems; const updateButton = function (path) { diff --git a/src/editor/extensions/ext-connector/ext-connector.js b/src/editor/extensions/ext-connector/ext-connector.js index ce9f841d..93675bdf 100644 --- a/src/editor/extensions/ext-connector/ext-connector.js +++ b/src/editor/extensions/ext-connector/ext-connector.js @@ -202,7 +202,7 @@ export default { let addThis; // Grab the ends const parts = []; - ['start', 'end'].forEach(function (pos, i) { + [ 'start', 'end' ].forEach(function (pos, i) { const key = 'c_' + pos; let part = dataStorage.get(ethis, key); if (part === null || part === undefined) { // Does this ever return nullish values? @@ -210,7 +210,7 @@ export default { ethis.attributes['se:connector'].value.split(' ')[i] ); dataStorage.put(ethis, 'c_' + pos, part.id); - dataStorage.put(ethis, pos + '_bb', svgCanvas.getStrokedBBox([part])); + dataStorage.put(ethis, pos + '_bb', svgCanvas.getStrokedBBox([ part ])); } else part = document.getElementById(part); parts.push(part); }, ethis); @@ -233,7 +233,7 @@ export default { continue; } if (elems.includes(cElem) || addThis) { - const bb = svgCanvas.getStrokedBBox([cElem]); + const bb = svgCanvas.getStrokedBBox([ cElem ]); connections.push({ elem: cElem, connector: ethis, @@ -268,7 +268,7 @@ export default { const pre = conn.is_start ? 'start' : 'end'; // Update bbox for this element - const bb = svgCanvas.getStrokedBBox([elem]); + const bb = svgCanvas.getStrokedBBox([ elem ]); bb.x = conn.start_x; bb.y = conn.start_y; dataStorage.put(line, pre + '_bb', bb); @@ -338,8 +338,8 @@ export default { if (conn) { curthis.setAttribute('class', 'se_connector'); const connData = conn.split(' '); - const sbb = svgCanvas.getStrokedBBox([getElem(connData[0])]); - const ebb = svgCanvas.getStrokedBBox([getElem(connData[1])]); + const sbb = svgCanvas.getStrokedBBox([ getElem(connData[0]) ]); + const ebb = svgCanvas.getStrokedBBox([ getElem(connData[1]) ]); dataStorage.put(curthis, 'c_start', connData[0]); dataStorage.put(curthis, 'c_end', connData[1]); dataStorage.put(curthis, 'start_bb', sbb); @@ -393,7 +393,7 @@ export default { startElem = fo ? fo : mouseTarget; // Get center of source element - const bb = svgCanvas.getStrokedBBox([startElem]); + const bb = svgCanvas.getStrokedBBox([ startElem ]); const x = bb.x + bb.width / 2; const y = bb.y + bb.height / 2; @@ -453,7 +453,7 @@ export default { // Look for selected connector elements if (elem && dataStorage.has(elem, 'c_start')) { // Remove the "translate" transform given to move - svgCanvas.removeFromSelection([elem]); + svgCanvas.removeFromSelection([ elem ]); svgCanvas.getTransformList(elem).clear(); } } @@ -520,7 +520,7 @@ export default { }; } - const bb = svgCanvas.getStrokedBBox([endElem]); + const bb = svgCanvas.getStrokedBBox([ endElem ]); const pt = getBBintersect(startX, startY, bb, getOffset('start', curLine)); setPoint(curLine, 'end', pt.x, pt.y, true); @@ -531,7 +531,7 @@ export default { curLine.setAttributeNS(seNs, 'se:connector', connStr); curLine.setAttribute('class', 'se_connector'); curLine.setAttribute('opacity', 1); - svgCanvas.addToSelection([curLine]); + svgCanvas.addToSelection([ curLine ]); svgCanvas.moveToBottomSelectedElement(); selManager.requestSelector(curLine).showGrips(false); started = false; @@ -618,14 +618,14 @@ export default { elem.remove(); svgCanvas.clearSelection(); pline.id = id; - svgCanvas.addToSelection([pline]); + svgCanvas.addToSelection([ pline ]); elem = pline; } } // Update line if it's a connector if (elem.getAttribute('class') === 'se_connector') { const start = getElem(dataStorage.get(elem, 'c_start')); - updateConnectors([start]); + updateConnectors([ start ]); } else { updateConnectors(); } diff --git a/src/editor/extensions/ext-connector/locale/en.js b/src/editor/extensions/ext-connector/locale/en.js index beef9a7f..f360d7a8 100644 --- a/src/editor/extensions/ext-connector/locale/en.js +++ b/src/editor/extensions/ext-connector/locale/en.js @@ -1,7 +1,7 @@ export default { name: 'Connector', langList: [ - {id: 'mode_connect', title: 'Connect two objects'} + { id: 'mode_connect', title: 'Connect two objects' } ], buttons: [ { diff --git a/src/editor/extensions/ext-connector/locale/fr.js b/src/editor/extensions/ext-connector/locale/fr.js index 173c7034..f38172c2 100644 --- a/src/editor/extensions/ext-connector/locale/fr.js +++ b/src/editor/extensions/ext-connector/locale/fr.js @@ -1,7 +1,7 @@ export default { name: 'Connector', langList: [ - {id: 'mode_connect', title: 'Connecter deux objets'} + { id: 'mode_connect', title: 'Connecter deux objets' } ], buttons: [ { diff --git a/src/editor/extensions/ext-connector/locale/zh-CN.js b/src/editor/extensions/ext-connector/locale/zh-CN.js index e5749d17..5de0be8c 100755 --- a/src/editor/extensions/ext-connector/locale/zh-CN.js +++ b/src/editor/extensions/ext-connector/locale/zh-CN.js @@ -1,7 +1,7 @@ export default { name: '连接器', langList: [ - {id: 'mode_connect', title: '连接两个对象'} + { id: 'mode_connect', title: '连接两个对象' } ], buttons: [ { diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index a2ab0b0c..2cde4162 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js @@ -53,7 +53,7 @@ export default { // enable-eye-dropper if one element is selected let elem = null; if (!opts.multiselected && opts.elems[0] && - !['svg', 'g', 'use'].includes(opts.elems[0].nodeName) + ![ 'svg', 'g', 'use' ].includes(opts.elems[0].nodeName) ) { elem = opts.elems[0]; tool.classList.remove('disabled'); @@ -94,7 +94,7 @@ export default { if (mode === 'eyedropper') { const e = opts.event; const { target } = e; - if (!['svg', 'g', 'use'].includes(target.nodeName)) { + if (![ 'svg', 'g', 'use' ].includes(target.nodeName)) { const changes = {}; const change = function (elem, attrname, newvalue) { diff --git a/src/editor/extensions/ext-foreignobject/ext-foreignobject.js b/src/editor/extensions/ext-foreignobject/ext-foreignobject.js index 2510b252..f16a0c1b 100644 --- a/src/editor/extensions/ext-foreignobject/ext-foreignobject.js +++ b/src/editor/extensions/ext-foreignobject/ext-foreignobject.js @@ -24,9 +24,9 @@ export default { name: 'foreignobject', async init (S) { const svgEditor = this; - const {text2xml, NS} = S; - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { text2xml, NS } = S; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const // {svgcontent} = S, // addElem = svgCanvas.addSVGElementFromJson, @@ -49,7 +49,7 @@ export default { if (!fcRules) { fcRules = document.createElement('style'); fcRules.setAttribute('id', 'fc_rules'); - document.getElementsByTagName("head")[0].appendChild(fcRules); + document.getElementsByTagName("head")[0].appendChild(fcRules); } fcRules.textContent = !on ? '' : ' #tool_topath { display: none !important; }'; $id('foreignObject_panel').style.display = (on) ? 'block' : 'none'; @@ -85,11 +85,11 @@ export default { // run it through our sanitizer to remove anything we do not support svgCanvas.sanitizeSvg(newDoc.documentElement); elt.replaceWith(svgdoc.importNode(newDoc.documentElement.firstChild, true)); - svgCanvas.call('changed', [elt]); + svgCanvas.call('changed', [ elt ]); svgCanvas.clearSelection(); } catch (e) { // Todo: Surface error to user - console.log(e); + console.log(e); return false; } @@ -124,7 +124,7 @@ export default { svgCanvas.call('changed', selElems); } - const buttons = [{ + const buttons = [ { id: 'tool_foreign', icon: 'foreignobject-tool.png', type: 'mode', @@ -143,7 +143,7 @@ export default { showForeignEditor(); } } - }]; + } ]; const contextTools = [ { @@ -279,7 +279,7 @@ export default { height: newFO.getAttribute('height'), }; const keep = (attrs.width !== '0' || attrs.height !== '0'); - svgCanvas.addToSelection([newFO], true); + svgCanvas.addToSelection([ newFO ], true); return { keep, diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js index c47944bd..0291f4e7 100644 --- a/src/editor/extensions/ext-grid/ext-grid.js +++ b/src/editor/extensions/ext-grid/ext-grid.js @@ -22,17 +22,17 @@ const loadExtensionTranslation = async function (lang) { export default { name: 'grid', - async init ({NS, getTypeMap}) { + async init ({ NS, getTypeMap }) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const svgdoc = document.getElementById('svgcanvas').ownerDocument; - const {assignAttributes} = svgCanvas; + const { assignAttributes } = svgCanvas; const hcanvas = document.createElement('canvas'); const canvBG = $id('canvasBackground'); const units = getTypeMap(); // Assumes prior `init()` call on `units.js` module - const intervals = [0.01, 0.1, 1, 10, 100, 1000]; + const intervals = [ 0.01, 0.1, 1, 10, 100, 1000 ]; let showGrid = svgEditor.configObj.curConfig.showGrid || false; hcanvas.style.display = 'none'; @@ -166,7 +166,7 @@ export default { $id('view_grid').addEventListener("click", () => { svgEditor.configObj.curConfig.showGrid = showGrid = !showGrid; gridUpdate(); - }); + }); if (showGrid) { gridUpdate(); diff --git a/src/editor/extensions/ext-helloworld/ext-helloworld.js b/src/editor/extensions/ext-helloworld/ext-helloworld.js index dff5a96c..c7b1b73b 100644 --- a/src/editor/extensions/ext-helloworld/ext-helloworld.js +++ b/src/editor/extensions/ext-helloworld/ext-helloworld.js @@ -28,13 +28,13 @@ const loadExtensionTranslation = async function (lang) { export default { name: 'helloworld', - async init ({_importLocale}) { + async init ({ _importLocale }) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); - const {svgCanvas} = svgEditor; + const { svgCanvas } = svgEditor; return { name: strings.name, - events: [{ + events: [ { // Must match the icon ID in helloworld-icon.xml id: 'hello_world', // Tooltip text @@ -45,7 +45,7 @@ export default { // automatically be de-pressed. svgCanvas.setMode('hello_world'); } - }], + } ], // This is triggered when the main mouse button is pressed down // on the editor canvas (not the tool panels) mouseDown () { @@ -53,7 +53,7 @@ export default { if (svgCanvas.getMode() === 'hello_world') { // The returned object must include "started" with // a value of true in order for mouseUp to be triggered - return {started: true}; + return { started: true }; } return undefined; }, @@ -70,16 +70,16 @@ export default { const y = opts.mouse_y / zoom; // We do our own formatting - let {text} = strings; + let { text } = strings; [ - ['x', x], - ['y', y] - ].forEach(([prop, val]) => { + [ 'x', x ], + [ 'y', y ] + ].forEach(([ prop, val ]) => { text = text.replace('{' + prop + '}', val); }); // Show the text using the custom alert function - alert(text); + alert(text); } } }; diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index bdf0fad2..597c9d82 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -65,7 +65,7 @@ export default { } }); svgCanvas.clearSelection(); - svgCanvas.addToSelection([newImage]); + svgCanvas.addToSelection([ newImage ]); svgCanvas.setImageURL(url); }; @@ -113,7 +113,7 @@ export default { * @returns {void} */ async function onMessage({ origin, data: response }) { - if (!response || !['string', 'object'].includes(typeof response)) { + if (!response || ![ 'string', 'object' ].includes(typeof response)) { // Do nothing return; } @@ -250,7 +250,7 @@ export default { break; case 'm': { // Import multiple - multiArr.push([(svgStr ? 'svg' : 'img'), response]); + multiArr.push([ (svgStr ? 'svg' : 'img'), response ]); curMeta = pending[id]; let title; if (svgStr) { diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js index 0aaccef9..0cd810b4 100644 --- a/src/editor/extensions/ext-imagelib/openclipart.js +++ b/src/editor/extensions/ext-imagelib/openclipart.js @@ -1,7 +1,7 @@ /* eslint-disable node/no-unpublished-import */ -import {jml, body, nbsp} from 'jamilih'; +import { jml, body, nbsp } from 'jamilih'; import $ from 'query-result'; -import {manipulation} from 'qr-manipulation'; +import { manipulation } from 'qr-manipulation'; manipulation($, jml); @@ -20,16 +20,16 @@ async function processResults (url) { * @returns {external:JamilihArray} */ function queryLink (query) { - return ['a', { + return [ 'a', { href: jsVoid, - dataset: {value: query}, - $on: {click (e) { + dataset: { value: query }, + $on: { click (e) { e.preventDefault(); - const {value} = this.dataset; + const { value } = this.dataset; $('#query')[0].$set(value); $('#openclipart')[0].$submit(); - }} - }, [query]]; + } } + }, [ query ] ]; } const r = await fetch(url); @@ -38,14 +38,14 @@ async function processResults (url) { if (!json || json.msg !== 'success') { // Todo: This could use a generic alert library instead - alert('There was a problem downloading the results'); + alert('There was a problem downloading the results'); return; } - const {payload, info: { + const { payload, info: { results: numResults, pages, current_page: currentPage - }} = json; + } } = json; // $('#page')[0].value = currentPage; // $('#page')[0].max = pages; @@ -60,21 +60,21 @@ async function processResults (url) { // - `svg`'s: `png_thumb`, `png_full_lossy`, `png_2400px` const semiColonSep = '; ' + nbsp; $('#results').jml('div', [ - ['span', [ + [ 'span', [ 'Number of results: ', numResults - ]], + ] ], semiColonSep, - ['span', [ + [ 'span', [ 'page ', currentPage, ' out of ', pages - ]], + ] ], ...payload.map(({ title, description, id, uploader, created, - svg: {url: svgURL}, + svg: { url: svgURL }, detail_link: detailLink, tags_array: tagsArray, downloaded_by: downloadedBy, @@ -82,11 +82,11 @@ async function processResults (url) { }) => { const imgHW = '100px'; const colonSep = ': ' + nbsp; - return ['div', [ - ['button', {style: 'margin-right: 8px; border: 2px solid black;', dataset: {id, value: svgURL}, $on: { + return [ 'div', [ + [ 'button', { style: 'margin-right: 8px; border: 2px solid black;', dataset: { id, value: svgURL }, $on: { async click (e) { e.preventDefault(); - const {value: svgurl} = this.dataset; + const { value: svgurl } = this.dataset; // console.log('this', id, svgurl); const post = (message) => { // Todo: Make origin customizable as set by opening window @@ -109,73 +109,73 @@ async function processResults (url) { data: svg }); } - }}, [ + } }, [ // If we wanted interactive versions despite security risk: // ['object', {data: svgURL, type: 'image/svg+xml'}] - ['img', {src: svgURL, style: `width: ${imgHW}; height: ${imgHW};`}] - ]], - ['b', [title]], + [ 'img', { src: svgURL, style: `width: ${imgHW}; height: ${imgHW};` } ] + ] ], + [ 'b', [ title ] ], ' ', - ['i', [description]], + [ 'i', [ description ] ], ' ', - ['span', [ + [ 'span', [ '(ID: ', - ['a', { + [ 'a', { href: jsVoid, - dataset: {value: id}, + dataset: { value: id }, $on: { click (e) { e.preventDefault(); - const {value} = this.dataset; + const { value } = this.dataset; $('#byids')[0].$set(value); $('#openclipart')[0].$submit(); } } - }, [id]], + }, [ id ] ], ')' - ]], + ] ], ' ', - ['i', [ - ['a', { + [ 'i', [ + [ 'a', { href: detailLink, target: '_blank' - }, ['Details']] - ]], - ['br'], - ['span', [ - ['u', ['Uploaded by']], colonSep, + }, [ 'Details' ] ] + ] ], + [ 'br' ], + [ 'span', [ + [ 'u', [ 'Uploaded by' ] ], colonSep, queryLink(uploader), semiColonSep - ]], - ['span', [ - ['u', ['Download count']], colonSep, + ] ], + [ 'span', [ + [ 'u', [ 'Download count' ] ], colonSep, downloadedBy, semiColonSep - ]], - ['span', [ - ['u', ['Times used as favorite']], colonSep, + ] ], + [ 'span', [ + [ 'u', [ 'Times used as favorite' ] ], colonSep, totalFavorites, semiColonSep - ]], - ['span', [ - ['u', ['Created date']], colonSep, + ] ], + [ 'span', [ + [ 'u', [ 'Created date' ] ], colonSep, created - ]], - ['br'], - ['u', ['Tags']], colonSep, + ] ], + [ 'br' ], + [ 'u', [ 'Tags' ] ], colonSep, ...tagsArray.map((tag) => { - return ['span', [ + return [ 'span', [ ' ', queryLink(tag) - ]]; + ] ]; }) - ]]; + ] ]; }), - ['br'], ['br'], + [ 'br' ], [ 'br' ], (currentPage === 1 || pages <= 2 ? '' - : ['span', [ - ['a', { + : [ 'span', [ + [ 'a', { href: jsVoid, $on: { click (e) { @@ -184,14 +184,14 @@ async function processResults (url) { $('#openclipart')[0].$submit(); } } - }, ['First']], + }, [ 'First' ] ], ' ' - ]] + ] ] ), (currentPage === 1 ? '' - : ['span', [ - ['a', { + : [ 'span', [ + [ 'a', { href: jsVoid, $on: { click (e) { @@ -200,14 +200,14 @@ async function processResults (url) { $('#openclipart')[0].$submit(); } } - }, ['Prev']], + }, [ 'Prev' ] ], ' ' - ]] + ] ] ), (currentPage === pages ? '' - : ['span', [ - ['a', { + : [ 'span', [ + [ 'a', { href: jsVoid, $on: { click (e) { @@ -216,14 +216,14 @@ async function processResults (url) { $('#openclipart')[0].$submit(); } } - }, ['Next']], + }, [ 'Next' ] ], ' ' - ]] + ] ] ), (currentPage === pages || pages <= 2 ? '' - : ['span', [ - ['a', { + : [ 'span', [ + [ 'a', { href: jsVoid, $on: { click (e) { @@ -232,20 +232,20 @@ async function processResults (url) { $('#openclipart')[0].$submit(); } } - }, ['Last']], + }, [ 'Last' ] ], ' ' - ]] + ] ] ) ]); } jml('div', [ - ['style', [ + [ 'style', [ `.control { padding-top: 10px; }` - ]], - ['form', { + ] ], + [ 'form', { id: 'openclipart', $custom: { async $submit () { @@ -253,7 +253,7 @@ jml('div', [ [ 'query', 'sort', 'amount', 'page', 'byids' ].forEach((prop) => { - const {value} = $('#' + prop)[0]; + const { value } = $('#' + prop)[0]; if (value) { url.searchParams.set(prop, value); } @@ -269,12 +269,12 @@ jml('div', [ } }, [ // Todo: i18nize - ['fieldset', [ - ['legend', ['Search terms']], - ['div', {class: 'control'}, [ - ['label', [ + [ 'fieldset', [ + [ 'legend', [ 'Search terms' ] ], + [ 'div', { class: 'control' }, [ + [ 'label', [ 'Query (Title, description, uploader, or tag): ', - ['input', {id: 'query', name: 'query', placeholder: 'cat', $custom: { + [ 'input', { id: 'query', name: 'query', placeholder: 'cat', $custom: { $set (value) { $('#byids')[0].value = ''; this.value = value; @@ -283,16 +283,16 @@ jml('div', [ change () { $('#byids')[0].value = ''; } - }}] - ]] - ]], - ['br'], + } } ] + ] ] + ] ], + [ 'br' ], ' OR ', - ['br'], - ['div', {class: 'control'}, [ - ['label', [ + [ 'br' ], + [ 'div', { class: 'control' }, [ + [ 'label', [ 'IDs (single or comma-separated): ', - ['input', {id: 'byids', name: 'ids', placeholder: '271380, 265741', $custom: { + [ 'input', { id: 'byids', name: 'ids', placeholder: '271380, 265741', $custom: { $set (value) { $('#query')[0].value = ''; this.value = value; @@ -301,47 +301,47 @@ jml('div', [ change () { $('#query')[0].value = ''; } - }}] - ]] - ]] - ]], - ['fieldset', [ - ['legend', ['Configuring results']], - ['div', {class: 'control'}, [ - ['label', [ + } } ] + ] ] + ] ] + ] ], + [ 'fieldset', [ + [ 'legend', [ 'Configuring results' ] ], + [ 'div', { class: 'control' }, [ + [ 'label', [ 'Sort by: ', - ['select', {id: 'sort'}, [ + [ 'select', { id: 'sort' }, [ // Todo: i18nize first values - ['Date', 'date'], - ['Downloads', 'downloads'], - ['Favorited', 'favorites'] - ].map(([text, value = text]) => { - return ['option', {value}, [text]]; - })] - ]] - ]], - ['div', {class: 'control'}, [ - ['label', [ + [ 'Date', 'date' ], + [ 'Downloads', 'downloads' ], + [ 'Favorited', 'favorites' ] + ].map(([ text, value = text ]) => { + return [ 'option', { value }, [ text ] ]; + }) ] + ] ] + ] ], + [ 'div', { class: 'control' }, [ + [ 'label', [ 'Results per page: ', - ['input', { + [ 'input', { id: 'amount', name: 'amount', value: 10, - type: 'number', min: 1, max: 200, step: 1, pattern: '\\d+'}] - ]] - ]], - ['div', {class: 'control'}, [ - ['label', [ + type: 'number', min: 1, max: 200, step: 1, pattern: '\\d+' } ] + ] ] + ] ], + [ 'div', { class: 'control' }, [ + [ 'label', [ 'Page number: ', - ['input', { + [ 'input', { // max: 1, // We'll change this based on available results id: 'page', name: 'page', value: 1, style: 'width: 40px;', type: 'number', min: 1, step: 1, pattern: '\\d+' - }] - ]] - ]] - ]], - ['div', {class: 'control'}, [ - ['input', {type: 'submit'}] - ]] - ]], - ['div', {id: 'results'}] + } ] + ] ] + ] ] + ] ], + [ 'div', { class: 'control' }, [ + [ 'input', { type: 'submit' } ] + ] ] + ] ], + [ 'div', { id: 'results' } ] ], body); diff --git a/src/editor/extensions/ext-markers/ext-markers.js b/src/editor/extensions/ext-markers/ext-markers.js index c944cc19..c4148a7f 100644 --- a/src/editor/extensions/ext-markers/ext-markers.js +++ b/src/editor/extensions/ext-markers/ext-markers.js @@ -47,12 +47,12 @@ export default { async init (S) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); - const {$} = S; - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { $ } = S; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const // {svgcontent} = S, addElem = svgCanvas.addSVGElementFromJson; - const mtypes = ['start', 'mid', 'end']; + const mtypes = [ 'start', 'mid', 'end' ]; const markerPrefix = 'se_marker_'; const idPrefix = 'mkr_'; @@ -64,35 +64,35 @@ export default { const markerTypes = { nomarker: {}, leftarrow: - {element: 'path', attr: {d: 'M0,50 L100,90 L70,50 L100,10 Z'}}, + { element: 'path', attr: { d: 'M0,50 L100,90 L70,50 L100,10 Z' } }, rightarrow: - {element: 'path', attr: {d: 'M100,50 L0,90 L30,50 L0,10 Z'}}, + { element: 'path', attr: { d: 'M100,50 L0,90 L30,50 L0,10 Z' } }, textmarker: - {element: 'text', attr: { + { element: 'text', attr: { x: 0, y: 0, 'stroke-width': 0, stroke: 'none', 'font-size': 75, 'font-family': 'serif', 'text-anchor': 'left', 'xml:space': 'preserve' - }}, + } }, forwardslash: - {element: 'path', attr: {d: 'M30,100 L70,0'}}, + { element: 'path', attr: { d: 'M30,100 L70,0' } }, reverseslash: - {element: 'path', attr: {d: 'M30,0 L70,100'}}, + { element: 'path', attr: { d: 'M30,0 L70,100' } }, verticalslash: - {element: 'path', attr: {d: 'M50,0 L50,100'}}, + { element: 'path', attr: { d: 'M50,0 L50,100' } }, box: - {element: 'path', attr: {d: 'M20,20 L20,80 L80,80 L80,20 Z'}}, + { element: 'path', attr: { d: 'M20,20 L20,80 L80,80 L80,20 Z' } }, star: - {element: 'path', attr: {d: 'M10,30 L90,30 L20,90 L50,10 L80,90 Z'}}, + { element: 'path', attr: { d: 'M10,30 L90,30 L20,90 L50,10 L80,90 Z' } }, xmark: - {element: 'path', attr: {d: 'M20,80 L80,20 M80,80 L20,20'}}, + { element: 'path', attr: { d: 'M20,80 L80,20 M80,80 L20,20' } }, triangle: - {element: 'path', attr: {d: 'M10,80 L50,20 L80,80 Z'}}, + { element: 'path', attr: { d: 'M10,80 L50,20 L80,80 Z' } }, mcircle: - {element: 'circle', attr: {r: 30, cx: 50, cy: 50}} + { element: 'circle', attr: { r: 30, cx: 50, cy: 50 } } }; // duplicate shapes to support unfilled (open) marker types with an _o suffix - ['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach((v) => { + [ 'leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle' ].forEach((v) => { markerTypes[v + '_o'] = markerTypes[v]; }); @@ -288,7 +288,7 @@ export default { const x2 = Number(elem.getAttribute('x2')); const y1 = Number(elem.getAttribute('y1')); const y2 = Number(elem.getAttribute('y2')); - const {id} = elem; + const { id } = elem; const midPt = (' ' + ((x1 + x2) / 2) + ',' + ((y1 + y2) / 2) + ' '); const pline = addElem({ @@ -315,7 +315,7 @@ export default { elem.remove(); svgCanvas.clearSelection(); pline.id = id; - svgCanvas.addToSelection([pline]); + svgCanvas.addToSelection([ pline ]); S.addCommandToHistory(batchCmd); return pline; } @@ -325,7 +325,7 @@ export default { * @returns {void} */ function setMarker () { - const poslist = {start_marker: 'start', mid_marker: 'mid', end_marker: 'end'}; + const poslist = { start_marker: 'start', mid_marker: 'mid', end_marker: 'end' }; const pos = poslist[this.id]; const markerName = 'marker-' + pos; const el = selElems[0]; @@ -471,7 +471,7 @@ export default { * @returns {string} */ function getTitle (id) { - const {langList} = strings; + const { langList } = strings; const item = langList.find((itm) => { return itm.id === id; }); @@ -519,7 +519,7 @@ export default { icon: id + '.svg', title, type: 'context', - events: {click: setArrowFromButton}, + events: { click: setArrowFromButton }, panel: 'marker_panel', list: listname, isDefault: def @@ -536,38 +536,38 @@ export default { panel: 'marker_panel', id: 'start_marker', size: 3, - events: {change: setMarker} + events: { change: setMarker } }, { type: 'button-select', panel: 'marker_panel', id: 'start_marker_list', colnum: 3, - events: {change: setArrowFromButton} + events: { change: setArrowFromButton } }, { type: 'input', panel: 'marker_panel', id: 'mid_marker', defval: '', size: 3, - events: {change: setMarker} + events: { change: setMarker } }, { type: 'button-select', panel: 'marker_panel', id: 'mid_marker_list', colnum: 3, - events: {change: setArrowFromButton} + events: { change: setArrowFromButton } }, { type: 'input', panel: 'marker_panel', id: 'end_marker', size: 3, - events: {change: setMarker} + events: { change: setMarker } }, { type: 'button-select', panel: 'marker_panel', id: 'end_marker_list', colnum: 3, - events: {change: setArrowFromButton} + events: { change: setArrowFromButton } } ]; @@ -580,15 +580,15 @@ export default { $id("marker_panel").style.display = 'none'; } }, - /* async */ addLangData ({_importLocale, _lang}) { - return {data: strings.langList}; + /* async */ addLangData ({ _importLocale, _lang }) { + return { data: strings.langList }; }, selectedChanged (opts) { // Use this to update the current selected elements // console.log('selectChanged',opts); selElems = opts.elems; - const markerElems = ['line', 'path', 'polyline', 'polygon']; + const markerElems = [ 'line', 'path', 'polyline', 'polygon' ]; let i = selElems.length; while (i--) { diff --git a/src/editor/extensions/ext-markers/locale/en.js b/src/editor/extensions/ext-markers/locale/en.js index 69201e4d..1bb5686b 100644 --- a/src/editor/extensions/ext-markers/locale/en.js +++ b/src/editor/extensions/ext-markers/locale/en.js @@ -1,24 +1,24 @@ export default { name: 'Markers', langList: [ - {id: 'nomarker', title: 'No Marker'}, - {id: 'leftarrow', title: 'Left Arrow'}, - {id: 'rightarrow', title: 'Right Arrow'}, - {id: 'textmarker', title: 'Text Marker'}, - {id: 'forwardslash', title: 'Forward Slash'}, - {id: 'reverseslash', title: 'Reverse Slash'}, - {id: 'verticalslash', title: 'Vertical Slash'}, - {id: 'box', title: 'Box'}, - {id: 'star', title: 'Star'}, - {id: 'xmark', title: 'X'}, - {id: 'triangle', title: 'Triangle'}, - {id: 'mcircle', title: 'Circle'}, - {id: 'leftarrow_o', title: 'Open Left Arrow'}, - {id: 'rightarrow_o', title: 'Open Right Arrow'}, - {id: 'box_o', title: 'Open Box'}, - {id: 'star_o', title: 'Open Star'}, - {id: 'triangle_o', title: 'Open Triangle'}, - {id: 'mcircle_o', title: 'Open Circle'} + { id: 'nomarker', title: 'No Marker' }, + { id: 'leftarrow', title: 'Left Arrow' }, + { id: 'rightarrow', title: 'Right Arrow' }, + { id: 'textmarker', title: 'Text Marker' }, + { id: 'forwardslash', title: 'Forward Slash' }, + { id: 'reverseslash', title: 'Reverse Slash' }, + { id: 'verticalslash', title: 'Vertical Slash' }, + { id: 'box', title: 'Box' }, + { id: 'star', title: 'Star' }, + { id: 'xmark', title: 'X' }, + { id: 'triangle', title: 'Triangle' }, + { id: 'mcircle', title: 'Circle' }, + { id: 'leftarrow_o', title: 'Open Left Arrow' }, + { id: 'rightarrow_o', title: 'Open Right Arrow' }, + { id: 'box_o', title: 'Open Box' }, + { id: 'star_o', title: 'Open Star' }, + { id: 'triangle_o', title: 'Open Triangle' }, + { id: 'mcircle_o', title: 'Open Circle' } ], contextTools: [ { diff --git a/src/editor/extensions/ext-markers/locale/zh-CN.js b/src/editor/extensions/ext-markers/locale/zh-CN.js index 1efe8a0a..9b614ba5 100755 --- a/src/editor/extensions/ext-markers/locale/zh-CN.js +++ b/src/editor/extensions/ext-markers/locale/zh-CN.js @@ -1,24 +1,24 @@ export default { name: '标记', langList: [ - {id: 'nomarker', title: '无标记'}, - {id: 'leftarrow', title: '左箭头'}, - {id: 'rightarrow', title: '右箭头'}, - {id: 'textmarker', title: '文本'}, - {id: 'forwardslash', title: '斜杠'}, - {id: 'reverseslash', title: '反斜杠'}, - {id: 'verticalslash', title: '垂直线'}, - {id: 'box', title: '方块'}, - {id: 'star', title: '星形'}, - {id: 'xmark', title: 'X'}, - {id: 'triangle', title: '三角形'}, - {id: 'mcircle', title: '圆形'}, - {id: 'leftarrow_o', title: '左箭头(空心)'}, - {id: 'rightarrow_o', title: '右箭头(空心)'}, - {id: 'box_o', title: '方块(空心)'}, - {id: 'star_o', title: '星形(空心)'}, - {id: 'triangle_o', title: '三角形(空心)'}, - {id: 'mcircle_o', title: '圆形(空心)'} + { id: 'nomarker', title: '无标记' }, + { id: 'leftarrow', title: '左箭头' }, + { id: 'rightarrow', title: '右箭头' }, + { id: 'textmarker', title: '文本' }, + { id: 'forwardslash', title: '斜杠' }, + { id: 'reverseslash', title: '反斜杠' }, + { id: 'verticalslash', title: '垂直线' }, + { id: 'box', title: '方块' }, + { id: 'star', title: '星形' }, + { id: 'xmark', title: 'X' }, + { id: 'triangle', title: '三角形' }, + { id: 'mcircle', title: '圆形' }, + { id: 'leftarrow_o', title: '左箭头(空心)' }, + { id: 'rightarrow_o', title: '右箭头(空心)' }, + { id: 'box_o', title: '方块(空心)' }, + { id: 'star_o', title: '星形(空心)' }, + { id: 'triangle_o', title: '三角形(空心)' }, + { id: 'mcircle_o', title: '圆形(空心)' } ], contextTools: [ { diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js index 84c95b3e..f5f891a3 100644 --- a/src/editor/extensions/ext-mathjax/ext-mathjax.js +++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js @@ -23,11 +23,11 @@ const loadExtensionTranslation = async function (lang) { export default { name: 'mathjax', - async init ({$}) { + async init ({ $ }) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; // Configuration of the MathJax extention. @@ -57,7 +57,7 @@ export default { // mathjaxSrc = 'http://cdn.mathjax.org/mathjax/latest/MathJax.js', // Had been on https://c328740.ssl.cf1.rackcdn.com/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js // Obtained Text-AMS-MML_SVG.js from https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.3/config/TeX-AMS-MML_SVG.js - {uiStrings} = svgEditor; + { uiStrings } = svgEditor; let math, locationX, @@ -86,7 +86,7 @@ export default { const code = $id('mathjax_code_textarea').value; // displaystyle to force MathJax NOT to use the inline style. Because it is // less fancy! - MathJax.Hub.queue.Push(['Text', math, '\\displaystyle{' + code + '}']); + MathJax.Hub.queue.Push([ 'Text', math, '\\displaystyle{' + code + '}' ]); /* * The MathJax library doesn't want to bloat your webpage so it creates @@ -134,7 +134,7 @@ export default { ); } - const buttons = [{ + const buttons = [ { id: 'tool_mathjax', type: 'mode', icon: 'mathjax.png', @@ -167,7 +167,7 @@ export default { '' + '' + '' + - ''; + ''; $id('svg_prefs').parentNode.insertBefore(div, $id('svg_prefs').nextSibling); div.style.display = 'none'; // Add functionality and picture to cancel button. @@ -191,19 +191,19 @@ export default { // When MathJax is loaded get the div where the math will be rendered. MathJax.Hub.queue.Push(function () { math = MathJax.Hub.getAllJax('#mathjax_creator')[0]; - console.log(math); + console.log(math); mathjaxLoaded = true; - console.log('MathJax Loaded'); + console.log('MathJax Loaded'); }); } catch (e) { - console.log('Failed loading MathJax.'); + console.log('Failed loading MathJax.'); // eslint-disable-next-line no-alert alert('Failed loading MathJax. You will not be able to change the mathematics.'); } } } } - }]; + } ]; return { name: strings.name, @@ -214,7 +214,7 @@ export default { mouseDown () { if (svgCanvas.getMode() === 'mathjax') { - return {started: true}; + return { started: true }; } return undefined; }, @@ -227,7 +227,7 @@ export default { locationY = opts.mouse_y / zoom; $id("mathjax").style.display = 'block'; - return {started: false}; // Otherwise the last selected object dissapears. + return { started: false }; // Otherwise the last selected object dissapears. } return undefined; }, diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index b0059229..b856d2fe 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/src/editor/extensions/ext-opensave/ext-opensave.js @@ -18,7 +18,7 @@ export default { name: 'opensave', - init ({encode64}) { + init ({ encode64 }) { const svgEditor = this; svgEditor.setCustomHandlers({ @@ -44,7 +44,7 @@ export default { const done = this.configObj.pref('save_notice_done'); if (done !== 'all') { - const note = svgEditor.i18next.t('notification.saveFromBrowser', { type: 'SVG'}); + const note = svgEditor.i18next.t('notification.saveFromBrowser', { type: 'SVG' }); this.configObj.pref('save_notice_done', 'all'); if (done !== 'part') { diff --git a/src/editor/extensions/ext-overview_window/ext-overview_window.js b/src/editor/extensions/ext-overview_window/ext-overview_window.js index 2dd0791c..4c10a760 100644 --- a/src/editor/extensions/ext-overview_window/ext-overview_window.js +++ b/src/editor/extensions/ext-overview_window/ext-overview_window.js @@ -11,9 +11,9 @@ import { dragmove } from '../../../editor/dragmove/dragmove.js'; export default { name: 'overview_window', - init ({_$, isChrome}) { + init ({ _$, isChrome }) { const svgEditor = this; - const {$id} = svgEditor.svgCanvas; + const { $id } = svgEditor.svgCanvas; const overviewWindowGlobals = {}; // Disabled in Chrome 48-, see https://github.com/SVG-Edit/svgedit/issues/26 and // https://code.google.com/p/chromium/issues/detail?id=565120. diff --git a/src/editor/extensions/ext-placemark/ext-placemark.js b/src/editor/extensions/ext-placemark/ext-placemark.js index b5ca5295..1be71c58 100644 --- a/src/editor/extensions/ext-placemark/ext-placemark.js +++ b/src/editor/extensions/ext-placemark/ext-placemark.js @@ -23,8 +23,8 @@ export default { name: 'placemark', async init (_S) { const svgEditor = this; - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const addElem = svgCanvas.addSVGElementFromJson; let selElems, @@ -40,29 +40,29 @@ export default { const markerTypes = { nomarker: {}, forwardslash: - {element: 'path', attr: {d: 'M30,100 L70,0'}}, + { element: 'path', attr: { d: 'M30,100 L70,0' } }, reverseslash: - {element: 'path', attr: {d: 'M30,0 L70,100'}}, + { element: 'path', attr: { d: 'M30,0 L70,100' } }, verticalslash: - {element: 'path', attr: {d: 'M50,0 L50,100'}}, + { element: 'path', attr: { d: 'M50,0 L50,100' } }, xmark: - {element: 'path', attr: {d: 'M20,80 L80,20 M80,80 L20,20'}}, + { element: 'path', attr: { d: 'M20,80 L80,20 M80,80 L20,20' } }, leftarrow: - {element: 'path', attr: {d: 'M0,50 L100,90 L70,50 L100,10 Z'}}, + { element: 'path', attr: { d: 'M0,50 L100,90 L70,50 L100,10 Z' } }, rightarrow: - {element: 'path', attr: {d: 'M100,50 L0,90 L30,50 L0,10 Z'}}, + { element: 'path', attr: { d: 'M100,50 L0,90 L30,50 L0,10 Z' } }, box: - {element: 'path', attr: {d: 'M20,20 L20,80 L80,80 L80,20 Z'}}, + { element: 'path', attr: { d: 'M20,20 L20,80 L80,80 L80,20 Z' } }, star: - {element: 'path', attr: {d: 'M10,30 L90,30 L20,90 L50,10 L80,90 Z'}}, + { element: 'path', attr: { d: 'M10,30 L90,30 L20,90 L50,10 L80,90 Z' } }, mcircle: - {element: 'circle', attr: {r: 30, cx: 50, cy: 50}}, + { element: 'circle', attr: { r: 30, cx: 50, cy: 50 } }, triangle: - {element: 'path', attr: {d: 'M10,80 L50,20 L80,80 Z'}} + { element: 'path', attr: { d: 'M10,80 L50,20 L80,80 Z' } } }; // duplicate shapes to support unfilled (open) marker types with an _o suffix - ['leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle'].forEach((v) => { + [ 'leftarrow', 'rightarrow', 'box', 'star', 'mcircle', 'triangle' ].forEach((v) => { markerTypes[v + '_o'] = markerTypes[v]; }); @@ -106,7 +106,7 @@ export default { if (elem && elem.getAttribute('class').includes('placemark')) { var elements = elem.children; Array.prototype.forEach.call(elements, function(i, _){ - const [, , type, n] = i.id.split('_'); + const [ , , type, n ] = i.id.split('_'); if (type === 'txt') { txt.textContent = items[n]; } @@ -127,7 +127,7 @@ export default { if (elem && elem.getAttribute('class').includes('placemark')) { var elements = elem.children; Array.prototype.forEach.call(elements, function(i, _){ - const [, , type] = i.id.split('_'); + const [ , , type ] = i.id.split('_'); if (type === 'txt') { i.style.cssText = 'font-family:' + font + ';font-size:'+fontSize+';'; } @@ -204,14 +204,14 @@ export default { if (marker) { marker.remove(); } el.removeAttribute(markerName); if (val === 'nomarker') { - svgCanvas.call('changed', [el]); + svgCanvas.call('changed', [ el ]); return; } // Set marker on element const id = 'placemark_marker_' + el.id; addMarker(id, val); el.setAttribute(markerName, 'url(#' + id + ')'); - svgCanvas.call('changed', [el]); + svgCanvas.call('changed', [ el ]); } /** @@ -273,7 +273,7 @@ export default { * @returns {string} */ function getTitle (id) { - const {langList} = strings; + const { langList } = strings; const item = langList.find((itm) => { return itm.id === id; }); @@ -294,7 +294,7 @@ export default { icon: 'markers-' + id + '.png', title, type: 'context', - events: {click: setArrowFromButton}, + events: { click: setArrowFromButton }, panel: 'placemark_panel', list: 'placemark_marker', isDefault: id === 'leftarrow' @@ -303,7 +303,7 @@ export default { return buttons; } - const buttons = [{ + const buttons = [ { id: 'tool_placemark', icon: 'placemark.png', type: 'mode', @@ -314,14 +314,14 @@ export default { svgCanvas.setMode('placemark'); } } - }]; + } ]; const contextTools = [ { type: 'button-select', panel: 'placemark_panel', id: 'placemark_marker', colnum: 3, - events: {change: setArrowFromButton} + events: { change: setArrowFromButton } }, { type: 'input', @@ -375,7 +375,7 @@ export default { font = font.join(' '); const x0 = opts.start_x + 10, y0 = opts.start_y + 10; let maxlen = 0; - const children = [{ + const children = [ { element: 'line', attr: { id: id + '_pline_0', @@ -388,7 +388,7 @@ export default { x2: x0, y2: y0 } - }]; + } ]; items.forEach((i, n) => { maxlen = Math.max(maxlen, i.length); children.push({ @@ -418,7 +418,7 @@ export default { 'font-size': fontSize, 'text-anchor': 'start' }, - children: [i] + children: [ i ] }); }); if (items.length > 0) { @@ -479,7 +479,7 @@ export default { newPM.setAttribute('y', y); const elements = newPM.children; Array.prototype.forEach.call(elements, function(i, _){ - const [, , type, n] = i.id.split('_'); + const [ , , type, n ] = i.id.split('_'); const y0 = y + (fontSize + 6) * n, x0 = x + maxlen * fontSize * 0.5 + fontSize; const nx = (x + (x0 - x) / 2 < px) ? x0 : x; @@ -534,7 +534,7 @@ export default { const txt = []; const elements = elem.children; Array.prototype.forEach.call(elements, function(i){ - const [, , type] = i.id.split('_'); + const [ , , type ] = i.id.split('_'); if (type === 'txt') { $id('placemarkFont').value = ( i.getAttribute('font-family') + ' ' + i.getAttribute('font-size') diff --git a/src/editor/extensions/ext-placemark/locale/en.js b/src/editor/extensions/ext-placemark/locale/en.js index 24e53af6..4b7d9277 100644 --- a/src/editor/extensions/ext-placemark/locale/en.js +++ b/src/editor/extensions/ext-placemark/locale/en.js @@ -1,23 +1,23 @@ export default { name: 'placemark', langList: [ - {id: 'nomarker', title: 'No Marker'}, - {id: 'leftarrow', title: 'Left Arrow'}, - {id: 'rightarrow', title: 'Right Arrow'}, - {id: 'forwardslash', title: 'Forward Slash'}, - {id: 'reverseslash', title: 'Reverse Slash'}, - {id: 'verticalslash', title: 'Vertical Slash'}, - {id: 'box', title: 'Box'}, - {id: 'star', title: 'Star'}, - {id: 'xmark', title: 'X'}, - {id: 'triangle', title: 'Triangle'}, - {id: 'mcircle', title: 'Circle'}, - {id: 'leftarrow_o', title: 'Open Left Arrow'}, - {id: 'rightarrow_o', title: 'Open Right Arrow'}, - {id: 'box_o', title: 'Open Box'}, - {id: 'star_o', title: 'Open Star'}, - {id: 'triangle_o', title: 'Open Triangle'}, - {id: 'mcircle_o', title: 'Open Circle'} + { id: 'nomarker', title: 'No Marker' }, + { id: 'leftarrow', title: 'Left Arrow' }, + { id: 'rightarrow', title: 'Right Arrow' }, + { id: 'forwardslash', title: 'Forward Slash' }, + { id: 'reverseslash', title: 'Reverse Slash' }, + { id: 'verticalslash', title: 'Vertical Slash' }, + { id: 'box', title: 'Box' }, + { id: 'star', title: 'Star' }, + { id: 'xmark', title: 'X' }, + { id: 'triangle', title: 'Triangle' }, + { id: 'mcircle', title: 'Circle' }, + { id: 'leftarrow_o', title: 'Open Left Arrow' }, + { id: 'rightarrow_o', title: 'Open Right Arrow' }, + { id: 'box_o', title: 'Open Box' }, + { id: 'star_o', title: 'Open Star' }, + { id: 'triangle_o', title: 'Open Triangle' }, + { id: 'mcircle_o', title: 'Open Circle' } ], buttons: [ { diff --git a/src/editor/extensions/ext-polygon/ext-polygon.js b/src/editor/extensions/ext-polygon/ext-polygon.js index c2324469..fe2ccf9e 100644 --- a/src/editor/extensions/ext-polygon/ext-polygon.js +++ b/src/editor/extensions/ext-polygon/ext-polygon.js @@ -23,8 +23,8 @@ export default { name: 'polygon', async init (_S) { const svgEditor = this; - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; // const editingitex = false; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); let selElems; @@ -36,7 +36,7 @@ export default { */ const showPanel = (on) => { $id('polygon_panel').style.display = (on) ? 'block' : 'none'; - }; + }; /** * @param {string} attr @@ -80,8 +80,8 @@ export default { if (this.leftPanel.updateLeftPanel('tool_polygon')) { svgCanvas.setMode('polygon'); showPanel(true); - } - }); + } + }); // Add the context panel and its handler(s) const panelTemplate = document.createElement("template"); @@ -141,7 +141,7 @@ export default { const fill = newFO.getAttribute('fill'); const strokecolor = newFO.getAttribute('strokecolor'); const strokeWidth = Number(newFO.getAttribute('strokeWidth')); - + let x = opts.mouse_x; let y = opts.mouse_y; diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js index 336f6945..aab36dd5 100644 --- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js +++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js @@ -7,7 +7,7 @@ * adopted for moinmoins item storage. It sends in one post png and svg data * (I agree to dual license my work to additional GPLv2 or later) */ -import {Canvg as canvg} from 'canvg'; +import { Canvg as canvg } from 'canvg'; const loadExtensionTranslation = async function (lang) { let translationModule; @@ -24,11 +24,11 @@ const loadExtensionTranslation = async function (lang) { export default { name: 'server_moinsave', - async init ({encode64}) { + async init ({ encode64 }) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); - const {svgCanvas} = svgEditor; - const {$id} = svgCanvas; + const { svgCanvas } = svgEditor; + const { $id } = svgCanvas; const saveSvgAction = '/+modify'; // Create upload target (hidden iframe) @@ -44,7 +44,7 @@ export default { svgEditor.setCustomHandlers({ async save (win, data) { const svg = '\n' + data; - const {pathname} = new URL(location); + const { pathname } = new URL(location); const name = pathname.replace(/\/+get\//, ''); const svgData = encode64(svg); if (!$id('export_canvas')) { diff --git a/src/editor/extensions/ext-server_opensave/ext-php_savefile.js b/src/editor/extensions/ext-server_opensave/ext-php_savefile.js index 05110be1..9284b7d0 100644 --- a/src/editor/extensions/ext-server_opensave/ext-php_savefile.js +++ b/src/editor/extensions/ext-server_opensave/ext-php_savefile.js @@ -3,7 +3,7 @@ export default { name: 'php_savefile', - init ({$}) { + init ({ $ }) { const svgEditor = this; const { canvas: svgCanvas @@ -22,7 +22,7 @@ export default { const svg = '\n' + data, filename = getFileNameFromTitle(); - $.post(saveSvgAction, {output_svg: svg, filename}); + $.post(saveSvgAction, { output_svg: svg, filename }); } }); } diff --git a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js index 31ad039f..6b2df055 100644 --- a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js +++ b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js @@ -6,7 +6,7 @@ * @copyright 2010 Alexis Deveria * */ -import {Canvg as canvg} from 'canvg'; +import { Canvg as canvg } from 'canvg'; const loadExtensionTranslation = async function (lang) { let translationModule; @@ -23,7 +23,7 @@ const loadExtensionTranslation = async function (lang) { export default { name: 'server_opensave', - async init ({$, decode64, encode64}) { + async init ({ $, decode64, encode64 }) { const svgEditor = this; const strings = await loadExtensionTranslation(svgEditor.configObj.pref('lang')); const { @@ -33,7 +33,7 @@ export default { }, canvas: svgCanvas } = svgEditor; - const {$id} = svgCanvas; + const { $id } = svgCanvas; /** * @@ -130,11 +130,11 @@ export default {
diff --git a/src/editor/touch.js b/src/editor/touch.js index 4b1826d5..8a875231 100644 --- a/src/editor/touch.js +++ b/src/editor/touch.js @@ -5,7 +5,7 @@ * @returns {void} */ function touchHandler (ev) { - const {changedTouches} = ev, + const { changedTouches } = ev, first = changedTouches[0]; let type = ''; @@ -16,7 +16,7 @@ function touchHandler (ev) { default: return; } - const {screenX, screenY, clientX, clientY} = first; + const { screenX, screenY, clientX, clientY } = first; const simulatedEvent = new MouseEvent(type, { // Event interface bubbles: true, diff --git a/src/svgcanvas/blur-event.js b/src/svgcanvas/blur-event.js index 0e93871a..f3208c01 100644 --- a/src/svgcanvas/blur-event.js +++ b/src/svgcanvas/blur-event.js @@ -44,12 +44,12 @@ export const setBlurNoUndo = function (val) { blurContext_.changeSelectedAttributeNoUndoMethod('filter', 'url(#' + elem.id + '_blur)'); } if (blurContext_.isWebkit()) { - // console.log('e', elem); + // console.log('e', elem); elem.removeAttribute('filter'); elem.setAttribute('filter', 'url(#' + elem.id + '_blur)'); } const filter = blurContext_.getFilter(); - blurContext_.changeSelectedAttributeNoUndoMethod('stdDeviation', val, [filter.firstChild]); + blurContext_.changeSelectedAttributeNoUndoMethod('stdDeviation', val, [ filter.firstChild ]); blurContext_.getCanvas().setBlurOffsets(filter, val); } }; @@ -122,14 +122,14 @@ export const setBlur = function (val, complete) { } } else { // Not found, so create - const newblur = blurContext_.getCanvas().addSVGElementFromJson({element: 'feGaussianBlur', + const newblur = blurContext_.getCanvas().addSVGElementFromJson({ element: 'feGaussianBlur', attr: { in: 'SourceGraphic', stdDeviation: val } }); - blurContext_.setFilter(blurContext_.getCanvas().addSVGElementFromJson({element: 'filter', + blurContext_.setFilter(blurContext_.getCanvas().addSVGElementFromJson({ element: 'filter', attr: { id: elemId + '_blur' } @@ -140,7 +140,7 @@ export const setBlur = function (val, complete) { batchCmd.addSubCommand(new InsertElementCommand(blurContext_.getFilter())); } - const changes = {filter: elem.getAttribute('filter')}; + const changes = { filter: elem.getAttribute('filter') }; if (val === 0) { elem.removeAttribute('filter'); @@ -153,7 +153,7 @@ export const setBlur = function (val, complete) { blurContext_.getCanvas().setBlurOffsets(blurContext_.getFilter(), val); const filter = blurContext_.getFilter(); blurContext_.setCurCommand(batchCmd); - blurContext_.getCanvas().undoMgr.beginUndoableChange('stdDeviation', [filter ? filter.firstChild : null]); + blurContext_.getCanvas().undoMgr.beginUndoableChange('stdDeviation', [ filter ? filter.firstChild : null ]); if (complete) { blurContext_.getCanvas().setBlurNoUndo(val); finishChange(); diff --git a/src/svgcanvas/clear.js b/src/svgcanvas/clear.js index 0394fa3e..bf8e190a 100644 --- a/src/svgcanvas/clear.js +++ b/src/svgcanvas/clear.js @@ -4,7 +4,7 @@ * @license MIT * @copyright 2011 Jeff Schiller */ -import {NS} from '../common/namespaces.js'; +import { NS } from '../common/namespaces.js'; let clearContext_ = null; @@ -19,7 +19,7 @@ export const init = function (clearContext) { export const clearSvgContentElementInit = function () { const curConfig = clearContext_.getCurConfig(); - const {dimensions} = curConfig; + const { dimensions } = curConfig; const el = clearContext_.getSVGContent(); // empty() while(el.firstChild) diff --git a/src/svgcanvas/coords.js b/src/svgcanvas/coords.js index bdfa368b..87beca96 100644 --- a/src/svgcanvas/coords.js +++ b/src/svgcanvas/coords.js @@ -57,7 +57,7 @@ export const remapElement = function (selected, changes, m) { doSnapping = editorContext_.getGridSnapping() && selected.parentNode.parentNode.localName === 'svg', finishUp = function () { if (doSnapping) { - Object.entries(changes).forEach(([o, value]) => { + Object.entries(changes).forEach(([ o, value ]) => { changes[o] = snapToGrid(value); }); } diff --git a/src/svgcanvas/copy-elem.js b/src/svgcanvas/copy-elem.js index 25ef28d1..7802c04c 100644 --- a/src/svgcanvas/copy-elem.js +++ b/src/svgcanvas/copy-elem.js @@ -1,6 +1,6 @@ -import {isWebkit} from '../common/browser.js'; -import {convertPath} from './path.js'; -import {preventClickDefault} from './utilities.js'; +import { isWebkit } from '../common/browser.js'; +import { convertPath } from './path.js'; +import { preventClickDefault } from './utilities.js'; /** * Create a clone of an element, updating its ID and its children's IDs when needed. diff --git a/src/svgcanvas/draw.js b/src/svgcanvas/draw.js index 04b713d4..6b4f646b 100644 --- a/src/svgcanvas/draw.js +++ b/src/svgcanvas/draw.js @@ -8,8 +8,8 @@ import Layer from './layer.js'; import HistoryRecordingService from './historyrecording.js'; -import {NS} from '../common/namespaces.js'; -import {isOpera} from '../common/browser.js'; +import { NS } from '../common/namespaces.js'; +import { isOpera } from '../common/browser.js'; import { toXml, getElem } from './utilities.js'; @@ -19,7 +19,7 @@ import { import { BatchCommand, RemoveElementCommand, MoveElementCommand, ChangeElementCommand } from './history.js'; -import {getParentsUntil} from '../editor/components/jgraduate/Util.js'; +import { getParentsUntil } from '../editor/components/jgraduate/Util.js'; const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'.split(','); @@ -50,7 +50,7 @@ function findLayerNameInGroup (group) { return group.querySelector('title').textContent || (isOpera() && group.querySelectorAll // Hack for Opera 10.60 - ? group.querySelector('title').textContent + ? group.querySelector('title').textContent : ''); } @@ -574,7 +574,7 @@ export class Drawing { const group = layer.getGroup(); // Clone children - const children = [...currentGroup.childNodes]; + const children = [ ...currentGroup.childNodes ]; children.forEach((child) => { if (child.localName === 'title') { return; } group.append(this.copyElem(child)); @@ -791,7 +791,7 @@ export const createLayer = function (name, hrService) { historyRecordingService(hrService) ); canvas_.clearSelection(); - canvas_.call('changed', [newLayer]); + canvas_.call('changed', [ newLayer ]); }; /** @@ -810,7 +810,7 @@ export const cloneLayer = function (name, hrService) { canvas_.clearSelection(); leaveContext(); - canvas_.call('changed', [newLayer]); + canvas_.call('changed', [ newLayer ]); }; /** @@ -822,7 +822,7 @@ export const cloneLayer = function (name, hrService) { */ export const deleteCurrentLayer = function () { let currentLayer = canvas_.getCurrentDrawing().getCurrentLayer(); - const {nextSibling} = currentLayer; + const { nextSibling } = currentLayer; const parent = currentLayer.parentNode; currentLayer = canvas_.getCurrentDrawing().deleteCurrentLayer(); if (currentLayer) { @@ -831,7 +831,7 @@ export const deleteCurrentLayer = function () { batchCmd.addSubCommand(new RemoveElementCommand(currentLayer, nextSibling, parent)); canvas_.addCommandToHistory(batchCmd); canvas_.clearSelection(); - canvas_.call('changed', [parent]); + canvas_.call('changed', [ parent ]); return true; } return false; @@ -867,7 +867,7 @@ export const renameCurrentLayer = function (newName) { if (layer) { const result = drawing.setCurrentLayerName(newName, historyRecordingService()); if (result) { - canvas_.call('changed', [layer]); + canvas_.call('changed', [ layer ]); return true; } } @@ -907,7 +907,7 @@ export const setLayerVisibility = function (layerName, bVisible) { const layer = drawing.setLayerVisibility(layerName, bVisible); if (layer) { const oldDisplay = prevVisibility ? 'inline' : 'none'; - canvas_.addCommandToHistory(new ChangeElementCommand(layer, {display: oldDisplay}, 'Layer Visibility')); + canvas_.addCommandToHistory(new ChangeElementCommand(layer, { display: oldDisplay }, 'Layer Visibility')); } else { return false; } @@ -1051,4 +1051,4 @@ export const setContext = function (elem) { * @class Layer * @see {@link module:layer.Layer} */ -export {Layer}; +export { Layer }; diff --git a/src/svgcanvas/elem-get-set.js b/src/svgcanvas/elem-get-set.js index fc9ae162..f2696069 100644 --- a/src/svgcanvas/elem-get-set.js +++ b/src/svgcanvas/elem-get-set.js @@ -210,11 +210,11 @@ export const setResolutionMethod = function (x, y) { this.contentH = y; batchCmd.addSubCommand(new ChangeElementCommand(elemContext_.getSVGContent(), { width: w, height: h })); - elemContext_.getSVGContent().setAttribute('viewBox', [0, 0, x / currentZoom, y / currentZoom].join(' ')); - batchCmd.addSubCommand(new ChangeElementCommand(elemContext_.getSVGContent(), { viewBox: ['0 0', w, h].join(' ') })); + elemContext_.getSVGContent().setAttribute('viewBox', [ 0, 0, x / currentZoom, y / currentZoom ].join(' ')); + batchCmd.addSubCommand(new ChangeElementCommand(elemContext_.getSVGContent(), { viewBox: [ '0 0', w, h ].join(' ') })); elemContext_.addCommandToHistory(batchCmd); - elemContext_.call('changed', [elemContext_.getSVGContent()]); + elemContext_.call('changed', [ elemContext_.getSVGContent() ]); } return true; }; @@ -403,7 +403,7 @@ export const findDuplicateGradient = function (grad) { const defs = findDefs(); const existingGrads = defs.querySelectorAll('linearGradient, radialGradient'); let i = existingGrads.length; - const radAttrs = ['r', 'cx', 'cy', 'fx', 'fy']; + const radAttrs = [ 'r', 'cx', 'cy', 'fx', 'fy' ]; while (i--) { const og = existingGrads[i]; if (grad.tagName === 'linearGradient') { @@ -501,7 +501,7 @@ export const setPaintMethod = function (type, paint) { */ export const setStrokeWidthMethod = function (val) { const selectedElements = elemContext_.getSelectedElements(); - if (val === 0 && ['line', 'path'].includes(elemContext_.getCanvas().getMode())) { + if (val === 0 && [ 'line', 'path' ].includes(elemContext_.getCanvas().getMode())) { elemContext_.getCanvas().setStrokeWidth(1); return; } @@ -782,7 +782,7 @@ export const setImageURLMethod = function (val) { batchCmd.addSubCommand(new ChangeElementCommand(elem, changes)); elemContext_.addCommandToHistory(batchCmd); - elemContext_.call('changed', [elem]); + elemContext_.call('changed', [ elem ]); }; img.src = val; }; @@ -838,7 +838,7 @@ export const setRectRadiusMethod = function (val) { selected.setAttribute('rx', val); selected.setAttribute('ry', val); elemContext_.addCommandToHistory(new ChangeElementCommand(selected, { rx: r, ry: r }, 'Radius')); - elemContext_.call('changed', [selected]); + elemContext_.call('changed', [ selected ]); } } }; diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index 993f744d..365a9a5f 100644 --- a/src/svgcanvas/event.js +++ b/src/svgcanvas/event.js @@ -51,10 +51,10 @@ export const getBsplinePoint = function (t) { t3 = t2 * t; const m = [ - [-1, 3, -3, 1], - [3, -6, 3, 0], - [-3, 0, 3, 0], - [1, 4, 1, 0] + [ -1, 3, -3, 1 ], + [ 3, -6, 3, 0 ], + [ -3, 0, 3, 0 ], + [ 1, 4, 1, 0 ] ]; spline.x = S * ( @@ -619,7 +619,7 @@ export const mouseUpEvent = function (evt) { // if it was a path // else, if it was selected and this is a shift-click, remove it from selection } else if (evt.shiftKey && tempJustSelected !== t) { - eventContext_.getCanvas().removeFromSelection([t]); + eventContext_.getCanvas().removeFromSelection([ t ]); } } // no change in mouse position @@ -709,7 +709,7 @@ export const mouseUpEvent = function (evt) { id: eventContext_.getId() } }); - eventContext_.getCanvas().call('changed', [element]); + eventContext_.getCanvas().call('changed', [ element ]); keep = true; } break; @@ -727,13 +727,13 @@ export const mouseUpEvent = function (evt) { id: eventContext_.getId() } }); - eventContext_.getCanvas().call('changed', [element]); + eventContext_.getCanvas().call('changed', [ element ]); keep = true; } break; case 'text': keep = true; - eventContext_.getCanvas().selectOnly([element]); + eventContext_.getCanvas().selectOnly([ element ]); eventContext_.getCanvas().textActions.start(element); break; case 'path': { @@ -818,7 +818,7 @@ export const mouseUpEvent = function (evt) { ) { // switch into "select" mode if we've clicked on an element eventContext_.getCanvas().setMode('select'); - eventContext_.getCanvas().selectOnly([t], true); + eventContext_.getCanvas().selectOnly([ t ], true); } } else if (!isNullish(element)) { /** @@ -856,12 +856,12 @@ export const mouseUpEvent = function (evt) { if (eventContext_.getCurrentMode() === 'path') { eventContext_.getCanvas().pathActions.toEditMode(element); } else if (eventContext_.getCurConfig().selectNew) { - eventContext_.getCanvas().selectOnly([element], true); + eventContext_.getCanvas().selectOnly([ element ], true); } // we create the insert command that is stored on the stack // undo means to call cmd.unapply(), redo means to call cmd.apply() eventContext_.addCommandToHistory(new InsertElementCommand(element)); - eventContext_.getCanvas().call('changed', [element]); + eventContext_.getCanvas().call('changed', [ element ]); }, aniDur * 1000); } eventContext_.setStartTransform(null); @@ -1003,7 +1003,7 @@ export const mouseDownEvent = function (evt) { // No need to do the call here as it will be done on addToSelection eventContext_.getCanvas().clearSelection(true); } - eventContext_.getCanvas().addToSelection([mouseTarget]); + eventContext_.getCanvas().addToSelection([ mouseTarget ]); eventContext_.setJustSelected(mouseTarget); eventContext_.getCanvas().pathActions.clear(); } @@ -1062,7 +1062,7 @@ export const mouseDownEvent = function (evt) { // want to orient around it eventContext_.setInitBbox(utilsGetBBox($id('selectedBox0'))); const bb = {}; - for (const [key, val] of Object.entries(eventContext_.getInitBbox())) { + for (const [ key, val ] of Object.entries(eventContext_.getInitBbox())) { bb[key] = val / currentZoom; } eventContext_.setInitBbox(bb); diff --git a/src/svgcanvas/history.js b/src/svgcanvas/history.js index 90a43ed6..e8ab6a3a 100644 --- a/src/svgcanvas/history.js +++ b/src/svgcanvas/history.js @@ -6,8 +6,8 @@ * @copyright 2010 Jeff Schiller */ -import {getHref, setHref, getRotationAngle, isNullish} from './utilities.js'; -import {removeElementFromListMap} from './svgtransformlist.js'; +import { getHref, setHref, getRotationAngle, isNullish } from './utilities.js'; +import { removeElementFromListMap } from './svgtransformlist.js'; /** * Group: Undo/Redo history management. @@ -56,7 +56,7 @@ export class Command { * This function needs to be surcharged if multiple elements are returned. */ elements () { - return [this.elem]; + return [ this.elem ]; } /** @@ -312,7 +312,7 @@ export class ChangeElementCommand extends Command { apply (handler) { super.apply(handler, () => { let bChangedTransform = false; - Object.entries(this.newValues).forEach(([attr, value]) => { + Object.entries(this.newValues).forEach(([ attr, value ]) => { if (value) { if (attr === '#text') { this.elem.textContent = value; @@ -338,7 +338,7 @@ export class ChangeElementCommand extends Command { const bbox = this.elem.getBBox(); const cx = bbox.x + bbox.width / 2; const cy = bbox.y + bbox.height / 2; - const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join(''); + const rotate = [ 'rotate(', angle, ' ', cx, ',', cy, ')' ].join(''); if (rotate !== this.elem.getAttribute('transform')) { this.elem.setAttribute('transform', rotate); } @@ -356,7 +356,7 @@ export class ChangeElementCommand extends Command { unapply (handler) { super.unapply(handler, () => { let bChangedTransform = false; - Object.entries(this.oldValues).forEach(([attr, value]) => { + Object.entries(this.oldValues).forEach(([ attr, value ]) => { if (value) { if (attr === '#text') { this.elem.textContent = value; @@ -379,7 +379,7 @@ export class ChangeElementCommand extends Command { const bbox = this.elem.getBBox(); const cx = bbox.x + bbox.width / 2, cy = bbox.y + bbox.height / 2; - const rotate = ['rotate(', angle, ' ', cx, ',', cy, ')'].join(''); + const rotate = [ 'rotate(', angle, ' ', cx, ',', cy, ')' ].join(''); if (rotate !== this.elem.getAttribute('transform')) { this.elem.setAttribute('transform', rotate); } @@ -608,7 +608,7 @@ export class UndoManager { finishUndoableChange () { const p = this.undoChangeStackPointer--; const changeset = this.undoableChangeStack[p]; - const {attrName} = changeset; + const { attrName } = changeset; const batchCmd = new BatchCommand('Change ' + attrName); let i = changeset.elements.length; while (i--) { diff --git a/src/svgcanvas/historyrecording.js b/src/svgcanvas/historyrecording.js index 91eefb8a..5e9f92ab 100644 --- a/src/svgcanvas/historyrecording.js +++ b/src/svgcanvas/historyrecording.js @@ -77,7 +77,7 @@ class HistoryRecordingService { if (this.currentBatchCommand_) { const batchCommand = this.currentBatchCommand_; this.batchCommandStack_.pop(); - const {length: len} = this.batchCommandStack_; + const { length: len } = this.batchCommandStack_; this.currentBatchCommand_ = len ? this.batchCommandStack_[len - 1] : null; this.addCommand_(batchCommand); } diff --git a/src/svgcanvas/jQuery.attr.js b/src/svgcanvas/jQuery.attr.js index eafb505e..efd391f0 100644 --- a/src/svgcanvas/jQuery.attr.js +++ b/src/svgcanvas/jQuery.attr.js @@ -58,7 +58,7 @@ export default function jQueryPluginSVG ($) { } if (typeof key === 'object') { // Setting attributes from object - for (const [name, val] of Object.entries(key)) { + for (const [ name, val ] of Object.entries(key)) { elem.setAttribute(name, val); } // Getting attribute diff --git a/src/svgcanvas/json.js b/src/svgcanvas/json.js index bea225d3..41253ff2 100644 --- a/src/svgcanvas/json.js +++ b/src/svgcanvas/json.js @@ -5,8 +5,8 @@ * * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller */ -import {getElem, assignAttributes, cleanupElement} from './utilities.js'; -import {NS} from '../common/namespaces.js'; +import { getElem, assignAttributes, cleanupElement } from './utilities.js'; +import { NS } from '../common/namespaces.js'; let jsonContext_ = null; let svgdoc_ = null; diff --git a/src/svgcanvas/layer.js b/src/svgcanvas/layer.js index fa3cac48..e238a72a 100644 --- a/src/svgcanvas/layer.js +++ b/src/svgcanvas/layer.js @@ -6,8 +6,8 @@ * @copyright 2011 Jeff Schiller, 2016 Flint O'Brien */ -import {NS} from '../common/namespaces.js'; -import {toXml, walkTree, isNullish} from './utilities.js'; +import { NS } from '../common/namespaces.js'; +import { toXml, walkTree, isNullish } from './utilities.js'; /** @@ -175,7 +175,7 @@ class Layer { title.textContent = name; this.name_ = name; if (hrService) { - hrService.changeElement(title, {'#text': previousName}); + hrService.changeElement(title, { '#text': previousName }); } return this.name_; } diff --git a/src/svgcanvas/math.js b/src/svgcanvas/math.js index 18644370..16573c4d 100644 --- a/src/svgcanvas/math.js +++ b/src/svgcanvas/math.js @@ -19,8 +19,8 @@ * @property {Float} y */ -import {NS} from '../common/namespaces.js'; -import {getTransformList} from './svgtransformlist.js'; +import { NS } from '../common/namespaces.js'; +import { getTransformList } from './svgtransformlist.js'; // Constants const NEAR_ZERO = 1e-14; @@ -38,7 +38,7 @@ const svg = document.createElementNS(NS.SVG, 'svg'); * @returns {module:math.XYObject} An x, y object representing the transformed point */ export const transformPoint = function (x, y, m) { - return {x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f}; + return { x: m.a * x + m.c * y + m.e, y: m.b * x + m.d * y + m.f }; }; /** diff --git a/src/svgcanvas/paste-elem.js b/src/svgcanvas/paste-elem.js index 6f00e951..1194b60d 100644 --- a/src/svgcanvas/paste-elem.js +++ b/src/svgcanvas/paste-elem.js @@ -70,7 +70,7 @@ export const pasteElementsMethod = function (type, x, y) { pasteContext_.getCanvas().runExtensions( 'IDsUpdated', /** @type {module:svgcanvas.SvgCanvas#event:ext_IDsUpdated} */ - {elems: clipb, changes: changedIDs}, + { elems: clipb, changes: changedIDs }, true ).forEach(function (extChanges) { if (!extChanges || !('remove' in extChanges)) return; diff --git a/src/svgcanvas/path-actions.js b/src/svgcanvas/path-actions.js index b37ca972..2feff101 100644 --- a/src/svgcanvas/path-actions.js +++ b/src/svgcanvas/path-actions.js @@ -7,10 +7,10 @@ * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller */ -import {NS} from '../common/namespaces.js'; -import {shortFloat} from '../common/units.js'; -import {getTransformList} from './svgtransformlist.js'; -import {ChangeElementCommand, BatchCommand} from './history.js'; +import { NS } from '../common/namespaces.js'; +import { shortFloat } from '../common/units.js'; +import { getTransformList } from './svgtransformlist.js'; +import { ChangeElementCommand, BatchCommand } from './history.js'; import { transformPoint, snapToAngle, rectsIntersect, transformListToTransform @@ -49,7 +49,7 @@ export const init = function (pathActionsContext) { * @returns {string} */ export const convertPath = function (pth, toRel) { - const {pathSegList} = pth; + const { pathSegList } = pth; const len = pathSegList.numberOfItems; let curx = 0, cury = 0; let d = ''; @@ -92,7 +92,7 @@ export const convertPath = function (pth, toRel) { letter = 'L'; } // Convert to "line" for easier editing - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 14: // absolute vertical line (V) y -= cury; @@ -109,7 +109,7 @@ export const convertPath = function (pth, toRel) { letter = 'L'; } // Convert to "line" for easier editing - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 2: // absolute move (M) case 4: // absolute line (L) @@ -130,9 +130,9 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - if (type === 2 || type === 3) { lastM = [curx, cury]; } + if (type === 2 || type === 3) { lastM = [ curx, cury ]; } - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 6: // absolute cubic (C) x -= curx; x1 -= curx; x2 -= curx; @@ -148,7 +148,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]]); + d += pathDSegment(letter, [ [ x1, y1 ], [ x2, y2 ], [ x, y ] ]); break; case 8: // absolute quad (Q) x -= curx; x1 -= curx; @@ -164,7 +164,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x1, y1], [x, y]]); + d += pathDSegment(letter, [ [ x1, y1 ], [ x, y ] ]); break; // Fallthrough case 11: // relative elliptical arc (a) @@ -177,11 +177,11 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[seg.r1, seg.r2]], [ + d += pathDSegment(letter, [ [ seg.r1, seg.r2 ] ], [ seg.angle, (seg.largeArcFlag ? 1 : 0), (seg.sweepFlag ? 1 : 0) - ], [x, y]); + ], [ x, y ]); break; case 16: // absolute smooth cubic (S) x -= curx; x2 -= curx; @@ -197,7 +197,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x2, y2], [x, y]]); + d += pathDSegment(letter, [ [ x2, y2 ], [ x, y ] ]); break; } // switch on path segment type } // for each segment @@ -252,7 +252,7 @@ export const pathActionsMethod = (function () { */ const smoothPolylineIntoPath = function (element) { let i; - const {points} = element; + const { points } = element; const N = points.numberOfItems; if (N >= 4) { // loop through every 3 points and convert to a cubic bezier curve segment @@ -270,7 +270,7 @@ export const pathActionsMethod = (function () { // - https://www.cs.mtu.edu/~shene/COURSES/cs3621/NOTES/spline/Bezier/bezier-der.html let curpos = points.getItem(0), prevCtlPt = null; let d = []; - d.push(['M', curpos.x, ',', curpos.y, ' C'].join('')); + d.push([ 'M', curpos.x, ',', curpos.y, ' C' ].join('')); for (i = 1; i <= (N - 4); i += 3) { let ct1 = points.getItem(i); const ct2 = points.getItem(i + 1); @@ -289,7 +289,7 @@ export const pathActionsMethod = (function () { } } - d.push([ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y].join(',')); + d.push([ ct1.x, ct1.y, ct2.x, ct2.y, end.x, end.y ].join(',')); curpos = end; prevCtlPt = ct2; @@ -298,7 +298,7 @@ export const pathActionsMethod = (function () { d.push('L'); while (i < N) { const pt = points.getItem(i); - d.push([pt.x, pt.y].join(',')); + d.push([ pt.x, pt.y ].join(',')); i++; } d = d.join(' '); @@ -339,7 +339,7 @@ export const pathActionsMethod = (function () { let x = mouseX / currentZoom, y = mouseY / currentZoom, stretchy = getElem('path_stretch_line'); - newPoint = [x, y]; + newPoint = [ x, y ]; if (editorContext_.getGridSnapping()) { x = snapToGrid(x); @@ -376,7 +376,7 @@ export const pathActionsMethod = (function () { } })); // set stretchy line to first point - stretchy.setAttribute('d', ['M', mouseX, mouseY, mouseX, mouseY].join(' ')); + stretchy.setAttribute('d', [ 'M', mouseX, mouseY, mouseX, mouseY ].join(' ')); index = subpath ? path.segs.length : 0; pathActionsContext_.addPointGrip(index, mouseX, mouseY); } else { @@ -474,7 +474,7 @@ export const pathActionsMethod = (function () { if (evt.shiftKey) { const xya = snapToAngle(lastx, lasty, x, y); - ({x, y} = xya); + ({ x, y } = xya); } // Use the segment defined by stretchy @@ -496,7 +496,7 @@ export const pathActionsMethod = (function () { y *= currentZoom; // set stretchy line to latest point - stretchy.setAttribute('d', ['M', x, y, x, y].join(' ')); + stretchy.setAttribute('d', [ 'M', x, y, x, y ].join(' ')); index = num; if (subpath) { index += path.segs.length; } pathActionsContext_.addPointGrip(index, x, y); @@ -512,12 +512,12 @@ export const pathActionsMethod = (function () { path.storeD(); - ({id} = evt.target); + ({ id } = evt.target); let curPt; if (id.substr(0, 14) === 'pathpointgrip_') { // Select this point curPt = path.cur_pt = Number.parseInt(id.substr(14)); - path.dragging = [startX, startY]; + path.dragging = [ startX, startY ]; const seg = path.segs[curPt]; // only clear selection if shift is not pressed (otherwise, add @@ -533,7 +533,7 @@ export const pathActionsMethod = (function () { path.addPtsToSelection(curPt); } } else if (id.startsWith('ctrlpointgrip_')) { - path.dragging = [startX, startY]; + path.dragging = [ startX, startY ]; const parts = id.split('_')[1].split('c'); curPt = Number(parts[0]); @@ -612,7 +612,7 @@ export const pathActionsMethod = (function () { }); if (index === 0) { - firstCtrl = [mouseX, mouseY]; + firstCtrl = [ mouseX, mouseY ]; } else { const last = seglist.getItem(index - 1); let lastX = last.x; @@ -625,7 +625,7 @@ export const pathActionsMethod = (function () { lastX = firstCtrl[0] / currentZoom; lastY = firstCtrl[1] / currentZoom; } - pathActionsContext_.replacePathSeg(6, index, [ptX, ptY, lastX, lastY, altX, altY], drawnPath); + pathActionsContext_.replacePathSeg(6, index, [ ptX, ptY, lastX, lastY, altX, altY ], drawnPath); } } else { const stretchy = getElem('path_stretch_line'); @@ -637,13 +637,13 @@ export const pathActionsMethod = (function () { pathActionsContext_.replacePathSeg( 6, 1, - [mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY], + [ mouseX, mouseY, prevX * currentZoom, prevY * currentZoom, mouseX, mouseY ], stretchy ); } else if (firstCtrl) { - pathActionsContext_.replacePathSeg(6, 1, [mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY], stretchy); + pathActionsContext_.replacePathSeg(6, 1, [ mouseX, mouseY, firstCtrl[0], firstCtrl[1], mouseX, mouseY ], stretchy); } else { - pathActionsContext_.replacePathSeg(4, 1, [mouseX, mouseY], stretchy); + pathActionsContext_.replacePathSeg(4, 1, [ mouseX, mouseY ], stretchy); } } } @@ -661,7 +661,7 @@ export const pathActionsMethod = (function () { }, path); const diffX = mpt.x - pt.x; const diffY = mpt.y - pt.y; - path.dragging = [mouseX, mouseY]; + path.dragging = [ mouseX, mouseY ]; if (path.dragctrl) { path.moveCtrl(diffX, diffY); @@ -788,8 +788,8 @@ export const pathActionsMethod = (function () { } if (selPath) { - editorContext_.call('selected', [elem]); - editorContext_.addToSelection([elem], true); + editorContext_.call('selected', [ elem ]); + editorContext_.addToSelection([ elem ], true); } }, /** @@ -849,7 +849,7 @@ export const pathActionsMethod = (function () { this.clear(); - editorContext_.addToSelection([elem], true); + editorContext_.addToSelection([ elem ], true); editorContext_.call('changed', editorContext_.getSelectedElements()); }, @@ -909,7 +909,7 @@ export const pathActionsMethod = (function () { const type = seg.pathSegType; if (type === 1) { continue; } const pts = []; - ['', 1, 2].forEach(function(n){ + [ '', 1, 2 ].forEach(function(n){ const x = seg['x' + n], y = seg['y' + n]; if (x !== undefined && y !== undefined) { const pt = transformPoint(x, y, m); @@ -988,7 +988,7 @@ export const pathActionsMethod = (function () { // Only allow one selected node for now if (selPts.length !== 1) { return; } - const {elem} = path; + const { elem } = path; const list = elem.pathSegList; // const len = list.numberOfItems; @@ -1086,7 +1086,7 @@ export const pathActionsMethod = (function () { const pt = list.getItem(lastM); // Make this point the new "M" - pathActionsContext_.replacePathSeg(2, lastM, [pt.x, pt.y]); + pathActionsContext_.replacePathSeg(2, lastM, [ pt.x, pt.y ]); // i = index; // i is local here, so has no effect; what was the intent for this? @@ -1200,7 +1200,7 @@ export const pathActionsMethod = (function () { // Get first selected point const seg = path.segs[selPts[0]]; - const diff = {x: 0, y: 0}; + const diff = { x: 0, y: 0 }; diff[attr] = newValue - seg.item[attr]; seg.move(diff.x, diff.y); diff --git a/src/svgcanvas/path-method.js b/src/svgcanvas/path-method.js index 7c98c5b3..8de3d6ca 100644 --- a/src/svgcanvas/path-method.js +++ b/src/svgcanvas/path-method.js @@ -6,8 +6,8 @@ * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller */ -import {NS} from '../common/namespaces.js'; -import {ChangeElementCommand} from './history.js'; +import { NS } from '../common/namespaces.js'; +import { ChangeElementCommand } from './history.js'; import { transformPoint, getMatrix } from './math.js'; @@ -83,7 +83,7 @@ export const ptObjToArrMethod = function (type, segItem) { * @returns {module:math.XYObject} */ export const getGripPtMethod = function (seg, altPt) { - const {path: pth} = seg; + const { path: pth } = seg; let out = { x: altPt ? altPt.x : seg.item.x, y: altPt ? altPt.y : seg.item.y @@ -246,7 +246,7 @@ export const getCtrlLineMethod = function (id) { * @returns {SVGCircleElement} */ export const getPointGripMethod = function (seg, update) { - const {index} = seg; + const { index } = seg; const pointGrip = addPointGripMethod(index); if (update) { @@ -266,7 +266,7 @@ export const getPointGripMethod = function (seg, update) { * @returns {PlainObject} */ export const getControlPointsMethod = function (seg) { - const {item, index} = seg; + const { item, index } = seg; if (!('x1' in item) || !('x2' in item)) { return null; } const cpt = {}; /* const pointGripContainer = */ getGripContainerMethod(); @@ -275,15 +275,15 @@ export const getControlPointsMethod = function (seg) { const path = pathMethodsContext_.getPathObj(); const prev = path.segs[index - 1].item; - const segItems = [prev, item]; + const segItems = [ prev, item ]; for (let i = 1; i < 3; i++) { const id = index + 'c' + i; const ctrlLine = cpt['c' + i + '_line'] = getCtrlLineMethod(id); - const pt = getGripPtMethod(seg, {x: item['x' + i], y: item['y' + i]}); - const gpt = getGripPtMethod(seg, {x: segItems[i - 1].x, y: segItems[i - 1].y}); + const pt = getGripPtMethod(seg, { x: item['x' + i], y: item['y' + i] }); + const gpt = getGripPtMethod(seg, { x: segItems[i - 1].x, y: segItems[i - 1].y }); assignAttributes(ctrlLine, { x1: pt.x, @@ -350,7 +350,7 @@ export const replacePathSegMethod = function (type, index, pts, elem) { * @returns {SVGPathElement} */ export const getSegSelectorMethod = function (seg, update) { - const {index} = seg; + const { index } = seg; let segLine = getElem('segline_' + index); if (!segLine) { const pointGripContainer = getGripContainerMethod(); @@ -369,7 +369,7 @@ export const getSegSelectorMethod = function (seg, update) { } if (update) { - const {prev} = seg; + const { prev } = seg; if (!prev) { segLine.setAttribute('display', 'none'); return segLine; @@ -377,11 +377,11 @@ export const getSegSelectorMethod = function (seg, update) { const pt = getGripPtMethod(prev); // Set start point - replacePathSegMethod(2, 0, [pt.x, pt.y], segLine); + replacePathSegMethod(2, 0, [ pt.x, pt.y ], segLine); const pts = ptObjToArrMethod(seg.type, seg.item); // , true); for (let i = 0; i < pts.length; i += 2) { - const point = getGripPtMethod(seg, {x: pts[i], y: pts[i + 1]}); + const point = getGripPtMethod(seg, { x: pts[i], y: pts[i + 1] }); pts[i] = point.x; pts[i + 1] = point.y; } @@ -500,14 +500,14 @@ export class Segment { * @returns {void} */ move (dx, dy) { - const {item} = this; + const { item } = this; const curPts = this.ctrlpts ? [ item.x += dx, item.y += dy, item.x1, item.y1, item.x2 += dx, item.y2 += dy ] - : [item.x += dx, item.y += dy]; + : [ item.x += dx, item.y += dy ]; replacePathSegMethod( this.type, @@ -528,8 +528,8 @@ export class Segment { if (this.mate) { // The last point of a closed subpath has a 'mate', // which is the 'M' segment of the subpath - const {item: itm} = this.mate; - const pts = [itm.x += dx, itm.y += dy]; + const { item: itm } = this.mate; + const pts = [ itm.x += dx, itm.y += dy ]; replacePathSegMethod(this.mate.type, this.mate.index, pts); // Has no grip, so does not need 'updating'? } @@ -556,7 +556,7 @@ export class Segment { pt = seg.item; } - const {item} = seg; + const { item } = seg; item['x' + anum] = pt.x + (pt.x - this.item['x' + num]); item['y' + anum] = pt.y + (pt.y - this.item['y' + num]); @@ -577,7 +577,7 @@ export class Segment { * @returns {void} */ moveCtrl (num, dx, dy) { - const {item} = this; + const { item } = this; item['x' + num] += dx; item['y' + num] += dy; @@ -656,7 +656,7 @@ export class Path { this.segs.push(segment); } - const {segs} = this; + const { segs } = this; let startI = null; for (let i = 0; i < len; i++) { @@ -742,7 +742,7 @@ export class Path { const seg = this.segs[index]; if (!seg.prev) { return; } - const {prev} = seg; + const { prev } = seg; let newseg, newX, newY; switch (seg.item.pathSegType) { case 4: { @@ -765,7 +765,7 @@ export class Path { const p12y = (p1y + p2y) / 2; newY = (p01y + p12y) / 2; newseg = this.elem.createSVGPathSegCurvetoCubicAbs(newX, newY, p0x, p0y, p01x, p01y); - const pts = [seg.item.x, seg.item.y, p12x, p12y, p2x, p2y]; + const pts = [ seg.item.x, seg.item.y, p12x, p12y, p2x, p2y ]; replacePathSegMethod(seg.type, index, pts); break; } @@ -783,10 +783,10 @@ export class Path { const list = this.elem.pathSegList; seg.show(false); - const {next} = seg; + const { next } = seg; if (seg.mate) { // Make the next point be the "M" point - const pt = [next.item.x, next.item.y]; + const pt = [ next.item.x, next.item.y ]; replacePathSegMethod(2, next.index, pt); // Reposition last node @@ -796,7 +796,7 @@ export class Path { } else if (!seg.prev) { // First node of open path, make next point the M // const {item} = seg; - const pt = [next.item.x, next.item.y]; + const pt = [ next.item.x, next.item.y ]; replacePathSegMethod(2, seg.next.index, pt); list.removeItem(index); } else { @@ -891,7 +891,7 @@ export class Path { // Selected seg const cur = this.segs[selPt]; - const {prev} = cur; + const { prev } = cur; if (!prev) { continue; } if (!newType) { // double-click, so just toggle @@ -914,7 +914,7 @@ export class Path { case 6: { if (cur.olditem) { const old = cur.olditem; - points = [curX, curY, old.x1, old.y1, old.x2, old.y2]; + points = [ curX, curY, old.x1, old.y1, old.x2, old.y2 ]; } else { const diffX = curX - prevX; const diffY = curY - prevY; @@ -930,11 +930,11 @@ export class Path { const ct1y = (prevY + (diffY / 3)); const ct2x = (curX - (diffX / 3)); const ct2y = (curY - (diffY / 3)); - points = [curX, curY, ct1x, ct1y, ct2x, ct2y]; + points = [ curX, curY, ct1x, ct1y, ct2x, ct2y ]; } break; } case 4: { - points = [curX, curY]; + points = [ curX, curY ]; // Store original prevve segment nums cur.olditem = cur.item; @@ -978,7 +978,7 @@ export class Path { * @returns {Path} */ update () { - const {elem} = this; + const { elem } = this; if (getRotationAngle(elem)) { this.matrix = getMatrix(elem); this.imatrix = this.matrix.inverse(); @@ -1001,8 +1001,8 @@ export class Path { */ endChanges (text) { if (isWebkit()) { editorContext_.resetD(this.elem); } - const cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text); - editorContext_.endChanges({cmd, elem: this.elem}); + const cmd = new ChangeElementCommand(this.elem, { d: this.last_d }, text); + editorContext_.endChanges({ cmd, elem: this.elem }); } /** @@ -1010,7 +1010,7 @@ export class Path { * @returns {void} */ addPtsToSelection (indexes) { - if (!Array.isArray(indexes)) { indexes = [indexes]; } + if (!Array.isArray(indexes)) { indexes = [ indexes ]; } indexes.forEach((index) => { const seg = this.segs[index]; if (seg.ptgrip && !this.selected_pts.includes(index) && index >= 0) { @@ -1030,7 +1030,7 @@ export class Path { } const closedSubpath = Path.subpathIsClosed(this.selected_pts[0]); - editorContext_.addPtsToSelection({grips, closedSubpath}); + editorContext_.addPtsToSelection({ grips, closedSubpath }); } // STATIC diff --git a/src/svgcanvas/path.js b/src/svgcanvas/path.js index facfaed4..367b1bd2 100644 --- a/src/svgcanvas/path.js +++ b/src/svgcanvas/path.js @@ -6,9 +6,9 @@ * @copyright 2011 Alexis Deveria, 2011 Jeff Schiller */ -import {getTransformList} from './svgtransformlist.js'; -import {shortFloat} from '../common/units.js'; -import {transformPoint} from './math.js'; +import { getTransformList } from './svgtransformlist.js'; +import { shortFloat } from '../common/units.js'; +import { transformPoint } from './math.js'; import { getRotationAngle, getBBox, getRefElem, findDefs, isNullish, @@ -25,15 +25,15 @@ import { } from './path-actions.js'; const segData = { - 2: ['x', 'y'], // PATHSEG_MOVETO_ABS - 4: ['x', 'y'], // PATHSEG_LINETO_ABS - 6: ['x', 'y', 'x1', 'y1', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_ABS - 8: ['x', 'y', 'x1', 'y1'], // PATHSEG_CURVETO_QUADRATIC_ABS - 10: ['x', 'y', 'r1', 'r2', 'angle', 'largeArcFlag', 'sweepFlag'], // PATHSEG_ARC_ABS - 12: ['x'], // PATHSEG_LINETO_HORIZONTAL_ABS - 14: ['y'], // PATHSEG_LINETO_VERTICAL_ABS - 16: ['x', 'y', 'x2', 'y2'], // PATHSEG_CURVETO_CUBIC_SMOOTH_ABS - 18: ['x', 'y'] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS + 2: [ 'x', 'y' ], // PATHSEG_MOVETO_ABS + 4: [ 'x', 'y' ], // PATHSEG_LINETO_ABS + 6: [ 'x', 'y', 'x1', 'y1', 'x2', 'y2' ], // PATHSEG_CURVETO_CUBIC_ABS + 8: [ 'x', 'y', 'x1', 'y1' ], // PATHSEG_CURVETO_QUADRATIC_ABS + 10: [ 'x', 'y', 'r1', 'r2', 'angle', 'largeArcFlag', 'sweepFlag' ], // PATHSEG_ARC_ABS + 12: [ 'x' ], // PATHSEG_LINETO_HORIZONTAL_ABS + 14: [ 'y' ], // PATHSEG_LINETO_VERTICAL_ABS + 16: [ 'x', 'y', 'x2', 'y2' ], // PATHSEG_CURVETO_CUBIC_SMOOTH_ABS + 18: [ 'x', 'y' ] // PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS }; /** @@ -236,7 +236,7 @@ let editorContext_ = null; export const init = function (editorContext) { editorContext_ = editorContext; - pathFuncs = [0, 'ClosePath']; + pathFuncs = [ 0, 'ClosePath' ]; const pathFuncsStrs = [ 'Moveto', 'Lineto', 'CurvetoCubic', 'CurvetoQuadratic', 'Arc', 'LinetoHorizontal', 'LinetoVertical', 'CurvetoCubicSmooth', 'CurvetoQuadraticSmooth' @@ -413,7 +413,7 @@ export const smoothControlPoints = function (ct1, ct2, pt) { nct2.x = r2 * Math.cos(newAngleb) + pt.x; nct2.y = r2 * Math.sin(newAngleb) + pt.y; - return [nct1, nct2]; + return [ nct1, nct2 ]; } return undefined; }; @@ -462,8 +462,8 @@ const getRotVals = function (x, y) { r = Math.sqrt(dx * dx + dy * dy); theta = Math.atan2(dy, dx) - angle; - return {x: r * Math.cos(theta) + newcx, - y: r * Math.sin(theta) + newcy}; + return { x: r * Math.cos(theta) + newcx, + y: r * Math.sin(theta) + newcy }; }; // If the path was rotated, we must now pay the piper: @@ -508,7 +508,7 @@ export const recalcRotatedPath = function () { if (type === 1) { continue; } const rvals = getRotVals(seg.x, seg.y), - points = [rvals.x, rvals.y]; + points = [ rvals.x, rvals.y ]; if (!isNullish(seg.x1) && !isNullish(seg.x2)) { const cVals1 = getRotVals(seg.x1, seg.y1); const cVals2 = getRotVals(seg.x2, seg.y2); @@ -578,7 +578,7 @@ export const reorientGrads = function (elem, m) { }; const newgrad = grad.cloneNode(true); - for (const [key, value] of Object.entries(gCoords)) { + for (const [ key, value ] of Object.entries(gCoords)) { newgrad.setAttribute(key, value); } newgrad.id = editorContext_.getNextId(); @@ -608,7 +608,7 @@ const pathMap = [ * @returns {string} */ export const convertPath = function (pth, toRel) { - const {pathSegList} = pth; + const { pathSegList } = pth; const len = pathSegList.numberOfItems; let curx = 0, cury = 0; let d = ''; @@ -650,7 +650,7 @@ export const convertPath = function (pth, toRel) { letter = 'L'; } // Convert to "line" for easier editing - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 14: // absolute vertical line (V) y -= cury; @@ -667,7 +667,7 @@ export const convertPath = function (pth, toRel) { letter = 'L'; } // Convert to "line" for easier editing - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 2: // absolute move (M) case 4: // absolute line (L) @@ -688,9 +688,9 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - if (type === 2 || type === 3) { lastM = [curx, cury]; } + if (type === 2 || type === 3) { lastM = [ curx, cury ]; } - d += pathDSegment(letter, [[x, y]]); + d += pathDSegment(letter, [ [ x, y ] ]); break; case 6: // absolute cubic (C) x -= curx; x1 -= curx; x2 -= curx; @@ -706,7 +706,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x1, y1], [x2, y2], [x, y]]); + d += pathDSegment(letter, [ [ x1, y1 ], [ x2, y2 ], [ x, y ] ]); break; case 8: // absolute quad (Q) x -= curx; x1 -= curx; @@ -722,7 +722,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x1, y1], [x, y]]); + d += pathDSegment(letter, [ [ x1, y1 ], [ x, y ] ]); break; // Fallthrough case 11: // relative elliptical arc (a) @@ -735,11 +735,11 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[seg.r1, seg.r2]], [ + d += pathDSegment(letter, [ [ seg.r1, seg.r2 ] ], [ seg.angle, (seg.largeArcFlag ? 1 : 0), (seg.sweepFlag ? 1 : 0) - ], [x, y]); + ], [ x, y ]); break; case 16: // absolute smooth cubic (S) x -= curx; x2 -= curx; @@ -755,7 +755,7 @@ export const convertPath = function (pth, toRel) { curx = x; cury = y; } - d += pathDSegment(letter, [[x2, y2], [x, y]]); + d += pathDSegment(letter, [ [ x2, y2 ], [ x, y ] ]); break; } // switch on path segment type } // for each segment diff --git a/src/svgcanvas/recalculate.js b/src/svgcanvas/recalculate.js index 84a3913e..f7384789 100644 --- a/src/svgcanvas/recalculate.js +++ b/src/svgcanvas/recalculate.js @@ -134,7 +134,7 @@ export const recalculateDimensions = function (selected) { while (k--) { const xform = tlist.getItem(k); if (xform.type === 1) { - mxs.push([xform.matrix, k]); + mxs.push([ xform.matrix, k ]); } else if (mxs.length) { mxs = []; } @@ -187,23 +187,23 @@ export const recalculateDimensions = function (selected) { let attrs = []; switch (selected.tagName) { case 'line': - attrs = ['x1', 'y1', 'x2', 'y2']; + attrs = [ 'x1', 'y1', 'x2', 'y2' ]; break; case 'circle': - attrs = ['cx', 'cy', 'r']; + attrs = [ 'cx', 'cy', 'r' ]; break; case 'ellipse': - attrs = ['cx', 'cy', 'rx', 'ry']; + attrs = [ 'cx', 'cy', 'rx', 'ry' ]; break; case 'foreignObject': case 'rect': case 'image': - attrs = ['width', 'height', 'x', 'y']; + attrs = [ 'width', 'height', 'x', 'y' ]; break; case 'use': case 'text': case 'tspan': - attrs = ['x', 'y']; + attrs = [ 'x', 'y' ]; break; case 'polygon': case 'polyline': { @@ -228,7 +228,7 @@ export const recalculateDimensions = function (selected) { Array.prototype.forEach.call(attrs, function (attr) { changes[attr] = selected.getAttribute(attr); }); - for (const [attr, val] of Object.entries(changes)) { + for (const [ attr, val ] of Object.entries(changes)) { changes[attr] = convertToNum(attr, val); } } else if (gsvg) { @@ -243,7 +243,7 @@ export const recalculateDimensions = function (selected) { // make a copy of initial values and include the transform if (isNullish(initial)) { initial = $.extend(true, {}, changes); - for (const [attr, val] of Object.entries(initial)) { + for (const [ attr, val ] of Object.entries(initial)) { initial[attr] = convertToNum(attr, val); } } @@ -652,7 +652,7 @@ export const recalculateDimensions = function (selected) { const gtlist = getTransformList(paint); const gmatrix = transformListToTransform(gtlist).matrix; m = matrixMultiply(m, gmatrix); - const mStr = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')'; + const mStr = 'matrix(' + [ m.a, m.b, m.c, m.d, m.e, m.f ].join(',') + ')'; paint.setAttribute(type + 'Transform', mStr); } } diff --git a/src/svgcanvas/sanitize.js b/src/svgcanvas/sanitize.js index 5b370dc8..3e77c2de 100644 --- a/src/svgcanvas/sanitize.js +++ b/src/svgcanvas/sanitize.js @@ -7,9 +7,9 @@ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller */ -import {getReverseNS, NS} from '../common/namespaces.js'; -import {isGecko} from '../common/browser.js'; -import {getHref, setHref, getUrlFromAttr} from './utilities.js'; +import { getReverseNS, NS } from '../common/namespaces.js'; +import { isGecko } from '../common/browser.js'; +import { getHref, setHref, getUrlFromAttr } from './utilities.js'; const REVERSE_NS = getReverseNS(); @@ -22,74 +22,74 @@ const REVERSE_NS = getReverseNS(); /* eslint-disable max-len */ const svgWhiteList_ = { // SVG Elements - a: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'xlink:href', 'xlink:title'], - circle: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'], - clipPath: ['class', 'clipPathUnits', 'id'], + a: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'xlink:href', 'xlink:title' ], + circle: [ 'class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'r', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], + clipPath: [ 'class', 'clipPathUnits', 'id' ], defs: [], - style: ['type'], + style: [ 'type' ], desc: [], - ellipse: ['class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'], - feBlend: ['in', 'in2'], - feComposite: ['operator', 'result', 'in2'], - feFlood: ['flood-color', 'in'], - feGaussianBlur: ['class', 'color-interpolation-filters', 'id', 'requiredFeatures', 'stdDeviation'], + ellipse: [ 'class', 'clip-path', 'clip-rule', 'cx', 'cy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], + feBlend: [ 'in', 'in2' ], + feComposite: [ 'operator', 'result', 'in2' ], + feFlood: [ 'flood-color', 'in' ], + feGaussianBlur: [ 'class', 'color-interpolation-filters', 'id', 'requiredFeatures', 'stdDeviation' ], feMerge: [], - feMergeNode: ['in'], - feMorphology: ['class', 'in', 'operator', 'radius'], - feOffset: ['dx', 'in', 'dy', 'result'], - filter: ['class', 'color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'id', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y'], - foreignObject: ['class', 'font-size', 'height', 'id', 'opacity', 'requiredFeatures', 'style', 'transform', 'width', 'x', 'y'], - g: ['class', 'clip-path', 'clip-rule', 'id', 'display', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor'], - image: ['class', 'clip-path', 'clip-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'style', 'systemLanguage', 'transform', 'width', 'x', 'xlink:href', 'xlink:title', 'y'], - line: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'x1', 'x2', 'y1', 'y2'], - linearGradient: ['class', 'id', 'gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2'], - marker: ['id', 'class', 'markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'systemLanguage', 'viewBox'], - mask: ['class', 'height', 'id', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y'], - metadata: ['class', 'id'], - path: ['class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'], - pattern: ['class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y'], - polygon: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'], - polyline: ['class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform'], - radialGradient: ['class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href'], - rect: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y'], - stop: ['class', 'id', 'offset', 'requiredFeatures', 'stop-color', 'stop-opacity', 'style', 'systemLanguage'], - svg: ['class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y'], - switch: ['class', 'id', 'requiredFeatures', 'systemLanguage'], - symbol: ['class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox'], - text: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y'], - textPath: ['class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href'], + feMergeNode: [ 'in' ], + feMorphology: [ 'class', 'in', 'operator', 'radius' ], + feOffset: [ 'dx', 'in', 'dy', 'result' ], + filter: [ 'class', 'color-interpolation-filters', 'filterRes', 'filterUnits', 'height', 'id', 'primitiveUnits', 'requiredFeatures', 'width', 'x', 'xlink:href', 'y' ], + foreignObject: [ 'class', 'font-size', 'height', 'id', 'opacity', 'requiredFeatures', 'style', 'transform', 'width', 'x', 'y' ], + g: [ 'class', 'clip-path', 'clip-rule', 'id', 'display', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'font-family', 'font-size', 'font-style', 'font-weight', 'text-anchor' ], + image: [ 'class', 'clip-path', 'clip-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'style', 'systemLanguage', 'transform', 'width', 'x', 'xlink:href', 'xlink:title', 'y' ], + line: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'x1', 'x2', 'y1', 'y2' ], + linearGradient: [ 'class', 'id', 'gradientTransform', 'gradientUnits', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'x1', 'x2', 'xlink:href', 'y1', 'y2' ], + marker: [ 'id', 'class', 'markerHeight', 'markerUnits', 'markerWidth', 'orient', 'preserveAspectRatio', 'refX', 'refY', 'systemLanguage', 'viewBox' ], + mask: [ 'class', 'height', 'id', 'maskContentUnits', 'maskUnits', 'width', 'x', 'y' ], + metadata: [ 'class', 'id' ], + path: [ 'class', 'clip-path', 'clip-rule', 'd', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], + pattern: [ 'class', 'height', 'id', 'patternContentUnits', 'patternTransform', 'patternUnits', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xlink:href', 'y' ], + polygon: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'id', 'class', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], + polyline: [ 'class', 'clip-path', 'clip-rule', 'id', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'opacity', 'points', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform' ], + radialGradient: [ 'class', 'cx', 'cy', 'fx', 'fy', 'gradientTransform', 'gradientUnits', 'id', 'r', 'requiredFeatures', 'spreadMethod', 'systemLanguage', 'xlink:href' ], + rect: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'opacity', 'requiredFeatures', 'rx', 'ry', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'width', 'x', 'y' ], + stop: [ 'class', 'id', 'offset', 'requiredFeatures', 'stop-color', 'stop-opacity', 'style', 'systemLanguage' ], + svg: [ 'class', 'clip-path', 'clip-rule', 'filter', 'id', 'height', 'mask', 'preserveAspectRatio', 'requiredFeatures', 'style', 'systemLanguage', 'viewBox', 'width', 'x', 'xmlns', 'xmlns:se', 'xmlns:xlink', 'xmlns:oi', 'oi:animations', 'y' ], + switch: [ 'class', 'id', 'requiredFeatures', 'systemLanguage' ], + symbol: [ 'class', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'opacity', 'preserveAspectRatio', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'transform', 'viewBox' ], + text: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'transform', 'x', 'xml:space', 'y' ], + textPath: [ 'class', 'id', 'method', 'requiredFeatures', 'spacing', 'startOffset', 'style', 'systemLanguage', 'transform', 'xlink:href' ], title: [], - tspan: ['class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y'], - use: ['class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'transform', 'width', 'x', 'xlink:href', 'y'], + tspan: [ 'class', 'clip-path', 'clip-rule', 'dx', 'dy', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'font-family', 'font-size', 'font-style', 'font-weight', 'id', 'mask', 'opacity', 'requiredFeatures', 'rotate', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'systemLanguage', 'text-anchor', 'textLength', 'transform', 'x', 'xml:space', 'y' ], + use: [ 'class', 'clip-path', 'clip-rule', 'fill', 'fill-opacity', 'fill-rule', 'filter', 'height', 'id', 'mask', 'stroke', 'stroke-dasharray', 'stroke-dashoffset', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'stroke-opacity', 'stroke-width', 'style', 'transform', 'width', 'x', 'xlink:href', 'y' ], // MathML Elements - annotation: ['encoding'], - 'annotation-xml': ['encoding'], - maction: ['actiontype', 'other', 'selection'], - math: ['class', 'id', 'display', 'xmlns'], - menclose: ['notation'], + annotation: [ 'encoding' ], + 'annotation-xml': [ 'encoding' ], + maction: [ 'actiontype', 'other', 'selection' ], + math: [ 'class', 'id', 'display', 'xmlns' ], + menclose: [ 'notation' ], merror: [], - mfrac: ['linethickness'], - mi: ['mathvariant'], + mfrac: [ 'linethickness' ], + mi: [ 'mathvariant' ], mmultiscripts: [], mn: [], - mo: ['fence', 'lspace', 'maxsize', 'minsize', 'rspace', 'stretchy'], + mo: [ 'fence', 'lspace', 'maxsize', 'minsize', 'rspace', 'stretchy' ], mover: [], - mpadded: ['lspace', 'width', 'height', 'depth', 'voffset'], + mpadded: [ 'lspace', 'width', 'height', 'depth', 'voffset' ], mphantom: [], mprescripts: [], mroot: [], - mrow: ['xlink:href', 'xlink:type', 'xmlns:xlink'], - mspace: ['depth', 'height', 'width'], + mrow: [ 'xlink:href', 'xlink:type', 'xmlns:xlink' ], + mspace: [ 'depth', 'height', 'width' ], msqrt: [], - mstyle: ['displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel'], + mstyle: [ 'displaystyle', 'mathbackground', 'mathcolor', 'mathvariant', 'scriptlevel' ], msub: [], msubsup: [], msup: [], - mtable: ['align', 'columnalign', 'columnlines', 'columnspacing', 'displaystyle', 'equalcolumns', 'equalrows', 'frame', 'rowalign', 'rowlines', 'rowspacing', 'width'], - mtd: ['columnalign', 'columnspan', 'rowalign', 'rowspan'], + mtable: [ 'align', 'columnalign', 'columnlines', 'columnspacing', 'displaystyle', 'equalcolumns', 'equalrows', 'frame', 'rowalign', 'rowlines', 'rowspacing', 'width' ], + mtd: [ 'columnalign', 'columnspan', 'rowalign', 'rowspan' ], mtext: [], - mtr: ['columnalign', 'rowalign'], + mtr: [ 'columnalign', 'rowalign' ], munder: [], munderover: [], none: [], @@ -99,9 +99,9 @@ const svgWhiteList_ = { // Produce a Namespace-aware version of svgWhitelist const svgWhiteListNS_ = {}; -Object.entries(svgWhiteList_).forEach(function ([elt, atts]) { +Object.entries(svgWhiteList_).forEach(function ([ elt, atts ]) { const attNS = {}; - Object.entries(atts).forEach(function ([_i, att]) { + Object.entries(atts).forEach(function ([ _i, att ]) { if (att.includes(':')) { const v = att.split(':'); attNS[v[1]] = NS[(v[0]).toUpperCase()]; @@ -166,7 +166,7 @@ export const sanitizeSvg = function (node) { // Bypassing the whitelist to allow se: prefixes. // Is there a more appropriate way to do this? if (attrName.startsWith('se:') || attrName.startsWith('data-')) { - seAttrs.push([attrName, attr.value]); + seAttrs.push([ attrName, attr.value ]); } node.removeAttributeNS(attrNsURI, attrLocalName); } @@ -190,7 +190,7 @@ export const sanitizeSvg = function (node) { const props = attr.value.split(';'); let p = props.length; while (p--) { - const [name, val] = props[p].split(':'); + const [ name, val ] = props[p].split(':'); const styleAttrName = (name || '').trim(); const styleAttrVal = (val || '').trim(); // Now check that this attribute is supported @@ -202,7 +202,7 @@ export const sanitizeSvg = function (node) { } } - Object.values(seAttrs).forEach(([att, val]) => { + Object.values(seAttrs).forEach(([ att, val ]) => { node.setAttributeNS(NS.SE, att, val); }); @@ -210,8 +210,8 @@ export const sanitizeSvg = function (node) { // (but not for links) const href = getHref(node); if (href && - ['filter', 'linearGradient', 'pattern', - 'radialGradient', 'textPath', 'use'].includes(node.nodeName) && href[0] !== '#') { + [ 'filter', 'linearGradient', 'pattern', + 'radialGradient', 'textPath', 'use' ].includes(node.nodeName) && href[0] !== '#') { // remove the attribute (but keep the element) setHref(node, ''); node.removeAttributeNS(NS.XLINK, 'href'); @@ -224,7 +224,7 @@ export const sanitizeSvg = function (node) { } // if the element has attributes pointing to a non-local reference, // need to remove the attribute - Object.values(['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke'], function (attr) { + Object.values([ 'clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke' ], function (attr) { let val = node.getAttribute(attr); if (val) { val = getUrlFromAttr(val); diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js index 52282862..6d1c6355 100644 --- a/src/svgcanvas/select.js +++ b/src/svgcanvas/select.js @@ -140,7 +140,7 @@ export class Selector { if (tagName === 'g' && !dataStorage.has(selected, 'gsvg')) { // The bbox for a group does not include stroke vals, so we // get the bbox based on its children. - const strokedBbox = getStrokedBBox([selected.childNodes]); + const strokedBbox = getStrokedBBox([ selected.childNodes ]); if (strokedBbox) { bbox = strokedBbox; } @@ -203,22 +203,22 @@ export class Selector { ' ' + nbax + ',' + (nbay + nbah) + 'z'; selectedBox.setAttribute('d', dstr); - const xform = angle ? 'rotate(' + [angle, cx, cy].join(',') + ')' : ''; + const xform = angle ? 'rotate(' + [ angle, cx, cy ].join(',') + ')' : ''; this.selectorGroup.setAttribute('transform', xform); // TODO(codedread): Is this needed? // if (selected === selectedElements[0]) { this.gripCoords = { - nw: [nbax, nbay], - ne: [nbax + nbaw, nbay], - sw: [nbax, nbay + nbah], - se: [nbax + nbaw, nbay + nbah], - n: [nbax + (nbaw) / 2, nbay], - w: [nbax, nbay + (nbah) / 2], - e: [nbax + nbaw, nbay + (nbah) / 2], - s: [nbax + (nbaw) / 2, nbay + nbah] + nw: [ nbax, nbay ], + ne: [ nbax + nbaw, nbay ], + sw: [ nbax, nbay + nbah ], + se: [ nbax + nbaw, nbay + nbah ], + n: [ nbax + (nbaw) / 2, nbay ], + w: [ nbax, nbay + (nbah) / 2 ], + e: [ nbax + nbaw, nbay + (nbah) / 2 ], + s: [ nbax + (nbaw) / 2, nbay + nbah ] }; - Object.entries(this.gripCoords).forEach(([dir, coords]) => { + Object.entries(this.gripCoords).forEach(([ dir, coords ]) => { selectedGrips[dir].setAttribute('cx', coords[0]); selectedGrips[dir].setAttribute('cy', coords[1]); }); @@ -373,7 +373,7 @@ export class SelectorManager { if (document.getElementById('canvasBackground')) { return; } - const [width, height] = config_.dimensions; + const [ width, height ] = config_.dimensions; const canvasbg = svgFactory_.createSVGElement({ element: 'svg', attr: { diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js index 6983c44e..141b2304 100644 --- a/src/svgcanvas/selected-elem.js +++ b/src/svgcanvas/selected-elem.js @@ -52,7 +52,7 @@ export const init = function (elementContext) { * @returns {void} */ export const moveToTopSelectedElem = function () { - const [selected] = elementContext_.getSelectedElements(); + const [ selected ] = elementContext_.getSelectedElements(); if (!isNullish(selected)) { const t = selected; const oldParent = t.parentNode; @@ -62,7 +62,7 @@ export const moveToTopSelectedElem = function () { // event handler. if (oldNextSibling !== t.nextSibling) { elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'top')); - elementContext_.call('changed', [t]); + elementContext_.call('changed', [ t ]); } } }; @@ -75,7 +75,7 @@ export const moveToTopSelectedElem = function () { * @returns {void} */ export const moveToBottomSelectedElem = function () { - const [selected] = elementContext_.getSelectedElements(); + const [ selected ] = elementContext_.getSelectedElements(); if (!isNullish(selected)) { let t = selected; const oldParent = t.parentNode; @@ -94,7 +94,7 @@ export const moveToBottomSelectedElem = function () { // event handler. if (oldNextSibling !== t.nextSibling) { elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'bottom')); - elementContext_.call('changed', [t]); + elementContext_.call('changed', [ t ]); } } }; @@ -116,7 +116,7 @@ export const moveUpDownSelected = function (dir) { // curBBoxes = []; let closest, foundCur; // jQuery sorts this list - const list = elementContext_.getIntersectionList(getStrokedBBoxDefaultVisible([selected])); + const list = elementContext_.getIntersectionList(getStrokedBBoxDefaultVisible([ selected ])); if (dir === 'Down') { list.reverse(); } Array.prototype.forEach.call(list, function (el) { @@ -143,7 +143,7 @@ export const moveUpDownSelected = function (dir) { // event handler. if (oldNextSibling !== t.nextSibling) { elementContext_.addCommandToHistory(new MoveElementCommand(t, oldNextSibling, oldParent, 'Move ' + dir)); - elementContext_.call('changed', [t]); + elementContext_.call('changed', [ t ]); } }; @@ -298,7 +298,7 @@ export const alignSelectedElements = function (type, relativeTo) { for (let i = 0; i < len; ++i) { if (isNullish(selectedElements[i])) { break; } const elem = selectedElements[i]; - bboxes[i] = getStrokedBBoxDefaultVisible([elem]); + bboxes[i] = getStrokedBBoxDefaultVisible([ elem ]); // now bbox is axis-aligned and handles rotation switch (relativeTo) { @@ -505,7 +505,7 @@ export const groupSelectedElements = function (type, urlArg) { if (!batchCmd.isEmpty()) { elementContext_.addCommandToHistory(batchCmd); } // update selection - elementContext_.selectOnly([g], true); + elementContext_.selectOnly([ g ], true); }; /** @@ -550,7 +550,7 @@ export const pushGroupProperty = function (g, undoable) { if (gattrs.opacity !== null && gattrs.opacity !== 1) { // const c_opac = elem.getAttribute('opacity') || 1; const newOpac = Math.round((elem.getAttribute('opacity') || 1) * gattrs.opacity * 100) / 100; - elementContext_.changeSelectedAttribute('opacity', newOpac, [elem]); + elementContext_.changeSelectedAttribute('opacity', newOpac, [ elem ]); } if (gattrs.filter) { @@ -581,11 +581,11 @@ export const pushGroupProperty = function (g, undoable) { // Change this in future for different filters const suffix = (gfilter.firstChild.tagName === 'feGaussianBlur') ? 'blur' : 'filter'; gfilter.id = elem.id + '_' + suffix; - elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [elem]); + elementContext_.changeSelectedAttribute('filter', 'url(#' + gfilter.id + ')', [ elem ]); // Update blur value if (cblur) { - elementContext_.changeSelectedAttribute('stdDeviation', cblur, [gfilter.firstChild]); + elementContext_.changeSelectedAttribute('stdDeviation', cblur, [ gfilter.firstChild ]); elementContext_.getCanvas().setBlurOffsets(gfilter, cblur); } } @@ -731,12 +731,12 @@ export const convertToGroup = function (elem) { xform.setTranslate(pt.x, pt.y); tlist.appendItem(xform); recalculateDimensions(elem); - elementContext_.call('selected', [elem]); + elementContext_.call('selected', [ elem ]); } else if (dataStorage.has($elem, 'symbol')) { elem = dataStorage.get($elem, 'symbol'); ts = $elem.attr('transform'); - const pos = $elem.attr(['x', 'y']); + const pos = $elem.attr([ 'x', 'y' ]); const vb = elem.getAttribute('viewBox'); @@ -832,7 +832,7 @@ export const convertToGroup = function (elem) { if (!el.id) { el.id = elementContext_.getNextId(); } }); - elementContext_.selectOnly([g]); + elementContext_.selectOnly([ g ]); const cm = pushGroupProperty(g, true); if (cm) { @@ -1019,6 +1019,6 @@ export const cycleElement = function (next) { } } } - elementContext_.getCanvas().selectOnly([elem], true); + elementContext_.getCanvas().selectOnly([ elem ], true); elementContext_.call('selected', selectedElements); }; diff --git a/src/svgcanvas/selection.js b/src/svgcanvas/selection.js index 098f22cb..31f8170e 100644 --- a/src/svgcanvas/selection.js +++ b/src/svgcanvas/selection.js @@ -136,7 +136,7 @@ export const getMouseTargetMethod = function (evt) { // for foreign content, go up until we find the foreignObject // WebKit browsers set the mouse target to the svgcanvas div - if ([NS.MATH, NS.HTML].includes(mouseTarget.namespaceURI) && + if ([ NS.MATH, NS.HTML ].includes(mouseTarget.namespaceURI) && mouseTarget.id !== 'svgcanvas' ) { while (mouseTarget.nodeName !== 'foreignObject') { @@ -151,7 +151,7 @@ export const getMouseTargetMethod = function (evt) { const svgRoot = selectionContext_.getSVGRoot(); const container = selectionContext_.getDOMContainer(); const content = selectionContext_.getSVGContent(); - if ([svgRoot, container, content, currentLayer].includes(mouseTarget)) { + if ([ svgRoot, container, content, currentLayer ].includes(mouseTarget)) { return selectionContext_.getSVGRoot(); } @@ -207,7 +207,7 @@ export const getMouseTargetMethod = function (evt) { */ export const runExtensionsMethod = function (action, vars, returnArray, nameFilter) { let result = returnArray ? [] : false; - for (const [name, ext] of Object.entries(selectionContext_.getExtensions())) { + for (const [ name, ext ] of Object.entries(selectionContext_.getExtensions())) { if (nameFilter && !nameFilter(name)) { return; } @@ -242,7 +242,7 @@ export const getVisibleElementsAndBBoxes = function (parent) { const elements = parent.children; Array.prototype.forEach.call(elements, function (elem) { if (elem.getBBox) { - contentElems.push({ elem, bbox: getStrokedBBoxDefaultVisible([elem]) }); + contentElems.push({ elem, bbox: getStrokedBBoxDefaultVisible([ elem ]) }); } }); return contentElems.reverse(); @@ -271,7 +271,7 @@ export const getIntersectionListMethod = function (rect) { rubberBBox = selectionContext_.getRubberBox().getBBox(); const bb = selectionContext_.getSVGContent().createSVGRect(); - ['x', 'y', 'width', 'height', 'top', 'right', 'bottom', 'left'].forEach((o) => { + [ 'x', 'y', 'width', 'height', 'top', 'right', 'bottom', 'left' ].forEach((o) => { bb[o] = rubberBBox[o] / currentZoom; }); rubberBBox = bb; @@ -339,7 +339,7 @@ export const prepareSvg = function (newDoc) { selectionContext_.getCanvas().sanitizeSvg(newDoc.documentElement); // convert paths into absolute commands - const paths = [...newDoc.getElementsByTagNameNS(NS.SVG, 'path')]; + const paths = [ ...newDoc.getElementsByTagNameNS(NS.SVG, 'path') ]; paths.forEach((path) => { path.setAttribute('d', selectionContext_.getCanvas().pathActions.convertPath(path)); selectionContext_.getCanvas().pathActions.fixEnd(path); diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js index f8b0b70f..2bb9d63e 100644 --- a/src/svgcanvas/svg-exec.js +++ b/src/svgcanvas/svg-exec.js @@ -74,7 +74,7 @@ export const svgCanvasToString = function () { // Move out of in-group editing mode if (svgContext_.getCurrentGroup()) { draw.leaveContext(); - svgContext_.getCanvas().selectOnly([svgContext_.getCurrentGroup()]); + svgContext_.getCanvas().selectOnly([ svgContext_.getCurrentGroup() ]); } const nakedSvgs = []; @@ -124,7 +124,7 @@ export const svgToString = function (elem, indent) { if (elem) { cleanupElement(elem); - const attrs = [...elem.attributes]; + const attrs = [ ...elem.attributes ]; const childs = elem.childNodes; attrs.sort((a, b) => { return a.name > b.name ? -1 : 1; @@ -171,7 +171,7 @@ export const svgToString = function (elem, indent) { out.push(' xmlns:' + nsMap[uri] + '="' + uri + '"'); } if (el.attributes.length > 0) { - for (const [, attr] of Object.entries(el.attributes)) { + for (const [ , attr ] of Object.entries(el.attributes)) { const u = attr.namespaceURI; if (u && !nsuris[u] && nsMap[u] !== 'xmlns' && nsMap[u] !== 'xml') { nsuris[u] = true; @@ -182,7 +182,7 @@ export const svgToString = function (elem, indent) { }); let i = attrs.length; - const attrNames = ['width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow']; + const attrNames = [ 'width', 'height', 'xmlns', 'x', 'y', 'viewBox', 'id', 'overflow' ]; while (i--) { const attr = attrs[i]; const attrVal = toXml(attr.value); @@ -201,7 +201,7 @@ export const svgToString = function (elem, indent) { // Skip empty defs if (elem.nodeName === 'defs' && !elem.firstChild) { return ''; } - const mozAttrs = ['-moz-math-font-style', '_moz-math-font-style']; + const mozAttrs = [ '-moz-math-font-style', '_moz-math-font-style' ]; for (let i = attrs.length - 1; i >= 0; i--) { const attr = attrs[i]; let attrVal = toXml(attr.value); @@ -421,7 +421,7 @@ export const setSvgString = function (xmlString, preventUndo) { attrs.height = vb[3]; // handle content that doesn't have a viewBox } else { - ['width', 'height'].forEach(function (dim) { + [ 'width', 'height' ].forEach(function (dim) { // Set to 100 if not given const val = content.getAttribute(dim) || '100%'; if (String(val).substr(-1) === '%') { @@ -457,7 +457,7 @@ export const setSvgString = function (xmlString, preventUndo) { if (attrs.width <= 0) { attrs.width = 100; } if (attrs.height <= 0) { attrs.height = 100; } - for (const [key, value] of Object.entries(attrs)) { + for (const [ key, value ] of Object.entries(attrs)) { content.setAttribute(key, value); } this.contentW = attrs.width; @@ -480,7 +480,7 @@ export const setSvgString = function (xmlString, preventUndo) { svgContext_.getSVGRoot().append(svgContext_.getCanvas().selectorManager.selectorParentGroup); if (!preventUndo) svgContext_.addCommandToHistory(batchCmd); - svgContext_.call('changed', [svgContext_.getSVGContent()]); + svgContext_.call('changed', [ svgContext_.getSVGContent() ]); } catch (e) { console.log(e); return false; @@ -542,7 +542,7 @@ export const importSvgString = function (xmlString) { innerh = convertToNum('height', svg.getAttribute('height')), innervb = svg.getAttribute('viewBox'), // if no explicit viewbox, create one out of the width and height - vb = innervb ? innervb.split(' ') : [0, 0, innerw, innerh]; + vb = innervb ? innervb.split(' ') : [ 0, 0, innerw, innerh ]; for (j = 0; j < 4; ++j) { vb[j] = Number(vb[j]); } @@ -602,14 +602,14 @@ export const importSvgString = function (xmlString) { recalculateDimensions(useEl); dataStorage.put(useEl, 'symbol', symbol); dataStorage.put(useEl, 'ref', symbol); - svgContext_.getCanvas().addToSelection([useEl]); + svgContext_.getCanvas().addToSelection([ useEl ]); // TODO: Find way to add this in a recalculateDimensions-parsable way // if (vb[0] !== 0 || vb[1] !== 0) { // ts = 'translate(' + (-vb[0]) + ',' + (-vb[1]) + ') ' + ts; // } svgContext_.addCommandToHistory(batchCmd); - svgContext_.call('changed', [svgContext_.getSVGContent()]); + svgContext_.call('changed', [ svgContext_.getSVGContent() ]); } catch (e) { console.log(e); return null; @@ -712,7 +712,7 @@ function getIssues() { issueList.text = uiStrings.exportNoText; } - for (const [sel, descr] of Object.entries(issueList)) { + for (const [ sel, descr ] of Object.entries(issueList)) { if (content.querySelectorAll(sel).length) { issueCodes.push(sel); issues.push(descr); @@ -844,7 +844,7 @@ export const exportPDF = async ( const doc = jsPDF({ orientation, unit, - format: [res.w, res.h] + format: [ res.w, res.h ] // , compressPdf: true }); const docTitle = svgContext_.getCanvas().getDocumentTitle(); @@ -886,7 +886,7 @@ export const uniquifyElemsMethod = function (g) { // // Problem #1: if svg_1 gets renamed, we do not update the polyline's se:connector attribute // Problem #2: if the polyline svg_7 gets renamed, we do not update the marker id nor the polyline's marker-end attribute - const refElems = ['filter', 'linearGradient', 'pattern', 'radialGradient', 'symbol', 'textPath', 'use']; + const refElems = [ 'filter', 'linearGradient', 'pattern', 'radialGradient', 'symbol', 'textPath', 'use' ]; walkTree(g, function (n) { // if it's an element node @@ -1005,7 +1005,7 @@ export const removeUnusedDefElemsMethod = function () { const defelemUses = []; let numRemoved = 0; - const attrs = ['fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end']; + const attrs = [ 'fill', 'stroke', 'filter', 'marker-start', 'marker-mid', 'marker-end' ]; const alen = attrs.length; const allEls = svgContext_.getSVGContent().getElementsByTagNameNS(NS.SVG, '*'); diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 6285db1c..2ba58bd2 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -121,7 +121,7 @@ const { } = hstry; const visElems = 'a,circle,ellipse,foreignObject,g,image,line,path,polygon,polyline,rect,svg,text,tspan,use'; -const refAttrs = ['clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke']; +const refAttrs = [ 'clip-path', 'fill', 'filter', 'marker-end', 'marker-mid', 'marker-start', 'mask', 'stroke' ]; if (!window.console) { window.console = {}; @@ -175,7 +175,7 @@ class SvgCanvas { const curConfig = { show_outside_canvas: true, selectNew: true, - dimensions: [640, 480] + dimensions: [ 640, 480 ] }; // Update config with new one if given @@ -740,7 +740,7 @@ class SvgCanvas { */ endChanges({ cmd, elem }) { addCommandToHistory(cmd); - call('changed', [elem]); + call('changed', [ elem ]); }, getCurrentZoom, getId, @@ -1109,7 +1109,7 @@ class SvgCanvas { * @returns {void} */ const logMatrix = function (m) { - console.log([m.a, m.b, m.c, m.d, m.e, m.f]); + console.log([ m.a, m.b, m.c, m.d, m.e, m.f ]); }; // Root Current Transformation Matrix in user units @@ -1645,7 +1645,7 @@ class SvgCanvas { setLayerVisibility, moveSelectedToLayer, mergeLayer, mergeAllLayers, leaveContext, setContext }; - Object.entries(dr).forEach(([prop, propVal]) => { + Object.entries(dr).forEach(([ prop, propVal ]) => { canvas[prop] = propVal; }); draw.init( @@ -1673,7 +1673,7 @@ class SvgCanvas { * @returns {void} */ changeSVGContent() { - call('changed', [svgcontent]); + call('changed', [ svgcontent ]); } } ); diff --git a/src/svgcanvas/svgroot.js b/src/svgcanvas/svgroot.js index e42e4c0e..fcc5cd38 100644 --- a/src/svgcanvas/svgroot.js +++ b/src/svgcanvas/svgroot.js @@ -5,8 +5,8 @@ * * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller */ -import {NS} from '../common/namespaces.js'; -import {text2xml} from './utilities.js'; +import { NS } from '../common/namespaces.js'; +import { text2xml } from './utilities.js'; /** * @function module:svgcanvas.svgRootElement svgRootElement the svg node and its children. diff --git a/src/svgcanvas/svgtransformlist.js b/src/svgcanvas/svgtransformlist.js index 09083254..d1761bf2 100644 --- a/src/svgcanvas/svgtransformlist.js +++ b/src/svgcanvas/svgtransformlist.js @@ -7,8 +7,8 @@ * @copyright 2010 Alexis Deveria, 2010 Jeff Schiller */ -import {NS} from '../common/namespaces.js'; -import {supportsNativeTransformLists} from '../common/browser.js'; +import { NS } from '../common/namespaces.js'; +import { supportsNativeTransformLists } from '../common/browser.js'; const svgroot = document.createElementNS(NS.SVG, 'svg'); @@ -22,7 +22,7 @@ function transformToString (xform) { let text = ''; switch (xform.type) { case 1: // MATRIX - text = 'matrix(' + [m.a, m.b, m.c, m.d, m.e, m.f].join(',') + ')'; + text = 'matrix(' + [ m.a, m.b, m.c, m.d, m.e, m.f ].join(',') + ')'; break; case 2: // TRANSLATE text = 'translate(' + m.e + ',' + m.f + ')'; @@ -175,7 +175,7 @@ export class SVGTransformList { }); const xform = svgroot.createSVGTransform(); const fname = 'set' + name.charAt(0).toUpperCase() + name.slice(1); - const values = name === 'matrix' ? [mtx] : valArr; + const values = name === 'matrix' ? [ mtx ] : valArr; if (name === 'scale' && values.length === 1) { values.push(values[0]); @@ -222,7 +222,7 @@ export class SVGTransformList { initialize (newItem) { this.numberOfItems = 1; this._removeFromOtherLists(newItem); - this._xforms = [newItem]; + this._xforms = [ newItem ]; } /** diff --git a/src/svgcanvas/text-actions.js b/src/svgcanvas/text-actions.js index de11ffd2..f54080d8 100644 --- a/src/svgcanvas/text-actions.js +++ b/src/svgcanvas/text-actions.js @@ -6,7 +6,7 @@ */ -import {NS} from '../common/namespaces.js'; +import { NS } from '../common/namespaces.js'; import { transformPoint, getMatrix } from './math.js'; @@ -424,8 +424,8 @@ export const textActionsMethod = (function () { textActionsContext_.getCanvas().clearSelection(); curtext.style.cursor = 'move'; - textActionsContext_.call('selected', [curtext]); - textActionsContext_.getCanvas().addToSelection([curtext], true); + textActionsContext_.call('selected', [ curtext ]); + textActionsContext_.getCanvas().addToSelection([ curtext ], true); } if (curtext && !curtext.textContent.length) { // No content, so delete @@ -491,7 +491,7 @@ export const textActionsMethod = (function () { curtext.addEventListener("dblclick", selectWord); if (!len) { - end = {x: textbb.x + (textbb.width / 2), width: 0}; + end = { x: textbb.x + (textbb.width / 2), width: 0 }; } for (i = 0; i < len; i++) { diff --git a/src/svgcanvas/undo.js b/src/svgcanvas/undo.js index 9852190e..8dd532a2 100644 --- a/src/svgcanvas/undo.js +++ b/src/svgcanvas/undo.js @@ -142,7 +142,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele } elems = elems || selectedElements; let i = elems.length; - const noXYElems = ['g', 'polyline', 'path']; + const noXYElems = [ 'g', 'polyline', 'path' ]; // const goodGAttrs = ['transform', 'opacity', 'filter']; while (i--) { @@ -151,7 +151,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele // Set x,y vals on elements that don't have them if ((attr === 'x' || attr === 'y') && noXYElems.includes(elem.tagName)) { - const bbox = getStrokedBBoxDefaultVisible([elem]); + const bbox = getStrokedBBoxDefaultVisible([ elem ]); const diffX = attr === 'x' ? newValue - bbox.x : 0; const diffY = attr === 'y' ? newValue - bbox.y : 0; undoContext_.getCanvas().moveSelectedElements(diffX * currentZoom, diffY * currentZoom, true); @@ -213,7 +213,7 @@ export const changeSelectedAttributeNoUndoMethod = function (attr, newValue, ele if (isGecko() && elem.nodeName === 'text' && (/rotate/).test(elem.getAttribute('transform')) && - (String(newValue).startsWith('url') || (['font-size', 'font-family', 'x', 'y'].includes(attr) && elem.textContent))) { + (String(newValue).startsWith('url') || ([ 'font-size', 'font-family', 'x', 'y' ].includes(attr) && elem.textContent))) { elem = ffClone(elem); } // Timeout needed for Opera & Firefox diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index f1e6ad2e..d2afe467 100644 --- a/src/svgcanvas/utilities.js +++ b/src/svgcanvas/utilities.js @@ -281,7 +281,7 @@ export const dataURLToObjectURL = function (dataurl) { while (n--) { u8arr[n] = bstr.charCodeAt(n); } - const blob = new Blob([u8arr], { type: mime }); + const blob = new Blob([ u8arr ], { type: mime }); return URL.createObjectURL(blob); }; @@ -305,7 +305,7 @@ export const blankPageObjectURL = (function () { if (typeof Blob === 'undefined') { return ''; } - const blob = new Blob(['SVG-edit '], { type: 'text/html' }); + const blob = new Blob([ 'SVG-edit ' ], { type: 'text/html' }); return createObjectURL(blob); })(); @@ -317,7 +317,7 @@ export const blankPageObjectURL = (function () { */ export const convertToXMLReferences = function (input) { let output = ''; - [...input].forEach((ch) => { + [ ...input ].forEach((ch) => { const c = ch.charCodeAt(); output += (c <= 127) ? ch : `&#${c};`; }); @@ -495,9 +495,9 @@ export const getPathBBox = function (path) { const seglist = path.pathSegList; const tot = seglist.numberOfItems; - const bounds = [[], []]; + const bounds = [ [], [] ]; const start = seglist.getItem(0); - let P0 = [start.x, start.y]; + let P0 = [ start.x, start.y ]; const getCalc = function (j, P1, P2, P3) { return function (t) { @@ -518,9 +518,9 @@ export const getPathBBox = function (path) { bounds[1].push(P0[1]); if (seg.x1) { - const P1 = [seg.x1, seg.y1], - P2 = [seg.x2, seg.y2], - P3 = [seg.x, seg.y]; + const P1 = [ seg.x1, seg.y1 ], + P2 = [ seg.x2, seg.y2 ], + P3 = [ seg.x, seg.y ]; for (let j = 0; j < 2; j++) { const calc = getCalc(j, P1, P2, P3); @@ -586,7 +586,7 @@ function groupBBFix(selected) { elem.setAttribute('visibility', 'hidden'); svgroot_.appendChild(elem); copy.push(elem); - if (['line', 'path'].indexOf(elem.tagName) !== -1) { + if ([ 'line', 'path' ].indexOf(elem.tagName) !== -1) { elements.push(elem); } }); @@ -722,7 +722,7 @@ export const getBBox = function (elem) { export const getPathDFromSegments = function (pathSegments) { let d = ''; - $.each(pathSegments, function (j, [singleChar, pts]) { + $.each(pathSegments, function (j, [ singleChar, pts ]) { d += singleChar; for (let i = 0; i < pts.length; i += 2) { d += (pts[i] + ',' + pts[i + 1]) + ' '; @@ -754,12 +754,12 @@ export const getPathDFromElement = function (elem) { 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', []] + [ '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': @@ -791,24 +791,24 @@ export const getPathDFromElement = function (elem) { 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', []] + [ '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', []] + [ '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: @@ -828,7 +828,7 @@ export const getExtraAttributesForConvertToPath = function (elem) { const attrs = {}; // TODO: make this list global so that we can properly maintain it // TODO: what about @transform, @clip-rule, @fill-rule, etc? - ['marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path'].forEach(function(item){ + [ 'marker-start', 'marker-end', 'marker-mid', 'filter', 'clip-path' ].forEach(function(item){ const a = elem.getAttribute(item); if (a) { attrs[item] = a; @@ -944,7 +944,7 @@ export const convertToPath = function ( elem.remove(); path.setAttribute('id', id); path.removeAttribute('visibility'); - addToSelection([path], true); + addToSelection([ path ], true); addCommandToHistory(batchCmd); @@ -1010,7 +1010,7 @@ export const getBBoxWithTransform = function (elem, addSVGElementFromJson, pathA if (bBoxCanBeOptimizedOverNativeGetBBox(angle, hasMatrixXForm)) { // Get the BBox from the raw path for these elements // TODO: why ellipse and not circle - const elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon']; + const elemNames = [ 'ellipse', 'path', 'line', 'polyline', 'polygon' ]; if (elemNames.includes(elem.tagName)) { goodBb = getBBoxOfElementAsPath(elem, addSVGElementFromJson, pathActions); bb = goodBb; @@ -1244,7 +1244,7 @@ export const getElem = (supportsSelectors()) * @returns {void} */ export const assignAttributes = function (elem, attrs, suspendLength, unitCheck) { - for (const [key, value] of Object.entries(attrs)) { + for (const [ key, value ] of Object.entries(attrs)) { const ns = (key.substr(0, 4) === 'xml:' ? NS.XML : key.substr(0, 6) === 'xlink:' ? NS.XLINK : null); @@ -1293,7 +1293,7 @@ export const cleanupElement = function (element) { delete defaults.ry; } - Object.entries(defaults).forEach(([attr, val]) => { + Object.entries(defaults).forEach(([ attr, val ]) => { if (element.getAttribute(attr) === String(val)) { element.removeAttribute(attr); } @@ -1365,4 +1365,4 @@ export const mock = ({ // shortcuts to common DOM functions export const $id = (id) => document.getElementById(id); export const $qq = (sel) => document.querySelector(sel); -export const $qa = (sel) => [...document.querySelectorAll(sel)]; +export const $qa = (sel) => [ ...document.querySelectorAll(sel) ]; diff --git a/tools/mochawesome-cli.js b/tools/mochawesome-cli.js index d0dec275..6ed3b1fa 100644 --- a/tools/mochawesome-cli.js +++ b/tools/mochawesome-cli.js @@ -24,7 +24,7 @@ const Suite = require('mocha/lib/suite.js'); const Test = require('mocha/lib/test.js'); const Runner = require('mocha/lib/runner.js'); -const {constants: { +const { constants: { EVENT_RUN_BEGIN, EVENT_RUN_END, EVENT_SUITE_BEGIN, @@ -32,9 +32,9 @@ const {constants: { EVENT_TEST_FAIL, EVENT_TEST_PASS, EVENT_TEST_PENDING -}} = require('mocha/lib/runner.js'); +} } = require('mocha/lib/runner.js'); -const {results, stats} = require(path); +const { results, stats } = require(path); const runner = new Runner( new Suite('', null, true) @@ -47,7 +47,7 @@ console.log('Mocha results:'); new MochaReporter(runner); runner.emit(EVENT_RUN_BEGIN); -results.forEach(({suites}) => { +results.forEach(({ suites }) => { suites.forEach(function handleSuite (st) { const ste = Object.assign(new Suite(''), st); @@ -60,7 +60,7 @@ results.forEach(({suites}) => { const tst = new Test('', () => { // }); - Object.entries(ts).forEach(([k, v]) => { + Object.entries(ts).forEach(([ k, v ]) => { // `fullTitle` is a string in mochawesome but a function in Mocha if (k !== 'fullTitle') { tst[k] = v;