cpee 2.1.92 → 2.1.93

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;
@@ -262,8 +263,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 +291,24 @@ 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 = [];
   } // }}}
   var get_symbol = this.get_symbol = function() { // {{{
   } // }}}
+  var get_properties = this.get_symbol = 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,55 +317,59 @@ 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) { //{{{
+    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());
   } //}}}
 
@@ -361,26 +377,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 +412,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 +421,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 +551,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 +589,10 @@ function WfIllustrator(wf_adaptor) { // View  {{{
           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>');
@@ -579,16 +600,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 +631,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 +644,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 +662,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);
           } else {
             let tdim = 0;
             if (self.rotated_labels && self.elements[sname].rotatelabels != false) {
@@ -645,14 +671,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);
           }
         } else {
-          set_x_cond(row,col,dstart,self.width);
+          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);
+        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(); }
@@ -661,7 +687,7 @@ 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);
     }
 
     sym.attr('class','activities');
@@ -708,13 +734,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 +776,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 +814,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 +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,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 +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});
     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 +999,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 +1015,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 +1030,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 +1149,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/only_llm.html

@@ -232,11 +232,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"> <!--{{{-->