cytoscape.js view utilities ดาวน์โหลด - cytoscape.js view utilities ซอร์สโค้ดดาวน์โหลด

cytoscape.js view utilities

ทรัพยากรอื่นๆ

v6.0.0

ดาวน์โหลด

cytoscape-view-utilities

คำอธิบาย

ส่วนขยาย cytoscape.js นี้ให้บริการสาธารณูปโภคดูเบ็ดเตล็ดเช่นซ่อน/แสดงไฮไลต์การซูมปะรำและการเลือกแบบฟอร์มฟรีแจกจ่ายภายใต้ใบอนุญาต 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 Line
เช่น

 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 - องค์ประกอบที่จะแสดง
ไม่ได้รับ Eles

instance.showHiddenNeighbors(eles)
@Param Eles - องค์ประกอบที่จะแสดงเพื่อนบ้านที่ซ่อนอยู่
Neigbors ที่ซ่อนอยู่ของ Eles ที่ได้รับ โปรดทราบว่าโหนดสารประกอบไม่ได้รับการเคารพตามที่คาดไว้

instance.zoomToSelected(eles)
@param eles - องค์ประกอบในการซูม
ซูมไปที่ Eles ที่เลือก

instance.enableMarqueeZoom(callback)
@param callback - ถูกเรียกในตอนท้ายของฟังก์ชัน
เปิดใช้งานการซูม Marquee มันถูกเรียกโดยอัตโนมัติเมื่อปุ่ม Ctrl+Shift หยุดทำงาน

instance.disableMarqueeZoom()
ปิดใช้งานการซูม Marquee มันถูกเรียกโดยอัตโนมัติเมื่อปุ่ม Ctrl+Shift ขึ้น

instance.enableLassoMode(callback)
@param callback - ถูกเรียกในตอนท้ายของฟังก์ชัน
เปิดใช้งานเครื่องมือ 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 - สไตล์ cytoscape สำหรับโหนด
@param edestyle - สไตล์ cytoscape สำหรับขอบ
เปลี่ยนสไตล์ที่ระบุด้วย idx

instance.addHighlightStyle(nodeStyle, edgeStyle)
@param nodestyle - สไตล์ cytoscape สำหรับโหนด
@param edestyle - สไตล์ cytoscape สำหรับขอบ
เพิ่มสไตล์ใหม่ให้กับอาร์เรย์ highlightStyles

instance.removeHighlightStyle(styleIdx): void
@Param StyleIdx - ดัชนีของสไตล์ที่จะลบ (ตาม 0)
ลบสไตล์ออกจากอาร์เรย์ highlightStyles

instance.changeLassoStyle(styleObj)
@param styleobj - วัตถุสไตล์ Lasso Line ที่มีคุณสมบัติ 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
} ;

การดำเนินการ undo-redo เริ่มต้น

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
ผ่าน 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 ธรรมดามีส่วนขยายที่ลงทะเบียนสำหรับคุณโดยอัตโนมัติเนื่องจากไม่ 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