dify icon indicating copy to clipboard operation
dify copied to clipboard

feat: add workflow editor shortcuts (#3382)

Open perzeuss opened this issue 1 year ago • 0 comments

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) and cd web && npx lint-staged(frontend) to appease the lint gods
  • [ ] optional I have made corresponding changes to the documentation
  • [ ] optional I have added tests that prove my fix is effective or that my feature works
  • [ ] optional New and existing unit tests pass locally with my changes

perzeuss avatar Apr 11 '24 19:04 perzeuss