vue jsplumb editor

Vue-jsplumb-editor

Pratinjau online

Poin fungsional

Area Node Menu

• Seret node dari menu ke area desain utama untuk menempatkan node
• Atur node berdasarkan jenis simpul

Area Desain Utama

• Operasi dapat dicabut
• Pan dan Zoom of Background
• Dapat menerima node yang diseret dari menu
• Node yang diseret akan menghasilkan titik akhir yang sesuai berdasarkan informasi node saat ini (digunakan untuk menyeret koneksi)
• Titik akhir yang dihasilkan dibagi menjadi dua jenis: titik akhir sumber dan titik akhir target, yang harus dibedakan dalam gaya.
• Titik akhir sumber ditempatkan di posisi simpul bawah, dan simpul target mencegah simpul berada di posisi atas (untuk memfasilitasi menyeret keluar saluran koneksi dari atas ke bawah)
• Semua node dapat dipindahkan dengan menyeret dan bergerak
• Semua node dan garis koneksi dapat dihapus
• Semua node dan titik akhir harus memiliki kotak tooltip untuk meminta informasi node atau titik akhir di mouse
• Semua node, titik akhir, dan garis koneksi harus disetel gaya yang berbeda saat mengambang mouse
• Semua node dan garis koneksi dapat dipilih
• Operasi menyimpan data secara real time
• Impor Bagan Aliran Pembuatan Data

Area konfigurasi simpul

• Saat memilih node di area desain, area konfigurasi node menampilkan panel konfigurasi simpul yang sesuai
• Node yang berbeda harus memiliki panel konfigurasi simpul yang sesuai
• Panel simpul digunakan untuk menampilkan dan mengonfigurasi properti node

Fungsi menu klik kanan

• Node:
  • menyalin
  • menghapus
  • Lihat data
  • Ganti nama
• Kabel koneksi:
  • menghapus
• latar belakang:
  • Pasta

Ketergantungan Instalasi

 npm install

Model Pengembangan

 npm run serve

Menyusun kode produksi

 npm run build