cpee 2.1.91 → 2.1.93

data/cockpit/js/wfadaptor.js

@@ -14,6 +14,8 @@
   <http://www.gnu.org/licenses/>.
 */
 
+var high;
+
 // TODO: changes in svg-script:
 // 1) drawing functions
 // 2) creation of svg-container (Bug: arrows on lines)
@@ -63,9 +65,10 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
 
   this.update = function(doit){ doit(self); };
 
-  $.getScript(theme_base, function() {
+  $.getScript(theme_base, function() { //{{{
     manifestation = new WFAdaptorManifestation(self);
     illustrator.compact = manifestation.compact == true ? true : false;
+    illustrator.rotated_labels = manifestation.rotated_labels == true ? true : false;
     illustrator.striped = manifestation.striped == true ? true : false;
     description.source = manifestation.source;
     var deferreds = [];
@@ -166,7 +169,7 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
           manifestation.elements[element].description = [ manifestation.elements[element].description ];
         }
         if ($.isArray(manifestation.elements[element].description)) {
-          _.each(manifestation.elements[element].description,function(val,ind){
+          manifestation.elements[element].description.forEach(function(val,ind){
             deferreds.push(
               $.ajax({
                 type: "GET",
@@ -189,7 +192,7 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
     $.when.apply($, deferreds).then(function(x) {
       doit(self);
     });
-  });
+  }); //}}}
 } // }}}
 
 // WfIllustrator:
@@ -197,33 +200,44 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
 function WfIllustrator(wf_adaptor) { // View  {{{
   // Variable {{{
     // public
+    this.endclipshift = 17;
     this.height = 40;
     this.width = 40;
     this.default_width = 40;
     this.default_height = 40;
     this.height_shift = this.height * 0.26;
     this.width_shift = this.width * 0.39;
+    this.width_shift_label = 7;
+    this.group_extend = 1;
     this.elements = {}; // the svgs
     this.svg = {};
     this.draw = {};
+    this.dim = {};
+    this.dim.symbols = [];
+    this.dim.connections = [];
     this.compact = true;
+    this.rotated_labels = true;
     this.striped = true;
+    this.global_style = {};
     // private
     var self = this;
     var adaptor = null;
   // }}}
-  // Generic Functions {{{
+  // Internal Functions
   this.set_label_container = function(con) { // {{{
     self.svg.label_container = 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">' +
+      '  <marker id="arrow" viewBox="0 0 10 10" refX="28.5" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="14" markerHeight="3.5">' +
       '    <path d="m 2 2 l 6 3 l -6 3 z"/>' +
       '  </marker>' +
-      '  <clipPath id="squareclip">' +
-      '    <rect x="-1" y="-1" width="32" height="32"/>' +
+      '  <clipPath id="startclip">' +
+      '    <rect x="-1" y="-1" width="29" height="32"/>' +
+      '  </clipPath>' +
+      '  <clipPath id="endclip">' +
+      '    <rect x="20" y="-1" width="' + self.endclipshift + '" height="35"/>' +
       '  </clipPath>' +
       '</defs>'));
     self.svg.defs = {};
@@ -238,16 +252,28 @@ function WfIllustrator(wf_adaptor) { // View  {{{
         self.svg.defs[element] = sym;
       }
   } // }}}
-  var clear = this.clear = function() { // {{{
-    $('> :not(defs)', self.svg.container).each(function() {$(this).remove()});
+  this.set_svg_direct = function(svg) { // {{{
+    self.svg.container.append(svg);
+    let bb = svg[0].getBBox();
+    self.svg.container.attr('height', bb.y + bb.height + self.height_shift); // small border on the bottom
+    self.svg.container.attr('width',  bb.x + bb.width + self.width_shift);  // small border on the right
   } // }}}
   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) * self.height + self.height_shift);
-    self.svg.container.attr('width',    (graph.max.col+0.55) * self.width );
     self.svg.container.append(graph.svg);
+    let bb = graph.svg[0].getBBox();
+    self.svg.container.attr('height', bb.y + bb.height + self.height_shift); // small border on the bottom
+    self.svg.container.attr('width',  bb.x + bb.width + self.width_shift);  // small border on the right
+    self.svg.container.attr('data-pos-matrix', JSON.stringify(self.dim.symbols));
+    self.svg.container.attr('data-con-list', JSON.stringify(self.dim.connections));
   } // }}}
+  this.set_duration = function(start) { //{{{
+    self.svg.container.append(
+      $X('<text class="duration" transform="translate(3,' + self.height_shift + ') rotate(90)" xmlns="http://www.w3.org/2000/svg">' +
+         Math.trunc(performance.now()-start) + ' ms' +
+         '</text>')
+    );
+  } //}}}
+
   this.get_node_by_svg_id = function(svg_id) { // {{{
     return $('[element-id = \'' + svg_id + '\'] g.activities', self.svg.container);
   } // }}}
@@ -260,126 +286,510 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   this.get_labels = function() { // {{{
     return $('[element-id]', self.svg.label_container);
   } // }}}
-  // }}}
+
+  // External Functions
+  var clear = this.clear = function() { // {{{
+    $('> :not(defs)', self.svg.container).each(function() {$(this).remove()});
+    $('> defs > [belongs-to=element]', self.svg.container).each(function() {$(this).remove()});
+    self.dim.symbols = [];
+  } // }}}
+  var get_symbol = this.get_symbol = function() { // {{{
+  } // }}}
+  var get_properties = this.get_symbol = function() { // {{{
+  } // }}}
+
   // Helper Functions {{{
-  var get_y = this.draw.get_y = function (row) { // {{{
+  var debug_dim = this.dim.debug = function() { //{{{
+    line = '\n';
+    for (let i=1; i < self.dim.symbols.length; i++) {
+      line += $.sprintf('%02d',i) + ': ';
+      if (self.dim.symbols[i]) {
+        for (let j=1; j < self.dim.symbols[i].length; j++) {
+          line += ' [ ';
+          if (self.dim.symbols[i] && self.dim.symbols[i][j] && self.dim.symbols[i][j].x) { line += $.sprintf('%3d',self.dim.symbols[i][j].x); } else { line += '   '; }
+          line += ', ';
+          if (self.dim.symbols[i] && self.dim.symbols[i][j] && self.dim.symbols[i][j].width) { line += $.sprintf('%3d',self.dim.symbols[i][j].width); } else { line += '   '; }
+          line += ' ] ';
+        }
+      }
+      line += "\n";
+    }
+    return line;
+  } //}}}
+
+  var set_x = this.dim.set_x = function(row,col,twidth,sname) { //{{{
+    if (!self.dim.symbols[row]) { self.dim.symbols[row] = []; }
+    if (!self.dim.symbols[row][col]) { self.dim.symbols[row][col] = {}; }
+
+    if (self.dim.symbols[row-1] && self.dim.symbols[row-1][col] && self.dim.symbols[row-1][col].x) { // row before
+      self.dim.symbols[row][col].x = self.dim.symbols[row-1][col].x;
+    } else if (self.dim.symbols[row] && self.dim.symbols[row][col-1] && self.dim.symbols[row][col-1].x) { // column before
+      let mx = 0;
+      for (let i=row; i<self.dim.symbols.length; i++) {
+        if (self.dim.symbols[i][col-1] && mx < self.dim.symbols[i][col-1].x + self.dim.symbols[i][col-1].width) {
+          mx = self.dim.symbols[i][col-1].x + self.dim.symbols[i][col-1].width;
+        }
+      }
+      self.dim.symbols[row][col].x = mx;
+    } else if (self.dim.symbols[row-1] && self.dim.symbols[row-1][col-1] && self.dim.symbols[row-1][col-1].x) { // diagonal left above
+      self.dim.symbols[row][col].x = self.dim.symbols[row-1][col-1].x + self.dim.symbols[row-1][col-1].width;
+    } else if (self.dim.symbols.length > row + 1) { // same column below
+      let mx = 0;
+      for (let i=row; i<self.dim.symbols.length; i++) {
+        if (self.dim.symbols[i] && self.dim.symbols[i][col] && mx < self.dim.symbols[i][col].x) {
+          mx = self.dim.symbols[i][col].x;
+        }
+      }
+      self.dim.symbols[row][col].x = mx;
+    } else { // same column above
+      let mx = 0;
+      for (let i=row; i>0; i--) {
+        if (self.dim.symbols[i] && self.dim.symbols[i][col] && mx < self.dim.symbols[i][col].x) {
+          mx = self.dim.symbols[i][col].x;
+        }
+      }
+      self.dim.symbols[row][col].x = mx;
+    }
+    if (self.dim.symbols[row][col].width) {
+      if (twidth > self.dim.symbols[row][col].width) {
+        self.dim.symbols[row][col].width = twidth;
+      }
+    } else {
+      self.dim.symbols[row][col].width = twidth;
+    }
+    self.dim.symbols[row][col].type = sname;
+    // console.log('set_x ',row,col,debug_dim());
+  } //}}}
+  var set_x_cond = this.dim.set_x_cond = function(row,col,tx,twidth,sname,label,subtype) { //{{{
+    if (!self.dim.symbols[row]) { self.dim.symbols[row] = []; }
+    if (!self.dim.symbols[row][col] || self.dim.symbols[row][col].width < twidth) {
+      self.dim.symbols[row][col] = {};
+      self.dim.symbols[row][col].x = tx;
+      self.dim.symbols[row][col].width = twidth;
+    }
+    self.dim.symbols[row][col].type = sname;
+    self.dim.symbols[row][col].label = label;
+    self.dim.symbols[row][col].subtype = subtype;
+    // console.log('set_x_cond',row,col,debug_dim());
+  } //}}}
+
+  var get_x = this.dim.get_x = function(row,col,deb='') { //{{{
+    if (row<0) { row = 0 };
+
+    let mlen = 0;
+    if (self.dim.symbols[row] && self.dim.symbols[row][col] && self.dim.symbols[row][col].x) { // this column
+      mlen = self.dim.symbols[row][col].x;
+    } else if (self.dim.symbols[row] && !self.dim.symbols[row][col] && self.dim.symbols.length > row && self.dim.symbols[row+1] && self.dim.symbols[row+1][col] && self.dim.symbols[row+1][col].x ) { // row after
+      mlen = self.dim.symbols[row+1][col].x;
+    } else if (self.dim.symbols[row-1] && self.dim.symbols[row-1][col] && self.dim.symbols[row-1][col].x) { // row before
+      mlen = self.dim.symbols[row-1][col].x;
+    } else if (self.dim.symbols[row] && self.dim.symbols[row][col-1] && self.dim.symbols[row][col-1].x) { // column before
+      for (let i=row; i<self.dim.symbols.length; i++) {
+        if (self.dim.symbols[i][col-1] && mlen < self.dim.symbols[i][col-1].x + self.dim.symbols[i][col-1].width) {
+          mlen = self.dim.symbols[i][col-1].x + self.dim.symbols[i][col-1].width;
+        }
+      }
+    } else if (self.dim.symbols[row+1] && self.dim.symbols[row+1][col] && self.dim.symbols[row+1][col].x) { // directly below
+      mlen = self.dim.symbols[row+1][col].x;
+    } else if (self.dim.symbols[row-1] && self.dim.symbols[row-1][col-1] && self.dim.symbols[row-1][col-1].x) { // diagonal left above
+      mlen = self.dim.symbols[row-1][col-1].x + self.dim.symbols[row-1][col-1].width;
+    } else { // same column below
+      for (let i=row; i<self.dim.symbols.length; i++) {
+        if (self.dim.symbols[i] && self.dim.symbols[i][col] && mlen < self.dim.symbols[i][col].x + self.dim.symbols[i][col].width) {
+          mlen = self.dim.symbols[i][col].x;
+        }
+      }
+      // found nothing in the rows below
+      if (mlen == 0) { // mostly for column 0
+        mlen = self.width;
+      }
+    }
+    // console.log(deb,row,col,'--> ' + mlen,debug_dim());
+    return mlen;
+  } //}}}
+  var get_x_plus = this.dim.get_x_plus = function(rowf,rowt,col,deb='') { //{{{
+    if (rowf<0) { row = 0 };
+
+    mlen = 0;
+    for (let i=rowf; i<=rowt; i++) {
+      if (self.dim.symbols[i] && self.dim.symbols[i][col] && mlen < self.dim.symbols[i][col].x + self.dim.symbols[i][col].width) {
+        mlen = self.dim.symbols[i][col].x + self.dim.symbols[i][col].width;
+      }
+    }
+    // console.log(deb,rowf,rowt,col,'--> ' + mlen,debug_dim());
+    return mlen;
+  } //}}}
+  var get_x_width = this.dim.get_x_width = function(maxcol) { //{{{
+    let cwidth = 0;
+    for (let i=0; i < self.dim.symbols.length; i++) {
+      let lwidth = 0;
+      for (let j=0; j <= maxcol; j++) {
+        if (typeof self.dim.symbols[i] !== 'undefined' && typeof self.dim.symbols[i][j] !== 'undefined') {
+          lwidth += self.dim.symbols[i][j].width;
+        } else {
+          // go up the column and find the next valid value
+          let x = i;
+          let found = false;
+          while (x > 0 && !found) {
+            x -= 1;
+            if (typeof self.dim.symbols[x] !== 'undefined' && typeof self.dim.symbols[x][j] !== 'undefined') {
+              lwidth += self.dim.symbols[x][j].width;
+              found = true;
+            }
+          }
+          if (!found) {
+            lwidth[i] += self.width;
+          }
+        }
+      }
+      if (cwidth < lwidth) { cwidth = lwidth; }
+    }
+    return cwidth;
+  } //}}}
+
+  var get_y = this.draw.get_y = function(row) { // {{{
     return { y: row * self.height - self.height, height_shift: self.height_shift};
   } // }}}
 
+  var get_width = this.draw.get_width = function(g) { //{{{
+    let t = g.clone();
+    self.svg.container.append(t);
+    let bb = t[0].getBBox();
+    let w = bb.width - bb.x;
+    t.remove();
+    return w;
+  } //}}}
+  var get_height = this.draw.get_height = function(g) { //{{{
+    let t = g.clone();
+    self.svg.container.append(t);
+    let bb = t[0].getBBox();
+    let h = bb.height - bb.y;
+    t.remove();
+    return h;
+  } //}}}
+  var get_dim = this.draw.get_dim = function(g) { //{{{
+    let element = g.clone();
+    self.svg.container.append(element);
+    let svg = element[0].ownerSVGElement;
+
+    var r = element[0].getBBox();
+
+    if (!svg) {
+      element[0].remove();
+      return { x: 0, y: 0, cx: 0, cy: 0, width: 0, height: 0 };
+    }
+
+    var p = svg.createSVGPoint();
+
+    var matrix = svg.getScreenCTM().inverse().multiply(element[0].getScreenCTM());
+
+    p.x = r.x;
+    p.y = r.y;
+    var a = p.matrixTransform(matrix);
+
+    p.x = r.x + r.width;
+    p.y = r.y;
+    var b = p.matrixTransform(matrix);
+
+    p.x = r.x + r.width;
+    p.y = r.y + r.height;
+    var c = p.matrixTransform(matrix);
+
+    p.x = r.x;
+    p.y = r.y + r.height;
+    var d = p.matrixTransform(matrix);
+
+    var minX = Math.min(a.x, b.x, c.x, d.x);
+    var maxX = Math.max(a.x, b.x, c.x, d.x);
+    var minY = Math.min(a.y, b.y, c.y, d.y);
+    var maxY = Math.max(a.y, b.y, c.y, d.y);
+
+    var width = maxX - minX;
+    var height = maxY - minY;
+
+    element.remove();
+
+    return {
+      x: minX,
+      y: minY,
+      width: width,
+      height: height,
+      cx: minX + width / 2,
+      cy: minY + height / 2
+    };
+  } //}}}
+
+  var bind_event = this.draw.bind_event = function(sym,tname,context) { //{{{
+    for(event_name in adaptor.elements[tname]) {
+      sym.bind(event_name, {'function_call':adaptor.elements[tname][event_name]}, function(e) { e.data.function_call($(this).attr('element-id'),e)});
+      if(event_name == 'mousedown') sym.bind('contextmenu', false);
+    }
+  } //}}}
+
   var draw_stripe = this.draw.draw_stripe = function (row, maxcol) { // {{{
     if (maxcol < 1) maxcol = 1;
-    var g = $X('<rect element-row="' + row + '" class="stripe ' + (row % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + String(row*self.height+self.height_shift/2) + '" width="' + (self.width * maxcol + self.width - self.width_shift) + '" height="' + (self.height) + '" xmlns="http://www.w3.org/2000/svg"></rect>');
+
+    let cwidth = get_x_width(maxcol);
+    cwidth = cwidth + 2 * self.width - self.width_shift;
+
+    var g = $X('<rect element-row="' + row + '" class="stripe ' + (row % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + String(row*self.height+self.height_shift/2) + '" width="' + cwidth + '" height="' + (self.height) + '" xmlns="http://www.w3.org/2000/svg"></rect>');
     self.svg.container.prepend(g);
     return g;
   } // }}}
-
-  var draw_symbol = this.draw.draw_symbol = function (sname, id, title, row, col, group, addition) { // {{{
+  var draw_symbol = this.draw.draw_symbol = function(sname, id, title, parent_row, max_row, row, col, group, addition, info, style) { // {{{
     if(self.elements[sname] == undefined || self.elements[sname].svg == undefined) sname = 'unknown';
     let center_x = (self.width - self.default_width) / 2;
     let center_y = (self.height - self.default_height) / 2;
-    if (addition) {
-      var g = $X('<g class="element" element-row="' + (row-1) + '" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
-                    '<g transform="translate(' + String(col*self.width+center_x-self.width_shift) + ',' + String(row*self.height+center_y-(self.height-self.height_shift)) + ')"></g>' +
-                 '</g>');
-    } else {
-      var g = $X('<g class="element" element-row="' + (row-1) + '" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
-                    '<g transform="translate(' + String(col*self.width+center_x-self.width_shift) + ',' + String(row*self.height+center_y-(self.height-self.height_shift)) + ')">' +
-                      '<text class="super" transform="translate(' + (self.default_width-10) + ',8.4)">' +
-                        '<tspan class="active">0</tspan>' +
-                        '<tspan class="colon">,</tspan>' +
-                        '<tspan class="vote">0</tspan>' +
-                      '</text>' +
-                    '</g>' +
-                 '</g>');
+
+    let dstart = get_x(parent_row,col,'symbol ' + sname);
+
+    let sstart = dstart            + center_x - self.width_shift;
+    let stop   = row * self.height + center_y - (self.height-self.height_shift);
+
+    var g = $X('<g class="element" element-row="' + (row-1) + '" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
+                  '<g transform="translate(' + String(sstart) + ',' + String(stop) + ')"></g>' +
+               '</g>');
+
+    // add the element-endpoint and other stuff to each symbol (from theme info function)
+    for (const key in info) {
+      g.attr(key, info[key]);
     }
+
     var sym = self.svg.defs[sname].clone();
+    var subtype = undefined;
+
+    if (g.attr('element-endpoint')) {
+      let tsym = self.get_symbol(g.attr('element-endpoint'));
+      if (tsym) {
+        let found = false;
+        $('.part-end',sym).remove();
+        if ($('.part-end',tsym).length > 0) {
+          sym.prepend($('.part-end',tsym).clone());
+          found = true;
+        }
+        if ($('.part-middle',tsym).length > 0) {
+          $('.part-middle',sym).remove();
+          sym.prepend($('.part-middle',tsym).clone());
+          found = true;
+        }
+        if ($('.part-start',tsym).length > 0) {
+          $('.part-start',sym).remove();
+          sym.prepend($('.part-start',tsym).clone());
+          found = true;
+        }
+        if ($('.part-normal',tsym).length > 0) {
+          $('.part-normal',sym).remove();
+          sym.prepend($('.part-normal',tsym).clone());
+          found = true;
+        }
+        if (!found) {
+          $('.part-normal',sym).remove();
+          let ts = $X('<g class="part-normal" xmlns="http://www.w3.org/2000/svg"></g>');
+              ts.append($(tsym.documentElement.children).clone());
+          sym.prepend(ts);
+        }
+      }
+      let tprop = self.get_properties(g.attr('element-endpoint'));
+      if (tprop) {
+        subtype = tprop.subtype;
+      }
+    }
+
     var tit = $X('<title xmlns="http://www.w3.org/2000/svg"></title>');
         tit.text(title);
     sym.prepend(tit);
+    let lab = $('.label',sym);
+    if (lab.length > 0 && self.compact) {
+      let l_maxlen = 40; // max label size
+      let l_split  = 18; // desired split position
+      let l_dev    = 10; // if one split line is bigger than l_split + l_dev, split was not successfull and we have to display a more truncated string
+      let l_trunc  = 18; // trucation size
+
+      let sta = $('.part-start',sym);
+      let mid = $('.part-middle',sym);
+      let end = $('.part-end',sym);
+      let xtr = $('.part-extra',sym);
+      let nor = $('.part-normal',sym);
+      if (title && title != '') {
+        if (title.length < l_split) {
+          lab.text(title);
+        } else {
+          if (title.length > l_maxlen) { title = title.substr(0,l_maxlen) + '\u2026'; }
+          if (title.includes(' ')) {
+            let len = title.length;
+            let pos = -2;
+            let seps = []
+            while (pos != -1) {
+              pos = title.indexOf(' ',pos+1);
+              if (pos > -1) seps.push(pos);
+            }
+            let closest = title.length;
+            let it = 0;
+            seps.forEach((ele) => {
+              let min = Math.abs(title.length/2 - ele);
+              if (min < closest) { closest = min; it = ele; }
+            });
+            let l1 = title.substr(0,it);
+            let l2 = title.substr(it+1);
+            if (l1.length > l_split+l_dev) {
+              title = title.substr(0,l_trunc) + '\u2026';
+              lab.text(title);
+            } else {
+              if (l2.length > l_split) { l2 = l2.substr(0,l_trunc) + '\u2026'; }
+              let a1 = $X('<tspan x="0" dy="-8" xmlns="http://www.w3.org/2000/svg"></tspan>');
+                  a1.text(l1);
+              let a2 = $X('<tspan x="0" dy="12" xmlns="http://www.w3.org/2000/svg"></tspan>');
+                  a2.text(l2);
+              lab.append(a1);
+              lab.append(a2);
+            }
+          } else {
+            if (title.length > l_split) { title = title.substr(0,l_trunc) + '\u2026'; }
+            lab.text(title);
+          }
+        }
+        let width = this.get_width(lab);
+        if (mid.length > 0) {
+          if (end.length > 0) {
+            let pos = get_dim(mid);
+            mid.attr('clip-path','url(#ele-' + id + ')');
+            let clip = $X('<clipPath belongs-to="element" id="ele-' + id + '" xmlns="http://www.w3.org/2000/svg">' +
+              '<rect x="0" y="-1" width="' + width + '" height="' +  (pos.y + pos.height + 4) + '"></rect>' +
+            '</clipPath>');
+            $('defs',self.svg.container).append(clip);
+
+            end.attr('transform','translate(' + (pos.x + width - self.endclipshift - 4) + ',0)');
+            if (xtr.length > 0) {
+              xtr.attr('transform','translate(' + (pos.x + width - self.endclipshift - 4) + ',0)');
+            }
+            set_x_cond(row,col,dstart,pos.x + width - self.endclipshift - 4 + this.get_width(end) + 2 * self.width_shift_label,sname,title,subtype);
+          } else {
+            let tdim = 0;
+            if (self.rotated_labels && self.elements[sname].rotatelabels != false) {
+              lab.addClass('rotate');
+              tdim = self.width;
+            } else {
+              tdim = self.width + width + self.width_shift_label;
+            }
+            set_x_cond(row,col,dstart,tdim,sname,title,subtype);
+          }
+        } else {
+          set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+        }
+        if (nor.length > 0) { nor.remove(); }
+      } else {
+        set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+        if (sta.length > 0) { sta.remove(); }
+        if (mid.length > 0) { mid.remove(); }
+        if (end.length > 0) { end.remove(); }
+      }
+    } else {
+      $('.part-start',sym).remove();
+      $('.part-middle',sym).remove();
+      $('.part-end',sym).remove();
+      set_x_cond(row,col,dstart,self.width,sname,title,subtype);
+    }
+
     sym.attr('class','activities');
+    let sty = { ...self.global_style, ...style };
+    for (const s in sty) {
+      $('.colorstyle', sym).each((_,ele) => {
+        $(ele).css(s,sty[s]);
+      });
+    }
+
     $(g[0].childNodes[0]).append(sym);
+    if (!addition) {
+      // TODO change to better respresent exec
+      $(g[0].childNodes[0]).append(
+        $X('<text class="super" transform="translate(20,-2)" xmlns="http://www.w3.org/2000/svg">' +
+            '<tspan class="exec">▶</tspan>' +
+            '<tspan class="active">0</tspan>' +
+            '<tspan class="colon">,</tspan>' +
+            '<tspan class="vote">0</tspan>' +
+          '</text>')
+      );
+    }
 
     // Binding events for symbol
     bind_event(g,sname,true);
 
-    if(group) {group.append(g);}
+    if (group) {group.append(g);}
     else {self.svg.container.children('g:first').append(g);}
+
     return g;
   } // }}}
-  var bind_event = this.draw.bind_event = function(sym,tname,context) { //{{{
-    for(event_name in adaptor.elements[tname]) {
-      sym.bind(event_name, {'function_call':adaptor.elements[tname][event_name]}, function(e) { e.data.function_call($(this).attr('element-id'),e)});
-      if(event_name == 'mousedown') sym.bind('contextmenu', false);
-    }
-  } //}}}
   var draw_border = this.draw.draw_border = function(id, p1, p2, group) { // {{{
-    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"/>'));
+    let bstart = get_x(p1.row,p1.col,'border from');
+    let bend = get_x_plus(p1.row,p2.row,p2.col,'border to');
+    group.prepend($X('<rect element-id="' + id + '" x="' + (bstart - 1.1 * self.width_shift - self.group_extend) + '" ' +
+        'y="' + ((p1.row-1)*self.height+self.height_shift/2-self.group_extend) + '" ' +
+        'width="' + (bend-bstart+2*self.group_extend) + '" ' +
+        'height="' + (((p2.row+1)-p1.row)*self.height+2*self.group_extend) + '" ' +
+        'class="block" rx="12" ry="12" 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-1)*self.width + 1.3 * self.width_shift) + '" ' +
-        'y="' + ((p1.row-1)*self.height+self.height_shift/2) + '" ' +
-        'width="' + ((p2.col+1)-p1.col)*self.width + '" ' +
-        'height="' + ((p2.row+1)-p1.row)*self.height +'" ' +
-        'class="tile" rx="15" ry="15" xmlns="http://www.w3.org/2000/svg"/>'));
+    let bstart = get_x(p1.row,p1.col,'tile from');
+    let bend = get_x_plus(p1.row,p2.row,p2.col,'tile to');
+    group.prepend($X('<rect element-id="' + id + '" x="' + (bstart - 1.1 * self.width_shift - self.group_extend) + '" ' +
+        'y="' + ((p1.row-1)*self.height+self.height_shift/2-self.group_extend) + '" ' +
+        'width="' + (bend-bstart+2*self.group_extend) + '" ' +
+        'height="' + (((p2.row+1)-p1.row)*self.height+2*self.group_extend) + '" ' +
+        'class="tile" rx="12" ry="12" xmlns="http://www.w3.org/2000/svg"/>'));
   } // }}}
-  var draw_connection = this.draw.draw_connection = function(group, start, end, max_line, num_lines, arrow) { // {{{
+  var draw_connection = this.draw.draw_connection = function(group, start, end, context_row, arrow) { // {{{
+    let sr = Math.min(start.row,end.row);
+    let cstart = get_x(sr,start.col,'conn from');
+    let cend = get_x(sr,end.col,'conn to');
+    self.dim.connections.push({from: {row: start.row, col: start.col}, to: {row: end.row, col: end.col}});
+
     if(((end['row']-start['row']) == 0) && ((end['col']-start['col']) == 0)) return;
     var line;
     if (arrow)
-      line = $X('<path xmlns="http://www.w3.org/2000/svg" class="ourline" marker-end="url(#arrow)"/>');
+      line = $X('<path xmlns="http://www.w3.org/2000/svg" class="edge" marker-end="url(#arrow)"/>');
     else
-      line = $X('<path xmlns="http://www.w3.org/2000/svg" class="ourline"/>');
+      line = $X('<path xmlns="http://www.w3.org/2000/svg" class="edge"/>');
     if (end['row']-start['row'] == 0 || end['col']-start['col'] == 0) { // straight line
-      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)
+      line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+                            String(cend) +   "," + String(end['row']*self.height-15)
       );
     } else if (end['row']-start['row'] > 0) { // downwards
       if (end['col']-start['col'] > 0) {// left - right
         if (self.compact) {
-          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)
+          line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+                                String(cstart+14) + "," + String((end['row']-1)*self.height) +" "+ // first turn of horizontal-line going away from node
+                                String(cend) + "," + String((end['row']-1)*self.height) +" "+
+                                String(cend) + "," + String(end['row']*self.height-15)
           );
         } else {
-          line.attr("d", "M " + String(start['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
-                                String(end['col']*self.width) + "," + String(start['row']*self.height-15) +" "+
-                                String(end['col']*self.width) + "," + String(end['row']*self.height-15)
+          line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+                                String(cend) + "," + String(start['row']*self.height-15) +" "+
+                                String(cend) + "," + String(end['row']*self.height-15)
           );
         }
       } else { // right - left
-        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)
+        line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+                              String(cstart) + "," + String(end['row']*self.height-32) +" "+
+                              String(cend+14) + "," + String(end['row']*self.height-32) +" "+ // last turn of horizontal-line going into the node
+                              String(cend) + "," + 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']*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']*self.width) + "," + String(start['row']*self.height-15) +" "+
-                              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)
-        );
-      }
+      line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+                            String(cstart) + "," + String((self.dim.symbols.length-1)*self.height+4) +" "+
+                            String(cend+15) + "," + String((self.dim.symbols.length-1)*self.height+4) +" "+
+                            String(cend+15) + "," + String(end['row']*self.height+15)+" "+
+                            String(cend) + "," + String(end['row']*self.height-15)
+      );
     }
     self.svg.container.append(line);
   } //  }}}
   // }}}
+
   // Initialize {{{
-    adaptor = wf_adaptor;
+  adaptor = wf_adaptor;
   // }}}
+
 } // }}}
 
 // WfDescription:
