cpee 1.4.30 → 1.4.31

data/cockpit/js/details.js

@@ -47,8 +47,7 @@ function do_main_save() { //{{{
         nnew.attr('trans-xmlns','http://cpee.org/ns/description/1.0');
 
     if ($('*[svg-id]',node).length > 0) {
-      // TODO maybe not all children. Maybe only thingies that have svg-id but nothing with svg-id between it and node.
-      nnew.append(node.children());
+      nnew.append(node.children().filter(function(){ return this.attributes['svg-id'] != undefined; }));
     }
 
     var ntxt = nnew.serializeXML();
@@ -58,7 +57,7 @@ function do_main_save() { //{{{
     desc.refresh(function(graphrealization){
       var vtarget = manifestation.adaptor.illustrator.get_node_by_svg_id(svgid);
       if (vtarget.length > 0) {
-        vtarget.parents('g.element[element-id]').addClass('clicked');
+        vtarget.parents('g.element[element-id]').addClass('selected');
       }
       var newnode = vtarget.parents('g.element[element-id]');
       var newtype = newnode.attr('element-type') + '_' + newnode.attr('element-endpoint');

data/cockpit/js/instance.js

@@ -13,6 +13,7 @@ var save = {};
     save['graph_adaptor'] = undefined;
     save['endpoints'] = undefined;
     save['endpoints_cache'] = {};
+    save['endpoints_list'] = {};
     save['dataelements'] = undefined;
     save['attributes'] = undefined;
     save['details'] = undefined;
@@ -353,8 +354,10 @@ function monitor_instance_values(val) {// {{{
     success: function(res){
       save[val].content(res);
       if (val == "endpoints") {
+        save['endpoints_list'] = {};
         var tmp = {};
         $(res).find(" > value > *").each(function(k,v) {
+          save['endpoints_list'][v.localName] = v.lastChild.nodeValue;
           $.ajax({
             url: rep + encodeURIComponent($(v).text()),
             success: function() {
@@ -409,7 +412,34 @@ function adaptor_init(url,theme,dslx) { //{{{
   if (save['graph_theme'] != theme) {
     save['graph_theme'] = theme;
     save['graph_adaptor'] = new WfAdaptor($('body').data('theme-base') + '/' + theme + '/theme.js',function(graphrealization){
+      manifestation.endpoints = save.endpoints_list;
+      graphrealization.draw_labels = function(max,labels,shift) {
+        $('#graphcanvas').css('grid-row', '1/span ' +( max.row + 1));
+        $('#graphgrid .graphlabel').remove();
+        $('#graphgrid').css('grid-template-rows', shift + 'px repeat(' + max.row + ', 1fr)');
+        var tlabels = {};
+        var tcolumns = [];
+        _.each(labels,function(val){
+          if (val.label != "") {
+            tlabels[val.row] = [];
+            _.each(val.label,function(col) {
+              if (!tcolumns.includes(col.column)) {
+                tcolumns.push(col.column);
+              }
+              tlabels[val.row][tcolumns.indexOf(col.column)] = col.value;
+            });
+          }
+        });
+        for (var i = 0; i < max.row; i++) {
+          _.each(tlabels[i+1],function(col,j) {
+            if (col != undefined) {
+              $('#graphgrid').append($('<div class="graphlabel" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + shift + 'px"><span>' + col + '</span></div>'));
+            }
+          });
+        }
+      };
       graphrealization.set_svg_container($('#graphcanvas'));
+      graphrealization.set_css_container($('#graphgrid'));
       graphrealization.set_description($(dslx), true);
       graphrealization.notify = function(svgid) {
         var g = graphrealization.get_description();
@@ -430,7 +460,7 @@ function adaptor_init(url,theme,dslx) { //{{{
     });
   } else {
     save['graph_adaptor'].update(function(graphrealization){
-      var svgid = manifestation.clicked();
+      var svgid = manifestation.selected();
       graphrealization.set_description($(dslx));
       adaptor_update();
       manifestation.events.click(svgid);
@@ -556,11 +586,13 @@ function monitor_instance_state_change(notification) { //{{{
 
     var but = "";
     if (notification == "ready" || notification == "stopped") {
+      $('#state_extended').show();
       $("button[name=state_start]").show();
       $("button[name=state_stop]").hide();
       $("button[name=state_sim]").show();
       $("button[name=state_abandon]").show();
     } else if (notification == "running") {
+      $('#state_extended').hide();
       $("button[name=state_start]").hide();
       $("button[name=state_stop]").show();
       $("button[name=state_sim]").hide();
@@ -574,8 +606,9 @@ function monitor_instance_state_change(notification) { //{{{
       save['graph_adaptor'].illustrator.get_elements().removeClass('marked');
     }
 
-    if (notification == "finished") {
+    if (notification == "finished" || notification == "abandoned") {
       $('.tabbehind button').hide();
+      $('#state_any').hide();
     } else {
       $('#parameters .tabbehind button').show();
     }
@@ -1146,8 +1179,8 @@ function format_visual_clear() {//{{{
   $('.super .vote').each(function(a,b){b.setAttribute('class','vote');});
   $('.super .colon').each(function(a,b){b.setAttribute('class','colon');});
   $('.activities').each(function(a,b){
-    if (b.hasAttribute('clicked')) {
-      b.setAttribute('class','activities clicked');
+    if (b.hasAttribute('selected')) {
+      b.setAttribute('class','activities selected');
     } else {
       b.setAttribute('class','activities');
     }

data/cockpit/js/wfadaptor.js

@@ -42,13 +42,19 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
   this.set_description = function(desc,auto_update) { // public {{{
     this.description.set_description(desc,auto_update);
   } // }}}
+
   this.get_description = function() { // public {{{
     return description.get_description();
   } // }}}
   this.notify = function() { // public {{{
   } // }}}
+  this.draw_labels = function(max,labels){ // public {{{
+  } // }}}
   this.set_svg_container = function (container) { // {{{
-    illustrator.set_container(container); // TODO: shadowing the container element
+    illustrator.set_svg_container(container); // TODO: shadowing the container element
+  } // }}}
+  this.set_css_container = function(container) { // {{{
+    illustrator.set_css_container(container);
   } // }}}
 
   // initialize
@@ -59,21 +65,27 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
 
   $.getScript(theme_base, function() {
     manifestation = new WFAdaptorManifestation(self);
-    illustrator.noarrow = manifestation.noarrow;
     illustrator.compact = manifestation.compact == true ? true : false;
     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
+      if (manifestation.elements[element].parent) {
+        if (!manifestation.elements[element].description) {
           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
+        if (!manifestation.elements[element].adaptor) {
           manifestation.elements[element].adaptor = manifestation.elements[manifestation.elements[element].parent].adaptor;
         }
+        var ill = manifestation.elements[manifestation.elements[element].parent].illustrator;
+        for (var key in ill) {
+          if (manifestation.elements[element].illustrator[key] == undefined) {
+            manifestation.elements[element].illustrator[key] = ill[key];
+          }
+        }
+        if (manifestation.elements[element].type == undefined) {
+          manifestation.elements[element].type = manifestation.elements[manifestation.elements[element].parent].type;
+        }
       }
     }
     // doit
@@ -146,7 +158,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     // public
     this.height = 40;
     this.width = 40;
-    this.noarrow = [];
+    this.shift = this.height * 0.26;
     this.elements = {}; // the svgs
     this.svg = {};
     this.draw = {};
@@ -156,7 +168,10 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     var adaptor = null;
   // }}}
   // Generic Functions {{{
-  this.set_container = function(con) { // {{{
+  this.set_css_container = function(con) { // {{{
+    self.svg.css = con;
+  } // }}}
+  this.set_svg_container = function(con) { // {{{
     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">' +
@@ -174,14 +189,15 @@ function WfIllustrator(wf_adaptor) { // View  {{{
         $.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)', 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;
-    self.svg.container.attr({'height': (graph.max.row+0.3)*self.height, 'style': "min-width: " + (graph.max.col+0.55)*self.width + "px"});
+    self.svg.container.attr('height',   (graph.max.row) * self.height + self.shift);
+    self.svg.container.attr('width',    (graph.max.col+0.55) * self.width );
     self.svg.container.append(graph.svg);
   } // }}}
   this.get_node_by_svg_id = function(svg_id) { // {{{
@@ -211,18 +227,24 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     else {self.svg.container.children('g:first').append(g);}
     return g;
   } // }}}
-  var draw_symbol = this.draw.draw_symbol = function (tname, sym_name, id, title, row, col, group) { // {{{
-    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  + '" xmlns="http://www.w3.org/2000/svg">' +
-                  '<g transform="translate(' + String((col*self.width)-((self.width*0.39))) + ',' + String(row*self.height-((self.height*0.74))) + ')">' +
-                    '<text class="super" transform="translate(30,8.4)">' +
-                      '<tspan class="active">0</tspan>' +
-                      '<tspan class="colon">,</tspan>' +
-                      '<tspan class="vote">0</tspan>' +
-                    '</text>' +
-                  '</g>' +
-               '</g>');
-    var sym = self.svg.defs[sym_name].clone();
+  var draw_symbol = this.draw.draw_symbol = function (sname, id, title, row, col, group, addition) { // {{{
+    if(self.elements[sname] == undefined || self.elements[sname].svg == undefined) sname = 'unknown';
+    if (addition) {
+      var g = $X('<g class="element" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
+                    '<g transform="translate(' + String((col*self.width)-((self.width*0.39))) + ',' + String(row*self.height-((self.height*0.74))) + ')"></g>' +
+                 '</g>');
+    } else {
+      var g = $X('<g class="element" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
+                    '<g transform="translate(' + String((col*self.width)-((self.width*0.39))) + ',' + String(row*self.height-((self.height*0.74))) + ')">' +
+                      '<text class="super" transform="translate(30,8.4)">' +
+                        '<tspan class="active">0</tspan>' +
+                        '<tspan class="colon">,</tspan>' +
+                        '<tspan class="vote">0</tspan>' +
+                      '</text>' +
+                    '</g>' +
+                 '</g>');
+    }
+    var sym = self.svg.defs[sname].clone();
     var tit = $X('<title xmlns="http://www.w3.org/2000/svg"></title>');
         tit.text(title);
     sym.prepend(tit);
@@ -230,7 +252,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     $(g[0].childNodes[0]).append(sym);
 
     // Binding events for symbol
-    bind_event(sym,tname);
+    bind_event(sym,sname);
 
     if(group) {group.append(g);}
     else {self.svg.container.children('g:first').append(g);}
@@ -298,16 +320,13 @@ function WfIllustrator(wf_adaptor) { // View  {{{
         );
       } else {
         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+15) + "," + String(start['row']*self.height-15) +" "+
+                              String(end['col']*self.width+15) + "," + String(end['row']*self.height+15)+" "+
                               String(end['col']*self.width) + "," + String(end['row']*self.height-15)
         );
       }
     }
-    // Seems to solve injection groups-line problem, but I guess it will cause problem when collapsing elements
-    //if(group) {group.prepend(line);}
-    //else
-    {self.svg.container.append(line);}
+    self.svg.container.append(line);
   } //  }}}
   // }}}
   // Initialize {{{
@@ -333,12 +352,16 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   // Set Labels //{{{
   this.set_labels = function(graph) {
     if (illustrator.compact == false) {
-      if (labels.length > 0) {
-        _.each(labels,function(a,key) {
-          illustrator.draw.draw_label(a.tname, a.element_id, a.label, a.row, graph.max.col + 1, graph.svg);
-        });
-      }
+      adaptor.draw_labels(graph.max,labels,illustrator.shift);
     }
+    // if (illustrator.compact == false) {
+    //   if (labels.length > 0) {
+    //     var csscol = 0;
+    //     _.each(labels,function(a,key) {
+    //       // illustrator.draw.draw_label(a.tname, a.element_id, a.label, a.row, graph.max.col + 1, graph.svg);
+    //     });
+    //   }
+    // }
   } //}}}
 
   // Generic Functions {{{
@@ -355,7 +378,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     id_counter = {};
     labels = [];
     illustrator.clear();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false});
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
     self.set_labels(graph);
     // set labels
     illustrator.set_svg(graph);
@@ -501,30 +524,30 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     var max = {'row': 0,'col': 0};
     var prev = [parent_pos]; // connects parent with child(s), depending on the expansion
     var endnodes = [];
+    var sname = sym_name(root.tagName,root);
     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 .tagName == 'description') { // First parsing {{{
+    if(root.tagName == 'description') { // First parsing {{{
       pos.row++;
-      max.row++;
       $(root).attr('svg-id','description');
       group.attr('element-id','group-description');
-      illustrator.draw.draw_symbol('start', 'start', 'description', 'START', pos.row, pos.col, group);
+      illustrator.draw.draw_symbol('start', 'description', 'START', pos.row, pos.col, group);
     } // }}}
 
-    $(root).children().each(function() {
-      var tname = this.tagName;
-      pos.final = illustrator.elements[tname].final ? true : false;
+    $(root).children().filter(function(){ return this.localName[0] != '_'; }).each(function() {
+      var context = this;
+      var tname = context.tagName;
+      var sname = sym_name(tname,context);
+      pos.final = illustrator.elements[sname].final ? true : false;
+      pos.wide = illustrator.elements[sname].wide ? true : false;
 
       // Calculate next position {{{
-      if($(this).attr('collapsed') == undefined || $(this).attr('collapsed') == 'false') { collapsed = false; }
-      else { collapsed = true; }
       if(root_expansion == 'vertical')  pos.row++;
       if(root_expansion == 'horizontal')  {
         pos.col++;
@@ -534,100 +557,165 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           }
         }
       }
-      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'complex' && !collapsed) {
+
+      if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'complex') {
         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));
+        block = parse(context, 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-' + $(context).attr('svg-id'));
+        if(illustrator.elements[sname].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 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)]);
+          block.endnodes = [pos];
           block.svg = group;
         }
       }
       // }}}
       // Set SVG-ID and labels {{{
-      if($(this).attr('id') == undefined) {
+      if($(context).attr('id') == undefined) {
         if(id_counter[tname] == undefined) id_counter[tname] = -1;
-        $(this).attr('svg-id', tname + '_' + (++id_counter[tname]));
+        $(context).attr('svg-id', tname + '_' + (++id_counter[tname]));
       } else {
-        $(this).attr('svg-id',  $(this).attr('id'));
+        $(context).attr('svg-id',  $(context).attr('id'));
       }
-      if (illustrator.elements[tname].label) {
-        var lab = illustrator.elements[tname].label(this);
-        $(this).attr('svg-label', lab);
-        labels.push({row: pos.row, element_id: $(this).attr('svg-id'), tname: tname, label: lab});
+      if (illustrator.elements[sname].label) {
+        var lab = illustrator.elements[sname].label(context);
+        $(context).attr('svg-label', lab);
+        labels.push({row: pos.row, element_id: $(context).attr('svg-id'), tname: tname, label: lab});
       } else {
-        $(this).attr('svg-label', '');
+        $(context).attr('svg-label', '');
       } // }}}
-      // Draw symbol {{{
-      var sym_name = '';
-      if(!illustrator.elements[tname])                                         {sym_name = 'unknown';}
-      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;}
-      $(this).attr('svg-type',tname);
-      $(this).attr('svg-subtype',sym_name);
-      if((illustrator.elements[tname] && illustrator.elements[tname].svg) || sym_name == 'unknown') {
-        var g = 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');
-        if (illustrator.elements[sym_name].info) {
-          var info = illustrator.elements[sym_name].info(this);
-          _.each(info,function(val,key) {
-            g.attr(key, val);
-          });
-        }
-      } 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
-        for(node in block.endnodes) {
-          if (!block.endnodes[node].final) {
-            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
-      } else { endnodes = [jQuery.extend(true, {}, pos)]; } // sets this element as only endpoint (aggregate)
-      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,illustrator.noarrow) == -1) {
-          for (node in prev) {
-            if (!prev[node].final)
-              illustrator.draw.draw_connection(group, prev[node], pos, null, null, true);
-          }
-        } else {
-          for(node in prev) {
-            if (!prev[node].final)
-              illustrator.draw.draw_connection(group, prev[node], pos, null, null, false);
-          }
-        }
-      }
-      // }}}
+
+      var g;
+      [g, endnodes] = draw_position(tname,pos,prev,block,group,endnodes,context);
+
       // 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
       if(root_expansion == 'horizontal') pos.col = block.max.col;
       if(max.row < block.max.row) max.row = block.max.row;
       if(max.col < block.max.col) max.col = block.max.col;
       // }}}
+
+      if (illustrator.elements[sname].closing_symbol) {
+        pos.row++;
+        max.row++;
+        block.max.row = pos.row;
+        if (illustrator.elements[sname].endnodes == 'this') {
+          pos.col++;
+          if (pos.col > max.col) {
+            max.col++;
+            block.max.col = pos.col;
+          }
+          draw_position(illustrator.elements[sname].closing_symbol,pos,block.endnodes,block,group,[],context,g);
+          pos.col--;
+        } else {
+          [undefined, endnodes] = draw_position(illustrator.elements[sname].closing_symbol,pos,prev,block,group,[],context,g);
+        }
+        prev = jQuery.extend(true, {}, endnodes);
+      }
     });
 
-    if($(root).children().length == 0) { // empty complex found
+    if($(root).children().filter(function(){ return this.attributes['svg-id'] != undefined; }).length == 0) { // empty complex found
       endnodes = [parent_pos];
       max.row = parent_pos.row;
       max.col = parent_pos.col;
     }
-    if(illustrator.elements[root.tagName].endnodes == 'this' && illustrator.elements[root.tagName].closeblock == false) {endnodes = [prev];} // closeblock == false, allows loop to close himselfe
+
+    if((illustrator.elements[root.tagName].endnodes == 'this' || illustrator.elements[sname].endnodes == 'this') && illustrator.elements[root.tagName].closeblock == false) {endnodes = prev;} // closeblock == false, allows loop to close himself
+
+    if(root.tagName == 'description' && illustrator.elements[root.tagName].closing_symbol) {
+      pos.row++;
+      max.row = pos.row;
+      draw_position(illustrator.elements['start'].closing_symbol,pos,prev,block,group,[],this,group);
+    }
+
     return {'endnodes': endnodes, 'max':max, 'svg':group};
   } // }}}
-  // }}}
+  var sym_name = function(tname,context) { //{{{
+    var sname;
+    if(!illustrator.elements[tname])                                         {sname = 'unknown';}
+    else if(typeof illustrator.elements[tname].resolve_symbol == 'function') {sname = illustrator.elements[tname].resolve_symbol(context,illustrator.elements[tname].col_shift ? illustrator.elements[tname].col_shift(context) : undefined);}
+    else if(typeof illustrator.elements[tname].resolve_symbol == 'string')   {sname = illustrator.elements[tname].resolve_symbol;}
+    else                                                                     {sname = tname;}
+    return sname;
+  } //}}}
+  var draw_position = function(tname,pos,prev,block,group,endnodes,context,second) { // private {{{
+    var sname = sym_name(tname,context);
+    // Draw Symbol {{{
+    if (second) {
+      illustrator.draw.draw_symbol(sname, $(context).attr('svg-id'), $(context).attr('svg-label'), pos.row, pos.col, second, true).addClass(illustrator.elements[sname] ? illustrator.elements[sname].type : 'primitive unknown');
+    } else {
+      $(context).attr('svg-type',tname);
+      $(context).attr('svg-subtype',sname);
+      if((illustrator.elements[sname] && illustrator.elements[sname].svg) || sname == 'unknown') {
+        var g = illustrator.draw.draw_symbol(sname, $(context).attr('svg-id'), $(context).attr('svg-label'), pos.row, pos.col, block.svg).addClass(illustrator.elements[sname] ? illustrator.elements[sname].type : 'primitive unknown');
+        if (illustrator.elements[sname].info) {
+          var info = illustrator.elements[sname].info(context);
+          _.each(info,function(val,key) {
+            g.attr(key, val);
+          });
+        }
+      } else { console.log("no icon "+ sname);}
+      if(illustrator.elements[sname] && illustrator.elements[sname].border) {
+        var wide = (illustrator.elements[sname].wide == true && block.max.col == pos.col) ? pos.col + 1 : block.max.col;
+        if (illustrator.elements[sname].closing_symbol) {
+          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: (illustrator.elements[sname].closing_symbol ? block.max.row+1 : block.max.row) }, block.svg);
+        } else {
+          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: (illustrator.elements[sname].closing_symbol ? block.max.row+1 : block.max.row) }, block.svg);
+        }
+      }
+      if(illustrator.elements[sname] && illustrator.elements[sname].type == 'complex') {
+        var wide = (illustrator.elements[sname].wide == true && block.max.col == pos.col) ? pos.col + 1 : block.max.col;
+        if (illustrator.elements[sname].closing_symbol) {
+          illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row + 1 }, block.svg);
+        } else {
+          illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row }, block.svg);
+        }
+      }
+    }
+    // }}}
+    // Calculate Connection {{{
+    if(illustrator.elements[sname] != undefined && illustrator.elements[sname].closeblock) { // Close Block if element e.g. loop
+      for(node in block.endnodes) {
+        if (!block.endnodes[node].final) {
+          illustrator.draw.draw_connection(group, block.endnodes[node], pos, block.max.row+1, block.endnodes.length, true);
+        }
+      }
+    }
+    if(illustrator.elements[sname] != undefined && illustrator.elements[sname].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 (aggregate)
+    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 (illustrator.elements[sname].noarrow == undefined || illustrator.elements[sname].noarrow == false) {
+        for (node in prev) {
+          if (!prev[node].final) {
+            if (prev[node].wide) {
+              var pn = jQuery.extend(true, {}, prev[node]);
+              if (pos.col > prev[node].col) {
+                pn.col = pos.col;
+              }
+              illustrator.draw.draw_connection(group, pn, pos, null, null, true);
+            } else {
+              illustrator.draw.draw_connection(group, prev[node], pos, null, null, true);
+            }
+          }
+        }
+      } else {
+        for(node in prev) {
+          if (!prev[node].final)
+            illustrator.draw.draw_connection(group, prev[node], pos, null, null, false);
+        }
+      }
+    }
+    // }}}
+    return [g, endnodes];
+  } // }}}
+  //  }}}
 
   //  Initialze {{{
   adaptor = wf_adaptor;