cytoscape.js view utilities
v6.0.0
Esta extensión Cytoscape.js proporciona utilidades de vista diversa como ocultación/show, resaltado, zoom de marquesina y selección de forma gratuita, distribuida bajo la licencia MIT.
Cite el siguiente documento cuando use esta extensión:
U. Dogrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi y MC Siper, "Métodos eficientes y bibliotecas fácilmente personalizables para gestionar la complejidad de grandes redes", PLoS One, 13 (5): E0197238, 2018.
Haga clic aquí (sin deshacer) o aquí (deshacible) para una demostración
var instance = cy.viewUtilities(options)
@Param Opciones: si no se proporciona, se utilizarán opciones predeterminadas. Consulte la sección a continuación para ver las opciones predeterminadas. highlightStyles es la matriz de objetos. Los objetos deben seguir el formato {node: ..., edge: ...} . Se utilizarán selectStyles si desea anular los estilos resaltados cuando se seleccionan los objetos. lassoStyle se utilizará para anular el estilo de la línea de lasso.
p.ej
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 - una colección cytoscape.js (colección de elementos) que se destacará
@Param IDX: el índice del estilo cytoscape.js. Si no lo especifica, se utilizará el primer estilo.
Aplicar la clase de estilo a los elementos especificados. La clase de estilo se especifica con su índice
instance.highlightNeighbors(eles, idx = 0)
@param eles - una colección cytoscape.js (colección de elementos) que se destacará
@Param IDX: el índice del estilo cytoscape.js. Si no lo especifica, se utilizará el primer estilo.
Destaca el vecindario de Elements (basado en la opción de color). Similar a la función destacada, la opción de elementos y resaltar se puede enviar en los argumentos. Si solo se envían los elementos, entonces se usa el color destacado predeterminado.
instance.removeHighlights(eles)
@param eles - elementos para eliminar los aspectos destacados
Eliminar los reflejos de los ELES.
instance.hide(eles)
@param eles - elementos para esconderse
Puntas dadas Eles.
instance.show(eles)
@param eles - elementos para mostrar
Inhides dados Eles.
instance.showHiddenNeighbors(eles)
@param eles - elementos para mostrar vecinos ocultos
Unhides escondidos neigbors de los eles dados. Tenga en cuenta que los nodos compuestos no se respetan como se esperaba.
instance.zoomToSelected(eles)
@param eles - elementos para zoom
Zoom a ELES seleccionados.
instance.enableMarqueeZoom(callback)
@Param Callback: se llama al final de la función
Habilita el zoom de marquesina. Se llama automáticamente cuando las teclas Ctrl+Shift están abajo.
instance.disableMarqueeZoom()
Desactiva la marquesina Zoom. Se llama automáticamente cuando las teclas Ctrl+Shift están arriba.
instance.enableLassoMode(callback)
@Param Callback: se llama al final de la función
Habilita la herramienta LASSO.
instance.disableLassoMode()
Desactiva la herramienta LASSO.
instance.getHighlightStyles()
Devuelve highlightStyles actual que es una variedad de objetos como a continuación
[
{ 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()
Devuelve todas las clases de estilo Cytoscape.js utilizadas actualmente
instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@param idx - índice del estilo que se va a cambiar
@param nodestyle - estilo cytoscape para nodos
@param edgestyle - estilo cytoscape para bordes
Cambia el estilo especificado con idx .
instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - estilo cytoscape para nodos
@param edgestyle - estilo cytoscape para bordes
Agrega un nuevo estilo a la matriz highlightStyles .
instance.removeHighlightStyle(styleIdx): void
@param styleidx - índice del estilo para eliminar (0 basado)
Elimina el estilo de la matriz highlightStyles .
instance.changeLassoStyle(styleObj)
@param styleobj - Objeto de estilo de línea de Lasso con propiedades de Linecolor y/o LineWidth
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)
Descargue la biblioteca:
npm install cytoscape-view-utilities ,bower install cytoscape-view-utilities , o require() la biblioteca según corresponda para su proyecto:
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
} ) ; Simple HTML/JS tiene la extensión registrada para usted automáticamente, porque no se necesita necesidad require() .
npm run build : Build ./src/** en cytoscape-view-utilities.js en entorno de producción y minimiza el archivo.npm run build:dev : Build ./src/** en cytoscape-view-utilities.js en entorno de desarrollo sin minimizar el archivo. Este proyecto está configurado para que se publique automáticamente a NPM y 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 