@@ -404,11 +814,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         illustrator.draw.draw_stripe(i,graph.max.col);
       }
     }
-    if (illustrator.compact == false) {
-      adaptor.draw_labels(graph.max,labels,{ 'height': illustrator.height, 'height_shift': illustrator.height_shift },illustrator.striped == true ? true : false);
-    } else {
-      adaptor.draw_labels(graph.max,[],{ 'height': illustrator.height, 'height_shift': illustrator.height_shift },false);
-    }
+    adaptor.draw_labels(graph.max,labels,{ 'height': illustrator.height, 'stripe_height': illustrator.default_height, 'height_shift': illustrator.height_shift },illustrator.striped == true ? true : false);
   } //}}}
 
   // Generic Functions {{{
@@ -424,11 +830,12 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     }
     id_counter = {};
     labels = [];
+    let start = performance.now();
     illustrator.clear();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,dim:{},final:false,wide:false});
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
     illustrator.set_svg(graph);
-    // set labels
     self.set_labels(graph);
+    illustrator.set_duration(start);
   } // }}}
   var gd = this.get_description = function() { //  public {{{
     var serxml = $(description.get(0).documentElement).clone(true);
@@ -476,21 +883,24 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   var refresh = this.refresh = function(doit) {
     id_counter = {};
     labels = [];
+    let start = performance.now();
     illustrator.clear();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,dim:{}});
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0});
     illustrator.set_svg(graph);
