cpee 2.1.92 → 2.1.95

data/cockpit/js/wfadaptor.js

@@ -169,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",
@@ -213,7 +213,8 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     this.svg = {};
     this.draw = {};
     this.dim = {};
-    this.dim.props = [];
+    this.dim.symbols = [];
+    this.dim.connections = [];
     this.compact = true;
     this.rotated_labels = true;
     this.striped = true;
@@ -238,6 +239,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       '  <clipPath id="endclip">' +
       '    <rect x="20" y="-1" width="' + self.endclipshift + '" height="35"/>' +
       '  </clipPath>' +
+      '  <linearGradient id="custom-gradient" x2="0.35" y2="1">' +
+      '    <stop offset="0%" stop-color="var(--wfadaptor-background)"/>' +
+      '    <stop offset="50%" stop-color="var(--custom-color)"/>' +
+      '    <stop offset="100%" stop-color="var(--custom-color)"/>' +
+      '  </linearGradient>' +
       '</defs>'));
     self.svg.defs = {};
     self.svg.defs['unknown'] = $X('<g xmlns="http://www.w3.org/2000/svg" class="unknown">' +
@@ -262,8 +268,17 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     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.props));
+    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);
   } // }}}
@@ -281,22 +296,25 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   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.props = [];
+    self.dim.symbols = [];
+    self.dim.connections = [];
   } // }}}
   var get_symbol = this.get_symbol = function() { // {{{
   } // }}}
