2 var graph_editor
= new dreamer
.ModelGraphEditor();
3 var selected_vnffgId
= null;
6 // Enable Drop Action on the Graph
10 "ns": ["vnf", "ns_vl"],
16 type
: type_view
['ns'],
24 $(document
).ready(function() {
26 graph_editor
.addListener("filters_changed", changeFilter
);
27 graph_editor
.addListener("refresh_graph_parameters", refreshGraphParameters
);
29 console
.log(osm_gui_properties
)
30 // graph_editor initialization
32 width
: $('#graph_ed_container').width(),
33 height
: $('#graph_ed_container').height(),
34 data_url
: window
.location
.href
,
35 desc_id
: getUrlParameter('id'),
36 gui_properties
: osm_gui_properties
,
39 behaviors
: buildBehaviorsOnEvents()
42 // this will filter in the different views, excluding the node types that are not listed in params
43 graph_editor
.handleFiltersParams(params
);
47 var filters = function(e
, params
) {
48 graph_editor
.handleFiltersParams(params
);
49 $('#' + e
).nextAll('li').remove();
53 function initDropOnGraph() {
55 var dropZone
= document
.getElementById('graph_ed_container');
56 dropZone
.ondrop = function(e
) {
57 var group
= graph_editor
.getCurrentGroup()
59 var elemet_id
= e
.dataTransfer
.getData("text/plain");
60 var nodetype
= $('#'+elemet_id
).attr('type-name');
61 console
.log(nodetype
);
63 var type_name
= graph_editor
.getTypeProperty()[nodetype
].name
;
64 $('#div_chose_id').show();
65 $('#input_choose_node_id').val(nodetype
+ "_" + generateUID());
66 $('#modal_chooser_title_add_node').text('Add ' + type_name
);
67 $('#save_choose_node_id').off('click').on('click', function() {
68 var name
= $('#input_choose_node_id').val();
69 var node_information
= {
74 'desc_id': getUrlParameter('id'),
79 console
.log(JSON
.stringify(node_information
))
80 graph_editor
.addNode(node_information
, function() {
81 $('#modal_choose_node_id').modal('hide');
86 $('#modal_choose_node_id').modal('show');
93 dropZone
.ondragover = function(ev
) {
94 console
.log("ondragover");
98 dropZone
.ondragleave = function() {
99 console
.log("ondragleave");
104 function handleForce(el
) {
105 if (el
.id
== "topology_play") {
106 $("#topology_pause").removeClass('active');
107 $("#topology_play").addClass('active');
109 $("#topology_pause").addClass('active');
110 $("#topology_play").removeClass('active');
113 graph_editor
.handleForce((el
.id
== "topology_play") ? true : false);
117 function changeFilter(e
, c
) {
119 console
.log("changeFilter", JSON
.stringify(c
));
120 //$("#title_header").text("OSHI Graph Editor");
121 //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()})
123 new dreamer
.GraphRequests().getAvailableNodes({layer
: c
.link
.view
[0]}, buildPalette
, showAlert
);
127 function refreshGraphParameters(e
, graphParameters
) {
129 if (graphParameters
== null) return;
133 function resetFilters(){
134 graph_editor
.handleFiltersParams(params
);
137 function buildBehaviorsOnEvents() {
139 var contextmenuNodesAction
= [{
141 action: function (elm
, d
, i
) {
142 // console.log('Show NodeInfo', elm, d, i);
154 action: function (elm
, c_node
, i
) {
155 if (c_node
.info
.type
!= undefined) {
156 var current_layer_nodes
= Object
.keys(graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
);
157 if (current_layer_nodes
.indexOf(c_node
.info
.type
) >= 0) {
158 if (graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
) {
159 var new_layer
= graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
;
160 graph_editor
.handleFiltersParams({
162 type
: Object
.keys(graph_editor
.model
.layer
[new_layer
].nodes
),
173 showAlert('This is not an explorable node.')
180 var behavioursOnEvents
= {
181 'nodes': contextmenuNodesAction
185 return behavioursOnEvents
;