-    // set labels
     self.set_labels(graph);
+    illustrator.set_duration(start);
     doit(self);
   }
   var update = this.update = function(svgid) { // {{{
     id_counter = {};
     if(update_illustrator){
+      let start = performance.now();
       labels = [];
       illustrator.clear();
-      var graph = parse(description.children('description').get(0), {'row':0,'col':0,dim:{}});
+      var graph = parse(description.children('description').get(0), {'row':0,'col':0});
       illustrator.set_svg(graph);
       self.set_labels(graph);
+      illustrator.set_duration(start);
     }
 
     var newn = $('*[new=true]',description);
@@ -567,15 +977,13 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   // }}}
   // Helper Functions {{{
   var parse = function(root, parent_pos)  { // private {{{
-    var pos = $.extend(true, {}, parent_pos);
+    var pos = JSON.parse(JSON.stringify(parent_pos));
     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 group = $X('<g class="group" xmlns="http://www.w3.org/2000/svg"/>');
+    var block =  { 'max': {'row': pos.row, 'col': pos.col}, 'endnodes': [], 'svg': $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++;
@@ -585,12 +993,13 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       $(root).attr('svg-id','description');
       $(root).attr('svg-type','description');
       $(root).attr('svg-subtype','description');
-      group.attr('element-id','group-description');
+      block.svg.attr('element-id','group-description');
       if (illustrator.elements[sname].label) {
         // javascript object spread syntax is my new weird crush - the JS designers must be serious people
         labels.push({...{row: pos.row, element_id: 'start', tname: 'start', label: illustrator.elements[sname].label(root)},...illustrator.draw.get_y(pos.row)});
       }
-      illustrator.draw.draw_symbol(sname, 'description', 'START', pos.row, pos.col, group);
+      illustrator.global_style = (illustrator.elements[sname].style && root) ? illustrator.elements[sname].style(root) : {};
+      illustrator.draw.draw_symbol(sname, 'description', 'START', pos.row, pos.row, pos.row, pos.col, block.svg, false, {}, {})
     } // }}}
 
     $(root).children().filter(function(){ return this.localName[0] != '_'; }).each(function() {
@@ -599,13 +1008,19 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       var sname = sym_name(tname,context);
       pos.final = illustrator.elements[sname].final ? true : false;
       pos.wide = illustrator.elements[sname].wide ? true : false;
+      pos.noindent = illustrator.elements[sname].noindent ? true : false;
 
       // Calculate next position {{{
-      if(root_expansion == 'vertical')  pos.row++;
+      if(root_expansion == 'vertical') { pos.row++; }
       if(root_expansion == 'horizontal')  {
-        pos.col++;
+        // for noindent themes do not indent the first column
+        if (!pos.noindent || (pos.noindent && endnodes.length > 1)) {
+          illustrator.dim.set_x(pos.row,pos.col,illustrator.width,sname);
+          pos.col++;
+        }
         if (!illustrator.compact) {
           if (block.max.row) {
+            illustrator.dim.set_x(pos.row,pos.col,illustrator.width,sname);
             pos.row = block.max.row + 1;
           }
         }
@@ -614,8 +1029,22 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       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(context, $.extend(true, {}, pos));
-        group.append(block.svg);
+
+        illustrator.dim.set_x(pos.row,pos.col,illustrator.width,sname);
+        // but fuuuuu, we calculate the gateways only later, so we couldnt even have them bigger for now
+
+        // console.log('----> down', tname, parent_pos.row, pos.row, parent_pos.col, pos.col, illustrator.dim.debug());
+
+        let tblock = parse(context, JSON.parse(JSON.stringify(pos)));
+
+        // merge block and tblock, enforce the max, as the second branch could have fewer nodes than the first
+        block.max.row = Math.max(block.max.row,tblock.max.row);
+        block.max.col = Math.max(block.max.col,tblock.max.col);
+        block.endnodes = tblock.endnodes;
+
+        // console.log('<---- up', tname, parent_pos.row, block.max.row, parent_pos.col, block.max.col, illustrator.dim.debug());
+
+        block.svg.append(tblock.svg);
         block.svg.attr('id', 'group-' + $(context).attr('svg-id'));
         if(illustrator.elements[sname].endnodes == 'aggregate') endnodes = []; // resets endpoints e.g. potential preceding primitive
       } else {
@@ -623,19 +1052,17 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           block.max.row = pos.row;
           block.max.col = pos.col;
           block.endnodes = [pos];
-          block.svg = group;
         }
       }
       // }}}
 
       var g;
       set_details(tname,sname,pos,context);
-
-      var origpos = $.extend(true, {}, pos);
-      [g, endnodes] = draw_position(tname,origpos,prev,block,group,endnodes,context);
+      var origpos = JSON.parse(JSON.stringify(pos));
+      [g, endnodes] = draw_position(tname,parent_pos,origpos,prev,block,endnodes,context);
 
       // Prepare next iteration {{{
-      if(root_expansion == 'vertical') { prev = $.extend(true, {}, endnodes); pos.row = block.max.row;} // covers e.g. input's for alternative, parallel_branch, ... everything with horizontal expansion
+      if(root_expansion == 'vertical') { prev = JSON.parse(JSON.stringify(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;
@@ -653,13 +1080,14 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
             max.col++;
             block.max.col = pos.col;
           }
-          draw_position(ctname,pos,block.endnodes,block,group,[],context,{svg: g, pos: origpos});
+          draw_position(ctname,parent_pos,pos,block.endnodes,block,[],context,{svg: g, pos: origpos});
           pos.col--;
+          set_details(ctname,csname,pos,context,true);
         } else {
-          [undefined, endnodes] = draw_position(ctname,pos,prev,block,group,[],context,{svg: g, pos: origpos});
+          set_details(ctname,csname,pos,context,true);
+          [undefined, endnodes] = draw_position(ctname,parent_pos,pos,prev,block,[],context,{svg: g, pos: origpos});
         }
-        set_details(ctname,csname,pos,context,true);
-        prev = $.extend(true, {}, endnodes);
+        prev = JSON.parse(JSON.stringify(endnodes));
       }
     });
 
@@ -672,10 +1100,10 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     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,{svg: group, pos: pos});
+      draw_position(illustrator.elements['start'].closing_symbol,parent_pos,pos,prev,block,[],this,{svg: block.svg, pos: pos});
     }
 
