mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-21 02:56:40 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix redo when adding node on connection (#6833)

Browse source 
* 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
This commit is contained in:
Milorad FIlipović 2023-08-02 12:48:55 +02:00 committed by GitHub
parent 0ac3d47f26
commit 4ac4b850dd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
cypress/e2e/10-undo-redo.cy.ts
View file

@ -41,12 +41,25 @@ describe('Undo/Redo', () => {
SET_NODE_NAME, SET_NODE_NAME,
); );
WorkflowPage.actions.zoomToFit(); WorkflowPage.actions.zoomToFit();
WorkflowPage.getters
.canvasNodeByName('Code')
.should('have.attr', 'style', 'left: 860px; top: 220px;');
WorkflowPage.actions.hitUndo(); WorkflowPage.actions.hitUndo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 2); WorkflowPage.getters.canvasNodes().should('have.have.length', 2);
WorkflowPage.getters.nodeConnections().should('have.length', 1); 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.actions.hitRedo();
WorkflowPage.getters.canvasNodes().should('have.have.length', 3); WorkflowPage.getters.canvasNodes().should('have.have.length', 3);
WorkflowPage.getters.nodeConnections().should('have.length', 2); 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', () => { it('should undo/redo deleting node using delete button', () => {
@ -117,7 +130,7 @@ describe('Undo/Redo', () => {
it('should undo/redo moving nodes', () => { it('should undo/redo moving nodes', () => {
WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME); WorkflowPage.actions.addNodeToCanvas(SCHEDULE_TRIGGER_NODE_NAME);
WorkflowPage.actions.addNodeToCanvas(CODE_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 WorkflowPage.getters
.canvasNodeByName('Code') .canvasNodeByName('Code')
.should('have.attr', 'style', 'left: 740px; top: 320px;'); .should('have.attr', 'style', 'left: 740px; top: 320px;');
@ -271,7 +284,7 @@ describe('Undo/Redo', () => {
// Move first one // Move first one
WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', initialPosition); WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', initialPosition);
WorkflowPage.getters.canvasNodes().first().click(); 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); WorkflowPage.getters.canvasNodes().first().should('have.attr', 'style', movedPosition);
// Delete the set node // Delete the set node
WorkflowPage.getters.canvasNodeByName(SET_NODE_NAME).click().click(); WorkflowPage.getters.canvasNodeByName(SET_NODE_NAME).click().click();

9
cypress/support/commands.ts
View file

@ -112,7 +112,6 @@ Cypress.Commands.add('drag', (selector, pos, options) => {
x: options?.abs ? xDiff : originalLocation.right + xDiff, x: options?.abs ? xDiff : originalLocation.right + xDiff,
y: options?.abs ? yDiff : originalLocation.top + yDiff, y: options?.abs ? yDiff : originalLocation.top + yDiff,
} }
if(options?.realMouse) { if(options?.realMouse) {
element.realMouseDown(); element.realMouseDown();
element.realMouseMove(newPosition.x, newPosition.y); element.realMouseMove(newPosition.x, newPosition.y);
@ -125,7 +124,13 @@ Cypress.Commands.add('drag', (selector, pos, options) => {
pageY: newPosition.y, pageY: newPosition.y,
force: true, 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});
}
} }
}); });
}); });

8
packages/editor-ui/src/views/NodeView.vue
View file

@ -1316,7 +1316,7 @@ export default defineComponent({
const workflow = this.getCurrentWorkflow(); const workflow = this.getCurrentWorkflow();
const childNodes = workflow.getChildNodes(sourceNodeName); const childNodes = workflow.getChildNodes(sourceNodeName);
for (const nodeName of childNodes) { for (const nodeName of childNodes) {
const node = this.workflowsStore.nodesByName[nodeName] as INodeUi; const node = this.workflowsStore.nodesByName[nodeName];
const oldPosition = node.position; const oldPosition = node.position;
if (node.position[0] < sourceNode.position[0]) { if (node.position[0] < sourceNode.position[0]) {
@ -1334,11 +1334,11 @@ export default defineComponent({
this.onNodeMoved(node); this.onNodeMoved(node);
if ( if (
(recordHistory && oldPosition[0] !== node.position[0]) || (recordHistory && oldPosition[0] !== updateInformation.properties.position[0]) ||
oldPosition[1] !== node.position[1] oldPosition[1] !== updateInformation.properties.position[1]
) { ) {
this.historyStore.pushCommandToUndo( this.historyStore.pushCommandToUndo(
new MoveNodeCommand(nodeName, oldPosition, node.position, this), new MoveNodeCommand(nodeName, oldPosition, updateInformation.properties.position),
recordHistory, recordHistory,
); );
} }