diff --git a/docker-compose.snapshots.update.yml b/docker-compose.snapshots.update.yml index 6d0e4a13..557899d4 100644 --- a/docker-compose.snapshots.update.yml +++ b/docker-compose.snapshots.update.yml @@ -1,7 +1,7 @@ version: '3' services: e2e: - image: cypress/included:10.11.0 + image: cypress/included:11.2.0 container_name: wisemapping-integration-tests entrypoint: '/bin/sh -c "yarn install && yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e diff --git a/docker-compose.snapshots.yml b/docker-compose.snapshots.yml index c1622738..f914ab4c 100644 --- a/docker-compose.snapshots.yml +++ b/docker-compose.snapshots.yml @@ -1,7 +1,7 @@ version: '3' services: e2e: - image: cypress/included:10.11.0 + image: cypress/included:11.2.0 container_name: wisemapping-integration-tests entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e diff --git a/packages/editor/cypress.config.ts b/packages/editor/cypress.config.ts index de410d15..d6711d4b 100644 --- a/packages/editor/cypress.config.ts +++ b/packages/editor/cypress.config.ts @@ -2,9 +2,11 @@ import { defineConfig } from 'cypress'; export default defineConfig({ projectId: 'it9g7s', - video: false, + video: true, videoUploadOnPasses: false, includeShadowDom: true, + viewportWidth: 1000, + viewportHeight: 660, e2e: { // We've imported your old cypress plugins here. // You may want to clean this up later by importing these. diff --git a/packages/editor/cypress/e2e/relationship.cy.js b/packages/editor/cypress/e2e/relationship.cy.js deleted file mode 100644 index a6a161b2..00000000 --- a/packages/editor/cypress/e2e/relationship.cy.js +++ /dev/null @@ -1,30 +0,0 @@ -context('Relationship Topics', () => { - beforeEach(() => { - cy.visit('/editor.html'); - cy.reload(); - cy.get('[test-id="30-11-relationship"]').first().click({ force: true }); - }); - - it('Add Relationship', () => { - cy.contains('Features').first().click(); - cy.get(`[aria-label="Add Relationship"]`).first().click(); - cy.contains('Try it Now!').first().click(); - - cy.get('[test-id="11-15-relationship"]').first().click({ force: true }); - cy.get('[test-id="11-15-relationship"]').should('exist'); - - cy.matchImageSnapshot('addRelationship'); - }); - - it('Delete Relationship', () => { - cy.contains('Features').first().click(); - cy.get(`[aria-label="Add Relationship"]`).first().click(); - cy.contains('Try it Now!').first().click(); - - cy.get('[test-id="11-15-relationship"]').click({ force: true }); - cy.get('body').type('{backspace}'); - - cy.get('[test-id="11-15-relationship"]').should('not.exist'); - cy.matchImageSnapshot('delete relationship'); - }); -}); diff --git a/packages/editor/cypress/e2e/relationship.cy.ts b/packages/editor/cypress/e2e/relationship.cy.ts new file mode 100644 index 00000000..a075091d --- /dev/null +++ b/packages/editor/cypress/e2e/relationship.cy.ts @@ -0,0 +1,79 @@ +context('Relationship Topics', () => { + beforeEach(() => { + // Remove storage for autosave ... + cy.visit('/editor.html'); + cy.clearLocalStorage('welcome-xml'); + cy.reload(); + + // Wait for load complate ... + cy.get('[aria-label="vortex-loading"]').should('not.exist'); + }); + + it('Add Relationship', () => { + // Create new relationship ... + cy.contains('Features').click({ force: true }); + cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true }); + cy.contains('Try it Now!').click(); + + cy.get('[test-id="11-15-relationship"]').as('rel'); + cy.get('@rel').click({ force: true }); + cy.get('@rel').should('exist'); + + cy.matchImageSnapshot('addRelationship'); + + // Undo relationship ... + cy.get('[aria-label^="Undo ').eq(1).click(); + cy.get('@rel').should('not.exist'); + }); + + it('Delete Relationship', () => { + // Add new relationship ... + cy.contains('Features').first().click({ force: true }); + cy.get(`[aria-label="Add Relationship"]`).first().click(); + cy.contains('Try it Now!').first().click(); + + // Delete it ... + cy.get('[test-id="11-15-relationship"]').as('rel'); + cy.get('@rel').should('exist'); + cy.get('@rel').click({ force: true }); + + cy.get('body').type('{backspace}'); + + cy.get('@rel').should('not.exist'); + cy.matchImageSnapshot('delete relationship'); + + // Undo relationship ... + cy.get('[aria-label^="Undo ').eq(1).click(); + cy.get('@rel').should('exist'); + }); + + it('Change Control Point', () => { + // Create new relationship ... + cy.contains('Features').click({ force: true }); + cy.get(`[aria-label="Add Relationship"]`).click({ multiple: true }); + cy.contains('Try it Now!').click(); + + // Select relationship ... + cy.get('[test-id="11-15-relationship"]').as('rel'); + cy.get('@rel').should('exist'); + cy.get('@rel').click({ force: true }); + + // Move control point start ... + cy.get('[test-id="relctl:0:11-15"]').first().trigger('mousedown'); + cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('move ctl pont 0'); + + // Move control point end ... + cy.get('[test-id="relctl:1:11-15"]').first().trigger('mousedown'); + cy.get('body').trigger('mousemove', { clientX: 350, clientY: 100 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('move ctl pont 1'); + + // Test undo and redo ... + cy.get('[aria-label^="Undo ').eq(1).click(); + cy.get('[aria-label^="Undo ').eq(1).click(); + cy.get('@rel').should('exist'); + cy.matchImageSnapshot('rel ctl undo'); + }); +}); diff --git a/packages/editor/cypress/e2e/renderAll.cy.ts b/packages/editor/cypress/e2e/renderAll.cy.ts new file mode 100644 index 00000000..38ae3c73 --- /dev/null +++ b/packages/editor/cypress/e2e/renderAll.cy.ts @@ -0,0 +1,31 @@ +context('Render all sample maps', () => { + [ + 'complex', + 'emoji', + 'emptyNodes', + 'error-on-load', + 'huge', + 'huge2', + 'icon-sample', + 'img-support', + 'order', + //'rel-error', + 'sample1', + 'sample2', + 'sample3', + 'sample4', + 'sample5', + 'sample6', + 'sample8', + 'welcome', + ].forEach((mapId) => { + it(`Render map => ${mapId}`, () => { + cy.visit(`/viewmode.html?id=${mapId}`); + cy.reload(); + + cy.get('svg > path').should('be.visible'); + cy.get('[aria-label="vortex-loading"]', { timeout: 120000 }).should('not.exist'); + cy.matchImageSnapshot(`map-${mapId}`); + }); + }); +}); diff --git a/packages/editor/cypress/e2e/topicFontChange.cy.js b/packages/editor/cypress/e2e/topicFontChange.cy.js deleted file mode 100644 index a79996d1..00000000 --- a/packages/editor/cypress/e2e/topicFontChange.cy.js +++ /dev/null @@ -1,75 +0,0 @@ -context('Edit Topic', () => { - // TODO: review why click({force: true}) is needed in these tests - // also, why is the element outside the viewport in screenshots? - beforeEach(() => { - cy.visit('/editor.html'); - cy.reload(); - cy.get('[test-id=1]').click(); - }); - - it('Change Main Topic Text', () => { - cy.get('body').type('New Title Main Topic{enter}'); - cy.get('[test-id=1] > text > tspan').should('have.text', 'New Title Main Topic'); - cy.matchImageSnapshot('changeMainTopicText'); - }); - - it('Change Font Size', () => { - - // Go to the minimal size. - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[aria-label="Smaller"]`).first().click(); - cy.get(`[aria-label="Smaller"]`).first().click(); - - - // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1'); - cy.matchImageSnapshot('changeFontSizeSmall'); - - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[aria-label="Bigger"]`).first().click(); - // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.8'); - cy.matchImageSnapshot('changeFontSizeNormal'); - - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[aria-label="Bigger"]`).first().click(); - // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4'); - cy.matchImageSnapshot('changeFontSizeLarge'); - - cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); - cy.get(`[aria-label="Bigger"]`).first().click(); - - // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2'); - cy.matchImageSnapshot('changeFontSizeHuge'); - - // Can not scale it more. - cy.get(`[aria-label="Bigger"]`).first().click(); - // cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2'); - cy.matchImageSnapshot('changeFontSizeHuge'); - - }); - - // it('Change Font To Italic', () => { - // cy.get(`[aria-label="Font Style"]`).trigger('mouseover'); - // cy.contains(`[data-test-id="FormactItalicIcon"]`).click(); - - // cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times'); - // cy.matchImageSnapshot('changeFontType'); - // }); - - // it('Change Font Italic', () => { - // cy.get(`[aria-label="Font Style"]`).trigger('mouseover'); - // cy.contains('[data-testid="FormatItalicIcon"]').click(); - - // cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic'); - - // cy.matchImageSnapshot('changeFontItalic'); - // }); - - // it('Change Font color', () => { - // cy.get('#fontColorTip').click(); - // cy.get('[title="RGB (153, 0, 255)"]').click({ force: true }); - - // cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', 'rgb(153, 0, 255)'); - - // cy.matchImageSnapshot('changeFontColor'); - // }); -}); diff --git a/packages/editor/cypress/e2e/topicFontChange.cy.ts b/packages/editor/cypress/e2e/topicFontChange.cy.ts new file mode 100644 index 00000000..77a55845 --- /dev/null +++ b/packages/editor/cypress/e2e/topicFontChange.cy.ts @@ -0,0 +1,73 @@ +context('Edit Topic', () => { + beforeEach(() => { + // Remove storage for autosave ... + cy.visit('/editor.html'); + cy.clearLocalStorage('welcome-xml'); + cy.reload(); + + // Wait for load complate ... + cy.get('[aria-label="vortex-loading"]').should('not.exist'); + cy.get('[test-id=1]').click(); + }); + + it('Change Main Topic Text', () => { + cy.get('body').type('New Title Main Topic{enter}'); + cy.get('[test-id=1] > text > tspan').should('have.text', 'New Title Main Topic'); + cy.matchImageSnapshot('changeMainTopicText'); + }); + + it('Change Font Size', () => { + // Go to the minimal size. + cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.get('[aria-label="Smaller"]').as('smaller'); + cy.get('@smaller').eq(1).click(); + cy.get('@smaller').eq(1).click(); + + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.1'); + cy.matchImageSnapshot('changeFontSizeSmall'); + + cy.get('[aria-label="Bigger"]').as('bigger'); + cy.get('@bigger').eq(1).click(); + cy.matchImageSnapshot('changeFontSizeNormal'); + + cy.get('@bigger').eq(1).click(); + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4'); + cy.matchImageSnapshot('changeFontSizeLarge'); + + cy.get('@bigger').eq(1).click(); + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2'); + cy.matchImageSnapshot('changeFontSizeHuge'); + + cy.get('@bigger').eq(1).click(); + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.2'); + cy.matchImageSnapshot('changeFontSizeHuge'); + }); + + it('Change Font To Italic', () => { + cy.get('[aria-label="Font Style"]').first().trigger('mouseover'); + cy.get('[aria-label^="Italic ').first().click(); + + cy.get('[test-id=1] > text').invoke('attr', 'font-style').should('eq', 'italic'); + + cy.matchImageSnapshot('changeFontItalic'); + }); + + it('Change Font to Bold', () => { + cy.get(`[aria-label="Font Style"]`).first().trigger('mouseover'); + cy.get('[aria-label^="Bold ').first().click(); + + cy.get('[test-id=1] > text').invoke('attr', 'font-weight').should('eq', 'normal'); + + cy.matchImageSnapshot('changeFontBold'); + }); + + it('Change Font Color', () => { + cy.get('[aria-label="Font Style"]').eq(1).trigger('mouseover'); + cy.get('[aria-label="Color"]').eq(1).click(); + cy.get('[title="#cc0000"]').click({ force: true }); + + cy.get('[test-id=1] > text').invoke('attr', 'fill').should('eq', '#cc0000'); + + cy.matchImageSnapshot('changeFontColor'); + }); +}); diff --git a/packages/editor/cypress/e2e/topicManager.cy.js b/packages/editor/cypress/e2e/topicManager.cy.ts similarity index 88% rename from packages/editor/cypress/e2e/topicManager.cy.js rename to packages/editor/cypress/e2e/topicManager.cy.ts index 15562a63..f2ec5699 100644 --- a/packages/editor/cypress/e2e/topicManager.cy.js +++ b/packages/editor/cypress/e2e/topicManager.cy.ts @@ -4,7 +4,7 @@ context('Node manager', () => { }); it('shortcut add sibling node', () => { - cy.contains('Mind Mapping').click(); + cy.contains('Mind Mapping').click({ force: true }); cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}'); cy.get('[test-id=36] > text > tspan').should('exist'); @@ -13,7 +13,7 @@ context('Node manager', () => { }); it('shortcut add child node', () => { - cy.contains('Mind Mapping rocks!!').click(); + cy.contains('Mind Mapping rocks!!').click({ force: true }); cy.get('body').type('{insert}').type('Child 1 mind Mapping rocks!!').type('{enter}'); cy.get('body').type('{enter}').type('Child 2 mind Mapping rocks!!').type('{enter}'); @@ -47,7 +47,7 @@ context('Node manager', () => { }); it('Save changes', () => { - cy.contains('Mind Mapping rocks!!').click(); + cy.contains('Mind Mapping rocks!!').click({ force: true }); cy.get('body').type('{ctrl}s'); cy.matchImageSnapshot('saveChagesShortcut'); diff --git a/packages/editor/cypress/e2e/topicPosition.cy.js b/packages/editor/cypress/e2e/topicPosition.cy.ts similarity index 87% rename from packages/editor/cypress/e2e/topicPosition.cy.js rename to packages/editor/cypress/e2e/topicPosition.cy.ts index 83c8d409..0a452e37 100644 --- a/packages/editor/cypress/e2e/topicPosition.cy.js +++ b/packages/editor/cypress/e2e/topicPosition.cy.ts @@ -1,7 +1,12 @@ context('Change topic position', () => { beforeEach(() => { + // Remove storage for autosave ... cy.visit('/editor.html'); + cy.clearLocalStorage('welcome-xml'); cy.reload(); + + // Wait for load complate ... + cy.get('[aria-label="vortex-loading"]').should('not.exist'); }); it('Move up node "Mind Mapping"', () => { diff --git a/packages/editor/cypress/e2e/topicShape.cy.js b/packages/editor/cypress/e2e/topicShape.cy.ts similarity index 63% rename from packages/editor/cypress/e2e/topicShape.cy.js rename to packages/editor/cypress/e2e/topicShape.cy.ts index 12c6ab97..e3df98eb 100644 --- a/packages/editor/cypress/e2e/topicShape.cy.js +++ b/packages/editor/cypress/e2e/topicShape.cy.ts @@ -9,7 +9,12 @@ context('Change Topic shape', () => { cy.get(`[aria-label="Topic Style"]`).first().trigger('mouseover'); cy.get(`[aria-label="Rectangle shape"]`).first().click(); - cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('eq', 0); + cy.get('[test-id=11] > rect') + .eq(1) + .invoke('attr', 'rx') + .then(parseInt) + .should('be.a', 'number') + .should('eq', 0); cy.matchImageSnapshot('changeToSquareShape'); }); @@ -21,8 +26,18 @@ context('Change Topic shape', () => { cy.get(`[aria-label="Rounded shape"]`).first().click(); // Todo: Check how to validate this. Difference when it run in docker vs test:integration - cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 4); - cy.get('[test-id=6] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 5); + cy.get('[test-id=6] > rect') + .eq(1) + .invoke('attr', 'rx') + .then(parseInt) + .should('be.a', 'number') + .should('be.gte', 4); + cy.get('[test-id=6] > rect') + .eq(1) + .invoke('attr', 'rx') + .then(parseInt) + .should('be.a', 'number') + .should('be.lt', 5); cy.matchImageSnapshot('changeToRoundedRectangle'); }); @@ -43,8 +58,18 @@ context('Change Topic shape', () => { cy.get(`[aria-label="Ellipse shape"]`).first().click(); // Todo: Check how to validate this. Difference when it run in docker vs test:integration - cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.gte', 12); - cy.get('[test-id=2] > rect').eq(1).invoke('attr', 'rx').then(parseInt).should('be.a', 'number').should('be.lt', 15); + cy.get('[test-id=2] > rect') + .eq(1) + .invoke('attr', 'rx') + .then(parseInt) + .should('be.a', 'number') + .should('be.gte', 12); + cy.get('[test-id=2] > rect') + .eq(1) + .invoke('attr', 'rx') + .then(parseInt) + .should('be.a', 'number') + .should('be.lt', 15); cy.matchImageSnapshot('changeToEllipseShape'); }); diff --git a/packages/editor/cypress/snapshots/relationship.cy.js/addRelationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.js/addRelationship.snap.png index 232d3d50..2a64d480 100644 Binary files a/packages/editor/cypress/snapshots/relationship.cy.js/addRelationship.snap.png and b/packages/editor/cypress/snapshots/relationship.cy.js/addRelationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png new file mode 100644 index 00000000..2a64d480 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/addRelationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png new file mode 100644 index 00000000..487d7bc7 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/delete relationship.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png new file mode 100644 index 00000000..0b846b43 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 0.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png new file mode 100644 index 00000000..ea16c41b Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/move ctl pont 1.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png new file mode 100644 index 00000000..92770bc3 Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.cy.ts/rel ctl undo.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-complex.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-complex.snap.png new file mode 100644 index 00000000..5f873c1d Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-complex.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-emoji.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-emoji.snap.png new file mode 100644 index 00000000..c53bb7c7 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-emoji.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-emptyNodes.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-emptyNodes.snap.png new file mode 100644 index 00000000..c033dedf Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-emptyNodes.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-error-on-load.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-error-on-load.snap.png new file mode 100644 index 00000000..aa2ecc57 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-error-on-load.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge.snap.png new file mode 100644 index 00000000..a7a026c7 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge2.snap.png new file mode 100644 index 00000000..2c90f746 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-huge2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-icon-sample.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-icon-sample.snap.png new file mode 100644 index 00000000..3a77971a Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-icon-sample.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-img-support.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-img-support.snap.png new file mode 100644 index 00000000..19c6fcdc Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-img-support.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-order.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-order.snap.png new file mode 100644 index 00000000..6e8a174a Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-order.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-rel-error.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-rel-error.snap.png new file mode 100644 index 00000000..36177c77 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-rel-error.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample1.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample1.snap.png new file mode 100644 index 00000000..36177c77 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample1.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample2.snap.png new file mode 100644 index 00000000..b2f920c3 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample3.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample3.snap.png new file mode 100644 index 00000000..3ae6e0ca Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample3.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample4.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample4.snap.png new file mode 100644 index 00000000..3874493c Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample4.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample5.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample5.snap.png new file mode 100644 index 00000000..e7ee8a49 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample5.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample6.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample6.snap.png new file mode 100644 index 00000000..e7ee8a49 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample6.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample8.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample8.snap.png new file mode 100644 index 00000000..fd15d7ab Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-sample8.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.js/map-welcome.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.js/map-welcome.snap.png new file mode 100644 index 00000000..9e2ee178 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.js/map-welcome.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png new file mode 100644 index 00000000..5f873c1d Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-complex.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png new file mode 100644 index 00000000..c53bb7c7 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emoji.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png new file mode 100644 index 00000000..c033dedf Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-emptyNodes.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png new file mode 100644 index 00000000..aa2ecc57 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-error-on-load.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png new file mode 100644 index 00000000..6f90c911 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png new file mode 100644 index 00000000..2c90f746 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-huge2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png new file mode 100644 index 00000000..3a77971a Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-icon-sample.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png new file mode 100644 index 00000000..19c6fcdc Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-img-support.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png new file mode 100644 index 00000000..6e8a174a Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-order.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-rel-error.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-rel-error.snap.png new file mode 100644 index 00000000..36177c77 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-rel-error.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png new file mode 100644 index 00000000..6dd958c8 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample1.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png new file mode 100644 index 00000000..b2f920c3 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample2.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png new file mode 100644 index 00000000..3ae6e0ca Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample3.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png new file mode 100644 index 00000000..3874493c Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample4.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png new file mode 100644 index 00000000..e7ee8a49 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample5.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png new file mode 100644 index 00000000..483ea100 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample6.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png new file mode 100644 index 00000000..fd15d7ab Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-sample8.snap.png differ diff --git a/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png new file mode 100644 index 00000000..9e2ee178 Binary files /dev/null and b/packages/editor/cypress/snapshots/renderAll.cy.ts/map-welcome.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeHuge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeHuge.snap.png index 05b3ab0c..00063b99 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeHuge.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeHuge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeLarge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeLarge.snap.png index e0ac7cd7..bd312147 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeLarge.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeLarge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeNormal.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeNormal.snap.png index 0291dd98..ef7808b3 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeNormal.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeNormal.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeSmall.snap.png index 7e286516..53215dac 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeSmall.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeMainTopicText.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeMainTopicText.snap.png index d773673f..63d9478f 100644 Binary files a/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeMainTopicText.snap.png and b/packages/editor/cypress/snapshots/topicFontChange.cy.js/changeMainTopicText.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png new file mode 100644 index 00000000..00dd4b0d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontBold.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png new file mode 100644 index 00000000..07bbc605 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontColor.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png new file mode 100644 index 00000000..312aec75 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontItalic.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png new file mode 100644 index 00000000..7fce65fd Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeHuge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png new file mode 100644 index 00000000..a7c108e1 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeLarge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png new file mode 100644 index 00000000..da8b979c Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeNormal.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png new file mode 100644 index 00000000..5a2c6ecc Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png new file mode 100644 index 00000000..63d9478f Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.cy.ts/changeMainTopicText.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/addChildNodeSortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/addChildNodeSortcut.snap.png index 499f94d3..81f0b800 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/addChildNodeSortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/addChildNodeSortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/deleteTopicShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/deleteTopicShortcut.snap.png index c5cb0c6d..80b510ed 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/deleteTopicShortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/deleteTopicShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/editor-shortcut-edit.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/editor-shortcut-edit.snap.png index 6083385c..18fa9380 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/editor-shortcut-edit.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/editor-shortcut-edit.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/redoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/redoChange.snap.png index c95f5dfc..80b510ed 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/redoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/redoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/saveChagesShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/saveChagesShortcut.snap.png index 6ae45ad8..07e26b65 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/saveChagesShortcut.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/saveChagesShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.js/undoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.js/undoChange.snap.png index e62f98bb..f72fed9a 100644 Binary files a/packages/editor/cypress/snapshots/topicManager.cy.js/undoChange.snap.png and b/packages/editor/cypress/snapshots/topicManager.cy.js/undoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png new file mode 100644 index 00000000..f4df0bf9 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/addChildNodeSortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png new file mode 100644 index 00000000..80b510ed Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/deleteTopicShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png new file mode 100644 index 00000000..d5a56131 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/editor-shortcut-edit.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png new file mode 100644 index 00000000..80b510ed Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/redoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png new file mode 100644 index 00000000..f6f82cd3 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/saveChagesShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png new file mode 100644 index 00000000..f72fed9a Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.cy.ts/undoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveDefaultPosition.snap.png index 2a04948b..98953bb7 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveDefaultPosition.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.js/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.js/movedownNode.snap.png index 0dd72540..4e00faa5 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.js/movedownNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.js/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveleftNode.snap.png index 611420d7..ad5f0649 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveleftNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveupNode.snap.png index 4a930dfe..8a382a5f 100644 Binary files a/packages/editor/cypress/snapshots/topicPosition.cy.js/moveupNode.snap.png and b/packages/editor/cypress/snapshots/topicPosition.cy.js/moveupNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png new file mode 100644 index 00000000..98953bb7 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png new file mode 100644 index 00000000..e6a7ace7 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png new file mode 100644 index 00000000..ad5f0649 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png new file mode 100644 index 00000000..8a382a5f Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.cy.ts/moveupNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToEllipseShape.snap.png index d08c891d..82eb4438 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToEllipseShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToEllipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToLine.snap.png index 800551e2..8982d834 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToLine.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToLine.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToRoundedRectangle.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToRoundedRectangle.snap.png index 5940d893..76686fdf 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToRoundedRectangle.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToRoundedRectangle.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToSquareShape.snap.png index e867bd90..a9b94702 100644 Binary files a/packages/editor/cypress/snapshots/topicShape.cy.js/changeToSquareShape.snap.png and b/packages/editor/cypress/snapshots/topicShape.cy.js/changeToSquareShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png new file mode 100644 index 00000000..dd1073f9 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToEllipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png new file mode 100644 index 00000000..4a846c2a Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToLine.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png new file mode 100644 index 00000000..38d50711 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToRoundedRectangle.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png new file mode 100644 index 00000000..c9abf86d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.cy.ts/changeToSquareShape.snap.png differ diff --git a/packages/editor/cypress/support/e2e.js b/packages/editor/cypress/support/e2e.js index 37a498fb..df4f8df7 100644 --- a/packages/editor/cypress/support/e2e.js +++ b/packages/editor/cypress/support/e2e.js @@ -1,20 +1,13 @@ -// *********************************************************** -// This example support/index.js is processed and -// loaded automatically before your test files. -// -// This is a great place to put global configuration and -// behavior that modifies Cypress. -// -// You can change the location of this file or turn off -// automatically serving support files with the -// 'supportFile' configuration option. -// -// You can read more here: -// https://on.cypress.io/configuration -// *********************************************************** - -// Import commands.js using ES2015 syntax: import './commands'; -// Alternatively you can use CommonJS syntax: -// require('./commands') +Cypress.on('window:before:load', (win) => { + cy.spy(win.console, 'error'); + cy.spy(win.console, 'warn'); +}); + +// afterEach(() => { +// cy.window().then((win) => { +// expect(win.console.error).to.have.callCount(0); +// expect(win.console.warn).to.have.callCount(0); +// }); +// }); diff --git a/packages/editor/package.json b/packages/editor/package.json index bda4b87a..3fb4fb52 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -8,7 +8,7 @@ "cy:run": "cypress run", "lint": "eslint src --ext js,ts,tsx", "test:integration": "start-server-and-test 'yarn playground' http-get://localhost:8081 'yarn cy:run'", - "test": "yarn test:unit test:integration", + "test": "yarn test:unit && yarn test:integration", "test:unit": "jest ./test/unit/* --detectOpenHandles", "i18n:extract": "formatjs extract 'src/**/*.ts*' --ignore 'src/@types/**/*' --out-file lang/en.json", "i18n:compile": "for lang in {'es','en','fr','de','zh','ru'};do formatjs compile lang/${lang}.json --ast --out-file src/compiled-lang/${lang}.json;done" @@ -27,7 +27,7 @@ "clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^10.2.1", "css-loader": "^6.7.1", - "cypress": "^10.11.0", + "cypress": "11.2.0", "cypress-image-snapshot": "^4.0.1", "eslint": "^7.14.0", "eslint-config-prettier": "^8.5.0", diff --git a/packages/editor/src/components/index.tsx b/packages/editor/src/components/index.tsx index d1c2afc8..aeabb1cb 100644 --- a/packages/editor/src/components/index.tsx +++ b/packages/editor/src/components/index.tsx @@ -47,6 +47,7 @@ import { SpinnerCentered } from './style'; export type EditorOptions = { mode: EditorRenderMode; locale: string; + zoom?: number; enableKeyboardEvents: boolean; }; @@ -89,9 +90,7 @@ const Editor = ({ }) .catch((e) => { console.error(e); - window.newrelic?.noticeError( - new Error(`Unexpected error loading map ${mapInfo.getId()} = ${JSON.stringify(e)}`), - ); + window.newrelic?.noticeError(e); }); setModel(model); } @@ -140,6 +139,7 @@ const Editor = ({ id="mindmap-comp" mode={options.mode} locale={options.locale} + zoom={options.zoom} /> diff --git a/packages/editor/test/playground/map-render/samples/rel-error.wxml b/packages/editor/test/playground/map-render/samples/rel-error.wxml new file mode 100644 index 00000000..4778da95 --- /dev/null +++ b/packages/editor/test/playground/map-render/samples/rel-error.wxml @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/mindplot/.eslintrc.json b/packages/mindplot/.eslintrc.json index 3fae3a03..72d93e56 100644 --- a/packages/mindplot/.eslintrc.json +++ b/packages/mindplot/.eslintrc.json @@ -22,23 +22,25 @@ "@typescript-eslint" ], "rules": { - // ignore errors when a line finishes with (setting this value to 0 ignores all errors) - "operator-linebreak": [ - "error", "after", { - "overrides": { - "+": "ignore", - "-": "ignore", - ":": "ignore", - "*": "ignore", - "?": "ignore", - ">": "ignore", - "||": "ignore", - "&&": "ignore", - "(": "ignore" - } - } - ], - "object-curly-newline": "off", + // ignore errors when a line finishes with (setting this value to 0 ignores all errors) + "operator-linebreak": [ + "error", + "after", + { + "overrides": { + "+": "ignore", + "-": "ignore", + ":": "ignore", + "*": "ignore", + "?": "ignore", + ">": "ignore", + "||": "ignore", + "&&": "ignore", + "(": "ignore" + } + } + ], + "object-curly-newline": "off", "no-underscore-dangle": "off", "no-plusplus": "off", "no-param-reassign": "off", @@ -48,10 +50,10 @@ ], "class-methods-use-this": "off", "no-console": "off", - // codebase contains many this aliases, fix in the future? + "@typescript-eslint/no-explicit-any": "error", + "@typescript-eslint/no-unused-vars": "error", "@typescript-eslint/no-this-alias": "off", - // Remove once migration is completed ... - "@typescript-eslint/no-explicit-any": "warn", + "@typescript-eslint/no-non-null-assertion": "off", "import/extensions": [ "error", "ignorePackages", @@ -62,7 +64,7 @@ "tsx": "never" } ], - "implicit-arrow-linebreak": "off" + "implicit-arrow-linebreak": "off" }, "settings": { "import/resolver": { @@ -77,4 +79,4 @@ } } } -} +} \ No newline at end of file diff --git a/packages/mindplot/package.json b/packages/mindplot/package.json index cfe5e4a5..48f42ac1 100644 --- a/packages/mindplot/package.json +++ b/packages/mindplot/package.json @@ -56,7 +56,7 @@ "compression-webpack-plugin": "^9.2.0", "copy-webpack-plugin": "^10.0.0", "core-js": "^3.15.2", - "cypress": "^10.11.0", + "cypress": "^11.2.0", "cypress-image-snapshot": "^4.0.1", "eslint": "^8.4.1", "eslint-config-airbnb-base": "^14.2.1", diff --git a/packages/mindplot/src/@types/custom.d.ts b/packages/mindplot/src/@types/custom.d.ts index 2ff57beb..957d9d84 100644 --- a/packages/mindplot/src/@types/custom.d.ts +++ b/packages/mindplot/src/@types/custom.d.ts @@ -1,4 +1,5 @@ declare module '*.svg' { + // eslint-disable-next-line @typescript-eslint/no-explicit-any const content: any; export default content; } diff --git a/packages/mindplot/src/components/ActionDispatcher.ts b/packages/mindplot/src/components/ActionDispatcher.ts index 4e99a739..5499782f 100644 --- a/packages/mindplot/src/components/ActionDispatcher.ts +++ b/packages/mindplot/src/components/ActionDispatcher.ts @@ -21,7 +21,7 @@ import { $assert } from '@wisemapping/core-js'; import Point from '@wisemapping/web2d'; import { Mindmap } from '..'; import CommandContext from './CommandContext'; -import RelationshipControlPoints, { PivotType } from './RelationshipControlPoints'; +import { PivotType } from './RelationshipControlPoints'; import Events from './Events'; import NodeModel from './model/NodeModel'; import RelationshipModel from './model/RelationshipModel'; diff --git a/packages/mindplot/src/components/Command.ts b/packages/mindplot/src/components/Command.ts index a1cb6feb..a5677ca0 100644 --- a/packages/mindplot/src/components/Command.ts +++ b/packages/mindplot/src/components/Command.ts @@ -23,7 +23,7 @@ abstract class Command { static _uuid: number; - private _discardDuplicated: string; + private _discardDuplicated: string | undefined; constructor() { this._id = Command._nextUUID(); @@ -46,7 +46,7 @@ abstract class Command { return this._uuid; } - getDiscardDuplicated(): string { + getDiscardDuplicated(): string | undefined { return this._discardDuplicated; } diff --git a/packages/mindplot/src/components/ConnectionLine.ts b/packages/mindplot/src/components/ConnectionLine.ts index cc223f4f..9775bcf1 100644 --- a/packages/mindplot/src/components/ConnectionLine.ts +++ b/packages/mindplot/src/components/ConnectionLine.ts @@ -16,7 +16,7 @@ * limitations under the License. */ -import { $assert, $defined } from '@wisemapping/core-js'; +import { $assert } from '@wisemapping/core-js'; import { Point, CurvedLine, PolyLine, Line } from '@wisemapping/web2d'; import { TopicShape } from './model/INodeModel'; import RelationshipModel from './model/RelationshipModel'; @@ -24,18 +24,26 @@ import Topic from './Topic'; import TopicConfig from './TopicConfig'; import Workspace from './Workspace'; +// eslint-disable-next-line no-shadow +export enum LineType { + SIMPLE, + POLYLINE, + CURVED, + SIMPLE_CURVED, +} + class ConnectionLine { protected _targetTopic: Topic; protected _sourceTopic: Topic; - protected _lineType: number; + protected _lineType: LineType; protected _line2d: Line; protected _model: RelationshipModel; - constructor(sourceNode: Topic, targetNode: Topic, lineType?: number) { + constructor(sourceNode: Topic, targetNode: Topic) { $assert(targetNode, 'parentNode node can not be null'); $assert(sourceNode, 'childNode node can not be null'); $assert(sourceNode !== targetNode, 'Circular connection'); @@ -46,11 +54,11 @@ class ConnectionLine { let line: Line; const ctrlPoints = this._getCtrlPoints(sourceNode, targetNode); if (targetNode.getType() === 'CentralTopic') { - line = this._createLine(lineType, ConnectionLine.CURVED); + line = this._createLine(LineType.CURVED); line.setSrcControlPoint(ctrlPoints[0]); line.setDestControlPoint(ctrlPoints[1]); } else { - line = this._createLine(lineType, ConnectionLine.SIMPLE_CURVED); + line = this._createLine(LineType.SIMPLE_CURVED); line.setSrcControlPoint(ctrlPoints[0]); line.setDestControlPoint(ctrlPoints[1]); } @@ -69,24 +77,25 @@ class ConnectionLine { return [new Point(deltaX, 0), new Point(-deltaX, 0)]; } - protected _createLine(lineTypeParam: number, defaultStyle: number): Line { - const lineType = $defined(lineTypeParam) ? lineTypeParam : defaultStyle; + protected _createLine(lineType: LineType): Line { this._lineType = lineType; - let line = null; + let line: ConnectionLine; switch (lineType) { - case ConnectionLine.POLYLINE: + case LineType.POLYLINE: line = new PolyLine(); break; - case ConnectionLine.CURVED: + case LineType.CURVED: line = new CurvedLine(); break; - case ConnectionLine.SIMPLE_CURVED: + case LineType.SIMPLE_CURVED: line = new CurvedLine(); - line.setStyle(CurvedLine.SIMPLE_LINE); + (line as CurvedLine).setStyle(CurvedLine.SIMPLE_LINE); break; - default: + case LineType.SIMPLE: line = new Line(); break; + default: + throw new Error(`Unexpected line type. ${lineType}`); } return line; } @@ -141,7 +150,7 @@ class ConnectionLine { y -= offset; const connector = targetTopic.getShrinkConnector(); - if ($defined(connector)) { + if (connector) { if (Math.sign(targetPosition.x) > 0) { x = targetTopicSize.width; connector.setPosition(x, y); @@ -205,14 +214,6 @@ class ConnectionLine { this._line2d.moveToFront(); } - static SIMPLE = 0; - - static POLYLINE = 1; - - static CURVED = 2; - - static SIMPLE_CURVED = 3; - static getStrokeColor = () => '#495879'; } diff --git a/packages/mindplot/src/components/DesignerKeyboard.ts b/packages/mindplot/src/components/DesignerKeyboard.ts index 1f84f1e1..ec77efdb 100644 --- a/packages/mindplot/src/components/DesignerKeyboard.ts +++ b/packages/mindplot/src/components/DesignerKeyboard.ts @@ -219,7 +219,7 @@ class DesignerKeyboard extends Keyboard { }); } - private _goToBrother(designer: Designer, node: Topic, direction) { + private _goToBrother(designer: Designer, node: Topic, direction: 'UP' | 'DOWN') { const parent = node.getParent(); if (parent) { const brothers = parent.getChildren(); @@ -227,19 +227,19 @@ class DesignerKeyboard extends Keyboard { let target = node; const { y } = node.getPosition(); const { x } = node.getPosition(); - let dist = null; + let dist: number | null = null; for (let i = 0; i < brothers.length; i++) { const sameSide = x * brothers[i].getPosition().x >= 0; if (brothers[i] !== node && sameSide) { const brother = brothers[i]; const brotherY = brother.getPosition().y; if (direction === 'DOWN' && brotherY > y) { - let distancia = y - brotherY; - if (distancia < 0) { - distancia *= -1; + let distance = y - brotherY; + if (distance < 0) { + distance *= -1; } - if (dist == null || dist > distancia) { - dist = distancia; + if (dist == null || dist > distance) { + dist = distance; target = brothers[i]; } } else if (direction === 'UP' && brotherY < y) { diff --git a/packages/mindplot/src/components/DesignerModel.ts b/packages/mindplot/src/components/DesignerModel.ts index 3b1ac42e..2f0c1ef3 100644 --- a/packages/mindplot/src/components/DesignerModel.ts +++ b/packages/mindplot/src/components/DesignerModel.ts @@ -107,7 +107,7 @@ class DesignerModel extends Events { // Add node only if it's valid. if (isValid) { result.push(topic.getId()); - } else { + } else if (errorMsg) { $notify(errorMsg); } }); diff --git a/packages/mindplot/src/components/DesignerUndoManager.ts b/packages/mindplot/src/components/DesignerUndoManager.ts index f81934be..7078585c 100644 --- a/packages/mindplot/src/components/DesignerUndoManager.ts +++ b/packages/mindplot/src/components/DesignerUndoManager.ts @@ -32,7 +32,7 @@ class DesignerUndoManager { this._baseId = 0; } - enqueue(command: Command) { + enqueue(command: Command): void { $assert(command, 'Command can not be null'); const { length } = this._undoQueue; if (command.getDiscardDuplicated() && length > 0) { @@ -47,20 +47,23 @@ class DesignerUndoManager { this._redoQueue = []; } - execUndo(commandContext: CommandContext) { + execUndo(commandContext: CommandContext): void { if (this._undoQueue.length > 0) { const command = this._undoQueue.pop(); - this._redoQueue.push(command); - - command.undoExecute(commandContext); + if (command) { + this._redoQueue.push(command); + command.undoExecute(commandContext); + } } } - execRedo(commandContext) { + execRedo(commandContext: CommandContext): void { if (this._redoQueue.length > 0) { const command = this._redoQueue.pop(); - this._undoQueue.push(command); - command.execute(commandContext); + if (command) { + this._undoQueue.push(command); + command.execute(commandContext); + } } } @@ -68,7 +71,7 @@ class DesignerUndoManager { return { undoSteps: this._undoQueue.length, redoSteps: this._redoQueue.length }; } - markAsChangeBase() { + markAsChangeBase(): void { const undoLength = this._undoQueue.length; if (undoLength > 0) { const command = this._undoQueue[undoLength - 1]; @@ -78,7 +81,7 @@ class DesignerUndoManager { } } - hasBeenChanged() { + hasBeenChanged(): boolean { let result = true; const undoLength = this._undoQueue.length; if (undoLength === 0 && this._baseId === 0) { diff --git a/packages/mindplot/src/components/DragConnector.ts b/packages/mindplot/src/components/DragConnector.ts index 2690f869..62b27c6f 100644 --- a/packages/mindplot/src/components/DragConnector.ts +++ b/packages/mindplot/src/components/DragConnector.ts @@ -100,8 +100,8 @@ class DragConnector { const av = me._isVerticallyAligned(a.getSize(), aPos, sPos); const bv = me._isVerticallyAligned(b.getSize(), bPos, sPos); return ( - me._proximityWeight(av, a, sPos, currentConnection) - - me._proximityWeight(bv, b, sPos, currentConnection) + me._proximityWeight(av, a, sPos, currentConnection!) - + me._proximityWeight(bv, b, sPos, currentConnection!) ); }); return topics; diff --git a/packages/mindplot/src/components/DragPivot.ts b/packages/mindplot/src/components/DragPivot.ts index ccbfbfd0..2d751281 100644 --- a/packages/mindplot/src/components/DragPivot.ts +++ b/packages/mindplot/src/components/DragPivot.ts @@ -29,7 +29,7 @@ class DragPivot { private _isVisible: boolean; - private _targetTopic: Topic; + private _targetTopic: Topic | null; private _connectRect: Rect; @@ -57,7 +57,7 @@ class DragPivot { return this._isVisible; } - getTargetTopic(): Topic { + getTargetTopic(): Topic | null { return this._targetTopic; } @@ -91,7 +91,7 @@ class DragPivot { // Calculate pivot connection point ... const size = this._size; - const targetPosition = targetTopic.getPosition(); + const targetPosition = targetTopic!.getPosition(); const line = this._getConnectionLine(); // Update Line position. @@ -106,7 +106,7 @@ class DragPivot { // Make line visible only when the position has been already changed. // This solve several strange effects ;) - const targetPoint = targetTopic.workoutIncomingConnectionPoint(pivotPoint); + const targetPoint = targetTopic!.workoutIncomingConnectionPoint(pivotPoint); line.setTo(targetPoint.x, targetPoint.y); } diff --git a/packages/mindplot/src/components/DragTopic.ts b/packages/mindplot/src/components/DragTopic.ts index d7aee43b..3bd775f0 100644 --- a/packages/mindplot/src/components/DragTopic.ts +++ b/packages/mindplot/src/components/DragTopic.ts @@ -73,14 +73,14 @@ class DragTopic { if (this.isConnected() && !this.isFreeLayoutOn()) { const parent = this.getConnectedToTopic(); const predict = this._layoutManager.predict( - parent.getId(), + parent!.getId(), this._draggedNode.getId(), this.getPosition(), ); if (this._order !== predict.order) { const dragPivot = this._getDragPivot(); const pivotPosition = predict.position; - dragPivot.connectTo(parent, pivotPosition); + dragPivot.connectTo(parent!, pivotPosition); this.setOrder(predict.order); } } @@ -191,7 +191,7 @@ class DragTopic { } } - getConnectedToTopic(): Topic { + getConnectedToTopic(): Topic | null { const dragPivot = this._getDragPivot(); return dragPivot.getTargetTopic(); } diff --git a/packages/mindplot/src/components/EmojiCharIcon.ts b/packages/mindplot/src/components/EmojiCharIcon.ts index 990c4a16..1e3c18b6 100644 --- a/packages/mindplot/src/components/EmojiCharIcon.ts +++ b/packages/mindplot/src/components/EmojiCharIcon.ts @@ -81,7 +81,7 @@ class EmojiCharIcon implements Icon { return this.group.getPosition(); } - addEvent(type: string, fnc: any): void { + addEvent(type: string, fnc: (e: object) => void): void { this.element.addEvent(type, fnc); } diff --git a/packages/mindplot/src/components/IconGroup.ts b/packages/mindplot/src/components/IconGroup.ts index 6a2efc6d..b7e0e21d 100644 --- a/packages/mindplot/src/components/IconGroup.ts +++ b/packages/mindplot/src/components/IconGroup.ts @@ -31,7 +31,7 @@ ORDER_BY_TYPE.set('link', 2); class IconGroup { private _icons: ImageIcon[]; - private _group: any; + private _group: Group; private _removeTip: IconGroupRemoveTip; @@ -97,7 +97,7 @@ class IconGroup { icons.push(icon); this._icons = icons.sort( (a, b) => - ORDER_BY_TYPE.get(a.getModel().getType()) - ORDER_BY_TYPE.get(b.getModel().getType()), + ORDER_BY_TYPE.get(a.getModel().getType())! - ORDER_BY_TYPE.get(b.getModel().getType())!, ); // Add all the nodes back ... @@ -115,7 +115,7 @@ class IconGroup { } private _findIconFromModel(iconModel: FeatureModel) { - let result = null; + let result: ImageIcon | null = null; this._icons.forEach((icon) => { const elModel = icon.getModel(); diff --git a/packages/mindplot/src/components/IconGroupRemoveTip.js b/packages/mindplot/src/components/IconGroupRemoveTip.ts similarity index 69% rename from packages/mindplot/src/components/IconGroupRemoveTip.js rename to packages/mindplot/src/components/IconGroupRemoveTip.ts index 5b07664c..82886d54 100644 --- a/packages/mindplot/src/components/IconGroupRemoveTip.js +++ b/packages/mindplot/src/components/IconGroupRemoveTip.ts @@ -1,24 +1,22 @@ -import { $assert, $defined } from '@wisemapping/core-js'; +import { $assert } from '@wisemapping/core-js'; import { Group, Rect, Line } from '@wisemapping/web2d'; +import ImageIcon from './ImageIcon'; -export default class RemoveTip { - /** @lends IconGroup.RemoveTip */ - /** - * @classdesc inner class of IconGroup - * @constructs - * @param container - */ - constructor(container) { - $assert(container, 'group can not be null'); - this._fadeElem = container; +class IconGroupRemoveTip { + private _group: Group; + + private _activeIcon: ImageIcon | null; + + private _widget: Group; + + private _closeTimeoutId; + + constructor(group: Group) { + $assert(group, 'group can not be null'); + this._group = group; } - /** - * @param topicId - * @param icon - * @throws will throw an error if icon is null or undefined - */ - show(topicId, icon) { + show(topicId: number, icon: ImageIcon) { $assert(icon, 'icon can not be null'); // Nothing to do ... @@ -48,50 +46,44 @@ export default class RemoveTip { }); widget.setPosition(pos.x + 80, pos.y - 50); - this._fadeElem.append(widget); + this._group.append(widget); // Setup current element ... this._activeIcon = icon; this._widget = widget; - } else { + } else if (this._closeTimeoutId) { clearTimeout(this._closeTimeoutId); } } - /** */ hide() { this.close(200); } - /** - * @param delay - */ - close(delay) { - // This is not ok, trying to close the same dialog twice ? + close(delay: number) { if (this._closeTimeoutId) { clearTimeout(this._closeTimeoutId); } - const me = this; if (this._activeIcon) { const widget = this._widget; - const close = function close() { - me._activeIcon = null; - me._fadeElem.removeChild(widget); - me._widget = null; - me._closeTimeoutId = null; + + const close = () => { + this._activeIcon = null; + this._group.removeChild(widget); + this._widget = null; + this._closeTimeoutId = null; }; - if (!$defined(delay) || delay === 0) { - close(); - } else { + if (delay > 0) { this._closeTimeoutId = setTimeout(close, delay); + } else { + close(); } } } - // eslint-disable-next-line class-methods-use-this - _buildWeb2d() { + private _buildWeb2d(): Group { const result = new Group({ width: 10, height: 10, @@ -144,23 +136,19 @@ export default class RemoveTip { return result; } - /** - * @param topicId - * @param icon - */ - decorate(topicId, icon) { - const me = this; - + decorate(topicId: number, icon) { if (!icon.__remove) { icon.addEvent('mouseover', () => { - me.show(topicId, icon); + this.show(topicId, icon); }); icon.addEvent('mouseout', () => { - me.hide(); + this.hide(); }); // eslint-disable-next-line no-param-reassign icon.__remove = true; } } } + +export default IconGroupRemoveTip; diff --git a/packages/mindplot/src/components/LocalStorageManager.ts b/packages/mindplot/src/components/LocalStorageManager.ts index b62d3091..de336137 100644 --- a/packages/mindplot/src/components/LocalStorageManager.ts +++ b/packages/mindplot/src/components/LocalStorageManager.ts @@ -46,22 +46,31 @@ class LocalStorageManager extends PersistenceManager { } } + private buildHeader() { + const csrfToken = this.getCSRFToken(); + const result = { + 'Content-Type': 'text/plain', + Accept: 'application/xml', + }; + if (csrfToken) { + result['X-CSRF-Token'] = csrfToken; + } + return result; + } + loadMapDom(mapId: string): Promise { let result: Promise; - let localStorate; + let localStorate: string | null = null; if (!this.readOnly) { localStorate = localStorage.getItem(`${mapId}-xml`); } if (localStorate == null || this.forceLoad) { const url = this.documentUrl.replace('{id}', mapId); + result = fetch(url, { method: 'get', - headers: { - 'Content-Type': 'text/plain', - Accept: 'application/xml', - 'X-CSRF-Token': this.getCSRFToken(), - }, + headers: this.buildHeader(), }) .then((response: Response) => { if (!response.ok) { diff --git a/packages/mindplot/src/components/MindplotWebComponent.ts b/packages/mindplot/src/components/MindplotWebComponent.ts index 969c8a71..22dbd926 100644 --- a/packages/mindplot/src/components/MindplotWebComponent.ts +++ b/packages/mindplot/src/components/MindplotWebComponent.ts @@ -1,3 +1,21 @@ +/* + * Copyright [2021] [wisemapping] + * + * Licensed under WiseMapping Public License, Version 1.0 (the "License"). + * It is basically the Apache License, Version 2.0 (the "License") plus the + * "powered by wisemapping" text requirement on every single page; + * you may not use this file except in compliance with the License. + * You may obtain a copy of the license at + * + * http://www.wisemapping.org/license + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { $assert } from '@wisemapping/core-js'; import Designer from './Designer'; import buildDesigner from './DesignerBuilder'; import DesignerOptionsBuilder from './DesignerOptionsBuilder'; @@ -15,6 +33,7 @@ export type MindplotWebComponentInterface = { mode: string; ref: object; locale?: string; + zoom?: number; }; /** * WebComponent implementation for minplot designer. @@ -60,16 +79,21 @@ class MindplotWebComponent extends HTMLElement { buildDesigner(persistence?: PersistenceManager, widgetManager?: WidgetManager) { const editorRenderMode = this.getAttribute('mode') as EditorRenderMode; const locale = this.getAttribute('locale'); + const zoom = this.getAttribute('zoom'); const persistenceManager = persistence || new LocalStorageManager('map.xml', false, false); const mode = editorRenderMode || 'viewonly'; + + const mindplodElem = this._shadowRoot.getElementById('mindplot'); + $assert(mindplodElem, 'Root mindplot element could not be loaded'); + const options = DesignerOptionsBuilder.buildOptions({ persistenceManager, mode, widgetManager, - divContainer: this._shadowRoot.getElementById('mindplot'), + divContainer: mindplodElem!, container: 'mindplot', - zoom: 1, + zoom: zoom ? Number.parseFloat(zoom) : 1, locale: locale || 'en', }); this._designer = buildDesigner(options); diff --git a/packages/mindplot/src/components/Options.js b/packages/mindplot/src/components/Options.js deleted file mode 100644 index 9b5b8ba7..00000000 --- a/packages/mindplot/src/components/Options.js +++ /dev/null @@ -1,22 +0,0 @@ -import merge from 'lodash/merge'; - -class Options { - setOptions(...args) { - const options = merge({}, this.options, ...args); - this.options = options; - - if (this.addEvent) { - const optionsKeys = Object.keys(options); - for (let index = 0; index < optionsKeys.length; index++) { - const option = optionsKeys[index]; - if (typeof options[option] === 'function' && /^on[A-Z]/.test(option)) { - this.addEvent(option, options[option]); - delete options[option]; - } - } - } - return this; - } -} - -export default Options; diff --git a/packages/mindplot/src/components/Relationship.ts b/packages/mindplot/src/components/Relationship.ts index d5960f52..adc3a2dd 100644 --- a/packages/mindplot/src/components/Relationship.ts +++ b/packages/mindplot/src/components/Relationship.ts @@ -17,7 +17,7 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import { Arrow, Point, CurvedLine } from '@wisemapping/web2d'; -import ConnectionLine from './ConnectionLine'; +import ConnectionLine, { LineType } from './ConnectionLine'; import RelationshipControlPoints from './RelationshipControlPoints'; import RelationshipModel from './model/RelationshipModel'; import PositionType from './PositionType'; @@ -48,7 +48,7 @@ class Relationship extends ConnectionLine { $assert(sourceNode, 'sourceNode can not be null'); $assert(targetNode, 'targetNode can not be null'); - super(sourceNode, targetNode, model.getLineType()); + super(sourceNode, targetNode); this.setModel(model); const strokeColor = Relationship.getStrokeColor(); @@ -62,7 +62,7 @@ class Relationship extends ConnectionLine { this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`); // Build focus shape ... - this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED); + this._focusShape = this._createLine(LineType.SIMPLE_CURVED); this._focusShape.setStroke(8, 'solid', '#3f96ff'); this._focusShape.setIsSrcControlPointCustom(false); this._focusShape.setIsDestControlPointCustom(false); diff --git a/packages/mindplot/src/components/RelationshipControlPoints.ts b/packages/mindplot/src/components/RelationshipControlPoints.ts index 0174ba7d..6e72e0d9 100644 --- a/packages/mindplot/src/components/RelationshipControlPoints.ts +++ b/packages/mindplot/src/components/RelationshipControlPoints.ts @@ -72,6 +72,11 @@ class ControlPivotLine { visibility: false, }); this._dot.setCursor('pointer'); + this._dot.setTestId( + `relctl:${pivotType}:${relationship.getSourceTopic()?.getId()}-${relationship + .getTargetTopic() + ?.getId()}`, + ); // Build line ... this._line = new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }); diff --git a/packages/mindplot/src/components/RelationshipPivot.ts b/packages/mindplot/src/components/RelationshipPivot.ts index fc42bca6..24fad98a 100644 --- a/packages/mindplot/src/components/RelationshipPivot.ts +++ b/packages/mindplot/src/components/RelationshipPivot.ts @@ -34,7 +34,7 @@ class RelationshipPivot { private _onTopicClick: (event: MouseEvent) => void; - private _sourceTopic: Topic; + private _sourceTopic: Topic | null; private _pivot: CurvedLine; @@ -46,8 +46,8 @@ class RelationshipPivot { this._workspace = workspace; this._designer = designer; - this._mouseMoveEvent = this._mouseMove.bind(this); - this._onClickEvent = this._cleanOnMouseClick.bind(this); + this._mouseMoveEvent = this.mouseMoveHandler.bind(this); + this._onClickEvent = this.cleanOnMouseClick.bind(this); this._onTopicClick = this._connectOnFocus.bind(this); } @@ -57,40 +57,38 @@ class RelationshipPivot { this.dispose(); this._sourceTopic = sourceTopic; - if (sourceTopic != null) { - this._workspace.enableWorkspaceEvents(false); + this._workspace.enableWorkspaceEvents(false); - const sourcePos = sourceTopic.getPosition(); - const strokeColor = Relationship.getStrokeColor(); + const sourcePos = sourceTopic.getPosition(); + const strokeColor = Relationship.getStrokeColor(); - this._pivot = new CurvedLine(); - this._pivot.setStyle(CurvedLine.SIMPLE_LINE); + this._pivot = new CurvedLine(); + this._pivot.setStyle(CurvedLine.SIMPLE_LINE); - const fromPos = this._calculateFromPosition(sourcePos); - this._pivot.setFrom(fromPos.x, fromPos.y); + const fromPos = this._calculateFromPosition(sourcePos); + this._pivot.setFrom(fromPos.x, fromPos.y); - this._pivot.setTo(targetPos.x, targetPos.y); - this._pivot.setStroke(2, 'solid', strokeColor); - this._pivot.setDashed(4, 2); + this._pivot.setTo(targetPos.x, targetPos.y); + this._pivot.setStroke(2, 'solid', strokeColor); + this._pivot.setDashed(4, 2); - this._startArrow = new Arrow(); - this._startArrow.setStrokeColor(strokeColor); - this._startArrow.setStrokeWidth(2); - this._startArrow.setFrom(sourcePos.x, sourcePos.y); + this._startArrow = new Arrow(); + this._startArrow.setStrokeColor(strokeColor); + this._startArrow.setStrokeWidth(2); + this._startArrow.setFrom(sourcePos.x, sourcePos.y); - this._workspace.append(this._pivot); - this._workspace.append(this._startArrow); + this._workspace.append(this._pivot); + this._workspace.append(this._startArrow); - this._workspace.addEvent('mousemove', this._mouseMoveEvent); - this._workspace.addEvent('click', this._onClickEvent); + this._workspace.addEvent('mousemove', this._mouseMoveEvent); + this._workspace.addEvent('click', this._onClickEvent); - // Register focus events on all topics ... - const model = this._designer.getModel(); - const topics = model.getTopics(); - topics.forEach((topic) => { - topic.addEvent('ontfocus', this._onTopicClick); - }); - } + // Register focus events on all topics ... + const model = this._designer.getModel(); + const topics = model.getTopics(); + topics.forEach((topic) => { + topic.addEvent('ontfocus', this._onTopicClick); + }); } dispose(): void { @@ -117,12 +115,12 @@ class RelationshipPivot { } } - _mouseMove(event: MouseEvent): boolean { + private mouseMoveHandler(event: MouseEvent): boolean { const screen = this._workspace.getScreenManager(); const pos = screen.getWorkspaceMousePosition(event); // Leave the arrow a couple of pixels away from the cursor. - const sourcePosition = this._sourceTopic.getPosition(); + const sourcePosition = this._sourceTopic!.getPosition(); const gapDistance = Math.sign(pos.x - sourcePosition.x) * 5; const sPos = this._calculateFromPosition(pos); @@ -139,7 +137,7 @@ class RelationshipPivot { return false; } - _cleanOnMouseClick(event: MouseEvent): void { + private cleanOnMouseClick(event: MouseEvent): void { // The user clicks on a desktop on in other element that is not a node. this.dispose(); event.stopPropagation(); @@ -147,16 +145,17 @@ class RelationshipPivot { private _calculateFromPosition(toPosition: Point): Point { // Calculate origin position ... - let sourcePosition = this._sourceTopic.getPosition(); - if (this._sourceTopic.getType() === 'CentralTopic') { - sourcePosition = Shape.workoutIncomingConnectionPoint(this._sourceTopic, toPosition); + const sourceTopic = this._sourceTopic!; + let sourcePosition = this._sourceTopic!.getPosition(); + if (sourceTopic!.getType() === 'CentralTopic') { + sourcePosition = Shape.workoutIncomingConnectionPoint(sourceTopic, toPosition); } const controlPoint = Shape.calculateDefaultControlPoints(sourcePosition, toPosition); - const point = new Point( - parseInt(controlPoint[0].x, 10) + sourcePosition.x, - parseInt(controlPoint[0].y, 10) + sourcePosition.y, - ); - return Shape.calculateRelationShipPointCoordinates(this._sourceTopic, point); + const point = { + x: controlPoint[0].x + sourcePosition.x, + y: controlPoint[0].y + sourcePosition.y, + }; + return Shape.calculateRelationShipPointCoordinates(sourceTopic, point); } private _connectOnFocus(event: string, targetTopic: Topic): void { @@ -164,8 +163,8 @@ class RelationshipPivot { const mindmap = this._designer.getMindmap(); // Avoid circular connections ... - if (targetTopic.getId() !== sourceTopic.getId()) { - const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId()); + if (targetTopic.getId() !== sourceTopic!.getId()) { + const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic!.getId()); this._designer.getActionDispatcher().addRelationship(relModel); } this.dispose(); diff --git a/packages/mindplot/src/components/RestPersistenceManager.ts b/packages/mindplot/src/components/RestPersistenceManager.ts index 91dce1cf..53cd9325 100644 --- a/packages/mindplot/src/components/RestPersistenceManager.ts +++ b/packages/mindplot/src/components/RestPersistenceManager.ts @@ -59,22 +59,28 @@ class RESTPersistenceManager extends PersistenceManager { }, 10000); const persistence = this; + + const crfs = this.getCSRFToken(); + const headers = { + 'Content-Type': 'application/json; charset=utf-8', + Accept: 'application/json', + }; + if (crfs) { + headers['X-CSRF-Token'] = crfs; + } + fetch(`${this.documentUrl.replace('{id}', mapId)}?${query}`, { method: 'PUT', // Blob helps to resuce the memory on large payload. body: new Blob([JSON.stringify(data)], { type: 'text/plain' }), - headers: { - 'Content-Type': 'application/json; charset=utf-8', - Accept: 'application/json', - 'X-CSRF-Token': this.getCSRFToken(), - }, + headers, }) .then(async (response: Response) => { if (response.ok) { events.onSuccess(); } else { console.log(`Saving error: ${response.status}`); - let userMsg; + let userMsg: PersistenceError | null = null; if (response.status === 405) { userMsg = { severity: 'SEVERE', @@ -85,18 +91,20 @@ class RESTPersistenceManager extends PersistenceManager { const responseText = await response.text(); const contentType = response.headers['Content-Type']; if (contentType != null && contentType.indexOf('application/json') !== -1) { - let serverMsg = null; + let serverMsg: null | { globalSeverity: string } = null; try { serverMsg = JSON.parse(responseText); - serverMsg = serverMsg.globalSeverity ? serverMsg : null; + serverMsg = serverMsg && serverMsg.globalSeverity ? serverMsg : null; } catch (e) { // Message could not be decoded ... } userMsg = persistence._buildError(serverMsg); } } - this.triggerError(userMsg); - events.onError(userMsg); + if (userMsg) { + this.triggerError(userMsg); + events.onError(userMsg); + } } // Clear event timeout ... @@ -123,21 +131,34 @@ class RESTPersistenceManager extends PersistenceManager { } } - discardChanges(mapId: string) { + discardChanges(mapId: string): void { + const crfs = this.getCSRFToken(); + const headers = { + 'Content-Type': 'application/json; charset=utf-8', + Accept: 'application/json', + }; + if (crfs) { + headers['X-CSRF-Token'] = crfs; + } + fetch(this.revertUrl.replace('{id}', mapId), { method: 'POST', - headers: { - 'Content-Type': 'application/json; charset=utf-8', - Accept: 'application/json', - 'X-CSRF-Token': this.getCSRFToken(), - }, + headers, }); } unlockMap(mapId: string): void { + const crfs = this.getCSRFToken(); + const headers = { + 'Content-Type': 'text/plain; charset=utf-8', + }; + if (crfs) { + headers['X-CSRF-Token'] = crfs; + } + fetch(this.lockUrl.replace('{id}', mapId), { method: 'PUT', - headers: { 'Content-Type': 'text/plain', 'X-CSRF-Token': this.getCSRFToken() }, + headers, body: 'false', }); } @@ -158,13 +179,18 @@ class RESTPersistenceManager extends PersistenceManager { loadMapDom(mapId: string): Promise { const url = `${this.documentUrl.replace('{id}', mapId)}/xml`; + const crfs = this.getCSRFToken(); + const headers = { + 'Content-Type': 'text/plain; charset=utf-8', + Accept: 'application/xml', + }; + if (crfs) { + headers['X-CSRF-Token'] = crfs; + } + return fetch(url, { method: 'get', - headers: { - 'Content-Type': 'text/plain', - Accept: 'application/xml', - 'X-CSRF-Token': this.getCSRFToken(), - }, + headers, }) .then((response: Response) => { if (!response.ok) { diff --git a/packages/mindplot/src/components/ScreenManager.ts b/packages/mindplot/src/components/ScreenManager.ts index 390de950..1ed35f81 100644 --- a/packages/mindplot/src/components/ScreenManager.ts +++ b/packages/mindplot/src/components/ScreenManager.ts @@ -16,7 +16,7 @@ * limitations under the License. */ import $ from 'jquery'; -import { $assert, $defined } from '@wisemapping/core-js'; +import { $assert } from '@wisemapping/core-js'; import { Point } from '@wisemapping/web2d'; // https://stackoverflow.com/questions/60357083/does-not-use-passive-listeners-to-improve-scrolling-performance-lighthouse-repo // https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=lr diff --git a/packages/mindplot/src/components/Topic.ts b/packages/mindplot/src/components/Topic.ts index ed1e6e0f..13d25de6 100644 --- a/packages/mindplot/src/components/Topic.ts +++ b/packages/mindplot/src/components/Topic.ts @@ -629,7 +629,7 @@ abstract class Topic extends NodeGraph { group.setTestId(model.getId()); } - _registerDefaultListenersToElement(elem: ElementClass, topic: Topic) { + private _registerDefaultListenersToElement(elem: ElementClass, topic: Topic) { const mouseOver = function mouseOver() { if (topic.isMouseEventsEnabled()) { topic.handleMouseOver(); diff --git a/packages/mindplot/src/components/TopicStyle.js b/packages/mindplot/src/components/TopicStyle.ts similarity index 76% rename from packages/mindplot/src/components/TopicStyle.js rename to packages/mindplot/src/components/TopicStyle.ts index 37cb4beb..5f4e07bd 100644 --- a/packages/mindplot/src/components/TopicStyle.js +++ b/packages/mindplot/src/components/TopicStyle.ts @@ -15,59 +15,26 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert, $defined } from '@wisemapping/core-js'; +import { $assert } from '@wisemapping/core-js'; import { $msg } from './Messages'; import { TopicShape } from './model/INodeModel'; +import Topic from './Topic'; -class TopicStyle { - static _getStyles(topic) { - $assert(topic, 'topic can not be null'); +type TopicStyleType = { + borderColor: string; + backgroundColor: string; + fontStyle: { + font: string; + size: number; + style: string; + weight: string; + color: string; + }; + msgKey: string; + shapeType: string; +}; - let result; - if (topic.isCentralTopic()) { - result = TopicStyle.STYLES.CENTRAL_TOPIC; - } else { - const targetTopic = topic.getOutgoingConnectedTopic(); - if ($defined(targetTopic)) { - if (targetTopic.isCentralTopic()) { - result = TopicStyle.STYLES.MAIN_TOPIC; - } else { - result = TopicStyle.STYLES.SUB_TOPIC; - } - } else { - result = TopicStyle.STYLES.ISOLATED_TOPIC; - } - } - return result; - } - - static defaultText(topic) { - const { msgKey } = this._getStyles(topic); - return $msg(msgKey); - } - - static defaultFontStyle(topic) { - return this._getStyles(topic).fontStyle; - } - - static defaultBackgroundColor(topic) { - return this._getStyles(topic).backgroundColor; - } - - static defaultBorderColor(topic) { - return this._getStyles(topic).borderColor; - } - - static getInnerPadding(topic) { - return Math.round(topic.getTextShape().getFontHeight() * 0.5); - } - - static defaultShapeType(topic) { - return this._getStyles(topic).shapeType; - } -} - -TopicStyle.STYLES = { +const TopicDefaultStyles = { CENTRAL_TOPIC: { borderColor: 'rgb(57,113,177)', backgroundColor: 'rgb(80,157,192)', @@ -81,7 +48,6 @@ TopicStyle.STYLES = { msgKey: 'CENTRAL_TOPIC', shapeType: TopicShape.ROUNDED_RECT, }, - MAIN_TOPIC: { borderColor: 'rgb(2,59,185)', backgroundColor: 'rgb(224,229,239)', @@ -95,7 +61,6 @@ TopicStyle.STYLES = { msgKey: 'MAIN_TOPIC', shapeType: TopicShape.LINE, }, - SUB_TOPIC: { borderColor: 'rgb(2,59,185)', backgroundColor: 'rgb(224,229,239)', @@ -125,4 +90,52 @@ TopicStyle.STYLES = { }, }; +class TopicStyle { + static _getStyles(topic: Topic): TopicStyleType { + $assert(topic, 'topic can not be null'); + + let result: TopicStyleType; + if (topic.isCentralTopic()) { + result = TopicDefaultStyles.CENTRAL_TOPIC; + } else { + const targetTopic = topic.getOutgoingConnectedTopic(); + if (targetTopic) { + if (targetTopic.isCentralTopic()) { + result = TopicDefaultStyles.MAIN_TOPIC; + } else { + result = TopicDefaultStyles.SUB_TOPIC; + } + } else { + result = TopicDefaultStyles.ISOLATED_TOPIC; + } + } + return result; + } + + static defaultText(topic: Topic) { + const { msgKey } = this._getStyles(topic); + return $msg(msgKey); + } + + static defaultFontStyle(topic: Topic) { + return this._getStyles(topic).fontStyle; + } + + static defaultBackgroundColor(topic: Topic) { + return this._getStyles(topic).backgroundColor; + } + + static defaultBorderColor(topic: Topic) { + return this._getStyles(topic).borderColor; + } + + static getInnerPadding(topic: Topic) { + return Math.round(topic.getTextShape().getFontHeight() * 0.5); + } + + static defaultShapeType(topic) { + return this._getStyles(topic).shapeType; + } +} + export default TopicStyle; diff --git a/packages/mindplot/src/components/WidgetManager.ts b/packages/mindplot/src/components/WidgetManager.ts index 821b9382..7dd4aa6d 100644 --- a/packages/mindplot/src/components/WidgetManager.ts +++ b/packages/mindplot/src/components/WidgetManager.ts @@ -24,9 +24,11 @@ abstract class WidgetManager { linkModel?: LinkModel, noteModel?: NoteModel, ) { - const webcomponentShadowRoot = $($('#mindmap-comp')[0].shadowRoot); + const { shadowRoot } = $('#mindmap-comp')[0]; + const webcomponentShadowRoot = $(shadowRoot!); + let tooltip = webcomponentShadowRoot.find('#mindplot-svg-tooltip'); - if (!tooltip.length) { + if (!tooltip.length || !tooltip) { webcomponentShadowRoot.append( '
' + '
' + @@ -48,7 +50,7 @@ abstract class WidgetManager { }); } - mindmapElement.addEvent('mouseenter', (evt) => { + mindmapElement.addEvent('mouseenter', (evt: MouseEvent) => { webcomponentShadowRoot.find('#mindplot-svg-tooltip-title').html(title); if (linkModel) { webcomponentShadowRoot @@ -63,8 +65,9 @@ abstract class WidgetManager { webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-note').css({ display: 'block' }); webcomponentShadowRoot.find('#mindplot-svg-tooltip-content-link').css({ display: 'none' }); } - const targetRect = evt.target.getBoundingClientRect(); - const newX = Math.max(0, targetRect.left + targetRect.width / 2 - tooltip.width() / 2); + const targetRect = (evt.target as Element).getBoundingClientRect(); + const width = tooltip.width() || 0; + const newX = Math.max(0, targetRect.left + targetRect.width / 2 - width / 2); const newY = Math.max(0, targetRect.bottom); tooltip.css({ top: newY, left: newX, position: 'absolute' }); tooltip.css({ display: 'block' }); @@ -77,11 +80,11 @@ abstract class WidgetManager { }); } - createTooltipForLink(topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { + createTooltipForLink(_topic: Topic, linkModel: LinkModel, linkIcon: LinkIcon) { this.createTooltip(linkIcon.getElement().peer, $msg('LINK'), linkModel, undefined); } - createTooltipForNote(topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon): void { + createTooltipForNote(_topic: Topic, noteModel: NoteModel, noteIcon: NoteIcon): void { this.createTooltip(noteIcon.getElement().peer, $msg('NOTE'), undefined, noteModel); } diff --git a/packages/mindplot/src/components/commands/AddTopicCommand.ts b/packages/mindplot/src/components/commands/AddTopicCommand.ts index e94386cf..8b5f6a3b 100644 --- a/packages/mindplot/src/components/commands/AddTopicCommand.ts +++ b/packages/mindplot/src/components/commands/AddTopicCommand.ts @@ -23,7 +23,7 @@ import NodeModel from '../model/NodeModel'; class AddTopicCommand extends Command { private _models: NodeModel[]; - private _parentsIds: number[]; + private _parentsIds: number[] | null; /** * @classdesc This command class handles do/undo of adding one or multiple topics to @@ -42,14 +42,13 @@ class AddTopicCommand extends Command { } execute(commandContext: CommandContext) { - const me = this; this._models.forEach((model, index) => { // Add a new topic ... const topic = commandContext.createTopic(model); // Connect to topic ... if (this._parentsIds) { - const parentId = me._parentsIds[index]; + const parentId = this._parentsIds[index]; if ($defined(parentId)) { const parentTopic = commandContext.findTopics([parentId])[0]; commandContext.connect(topic, parentTopic); diff --git a/packages/mindplot/src/components/commands/DragTopicCommand.ts b/packages/mindplot/src/components/commands/DragTopicCommand.ts index 8c97c250..7737291d 100644 --- a/packages/mindplot/src/components/commands/DragTopicCommand.ts +++ b/packages/mindplot/src/components/commands/DragTopicCommand.ts @@ -24,7 +24,7 @@ import Topic from '../Topic'; class DragTopicCommand extends Command { private _topicsId: number; - private _parentId: number; + private _parentId: number | null; private _position: Point; @@ -73,14 +73,14 @@ class DragTopicCommand extends Command { } // Finally, connect topic ... - if ($defined(this._parentId)) { + if (this._parentId != null) { const parentTopic = commandContext.findTopics([this._parentId])[0]; commandContext.connect(topic, parentTopic); } // Backup old parent id ... this._parentId = null; - if ($defined(origParentTopic)) { + if (origParentTopic != null) { this._parentId = origParentTopic.getId(); } topic.setVisibility(true); diff --git a/packages/mindplot/src/components/commands/MoveControlPointCommand.ts b/packages/mindplot/src/components/commands/MoveControlPointCommand.ts index ac9ec39f..ba0ab312 100644 --- a/packages/mindplot/src/components/commands/MoveControlPointCommand.ts +++ b/packages/mindplot/src/components/commands/MoveControlPointCommand.ts @@ -24,7 +24,7 @@ import CommandContext from '../CommandContext'; class MoveControlPointCommand extends Command { private _ctrIndex: PivotType; - private _controlPoint: PositionType; + private _controlPoint: PositionType | null; private _modelId: number; @@ -61,7 +61,7 @@ class MoveControlPointCommand extends Command { default: throw new Error('Illegal state exception'); } - this._controlPoint = { ...oldCtlPoint }; + this._controlPoint = oldCtlPoint ? { ...oldCtlPoint } : null; relationship.redraw(); relationship.setOnFocus(true); diff --git a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.ts b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.ts index 234c24b9..5ea780a2 100644 --- a/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.ts +++ b/packages/mindplot/src/components/commands/RemoveFeatureFromTopicCommand.ts @@ -38,7 +38,6 @@ class RemoveFeatureFromTopicCommand extends Command { super(); this._topicId = topicId; this._featureId = featureId; - this._oldFeature = null; } /** @@ -47,8 +46,8 @@ class RemoveFeatureFromTopicCommand extends Command { execute(commandContext: CommandContext): void { const topic = commandContext.findTopics([this._topicId])[0]; const feature = topic.findFeatureById(this._featureId); - topic.removeFeature(feature); this._oldFeature = feature; + topic.removeFeature(feature); } /** @@ -58,7 +57,6 @@ class RemoveFeatureFromTopicCommand extends Command { undoExecute(commandContext: CommandContext) { const topic = commandContext.findTopics([this._topicId])[0]; topic.addFeature(this._oldFeature); - this._oldFeature = null; } } diff --git a/packages/mindplot/src/components/export/BinaryImageExporter.ts b/packages/mindplot/src/components/export/BinaryImageExporter.ts index b573a40b..ba98b8e2 100644 --- a/packages/mindplot/src/components/export/BinaryImageExporter.ts +++ b/packages/mindplot/src/components/export/BinaryImageExporter.ts @@ -77,7 +77,7 @@ class BinaryImageExporter extends Exporter { const img = new Image(); const result = new Promise((resolve) => { img.onload = () => { - const ctx = canvas.getContext('2d'); + const ctx = canvas.getContext('2d')!; // Scale for retina ... ctx.scale(dpr, dpr); ctx.drawImage(img, 0, 0); diff --git a/packages/mindplot/src/components/export/FreemindExporter.ts b/packages/mindplot/src/components/export/FreemindExporter.ts index c9f669aa..e7a31b5d 100644 --- a/packages/mindplot/src/components/export/FreemindExporter.ts +++ b/packages/mindplot/src/components/export/FreemindExporter.ts @@ -22,7 +22,7 @@ import Font from './freemind/Font'; class FreemindExporter extends Exporter { private mindmap: Mindmap; - private nodeMap: Map = null; + private nodeMap: Map; private version: VersionNumber = FreemindConstant.SUPPORTED_FREEMIND_VERSION; @@ -87,13 +87,16 @@ class FreemindExporter extends Exporter { const relationships: Array = this.mindmap.getRelationships(); relationships.forEach((relationship: RelationshipModel) => { - const srcNode: FreeminNode = this.nodeMap.get(relationship.getFromNode()); - const destNode: FreeminNode = this.nodeMap.get(relationship.getToNode()); + const srcNode: FreeminNode | undefined = this.nodeMap.get(relationship.getFromNode()); + const destNode: FreeminNode | undefined = this.nodeMap.get(relationship.getToNode()); if (srcNode && destNode) { const arrowlink: Arrowlink = this.objectFactory.crateArrowlink(); - arrowlink.setDestination(destNode.getId()); + const idRel = destNode.getId(); + if (idRel) { + arrowlink.setDestination(idRel); + } if (relationship.getEndArrow() && relationship.getEndArrow()) { arrowlink.setEndarrow('Default'); @@ -287,7 +290,10 @@ class FreemindExporter extends Exporter { if (fontNodeNeeded) { if (!font.getSize()) { - font.setSize(FreemindExporter.wisweToFreeFontSize.get(8).toString()); + const size = FreemindExporter.wisweToFreeFontSize.get(8); + if (size) { + font.setSize(size.toString()); + } } freemindNode.setArrowlinkOrCloudOrEdge(font); } diff --git a/packages/mindplot/src/components/import/FreemindIconConverter.ts b/packages/mindplot/src/components/import/FreemindIconConverter.ts index e8761395..974035f7 100644 --- a/packages/mindplot/src/components/import/FreemindIconConverter.ts +++ b/packages/mindplot/src/components/import/FreemindIconConverter.ts @@ -4,7 +4,7 @@ export default class FreemindIconConverter { private static freeIdToIcon: Map = new Map(); public static toWiseId(iconId: string): number | null { - const result: SvgIconModel = this.freeIdToIcon.get(iconId); + const result: SvgIconModel = this.freeIdToIcon.get(iconId)!; return result ? result.getId() : null; } } diff --git a/packages/mindplot/src/components/import/FreemindImporter.ts b/packages/mindplot/src/components/import/FreemindImporter.ts index 50aa621a..cecd74d3 100644 --- a/packages/mindplot/src/components/import/FreemindImporter.ts +++ b/packages/mindplot/src/components/import/FreemindImporter.ts @@ -70,7 +70,7 @@ export default class FreemindImporter extends Importer { this.convertNodeProperties(freeNode, wiseTopic, true); - this.nodesmap.set(freeNode.getId(), wiseTopic); + this.nodesmap.set(freeNode.getId()!, wiseTopic); this.convertChildNodes(freeNode, wiseTopic, this.mindmap, 1); this.addRelationship(this.mindmap); @@ -98,50 +98,57 @@ export default class FreemindImporter extends Importer { // Fix dest ID const destId: string = relationship.getDestCtrlPoint(); - const destTopic: NodeModel = this.nodesmap.get(destId); - relationship.setDestCtrlPoint(destTopic.getId()); + const destTopic: NodeModel | undefined = this.nodesmap.get(destId); + if (destTopic) { + relationship.setDestCtrlPoint(destTopic.getId()); + } // Fix src ID const srcId: string = relationship.getSrcCtrlPoint(); - const srcTopic: NodeModel = this.nodesmap.get(srcId); - relationship.setSrcCtrlPoint(srcTopic.getId()); + const srcTopic: NodeModel | undefined = this.nodesmap.get(srcId); + if (srcTopic) { + relationship.setSrcCtrlPoint(srcTopic.getId()); + } mapRelaitonship.push(relationship); }); } private fixRelationshipControlPoints(relationship: RelationshipModel): void { - const srcTopic: NodeModel = this.nodesmap.get(relationship.getToNode().toString()); - const destNode: NodeModel = this.nodesmap.get(relationship.getFromNode().toString()); + const srcTopic: NodeModel | undefined = this.nodesmap.get(relationship.getToNode().toString()); + const destNode: NodeModel | undefined = this.nodesmap.get( + relationship.getFromNode().toString(), + ); + if (srcTopic && destNode) { + // Fix x coord + const srcCtrlPoint: string = relationship.getSrcCtrlPoint(); + if (srcCtrlPoint) { + const coords = srcTopic.getPosition(); + if (coords.x < 0) { + const x = coords.x * -1; + relationship.setSrcCtrlPoint(`${x},${coords.y}`); - // Fix x coord - const srcCtrlPoint: string = relationship.getSrcCtrlPoint(); - if (srcCtrlPoint) { - const coords = srcTopic.getPosition(); - if (coords.x < 0) { - const x = coords.x * -1; - relationship.setSrcCtrlPoint(`${x},${coords.y}`); - - // Fix coord - if (srcTopic.getOrder() && srcTopic.getOrder() % 2 !== 0) { - const y = coords.y * -1; - relationship.setSrcCtrlPoint(`${coords.x},${y}`); + // Fix coord + if (srcTopic.getOrder() && srcTopic.getOrder() % 2 !== 0) { + const y = coords.y * -1; + relationship.setSrcCtrlPoint(`${coords.x},${y}`); + } } } - } - const destCtrlPoint: string = relationship.getDestCtrlPoint(); - if (destCtrlPoint) { - const coords = destNode.getPosition(); + const destCtrlPoint: string = relationship.getDestCtrlPoint(); + if (destCtrlPoint) { + const coords = destNode.getPosition(); - if (coords.x < 0) { - const x = coords.x * -1; - relationship.setDestCtrlPoint(`${x},${coords.y}`); - } + if (coords.x < 0) { + const x = coords.x * -1; + relationship.setDestCtrlPoint(`${x},${coords.y}`); + } - if (destNode.getOrder() && destNode.getOrder() % 2 !== 0) { - const y = coords.y * -1; - relationship.setDestCtrlPoint(`${coords.x},${y}`); + if (destNode.getOrder() && destNode.getOrder() % 2 !== 0) { + const y = coords.y * -1; + relationship.setDestCtrlPoint(`${coords.x},${y}`); + } } } } @@ -169,7 +176,7 @@ export default class FreemindImporter extends Importer { } // Check for style... - const fontStyle = this.generateFontStyle(freeNode, null); + const fontStyle = this.generateFontStyle(freeNode, undefined); if (fontStyle && fontStyle !== ';;;;') wiseTopic.setFontStyle(fontStyle); // Is there any link... @@ -200,7 +207,10 @@ export default class FreemindImporter extends Importer { const wiseId = this.getIdNode(child); const wiseChild = mindmap.createNode('MainTopic', wiseId); - this.nodesmap.set(child.getId(), wiseChild); + const id = child.getId(); + if (id !== null) { + this.nodesmap.set(id, wiseChild); + } let norder: number; if (depth !== 1) { @@ -347,7 +357,7 @@ export default class FreemindImporter extends Importer { this.idDefault++; idFreeToIdWise = this.idDefault; } else { - idFreeToIdWise = parseInt(id.split('_').pop(), 10); + idFreeToIdWise = parseInt(id.split('_').pop()!, 10); } } else { this.idDefault++; @@ -398,7 +408,10 @@ export default class FreemindImporter extends Importer { // Font family if (font) { - fontStyle.push(font.getName()); + const name = font.getName(); + if (name) { + fontStyle.push(name); + } } fontStyle.push(';'); @@ -485,6 +498,6 @@ export default class FreemindImporter extends Importer { private html2Text(content: string): string { const temporalDivElement = document.createElement('div'); temporalDivElement.innerHTML = content; - return temporalDivElement.textContent.trim() || temporalDivElement.innerText.trim() || ''; + return temporalDivElement.textContent?.trim() || temporalDivElement.innerText.trim() || ''; } } diff --git a/packages/mindplot/src/components/layout/BalancedSorter.ts b/packages/mindplot/src/components/layout/BalancedSorter.ts index a3af023d..f2ec375d 100644 --- a/packages/mindplot/src/components/layout/BalancedSorter.ts +++ b/packages/mindplot/src/components/layout/BalancedSorter.ts @@ -135,15 +135,17 @@ class BalancedSorter extends AbstractBasicSorter { detach(treeSet: RootedTreeSet, node: Node): void { const parent = treeSet.getParent(node); - // Filter nodes on one side.. - const children = this._getChildrenForOrder(parent, treeSet, node.getOrder()); + if (parent) { + // Filter nodes on one side.. + const children = this._getChildrenForOrder(parent, treeSet, node.getOrder()); - children.forEach((child) => { - if (child.getOrder() > node.getOrder()) { - child.setOrder(child.getOrder() - 2); - } - }); - node.setOrder(node.getOrder() % 2 === 0 ? 0 : 1); + children.forEach((child) => { + if (child.getOrder() > node.getOrder()) { + child.setOrder(child.getOrder() - 2); + } + }); + node.setOrder(node.getOrder() % 2 === 0 ? 0 : 1); + } } computeOffsets(treeSet: RootedTreeSet, node: Node) { diff --git a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts index e07fd91c..6b958fea 100644 --- a/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts +++ b/packages/mindplot/src/components/layout/ChildrenSorterStrategy.ts @@ -20,17 +20,22 @@ import Node from './Node'; import PositionType from '../PositionType'; abstract class ChildrenSorterStrategy { - abstract computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node); + abstract computeChildrenIdByHeights(treeSet: RootedTreeSet, node: Node): void; - abstract computeOffsets(treeSet: RootedTreeSet, node: Node); + abstract computeOffsets(treeSet: RootedTreeSet, node: Node): void; abstract insert(treeSet: RootedTreeSet, parent: Node, child: Node, order: number): void; abstract detach(treeSet: RootedTreeSet, node: Node): void; - abstract predict(treeSet: RootedTreeSet, parent, node: Node | null, position: PositionType); + abstract predict( + treeSet: RootedTreeSet, + parent, + node: Node | null, + position: PositionType | null, + ): void; - abstract verify(treeSet: RootedTreeSet, node: Node); + abstract verify(treeSet: RootedTreeSet, node: Node): void; abstract getChildDirection(treeSet: RootedTreeSet, node: Node): 1 | -1; diff --git a/packages/mindplot/src/components/layout/Node.ts b/packages/mindplot/src/components/layout/Node.ts index 7eb364cd..da366b51 100644 --- a/packages/mindplot/src/components/layout/Node.ts +++ b/packages/mindplot/src/components/layout/Node.ts @@ -24,7 +24,7 @@ class Node { private _id: number; // eslint-disable-next-line no-use-before-define - _parent: Node; + _parent: Node | null; private _sorter: ChildrenSorterStrategy; diff --git a/packages/mindplot/src/components/layout/RootedTreeSet.ts b/packages/mindplot/src/components/layout/RootedTreeSet.ts index 1919e203..49a32437 100644 --- a/packages/mindplot/src/components/layout/RootedTreeSet.ts +++ b/packages/mindplot/src/components/layout/RootedTreeSet.ts @@ -94,7 +94,7 @@ class RootedTreeSet { const node = this.find(nodeId); $assert(node._parent, 'Node is not connected'); - node._parent._children = node._parent._children.filter((n) => node !== n); + node._parent!._children = node._parent!._children.filter((n) => node !== n); this._rootNodes.push(node); node._parent = null; } @@ -160,7 +160,7 @@ class RootedTreeSet { getRootNode(node: Node) { $assert(node, 'node cannot be null'); const parent = this.getParent(node); - if ($defined(parent)) { + if (parent) { return this.getRootNode(parent); } @@ -176,7 +176,7 @@ class RootedTreeSet { return this._getAncestors(this.getParent(node), []); } - _getAncestors(node: Node, ancestors: Node[]) { + private _getAncestors(node: Node | null, ancestors: Node[]) { const result = ancestors; if (node) { result.push(node); @@ -192,7 +192,7 @@ class RootedTreeSet { */ getSiblings(node: Node): Node[] { $assert(node, 'node cannot be null'); - if (!$defined(node._parent)) { + if (!node._parent) { return []; } const siblings = node._parent._children.filter((child) => child !== node); @@ -241,7 +241,7 @@ class RootedTreeSet { * @throws will throw an error if node is null or undefined * @return parent */ - getParent(node: Node): Node { + getParent(node: Node): Node | null { $assert(node, 'node cannot be null'); return node._parent; } @@ -373,7 +373,7 @@ class RootedTreeSet { getSiblingsInVerticalDirection(node: Node, yOffset: number): Node[] { // siblings with lower or higher order // (depending on the direction of the offset and on the same side as their parent) - const parent = this.getParent(node); + const parent = this.getParent(node)!; const siblings = this.getSiblings(node).filter((sibling) => { const sameSide = node.getPosition().x > parent.getPosition().x diff --git a/packages/mindplot/src/components/model/RelationshipModel.ts b/packages/mindplot/src/components/model/RelationshipModel.ts index 3fb8686c..95238fe3 100644 --- a/packages/mindplot/src/components/model/RelationshipModel.ts +++ b/packages/mindplot/src/components/model/RelationshipModel.ts @@ -17,7 +17,7 @@ */ import { $assert, $defined } from '@wisemapping/core-js'; import Point from '@wisemapping/web2d'; -import ConnectionLine from '../ConnectionLine'; +import { LineType } from '../ConnectionLine'; class RelationshipModel { static _nextUuid = 0; @@ -47,7 +47,7 @@ class RelationshipModel { this._id = RelationshipModel._nextUUID(); this._sourceTargetId = sourceTopicId; this._targetTopicId = targetTopicId; - this._lineType = ConnectionLine.SIMPLE_CURVED; + this._lineType = LineType.SIMPLE_CURVED; this._srcCtrlPoint = null; this._destCtrlPoint = null; this._endArrow = true; diff --git a/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts b/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts index 0735617d..5e6b8b84 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts +++ b/packages/mindplot/src/components/persistence/XMLSerializerFactory.ts @@ -15,7 +15,6 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import { $assert } from '@wisemapping/core-js'; import ModelCodeName from './ModelCodeName'; import Beta2PelaMigrator from './Beta2PelaMigrator'; import Pela2TangoMigrator from './Pela2TangoMigrator'; diff --git a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts index 0d387fdb..c3037ba1 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializerTango.ts +++ b/packages/mindplot/src/components/persistence/XMLSerializerTango.ts @@ -19,7 +19,7 @@ import { $assert, $defined, createDocument } from '@wisemapping/core-js'; import { Point } from '@wisemapping/web2d'; import Mindmap from '../model/Mindmap'; import { TopicShape } from '../model/INodeModel'; -import ConnectionLine from '../ConnectionLine'; +import { LineType } from '../ConnectionLine'; import FeatureModelFactory from '../model/FeatureModelFactory'; import NodeModel from '../model/NodeModel'; import RelationshipModel from '../model/RelationshipModel'; @@ -207,7 +207,7 @@ class XMLSerializerTango implements XMLMindmapSerializer { const lineType = relationship.getLineType(); result.setAttribute('lineType', lineType.toString()); - if (lineType === ConnectionLine.CURVED || lineType === ConnectionLine.SIMPLE_CURVED) { + if (lineType === LineType.CURVED || lineType === LineType.SIMPLE_CURVED) { if ($defined(relationship.getSrcCtrlPoint())) { const srcPoint = relationship.getSrcCtrlPoint(); result.setAttribute('srcCtrlPoint', `${Math.round(srcPoint.x)},${Math.round(srcPoint.y)}`); @@ -475,7 +475,10 @@ class XMLSerializerTango implements XMLMindmapSerializer { return value !== null ? value : ''; } - static _deserializeRelationship(domElement: Element, mindmap: Mindmap): RelationshipModel { + private static _deserializeRelationship( + domElement: Element, + mindmap: Mindmap, + ): RelationshipModel { const srcId = Number.parseInt(domElement.getAttribute('srcTopicId')!, 10); const destId = Number.parseInt(domElement.getAttribute('destTopicId')!, 10); const lineType = Number.parseInt(domElement.getAttribute('lineType')!, 10); @@ -494,12 +497,24 @@ class XMLSerializerTango implements XMLMindmapSerializer { const model = mindmap.createRelationship(srcId, destId); model.setLineType(lineType); - if ($defined(srcCtrlPoint) && srcCtrlPoint !== '') { - model.setSrcCtrlPoint(Point.fromString(srcCtrlPoint)); + if (srcCtrlPoint) { + const spoint = Point.fromString(srcCtrlPoint); + if (spoint) { + model.setSrcCtrlPoint(spoint); + } else { + console.error(`srcCtrlPoint could not be parsed: ${srcCtrlPoint}`); + } } - if ($defined(destCtrlPoint) && destCtrlPoint !== '') { - model.setDestCtrlPoint(Point.fromString(destCtrlPoint)); + + if (destCtrlPoint) { + const dpoint = Point.fromString(destCtrlPoint); + if (dpoint) { + model.setDestCtrlPoint(dpoint); + } else { + console.error(`destCtrlPoint could not be parsed: ${destCtrlPoint}`); + } } + model.setEndArrow(false); model.setStartArrow(true); return model; diff --git a/packages/mindplot/src/components/util/FadeEffect.js b/packages/mindplot/src/components/util/FadeEffect.js deleted file mode 100644 index 390725b0..00000000 --- a/packages/mindplot/src/components/util/FadeEffect.js +++ /dev/null @@ -1,42 +0,0 @@ -/* - * Copyright [2021] [wisemapping] - * - * Licensed under WiseMapping Public License, Version 1.0 (the "License"). - * It is basically the Apache License, Version 2.0 (the "License") plus the - * "powered by wisemapping" text requirement on every single page; - * you may not use this file except in compliance with the License. - * You may obtain a copy of the license at - * - * http://www.wisemapping.org/license - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -// FIXME: this Class should be reimplemented -import Events from '../Events'; - -class FadeEffect extends Events { - constructor(elements, isVisible) { - super(); - this._isVisible = isVisible; - this._element = elements; - } - - /** */ - start() { - const visible = this._isVisible; - this._element.forEach((elem) => { - if (elem) { - elem.setVisibility(visible); - } - }); - this._isVisible = !visible; - this.fireEvent('complete'); - } -} - -export default FadeEffect; diff --git a/packages/mindplot/src/components/util/Shape.js b/packages/mindplot/src/components/util/Shape.ts similarity index 79% rename from packages/mindplot/src/components/util/Shape.js rename to packages/mindplot/src/components/util/Shape.ts index 20ba4efa..974fd66b 100644 --- a/packages/mindplot/src/components/util/Shape.js +++ b/packages/mindplot/src/components/util/Shape.ts @@ -19,46 +19,56 @@ import { Point } from '@wisemapping/web2d'; import { $assert, $defined } from '@wisemapping/core-js'; import { TopicShape } from '../model/INodeModel'; import TopicConfig from '../TopicConfig'; +import PositionType from '../PositionType'; +import SizeType from '../SizeType'; +import Topic from '../Topic'; -const Shape = { - isAtRight(sourcePoint, targetPoint) { +class Shape { + static isAtRight(sourcePoint: PositionType, targetPoint: PositionType): boolean { $assert(sourcePoint, 'Source can not be null'); $assert(targetPoint, 'Target can not be null'); return sourcePoint.x < targetPoint.x; - }, + } - calculateRectConnectionPoint(rectCenterPoint, rectSize, isAtRight) { + static calculateRectConnectionPoint( + rectCenterPoint: PositionType, + rectSize: SizeType, + isAtRight: boolean, + ): PositionType { $assert(rectCenterPoint, 'rectCenterPoint can not be null'); $assert(rectSize, 'rectSize can not be null'); $assert($defined(isAtRight), 'isRight can not be null'); // This is used fix a minor difference ...z const correctionHardcode = 2; - let result; + let result: PositionType; if (isAtRight) { - result = new Point( - rectCenterPoint.x - rectSize.width / 2 + correctionHardcode, - rectCenterPoint.y, - ); + result = { + x: rectCenterPoint.x - rectSize.width / 2 + correctionHardcode, + y: rectCenterPoint.y, + }; } else { - result = new Point( - parseFloat(rectCenterPoint.x) + rectSize.width / 2 - correctionHardcode, - rectCenterPoint.y, - ); + result = { + x: rectCenterPoint.x + rectSize.width / 2 - correctionHardcode, + y: rectCenterPoint.y, + }; } return result; - }, + } - calculateRelationShipPointCoordinates(topic, controlPoint) { + static calculateRelationShipPointCoordinates( + topic: Topic, + controlPoint: PositionType, + ): PositionType { const size = topic.getSize(); const position = topic.getPosition(); const yGap = position.y - controlPoint.y; const xGap = position.x - controlPoint.x; const disable = Math.abs(yGap) < 5 || Math.abs(xGap) < 5 || Math.abs(yGap - xGap) < 5; - let y; - let x; + let y: number; + let x: number; const gap = 5; if (controlPoint.y > position.y + size.height / 2) { y = position.y + size.height / 2 + gap; @@ -84,10 +94,13 @@ const Shape = { y = !disable ? position.y - (yGap / xGap) * (position.x - x) : position.y; } - return new Point(x, y); - }, + return { x, y }; + } - calculateDefaultControlPoints(srcPos, tarPos) { + static calculateDefaultControlPoints( + srcPos: PositionType, + tarPos: PositionType, + ): [PositionType, PositionType] { const y = srcPos.y - tarPos.y; const x = srcPos.x - tarPos.x; const div = Math.abs(x) > 0.1 ? x : 0.1; // Prevent division by 0. @@ -105,9 +118,9 @@ const Shape = { const y2 = m * (x2 - tarPos.x) + tarPos.y; return [new Point(-srcPos.x + x1, -srcPos.y + y1), new Point(-tarPos.x + x2, -tarPos.y + y2)]; - }, + } - workoutIncomingConnectionPoint(targetNode, sourcePosition) { + static workoutIncomingConnectionPoint(targetNode: Topic, sourcePosition: PositionType) { $assert(sourcePosition, 'sourcePoint can not be null'); const pos = targetNode.getPosition(); const size = targetNode.getSize(); @@ -129,7 +142,7 @@ const Shape = { result.x = Math.ceil(result.x); result.y = Math.ceil(result.y); return result; - }, -}; + } +} export default Shape; diff --git a/packages/mindplot/src/index.ts b/packages/mindplot/src/index.ts index a7454486..3ccf87af 100644 --- a/packages/mindplot/src/index.ts +++ b/packages/mindplot/src/index.ts @@ -58,6 +58,7 @@ declare global { var designer: Designer; } +// eslint-disable-next-line @typescript-eslint/no-explicit-any const globalAny: any = global; globalAny.jQuery = jquery; // WebComponent registration diff --git a/packages/mindplot/test/playground/layout/BalancedTestSuite.js b/packages/mindplot/test/playground/layout/BalancedTestSuite.js index cc75c362..8acde71b 100644 --- a/packages/mindplot/test/playground/layout/BalancedTestSuite.js +++ b/packages/mindplot/test/playground/layout/BalancedTestSuite.js @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ /* * Copyright [2021] [wisemapping] * @@ -90,7 +89,7 @@ class BalancedTestSuite extends TestSuite { manager.plot('testBalanced9', { width: 1000, height: 400 }); // Check orders have shifted accordingly - $assert(manager.find(5).getOrder() == 6, 'Node 5 should have order 6'); + $assert(manager.find(5).getOrder() === 6, 'Node 5 should have order 6'); manager.addNode(14, TestSuite.NODE_SIZE, position); manager.connectNode(0, 14, 5); @@ -98,7 +97,7 @@ class BalancedTestSuite extends TestSuite { manager.plot('testBalanced10', { width: 1000, height: 400 }); // Check orders have shifted accordingly - $assert(manager.find(6).getOrder() == 7, 'Node 6 should have order 7'); + $assert(manager.find(6).getOrder() === 7, 'Node 6 should have order 7'); manager.addNode(15, TestSuite.NODE_SIZE, position); manager.connectNode(0, 15, 4); @@ -106,8 +105,8 @@ class BalancedTestSuite extends TestSuite { manager.plot('testBalanced11', { width: 1000, height: 400 }); // Check orders have shifted accordingly - $assert(manager.find(13).getOrder() == 6, 'Node 13 should have order 6'); - $assert(manager.find(5).getOrder() == 8, 'Node 5 should have order 8'); + $assert(manager.find(13).getOrder() === 6, 'Node 13 should have order 6'); + $assert(manager.find(5).getOrder() === 8, 'Node 5 should have order 8'); manager.addNode(16, TestSuite.NODE_SIZE, position); manager.connectNode(0, 16, 25); @@ -115,7 +114,7 @@ class BalancedTestSuite extends TestSuite { manager.plot('testBalanced12', { width: 1000, height: 400 }); // Check orders have shifted accordingly - $assert(manager.find(16).getOrder() == 9, 'Node 16 should have order 9'); + $assert(manager.find(16).getOrder() === 9, 'Node 16 should have order 9'); manager.addNode(17, TestSuite.NODE_SIZE, position); manager.addNode(18, TestSuite.NODE_SIZE, position); @@ -216,42 +215,42 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph1, prediction1a); $assert( prediction1a.position.y < manager.find(1).getPosition().y && - prediction1a.position.x == manager.find(1).getPosition().x, + prediction1a.position.x === manager.find(1).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction1a.order == 0, 'Prediction order should be 0'); + $assert(prediction1a.order === 0, 'Prediction order should be 0'); console.log('\tAdded as child of node 0 and dropped at (165, -10):'); const prediction1b = manager.predict(0, null, { x: 165, y: -10 }); this._plotPrediction(graph1, prediction1b); $assert( prediction1b.position.y > manager.find(1).getPosition().y && - prediction1b.position.y < manager.find(3).getPosition().y && - prediction1b.position.x == manager.find(1).getPosition().x, + prediction1b.position.y < manager.find(3).getPosition().y && + prediction1b.position.x === manager.find(1).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction1b.order == 2, 'Prediction order should be 2'); + $assert(prediction1b.order === 2, 'Prediction order should be 2'); console.log('\tAdded as child of node 0 and dropped at (145, 15):'); const prediction1c = manager.predict(0, null, { x: 145, y: 15 }); this._plotPrediction(graph1, prediction1c); $assert( prediction1c.position.y > manager.find(3).getPosition().y && - prediction1c.position.y < manager.find(5).getPosition().y && - prediction1c.position.x == manager.find(3).getPosition().x, + prediction1c.position.y < manager.find(5).getPosition().y && + prediction1c.position.x === manager.find(3).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction1c.order == 4, 'Prediction order should be 4'); + $assert(prediction1c.order === 4, 'Prediction order should be 4'); console.log('\tAdded as child of node 0 and dropped at (145, 70):'); const prediction1d = manager.predict(0, null, { x: 145, y: 70 }); this._plotPrediction(graph1, prediction1d); $assert( prediction1d.position.y > manager.find(5).getPosition().y && - prediction1d.position.x == manager.find(5).getPosition().x, + prediction1d.position.x === manager.find(5).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction1d.order == 6, 'Prediction order should be 6'); + $assert(prediction1d.order === 6, 'Prediction order should be 6'); // Graph 2 const graph2 = manager.plot('testBalancedPredict2', { width: 1000, height: 400 }); @@ -261,31 +260,31 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph2, prediction2a); $assert( prediction2a.position.y < manager.find(2).getPosition().y && - prediction2a.position.x == manager.find(2).getPosition().x, + prediction2a.position.x === manager.find(2).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction2a.order == 1, 'Prediction order should be 1'); + $assert(prediction2a.order === 1, 'Prediction order should be 1'); console.log('\tAdded as child of node 0 and dropped at (-145, -10):'); const prediction2b = manager.predict(0, null, { x: -145, y: -10 }); this._plotPrediction(graph2, prediction2b); $assert( prediction2b.position.y > manager.find(2).getPosition().y && - prediction2b.position.y < manager.find(4).getPosition().y && - prediction2b.position.x == manager.find(2).getPosition().x, + prediction2b.position.y < manager.find(4).getPosition().y && + prediction2b.position.x === manager.find(2).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction2b.order == 3, 'Prediction order should be 3'); + $assert(prediction2b.order === 3, 'Prediction order should be 3'); console.log('\tAdded as child of node 0 and dropped at (-145, 40):'); const prediction2c = manager.predict(0, null, { x: -145, y: 400 }); this._plotPrediction(graph2, prediction2c); $assert( prediction2c.position.y > manager.find(4).getPosition().y && - prediction2c.position.x == manager.find(4).getPosition().x, + prediction2c.position.x === manager.find(4).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction2c.order == 5, 'Prediction order should be 5'); + $assert(prediction2c.order === 5, 'Prediction order should be 5'); // Graph 3 console.log('\tPredict nodes added with no position:'); @@ -294,10 +293,10 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph3, prediction3); $assert( prediction3.position.y > manager.find(4).getPosition().y && - prediction3.position.x == manager.find(4).getPosition().x, + prediction3.position.x === manager.find(4).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction3.order == 5, 'Prediction order should be 5'); + $assert(prediction3.order === 5, 'Prediction order should be 5'); console.log('\tPredict nodes added with no position:'); manager.addNode(6, TestSuite.NODE_SIZE, prediction3.position); @@ -308,10 +307,10 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph4, prediction4); $assert( prediction4.position.y > manager.find(5).getPosition().y && - prediction4.position.x == manager.find(5).getPosition().x, + prediction4.position.x === manager.find(5).getPosition().x, 'Prediction is incorrectly positioned', ); - $assert(prediction4.order == 6, 'Prediction order should be 6'); + $assert(prediction4.order === 6, 'Prediction order should be 6'); console.log('\tPredict nodes added only a root node:'); manager.removeNode(1).removeNode(2).removeNode(3).removeNode(4).removeNode(5); @@ -323,16 +322,16 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph5, prediction5b); $assert( prediction5a.position.x > manager.find(0).getPosition().x && - prediction5a.position.y == manager.find(0).getPosition().y, + prediction5a.position.y === manager.find(0).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction5a.order == 0, 'Prediction order should be 0'); + $assert(prediction5a.order === 0, 'Prediction order should be 0'); $assert( - prediction5a.position.x == prediction5b.position.x && - prediction5a.position.y == prediction5b.position.y, + prediction5a.position.x === prediction5b.position.x && + prediction5a.position.y === prediction5b.position.y, 'Both predictions should be the same', ); - $assert(prediction5a.order == prediction5b.order, 'Both predictions should be the same'); + $assert(prediction5a.order === prediction5b.order, 'Both predictions should be the same'); console.log('OK!\n\n'); } @@ -350,24 +349,24 @@ class BalancedTestSuite extends TestSuite { const prediction1a = manager.predict(0, 1, { x: 50, y: 50 }); this._plotPrediction(graph1, prediction1a); $assert( - prediction1a.position.x == manager.find(1).getPosition().x && - prediction1a.position.y == manager.find(1).getPosition().y, + prediction1a.position.x === manager.find(1).getPosition().x && + prediction1a.position.y === manager.find(1).getPosition().y, 'Prediction position should be the same as node 1', ); $assert( - prediction1a.order == manager.find(1).getOrder(), + prediction1a.order === manager.find(1).getOrder(), 'Prediction order should be the same as node 1', ); const prediction1b = manager.predict(0, 1, { x: 50, y: -50 }); this._plotPrediction(graph1, prediction1b); $assert( - prediction1b.position.x == manager.find(1).getPosition().x && - prediction1b.position.y == manager.find(1).getPosition().y, + prediction1b.position.x === manager.find(1).getPosition().x && + prediction1b.position.y === manager.find(1).getPosition().y, 'Prediction position should be the same as node 1', ); $assert( - prediction1b.order == manager.find(1).getOrder(), + prediction1b.order === manager.find(1).getOrder(), 'Prediction order should be the same as node 1', ); @@ -375,19 +374,19 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph1, prediction1c); $assert( prediction1c.position.x < manager.find(0).getPosition().x && - prediction1c.position.y == manager.find(0).getPosition().y, + prediction1c.position.y === manager.find(0).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction1c.order == 1, 'Prediction order should be the same as node 1'); + $assert(prediction1c.order === 1, 'Prediction order should be the same as node 1'); const prediction1d = manager.predict(0, 1, { x: -50, y: -50 }); this._plotPrediction(graph1, prediction1d); $assert( prediction1d.position.x < manager.find(0).getPosition().x && - prediction1d.position.y == manager.find(0).getPosition().y, + prediction1d.position.y === manager.find(0).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction1d.order == 1, 'Prediction order should be the same as node 1'); + $assert(prediction1d.order === 1, 'Prediction order should be the same as node 1'); // Graph 2 manager.disconnectNode(1); @@ -399,41 +398,41 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph2, prediction2a); $assert( prediction2a.position.x > manager.find(0).getPosition().x && - prediction2a.position.y == manager.find(0).getPosition().y, + prediction2a.position.y === manager.find(0).getPosition().y, 'Prediction is positioned incorrectly', ); - $assert(prediction2a.order == 0, 'Prediction order should be 0'); + $assert(prediction2a.order === 0, 'Prediction order should be 0'); const prediction2b = manager.predict(0, 1, { x: 50, y: -50 }); this._plotPrediction(graph2, prediction2b); $assert( prediction2b.position.x > manager.find(0).getPosition().x && - prediction2b.position.y == manager.find(0).getPosition().y, + prediction2b.position.y === manager.find(0).getPosition().y, 'Prediction is positioned incorrectly', ); - $assert(prediction2b.order == 0, 'Prediction order should be 0'); + $assert(prediction2b.order === 0, 'Prediction order should be 0'); const prediction2c = manager.predict(0, 1, { x: -50, y: 50 }); this._plotPrediction(graph2, prediction2c); $assert( - prediction2c.position.x == manager.find(1).getPosition().x && - prediction2c.position.y == manager.find(1).getPosition().y, + prediction2c.position.x === manager.find(1).getPosition().x && + prediction2c.position.y === manager.find(1).getPosition().y, 'Prediction position should be the same as node 1', ); $assert( - prediction2c.order == manager.find(1).getOrder(), + prediction2c.order === manager.find(1).getOrder(), 'Prediction order should be the same as node 1', ); const prediction2d = manager.predict(0, 1, { x: -50, y: -50 }); this._plotPrediction(graph2, prediction2d); $assert( - prediction2d.position.x == manager.find(1).getPosition().x && - prediction2d.position.y == manager.find(1).getPosition().y, + prediction2d.position.x === manager.find(1).getPosition().x && + prediction2d.position.y === manager.find(1).getPosition().y, 'Prediction position should be the same as node 1', ); $assert( - prediction2d.order == manager.find(1).getOrder(), + prediction2d.order === manager.find(1).getOrder(), 'Prediction order should be the same as node 1', ); @@ -447,18 +446,18 @@ class BalancedTestSuite extends TestSuite { const prediction3a = manager.predict(0, 1, { x: 50, y: 50 }); this._plotPrediction(graph3, prediction3a); $assert( - prediction3a.position.x == manager.find(2).getPosition().x && - prediction3a.position.y > manager.find(2).getPosition().y, + prediction3a.position.x === manager.find(2).getPosition().x && + prediction3a.position.y > manager.find(2).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction3a.order == 4, 'Prediction order should be 4'); + $assert(prediction3a.order === 4, 'Prediction order should be 4'); const prediction3b = manager.predict(0, 1, { x: 50, y: -50 }); this._plotPrediction(graph3, prediction3b); $assert( - prediction3b.position.x == manager.find(1).getPosition().x && - prediction3b.position.y == manager.find(1).getPosition().y && - prediction3b.order == manager.find(1).getOrder(), + prediction3b.position.x === manager.find(1).getPosition().x && + prediction3b.position.y === manager.find(1).getPosition().y && + prediction3b.order === manager.find(1).getOrder(), 'Prediction should be the exact same as dragged node', ); @@ -466,29 +465,29 @@ class BalancedTestSuite extends TestSuite { this._plotPrediction(graph3, prediction3c); $assert( prediction3c.position.x < manager.find(0).getPosition().x && - prediction3c.position.y == manager.find(0).getPosition().y, + prediction3c.position.y === manager.find(0).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction3c.order == 1, 'Prediction order should be 1'); + $assert(prediction3c.order === 1, 'Prediction order should be 1'); const prediction3d = manager.predict(0, 1, { x: -50, y: -50 }); this._plotPrediction(graph3, prediction3d); $assert( prediction3d.position.x < manager.find(0).getPosition().x && - prediction3d.position.y == manager.find(0).getPosition().y, + prediction3d.position.y === manager.find(0).getPosition().y, 'Prediction is incorrectly positioned', ); - $assert(prediction3d.order == 1, 'Prediction order should be 1'); + $assert(prediction3d.order === 1, 'Prediction order should be 1'); const prediction3e = manager.predict(0, 1, { x: 50, y: 0 }); this._plotPrediction(graph3, prediction3e); $assert( - prediction3e.position.x == manager.find(1).getPosition().x && - prediction3e.position.y == manager.find(1).getPosition().y, + prediction3e.position.x === manager.find(1).getPosition().x && + prediction3e.position.y === manager.find(1).getPosition().y, 'Prediction position should be the same as node 1', ); $assert( - prediction3e.order == manager.find(1).getOrder(), + prediction3e.order === manager.find(1).getOrder(), 'Prediction order should be the same as node 1', ); diff --git a/packages/mindplot/tsconfig.json b/packages/mindplot/tsconfig.json index b2a5de29..ed87437f 100644 --- a/packages/mindplot/tsconfig.json +++ b/packages/mindplot/tsconfig.json @@ -10,7 +10,7 @@ "esModuleInterop": true, "resolveJsonModule": true, "declaration": true, - "strictNullChecks": false, + "strictNullChecks": true, "rootDirs": [ "src", ] diff --git a/packages/web2d/package.json b/packages/web2d/package.json index 133d53ea..a54a217e 100644 --- a/packages/web2d/package.json +++ b/packages/web2d/package.json @@ -32,7 +32,7 @@ "@babel/preset-env": "^7.19.4", "babel-loader": "^8.2.2", "clean-webpack-plugin": "^4.0.0", - "cypress": "^10.11.0", + "cypress": "11.2.0", "cypress-image-snapshot": "^4.0.1", "eslint": "^5.16.0", "eslint-config-airbnb-base": "^14.2.1", @@ -49,12 +49,12 @@ }, "dependencies": { "@wisemapping/core-js": "^0.4.0", - "jquery": "^3.6.0", - "core-js": "^3.15.2" + "core-js": "^3.15.2", + "jquery": "^3.6.0" }, "peerDependencies": { "@wisemapping/core-js": "^0.4.0", - "jquery": "^3.6.0", - "core-js": "^3.15.2" + "core-js": "^3.15.2", + "jquery": "^3.6.0" } -} \ No newline at end of file +} diff --git a/packages/web2d/src/components/Point.js b/packages/web2d/src/components/Point.js index e07ebaed..5fa0ba0f 100644 --- a/packages/web2d/src/components/Point.js +++ b/packages/web2d/src/components/Point.js @@ -41,8 +41,19 @@ class Point { } Point.fromString = function pointFromString(point) { - const values = point.split(','); - return new Point(Number.parseInt(values[0], 10), Number.parseInt(values[1], 10)); + let result = null; + if (point) { + const values = point.split(','); + if (values.length === 2) { + const x = Number.parseInt(values[0], 10); + const y = Number.parseInt(values[1], 10); + + if (!Number.isNaN(x) && !Number.isNaN(y)) { + result = new Point(x, y); + } + } + } + return result; }; export default Point; diff --git a/packages/webapp/.eslintrc.json b/packages/webapp/.eslintrc.json index d0246ba5..257c1652 100644 --- a/packages/webapp/.eslintrc.json +++ b/packages/webapp/.eslintrc.json @@ -30,7 +30,6 @@ "@typescript-eslint/no-explicit-any": "error", "@typescript-eslint/explicit-module-boundary-types": "error", "@typescript-eslint/no-unused-vars": "error", - "react/no-unknown-property": ["error", { "ignore": ["css"] }], "react-hooks/rules-of-hooks": "warn", // Checks rules of Hooks "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies "no-restricted-imports": [ diff --git a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png index d0fca491..31ab1929 100644 Binary files a/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png and b/packages/webapp/cypress/snapshots/editor.cy.ts/editor-page.snap.png differ diff --git a/packages/webapp/lang/en.json b/packages/webapp/lang/en.json index df243543..5ebecc78 100644 --- a/packages/webapp/lang/en.json +++ b/packages/webapp/lang/en.json @@ -188,6 +188,12 @@ "forgot.email": { "defaultMessage": "Email" }, + "forgot.oauth.back": { + "defaultMessage": "Back to login" + }, + "forgot.oauth.message": { + "defaultMessage": "You dont need password, please login using Google." + }, "forgot.page-title": { "defaultMessage": "Forgot Password | WiseMapping" }, @@ -305,6 +311,9 @@ "login.desc": { "defaultMessage": "Log into your account" }, + "login.division": { + "defaultMessage": "or" + }, "login.email": { "defaultMessage": "Email" }, @@ -314,6 +323,9 @@ "login.forgotpwd": { "defaultMessage": "Forgot Password ?" }, + "login.google.button": { + "defaultMessage": "Sign in with Google" + }, "login.page-title": { "defaultMessage": "Login | WiseMapping" }, @@ -440,18 +452,45 @@ "publish.title": { "defaultMessage": "Publish" }, + "registation.callback.error.message": { + "defaultMessage": "An error occurred validating your identity with Google, you can try again from the login page" + }, "registation.success-title": { "defaultMessage": "Registation Success | WiseMapping" }, + "registration.callback.back": { + "defaultMessage": "Back to login" + }, + "registration.callback.confirm.description": { + "defaultMessage": "An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?" + }, + "registration.callback.confirm.title": { + "defaultMessage": "Confirm" + }, + "registration.callback.sync": { + "defaultMessage": "Sync account" + }, + "registration.callback.waiting.description": { + "defaultMessage": "Please wait while we validate your identity" + }, + "registration.callback.waiting.title": { + "defaultMessage": "Finishing..." + }, "registration.desc": { "defaultMessage": "Signing up is free and just take a moment" }, + "registration.division": { + "defaultMessage": "or" + }, "registration.email": { "defaultMessage": "Email" }, "registration.firstname": { "defaultMessage": "First Name" }, + "registration.google.button": { + "defaultMessage": "Sign up with Google" + }, "registration.lastname": { "defaultMessage": "Last Name" }, @@ -514,42 +553,5 @@ }, "share.message": { "defaultMessage": "Message" - }, - "registration.google.button": { - "defaultMessage": "Sign up with Google" - }, - "login.google.button": { - "defaultMessage": "Sign in with Google" - }, - "registration.division": { - "defaultMessage": "or" - }, - "registration.callback.confirm.title": { - "defaultMessage": "Confirm" - }, - "registration.callback.waiting.title": { - "defaultMessage": "Finishing ..." - }, - "registration.callback.confirm.description": { - "defaultMessage": "An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?" - }, - "registration.callback.waiting.description": { - "defaultMessage": "Please wait while we validate your identity" - }, - "registation.callback.error.message": { - "defaultMessage": "An error occurred validating your identity with Google, you can try again from the login page" - }, - "registration.callback.back": { - "defaultMessage": "Back to login" - }, - "registration.callback.sync": { - "defaultMessage": "Sync account" - }, - "forgot.oauth.message": { - "defaultMessage": "You dont need password, please login using Google" - }, - "forgot.oauth.back": { - "defaultMessage": "Back to login" } - } \ No newline at end of file diff --git a/packages/webapp/package.json b/packages/webapp/package.json index 8521cde5..0fd6e613 100644 --- a/packages/webapp/package.json +++ b/packages/webapp/package.json @@ -30,7 +30,7 @@ "@welldone-software/why-did-you-render": "^7.0.1", "clean-webpack-plugin": "^3.0.05.10.11", "copy-webpack-plugin": "^7.0.0", - "cypress": "^10.11.0", + "cypress": "11.2.0", "cypress-image-snapshot": "^4.0.1", "eslint": "^7.14.0", "eslint-config-prettier": "^8.0.0", diff --git a/packages/webapp/src/classes/client/rest-client/index.ts b/packages/webapp/src/classes/client/rest-client/index.ts index aa0f3457..50e95028 100644 --- a/packages/webapp/src/classes/client/rest-client/index.ts +++ b/packages/webapp/src/classes/client/rest-client/index.ts @@ -640,7 +640,7 @@ export default class RestClient implements Client { reject: (error: ErrorInfo) => void, ) => { this.axios - .post(`${this.baseUrl}/service/users/googleCallback?code=${code}`, { + .post(`${this.baseUrl}/service/oauth2/googlecallback?code=${code}`, { headers: { 'Content-Type': 'application/json' }, }) .then((response) => { @@ -661,7 +661,7 @@ export default class RestClient implements Client { confirmAccountSync(email: string, code: string): Promise { const handler = (success: () => void, reject: (error: ErrorInfo) => void) => { this.axios - .put(`${this.baseUrl}/service/users/confirmAccountSync?email=${email}&code=${code}`, { + .put(`${this.baseUrl}/service/oauth2/confirmaccountsync?email=${email}&code=${code}`, { headers: { 'Content-Type': 'application/json' }, }) .then(() => { diff --git a/packages/webapp/src/components/common/separator/index.tsx b/packages/webapp/src/components/common/separator/index.tsx index c8286a59..287ff0fc 100644 --- a/packages/webapp/src/components/common/separator/index.tsx +++ b/packages/webapp/src/components/common/separator/index.tsx @@ -78,8 +78,11 @@ const Separator: React.FunctionComponent = ({ ]); return ( + // eslint-disable-next-line react/no-unknown-property
+ {/* eslint-disable-next-line react/no-unknown-property */}
+ {/* eslint-disable-next-line react/no-unknown-property */}
{text}
); diff --git a/packages/webapp/src/components/editor-page/EditorOptionsBuilder.ts b/packages/webapp/src/components/editor-page/EditorOptionsBuilder.ts index ae378e49..37b93472 100644 --- a/packages/webapp/src/components/editor-page/EditorOptionsBuilder.ts +++ b/packages/webapp/src/components/editor-page/EditorOptionsBuilder.ts @@ -12,10 +12,7 @@ class EditorOptionsBuilder { if (!AppConfig.isDevelopEnv()) { options = { - zoom: - globalThis.userOptions?.zoom != undefined - ? Number.parseFloat(globalThis?.userOptions?.zoom as string) - : 0.8, + zoom: globalThis.userOptions?.zoom ? globalThis?.userOptions?.zoom : 0.8, locked: globalThis.mindmapLocked, lockedMsg: globalThis.mindmapLockedMsg, mapTitle: globalThis.mapTitle, diff --git a/packages/webapp/src/components/registration-callback/index.tsx b/packages/webapp/src/components/registration-callback/index.tsx index 3947b4fd..2831f4a4 100644 --- a/packages/webapp/src/components/registration-callback/index.tsx +++ b/packages/webapp/src/components/registration-callback/index.tsx @@ -53,6 +53,7 @@ const RegistrationCallbackPage = (): React.ReactElement => { .catch((error) => { console.log('ERROR', error); setCallbackError(true); + window.newrelic?.noticeError(error); }); }, []); @@ -64,6 +65,7 @@ const RegistrationCallbackPage = (): React.ReactElement => { }) .catch((error) => { console.log('ERROR', error); + window.newrelic?.noticeError(error); }); }; @@ -74,26 +76,33 @@ const RegistrationCallbackPage = (): React.ReactElement => { // if service reports that user doesnt sync accounts yet, we need to show the options const needConfirmLinking = !callbackError && email && !googleSync; - const titleKey = needConfirmLinking - ? 'registration.callback.confirm.title' - : 'registration.callback.waiting.title'; - const titleDefaultValue = needConfirmLinking ? 'Confirm' : 'Finishing...'; - const descriptionKey = needConfirmLinking - ? 'registration.callback.confirm.description' - : 'registration.callback.waiting.description'; - const descriptionDefaultValue = needConfirmLinking - ? 'An account with the same email was previously registered. Do you want to link your google account to that WiseMapping account?' - : 'Please wait while we validate your identity'; return (
- + {needConfirmLinking ? ( + + ) : ( + + )} - + {needConfirmLinking ? ( + + ) : ( + + )} {callbackError && ( diff --git a/packages/webapp/src/components/registration-page/index.tsx b/packages/webapp/src/components/registration-page/index.tsx index 12d7a641..da2b1d29 100644 --- a/packages/webapp/src/components/registration-page/index.tsx +++ b/packages/webapp/src/components/registration-page/index.tsx @@ -163,16 +163,19 @@ const RegistrationForm = () => { /> {AppConfig.isRecaptcha2Enabled() && ( -
- setCaptcha(el)} - sitekey={AppConfig.getRecaptcha2SiteKey()} - onChange={(value: string) => { - model.recaptcha = value; - setModel(model); - }} - /> -
+ <> + {/* eslint-disable-next-line react/no-unknown-property */} +
+ setCaptcha(el)} + sitekey={AppConfig.getRecaptcha2SiteKey()} + onChange={(value: string) => { + model.recaptcha = value; + setModel(model); + }} + /> +
+ )}
void }; + } +} + const container = document.getElementById('root') as HTMLElement; const root = createRoot(container!); root.render(); diff --git a/yarn.lock b/yarn.lock index 9fd296d5..ff4722a9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5386,10 +5386,10 @@ cypress@*: untildify "^4.0.0" yauzl "^2.10.0" -cypress@^10.11.0: - version "10.11.0" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.11.0.tgz#e9fbdd7638bae3d8fb7619fd75a6330d11ebb4e8" - integrity sha512-lsaE7dprw5DoXM00skni6W5ElVVLGAdRUUdZjX2dYsGjbY/QnpzWZ95Zom1mkGg0hAaO/QVTZoFVS7Jgr/GUPA== +cypress@11.2.0, cypress@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-11.2.0.tgz#63edef8c387b687066c5493f6f0ad7b9ced4b2b7" + integrity sha512-u61UGwtu7lpsNWLUma/FKNOsrjcI6wleNmda/TyKHe0dOBcVjbCPlp1N6uwFZ0doXev7f/91YDpU9bqDCFeBLA== dependencies: "@cypress/request" "^2.88.10" "@cypress/xvfb" "^1.2.4"