-    return {'endnodes': endnodes, 'max':max, 'svg':group};
+    return {'endnodes': endnodes, 'max':max, 'svg': block.svg};
   } // }}}
   var sym_name = function(tname,context) { //{{{
     var sname;
@@ -697,39 +1125,51 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     }
     if (illustrator.elements[sname].label) {
       var lab = illustrator.elements[sname].label(context);
-      if (lab && lab[0] && lab[0].value && lab[0].column == 'Label' && lab[0].value != '') {
-        $(context).attr('svg-label', lab[0].value);
+      if (lab) {
+        for (let i=0; i<lab.length; i++) {
+          if (lab[i] && lab[i].value && lab[i].column == 'Label' && lab[i].value != '') {
+            $(context).attr('svg-label', lab[0].value);
+            if (illustrator.compact) {
+              lab.splice(i,1);
+            }
+          }
+        }
+        labels.push({...{row: pos.row, element_id: $(context).attr('svg-id'), tname: tname, label: lab},...illustrator.draw.get_y(pos.row)});
       }
-      labels.push({...{row: pos.row, element_id: $(context).attr('svg-id'), tname: tname, label: lab},...illustrator.draw.get_y(pos.row)});
     }
   } //}}}
-  var draw_position = function(tname,pos,prev,block,group,endnodes,context,second) { // private {{{
+  var draw_position = function(tname,parent_pos,pos,prev,block,endnodes,context,second) { // private {{{
     var sname = sym_name(tname,context);
+    // console.log('----- pos ' + sname, parent_pos.row, block.max.row, parent_pos.col, block.max.col, block, illustrator.dim.debug());
+
     // Draw Symbol {{{
+    let style = {};
+    if (illustrator.elements[sname].style && context) {
+      style = illustrator.elements[sname].style(context);
+    }
     if (second) {
-      illustrator.draw.draw_symbol(sname, $(context).attr('svg-id'), $(context).attr('svg-label'), pos.row, pos.col, second.svg, true).addClass(illustrator.elements[sname] ? illustrator.elements[sname].type : 'primitive unknown');
+      // wide is only for the special case of variable parallel, only event_end has it, all others should reference the first row
+      illustrator.draw.draw_symbol(sname, $(context).attr('svg-id'), $(context).attr('svg-label'), illustrator.elements[sname].wide == true ?  parent_pos.row+1 : parent_pos.row, block.max.row, pos.row, pos.col, second.svg, true, {}, style).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);
-          });
+        let info = {};
+        if (illustrator.elements[sname].info && context) {
+          info = illustrator.elements[sname].info(context);
         }
