8 var conexion_selecionada = null;
9 var objeto_selecionado = null;
11 var arrow_style = "Straight";
13 $( "#sortable-element li" ).draggable({
16 return $("<ul class='sortable-element'></ul>").append( $(this).clone() );
20 $( "#editor" ).droppable({
21 accept: "#sortable-element li",
22 drop: function(event,ui){
26 var type = $(ui.draggable).attr('attr-type');
27 var clase = 'diagrama';
48 //objeto_selecionado = this;
51 getItemsList(count,nodetype);
53 input = "<span> Node-"+count+"</span>"+
54 "<div class='connect'></div>";
56 $(" <div style='"+posicion_drop(ui)+"' name='"+clase+"' id='"+count+"' class='objeto "+clase+"'></div> ").append(input).appendTo(this);
62 $("body").on('dblclick','.objeto span',function(){
63 var texto = prompt("Title");
64 //var text2 = prompt("Title2");
67 $("body").on('click','#editor',function(){
71 /*$(document).bind("contextmenu", function(event) {
72 event.preventDefault();
73 $("<div class='custom-menu'>Custom menu</div>")
75 .css({top: event.pageY + "px", left: event.pageX + "px"});
76 }).bind("click", function(event) {
77 $("div.custom-menu").hide();
80 // Trigger action when the contexmenu is about to be shown
81 $("body").on("contextmenu",'.objeto', function (event) {
82 objeto_selecionado = this;
84 event.preventDefault();
86 nodename=this.getAttribute("name");
88 readItemsList(this.id);
90 if (nodename=="wireless") {
91 $("#cssmenu").finish().toggle(100).
93 top: event.pageY-150 + "px",
94 left: event.pageX-450 + "px"
97 $("#cssmenu_").finish().toggle(100).
99 top: event.pageY-150 + "px",
100 left: event.pageX-450 + "px"
104 // In the right position (the mouse)
110 // If the document is clicked somewhere
111 $("body").bind("mousedown",'.objeto', function (e) {
113 // If the clicked element is not the menu
114 if (!$(e.target).parents("#cssmenu").length > 0) {
117 $("#cssmenu").hide(100);
119 if (!$(e.target).parents("#cssmenu_").length > 0) {
122 $("#cssmenu_").hide(100);
127 // If the menu element is clicked
128 $("#cssmenu li").click(function(){
130 // This is the triggered action name
131 switch($(this).attr("data-action")) {
133 // A case for each action. Your actions here
134 case "first": getItemsList(gid,true,""); break;
135 case "second": getItemsList(gid,true,"omf:netmode"); break;
136 case "third": getItemsList(gid,true,"omf:nitos.outdoor"); break;
137 //case "forth": getItemsList(gid,true,"wilab2.ilabt.iminds.be"); break;
138 case "fifth": getItemsList(gid,false,"ple"); break;
141 // Hide it AFTER the action was triggered
142 $("#cssmenu").hide(100);
144 $("#cssmenu_ li").click(function(){
146 // This is the triggered action name
147 switch($(this).attr("data-action")) {
150 case "fifth": getItemsList(gid,false,"ple"); break;
153 // Hide it AFTER the action was triggered
154 $("#cssmenu_").hide(100);
156 $("body").on('dblclick','.objeto',function(){
158 $( "#menu" ).offset({ top: -10, left: -10 });
159 //console.log(this.name);
160 console.log(this.offsetTop);
161 var t = this.offsetTop;
162 var l = this.offsetLeft;
163 //var x = $(this.name).position();
164 //console.log(x.top);
165 $( "#menu" ).offset({ top: t, left: l });
170 $("body").on('click','.objeto',function(){
172 objeto_selecionado = this;
174 console.log(this.id);
175 getItemsList(this.id);
182 workflow = function(){
184 jsPlumb.importDefaults({
185 Endpoint : ["Dot", {radius:2}],
186 HoverPaintStyle : {strokeStyle:"#1e8151", lineWidth:0 },
190 windows = jsPlumb.getSelector('.objeto');
192 jsPlumb.makeSource(windows, {
196 connector:[ arrow_style, { curviness:63 } ],
198 strokeStyle:"#5c96bc",
200 outlineColor:"transparent",
204 [ "Label", { label:"", id:"label" } ]
207 dropOptions : targetDropOptions
211 jsPlumb.makeTarget(windows, {
212 dropOptions:{ hoverClass:"dragHover" },
217 var targetDropOptions = {
219 hoverClass:'dropHover',
220 activeClass:'dragActive'
227 jsPlumb.bind("click", function(conn, originalEvent) {
228 conexion_selecionada = conn;
235 posicion_drop = function(ui){
236 var top = parseInt(ui.position['top'], 10) - 250;
237 var left = parseInt(ui.position['left'], 10) - 560;
238 var style = 'position:absolute;top:' + top + 'px;left:' + left + 'px;'
244 $(document).keyup(function(e){
246 if(conexion_selecionada != null){
247 jsPlumb.detach(conexion_selecionada);
248 conexion_selecionada = null;
252 if(objeto_selecionado != null){
253 jsPlumb.remove(objeto_selecionado);
254 resetForm('',objeto_selecionado.id);
255 console.log(objeto_selecionado.id);
256 objeto_selecionado = null;
260 console.log(jsPlumb.getSelector('.objeto'));
264 //Menu de opciones en la conexión (flecha,unión)
265 me.menu_arrow = function(){
267 selector: '._jsPlumb_connector ',
269 callback: function(key, options) {
278 "flecha": {"name": "Recto"},
279 "diagrama": {"name": "Diagrama"},
280 "ondular": {"name": "Ondular"},
281 "cursiva": {"name": "Cursiva"},
287 "solido": {"name": "Solido"},
288 "discontinua": {"name": "Discontinua"}
292 "Eliminar":{"name": "Eliminar", "icon": "delete"},
298 me.menu_accion = function(accion){
299 console.log(conexion_selecionada);
300 if(accion == "Eliminar"){
301 jsPlumb.detach(conexion_selecionada, {
307 if(accion == "flecha"){
308 conexion_selecionada.setConnector("Straight");
311 if(accion == "diagrama"){
312 conexion_selecionada.setConnector("Flowchart");
315 if(accion == "ondular"){
316 conexion_selecionada.setConnector("Bezier");
319 if(accion == "cursiva"){
320 conexion_selecionada.setConnector("StateMachine");
323 if(accion == "discontinua"){
324 conexion_selecionada.setPaintStyle({
327 outlineColor:"transparent",
333 if(accion == "solido"){
334 conexion_selecionada.setPaintStyle({
337 outlineColor:"transparent",
344 me.arrastrable = function(){
345 jsPlumb.draggable($(".objeto"), {
377 name: 'Configuration',
395 var getMenuItem = function (itemData) {
396 console.log(itemData);
400 href: '#' + itemData.link,
404 var subList = $("<ul>");
405 $.each(itemData.sub, function () {
406 subList.append(getMenuItem(this));
408 item.append(subList);
413 var $menu = $("#menu");
414 $.each(data.menu, function () {