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
,
40 behaviors
: buildBehaviorsOnEvents()
43 // this will filter in the different views, excluding the node types that are not listed in params
44 graph_editor
.handleFiltersParams(params
);
48 var filters = function(e
, params
) {
49 graph_editor
.handleFiltersParams(params
);
50 $('#' + e
).nextAll('li').remove();
54 function initDropOnGraph() {
56 var dropZone
= document
.getElementById('graph_ed_container');
57 dropZone
.ondrop = function(e
) {
58 var group
= graph_editor
.getCurrentGroup()
60 var elemet_id
= e
.dataTransfer
.getData("text/plain");
61 var nodetype
= $('#'+elemet_id
).attr('type-name');
62 console
.log(nodetype
);
64 var type_name
= graph_editor
.getTypeProperty()[nodetype
].name
;
65 $('#div_chose_id').show();
66 $('#input_choose_node_id').val(nodetype
+ "_" + generateUID());
67 $('#modal_chooser_title_add_node').text('Add ' + type_name
);
68 $('#save_choose_node_id').off('click').on('click', function() {
69 var name
= $('#input_choose_node_id').val();
70 var node_information
= {
75 'desc_id': getUrlParameter('id'),
80 console
.log(JSON
.stringify(node_information
))
81 graph_editor
.addNode(node_information
, function() {
82 $('#modal_choose_node_id').modal('hide');
87 $('#modal_choose_node_id').modal('show');
94 dropZone
.ondragover = function(ev
) {
95 console
.log("ondragover");
99 dropZone
.ondragleave = function() {
100 console
.log("ondragleave");
105 function handleForce(el
) {
106 if (el
.id
== "topology_play") {
107 $("#topology_pause").removeClass('active');
108 $("#topology_play").addClass('active');
110 $("#topology_pause").addClass('active');
111 $("#topology_play").removeClass('active');
114 graph_editor
.handleForce((el
.id
== "topology_play") ? true : false);
118 function changeFilter(e
, c
) {
120 console
.log("changeFilter", JSON
.stringify(c
));
121 //$("#title_header").text("OSHI Graph Editor");
122 //updateNodeDraggable({type_property: type_property, nodes_layer: graph_editor.getAvailableNodes()})
124 new dreamer
.GraphRequests().getAvailableNodes({layer
: c
.link
.view
[0]}, buildPalette
, showAlert
);
128 function refreshGraphParameters(e
, graphParameters
) {
130 if (graphParameters
== null) return;
134 function resetFilters(){
135 graph_editor
.handleFiltersParams(params
);
138 function buildBehaviorsOnEvents() {
140 var contextmenuNodesAction
= [{
142 action: function (elm
, d
, i
) {
143 // console.log('Show NodeInfo', elm, d, i);
155 action: function (elm
, c_node
, i
) {
156 if (c_node
.info
.type
!= undefined) {
157 var current_layer_nodes
= Object
.keys(graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
);
158 if (current_layer_nodes
.indexOf(c_node
.info
.type
) >= 0) {
159 if (graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
) {
160 var new_layer
= graph_editor
.model
.layer
[graph_editor
.getCurrentView()].nodes
[c_node
.info
.type
].expands
;
161 graph_editor
.handleFiltersParams({
163 type
: Object
.keys(graph_editor
.model
.layer
[new_layer
].nodes
),
174 showAlert('This is not an explorable node.')
181 var behavioursOnEvents
= {
182 'nodes': contextmenuNodesAction
186 return behavioursOnEvents
;