cytoscape.js view utilities Download - cytoscape.js view utilities Sumber Code Unduh

cytoscape.js view utilities

Sumber daya lainnya

v6.0.0

Unduh

KUSTENTIF-VIEW-UTITILI

Keterangan

Ekstensi Cytoscape.js ini menyediakan utilitas tampilan yang lain -lain seperti Hide/Show, Sorotan, Zoom Marquee dan Pemilihan Formulir Gratis, didistribusikan di bawah lisensi MIT.

Harap kutip makalah berikut saat menggunakan ekstensi ini:

U. Degrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi, dan MC Siper, "Metode yang efisien dan perpustakaan yang dapat disesuaikan untuk mengelola kompleksitas jaringan besar", Plos One, 13 (5): E0197238, 2018.

Demo

Klik di sini (tidak dibatalkan) atau di sini (tidak dapat diduga) untuk demo

API

var instance = cy.viewUtilities(options)
Opsi @param - Jika tidak disediakan, opsi default akan digunakan. Lihat bagian di bawah ini untuk opsi default. highlightStyles adalah array objek. Objek harus mengikuti format {node: ..., edge: ...} . selectStyles akan digunakan jika Anda ingin mengganti gaya yang disorot saat objek dipilih. lassoStyle akan digunakan untuk mengesampingkan gaya garis laso.
misalnya

 var options = {
  highlightStyles : [
    { node : { 'border-color' : '#0b9bcd' ,  'border-width' : 3 } , edge : { 'line-color' : '#0b9bcd' , 'source-arrow-color' : '#0b9bcd' , 'target-arrow-color' : '#0b9bcd' , 'width' : 3 } } ,
    { node : { 'border-color' : '#04f06a' ,  'border-width' : 3 } , edge : { 'line-color' : '#04f06a' , 'source-arrow-color' : '#04f06a' , 'target-arrow-color' : '#04f06a' , 'width' : 3 } } ,
  ] ,
  selectStyles : { 
    node : { 'border-color' : 'black' , 'border-width' : 3 , 'background-color' : 'lightgrey' } , 
    edge : { 'line-color' : 'black' , 'source-arrow-color' : 'black' , 'target-arrow-color' : 'black' , 'width' : 3 } 
  } ,
  setVisibilityOnHide : false , // whether to set visibility on hide/show
  setDisplayOnHide : true , // whether to set display on hide/show
  zoomAnimationDuration : 1500 , // default duration for zoom animation speed
  neighbor : function ( ele ) {
      return ele . closedNeighborhood ( ) ;
  } ,
  neighborSelectTime : 500 ,
  lassoStyle : { lineColor : "#d67614" , lineWidth : 3 } // default lasso line color, dark orange, and default line width
  htmlElem4marqueeZoom : '' , // should be string like `#cy` or `.cy`. `#cy` means get element with the ID 'cy'. `.cy` means the element with class 'cy' 
  marqueeZoomCursor : 'se-resize' , // the cursor that should be used when marquee zoom is enabled. It can also be an image if a URL to an image is given
  isShowEdgesBetweenVisibleNodes : true // When showing elements, show edges if both source and target nodes become visible
} ;
var api = cy . viewUtilities ( options ) ;

instance.highlight(eles, idx = 0)
@param eles - koleksi cytoscape.js (koleksi elemen) yang akan disorot
@param IDX - Indeks gaya cytoscape.js. Jika Anda tidak menentukannya, gaya pertama akan digunakan.
Terapkan kelas gaya ke elemen yang ditentukan. Kelas gaya ditentukan dengan indeksnya

instance.highlightNeighbors(eles, idx = 0)
@param eles - koleksi cytoscape.js (koleksi elemen) yang akan disorot
@param IDX - Indeks gaya cytoscape.js. Jika Anda tidak menentukannya, gaya pertama akan digunakan.
Sorotan lingkungan Elements (berdasarkan opsi warna). Mirip dengan fungsi highlight, baik elemen dan opsi sorot dapat dikirim dalam argumen. Jika hanya elemen yang dikirim, maka warna sorotan default digunakan.

instance.removeHighlights(eles)
@param eles - elemen untuk menghapus sorotan
Hapus sorotan dari eles.

instance.hide(eles)
@param eles - elemen untuk disembunyikan
Persembunyian yang diberikan eles.

instance.show(eles)
@param eles - elemen untuk ditampilkan
Tidak ada yang diberikan eles.

instance.showHiddenNeighbors(eles)
@param eles - elemen untuk menunjukkan tetangga tersembunyi
Tidak ada neigbors tersembunyi dari eles yang diberikan. Perhatikan bahwa node majemuk tidak dihormati seperti yang diharapkan.

