diff --git a/.gitignore b/.gitignore index c3d3c1a1..21a52a85 100644 --- a/.gitignore +++ b/.gitignore @@ -49,4 +49,6 @@ Thumbs.db *.wmv **/build/**/* -.vscode \ No newline at end of file +.vscode + +*/test/playground/dist \ No newline at end of file diff --git a/bitbucket-pipelines.yml b/bitbucket-pipelines.yml index a6b95577..4246db69 100644 --- a/bitbucket-pipelines.yml +++ b/bitbucket-pipelines.yml @@ -17,7 +17,6 @@ pipelines: - cypress script: - export CYPRESS_imageSnaphots="true" - - yarn install - yarn bootstrap - yarn build - yarn lint @@ -27,4 +26,4 @@ pipelines: definitions: caches: npm: $HOME/.npm - cypress: $HOME/.cache/Cypress \ No newline at end of file + cypress: $HOME/.cache/Cypress diff --git a/docker-compose.snapshots.update.yml b/docker-compose.snapshots.update.yml index c84bea7d..0ebe1679 100644 --- a/docker-compose.snapshots.update.yml +++ b/docker-compose.snapshots.update.yml @@ -3,7 +3,7 @@ services: e2e: image: cypress/included:8.4.1 container_name: wisemapping-integration-tests - entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"' + entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e environment: - CYPRESS_imageSnaphots=true diff --git a/docker-compose.snapshots.yml b/docker-compose.snapshots.yml index e34927de..2f498c27 100644 --- a/docker-compose.snapshots.yml +++ b/docker-compose.snapshots.yml @@ -3,7 +3,7 @@ services: e2e: image: cypress/included:8.4.1 container_name: wisemapping-integration-tests - entrypoint: '/bin/sh -c "yarn bootstrap && yarn test:integration"' + entrypoint: '/bin/sh -c "yarn bootstrap && yarn build && yarn test:integration"' working_dir: /e2e environment: - CYPRESS_imageSnaphots=true diff --git a/packages/core-js/src/index.js b/packages/core-js/src/index.js index 0dc37010..1cbb3ff5 100644 --- a/packages/core-js/src/index.js +++ b/packages/core-js/src/index.js @@ -16,8 +16,6 @@ * limitations under the License. */ - - /** * Cross-browser implementation of creating an XML document object. */ @@ -48,7 +46,7 @@ export const createDocument = function () { obj - object to inspect */ - export const $defined = function (obj) { +export const $defined = function (obj) { return obj != undefined; }; diff --git a/packages/editor/cypress/fixtures/example.json b/packages/editor/cypress/fixtures/example.json new file mode 100644 index 00000000..02e42543 --- /dev/null +++ b/packages/editor/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/packages/editor/cypress/integration/relationship.test.js b/packages/editor/cypress/integration/relationship.test.js new file mode 100644 index 00000000..fc567502 --- /dev/null +++ b/packages/editor/cypress/integration/relationship.test.js @@ -0,0 +1,16 @@ +context('Relationship Topics', () => { + beforeEach(() => { + cy.visit('/editor.html'); + cy.reload(); + cy.get('[test-id="30-11-relationship"]').click({ force: true }); + }); + + it('Change shape relationship', () => { + cy.get('[test-id="control-56"]').trigger('mousedown', { force: true }); + cy.get('body').trigger('mousemove', { clientX: 500, clientY: 200 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('changeShapeRealtionship'); + + cy.get('[test-id="control-56"]').invoke('attr', 'cy').should('eq', '-131.75'); + }); +}); diff --git a/packages/editor/cypress/integration/topicFontChange.test.js b/packages/editor/cypress/integration/topicFontChange.test.js new file mode 100644 index 00000000..5ba77776 --- /dev/null +++ b/packages/editor/cypress/integration/topicFontChange.test.js @@ -0,0 +1,67 @@ +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', () => { + cy.get('#fontSizeTip').click(); + cy.get('.popover #small').click(); + + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '8.0625'); + cy.matchImageSnapshot('changeFontSizeSmall'); + + cy.get('#fontSizeTip').click(); + cy.get('.popover #normal').click({ force: true }); + + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '10.75'); + cy.matchImageSnapshot('changeFontSizeNormal'); + + cy.get('#fontSizeTip').click(); + cy.get('.popover #large').click({ force: true }); + + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '13.4375'); + cy.matchImageSnapshot('changeFontSizeLarge'); + + cy.get('#fontSizeTip').click(); + cy.get('.popover #huge').click({ force: true }); + + cy.get('[test-id=1] > text').invoke('attr', 'font-size').should('eq', '20.15625'); + cy.matchImageSnapshot('changeFontSizeHuge'); + }); + + it('Change Font type', () => { + cy.get('#fontFamilyTip').click(); + cy.get('[model="Times"]').click({ force: true }); + + cy.get('[test-id=1] > text').invoke('attr', 'font-family').should('eq', 'Times'); + + cy.matchImageSnapshot('changeFontType'); + }); + + it('Change Font Italic', () => { + cy.get('#fontItalicTip').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/integration/topicManager.test.js b/packages/editor/cypress/integration/topicManager.test.js new file mode 100644 index 00000000..d45e974c --- /dev/null +++ b/packages/editor/cypress/integration/topicManager.test.js @@ -0,0 +1,49 @@ +context('Node manager', () => { + before(() => { + cy.visit('/editor.html'); + }); + + it('shortcut add sibling node', () => { + cy.contains('Mind Mapping').click(); + cy.get('body').type('{enter}').type('Mind Mapping rocks!!').type('{enter}'); + + cy.get('[test-id=36] > text > tspan').should('exist'); + + cy.matchImageSnapshot('editor-shortcut-edit'); + }); + + it('shortcut add child node', () => { + cy.contains('Mind Mapping rocks!!').click(); + 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}'); + + cy.get('[test-id=36] > text > tspan').should('exist'); + cy.get('[test-id=37] > text > tspan').should('exist'); + + cy.matchImageSnapshot('addChildNodeSortcut'); + }); + + it('Delete topic', () => { + cy.get('[test-id=37]').click(); + cy.get('body').type('{del}'); + + cy.get('[test-id=37]').should('not.exist'); + + cy.matchImageSnapshot('deleteTopicShortcut'); + }); + + it('undo changes', () => { + cy.get('#undoEditionTip').click(); + + cy.get('[test-id=36] > text > tspan').should('exist'); + + cy.matchImageSnapshot('undoChange'); + }); + + it('Save changes', () => { + cy.contains('Mind Mapping rocks!!').click(); + cy.get('body').type('{ctrl}s'); + + cy.matchImageSnapshot('saveChagesShortcut'); + }); +}); diff --git a/packages/editor/cypress/integration/topicPosition.test.js b/packages/editor/cypress/integration/topicPosition.test.js new file mode 100644 index 00000000..83c8d409 --- /dev/null +++ b/packages/editor/cypress/integration/topicPosition.test.js @@ -0,0 +1,35 @@ +context('Change topic position', () => { + beforeEach(() => { + cy.visit('/editor.html'); + cy.reload(); + }); + + it('Move up node "Mind Mapping"', () => { + const position = { clientX: 270, clientY: 160 }; + cy.contains('Mind Mapping').trigger('mousedown'); + cy.get('body').trigger('mousemove', position); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('moveupNode'); + }); + + it('Move down node "Mind Mapping"', () => { + cy.contains('Mind Mapping').trigger('mousedown'); + cy.get('body').trigger('mousemove', { clientX: 350, clientY: 380 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('movedownNode'); + }); + + it('Move default position node "Mind Mapping"', () => { + cy.contains('Mind Mapping').trigger('mousedown'); + cy.get('body').trigger('mousemove', { clientX: 270, clientY: 240 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('moveDefaultPosition'); + }); + + it('Move left node "Mind Mapping"', () => { + cy.contains('Mind Mapping').trigger('mousedown'); + cy.get('body').trigger('mousemove', { clientX: 700, clientY: 240 }); + cy.get('body').trigger('mouseup'); + cy.matchImageSnapshot('moveleftNode'); + }); +}); diff --git a/packages/editor/cypress/integration/topicShape.test.js b/packages/editor/cypress/integration/topicShape.test.js new file mode 100644 index 00000000..7247f406 --- /dev/null +++ b/packages/editor/cypress/integration/topicShape.test.js @@ -0,0 +1,44 @@ +context('Change Topic shape', () => { + beforeEach(() => { + cy.visit('/editor.html'); + cy.reload(); + cy.contains('Try it Now!').click(); + }); + + it('change to square shape', () => { + cy.get('#topicShapeTip').click(); + cy.get('#rectagle').click(); + + cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '0'); + + cy.matchImageSnapshot('changeToSquareShape'); + }); + + it('change to rounded rectagle', () => { + cy.get('#topicShapeTip').click(); + // TODO: The parameter {force: true} was placed because it does not detect that the element is visible + cy.get('#rounded_rectagle').click({ force: true }); + + cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '4.05'); + + cy.matchImageSnapshot('changeToRoundedRectagle'); + }); + + it('change to line', () => { + cy.get('#topicShapeTip').click(); + // TODO: The parameter {force: true} was placed because it does not detect that the element is visible + cy.get('#line').click({ force: true }); + + cy.matchImageSnapshot('changeToLine'); + }); + + it('change to elipse shape', () => { + cy.get('#topicShapeTip').click(); + // TODO: The parameter {force: true} was placed because it does not detect that the element is visible + cy.get('#elipse').click({ force: true }); + + cy.get('[test-id=11] > rect').eq(1).invoke('attr', 'rx').should('eq', '12.15'); + + cy.matchImageSnapshot('changeToElipseShape'); + }); +}); diff --git a/packages/editor/cypress/snapshots/playground.test.js/container.snap.png b/packages/editor/cypress/snapshots/playground.test.js/container.snap.png index 61be91e5..d46f39c0 100644 Binary files a/packages/editor/cypress/snapshots/playground.test.js/container.snap.png and b/packages/editor/cypress/snapshots/playground.test.js/container.snap.png differ diff --git a/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample2.snap.png b/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample2.snap.png index a9b5c353..d85d9f05 100644 Binary files a/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample2.snap.png and b/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample2.snap.png differ diff --git a/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample5.snap.png b/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample5.snap.png index d018fefd..be4bbf2f 100644 Binary files a/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample5.snap.png and b/packages/editor/cypress/snapshots/playground.test.js/viewmode-sample5.snap.png differ diff --git a/packages/editor/cypress/snapshots/relationship.test.js/changeShapeRealtionship.snap.png b/packages/editor/cypress/snapshots/relationship.test.js/changeShapeRealtionship.snap.png new file mode 100644 index 00000000..25c832bd Binary files /dev/null and b/packages/editor/cypress/snapshots/relationship.test.js/changeShapeRealtionship.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontColor.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontColor.snap.png new file mode 100644 index 00000000..90bfbbb0 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontColor.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontItalic.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontItalic.snap.png new file mode 100644 index 00000000..093814fb Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontItalic.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeHuge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeHuge.snap.png new file mode 100644 index 00000000..1c2572e1 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeHuge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeLarge.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeLarge.snap.png new file mode 100644 index 00000000..aa9da27c Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeLarge.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeNormal.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeNormal.snap.png new file mode 100644 index 00000000..87ee4f5f Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeNormal.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeSmall.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeSmall.snap.png new file mode 100644 index 00000000..10222b9b Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontSizeSmall.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontType.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontType.snap.png new file mode 100644 index 00000000..614c9e50 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeFontType.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicFontChange.test.js/changeMainTopicText.snap.png b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeMainTopicText.snap.png new file mode 100644 index 00000000..fa28917d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicFontChange.test.js/changeMainTopicText.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.test.js/addChildNodeSortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.test.js/addChildNodeSortcut.snap.png new file mode 100644 index 00000000..d3c6994d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.test.js/addChildNodeSortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.test.js/deleteTopicShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.test.js/deleteTopicShortcut.snap.png new file mode 100644 index 00000000..28bd948d Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.test.js/deleteTopicShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.test.js/editor-shortcut-edit.snap.png b/packages/editor/cypress/snapshots/topicManager.test.js/editor-shortcut-edit.snap.png new file mode 100644 index 00000000..696e5816 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.test.js/editor-shortcut-edit.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.test.js/saveChagesShortcut.snap.png b/packages/editor/cypress/snapshots/topicManager.test.js/saveChagesShortcut.snap.png new file mode 100644 index 00000000..6aeaba70 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.test.js/saveChagesShortcut.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicManager.test.js/undoChange.snap.png b/packages/editor/cypress/snapshots/topicManager.test.js/undoChange.snap.png new file mode 100644 index 00000000..44ea8b04 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicManager.test.js/undoChange.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.test.js/moveDefaultPosition.snap.png b/packages/editor/cypress/snapshots/topicPosition.test.js/moveDefaultPosition.snap.png new file mode 100644 index 00000000..24c9072a Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.test.js/moveDefaultPosition.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.test.js/movedownNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.test.js/movedownNode.snap.png new file mode 100644 index 00000000..3f7686f2 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.test.js/movedownNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.test.js/moveleftNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.test.js/moveleftNode.snap.png new file mode 100644 index 00000000..575db5eb Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.test.js/moveleftNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicPosition.test.js/moveupNode.snap.png b/packages/editor/cypress/snapshots/topicPosition.test.js/moveupNode.snap.png new file mode 100644 index 00000000..eb86c969 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicPosition.test.js/moveupNode.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.test.js/changeToElipseShape.snap.png b/packages/editor/cypress/snapshots/topicShape.test.js/changeToElipseShape.snap.png new file mode 100644 index 00000000..8680e14c Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.test.js/changeToElipseShape.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.test.js/changeToLine.snap.png b/packages/editor/cypress/snapshots/topicShape.test.js/changeToLine.snap.png new file mode 100644 index 00000000..b2d65d21 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.test.js/changeToLine.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.test.js/changeToRoundedRectagle.snap.png b/packages/editor/cypress/snapshots/topicShape.test.js/changeToRoundedRectagle.snap.png new file mode 100644 index 00000000..e3af6a66 Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.test.js/changeToRoundedRectagle.snap.png differ diff --git a/packages/editor/cypress/snapshots/topicShape.test.js/changeToSquareShape.snap.png b/packages/editor/cypress/snapshots/topicShape.test.js/changeToSquareShape.snap.png new file mode 100644 index 00000000..c993cc1e Binary files /dev/null and b/packages/editor/cypress/snapshots/topicShape.test.js/changeToSquareShape.snap.png differ diff --git a/packages/editor/test/playground/map-render/html/viewmode.html b/packages/editor/test/playground/map-render/html/viewmode.html index 1c85c7cf..6122f96e 100644 --- a/packages/editor/test/playground/map-render/html/viewmode.html +++ b/packages/editor/test/playground/map-render/html/viewmode.html @@ -35,4 +35,4 @@ - \ No newline at end of file + diff --git a/packages/editor/test/playground/map-render/samples/welcome.wxml b/packages/editor/test/playground/map-render/samples/welcome.wxml index b570a101..6d0ab9c5 100644 --- a/packages/editor/test/playground/map-render/samples/welcome.wxml +++ b/packages/editor/test/playground/map-render/samples/welcome.wxml @@ -67,4 +67,4 @@ Sibling]]> - \ No newline at end of file + diff --git a/packages/editor/webpack.playground.js b/packages/editor/webpack.playground.js index 84d74cfc..70830fef 100644 --- a/packages/editor/webpack.playground.js +++ b/packages/editor/webpack.playground.js @@ -8,13 +8,12 @@ const { merge } = require('webpack-merge'); const playgroundConfig = { mode: 'development', entry: { - "editor.bundle": path.join(__dirname, 'src', 'index.tsx'), viewmode: path.resolve(__dirname, './test/playground/map-render/js/viewmode'), embedded: path.resolve(__dirname, './test/playground/map-render/js/embedded'), editor: path.resolve(__dirname, './test/playground/map-render/js/editor'), }, output: { - path: path.resolve(__dirname, 'dist'), + path: path.resolve(__dirname, 'test/playground/dist'), filename: '[name].js', library: { type: 'umd', @@ -24,7 +23,6 @@ const playgroundConfig = { historyApiFallback: true, port: 8081, open: false, - writeToDisk: true, }, module: { rules: [ diff --git a/packages/mindplot/cypress/snapshots/playground.test.js/__diff_output__/layout.diff.png b/packages/mindplot/cypress/snapshots/playground.test.js/__diff_output__/layout.diff.png new file mode 100644 index 00000000..4a2d3236 Binary files /dev/null and b/packages/mindplot/cypress/snapshots/playground.test.js/__diff_output__/layout.diff.png differ diff --git a/packages/mindplot/cypress/snapshots/playground.test.js/viewmode.snap.png b/packages/mindplot/cypress/snapshots/playground.test.js/viewmode.snap.png new file mode 100644 index 00000000..a58c473d Binary files /dev/null and b/packages/mindplot/cypress/snapshots/playground.test.js/viewmode.snap.png differ diff --git a/packages/mindplot/src/components/ActionDispatcher.ts b/packages/mindplot/src/components/ActionDispatcher.ts index 10d42165..3ed55b74 100644 --- a/packages/mindplot/src/components/ActionDispatcher.ts +++ b/packages/mindplot/src/components/ActionDispatcher.ts @@ -34,49 +34,49 @@ abstract class ActionDispatcher extends Events { super(); } - abstract addRelationship(model: RelationshipModel, mindmap: Mindmap); + abstract addRelationship(model: RelationshipModel, mindmap: Mindmap); - abstract addTopics(models: NodeModel[], parentTopicId: any[]); + abstract addTopics(models: NodeModel[], parentTopicId: any[]); - abstract deleteEntities(topicsIds: number[], relIds: number[]); + abstract deleteEntities(topicsIds: number[], relIds: number[]); - abstract dragTopic(topicId: number, position: Point, order: number, parentTopic: Topic); + abstract dragTopic(topicId: number, position: Point, order: number, parentTopic: Topic); - abstract moveTopic(topicId: number, position: any); + abstract moveTopic(topicId: number, position: any); - abstract moveControlPoint(ctrlPoint: this, point: any); + abstract moveControlPoint(ctrlPoint: this, point: any); - abstract changeFontFamilyToTopic(topicIds: number[], fontFamily: string); + abstract changeFontFamilyToTopic(topicIds: number[], fontFamily: string); - abstract changeFontStyleToTopic(topicsIds: number[]); + abstract changeFontStyleToTopic(topicsIds: number[]); - abstract changeFontColorToTopic(topicsIds: number[], color: string); + abstract changeFontColorToTopic(topicsIds: number[], color: string); - abstract changeFontSizeToTopic(topicsIds: number[], size: number); + abstract changeFontSizeToTopic(topicsIds: number[], size: number); - abstract changeBackgroundColorToTopic(topicsIds: number[], color: string); + abstract changeBackgroundColorToTopic(topicsIds: number[], color: string); - abstract changeBorderColorToTopic(topicsIds: number[], color: string); + abstract changeBorderColorToTopic(topicsIds: number[], color: string); - abstract changeShapeTypeToTopic(topicsIds: number[], shapeType: string); + abstract changeShapeTypeToTopic(topicsIds: number[], shapeType: string); - abstract changeFontWeightToTopic(topicsIds: number[]); + abstract changeFontWeightToTopic(topicsIds: number[]); - abstract changeTextToTopic(topicsIds: number[], text: string); + abstract changeTextToTopic(topicsIds: number[], text: string); - abstract shrinkBranch(topicsIds: number[], collapse: boolean); + abstract shrinkBranch(topicsIds: number[], collapse: boolean); - abstract addFeatureToTopic(topicId: number, type: string, attributes: object); + abstract addFeatureToTopic(topicId: number, type: string, attributes: object); - abstract changeFeatureToTopic(topicId: number, featureId: any, attributes: object); + abstract changeFeatureToTopic(topicId: number, featureId: any, attributes: object); - abstract removeFeatureFromTopic(topicId: number, featureId: number); + abstract removeFeatureFromTopic(topicId: number, featureId: number); - static setInstance = (dispatcher: ActionDispatcher) => { - this._instance = dispatcher; - }; + static setInstance = (dispatcher: ActionDispatcher) => { + this._instance = dispatcher; + }; - static getInstance = (): ActionDispatcher => ActionDispatcher._instance; + static getInstance = (): ActionDispatcher => ActionDispatcher._instance; } export default ActionDispatcher; diff --git a/packages/mindplot/src/components/ControlPoint.js b/packages/mindplot/src/components/ControlPoint.js index 3f28394f..9dfab9a3 100644 --- a/packages/mindplot/src/components/ControlPoint.js +++ b/packages/mindplot/src/components/ControlPoint.js @@ -23,25 +23,25 @@ import ActionDispatcher from './ActionDispatcher'; class ControlPoint { constructor() { - const control1 = new Elipse({ + this.control1 = new Elipse({ width: 6, height: 6, stroke: '1 solid #6589de', fillColor: 'gray', visibility: false, }); - control1.setCursor('pointer'); + this.control1.setCursor('pointer'); - const control2 = new Elipse({ + this.control2 = new Elipse({ width: 6, height: 6, stroke: '1 solid #6589de', fillColor: 'gray', visibility: false, }); - control2.setCursor('pointer'); + this.control2.setCursor('pointer'); - this._controlPointsController = [control1, control2]; + this._controlPointsController = [this.control1, this.control2]; this._controlLines = [ new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }), new Line({ strokeColor: '#6589de', strokeWidth: 1, opacity: 0.3 }), @@ -84,6 +84,11 @@ class ControlPoint { this._endPoint[1] = { ...this._line.getLine().getTo() }; } + setControlPointTestId(ctrlPoint1, ctrlPoint2) { + this.control1.setTestId(ctrlPoint1); + this.control2.setTestId(ctrlPoint2); + } + redraw() { if ($defined(this._line)) this._createControlPoint(); } diff --git a/packages/mindplot/src/components/Relationship.ts b/packages/mindplot/src/components/Relationship.ts index 59f073f8..a7d62a0e 100644 --- a/packages/mindplot/src/components/Relationship.ts +++ b/packages/mindplot/src/components/Relationship.ts @@ -56,6 +56,7 @@ class Relationship extends ConnectionLine { this._line2d.setCursor('pointer'); this._line2d.setStroke(1, 'solid', strokeColor); this._line2d.setDashed(4, 2); + this._line2d.setTestId(`${model.getFromNode()}-${model.getToNode()}-relationship`); this._focusShape = this._createLine(this.getLineType(), ConnectionLine.SIMPLE_CURVED); this._focusShape.setStroke(2, 'solid', '#3f96ff'); @@ -83,6 +84,12 @@ class Relationship extends ConnectionLine { if ($defined(model.getSrcCtrlPoint())) { const srcPoint = { ...model.getSrcCtrlPoint() }; this.setSrcControlPoint(srcPoint); + + // Set test id in control point + this._controlPointsController.setControlPointTestId( + `control-${Math.abs(srcPoint.x)}`, + `control-${Math.abs(srcPoint.y)}`, + ); } if ($defined(model.getDestCtrlPoint())) { const destPoint = { ...model.getDestCtrlPoint() }; diff --git a/packages/mindplot/src/components/RelationshipPivot.ts b/packages/mindplot/src/components/RelationshipPivot.ts index 29e4bed6..7c1cbaa7 100644 --- a/packages/mindplot/src/components/RelationshipPivot.ts +++ b/packages/mindplot/src/components/RelationshipPivot.ts @@ -103,9 +103,9 @@ class RelationshipPivot { const model = this._designer.getModel(); const topics = model.getTopics(); - topics.forEach(((topic) => { + topics.forEach((topic) => { topic.removeEvent('ontfocus', this._onTopicClick); - })); + }); workspace.removeChild(this._pivot); workspace.removeChild(this._startArrow); @@ -166,9 +166,7 @@ class RelationshipPivot { // Avoid circular connections ... if (targetTopic.getId() !== sourceTopic.getId()) { const relModel = mindmap.createRelationship(targetTopic.getId(), sourceTopic.getId()); - this._designer - .getActionDispatcher() - .addRelationship(relModel); + this._designer.getActionDispatcher().addRelationship(relModel); } this.dispose(); } diff --git a/packages/mindplot/src/components/Topic.js b/packages/mindplot/src/components/Topic.js index 7bef2423..3a1abe7e 100644 --- a/packages/mindplot/src/components/Topic.js +++ b/packages/mindplot/src/components/Topic.js @@ -16,16 +16,9 @@ * limitations under the License. */ import $ from 'jquery'; +import { $assert, $defined } from '@wisemapping/core-js'; import { - $assert, - $defined, -} from '@wisemapping/core-js'; -import { - Rect, - Image, - Line, - Text, - Group, + Rect, Image, Line, Text, Group, } from '@wisemapping/web2d'; import NodeGraph from './NodeGraph'; @@ -41,22 +34,18 @@ import NoteEditor from './widget/NoteEditor'; import ActionDispatcher from './ActionDispatcher'; import LinkEditor from './widget/LinkEditor'; -import TopicEventDispatcher, { - TopicEvent, -} from './TopicEventDispatcher'; -import { - TopicShape, -} from './model/INodeModel'; +import TopicEventDispatcher, { TopicEvent } from './TopicEventDispatcher'; +import { TopicShape } from './model/INodeModel'; const ICON_SCALING_FACTOR = 1.3; class Topic extends NodeGraph { /** - * @extends mindplot.NodeGraph - * @constructs - * @param model - * @param options - */ + * @extends mindplot.NodeGraph + * @constructs + * @param model + * @param options + */ constructor(model, options) { super(model, options); this._children = []; @@ -92,9 +81,9 @@ class Topic extends NodeGraph { } /** - * @param {String} type the topic shape type - * @see {@link mindplot.model.INodeModel} - */ + * @param {String} type the topic shape type + * @see {@link mindplot.model.INodeModel} + */ setShapeType(type) { this._setShapeType(type, true); } @@ -331,10 +320,10 @@ class Topic extends NodeGraph { } /** - * assigns the new feature model to the topic's node model and adds the respective icon - * @param {mindplot.model.FeatureModel} featureModel - * @return {mindplot.Icon} the icon corresponding to the feature model - */ + * assigns the new feature model to the topic's node model and adds the respective icon + * @param {mindplot.model.FeatureModel} featureModel + * @return {mindplot.Icon} the icon corresponding to the feature model + */ addFeature(featureModel) { const iconGroup = this.getOrBuildIconGroup(); this.closeEditors(); @@ -648,6 +637,9 @@ class Topic extends NodeGraph { // Register listeners ... this._registerDefaultListenersToElement(group, this); + + // Set test id + group.setTestId(model.getId()); } _registerDefaultListenersToElement(elem, topic) { @@ -852,8 +844,8 @@ class Topic extends NodeGraph { } /** - * Point: references the center of the rect shape.!!! - */ + * Point: references the center of the rect shape.!!! + */ setPosition(point) { $assert(point, 'position can not be null'); // allowed param reassign to avoid risks of existing code relying in this side-effect @@ -890,8 +882,9 @@ class Topic extends NodeGraph { getIncomingLines() { const children = this.getChildren(); - return children.filter((node) => $defined(node.getOutgoingLine())) - .map(((node) => node.getOutgoingLine())); + return children + .filter((node) => $defined(node.getOutgoingLine())) + .map((node) => node.getOutgoingLine()); } /** */ @@ -986,8 +979,8 @@ class Topic extends NodeGraph { const sourceParent = sourceTopic.getModel().getParent(); relationship.setVisibility( value - && (targetParent == null || !targetParent.areChildrenShrunken()) - && (sourceParent == null || !sourceParent.areChildrenShrunken()), + && (targetParent == null || !targetParent.areChildrenShrunken()) + && (sourceParent == null || !sourceParent.areChildrenShrunken()), ); }); } @@ -1055,8 +1048,7 @@ class Topic extends NodeGraph { }; const oldSize = this.getSize(); - const hasSizeChanged = oldSize.width !== roundedSize.width - || oldSize.height !== roundedSize.height; + const hasSizeChanged = oldSize.width !== roundedSize.width || oldSize.height !== roundedSize.height; if (hasSizeChanged || force) { NodeGraph.prototype.setSize.call(this, roundedSize); @@ -1329,9 +1321,9 @@ class Topic extends NodeGraph { } /** - * @param childTopic - * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself - */ + * @param childTopic + * @return {Boolean} true if childtopic is a child topic of this topic or the topic itself + */ isChildTopic(childTopic) { let result = this.getId() === childTopic.getId(); if (!result) { diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js index d914f003..f982bf11 100644 --- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js +++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js @@ -34,7 +34,9 @@ class BootstrapDialog extends Options { this.setOptions(options); this.options.onEventData.dialog = this; - this._native = $('
').append('
'); + this._native = $('
').append( + '
', + ); const content = $('
'); const header = this._buildHeader(title); @@ -65,17 +67,31 @@ class BootstrapDialog extends Options { footer = $('
'); } if (this.options.acceptButton) { - this.acceptButton = $(``); + this.acceptButton = $( + ``, + ); footer.append(this.acceptButton); - this.acceptButton.unbind('click').on('click', this.options.onEventData, this.onAcceptClick); + this.acceptButton + .unbind('click') + .on('click', this.options.onEventData, this.onAcceptClick); } if (this.options.removeButton) { - this.removeButton = $(``); + this.removeButton = $( + ``, + ); footer.append(this.removeButton); this.removeButton.on('click', this.options.onEventData, this.onRemoveClick); } if (this.options.cancelButton) { - footer.append(``); + footer.append( + ``, + ); } return footer; } diff --git a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js index df0d4880..daab3b72 100644 --- a/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js +++ b/packages/mindplot/src/components/libraries/bootstrap/BootstrapDialogRequest.js @@ -49,7 +49,10 @@ class BootstrapDialogRequest extends BootstrapDialog { this._native.find('.modal-body').load(url, () => { me.acceptButton.unbind('click').click(() => { - if ($defined(global.submitDialogForm) && typeof (global.submitDialogForm) === 'function') { + if ( + $defined(global.submitDialogForm) + && typeof global.submitDialogForm === 'function' + ) { global.submitDialogForm(); } }); @@ -61,7 +64,7 @@ class BootstrapDialogRequest extends BootstrapDialog { } onDialogShown() { - if ($defined(global.onDialogShown) && typeof (global.onDialogShown) === 'function') { + if ($defined(global.onDialogShown) && typeof global.onDialogShown === 'function') { global.onDialogShown(); } } diff --git a/packages/mindplot/src/components/persistence/XMLSerializerPela.ts b/packages/mindplot/src/components/persistence/XMLSerializerPela.ts index 2458b304..01dfc796 100644 --- a/packages/mindplot/src/components/persistence/XMLSerializerPela.ts +++ b/packages/mindplot/src/components/persistence/XMLSerializerPela.ts @@ -61,7 +61,7 @@ class XMLSerializerPela implements XMLMindmapSerializer { relationships.forEach((relationship) => { if ( mindmap.findNodeById(relationship.getFromNode()) !== null - && mindmap.findNodeById(relationship.getToNode()) !== null + && mindmap.findNodeById(relationship.getToNode()) !== null ) { // Isolated relationships are not persisted .... const relationDom = XMLSerializerPela._relationshipToXML(document, relationship); @@ -83,7 +83,9 @@ class XMLSerializerPela implements XMLMindmapSerializer { parentTopic.setAttribute('position', `${pos.x},${pos.y}`); const order = topic.getOrder(); - if (typeof order === 'number' && Number.isFinite(order)) { parentTopic.setAttribute('order', order.toString()); } + if (typeof order === 'number' && Number.isFinite(order)) { + parentTopic.setAttribute('order', order.toString()); + } } const text = topic.getText(); @@ -99,8 +101,7 @@ class XMLSerializerPela implements XMLMindmapSerializer { const size = topic.getImageSize(); parentTopic.setAttribute( 'image', - `${size.width},${size.height - }:${topic.getImageUrl()}`, + `${size.width},${size.height}:${topic.getImageUrl()}`, ); } } @@ -132,10 +133,10 @@ class XMLSerializerPela implements XMLMindmapSerializer { if ( $defined(fontFamily) - || $defined(fontSize) - || $defined(fontColor) - || $defined(fontWeight) - || $defined(fontStyle) + || $defined(fontSize) + || $defined(fontColor) + || $defined(fontWeight) + || $defined(fontStyle) ) { parentTopic.setAttribute('fontStyle', font); } @@ -226,13 +227,13 @@ class XMLSerializerPela implements XMLMindmapSerializer { } /** - * @param dom - * @param mapId - * @throws will throw an error if dom is null or undefined - * @throws will throw an error if mapId is null or undefined - * @throws will throw an error if the document element is not consistent with a wisemap's root - * element - */ + * @param dom + * @param mapId + * @throws will throw an error if dom is null or undefined + * @throws will throw an error if mapId is null or undefined + * @throws will throw an error if the document element is not consistent with a wisemap's root + * element + */ loadFromDom(dom: Document, mapId: string) { $assert(dom, 'dom can not be null'); $assert(mapId, 'mapId can not be null'); @@ -253,7 +254,9 @@ class XMLSerializerPela implements XMLMindmapSerializer { // Add all the topics nodes ... const childNodes = Array.from(rootElem.childNodes); const topicsNodes = childNodes - .filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'topic')) + .filter( + (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'topic', + ) .map((c) => c as Element); topicsNodes.forEach((child) => { const topic = this._deserializeNode(child, mindmap); @@ -262,7 +265,9 @@ class XMLSerializerPela implements XMLMindmapSerializer { // Then all relationshops, they are connected to topics ... const relationshipsNodes = childNodes - .filter((child: ChildNode) => (child.nodeType === 1 && (child as Element).tagName === 'relationship')) + .filter( + (child: ChildNode) => child.nodeType === 1 && (child as Element).tagName === 'relationship', + ) .map((c) => c as Element); relationshipsNodes.forEach((child) => { try { @@ -280,9 +285,7 @@ class XMLSerializerPela implements XMLMindmapSerializer { } _deserializeNode(domElem: Element, mindmap: Mindmap) { - const type = domElem.getAttribute('central') != null - ? 'CentralTopic' - : 'MainTopic'; + const type = domElem.getAttribute('central') != null ? 'CentralTopic' : 'MainTopic'; // Load attributes... let id: number | null = null; @@ -480,16 +483,16 @@ class XMLSerializerPela implements XMLMindmapSerializer { } /** - * This method ensures that the output String has only - * valid XML unicode characters as specified by the - * XML 1.0 standard. For reference, please see - * the - * standard. This method will return an empty - * String if the input is null or empty. - * - * @param in The String whose non-valid characters we want to remove. - * @return The in String, stripped of non-valid characters. - */ + * This method ensures that the output String has only + * valid XML unicode characters as specified by the + * XML 1.0 standard. For reference, please see + * the + * standard. This method will return an empty + * String if the input is null or empty. + * + * @param in The String whose non-valid characters we want to remove. + * @return The in String, stripped of non-valid characters. + */ // eslint-disable-next-line class-methods-use-this rmXmlInv(str) { if (str == null || str === undefined) return null; @@ -499,11 +502,11 @@ class XMLSerializerPela implements XMLMindmapSerializer { const c = str.charCodeAt(i); if ( c === 0x9 - || c === 0xa - || c === 0xd - || (c >= 0x20 && c <= 0xd7ff) - || (c >= 0xe000 && c <= 0xfffd) - || (c >= 0x10000 && c <= 0x10ffff) + || c === 0xa + || c === 0xd + || (c >= 0x20 && c <= 0xd7ff) + || (c >= 0xe000 && c <= 0xfffd) + || (c >= 0x10000 && c <= 0x10ffff) ) { result += str.charAt(i); } diff --git a/packages/mindplot/src/components/widget/ColorPalettePanel.js b/packages/mindplot/src/components/widget/ColorPalettePanel.js index 83c604d9..3a04b9de 100644 --- a/packages/mindplot/src/components/widget/ColorPalettePanel.js +++ b/packages/mindplot/src/components/widget/ColorPalettePanel.js @@ -21,11 +21,11 @@ import ToolbarPaneItem from './ToolbarPaneItem'; import { buildHtml, css } from './ColorPaletteHtml'; // rgbToHex implementation from https://stackoverflow.com/a/3627747/58128 -export const rgb2hex = (rgb) => `#${ - rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) - .slice(1) - .map((n) => parseInt(n, 10) - .toString(16).padStart(2, '0')).join('')}`; +export const rgb2hex = (rgb) => `#${rgb + .match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) + .slice(1) + .map((n) => parseInt(n, 10).toString(16).padStart(2, '0')) + .join('')}`; class ColorPalettePanel extends ToolbarPaneItem { constructor(buttonId, model, baseUrl) { @@ -38,10 +38,7 @@ class ColorPalettePanel extends ToolbarPaneItem { _load() { if (!ColorPalettePanel._panelContent) { // Load all the CSS styles ... - $('