mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 20:54:07 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix canvas selection breaking after interacting with node actions (#7466)

Browse source 
Sometimes canvas selection stops working after users interact with node
action buttons (for example if node is moved by dragging one of the
buttons)
NOTE: Ticket number in the branch name is wrong, this fixes ADO-1226
This commit is contained in:
Milorad FIlipović 2023-10-20 09:26:40 +02:00 committed by GitHub
parent b50376cf52
commit bc473655fb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 37 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
cypress/e2e/12-canvas-actions.cy.ts
View file

@ -198,4 +198,30 @@ describe('Canvas Actions', () => {
cy.get('body').type('{shift}', { release: false }).type('{leftArrow}');
WorkflowPage.getters.selectedNodes().should('have.length', 2);
});
it('should not break lasso selection when dragging node action buttons', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.getters
.canvasNodes()
.last()
.findChildByTestId('disable-node-button').as('disableNodeButton');
cy.drag('@disableNodeButton', [200, 200]);
WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
});
it('should not break lasso selection with multiple clicks on node action buttons', () => {
WorkflowPage.actions.addNodeToCanvas(MANUAL_TRIGGER_NODE_NAME);
WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
WorkflowPage.getters
.canvasNodes()
.last().as('lastNode');
cy.get('@lastNode').findChildByTestId('disable-node-button').as('disableNodeButton');
for (let i = 0; i < 20; i++) {
cy.get('@lastNode').realHover();
cy.get('@disableNodeButton').should('be.visible');
cy.get('@disableNodeButton').realTouch();
cy.getByTestId('execute-workflow-button').realHover();
WorkflowPage.actions.testLassoSelection([100, 100], [200, 200]);
}
});
});

7
cypress/pages/workflow.ts
View file

@ -327,5 +327,12 @@ export class WorkflowPage extends BasePage {
shouldHaveWorkflowName: (name: string) => {
this.getters.workflowNameInputContainer().invoke('attr', 'title').should('include', name);
},
testLassoSelection: (from: [number, number], to: [number, number]) => {
cy.getByTestId('node-view-wrapper').trigger('mousedown', from[0], from[1], { force: true });
cy.getByTestId('node-view-wrapper').trigger('mousemove', to[0], to[1], { force: true });
cy.get('#select-box').should('be.visible');
cy.getByTestId('node-view-wrapper').trigger('mouseup', to[0], to[1], { force: true });
cy.get('#select-box').should('not.be.visible');
},
};
}

3
packages/editor-ui/src/stores/canvas.store.ts
View file

@ -271,6 +271,9 @@ export const useCanvasStore = defineStore('canvas', () => {
if (moveNodes.length > 1) {
historyStore.stopRecordingUndo();
}
if (uiStore.isActionActive('dragActive')) {
uiStore.removeActiveAction('dragActive');
}
}
},
filter: '.node-description, .node-description .node-name, .node-description .node-subtitle',

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

@ -10,6 +10,7 @@
<div
class="node-view-wrapper"
:class="workflowClasses"
data-test-id="node-view-wrapper"
@touchstart="mouseDown"
@touchend="mouseUp"
@touchmove="mouseMoveNodeWorkflow"