instance.zoomToSelected(eles)
@param eles - elemen untuk memperbesar
Zoom ke eles terpilih.

instance.enableMarqueeZoom(callback)
@param callback - dipanggil di akhir fungsi
Mengaktifkan zoom tenda. Secara otomatis dipanggil saat tombol ctrl+shift turun.

instance.disableMarqueeZoom()
Menonaktifkan zoom tenda. Secara otomatis dipanggil saat tombol ctrl+shift naik.

instance.enableLassoMode(callback)
@param callback - dipanggil di akhir fungsi
Mengaktifkan alat laso.

instance.disableLassoMode()
Menonaktifkan alat laso.

instance.getHighlightStyles()
Mengembalikan highlightStyles saat ini yang merupakan array objek seperti di bawah ini

 [
  { node: { 'border-color': '#0b9bcd',  'border-width': 3 }, edge: {'line-color': '#0b9bcd', 'source-arrow-color': '#0b9bcd', 'target-arrow-color': '#0b9bcd', 'width' : 3} },
  { node: { 'border-color': '#bf0603',  'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
],

instance.getAllHighlightClasses()
Mengembalikan semua kelas gaya cytoscape.js yang saat ini digunakan

instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - indeks gaya yang akan diubah
@param nodestyle - gaya cytoscape untuk node
@param edgestyle - gaya cytoscape untuk tepi
Mengubah gaya yang ditentukan dengan idx .

instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - gaya cytoscape untuk node
@param edgestyle - gaya cytoscape untuk tepi
Menambahkan gaya baru ke array highlightStyles .

instance.removeHighlightStyle(styleIdx): void
@param styleIdx - indeks gaya untuk menghapus (berbasis 0)
Menghapus gaya dari array highlightStyles .

instance.changeLassoStyle(styleObj)
@param styleobj - objek gaya garis laso dengan linecolor dan/atau properti linewidth

Opsi default

 var options = {
  highlightStyles : [ ] ,
  selectStyles : { } ,
  setVisibilityOnHide : false , // whether to set visibility on hide/show
  setDisplayOnHide : true , // whether to set display on hide/show
  zoomAnimationDuration : 1500 , // default duration for zoom animation speed
  neighbor : function ( ele ) { // return desired neighbors of tapheld element
    return false ;
  } ,
  neighborSelectTime : 500 , // ms, time to taphold to select desired neighbors in addition to the taphold event detect time by cytoscape
  lassoStyle : { lineColor : "#d67614" , lineWidth : 3 } // default lasso line color, dark orange, and default line width
} ;

Tindakan Undo-Redo default

ur.do("highlight", args)

ur.do("highlightNeighbors", args) ur.do("highlightNeighbours", args)

ur.do("removeHighlights")

ur.do("hide", eles)

ur.do("show", eles)

Dependensi

Cytoscape.js ^3.2.0
Geometric.js ^2.2.3
cytoscape-lundo-redo.js ^1.0.8 (opsional)

Instruksi penggunaan

Unduh Perpustakaan:

via NPM: npm install cytoscape-view-utilities ,
via Bower: bower install cytoscape-view-utilities , atau
melalui unduhan langsung di repositori (mungkin dari tag).

require() perpustakaan yang sesuai untuk proyek Anda:

Commonjs:

 var cytoscape = require ( 'cytoscape' ) ;
var viewUtilities = require ( 'cytoscape-view-utilities' ) ;

viewUtilities ( cytoscape ) ; // register extension

AMD:

 require ( [ 'cytoscape' , 'cytoscape-view-utilities' ] , function ( cytoscape , view - utilities ) {
    view - utilities ( cytoscape ) ; // register extension
} ) ;

HTML/JS biasa memiliki ekstensi yang terdaftar untuk Anda secara otomatis, karena tidak require() diperlukan.

Bangun target

npm run build : Build ./src/** Into cytoscape-view-utilities.js di lingkungan produksi dan meminimalkan file.
npm run build:dev : Build ./src/** Into cytoscape-view-utilities.js di lingkungan pengembangan tanpa meminimalkan file.

Instruksi Penerbitan

Proyek ini diatur untuk secara otomatis diterbitkan ke NPM dan Bower. Untuk menerbitkan:

Bangun Ekstensi: npm run build
Commit the build: git commit -am "Build for release"
Bump Nomor Versi dan Tag: npm version major|minor|patch
Dorong ke Asal: git push && git push --tags
Publikasikan ke NPM: npm publish .
Jika menerbitkan ke Bower untuk pertama kalinya, Anda harus menjalankan bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git