From 4ac4b850dd7187e4e4ef50bbe442ebf273e51eb9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Wed, 2 Aug 2023 12:48:55 +0200 Subject: [PATCH] fix(editor): Fix redo when adding node on connection (#6833) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(editor): Fix redo when adding node on connection * ✅ Adding tests for pushed nodes * ✔️ Updating drag command for dragging nodes on the canvas * 👌 Handling drag end with a command option --- cypress/e2e/10-undo-redo.cy.ts | 17 +++++++++++++++-- cypress/support/commands.ts | 9 +++++++-- packages/editor-ui/src/views/NodeView.vue | 8 ++++---- 3 files changed, 26 insertions(+), 8 deletions(-) diff --git a/cypress/e2e/10-undo-redo.cy.ts b/cypress/e2e/10-undo-redo.cy.ts index 3a65beedb2..cf5689ecab 100644 --- a/cypress/e2e/10-undo-redo.cy.ts +++ b/cypress/e2e/10-undo-redo.cy.ts @@ -41,12 +41,25 @@ describe('Undo/Redo', () => { SET_NODE_NAME, ); WorkflowPage.actions.zoomToFit(); + WorkflowPage.getters + .canvasNodeByName('Code') + .should('have.attr', 'style', 'left: 860px; top: 220px;'); WorkflowPage.actions.hitUndo(); WorkflowPage.getters.canvasNodes().should('have.have.length', 2); WorkflowPage.getters.nodeConnections().should('have.length', 1); + WorkflowPage.actions.hitUndo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 1); + WorkflowPage.getters.nodeConnections().should('have.length', 0); + WorkflowPage.actions.hitRedo(); + WorkflowPage.getters.canvasNodes().should('have.have.length', 2); + WorkflowPage.getters.nodeConnections().should('have.length', 1); WorkflowPage.actions.hitRedo(); WorkflowPage.getters.canvasNodes().should('have.have.length', 3); WorkflowPage.getters.nodeConnections().should('have.length', 2); + // Last node should be added back to original position + WorkflowPage.getters + .canvasNodeByName('Code') + .should('have.attr', 'style', 'left: 860px; top: 220px;'); }); it('should undo/redo deleting node using delete button', () => { @@ -117,7 +130,7 @@ describe('Undo/Redo', () => { it('should undo/redo moving nodes', () => { WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); WorkflowPage.actions.addNodeToCanvas(CODE_NODE_NAME); - cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150]); + cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true }); WorkflowPage.getters .canvasNodeByName('Code') .should('have.attr', 'style', 'left: 740px; top: 320px;'); @@ -271,7 +284,7 @@ describe('Undo/Redo', () => { // Move first one WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', initialPosition); WorkflowPage.getters.canvasNodes().first().click(); - cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150]); + cy.drag('[data-test-id="canvas-node"].jtk-drag-selected', [50, 150], { clickToFinish: true }); WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', movedPosition); // Delete the set node WorkflowPage.getters.canvasNodeByName(SET_NODE_NAME).click().click(); diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 9bf24ace8a..08ee29befa 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -112,7 +112,6 @@ Cypress.Commands.add('drag', (selector, pos, options) => { x: options?.abs ? xDiff : originalLocation.right + xDiff, y: options?.abs ? yDiff : originalLocation.top + yDiff, } - if(options?.realMouse) { element.realMouseDown(); element.realMouseMove(newPosition.x, newPosition.y); @@ -125,7 +124,13 @@ Cypress.Commands.add('drag', (selector, pos, options) => { pageY: newPosition.y, force: true, }); - element.trigger('mouseup', {force: true}); + if (options?.clickToFinish) { + // Click to finish the drag + // For some reason, mouseup isn't working when moving nodes + cy.get('body').click(newPosition.x, newPosition.y); + } else { + element.trigger('mouseup', {force: true}); + } } }); }); diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue index 5ff0b53c5c..cf34b388a6 100644 --- a/packages/editor-ui/src/views/NodeView.vue +++ b/packages/editor-ui/src/views/NodeView.vue @@ -1316,7 +1316,7 @@ export default defineComponent({ const workflow = this.getCurrentWorkflow(); const childNodes = workflow.getChildNodes(sourceNodeName); for (const nodeName of childNodes) { - const node = this.workflowsStore.nodesByName[nodeName] as INodeUi; + const node = this.workflowsStore.nodesByName[nodeName]; const oldPosition = node.position; if (node.position[0] < sourceNode.position[0]) { @@ -1334,11 +1334,11 @@ export default defineComponent({ this.onNodeMoved(node); if ( - (recordHistory && oldPosition[0] !== node.position[0]) || - oldPosition[1] !== node.position[1] + (recordHistory && oldPosition[0] !== updateInformation.properties.position[0]) || + oldPosition[1] !== updateInformation.properties.position[1] ) { this.historyStore.pushCommandToUndo( - new MoveNodeCommand(nodeName, oldPosition, node.position, this), + new MoveNodeCommand(nodeName, oldPosition, updateInformation.properties.position), recordHistory, ); }