vue jsplumb editor

vue-jsplumb-editor

在線預覽

功能點

菜單節點區域

• 從菜單中拖動一個節點到主設計區域，可放置該節點
• 按節點類型組織節點

主設計區域

• 操作可撤銷
• 背景的平移和縮放
• 可接收從菜單中拖入的節點
• 拖入的節點會根據當前的節點信息生成對應的端點（用於拖出連線）
• 生成的端點分兩種類型：源端點和目標端點，應在樣式上作區分
• 源端點放置在節點bottom位置，目標節點防止在節點的top位置（便於從上往下拖出連接線）
• 所有節點可通過拖拽移動位置
• 所有節點和連接線可刪除
• 所有節點和端點在鼠標懸浮需要有tooltip框來提示節點或端點信息
• 所有節點、端點和連接線在鼠標懸浮時需要設置不同的樣式
• 所有節點和連接線可被選中
• 操作實時保存數據
• 導入數據生成流程圖

節點配置區域

• 在設計區域選中節點時，節點配置區域會顯示一個對應的節點配置面板
• 不同節點應擁有對應的節點配置面板
• 節點面板用來展示和配置節點屬性

右鍵菜單功能

• 節點：
  • 複製
  • 刪除
  • 查看數據
  • 重命名
• 連接線：
  • 刪除
• 背景：
  • 粘貼

安裝依賴

 npm install

開發模式

 npm run serve

編譯生產代碼

 npm run build