+        var g = illustrator.draw.draw_symbol(sname, $(context).attr('svg-id'), $(context).attr('svg-label'), parent_pos.row, block.max.row, pos.row, pos.col, block.svg, false, info, style).addClass(illustrator.elements[sname] ? illustrator.elements[sname].type : 'primitive unknown');
       } 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] && illustrator.elements[sname].border) {
+        let 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: block.max.row + 1 }, block.svg);
         } else {
           illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: 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] && illustrator.elements[sname].type == 'complex') {
+        let 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 {
@@ -738,48 +1178,72 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       }
     }
     // }}}
+
     // Calculate Connection {{{
+    let connection_case = 0;
     if(illustrator.elements[sname] != undefined && illustrator.elements[sname].closeblock == true) { // Close Block if element e.g. loop
       if (second) {
         if (second.pos.row+1 < pos.row) { // when no content, dont paint the up arrow
-          illustrator.draw.draw_connection(group, pos, second.pos, block.max.row+1, 1, true);
+          connection_case = 1;
+          // console.log('++ case 1',prev[node].row,pos.row,illustrator.dim.debug());
+          illustrator.draw.draw_connection(block.svg, pos, second.pos, 0, true);
         }
       } else {
-        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);
+        for (let node=0; node < block.endnodes.length; node++) {
+          if (block.endnodes[node] && !block.endnodes[node].final) {
+            connection_case = 2;
+            // console.log('++ case 2',prev[node].row,pos.row,illustrator.dim.debug());
+            illustrator.draw.draw_connection(block.svg, block.endnodes[node], pos, 0, 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 = [$.extend(true, {}, pos)]; } // sets this element as only endpoint (aggregate)
+    } else { endnodes = [JSON.parse(JSON.stringify(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);
+      connection_case = 3;
+      illustrator.draw.draw_connection(block.svg, { row: 1, col: 1 }, pos, 0, true);
     } else {
       if (illustrator.elements[sname].noarrow == undefined || illustrator.elements[sname].noarrow == false) {
-        for (node in prev) {
-          if (!prev[node].final) {
+        for (let node=0; node < prev.length; node++) {
+          if (prev[node] && !prev[node].final) {
             if (prev[node].wide) {
-              var pn = $.extend(true, {}, prev[node]);
+              var pn = JSON.parse(JSON.stringify(prev[node]));
               if (pos.col > prev[node].col) {
                 pn.col = pos.col;
               }
-              illustrator.draw.draw_connection(group, pn, pos, null, null, true);
+              connection_case = 4;
+              // console.log('++ case 4',prev[node].row,pos.row,illustrator.dim.debug());
+              illustrator.draw.draw_connection(block.svg, pn, pos, 0, true);
             } else {
-              illustrator.draw.draw_connection(group, prev[node], pos, null, null, true);
+              connection_case = 5;
+              if (prev.length == 1) {
+                // console.log('++ case 5a',parent_pos.row, '---', prev[node].row,pos.row,illustrator.dim.debug());
+                illustrator.draw.draw_connection(block.svg, prev[node], pos, 0, true);
+              } else {
+                // console.log('++ case 5b',prev[node].row,pos.row,illustrator.dim.debug());
+                illustrator.draw.draw_connection(block.svg, prev[node], pos, 0, true);
+              }
             }
           }
         }
       } else {
-        for(node in prev) {
-          if (!prev[node].final)
-            illustrator.draw.draw_connection(group, prev[node], pos, null, null, false);
+        for (let node=0; node < prev.length; node++) {
+          if (prev[node] && !prev[node].final) {
+            connection_case = 6;
+            // console.log('++ case 6',prev[node].row,pos.row,illustrator.dim.debug());
+            illustrator.draw.draw_connection(block.svg, prev[node], pos, prev[node].row, false);
+          }
         }
       }
     }
     // }}}
+
+    ///////// show graph step by step
+    // illustrator.set_svg_direct(block.svg);
+    // debugger;
+
     return [g, endnodes];
   } // }}}
   //  }}}