|
| 1 | +export class GraphConfig { |
| 2 | + |
| 3 | + |
| 4 | + public readonly layout = { |
| 5 | + name: 'circle', |
| 6 | + |
| 7 | + fit: true, // whether to fit the viewport to the graph |
| 8 | + padding: 30, // the padding on fit |
| 9 | + boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h } |
| 10 | + avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space |
| 11 | + nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm |
| 12 | + spacingFactor: undefined, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up |
| 13 | + radius: undefined, // the radius of the circle |
| 14 | + startAngle: 3 / 2 * Math.PI, // where nodes start in radians |
| 15 | + sweep: undefined, // how many radians should be between the first and last node (defaults to full circle) |
| 16 | + clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false) |
| 17 | + sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') } |
| 18 | + animate: false, // whether to transition the node positions |
| 19 | + animationDuration: 500, // duration of animation in ms if enabled |
| 20 | + animationEasing: undefined, // easing of animation if enabled |
| 21 | + animateFilter: function ( node, i ) { return true; }, |
| 22 | + ready: undefined, // callback on layoutready |
| 23 | + stop: undefined, // callback on layoutstop |
| 24 | + transform: function (node, position ) { return position; } |
| 25 | + }; |
| 26 | + |
| 27 | + public readonly cytoscapeConfig = { |
| 28 | + container: null, // container to render in |
| 29 | + elements: [ // list of graph elements to start with |
| 30 | + ], |
| 31 | + layout: this.layout, |
| 32 | + style: [{ |
| 33 | + selector: 'node[name][image]', |
| 34 | + style: { |
| 35 | + label: 'data(name)', |
| 36 | + 'background-image': 'data(image)', |
| 37 | + 'width': '70%', |
| 38 | + 'height': '70%', |
| 39 | + 'background-opacity': 0, |
| 40 | + 'background-fit': 'contain', |
| 41 | + 'background-clip': 'none', |
| 42 | + } |
| 43 | + }, { |
| 44 | + selector: '.eh-handle', |
| 45 | + style: { |
| 46 | + 'background-image': '../../../assets/images/EdgeConnector.png', |
| 47 | + 'width': '60%', |
| 48 | + 'height': '60%', |
| 49 | + 'background-opacity': 0, |
| 50 | + 'border-width': 12, // makes the handle easier to hit |
| 51 | + 'background-fit': 'contain', |
| 52 | + 'background-clip': 'none', |
| 53 | + 'border-opacity': 0 |
| 54 | + } |
| 55 | + }, |
| 56 | + { |
| 57 | + selector: '.eh-hover', |
| 58 | + style: { |
| 59 | + 'background-color': 'red' |
| 60 | + } |
| 61 | + }] |
| 62 | + }; |
| 63 | + |
| 64 | + public readonly edgeDragConfig = { |
| 65 | + preview: true, // whether to show added edges preview before releasing selection |
| 66 | + hoverDelay: 150, // time spent hovering over a target node before it is considered selected |
| 67 | + handleNodes: 'node[type != "ElasticSearch"]', // selector/filter function for whether edges can be made from a given node |
| 68 | + snap: false, // when enabled, the edge can be drawn by just moving close to a target node (can be confusing on compound graphs) |
| 69 | + snapThreshold: 50, // the target node must be less than or equal to this many pixels away from the cursor/finger |
| 70 | + snapFrequency: 15, // the number of times per second (Hz) that snap checks done (lower is less expensive) |
| 71 | + noEdgeEventsInDraw: false, // set events:no to edges during draws, prevents mouseouts on compounds |
| 72 | + disableBrowserGestures: true, |
| 73 | + handlePosition: function( node ) { |
| 74 | + return 'middle top'; // sets the position of the handle in the format of "X-AXIS Y-AXIS" such as "left top", "middle top" |
| 75 | + }, |
| 76 | + handleInDrawMode: false, // whether to show the handle in draw mode |
| 77 | + edgeType: function( sourceNode, targetNode ) { |
| 78 | + // can return 'flat' for flat edges between nodes or 'node' for intermediate node between them |
| 79 | + // returning null/undefined means an edge can't be added between the two nodes |
| 80 | + return 'flat'; |
| 81 | + }, |
| 82 | + loopAllowed: function( node ) { |
| 83 | + // for the specified node, return whether edges from itself to itself are allowed |
| 84 | + return false; |
| 85 | + }, |
| 86 | + nodeLoopOffset: -50, // offset for edgeType: 'node' loops |
| 87 | + nodeParams: function( sourceNode, targetNode ) { |
| 88 | + // for edges between the specified source and target |
| 89 | + // return element object to be passed to cy.add() for intermediary node |
| 90 | + return {}; |
| 91 | + }, |
| 92 | + edgeParams: function( sourceNode, targetNode, i ) { |
| 93 | + // for edges between the specified source and target |
| 94 | + // return element object to be passed to cy.add() for edge |
| 95 | + // NB: i indicates edge index in case of edgeType: 'node' |
| 96 | + return {}; |
| 97 | + }, |
| 98 | + ghostEdgeParams: function() { |
| 99 | + // return element object to be passed to cy.add() for the ghost edge |
| 100 | + // (default classes are always added for you) |
| 101 | + return {}; |
| 102 | + } |
| 103 | + }; |
| 104 | + |
| 105 | + constructor() {} |
| 106 | +} |
0 commit comments