vue jsplumb editor

vue-jsplumb-editor

Online preview

Functional Points

Menu node area

• Drag a node from the menu to the main design area to place the node
• Organize nodes by node type

Main design area

• Operation can be revoked
• Pan and zoom of background
• Can receive nodes dragged in from the menu
• The dragged-in node will generate the corresponding endpoint based on the current node information (used to drag out the connection)
• The generated endpoints are divided into two types: source endpoint and target endpoint, which should be distinguished in style.
• The source endpoint is placed in the node bottom position, and the target node prevents the node from being in the top position (to facilitates dragging out the connection line from top to bottom)
• All nodes can be moved by dragging and moving
• All nodes and connection lines can be deleted
• All nodes and endpoints need to have a tooltip box to prompt the node or endpoint information in the mouse
• All nodes, endpoints and connection lines need to be set different styles when floating the mouse
• All nodes and connection lines can be selected
• Operation saves data in real time
• Import data generation flow chart

Node configuration area

• When selecting a node in the design area, the node configuration area displays a corresponding node configuration panel
• Different nodes should have corresponding node configuration panels
• Node panel is used to display and configure node properties

Right-click menu function

• node:
  • copy
  • delete
  • View data
  • Rename
• Connection cable:
  • delete
• background:
  • Paste

Installation dependencies

 npm install

Development Model

 npm run serve

Compile production code

 npm run build