diff --git a/cypress/integration/ui/__snapshots__/scenario.js.snap b/cypress/integration/ui/__snapshots__/scenario.js.snap index 3466568a..d4e83eee 100644 --- a/cypress/integration/ui/__snapshots__/scenario.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario.js.snap @@ -1,199 +1,774 @@ exports[`use various parts of svg-edit > check tool_source #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use various parts of svg-edit > check tool_fhpath #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use various parts of svg-edit > check tool_text #0`] = ` - - - Layer 1 - AB - - + + + + Layer 1 + + AB + + + + `; exports[`use various parts of svg-edit > check tool_clone #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_italic #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_bold #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_x_y_coordinate #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_font_size #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_stroke_width #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_stoke_fill_color #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_anchor_start #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_anchor_middle #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_anchor_end #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_rotation #0`] = ` - - - Layer 1 - AB - AB - - + + + + Layer 1 + + AB + + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_blur #0`] = ` - - - Layer 1 - AB - AB - - - - - - - + + + + Layer 1 + + AB + + + AB + + + + + + + + + `; exports[`use various parts of svg-edit > check tool_text_change_opacity #0`] = ` - - - Layer 1 - AB - AB - - - - - - - + + + + Layer 1 + + AB + + + AB + + + + + + + + + `; exports[`use various parts of svg-edit > check tool_text_align_to_page #0`] = ` - - - Layer 1 - AB - AB - - - - - - - + + + + Layer 1 + + AB + + + AB + + + + + + + + + `; exports[`use various parts of svg-edit > check tool_text_delete #0`] = ` - - - Layer 1 - AB - - - + + + + Layer 1 + + AB + + + + `; exports[`use various parts of svg-edit > check tool_text_change_font_family #0`] = ` - - - Layer 1 - AB - - - + + + + Layer 1 + + AB + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario1.js.snap b/cypress/integration/ui/__snapshots__/scenario1.js.snap index bfe8d67f..a91e1f5b 100644 --- a/cypress/integration/ui/__snapshots__/scenario1.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario1.js.snap @@ -1,28 +1,78 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_shape #0`] = ` - - - Layer 1 - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_image #0`] = ` - - - Layer 1 - - - - - - + + + + Layer 1 + + + + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario2.js.snap b/cypress/integration/ui/__snapshots__/scenario2.js.snap index a2dc6c1d..0eb76299 100644 --- a/cypress/integration/ui/__snapshots__/scenario2.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario2.js.snap @@ -1,173 +1,607 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_circle #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_fhellipse #0`] = ` - - - Layer 1 - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + + `; exports[`use all parts of svg-edit > check tool_circle_change_fill_color #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_circle_change_opacity #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_change_rotation #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_change_blur #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_change_cx_cy_coordinate #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_change_rx_ry_radius #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_bring_to_back #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_bring_to_front #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_ellipse_clone #0`] = ` - - - Layer 1 - - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario3.js.snap b/cypress/integration/ui/__snapshots__/scenario3.js.snap index 7816e847..a3c7feb0 100644 --- a/cypress/integration/ui/__snapshots__/scenario3.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario3.js.snap @@ -1,36 +1,133 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_path #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_path_change_node_xy #0`] = ` - - - Layer 1 - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_path_openclose #0`] = ` - - - Layer 1 - - - + + + + Layer 1 + + + + +`; + +exports[`use all parts of svg-edit > check tool_path_change_seg_type #0`] = ` + + + + Layer 1 + + + + +`; + +exports[`use all parts of svg-edit > check tool_path_change_clone_node #0`] = ` + + + + Layer 1 + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario4.js.snap b/cypress/integration/ui/__snapshots__/scenario4.js.snap index 89f75f08..324271c3 100644 --- a/cypress/integration/ui/__snapshots__/scenario4.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario4.js.snap @@ -1,197 +1,817 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_rect #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_fhrect #0`] = ` - - - Layer 1 - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_square #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + + `; exports[`use all parts of svg-edit > check tool_rect_change_fill_color #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_rect_change_rotation #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_rect_change_blur #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_rect_change_opacity #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_fhrect_change_x_y_coordinate #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_fhrect_change_width_height #0`] = ` - - - Layer 1 - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_square_clone #0`] = ` - - - Layer 1 - - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_square_bring_to_back #0`] = ` - - - Layer 1 - - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_square_bring_to_front #0`] = ` - - - Layer 1 - - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_square_change_corner_radius #0`] = ` - - - Layer 1 - - - - - - - - - - - + + + + Layer 1 + + + + + + + + + + + + +`; + +exports[`use all parts of svg-edit > check tool_rect_change_to_path #0`] = ` + + + + Layer 1 + + + + + + + + + + + + +`; + +exports[`use all parts of svg-edit > check tool_rect_delete #0`] = ` + + + + Layer 1 + + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario5.js.snap b/cypress/integration/ui/__snapshots__/scenario5.js.snap index 626f7ffd..eec8bfd2 100644 --- a/cypress/integration/ui/__snapshots__/scenario5.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario5.js.snap @@ -1,157 +1,489 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_line #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_line_change_rotation #0`] = ` - - - Layer 1 - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_line_change_blur #0`] = ` - - - Layer 1 - - - - - - - - + + + + Layer 1 + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_change_opacity #0`] = ` - - - Layer 1 - - - - - - - - + + + + Layer 1 + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_delete #0`] = ` - - - Layer 1 - - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_line_clone #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_bring_to_back #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_bring_to_front #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_change_x_y_coordinate #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_change_stroke_width #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_change_stoke_color #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; exports[`use all parts of svg-edit > check tool_line_align_to_page #0`] = ` - - - Layer 1 - - - - - - - + + + + Layer 1 + + + + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario6.js.snap b/cypress/integration/ui/__snapshots__/scenario6.js.snap index 56b82de6..c07a8dcf 100644 --- a/cypress/integration/ui/__snapshots__/scenario6.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario6.js.snap @@ -1,148 +1,509 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_polygon #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_clone #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_rotation #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_blur #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_opacity #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_bring_to_back #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_bring_to_front #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_polygon_delete #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_polygon_align_to_page #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_stroke_width #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_stoke_fill_color #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_polygon_change_sides #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; diff --git a/cypress/integration/ui/__snapshots__/scenario7.js.snap b/cypress/integration/ui/__snapshots__/scenario7.js.snap index d59bd5ee..8a8c87dd 100644 --- a/cypress/integration/ui/__snapshots__/scenario7.js.snap +++ b/cypress/integration/ui/__snapshots__/scenario7.js.snap @@ -1,148 +1,563 @@ exports[`use all parts of svg-edit > check tool_source_set #0`] = ` - - - Layer 1 - - + + + + Layer 1 + + + `; exports[`use all parts of svg-edit > check tool_star #0`] = ` - - - Layer 1 - - - - - + + + + Layer 1 + + + + + + `; exports[`use all parts of svg-edit > check tool_star_clone #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + + `; exports[`use all parts of svg-edit > check tool_star_change_rotation #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + + `; exports[`use all parts of svg-edit > check tool_star_change_blur #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_star_change_opacity #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_star_bring_to_back #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_star_bring_to_front #0`] = ` - - - Layer 1 - - - - - - - - - + + + + Layer 1 + + + + + + + + + + `; exports[`use all parts of svg-edit > check tool_star_delete #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_star_align_to_page #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_star_change_stroke_width #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_star_change_stoke_fill_color #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; exports[`use all parts of svg-edit > check tool_star_change_sides #0`] = ` - - - Layer 1 - - - - + + + + Layer 1 + + + + `; diff --git a/cypress/integration/ui/scenario3.js b/cypress/integration/ui/scenario3.js index 81c4e758..fa35b688 100644 --- a/cypress/integration/ui/scenario3.js +++ b/cypress/integration/ui/scenario3.js @@ -50,7 +50,7 @@ describe('use all parts of svg-edit', function () { testSnapshot() }) it('check tool_path_change_seg_type', function () { - cy.get('#svg_1').click({ force: true }) + // cy.get('#svg_1').click({ force: true }) cy.get('#svg_1').dblclick({ force: true }) cy.get('#seg_type').shadow().find('select').select('6', { force: true }).should('have.value', '6') cy.get('#ctrlpointgrip_3c1') @@ -60,7 +60,7 @@ describe('use all parts of svg-edit', function () { testSnapshot() }) it('check tool_path_change_clone_node', function () { - cy.get('#svg_1').click({ force: true }) + // cy.get('#svg_1').click({ force: true }) cy.get('#svg_1').dblclick({ force: true }) cy.get('#tool_node_clone').click({ force: true }) cy.get('#pathpointgrip_4') diff --git a/cypress/integration/unit/path.js b/cypress/integration/unit/path.js index 5a5d806e..6a61a585 100644 --- a/cypress/integration/unit/path.js +++ b/cypress/integration/unit/path.js @@ -48,7 +48,7 @@ describe('path', function () { const [mockPathContext, mockUtilitiesContext] = getMockContexts() pathModule.init(mockPathContext) utilities.init(mockUtilitiesContext) - Path(path) + new Path(path) // eslint-disable-line no-new assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L') assert.equal(path.pathSegList.getItem(1).x, 10) @@ -68,7 +68,7 @@ describe('path', function () { const [mockPathContext, mockUtilitiesContext] = getMockContexts() pathModule.init(mockPathContext) utilities.init(mockUtilitiesContext) - Path(path) + new Path(path) // eslint-disable-line no-new assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L') assert.equal(path.pathSegList.getItem(1).x, 10) @@ -124,7 +124,7 @@ describe('path', function () { const [mockPathContext, mockUtilitiesContext] = getMockContexts() pathModule.init(mockPathContext) utilities.init(mockUtilitiesContext) - Path(path) + new Path(path) // eslint-disable-line no-new assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'L') assert.equal(path.pathSegList.getItem(1).x, 10) @@ -144,7 +144,7 @@ describe('path', function () { const [mockPathContext, mockUtilitiesContext] = getMockContexts() pathModule.init(mockPathContext) utilities.init(mockUtilitiesContext) - Path(path) + new Path(path) // eslint-disable-line no-new assert.equal(path.pathSegList.getItem(1).pathSegTypeAsLetter, 'C') assert.equal(path.pathSegList.getItem(1).x1, 11) diff --git a/cypress/integration/unit/utilities-bbox.js b/cypress/integration/unit/utilities-bbox.js index 1f43f78e..d21936f9 100644 --- a/cypress/integration/unit/utilities-bbox.js +++ b/cypress/integration/unit/utilities-bbox.js @@ -22,17 +22,17 @@ describe('utilities bbox', function () { }) return elem } - let mockaddSVGElemensFromJsonCallCount = 0 + let mockaddSVGElementsFromJsonCallCount = 0 /** - * Mock of {@link module:utilities.EditorContext#addSVGElemensFromJson}. + * Mock of {@link module:utilities.EditorContext#addSVGElementsFromJson}. * @param {module:utilities.SVGElementJSON} json * @returns {SVGElement} */ - function mockaddSVGElemensFromJson (json) { + function mockaddSVGElementsFromJson (json) { const elem = mockCreateSVGElement(json) svgroot.append(elem) - mockaddSVGElemensFromJsonCallCount++ + mockaddSVGElementsFromJsonCallCount++ return elem } const mockPathActions = { @@ -94,7 +94,7 @@ describe('utilities bbox', function () { } path.init(mockSvgCanvas) - mockaddSVGElemensFromJsonCallCount = 0 + mockaddSVGElementsFromJsonCallCount = 0 }) it('Test svgedit.utilities package', function () { @@ -113,9 +113,9 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M0,1 L2,3' } }) svgroot.append(elem) - let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + let bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) elem.remove() elem = mockCreateSVGElement({ @@ -123,9 +123,9 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }) svgroot.append(elem) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) elem.remove() elem = mockCreateSVGElement({ @@ -133,9 +133,9 @@ describe('utilities bbox', function () { attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }) svgroot.append(elem) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) elem.remove() elem = mockCreateSVGElement({ @@ -148,9 +148,9 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) g.remove() }) @@ -162,7 +162,7 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10)' } }) svgroot.append(elem) - let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + let bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, 10, EPSILON) assert.close(bbox.y, 10, EPSILON) assert.close(bbox.width, 0, EPSILON) @@ -174,12 +174,12 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20)' } }) svgroot.append(elem) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, 5, EPSILON) assert.close(bbox.y, 15, EPSILON) assert.close(bbox.width, 20, EPSILON) assert.close(bbox.height, 10, EPSILON) - assert.equal(mockaddSVGElemensFromJsonCallCount, 1) + assert.equal(mockaddSVGElementsFromJsonCallCount, 1) elem.remove() const rect = { x: 10, y: 10, width: 10, height: 20 } @@ -190,14 +190,14 @@ describe('utilities bbox', function () { 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) - mockaddSVGElemensFromJsonCallCount = 0 - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + mockaddSVGElementsFromJsonCallCount = 0 + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) const r2 = rotateRect(rect, angle, origin) assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x) assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y) assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width) assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) elem.remove() // Same as previous but wrapped with g and the transform is with the g. @@ -211,13 +211,13 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - mockaddSVGElemensFromJsonCallCount = 0 - bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions) + mockaddSVGElementsFromJsonCallCount = 0 + bbox = getBBoxWithTransform(g, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, r2.x, EPSILON, 'rect2 x is ' + r2.x) assert.close(bbox.y, r2.y, EPSILON, 'rect2 y is ' + r2.y) assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width) assert.close(bbox.height, r2.height, EPSILON, 'rect2 height is ' + r2.height) - assert.equal(mockaddSVGElemensFromJsonCallCount, 0) + assert.equal(mockaddSVGElementsFromJsonCallCount, 0) g.remove() elem = mockCreateSVGElement({ @@ -225,14 +225,14 @@ describe('utilities bbox', function () { attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100)' } }) svgroot.append(elem) - mockaddSVGElemensFromJsonCallCount = 0 - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + mockaddSVGElementsFromJsonCallCount = 0 + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) /** @todo: Review these test the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */ // assert.ok(bbox.x > 45 && bbox.x <= 50); assert.ok(bbox.y > 45 && bbox.y <= 50) // assert.ok(bbox.width >= 100 && bbox.width < 110); // assert.ok(bbox.height >= 100 && bbox.height < 110); - assert.equal(mockaddSVGElemensFromJsonCallCount, 1) + assert.equal(mockaddSVGElementsFromJsonCallCount, 1) elem.remove() }) @@ -249,7 +249,7 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M10,10 L20,20', transform: 'rotate(45 10,10) ' + matrix } }) svgroot.append(elem) - let bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + let bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, 10 + tx, EPSILON) assert.close(bbox.y, 10 + ty, EPSILON) assert.close(bbox.width, 0, EPSILON) @@ -264,7 +264,7 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '10', y: '10', width: '10', height: '20', transform: 'rotate(90 15,20) ' + matrix } }) svgroot.append(elem) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, 5 + tx, EPSILON) assert.close(bbox.y, 15 + ty, EPSILON) assert.close(bbox.width, 20, EPSILON) @@ -284,7 +284,7 @@ describe('utilities bbox', function () { 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, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) const r2 = rotateRect(rect, angle, origin) assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x) assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y) @@ -303,7 +303,7 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - bbox = getBBoxWithTransform(g, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(g, mockaddSVGElementsFromJson, mockPathActions) assert.close(bbox.x, r2.x + tx, EPSILON, 'rect2 x is ' + r2.x) assert.close(bbox.y, r2.y + ty, EPSILON, 'rect2 y is ' + r2.y) assert.close(bbox.width, r2.width, EPSILON, 'rect2 width is' + r2.width) @@ -315,7 +315,7 @@ describe('utilities bbox', function () { attr: { id: 'ellipse1', cx: '100', cy: '100', rx: '50', ry: '50', transform: 'rotate(45 100,100) ' + matrix } }) svgroot.append(elem) - bbox = getBBoxWithTransform(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxWithTransform(elem, mockaddSVGElementsFromJson, mockPathActions) /** @todo: the BBox algorithm is using the bezier control points to calculate the bounding box. Should be 50, 50, 100, 100. */ // assert.ok(bbox.x > 45 + tx && bbox.x <= 50 + tx); assert.ok(bbox.y > 45 + ty && bbox.y <= 50 + ty) @@ -333,7 +333,7 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': strokeWidth } }) svgroot.append(elem) - let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + let bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 2 + strokeWidth, height: 2 + strokeWidth }) elem.remove() @@ -342,7 +342,7 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': strokeWidth } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }) elem.remove() @@ -351,7 +351,7 @@ describe('utilities bbox', function () { attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': strokeWidth } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 5 + strokeWidth }) elem.remove() @@ -365,7 +365,7 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0 - strokeWidth / 2, y: 1 - strokeWidth / 2, width: 5 + strokeWidth, height: 10 + strokeWidth }) g.remove() }) @@ -378,7 +378,7 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M0,1 L2,3', 'stroke-width': 'none' } }) svgroot.append(elem) - let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + let bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }) elem.remove() @@ -387,7 +387,7 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10', 'stroke-width': 'none' } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) elem.remove() @@ -396,7 +396,7 @@ describe('utilities bbox', function () { attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6', 'stroke-width': 'none' } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }) elem.remove() @@ -410,7 +410,7 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) g.remove() }) @@ -423,7 +423,7 @@ describe('utilities bbox', function () { attr: { id: 'path', d: 'M0,1 L2,3' } }) svgroot.append(elem) - let bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + let bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 2, height: 2 }) elem.remove() @@ -432,7 +432,7 @@ describe('utilities bbox', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) elem.remove() @@ -441,7 +441,7 @@ describe('utilities bbox', function () { attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }) svgroot.append(elem) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }) elem.remove() @@ -455,7 +455,7 @@ describe('utilities bbox', function () { }) g.append(elem) svgroot.append(g) - bbox = getStrokedBBox([elem], mockaddSVGElemensFromJson, mockPathActions) + bbox = getStrokedBBox([elem], mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) g.remove() }) diff --git a/cypress/integration/unit/utilities-performance.js b/cypress/integration/unit/utilities-performance.js index 386f4b6d..88b08eac 100644 --- a/cypress/integration/unit/utilities-performance.js +++ b/cypress/integration/unit/utilities-performance.js @@ -87,11 +87,11 @@ describe('utilities performance', function () { } /** - * Mock of {@link module:utilities.EditorContext#addSVGElemensFromJson}. + * Mock of {@link module:utilities.EditorContext#addSVGElementsFromJson}. * @param {module:utilities.SVGElementJSON} json * @returns {SVGElement} */ - function mockaddSVGElemensFromJson (json) { + function mockaddSVGElementsFromJson (json) { const elem = mockCreateSVGElement(json) currentLayer.append(elem) return elem @@ -197,7 +197,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], mockaddSVGElemensFromJson, mockPathActions) + /* const obj = */ getStrokedBBox([child], mockaddSVGElementsFromJson, mockPathActions) now = Date.now(); const delta = now - lastTime; lastTime = now total += delta min = Math.min(min, delta) @@ -217,7 +217,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], mockaddSVGElemensFromJson, mockPathActions) + /* const obj = */ getStrokedBBox([child], mockaddSVGElementsFromJson, 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 5d8a2cc1..4ae3a675 100644 --- a/cypress/integration/unit/utilities.js +++ b/cypress/integration/unit/utilities.js @@ -19,7 +19,7 @@ describe('utilities', function () { * @param {module:utilities.SVGElementJSON} json * @returns {SVGElement} */ - function mockaddSVGElemensFromJson (json) { + function mockaddSVGElementsFromJson (json) { const elem = mockCreateSVGElement(json) svgroot.append(elem) return elem @@ -74,6 +74,15 @@ describe('utilities', function () { mockCount.addCommandToHistory++ } + const mockSvgCanvas = { + addSVGElementsFromJson: mockaddSVGElementsFromJson, + pathActions: mockPathActions, + clearSelection: mockClearSelection, + addToSelection: mockAddToSelection, + history: mockHistory, + addCommandToHistory: mockAddCommandToHistory + } + let svg; let svgroot beforeEach(() => { document.body.textContent = '' @@ -245,8 +254,8 @@ describe('utilities', function () { * Wrap `utilities.getBBoxOfElementAsPath` to convert bbox to object for testing. * @type {module:utilities.getBBoxOfElementAsPath} */ - function getBBoxOfElementAsPath (elem, addSVGElemensFromJson, pathActions) { - const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions) + function getBBoxOfElementAsPath (elem, addSVGElementsFromJson, pathActions) { + const bbox = utilities.getBBoxOfElementAsPath(elem, addSVGElementsFromJson, pathActions) return utilities.bboxToObj(bbox) // need this for assert.equal() to work. } @@ -255,7 +264,7 @@ describe('utilities', function () { attr: { id: 'path', d: 'M0,1 Z' } }) svgroot.append(elem) - let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions) + let bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 0, height: 0 }) elem.remove() @@ -264,7 +273,7 @@ describe('utilities', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }) svgroot.append(elem) - bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 10 }) elem.remove() @@ -273,7 +282,7 @@ describe('utilities', function () { attr: { id: 'line', x1: '0', y1: '1', x2: '5', y2: '6' } }) svgroot.append(elem) - bbox = getBBoxOfElementAsPath(elem, mockaddSVGElemensFromJson, mockPathActions) + bbox = getBBoxOfElementAsPath(elem, mockaddSVGElementsFromJson, mockPathActions) assert.deepEqual(bbox, { x: 0, y: 1, width: 5, height: 5 }) elem.remove() @@ -294,7 +303,7 @@ describe('utilities', function () { attr: { id: 'rect', x: '0', y: '1', width: '5', height: '10' } }) svgroot.append(elem) - const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory) + const path = convertToPath(elem, attrs, mockSvgCanvas) assert.equal(path.getAttribute('d'), 'M0,1 L5,1 L5,11 L0,11 L0,1 Z') assert.equal(path.getAttribute('visibilituy'), null) assert.equal(path.id, 'rect') @@ -322,7 +331,7 @@ describe('utilities', function () { getAttribute () { return '' }, parentNode: svgroot } - const path = convertToPath(elem, attrs, mockaddSVGElemensFromJson, mockPathActions, mockClearSelection, mockAddToSelection, mockHistory, mockAddCommandToHistory) + const path = convertToPath(elem, attrs, mockSvgCanvas) assert.equal(path, null) assert.equal(elem.parentNode, svgroot) assert.equal(mockHistorySubCommands.length, 0) diff --git a/cypress/support/ui-test-helper.js b/cypress/support/ui-test-helper.js index c1550e94..ab30e8dc 100644 --- a/cypress/support/ui-test-helper.js +++ b/cypress/support/ui-test-helper.js @@ -24,7 +24,8 @@ export const selectEnglish = () => { export const testSnapshot = () => { cy.window().then((win) => { // access to the remote Window so we can get the svgEditor variable - const svgContent = win.svgEditor.svgCanvas.getSvgString() - cy.wrap(unescape(svgContent)).toMatchSnapshot() + const svgString = win.svgEditor.svgCanvas.getSvgString() + const svgDom = new DOMParser().parseFromString(svgString, 'text/html').querySelector('body') + cy.wrap(svgDom).toMatchSnapshot() }) } diff --git a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js index 9053a359..66902174 100644 --- a/src/editor/extensions/ext-eyedropper/ext-eyedropper.js +++ b/src/editor/extensions/ext-eyedropper/ext-eyedropper.js @@ -30,7 +30,7 @@ export default { await loadExtensionTranslation(svgEditor) const { ChangeElementCommand } = svgCanvas.history // svgdoc = S.svgroot.parentNode.ownerDocument, - const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd) } + const addToHistory = (cmd) => { svgCanvas.undoMgr.addCommandToHistory(cmd) } const currentStyle = { fillPaint: 'red', fillOpacity: 1.0, diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index 1a61285d..3bc6c5e1 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -69,7 +69,7 @@ export default { * @returns {void} */ const importImage = (url) => { - const newImage = svgCanvas.addSVGElemensFromJson({ + const newImage = svgCanvas.addSVGElementsFromJson({ element: 'image', attr: { x: 0, diff --git a/src/editor/extensions/ext-markers/ext-markers.js b/src/editor/extensions/ext-markers/ext-markers.js index 7659c576..35c27775 100644 --- a/src/editor/extensions/ext-markers/ext-markers.js +++ b/src/editor/extensions/ext-markers/ext-markers.js @@ -33,7 +33,7 @@ export default { const svgEditor = this const { svgCanvas } = svgEditor const { BatchCommand, RemoveElementCommand, InsertElementCommand } = svgCanvas.history - const { $id, addSVGElemensFromJson: addElem } = svgCanvas + const { $id, addSVGElementsFromJson: addElem } = svgCanvas const mtypes = ['start', 'mid', 'end'] const markerElems = ['line', 'path', 'polyline', 'polygon'] diff --git a/src/editor/extensions/ext-opensave/ext-opensave.js b/src/editor/extensions/ext-opensave/ext-opensave.js index d23f400f..f8b5a57c 100644 --- a/src/editor/extensions/ext-opensave/ext-opensave.js +++ b/src/editor/extensions/ext-opensave/ext-opensave.js @@ -82,7 +82,7 @@ export default { * @returns {void} */ const insertNewImage = (imageWidth, imageHeight) => { - const newImage = this.svgCanvas.addSVGElemensFromJson({ + const newImage = this.svgCanvas.addSVGElementsFromJson({ element: 'image', attr: { x: 0, diff --git a/src/editor/extensions/ext-polystar/ext-polystar.js b/src/editor/extensions/ext-polystar/ext-polystar.js index 18f14066..e0c992b4 100644 --- a/src/editor/extensions/ext-polystar/ext-polystar.js +++ b/src/editor/extensions/ext-polystar/ext-polystar.js @@ -28,7 +28,7 @@ export default { const svgEditor = this const { svgCanvas } = svgEditor const { ChangeElementCommand } = svgCanvas.history - const addToHistory = function (cmd) { svgCanvas.undoMgr.addCommandToHistory(cmd) } + const addToHistory = (cmd) => { svgCanvas.undoMgr.addCommandToHistory(cmd) } const { $id } = svgCanvas let selElems let started @@ -244,7 +244,7 @@ export default { const sRgb = svgCanvas.getColor('stroke') const sWidth = svgCanvas.getStrokeWidth() started = true - newFO = svgCanvas.addSVGElemensFromJson({ + newFO = svgCanvas.addSVGElementsFromJson({ element: 'polygon', attr: { cx: opts.start_x, @@ -273,7 +273,7 @@ export default { // ccSRgbEl = sRgb.substring(1, rgb.length); const sWidth = svgCanvas.getStrokeWidth() started = true - newFO = svgCanvas.addSVGElemensFromJson({ + newFO = svgCanvas.addSVGElementsFromJson({ element: 'polygon', attr: { cx: opts.start_x, diff --git a/src/editor/extensions/ext-shapes/ext-shapes.js b/src/editor/extensions/ext-shapes/ext-shapes.js index 78dfff85..e52a697a 100644 --- a/src/editor/extensions/ext-shapes/ext-shapes.js +++ b/src/editor/extensions/ext-shapes/ext-shapes.js @@ -66,7 +66,7 @@ export default { startClientPos.x = opts.event.clientX startClientPos.y = opts.event.clientY - curShape = canv.addSVGElemensFromJson({ + curShape = canv.addSVGElementsFromJson({ element: 'path', curStyles: true, attr: { diff --git a/src/svgcanvas/blur-event.js b/src/svgcanvas/blur-event.js index e2cdd3ad..7acda3c9 100644 --- a/src/svgcanvas/blur-event.js +++ b/src/svgcanvas/blur-event.js @@ -115,7 +115,7 @@ export const setBlur = function (val, complete) { } } else { // Not found, so create - const newblur = svgCanvas.addSVGElemensFromJson({ + const newblur = svgCanvas.addSVGElementsFromJson({ element: 'feGaussianBlur', attr: { in: 'SourceGraphic', @@ -123,7 +123,7 @@ export const setBlur = function (val, complete) { } }) - svgCanvas.setFilter(svgCanvas.addSVGElemensFromJson({ + svgCanvas.setFilter(svgCanvas.addSVGElementsFromJson({ element: 'filter', attr: { id: elemId + '_blur' diff --git a/src/svgcanvas/event.js b/src/svgcanvas/event.js index 47d3bab2..339ab7bf 100644 --- a/src/svgcanvas/event.js +++ b/src/svgcanvas/event.js @@ -697,7 +697,7 @@ export const mouseUpEvent = (evt) => { case 'fhellipse': if ((svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')) > 0 && (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')) > 0) { - element = svgCanvas.addSVGElemensFromJson({ + element = svgCanvas.addSVGElementsFromJson({ element: 'ellipse', curStyles: true, attr: { @@ -715,7 +715,7 @@ export const mouseUpEvent = (evt) => { case 'fhrect': if ((svgCanvas.getFreehand('maxx') - svgCanvas.getFreehand('minx')) > 0 && (svgCanvas.getFreehand('maxy') - svgCanvas.getFreehand('miny')) > 0) { - element = svgCanvas.addSVGElemensFromJson({ + element = svgCanvas.addSVGElementsFromJson({ element: 'rect', curStyles: true, attr: { @@ -1102,7 +1102,7 @@ export const mouseDownEvent = (evt) => { svgCanvas.setDAttr(realX + ',' + realY + ' ') // Commented out as doing nothing now: // strokeW = parseFloat(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width; - svgCanvas.addSVGElemensFromJson({ + svgCanvas.addSVGElementsFromJson({ element: 'polyline', curStyles: true, attr: { @@ -1121,7 +1121,7 @@ export const mouseDownEvent = (evt) => { break case 'image': { svgCanvas.setStarted(true) - const newImage = svgCanvas.addSVGElemensFromJson({ + const newImage = svgCanvas.addSVGElementsFromJson({ element: 'image', attr: { x, @@ -1144,7 +1144,7 @@ export const mouseDownEvent = (evt) => { svgCanvas.setStarted(true) svgCanvas.setStartX(x) svgCanvas.setStartY(y) - svgCanvas.addSVGElemensFromJson({ + svgCanvas.addSVGElementsFromJson({ element: 'rect', curStyles: true, attr: { @@ -1160,7 +1160,7 @@ export const mouseDownEvent = (evt) => { case 'line': { svgCanvas.setStarted(true) const strokeW = Number(curShape.stroke_width) === 0 ? 1 : curShape.stroke_width - svgCanvas.addSVGElemensFromJson({ + svgCanvas.addSVGElementsFromJson({ element: 'line', curStyles: true, attr: { @@ -1183,7 +1183,7 @@ export const mouseDownEvent = (evt) => { break } case 'circle': svgCanvas.setStarted(true) - svgCanvas.addSVGElemensFromJson({ + svgCanvas.addSVGElementsFromJson({ element: 'circle', curStyles: true, attr: { @@ -1197,7 +1197,7 @@ export const mouseDownEvent = (evt) => { break case 'ellipse': svgCanvas.setStarted(true) - svgCanvas.addSVGElemensFromJson({ + svgCanvas.addSVGElementsFromJson({ element: 'ellipse', curStyles: true, attr: { @@ -1212,7 +1212,7 @@ export const mouseDownEvent = (evt) => { break case 'text': svgCanvas.setStarted(true) - /* const newText = */ svgCanvas.addSVGElemensFromJson({ + /* const newText = */ svgCanvas.addSVGElementsFromJson({ element: 'text', curStyles: true, attr: { diff --git a/src/svgcanvas/json.js b/src/svgcanvas/json.js index d7022268..0c00f05a 100644 --- a/src/svgcanvas/json.js +++ b/src/svgcanvas/json.js @@ -61,7 +61,7 @@ export const getJsonFromSvgElements = (data) => { /** * This should really be an intersection implementing all rather than a union. * @name module:json.addSVGElementsFromJson -* @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElemensFromJson} +* @type {module:utilities.EditorContext#addSVGElementsFromJson|module:path.EditorContext#addSVGElementsFromJson} */ export const addSVGElementsFromJson = function (data) { diff --git a/src/svgcanvas/paste-elem.js b/src/svgcanvas/paste-elem.js index 0af0f254..f112a48b 100644 --- a/src/svgcanvas/paste-elem.js +++ b/src/svgcanvas/paste-elem.js @@ -87,7 +87,7 @@ export const pasteElementsMethod = function (type, x, y) { const elem = clipb[len] if (!elem) { continue } - const copy = svgCanvas.addSVGElemensFromJson(elem) + const copy = svgCanvas.addSVGElementsFromJson(elem) pasted.push(copy) batchCmd.addSubCommand(new InsertElementCommand(copy)) diff --git a/src/svgcanvas/path-actions.js b/src/svgcanvas/path-actions.js index 9d729dde..3bc21394 100644 --- a/src/svgcanvas/path-actions.js +++ b/src/svgcanvas/path-actions.js @@ -307,7 +307,7 @@ export const pathActionsMethod = (function () { } d = d.join(' ') - element = svgCanvas.addSVGElemensFromJson({ + element = svgCanvas.addSVGElementsFromJson({ element: 'path', curStyles: true, attr: { @@ -366,7 +366,7 @@ export const pathActionsMethod = (function () { const drawnPath = svgCanvas.getDrawnPath() if (!drawnPath) { const dAttr = 'M' + x + ',' + y + ' ' // Was this meant to work with the other `dAttr`? (was defined globally so adding `var` to at least avoid a global) - /* drawnPath = */ svgCanvas.setDrawnPath(svgCanvas.addSVGElemensFromJson({ + /* drawnPath = */ svgCanvas.setDrawnPath(svgCanvas.addSVGElementsFromJson({ element: 'path', curStyles: true, attr: { diff --git a/src/svgcanvas/path.js b/src/svgcanvas/path.js index dff592e8..3f7763d9 100644 --- a/src/svgcanvas/path.js +++ b/src/svgcanvas/path.js @@ -85,7 +85,7 @@ export let path = null * @typedef {PlainObject} module:path.SVGElementJSON * @property {string} element - Tag name of the SVG element to create * @property {PlainObject} attr - Has key-value attributes to assign to the new element. -* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElemensFromJson} can later re-identify the element for modification or replacement. +* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementsFromJson} can later re-identify the element for modification or replacement. * @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first * @property {module:path.SVGElementJSON[]} [children] - Data objects to be added recursively as children * @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace @@ -132,7 +132,7 @@ export let path = null * @returns {void} */ /** - * @function module:path.EditorContext#addSVGElemensFromJson + * @function module:path.EditorContext#addSVGElementsFromJson * @param {module:path.SVGElementJSON} data * @returns {Element} The new element */ diff --git a/src/svgcanvas/select.js b/src/svgcanvas/select.js index abfa0fb4..fc2200eb 100644 --- a/src/svgcanvas/select.js +++ b/src/svgcanvas/select.js @@ -495,7 +495,7 @@ export class SelectorManager { */ /** * @function module:select.SVGFactory#createSVGElement - * @param {module:utilities.EditorContext#addSVGElemensFromJson} jsonMap + * @param {module:utilities.EditorContext#addSVGElementsFromJson} jsonMap * @returns {SVGElement} */ /** diff --git a/src/svgcanvas/selected-elem.js b/src/svgcanvas/selected-elem.js index 35fb97ba..f97a06ab 100644 --- a/src/svgcanvas/selected-elem.js +++ b/src/svgcanvas/selected-elem.js @@ -452,7 +452,7 @@ export const groupSelectedElements = function (type, urlArg) { const batchCmd = new BatchCommand(cmdStr) // create and insert the group element - const g = svgCanvas.addSVGElemensFromJson({ + const g = svgCanvas.addSVGElementsFromJson({ element: type, attr: { id: svgCanvas.getNextId() diff --git a/src/svgcanvas/svg-exec.js b/src/svgcanvas/svg-exec.js index 6d2a6846..f1f246fc 100644 --- a/src/svgcanvas/svg-exec.js +++ b/src/svgcanvas/svg-exec.js @@ -50,7 +50,7 @@ export const init = function (canvas) { * @function module:svgcanvas.SvgCanvas#svgCanvasToString * @returns {string} The SVG image for output */ -export const svgCanvasToString = function () { +export const svgCanvasToString = () => { // keep calling it until there are none to remove while (svgCanvas.removeUnusedDefElems() > 0) { } // eslint-disable-line no-empty diff --git a/src/svgcanvas/svgcanvas.js b/src/svgcanvas/svgcanvas.js index 98f53f99..ad78176a 100644 --- a/src/svgcanvas/svgcanvas.js +++ b/src/svgcanvas/svgcanvas.js @@ -319,7 +319,7 @@ class SvgCanvas { setStartTransform (transform) { this.startTransform = transform } getZoom () { return this.zoom } round (val) { return Number.parseInt(val * this.zoom) / this.zoom } - createSVGElement (jsonMap) { return this.addSVGElemensFromJson(jsonMap) } + createSVGElement (jsonMap) { return this.addSVGElementsFromJson(jsonMap) } getContainer () { return this.container } setStarted (s) { this.started = s } getRubberBox () { return this.rubberBox } @@ -805,7 +805,8 @@ class SvgCanvas { * Otherwise the resulting path element is returned. */ convertToPath (elem, getBBox) { - if (isNullish(elem)) { + // if elems not given, recursively call convertPath for all selected elements. + if (!elem) { const elems = this.selectedElements elems.forEach((el) => { if (el) { this.convertToPath(el) } @@ -813,7 +814,7 @@ class SvgCanvas { return undefined } if (getBBox) { - return getBBoxOfElementAsPath(elem, this.addSVGElemensFromJson, this.pathActions) + return getBBoxOfElementAsPath(elem, this.addSVGElementsFromJson, this.pathActions) } // TODO: Why is this applying attributes from this.curShape, then inside utilities.convertToPath it's pulling addition attributes from elem? // TODO: If convertToPath is called with one elem, this.curShape and elem are probably the same; but calling with multiple is a bug or cool feature. @@ -829,10 +830,7 @@ class SvgCanvas { opacity: this.curShape.opacity, visibility: 'hidden' } - return convertToPath( - elem, attrs, this.addSVGElemensFromJson, this.pathActions, - this.clearSelection, this.addToSelection, history, this.addCommandToHistory - ) + return convertToPath(elem, attrs, this) // call convertToPath from utilities.js } /** @@ -848,7 +846,7 @@ class SvgCanvas { initializeSvgCanvasMethods () { this.getJsonFromSvgElements = getJsonFromSvgElements - this.addSVGElemensFromJson = addSVGElementsFromJson + this.addSVGElementsFromJson = addSVGElementsFromJson this.clearSvgContentElement = clearSvgContentElementInit this.textActions = textActionsMethod this.getIntersectionList = getIntersectionListMethod diff --git a/src/svgcanvas/utilities.js b/src/svgcanvas/utilities.js index 513b8da7..0d9c5dcc 100644 --- a/src/svgcanvas/utilities.js +++ b/src/svgcanvas/utilities.js @@ -26,7 +26,7 @@ let svgroot_ = null * @typedef {PlainObject} module:utilities.SVGElementJSON * @property {string} element - Tag name of the SVG element to create * @property {PlainObject} attr - Has key-value attributes to assign to the new element. -* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElemensFromJson} can later re-identify the element for modification or replacement. +* An `id` should be set so that {@link module:utilities.EditorContext#addSVGElementsFromJson} can later re-identify the element for modification or replacement. * @property {boolean} [curStyles=false] - Indicates whether current style attributes should be applied first * @property {module:utilities.SVGElementJSON[]} [children] - Data objects to be added recursively as children * @property {string} [namespace="http://www.w3.org/2000/svg"] - Indicate a (non-SVG) namespace @@ -46,7 +46,7 @@ let svgroot_ = null * Create a new SVG element based on the given object keys/values and add it * to the current layer. * The element will be run through `cleanupElement` before being returned. - * @function module:utilities.EditorContext#addSVGElemensFromJson + * @function module:utilities.EditorContext#addSVGElementsFromJson * @param {module:utilities.SVGElementJSON} data * @returns {Element} The new element */ @@ -667,12 +667,12 @@ export const getExtraAttributesForConvertToPath = function (elem) { * Get the BBox of an element-as-path. * @function module:utilities.getBBoxOfElementAsPath * @param {Element} elem - The DOM element to be probed -* @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson +* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson * @param {module:path.pathActions} pathActions - If a transform exists, `pathActions.resetOrientation()` is used. See: canvas.pathActions. * @returns {DOMRect|false} The resulting path's bounding box object. */ -export const getBBoxOfElementAsPath = function (elem, addSVGElemensFromJson, pathActions) { - const path = addSVGElemensFromJson({ +export const getBBoxOfElementAsPath = function (elem, addSVGElementsFromJson, pathActions) { + const path = addSVGElementsFromJson({ element: 'path', attr: getExtraAttributesForConvertToPath(elem) }) @@ -713,7 +713,7 @@ export const getBBoxOfElementAsPath = function (elem, addSVGElemensFromJson, pat * @function module:utilities.convertToPath * @param {Element} elem - The DOM element to be converted * @param {module:utilities.SVGElementJSON} attrs - Apply attributes to new path. see canvas.convertToPath -* @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson +* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @param {module:draw.DrawCanvasInit#clearSelection|module:path.EditorContext#clearSelection} clearSelection - see [canvas.clearSelection]{@link module:svgcanvas.SvgCanvas#clearSelection} * @param {module:path.EditorContext#addToSelection} addToSelection - see [canvas.addToSelection]{@link module:svgcanvas.SvgCanvas#addToSelection} @@ -721,16 +721,13 @@ export const getBBoxOfElementAsPath = function (elem, addSVGElemensFromJson, pat * @param {module:path.EditorContext#addCommandToHistory|module:draw.DrawCanvasInit#addCommandToHistory} addCommandToHistory - see [canvas.addCommandToHistory]{@link module:svgcanvas~addCommandToHistory} * @returns {SVGPathElement|null} The converted path element or null if the DOM element was not recognized. */ -export const convertToPath = ( - elem, attrs, addSVGElemensFromJson, pathActions, - clearSelection, addToSelection, hstry, addCommandToHistory -) => { - const batchCmd = new hstry.BatchCommand('Convert element to Path') +export const convertToPath = (elem, attrs, svgCanvas) => { + const batchCmd = new svgCanvas.history.BatchCommand('Convert element to Path') // Any attribute on the element not covered by the passed-in attributes attrs = mergeDeep(attrs, getExtraAttributesForConvertToPath(elem)) - const path = addSVGElemensFromJson({ + const path = svgCanvas.addSVGElementsFromJson({ element: 'path', attr: attrs }) @@ -758,21 +755,21 @@ export const convertToPath = ( if (eltrans) { const tlist = path.transform.baseVal if (hasMatrixTransform(tlist)) { - pathActions.resetOrientation(path) + svgCanvas.pathActions.resetOrientation(path) } } const { nextSibling } = elem - batchCmd.addSubCommand(new hstry.RemoveElementCommand(elem, nextSibling, parent)) - batchCmd.addSubCommand(new hstry.InsertElementCommand(path)) + batchCmd.addSubCommand(new svgCanvas.history.RemoveElementCommand(elem, nextSibling, parent)) + batchCmd.addSubCommand(new svgCanvas.history.InsertElementCommand(path)) - clearSelection() + svgCanvas.clearSelection() elem.remove() path.setAttribute('id', id) path.removeAttribute('visibility') - addToSelection([path], true) + svgCanvas.addToSelection([path], true) - addCommandToHistory(batchCmd) + svgCanvas.addCommandToHistory(batchCmd) return path } @@ -812,11 +809,11 @@ function bBoxCanBeOptimizedOverNativeGetBBox (angle, hasAMatrixTransform) { * Get bounding box that includes any transforms. * @function module:utilities.getBBoxWithTransform * @param {Element} elem - The DOM element to be converted -* @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson +* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object */ -export const getBBoxWithTransform = function (elem, addSVGElemensFromJson, pathActions) { +export const getBBoxWithTransform = function (elem, addSVGElementsFromJson, pathActions) { // TODO: Fix issue with rotated groups. Currently they work // fine in FF, but not in other browsers (same problem mentioned // in Issue 339 comment #2). @@ -838,14 +835,14 @@ export const getBBoxWithTransform = function (elem, addSVGElemensFromJson, pathA // TODO: why ellipse and not circle const elemNames = ['ellipse', 'path', 'line', 'polyline', 'polygon'] if (elemNames.includes(elem.tagName)) { - goodBb = getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions) + goodBb = getBBoxOfElementAsPath(elem, addSVGElementsFromJson, pathActions) bb = goodBb } else if (elem.tagName === 'rect') { // Look for radius const rx = Number(elem.getAttribute('rx')) const ry = Number(elem.getAttribute('ry')) if (rx || ry) { - goodBb = getBBoxOfElementAsPath(elem, addSVGElemensFromJson, pathActions) + goodBb = getBBoxOfElementAsPath(elem, addSVGElementsFromJson, pathActions) bb = goodBb } } @@ -882,18 +879,18 @@ function getStrokeOffsetForBBox (elem) { * Get the bounding box for one or more stroked and/or transformed elements. * @function module:utilities.getStrokedBBox * @param {Element[]} elems - Array with DOM elements to check -* @param {module:utilities.EditorContext#addSVGElemensFromJson} addSVGElemensFromJson - Function to add the path element to the current layer. See canvas.addSVGElemensFromJson +* @param {module:utilities.EditorContext#addSVGElementsFromJson} addSVGElementsFromJson - Function to add the path element to the current layer. See canvas.addSVGElementsFromJson * @param {module:path.pathActions} pathActions - If a transform exists, pathActions.resetOrientation() is used. See: canvas.pathActions. * @returns {module:utilities.BBoxObject|module:math.TransformedBox|DOMRect} A single bounding box object */ -export const getStrokedBBox = function (elems, addSVGElemensFromJson, pathActions) { +export const getStrokedBBox = function (elems, addSVGElementsFromJson, pathActions) { if (!elems || !elems.length) { return false } let fullBb elems.forEach(function (elem) { if (fullBb) { return } if (!elem.parentNode) { return } - fullBb = getBBoxWithTransform(elem, addSVGElemensFromJson, pathActions) + fullBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions) }) // This shouldn't ever happen... @@ -916,7 +913,7 @@ export const getStrokedBBox = function (elems, addSVGElemensFromJson, pathAction maxY += offset } else { elems.forEach(function (elem) { - const curBb = getBBoxWithTransform(elem, addSVGElemensFromJson, pathActions) + const curBb = getBBoxWithTransform(elem, addSVGElementsFromJson, pathActions) if (curBb) { const offset = getStrokeOffsetForBBox(elem) minX = Math.min(minX, curBb.x - offset) @@ -972,7 +969,7 @@ export const getStrokedBBoxDefaultVisible = function (elems) { if (!elems) { elems = getVisibleElements() } return getStrokedBBox( elems, - svgCanvas.addSVGElemensFromJson, + svgCanvas.addSVGElementsFromJson, svgCanvas.pathActions ) }