cpee 1.3.181 → 1.3.183

data/cockpit/js/parameters.js

@@ -1,67 +1,69 @@
 $(document).ready(function() {
-  // Color of save buttons for parameter area //{{{
-  $('#parameters ui-tabbar ui-tab:not(.switch)').click(function(event){
-    mark_parameters_save($(event.target).parents('ui-tabbed'));
+  // hook up dataelements with relaxngui //{{{
+  $.ajax({
+    type: "GET",
+    url: "rngs/dataelements.rng",
+    success: function(rng){
+      save['dataelements'] = new RelaxNGui(rng,$('#dat_dataelements'));
+    }
+  }); //}}}
+  // hook up endpoints with relaxngui //{{{
+  $.ajax({
+    type: "GET",
+    url: "rngs/endpoints.rng",
+    success: function(rng){
+      save['endpoints'] = new RelaxNGui(rng,$('#dat_endpoints'));
+    }
   }); //}}}
-  
-  // Delete entries //{{{
-  $(document).on('click','#parameters td.del a',function(event){
-    var top = $(event.target).parents('ui-tabbed');
-    remove_entry($("input",$(event.target).parents('tr')).get(0),false);
-    mark_parameters_save(top);
-    return false;
+  // hook up attributes with relaxngui //{{{
+  $.ajax({
+    type: "GET",
+    url: "rngs/attributes.rng",
+    success: function(rng){
+      save['attributes'] = new RelaxNGui(rng,$('#dat_attributes'));
+    }
   }); //}}}
 
-  // New entry //{{{
-  $('#parameters ui-behind button:nth-child(1)').click(function(){
-    new_entry($(this).parents('ui-tabbed'));
+  // color of save button when changeing tabs //{{{
+  $('#parameters ui-tabbar ui-tab:not(.switch)').click(function(event){
+    highlight_save_button(event);
   }); //}}}
 
-  // Save entries //{{{
+  // save entries //{{{
   $('#parameters ui-behind button:nth-child(2)').click(function(event){
-    save_parameters($(event.target).parents('ui-tabbed'));
+    var visid = $('ui-tabbar ui-tab',$(event.target).parents('ui-tabbed')).not('.switch').not('.inactive').attr('data-tab');
+    if (save[visid].has_changed()) {
+      var url = $("#current-instance").text();
+      $('#parameters ui-tabbar ui-behind button:nth-child(2)').removeClass('highlight');
+      save[visid].set_checkpoint();
+      $.ajax({
+        type: "PUT",
+        url: url + "/properties/values/" + visid + "/",
+        data: ({'content': save[visid].save_text()}),
+      });
+    }
   }); //}}}
 
-  $(document).on('keyup','#dat_dataelements input',function(e){ mark_parameters_save($(e.target).parents('ui-tabbed')); });
-  $(document).on('keyup','#dat_endpoints input',function(e){ mark_parameters_save($(e.target).parents('ui-tabbed')); });
-  $(document).on('keyup','#dat_attributes input',function(e){ mark_parameters_save($(e.target).parents('ui-tabbed')); });
-});
-
-function mark_parameters_save(top) { //{{{
-  var visid = $('ui-tabbar ui-tab',top).not('.switch').not('.inactive').attr('data-tab');
-  var tab = $('#dat_' + visid);
-  if (serialize_inputs(tab) != save[visid]) {
-    $('ui-tabbar ui-behind button:nth-child(2)',top).addClass('highlight');
-  } else {  
-    $('ui-tabbar ui-behind button:nth-child(2)',top).removeClass('highlight');
-  }
-} //}}}
-function save_parameters(top) { //{{{
-  var visid = $('ui-tabbar ui-tab',top).not('.switch').not('.inactive').attr('id').replace(/tab/,'');
-  var table = $('#dat_' + visid);
-  var serxml = serialize_inputs(table);
+  // new entry //{{{
+  $('#parameters ui-behind button:nth-child(1)').click(function(event){
+    var but = $(document).find('#parameters ui-content ui-area:not(.inactive) button');
+        but.click();
+    var are = $(document).find('#parameters ui-content ui-area:not(.inactive)');
+    var tab = $(document).find('#parameters ui-content ui-area:not(.inactive) .relaxngui_table');
+        are.animate({ scrollTop: tab.height() }, "slow");
+  }); //}}}
 
-  if (serxml != save[visid]) {
-    save[visid] = serxml;
-    var url = $("#current-instance").text();
-    $('ui-tabbar ui-behind button:nth-child(2)',top).removeClass('highlight');
-    $.ajax({
-      type: "PUT", 
-      url: url + "/properties/values/" + visid + "/",
-      data: ({'content': serxml}),
-    });
-  }  
-} //}}}
+  // when keyup in one of the inputs, highlight the save button //{{{
+  $(document).on('keyup','#dat_dataelements input, #dat_endpoints input, #dat_attributes input',function(event){
+    highlight_save_button(event);
+  }); //}}}
+});
 
-function serialize_inputs(parent) { //{{{
-  var xml = $X('<content/>');
-  var fields = $('input',parent);
-  for (var i=0;i<fields.length; i+=2) {
-    var k = $(fields[i]).val();
-    var v = $(fields[i+1]).val();
-    if (k.match(/^[a-zA-Z][a-zA-Z0-9_]*$/)) {
-      xml.append($X('<' + k + '>' + v + '</' + k + '>'));
-    }   
+function highlight_save_button(event) {
+  var visid = $('ui-tabbar ui-tab',$(event.target).parents('ui-tabbed')).not('.switch').not('.inactive').attr('data-tab');
+  if (save[visid].has_changed()) {
+    $('#parameters ui-tabbar ui-behind button:nth-child(2)').addClass('highlight');
+  } else {
+    $('#parameters ui-tabbar ui-behind button:nth-child(2)').removeClass('highlight');
   }
-  return xml.serializeXML();
-} //}}}
+}

data/cockpit/js/ui.js

@@ -4,17 +4,17 @@ $(document).ready(function() {
 
     $('body').children().each(function(key,c){
       if (skip) {
-        $(c).remove(); 
+        $(c).remove();
       } else {
         $(c).removeClass('hidden');
-      }  
+      }
       skip = true;
     });
 
     $("#iagree").click(function(){
       if($(this).is(':checked')){
         $("#icontinue").prop("disabled", false);
-      } else {  
+      } else {
         $("#icontinue").prop("disabled", true);
       }
     });
@@ -22,30 +22,5 @@ $(document).ready(function() {
       $.cookie('cpee_iagree','yes');
       location.reload();
     });
-  }  
+  }
 });
-
-// flexible parameter input
-
-function remove_entry(target,foc) { //{{{
-  var tr = $($(target).parents('tr').get(0));
-  if (foc) {
-    var par = tr.parent();
-    $('input.' + $(target).attr('class'),par).each(function(){
-      if (this == target) {
-        if (prev) prev.focus();
-        return false;
-      }
-      prev = this;
-    });
-  }  
-  tr.remove();
-}   //}}}
-
-function new_entry(top) { //{{{
-  var visid = $('ui-tabbar ui-tab',top).not('.switch').not('.inactive').attr('id').replace(/tab/,'');
-  var node = $('#dat_template_pair tr').clone();
-  var vnode = $('#dat_' + visid).append(node);
-  $('.pair_name',vnode).focus();
-  return node;
-} //}}}

data/cockpit/js/wfadaptor.js

@@ -19,22 +19,25 @@
 // 2) creation of svg-container (Bug: arrows on lines)
 // 3) after-function to insert using namespace of description
 
-// WfAdaptor: 
-// Handles interaction between Illustartor and Description 
+// WfAdaptor:
+// Handles interaction between Illustartor and Description
 // e.g. Event fires to Adaptor to insert Element and Illustrator and Description do it
-function WfAdaptor(manifesto) { // Controller {{{
- 
+function WfAdaptor(theme_base,doit) { // Controller {{{
+
  // public variables {{{
     this.illustrator;
     this.description;
     this.elements = {};
+    this.theme_base = theme_base;
+    this.theme_dir = theme_base.replace(/theme.js/,'');
   // }}}
 
-  // public variables {{{
+  // private variables {{{
     var illustrator;
     var description;
+    var self = this;
   // }}}
-  
+
   // helper funtions
   this.set_description = function(desc) { // public {{{
     this.description.set_description(desc);
@@ -48,74 +51,133 @@ function WfAdaptor(manifesto) { // Controller {{{
     illustrator.set_container(container); // TODO: shadowing the container element
   } // }}}
 
+
   // initialze
   this.illustrator = illustrator = new WfIllustrator(this);
   this.description = description = new WfDescription(this, this.illustrator);
 
-  manifestation = new manifesto(this);
-  this.illustrator.noarrow = manifestation.noarrow;
-  for(element in manifestation.elements) {
-    this.illustrator.elements[element] = manifestation.elements[element].illustrator;
-    this.description.elements[element] = manifestation.elements[element].description;
-    this.elements[element] = manifestation.elements[element].adaptor;
-  }
-}  // }}}
+  $.getScript(theme_base, function() {
+    manifestation = new WFAdaptorManifestation(self);
+    illustrator.noarrow = manifestation.noarrow;
+    description.source = manifestation.source;
+    var deferreds = [];
+    // copy parent stuff
+    for(element in manifestation.elements) {
+      if (!manifestation.elements[element].description) {
+        if (manifestation.elements[element].parent) { // take from parent if empty
+          manifestation.elements[element].description = manifestation.elements[manifestation.elements[element].parent].description;
+        }
+      }
+      if (!manifestation.elements[element].adaptor) {
+        if (manifestation.elements[element].parent) { // take from parent if empty
+          manifestation.elements[element].adaptor = manifestation.elements[manifestation.elements[element].parent].adaptor;
+        }
+      }
+    }
+    // doit
+    for(element in manifestation.elements) {
+      if (manifestation.elements[element].illustrator) {
+        if (manifestation.elements[element].illustrator.svg) {
+          deferreds.push(
+            $.ajax({
+              type: "GET",
+              url: manifestation.elements[element].illustrator.svg,
+              context: element,
+              success: function(res){
+                manifestation.elements[this].illustrator.svg = $(res.documentElement);
+              }
+            })
+          );
+        }
+        illustrator.elements[element] = manifestation.elements[element].illustrator;
+        illustrator.elements[element].type = manifestation.elements[element].type || 'abstract';
+      }
+      if (manifestation.elements[element].description) {
+        if ( typeof manifestation.elements[element].description === 'string' ) {
+          manifestation.elements[element].description = [ manifestation.elements[element].description ];
+        }
+        if ($.isArray(manifestation.elements[element].description)) {
+          _.each(manifestation.elements[element].description,function(val,ind){
+            deferreds.push(
+              $.ajax({
+                type: "GET",
+                url: val,
+                context: element,
+                success: function(res){
+                  manifestation.elements[this].description = $(res.documentElement);
+                  description.elements[this] = manifestation.elements[this].description;
+                }
+              })
+            );
+          });
+        }
+      }
+      if (manifestation.elements[element].adaptor) {
+        self.elements[element] = manifestation.elements[element].adaptor;
+      }
+    }
+    $.when.apply($, deferreds).then(function(x) {
+      doit(self);
+    });
+  });
+} // }}}
 
-// WfIllustrator: 
+// WfIllustrator:
 // Is in charge of displaying the Graph. It is further able insert and remove elements with given ID's from the illsutration.
 function WfIllustrator(wf_adaptor) { // View  {{{
   // Variable {{{
     // public
-    var height = this.height = 40;
-    var width = this.width = 40;
-    var noarrow = this.noarrow = [];
-    var elements = this.elements = {};
-    var svg = this.svg = {};
+    this.height = 40;
+    this.width = 40;
+    this.noarrow = [];
+    this.elements = {}; // the svgs
+    this.svg = {};
     this.draw = {};
     // private
+    var self = this;
     var adaptor = null;
-  // }}} 
+  // }}}
   // Generic Functions {{{
   this.set_container = function(con) { // {{{
-    svg.container = con;
-    svg.container.append($X('<defs xmlns="http://www.w3.org/2000/svg">' +
+    self.svg.container = con;
+    self.svg.container.append($X('<defs xmlns="http://www.w3.org/2000/svg">' +
         '<marker id="arrow" viewBox="0 0 10 10" refX="33" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="4.5" makerHeight="4.5">' +
           '<path d="m 2 2 l 6 3 l -6 3 z"/>' +
         '</marker>' +
       '</defs>'));
-    svg.defs = {};
-    svg.defs['unknown'] = $X('<g xmlns="http://www.w3.org/2000/svg" class="unknown">' +
+    self.svg.defs = {};
+    self.svg.defs['unknown'] = $X('<g xmlns="http://www.w3.org/2000/svg" class="unknown">' +
         '<circle cx="15" cy="15" r="14" class="unkown"/>' +
         '<text transform="translate(15,20)" class="normal">?</text>' +
       '</g>');
-    for(element in elements) 
-      if(elements[element].svg() != false) {
-        var sym = $X('<g xmlns="http://www.w3.org/2000/svg"/>').append(elements[element].svg().children()); // append all children to symbol
-        $.each(elements[element].svg().attr('class').split(/\s+/), function(index, item) { sym.addClass(item); }); // copy all classes from the root node
-        svg.defs[element] = sym;
+    for(element in self.elements)
+      if(self.elements[element].svg) {
+        var sym = $X('<g xmlns="http://www.w3.org/2000/svg"/>').append(self.elements[element].svg.clone().children()); // append all children to symbol
+        $.each(self.elements[element].svg.attr('class').split(/\s+/), function(index, item) { sym.addClass(item); }); // copy all classes from the root node
+        self.svg.defs[element] = sym;
       }
   }  // }}}
   var clear = this.clear = function() { // {{{
-    $('> :not(defs)', svg.container).each(function() {$(this).remove()});
+    $('> :not(defs)', self.svg.container).each(function() {$(this).remove()});
   } // }}}
   this.set_svg = function(graph) { // {{{
     if(graph.max.row < 1) graph.max.row = 1;
     if(graph.max.col < 1) graph.max.col = 1;
-    svg.container.attr({'height': (graph.max.row+0.3)*height, 'width':(graph.max.col+0.65)*width});
-    svg.container.append(graph.svg);
+    self.svg.container.attr({'height': (graph.max.row+0.3)*self.height, 'width':(graph.max.col+0.65)*self.width});
+    self.svg.container.append(graph.svg);
   } // }}}
   // }}}
   // Helper Functions {{{
   var draw_symbol = this.draw.draw_symbol = function (tname, sym_name, id, title, row, col, group) { // {{{
-    if(elements[sym_name] == undefined || elements[sym_name].svg == undefined) sym_name = 'unknown';
-    var g = $X('<g class="element" element-id="' + id  + '" transform="translate(' + String((col*width)-((width*0.39))) + ',' + String(row*height-((height*0.74))) + ')" xmlns="http://www.w3.org/2000/svg">' + 
+    if(self.elements[sym_name] == undefined || self.elements[sym_name].svg == undefined) sym_name = 'unknown';
+    var g = $X('<g class="element" element-type="' + sym_name + '" element-id="' + id  + '" transform="translate(' + String((col*self.width)-((self.width*0.39))) + ',' + String(row*self.height-((self.height*0.74))) + ')" xmlns="http://www.w3.org/2000/svg">' +
                   '<text class="super" transform="translate(30,8.4)">' +
                     '<tspan class="active">0</tspan>' +
                     '<tspan class="colon">,</tspan>' +
                     '<tspan class="vote">0</tspan>' +
                   '</text>' +
-               '</g>'); 
-    var sym = svg.defs[sym_name].clone();
+               '</g>');
+    var sym = self.svg.defs[sym_name].clone();
     sym.prepend($X('<title xmlns="http://www.w3.org/2000/svg">' + title  + '</title>'));
     sym.attr('class','activities');
     g.append(sym);
@@ -126,21 +188,21 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       if(event_name == 'mousedown') sym.bind('contextmenu', false);
     }
     if(group) {group.append(g);}
-    else {svg.container.children('g:first').append(g);} 
+    else {self.svg.container.children('g:first').append(g);}
     return g;
-  } // }}}    
+  } // }}}
   var draw_border = this.draw.draw_border = function(id, p1, p2, group) { // {{{
-    group.prepend($X('<rect element-id="' + id + '" x="' + (p1.col-0.50)*width + '" ' +
-        'y="' + (p1.row-0.80)*height + '" ' +
-        'width="' + ((p2.col+1.00)-p1.col)*width + '" ' +
-        'height="' + ((p2.row+1.00)-p1.row)*height +'" ' +
+    group.prepend($X('<rect element-id="' + id + '" x="' + (p1.col-0.50)*self.width + '" ' +
+        'y="' + (p1.row-0.80)*self.height + '" ' +
+        'width="' + ((p2.col+1.00)-p1.col)*self.width + '" ' +
+        'height="' + ((p2.row+1.00)-p1.row)*self.height +'" ' +
         'class="block" rx="15" ry="15" xmlns="http://www.w3.org/2000/svg"/>'));
-  } // }}} 
+  } // }}}
   var draw_tile = this.draw.draw_tile = function(id, p1, p2, group) { // {{{
-    group.prepend($X('<rect element-id="' + id + '" x="' + (p1.col-0.50)*width + '" ' +
-        'y="' + (p1.row-0.80)*height + '" ' +
-        'width="' + ((p2.col+1.00)-p1.col)*width + '" ' +
-        'height="' + ((p2.row+1.00)-p1.row)*height +'" ' +
+    group.prepend($X('<rect element-id="' + id + '" x="' + (p1.col-0.50)*self.width + '" ' +
+        'y="' + (p1.row-0.80)*self.height + '" ' +
+        'width="' + ((p2.col+1.00)-p1.col)*self.width + '" ' +
+        'height="' + ((p2.row+1.00)-p1.row)*self.height +'" ' +
         'class="tile" rx="15" ry="15" xmlns="http://www.w3.org/2000/svg"/>'));
   } // }}}
   var draw_connection = this.draw.draw_connection = function(group, start, end, max_line, num_lines, arrow) { // {{{
@@ -148,46 +210,46 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     var line;
     if (arrow)
       line = $X('<path xmlns="http://www.w3.org/2000/svg" class="ourline" marker-end="url(#arrow)"/>');
-    else  
+    else
       line = $X('<path xmlns="http://www.w3.org/2000/svg" class="ourline"/>');
     if (end['row']-start['row'] == 0 || end['col']-start['col'] == 0) { // straight line
-      line.attr("d", "M " + String(start['col']*width) + "," + String(start['row']*height-15) +" "+
-                                    String(end['col']*width) + "," + String(end['row']*height-15)
+      line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
+                                    String(end['col']*self.width) + "," + String(end['row']*self.height-15)
       );
     } else if (end['row']-start['row'] > 0) { // downwards
       if (end['col']-start['col'] > 0) {// left - right
-        line.attr("d", "M " + String(start['col']*width) + "," + String(start['row']*height-15) +" "+
-                                      String(start['col']*width+14) + "," + String((end['row']-1)*height) +" "+ // first turn of hotizontal-line going away from node
-                                      String(end['col']*width) + "," + String((end['row']-1)*height) +" "+
-                                      String(end['col']*width) + "," + String(end['row']*height-15)
+        line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
+                                      String(start['col']*self.width+14) + "," + String((end['row']-1)*self.height) +" "+ // first turn of hotizontal-line going away from node
+                                      String(end['col']*self.width) + "," + String((end['row']-1)*self.height) +" "+
+                                      String(end['col']*self.width) + "," + String(end['row']*self.height-15)
         );
       } else { // right - left
-        line.attr("d", "M " + String(start['col']*width) + "," + String(start['row']*height-15) +" "+
-                                      String(start['col']*width) + "," + String(end['row']*height-35) +" "+
-                                      String(end['col']*width+14) + "," + String(end['row']*height-35) +" "+ // last turn of horizontal-line going into the node
-                                      String(end['col']*width) + "," + String(end['row']*height-15)
+        line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
+                                      String(start['col']*self.width) + "," + String(end['row']*self.height-35) +" "+
+                                      String(end['col']*self.width+14) + "," + String(end['row']*self.height-35) +" "+ // last turn of horizontal-line going into the node
+                                      String(end['col']*self.width) + "," + String(end['row']*self.height-15)
         );
       }
     } else if(end['row']-start['row'] < 0) { // upwards
       if(num_lines > 1) {// ??? no idea
-        line.attr("d", "M " + String(start['col']*width) + "," + String(start['row']*height-15) +" "+
-                                      String(start['col']*width) + "," + String((max_line-1)*height+5) +" "+
-                                      String(end['col']*width+20) + "," + String((max_line-1)*height+5) +" "+
-                                      String(end['col']*width+20) + "," + String(end['row']*height+25)+" "+
-                                      String(end['col']*width) + "," + String(end['row']*height-15)
+        line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
+                                      String(start['col']*self.width) + "," + String((max_line-1)*self.height+5) +" "+
+                                      String(end['col']*self.width+20) + "," + String((max_line-1)*self.height+5) +" "+
+                                      String(end['col']*self.width+20) + "," + String(end['row']*self.height+25)+" "+
+                                      String(end['col']*self.width) + "," + String(end['row']*self.height-15)
         );
       } else {
-        line.attr("d", "M " + String(start['col']*width) + "," + String(start['row']*height-15) +" "+
-                                      String(end['col']*width+20) + "," + String(start['row']*height-15) +" "+
-                                      String(end['col']*width+20) + "," + String(end['row']*height+25)+" "+
-                                      String(end['col']*width) + "," + String(end['row']*height-15)
+        line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
+                                      String(end['col']*self.width+20) + "," + String(start['row']*self.height-15) +" "+
+                                      String(end['col']*self.width+20) + "," + String(end['row']*self.height+25)+" "+
+                                      String(end['col']*self.width) + "," + String(end['row']*self.height-15)
         );
       }
     }
     // Seems to solve injection groups-line problem, but I guess it will caus problem when collapsing elements
     //if(group) {group.prepend(line);}
-    //else 
-    {svg.container.append(line);}
+    //else
+    {self.svg.container.append(line);}
   } //  }}}
   // }}}
   // Initialize {{{
@@ -195,17 +257,19 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   // }}}
 } // }}}
 
-// WfDescription: 
+// WfDescription:
 // Manages the description. Is is further able to add/remove elements from the controlflow description.
 function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   // public variables
-  var elements = this.elements = {};
+  this.elements = {}; // the rngs
+  this.source = null;
   // private variables
+  var self = this;
   var adaptor;
   var illustrator;
   var description;
   var id_counter = {};
-  var update_illustrator = true; 
+  var update_illustrator = true;
 
   // Generic Functions {{{
   this.set_description = function(desc, auto_update) { // public {{{
@@ -226,23 +290,34 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   var gd = this.get_description = function() { //  public {{{
     var serxml = $(description.get(0).documentElement).clone(true);
     serxml.removeAttr('svg-id');
+    serxml.removeAttr('svg-type');
+    serxml.removeAttr('svg-label');
     $('*[svg-id]',serxml).each(function(){
       $(this).removeAttr('svg-id');
     });
+    $('*[svg-type]',serxml).each(function(){
+      $(this).removeAttr('svg-type');
+    });
+    $('*[svg-label]',serxml).each(function(){
+      $(this).removeAttr('svg-label');
+    });
     return serxml.serializeXML();
   } // }}}
   this.get_node_by_svg_id = function(svg_id) { // {{{
     return $('[svg-id = \'' + svg_id + '\']', description);
   } // }}}
+  var context_eval = this.context_eval = function(what) { // {{{
+    return eval(what);
+  } // }}}
   var get_free_id = this.get_free_id = function() { // {{{
     var existing = new Array();
     $('*[id]', description).each(function(){existing.push($(this).attr('id'))});
     var id = 1;
     while ($.inArray('a' + id,existing) != -1) {
-      id += 1; 
+      id += 1;
     }
     return 'a' + id;
-  } // }}} 
+  } // }}}
   var update = this.update = function(svgid) { // {{{
     id_counter = {};
     if(update_illustrator){
@@ -250,27 +325,30 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       var graph = parse(description.children('description').get(0), {'row':0,'col':0});
       illustrator.set_svg(graph);
     }
+
     var newn = $('*[new=true]',description);
     newn.removeAttr('new');
 
-    $.each(newn,function(k,nn){
-      if ($(nn).attr('svg-id') != undefined)
-        adaptor.notify($(nn).attr('svg-id'));
-      else if (svgid != undefined)
-        adaptor.notify(svgid);
-    });
+    if (newn.attr('svg-id') != undefined)
+      adaptor.notify(newn.attr('svg-id'));
+    else if (svgid != undefined)
+      adaptor.notify(svgid);
+    else if (newn.parent('[svg-id]').length > 0)
+      adaptor.notify(newn.parent('[svg-id]').attr('svg-id'));
+    else
+      console.info('Something went horribly wrong');
   } // }}}
   // }}}
   // Adaption functions {{{
   this.insert_after = function(new_node, target) { // {{{
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
-        var nn = $X(v.replace(/###/,get_free_id()));
+        var nn = self.source(v);
         target.after(nn);
         nn.attr('new','true');
       });
     } else {
-      var nn = $X(new_node.replace(/###/,get_free_id()));
+      var nn = self.source(new_node);
       target.after(nn);
       nn.attr('new','true');
     }
@@ -279,12 +357,12 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   this.insert_first_into = function(new_node, target, selector) { // {{{
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
-        var nn = $X(v.replace(/###/,get_free_id()));
+        var nn = self.source(v);
         target.prepend(nn);
         nn.attr('new','true');
       });
     } else {
-      var nn = $X(new_node.replace(/###/,get_free_id()));
+      var nn = self.source(new_node);
       target.prepend(nn);
       nn.attr('new','true');
     }
@@ -293,12 +371,12 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   this.insert_last_into = function(new_node, target, selector) { // {{{
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
-        var nn = $X(v.replace(/###/,get_free_id()));
+        var nn = self.source(v);
         target.append(nn);
         nn.attr('new','true');
       });
     } else {
-      var nn = $X(new_node.replace(/###/,get_free_id()));
+      var nn = self.source(new_node);
       target.append(nn);
       nn.attr('new','true');
     }
@@ -309,8 +387,11 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     if(selector == undefined) {
       svgid = target.attr('svg-id');
       target.remove()
-    } else { 
+    } else {
       svgid = $(selector, target).attr('svg-id');
+      if (!svgid) {
+        svgid = target.attr('svg-id');
+      }
       $(selector, target).remove();
     }
     update(svgid);
@@ -322,15 +403,15 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     var pos = jQuery.extend(true, {}, parent_pos);
     var max = {'row': 0,'col': 0};
     var prev = [parent_pos]; // connects parent with child(s), depending on the expansion
-    var endnodes = []; 
+    var endnodes = [];
     var root_expansion = illustrator.elements[root.tagName].expansion(root);
     var block =  {'max':{}}; // e.g. {'max':{'row':0,'col':0}, 'endpoints':[]};
     var collapsed = false;
 
     var group = $X('<g class="group" xmlns="http://www.w3.org/2000/svg"/>');
 
-    if(root_expansion == 'horizontal') pos.row++; 
-    if(illustrator.elements[root.tagName].col_shift(root) == true && root_expansion != 'horizontal') pos.col++; 
+    if(root_expansion == 'horizontal') pos.row++;
+    if(illustrator.elements[root.tagName].col_shift(root) == true && root_expansion != 'horizontal') pos.col++;
 
     if(root.tagName == 'description') { // First parsing {{{
       pos.row++;
@@ -340,7 +421,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       illustrator.draw.draw_symbol('start', 'start', 'description', 'START', pos.row, pos.col, group);
     } // }}}
 
-    $(root).children().each(function() { 
+    $(root).children().each(function() {
       var tname = this.tagName;
 
       // Set SVG-ID {{{
@@ -348,13 +429,13 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         if(id_counter[tname] == undefined) id_counter[tname] = -1;
         $(this).attr('svg-id', tname + '_' + (++id_counter[tname]));
         $(this).attr('svg-label', '');
-      } else { 
+      } else {
         $(this).attr('svg-id',  $(this).attr('id'));
         if ($(this).children('parameters').length > 0) {
           $(this).attr('svg-label', $('label',$(this).children('parameters')).text().replace(/^['"]/,'').replace(/['"]$/,''));
-        } else {  
+        } else {
           $(this).attr('svg-label', '');
-        }  
+        }
       }  // }}}
       // Calculate next position {{{
       if($(this).attr('collapsed') == undefined || $(this).attr('collapsed') == 'false') { collapsed = false; }
@@ -362,14 +443,14 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       if(root_expansion == 'vertical')  pos.row++;
       if(root_expansion == 'horizontal')  pos.col++;
       if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'complex' && !collapsed) {
-        if(illustrator.elements[tname] != undefined && !illustrator.elements[tname].svg()) pos.row--;
-// TODO: Remaining problem is the order inside the svg. Thats why the connection is above the icon
+        if(illustrator.elements[tname] != undefined && !illustrator.elements[tname].svg) pos.row--;
+        // TODO: Remaining problem is the order inside the svg. Thats why the connection is above the icon
         block = parse(this, jQuery.extend(true, {}, pos));
         group.append(block.svg);
-        block.svg.attr('id', 'group-' + $(this).attr('svg-id')); 
-        if(illustrator.elements[tname].endnodes == 'aggregate') endnodes = []; // resets endpoints e.g. potential preceding primitive 
+        block.svg.attr('id', 'group-' + $(this).attr('svg-id'));
+        if(illustrator.elements[tname].endnodes == 'aggregate') endnodes = []; // resets endpoints e.g. potential preceding primitive
       } else {
-        if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'primitive'  && illustrator.elements[tname].svg()) { // This enables "invisble" elements, by returning false in the SVG function (e.g. constraints)
+        if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'primitive'  && illustrator.elements[tname].svg) { // This enables "invisble" elements, by returning undefined in the SVG function (e.g. constraints)
           block.max.row = pos.row;
           block.max.col = pos.col;
           block.endnodes = (!collapsed ? [pos] : [jQuery.extend(true, {}, pos)]);
@@ -383,27 +464,28 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       else if(typeof illustrator.elements[tname].resolve_symbol == 'function') {sym_name = illustrator.elements[tname].resolve_symbol(this);}
       else if(typeof illustrator.elements[tname].resolve_symbol == 'string')   {sym_name = illustrator.elements[tname].resolve_symbol;}
       else                                                                     {sym_name = tname;}
-      if((illustrator.elements[tname] && illustrator.elements[tname].svg()) || sym_name == 'unknown') { 
+      $(this).attr('svg-type',sym_name);
+      if((illustrator.elements[tname] && illustrator.elements[tname].svg) || sym_name == 'unknown') {
         illustrator.draw.draw_symbol(tname, sym_name, $(this).attr('svg-id'), $(this).attr('svg-label'), pos.row, pos.col, block.svg).addClass(illustrator.elements[tname] ? illustrator.elements[tname].type : 'primitive unknown');
       } else { console.log("no icon "+ tname);}
       if(illustrator.elements[tname] && illustrator.elements[tname].border) illustrator.draw.draw_border($(this).attr('svg-id'), pos, block.max, block.svg);
       if(illustrator.elements[tname] && illustrator.elements[tname].type == 'complex') illustrator.draw.draw_tile($(this).attr('svg-id'), pos, block.max, block.svg);
       // }}}
       // Calculate Connection {{{
-      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].closeblock) { // Close Block if element e.g. loop 
+      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].closeblock) { // Close Block if element e.g. loop
         for(node in block.endnodes) illustrator.draw.draw_connection(group, block.endnodes[node], pos, block.max.row+1, block.endnodes.length, true);
       }
-      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].endnodes != 'this')  { 
-        for(i in block.endnodes) endnodes.push(block.endnodes[i]); // collects all endpoints from different childs e.g. alternatives from choose 
+      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].endnodes != 'this')  {
+        for(i in block.endnodes) endnodes.push(block.endnodes[i]); // collects all endpoints from different childs e.g. alternatives from choose
       } else { endnodes = [jQuery.extend(true, {}, pos)]; } // sets this element as only endpoint (aggreagte)
       if(prev[0].row == 0 || prev[0].col == 0) { // this enforces the connection from description to the first element
         illustrator.draw.draw_connection(group, { row: 1, col: 1 }, pos, null, null, true);
       } else {
-        if ($.inArray(tname,noarrow) == -1)
+        if ($.inArray(tname,illustrator.noarrow) == -1)
           for(node in prev) illustrator.draw.draw_connection(group, prev[node], pos, null, null, true);
-        else  
+        else
           for(node in prev) illustrator.draw.draw_connection(group, prev[node], pos, null, null, false);
-      }  
+      }
       // }}}
       // Prepare next iteration {{{
       if(root_expansion == 'vertical') { prev = jQuery.extend(true, {}, endnodes); pos.row = block.max.row;} // covers e.g. input's for alternative, parallel_branch, ... everything with horizontal expansion
@@ -427,4 +509,4 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   adaptor = wf_adaptor;
   illustrator = wf_illustrator;
   // }}}
-} // }}} 
+} // }}}