dify
dify copied to clipboard
feat: add workflow editor shortcuts (#3382)
Description
This PR brings shortcuts to the workflow editor as described in #3382. The following shortcuts are introduced:
| Keyboard Shortcut | Function | Hint |
|---|---|---|
Delete |
Deletes the selected edge | Hint: This was previously the backspace key, but I found that delete is more intuitive. We should note this in the release. |
Delete |
Deletes the selected node | |
Ctrl + C |
Copies the selected node | |
Ctrl + X |
Cuts the selected node | |
Ctrl + V |
Pastes a copied or cut node | |
Ctrl + Alt + D |
Clones the selected node |
Type of Change
- [x] New feature (non-breaking change which adds functionality)
- [ ] This change requires a documentation update, included: Dify Document
How Has This Been Tested?
I tested it manually in the development mode with the following steps:
- [ ] Create Workflow or Chatflow
- [ ] Add a Classifier node, define two classes and change the model
- [ ] Assign two End/Answer nodes to the Classifier node
- [ ] If you added Answer node, define a random word as answer so that we can publish the flow without issues
- [ ] Select the Classifier node and press Ctrl + C
- [ ] Press Ctrl + V
- [ ] The Node should be copied to the workflow, the name should have the number 2 at the end
- [ ] The copied node should be selected
- [ ] The copied node should show the plus icon for the ingoing and outgoing edges
- [ ] The copied node should have the same classes and the same llm configured
- [ ] The copied node should not connected to another node (no edges have beend added)
- [ ] Press Ctrl + V again
- [ ] Another node should be copied at the same place as the previously copied node
- [ ] It should have a 3 at the end
- [ ] Select the 3rd Classifier node and press Delete
- [ ] The 3rd Classifier node should be deleted
- [ ] Select the 2nd Classifier node and press Delete
- [ ] The 2nd Classifier node should be deleted
- [ ] Save the workflow, it should work without issues
- [ ] Select the Classifier node and press Ctrl + X
- [ ] The classifier node should have been deleted, as well as the edges
- [ ] Add a new Classifier node and connect all edges again
- [ ] Save the workflow, it should work without issues
- [ ] Reload the page while the workflow editor is open
- [ ] Select the Clasifier node and press Delete
- [ ] Reload the workflow
- [ ] The node should still be deleted
- [ ] Add a new Classifier node and connect the edges
- [ ] Select the Classifier node and press Ctrl + Shift + D
- [ ] The Classifier node should have been duplicated
- [ ] Reload the page the workflow editor is open
- [ ] The duplicated Classifier node should still be there
- [ ] Select the duplicated node and press Delete
- [ ] Publish the workflow, it should work without issues
- [ ] Select the Classifier node
- [ ] Press Ctrl + C and Ctrl + V
- [ ] The Classifier node should have been duplicated
- [ ] Reload the page the workflow editor is open
- [ ] The duplicated Classifier node shuld still be there
- [ ] Click on the Dropdown-Button (top right) to publish the flow
- [ ] Click on the white button to restore the flow
- [ ] A preview should be opened where the duplicated Classifier node is not visible
- [ ] Restore to this version
- [ ] The duplicated Classifier node should no longer exist
Suggested Checklist:
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I ran
dev/reformat(backend) andcd web && npx lint-staged(frontend) to appease the lint gods - [ ]
optionalI have made corresponding changes to the documentation - [ ]
optionalI have added tests that prove my fix is effective or that my feature works - [ ]
optionalNew and existing unit tests pass locally with my changes