+  var get_properties = this.get_properties = function() { // {{{
+  } // }}}
 
   // Helper Functions {{{
   var debug_dim = this.dim.debug = function() { //{{{
     line = '\n';
-    for (let i=1; i < self.dim.props.length; i++) {
+    for (let i=1; i < self.dim.symbols.length; i++) {
       line += $.sprintf('%02d',i) + ': ';
-      if (self.dim.props[i]) {
-        for (let j=1; j < self.dim.props[i].length; j++) {
+      if (self.dim.symbols[i]) {
+        for (let j=1; j < self.dim.symbols[i].length; j++) {
           line += ' [ ';
-          if (self.dim.props[i] && self.dim.props[i][j] && self.dim.props[i][j].x) { line += $.sprintf('%3d',self.dim.props[i][j].x); } else { 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.props[i] && self.dim.props[i][j] && self.dim.props[i][j].width) { line += $.sprintf('%3d',self.dim.props[i][j].width); } else { 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 += ' ] ';
         }
       }
@@ -305,54 +323,62 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     return line;
   } //}}}
 
-  var set_x = this.dim.set_x = function(row,col,twidth) { //{{{
-    if (!self.dim.props[row]) { self.dim.props[row] = []; }
-    if (!self.dim.props[row][col]) { self.dim.props[row][col] = {}; }
+  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.props[row-1] && self.dim.props[row-1][col] && self.dim.props[row-1][col].x) { // row before
-      self.dim.props[row][col].x = self.dim.props[row-1][col].x;
-    } else if (self.dim.props[row] && self.dim.props[row][col-1] && self.dim.props[row][col-1].x) { // column before
+    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.props.length; i++) {
-        if (self.dim.props[i][col-1] && mx < self.dim.props[i][col-1].x + self.dim.props[i][col-1].width) {
-          mx = self.dim.props[i][col-1].x + self.dim.props[i][col-1].width;
+      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.props[row][col].x = mx;
-    } else if (self.dim.props[row-1] && self.dim.props[row-1][col-1] && self.dim.props[row-1][col-1].x) { // diagonal left above
-      self.dim.props[row][col].x = self.dim.props[row-1][col-1].x + self.dim.props[row-1][col-1].width;
-    } else if (self.dim.props.length > row + 1) { // same column below
+      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.props.length; i++) {
-        if (self.dim.props[i] && self.dim.props[i][col] && mx < self.dim.props[i][col].x) {
-          mx = self.dim.props[i][col].x;
+      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.props[row][col].x = mx;
+      self.dim.symbols[row][col].x = mx;
     } else { // same column above
       let mx = 0;
       for (let i=row; i>0; i--) {
-        if (self.dim.props[i] && self.dim.props[i][col] && mx < self.dim.props[i][col].x) {
-          mx = self.dim.props[i][col].x;
+        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.props[row][col].x = mx;
+      self.dim.symbols[row][col].x = mx;
     }
-    if (self.dim.props[row][col].width) {
-      if (twidth > self.dim.props[row][col].width) {
-        self.dim.props[row][col].width = twidth;
+    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.props[row][col].width = twidth;
+      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) { //{{{
-    if (!self.dim.props[row]) { self.dim.props[row] = []; }
-    if (!self.dim.props[row][col] || self.dim.props[row][col].width < twidth) {
-      self.dim.props[row][col] = {};
-      self.dim.props[row][col].x = tx;
-      self.dim.props[row][col].width = twidth;
+  var set_x_cond = this.dim.set_x_cond = function(row,col,tx,twidth,sname,label,subtype,sty,eid) { //{{{
+    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;
+    self.dim.symbols[row][col].eid = eid;
+    for (const s in sty) {
+      self.dim.symbols[row][col][s] = sty[s];
     }
     // console.log('set_x_cond',row,col,debug_dim());
   } //}}}
@@ -361,26 +387,26 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     if (row<0) { row = 0 };
 
     let mlen = 0;
-    if (self.dim.props[row] && self.dim.props[row][col] && self.dim.props[row][col].x) { // this column
-      mlen = self.dim.props[row][col].x;
-    } else if (self.dim.props[row] && !self.dim.props[row][col] && self.dim.props.length > row && self.dim.props[row+1] && self.dim.props[row+1][col] && self.dim.props[row+1][col].x ) { // row after
-      mlen = self.dim.props[row+1][col].x;
-    } else if (self.dim.props[row-1] && self.dim.props[row-1][col] && self.dim.props[row-1][col].x) { // row before
-      mlen = self.dim.props[row-1][col].x;
-    } else if (self.dim.props[row] && self.dim.props[row][col-1] && self.dim.props[row][col-1].x) { // column before
-      for (let i=row; i<self.dim.props.length; i++) {
-        if (self.dim.props[i][col-1] && mlen < self.dim.props[i][col-1].x + self.dim.props[i][col-1].width) {
-          mlen = self.dim.props[i][col-1].x + self.dim.props[i][col-1].width;
+    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.props[row+1] && self.dim.props[row+1][col] && self.dim.props[row+1][col].x) { // directly below
-      mlen = self.dim.props[row+1][col].x;
-    } else if (self.dim.props[row-1] && self.dim.props[row-1][col-1] && self.dim.props[row-1][col-1].x) { // diagonal left above
-      mlen = self.dim.props[row-1][col-1].x + self.dim.props[row-1][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.props.length; i++) {
-        if (self.dim.props[i] && self.dim.props[i][col] && mlen < self.dim.props[i][col].x + self.dim.props[i][col].width) {
-          mlen = self.dim.props[i][col].x;
+      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
@@ -396,8 +422,8 @@ function WfIllustrator(wf_adaptor) { // View  {{{
 
     mlen = 0;
     for (let i=rowf; i<=rowt; i++) {
-      if (self.dim.props[i] && self.dim.props[i][col] && mlen < self.dim.props[i][col].x + self.dim.props[i][col].width) {
-        mlen = self.dim.props[i][col].x + self.dim.props[i][col].width;
+      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());
@@ -405,19 +431,19 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   } //}}}
   var get_x_width = this.dim.get_x_width = function(maxcol) { //{{{
     let cwidth = 0;
-    for (let i=0; i < self.dim.props.length; i++) {
+    for (let i=0; i < self.dim.symbols.length; i++) {
       let lwidth = 0;
       for (let j=0; j <= maxcol; j++) {
-        if (typeof self.dim.props[i] !== 'undefined' && typeof self.dim.props[i][j] !== 'undefined') {
-          lwidth += self.dim.props[i][j].width;
+        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.props[x] !== 'undefined' && typeof self.dim.props[x][j] !== 'undefined') {
-              lwidth += self.dim.props[x][j].width;
+            if (typeof self.dim.symbols[x] !== 'undefined' && typeof self.dim.symbols[x][j] !== 'undefined') {
+              lwidth += self.dim.symbols[x][j].width;
               found = true;
             }
           }
@@ -535,11 +561,12 @@ function WfIllustrator(wf_adaptor) { // View  {{{
                '</g>');
 
     // add the element-endpoint and other stuff to each symbol (from theme info function)
-    _.each(info,function(val,key) {
-      g.attr(key, val);
-    });
+    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'));
@@ -572,6 +599,18 @@ function WfIllustrator(wf_adaptor) { // View  {{{
           sym.prepend(ts);
         }
       }
+      let tprop = self.get_properties(g.attr('element-endpoint'));
+      if (tprop) {
+        subtype = tprop.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]);
+      });
     }
 
     var tit = $X('<title xmlns="http://www.w3.org/2000/svg"></title>');
@@ -579,16 +618,21 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     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 < 22) {
+        if (title.length < l_split) {
           lab.text(title);
         } else {
-          if (title.length > 60) { title = title.substr(0,60) + '\u2026'; }
+          if (title.length > l_maxlen) { title = title.substr(0,l_maxlen) + '\u2026'; }
           if (title.includes(' ')) {
             let len = title.length;
             let pos = -2;
@@ -605,11 +649,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             });
             let l1 = title.substr(0,it);
             let l2 = title.substr(it+1);
-            if (l1.length > 30) {
-              title = title.substr(0,30) + '\u2026';
+            if (l1.length > l_split+l_dev) {
+              title = title.substr(0,l_trunc) + '\u2026';
               lab.text(title);
             } else {
-              if (l2.length > 30) { l2 = l2.substr(0,30) + '\u2026'; }
+              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>');
@@ -618,7 +662,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
               lab.append(a2);
             }
           } else {
-            if (title.length > 30) { title = title.substr(0,30) + '\u2026'; }
+            if (title.length > l_split) { title = title.substr(0,l_trunc) + '\u2026'; }
             lab.text(title);
           }
         }
@@ -636,7 +680,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             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);
+            set_x_cond(row,col,dstart,pos.x + width - self.endclipshift - 4 + this.get_width(end) + 2 * self.width_shift_label,sname,title,subtype,sty,id);
           } else {
             let tdim = 0;
             if (self.rotated_labels && self.elements[sname].rotatelabels != false) {
@@ -645,14 +689,14 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             } else {
               tdim = self.width + width + self.width_shift_label;
             }
-            set_x_cond(row,col,dstart,tdim);
+            set_x_cond(row,col,dstart,tdim,sname,title,subtype,sty,id);
           }
         } else {
-          set_x_cond(row,col,dstart,self.width);
+          set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
         }
         if (nor.length > 0) { nor.remove(); }
       } else {
-        set_x_cond(row,col,dstart,self.width);
+        set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
         if (sta.length > 0) { sta.remove(); }
         if (mid.length > 0) { mid.remove(); }
         if (end.length > 0) { end.remove(); }
@@ -661,16 +705,9 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       $('.part-start',sym).remove();
       $('.part-middle',sym).remove();
       $('.part-end',sym).remove();
-      set_x_cond(row,col,dstart,self.width);
+      set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
     }
 
-    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) {
@@ -708,13 +745,14 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     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+5*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, 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;
@@ -749,8 +787,8 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       }
     } else if(end['row']-start['row'] < 0) { // upwards
       line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
-                            String(cstart) + "," + String((self.dim.props.length-1)*self.height+4) +" "+
-                            String(cend+15) + "," + String((self.dim.props.length-1)*self.height+4) +" "+
+                            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)
       );
@@ -787,7 +825,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         illustrator.draw.draw_stripe(i,graph.max.col);
       }
     }
-    adaptor.draw_labels(graph.max,labels,{ 'height': illustrator.height, 'height_shift': illustrator.height_shift },illustrator.striped == true ? true : 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 {{{
@@ -803,10 +841,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,final:false,wide:false});
     illustrator.set_svg(graph);
     self.set_labels(graph);
+    illustrator.set_duration(start);
   } // }}}
   var gd = this.get_description = function() { //  public {{{
     var serxml = $(description.get(0).documentElement).clone(true);
@@ -854,20 +894,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});
     illustrator.set_svg(graph);
     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});
       illustrator.set_svg(graph);
       self.set_labels(graph);
+      illustrator.set_duration(start);
     }
 
     var newn = $('*[new=true]',description);
@@ -966,7 +1010,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         labels.push({...{row: pos.row, element_id: 'start', tname: 'start', label: illustrator.elements[sname].label(root)},...illustrator.draw.get_y(pos.row)});
       }
       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, [], {})
+      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() {
@@ -982,12 +1026,12 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       if(root_expansion == 'horizontal')  {
         // 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);
+          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);
+            illustrator.dim.set_x(pos.row,pos.col,illustrator.width,sname);
             pos.row = block.max.row + 1;
           }
         }
@@ -997,7 +1041,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         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
 
-        illustrator.dim.set_x(pos.row,pos.col,illustrator.width);
+        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());
@@ -1116,12 +1160,12 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     }
     if (second) {
       // 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');
+      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') {
-        let info = [];
+        let info = {};
         if (illustrator.elements[sname].info && context) {
           info = illustrator.elements[sname].info(context);
         }

data/cockpit/llm.html

@@ -54,7 +54,7 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
 
@@ -62,8 +62,8 @@
     <link   rel="stylesheet"      href="css/llm.css" type="text/css"/>
 
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */

data/cockpit/llm_alternative.html

@@ -58,14 +58,14 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
 
 
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */

data/cockpit/model.html

@@ -59,8 +59,8 @@
     <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
     <link rel="stylesheet" href="css/model.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */

data/cockpit/only_llm.html

@@ -19,6 +19,7 @@
   <head>
     <meta charset="utf-8"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <link rel="icon" type="image/png" href="/favicon.png">
     <title>CPEE Cockpit</title>
 
     <!-- libs, do not modify. When local than load local libs. -->
@@ -40,6 +41,8 @@
     <script type="text/javascript" src="/js_libs/uidash.js"></script>
     <script type="text/javascript" src="/js_libs/custommenu.js"></script>
 
+    <script type="text/javascript" src="/js_libs/build-bpmn.js"></script>
+
     <link   rel="stylesheet"      href="/js_libs/custommenu.css" type="text/css"/>
     <link   rel="stylesheet"      href="/js_libs/uidash.css" type="text/css"/>
 
@@ -54,7 +57,7 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/extended_columns.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="themes/base.js"></script>
 
@@ -62,8 +65,8 @@
     <link   rel="stylesheet"      href="css/llm.css" type="text/css"/>
 
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
+    <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
+    <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
@@ -178,10 +181,16 @@
                 <button title='a standalone process model is only loadable if the currently loaded testset sucessfully prepared the current instance for the type of model' name="loadmodelfile">load model</button>
               </div>
             </div><div class='section'>
-              <a id="savetestsetfile" href="" download=""></a>
-              <a id="savesvgfile" href="" download=""></a>
-              <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
-              <button title='a testset includes various settings, subscriptions and a model' name="savesvgfile">save svg<br>graph</button>
+              <div>
+                <a id="savetestsetfile" href="" download=""></a>
+                <a id="savesvgfile" href="" download=""></a>
+                <button title='a testset includes various settings, subscriptions and a model' name="savetestsetfile">save<br>testset</button>
+                <button title='the SVG contains the graphical repesentation of the CPEE tree as you see it on the screen' name="savesvgfile">save svg<br>graph</button>
+              </div>
+              <div>
+                <a id="savebpmnfile" href="" download=""></a>
+                <button title='the BPMN includes a graphical representation that can be loaded in Signavio and Camundal' name="savebpmnfile">save BPMN</button>
+              </div>
             </div><div class='section' id='modifiers'>
               <template id="item">
                 <div>
@@ -232,11 +241,9 @@
         </ui-area>
         <ui-resizehandle data-belongs-to-tab="details" data-label="drag to resize"></ui-resizehandle>
         <ui-area data-belongs-to-tab="details" id="detailcolumn">
-          <div id="modelling">
-            <div id='graphgrid'>
-              <div class="resource-label" style="display: none"></div>
-              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' width='1' height='1'></svg>
-            </div>
+          <div id='graphgrid'>
+            <div class="resource-label" style="display: none"></div>
+            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' width='1' height='1'></svg>
           </div>
         </ui-area>
         <ui-area data-belongs-to-tab="log" id="arealog" class="inactive"> <!--{{{-->