cytoscape.js view utilities
v6.0.0
Esta extensão Cytoscape.js fornece utilidades de visão diversas, como HEDE/SHOW, Highlight, Marquee Zoom e Seleção de Formulários Livres, distribuídos sob a licença do MIT.
Cite o artigo a seguir ao usar esta extensão:
U. Dogusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi e MC Siper, "Métodos eficientes e bibliotecas prontamente personalizáveis para gerenciar a complexidade de grandes redes", PLOS One, 13 (5): E0197238, 2018.
Clique aqui (sem desfazer) ou aqui (sem apaga) para uma demonstração
var instance = cy.viewUtilities(options)
Opções @param - se não for fornecido, as opções padrão serão usadas. Consulte a seção abaixo para obter opções padrão. highlightStyles é uma variedade de objetos. Os objetos devem seguir o formato {node: ..., edge: ...} . selectStyles será usado se você deseja substituir os estilos destacados quando os objetos forem selecionados. lassoStyle será usado para substituir o estilo da linha Lasso.
por exemplo
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 elees - Uma coleção Cytoscape.js (coleção de elementos) a ser destacada
@param idx - o índice do estilo citoscape.js. Se você não especificar, o primeiro estilo será usado.
Aplique a classe de estilo aos elementos especificados. A classe de estilo é especificada com seu índice
instance.highlightNeighbors(eles, idx = 0)
@param elees - Uma coleção Cytoscape.js (coleção de elementos) a ser destacada
@param idx - o índice do estilo citoscape.js. Se você não especificar, o primeiro estilo será usado.
Destaca o bairro dos elementos (com base na opção de cor). Semelhante à função de destaque, os elementos e a opção de destaque podem ser enviados nos argumentos. Se apenas os elementos forem enviados, a cor de destaque padrão será usada.
instance.removeHighlights(eles)
@param elees - elementos para remover os destaques
Remova os destaques do ELES.
instance.hide(eles)
@param elees - elementos para esconder
Esconde os elees.
instance.show(eles)
@param elees - elementos para mostrar
Uncides dados ele.
instance.showHiddenNeighbors(eles)
@param elees - elementos para mostrar vizinhos escondidos
Unhides ocultos neigbors de dado ele. Observe que os nós compostos não são respeitados como esperado.
instance.zoomToSelected(eles)
@param elees - elementos para ampliar
Zoom para ele selecionado.
instance.enableMarqueeZoom(callback)
@param retorno de chamada - é chamado no final da função
Ativa o zoom de lama. É chamado automaticamente quando as teclas de mudança CTRL+estão baixas.
instance.disableMarqueeZoom()
Desative o zoom de letreiro. É chamado automaticamente quando as teclas de mudança CTRL+estão em alta.
instance.enableLassoMode(callback)
@param retorno de chamada - é chamado no final da função
Ativa a ferramenta LASSO.
instance.disableLassoMode()
Desative a ferramenta LASSO.
instance.getHighlightStyles()
Retorna highlightStyles atual, que é uma variedade de objetos como abaixo
[
{ 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()
Retorna todos as classes de estilo Cytoscape.js atualmente usadas
instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - índice do estilo que será alterado
@param nodestyle - estilo citoscape para nós
@param edgestyle - estilo citoscape para bordas
Altera o estilo especificado com idx .
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - estilo citoscape para nós
@param edgestyle - estilo citoscape para bordas
Adiciona um novo estilo à matriz highlightStyles .
instance.removeHighlightStyle(styleIdx): void
@param styleidx - índice do estilo a ser excluído (0 baseado)
Remove o estilo da matriz highlightStyles .
instance.changeLassoStyle(styleObj)
@param styleobj - objeto de estilo de linha de lasso com propriedades LineColor e/ou Linha de Linha
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
} ; ur.do("highlight", args)
ur.do("highlightNeighbors", args) ur.do("highlightNeighbours", args)
ur.do("removeHighlights")
ur.do("hide", eles)
ur.do("show", eles)
Baixe a biblioteca:
npm install cytoscape-view-utilities ,bower install cytoscape-view-utilities , ou require() a biblioteca conforme apropriado para o seu projeto:
Commonjs:
var cytoscape = require ( 'cytoscape' ) ;
var viewUtilities = require ( 'cytoscape-view-utilities' ) ;
viewUtilities ( cytoscape ) ; // register extensionAMD:
require ( [ 'cytoscape' , 'cytoscape-view-utilities' ] , function ( cytoscape , view - utilities ) {
view - utilities ( cytoscape ) ; // register extension
} ) ; HTML/JS simples possui a extensão registrada para você automaticamente, porque não require() não é necessário.
npm run build : build ./src/** em cytoscape-view-utilities.js no ambiente de produção e minimize o arquivo.npm run build:dev : Build ./src/** em cytoscape-view-utilities.js no ambiente de desenvolvimento sem minimizar o arquivo. Este projeto é configurado para ser publicado automaticamente no NPM e no Bower. Para publicar:
npm run buildgit commit -am "Build for release"npm version major|minor|patchgit push && git push --tagsnpm publish .bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git 
