cytoscape.js view utilities Скачать - cytoscape.js view utilities Скачать исходный код

cytoscape.js view utilities

Другие ресурсы

v6.0.0

Скачать

Cytoscape-View-Unitals

Описание

Это расширение Cytoscape.js обеспечивает разнообразные утилиты для представления, такие как Hide/Show, Highlight, Marquee Zoom и бесплатный выбор форм, распределенные по лицензии MIT.

При использовании этого расширения указать следующую статью:

U. Dogrusoz, A. Karacelik, I. Safarli, H. Balci, L. Dervishi и MC Siper, «Эффективные методы и легко настраиваемые библиотеки для управления сложностью крупных сетей», PLOS One, 13 (5): E0197238, 2018.

Демо

Нажмите здесь (без отмены) или здесь (невозможно) для демонстрации

API

var instance = cy.viewUtilities(options)
@param параметры - если не предоставлены, будут использоваться параметры по умолчанию. Смотрите раздел ниже для параметров по умолчанию. highlightStyles - это массив объектов. Объекты должны следовать формату {node: ..., edge: ...} . selectStyles будет использоваться, если вы хотите переопределить выделенные стили при выбранных объектах. lassoStyle будет использоваться для переопределения стиля линии Lasso.
например

 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 - коллекция Cytoscape.js (коллекция элементов), которая будет выделена
@Param IDX - Индекс стиля cytoscape.js. Если вы не указаете это, будет использоваться первый стиль.
Применить класс стиля к указанным элементам. Стильский класс указан с его индексом

instance.highlightNeighbors(eles, idx = 0)
@param eles - коллекция Cytoscape.js (коллекция элементов), которая будет выделена
@Param IDX - Индекс стиля cytoscape.js. Если вы не указаете это, будет использоваться первый стиль.
Выделите соседство элементов (на основе опции цвета). Подобно функции выделения, либо элементы, так и опция выделения могут быть отправлены в аргументы. Если отправляются только элементы, то используется цвет выделения по умолчанию.

instance.removeHighlights(eles)
@param eles - элементы для удаления основных моментов
Удалите основные моменты от ELES.

instance.hide(eles)
@param eles - элементы, чтобы скрыть
Шкуры даны Элес.

instance.show(eles)
@param eles - элементы, чтобы показать
Нельзя получить Элес.

instance.showHiddenNeighbors(eles)
@param eles - элементы, чтобы показать скрытых соседей
Нельзя скрывать Нейгборс данного Элеса. Обратите внимание, что составные узлы не уважаются, как и ожидалось.

instance.zoomToSelected(eles)
@param eles - элементы для масштабирования
Увеличение до выбранного ELES.

instance.enableMarqueeZoom(callback)
@param обратный вызов - вызывается в конце функции
Позволяет Marquee Zoom. Это автоматически вызывается, когда клавиши Ctrl+Shift не работают.

instance.disableMarqueeZoom()
Отключает шатер Zoom. Это автоматически вызывается, когда клавиши Ctrl+Shift встают.

instance.enableLassoMode(callback)
@param обратный вызов - вызывается в конце функции
Включает инструмент Lasso.

instance.disableLassoMode()
Отключает инструмент Lasso.

instance.getHighlightStyles()
Возвращает текущие 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': '#bf0603',  'border-width': 3 }, edge: {'line-color': '#bf0603', 'source-arrow-color': '#bf0603', 'target-arrow-color': '#bf0603', 'width' : 3} },
],

instance.getAllHighlightClasses()
Возвращает все в настоящее время используемые классы Cytoscape.js в стиле

instance.changeHighlightStyle(idx, nodeStyle, edgeStyle)
@Param idx - индекс стиля, который будет изменен
@param nodestyle - стиль цитоскапа для узлов
@Param Edgestyle - стиль цитоскапа для краев
Изменяет стиль, указанный с idx .

instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - стиль цитоскапа для узлов
@Param Edgestyle - стиль цитоскапа для краев
Добавляет новый стиль к массиву highlightStyles .

instance.removeHighlightStyle(styleIdx): void
@param styleidx - индекс стиля для удаления (0 на основе)
Удаляет стиль из массива highlightStyles .

instance.changeLassoStyle(styleObj)
@param styleobj - объект Lasso Line Style с свойствами LineColor и/или 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)

Зависимости

Cytoscape.js ^3.2.0
Geometric.js ^2.2.3
Cytoscape-undo-Redo.js ^1.0.8 (необязательно)

Инструкции по использованию

Скачать библиотеку:

через NPM: npm install cytoscape-view-utilities ,
Via Bower: bower install cytoscape-view-utilities , или
через прямую загрузку в репозитории (вероятно, из тега).

require() Библиотека в зависимости от вашего проекта:

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 имеет продление, зарегистрированное для вас автоматически, потому что NO require() не требуется.

Строить цели

npm run build : Build ./src/** в cytoscape-view-utilities.js в производственной среде и минимизировать файл.
npm run build:dev : Build ./src/** в cytoscape-view-utilities.js в среде разработки без минимизации файла.

Инструкции по изданию

Этот проект настроен на автоматически опубликован в NPM и Bower. Чтобы опубликовать:

Создайте расширение: npm run build
Комплект сборки: git commit -am "Build for release"
Установите номер версии и тег: npm version major|minor|patch
Push to Origin: git push && git push --tags
Публикуйте в NPM: npm publish .
Если публиковать в Bower в первый раз, вам нужно будет запустить bower register cytoscape-view-utilities https://github.com/iVis-at-Bilkent/view-utilities.git