cpee 2.1.134 → 2.1.136

data/cockpit/js/wfadaptor.js

@@ -1,16 +1,18 @@
 /*
-  This file is part of CPEE.
+  This file is part of cpee-layout.
 
-  CPEE is free software: you can redistribute it and/or modify it under the terms
-  of the GNU General Public License as published by the Free Software Foundation,
-  either version 3 of the License, or (at your option) any later version.
+  cpee-layout is free software: you can redistribute it and/or modify it under
+  the terms of the GNU Lesser General Public License as published by the Free
+  Software Foundation, either version 3 of the License, or (at your option) any
+  later version.
 
-  CPEE is distributed in the hope that it will be useful, but WITHOUT ANY
-  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
-  PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+  cpee-layout is distributed in the hope that it will be useful, but WITHOUT
+  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+  FOR A PARTICULAR PURPOSE.  See the GNU Lesser General Public License for more
+  details.
 
-  You should have received a copy of the GNU General Public License along with
-  CPEE (file COPYING in the main directory).  If not, see
+  You should have received a copy of the GNU Lesser General Public License
+  along with cpee-layout (file LICENSE in the main directory). If not, see
   <http://www.gnu.org/licenses/>.
 */
 
@@ -57,12 +59,20 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
   this.set_label_container = function(container) { // {{{
     illustrator.set_label_container(container);
   } // }}}
+  this.get_svg = function() { // {{{
+    return illustrator.get_svg();
+  } // }}}
+  this.get_svg_metrics = function() { // {{{
+    return illustrator.get_svg_metrics();
+  } // }}}
 
   function loadTheme(doit) { //{{{
     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;
+    illustrator.lr = manifestation.lr == true ? true : false;
+    illustrator.wellformed_pre_test = manifestation.wellformed_pre_test == true ? true : false;
     description.source = manifestation.source;
     var deferreds = [];
     // copy parent stuff
@@ -235,9 +245,15 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     this.dim = {};
     this.dim.symbols = [];
     this.dim.connections = [];
+    this.dim.implied = []; // symbols that an icon draws in a neighbouring cell (theme: implied), for the metrics only
+    this.dim.labels = {}; // the shown label of each cell ('row,col'), for the metrics only
+    this.dim.rows = []; // lr only: start and size of each symbol along the rows
     this.compact = true;
     this.rotated_labels = true;
     this.striped = true;
+    this.lr = false;
+    this.wellformed_pre_test = false; // experimental: pre_test loops are drawn reversed
+    this.inverted = false; // true while drawing inside such a loop, nested pre_test loops toggle it
     this.global_style = {};
     // private
     var self = this;
@@ -256,6 +272,18 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       '  <marker id="endarrow" viewBox="0 0 10 10" refX="7" refY="5" orient="auto" markerUnits="strokeWidth" markerWidth="14" markerHeight="5.2">' +
       '    <path d="M 2,2 L 6.21,4.11 Q 8,5 6.21,5.89 L 2,8 Z"/>' +
       '  </marker>' +
+      '  <marker id="arrowrev" viewBox="0 0 10 10" refX="28.5" refY="5" orient="auto-start-reverse" markerUnits="strokeWidth" markerWidth="14" markerHeight="3.5">' +
+      '    <path d="m 2 2 l 6 3 l -6 3 z"/>' +
+      '  </marker>' +
+      '  <marker id="endarrowrev" viewBox="0 0 10 10" refX="7" refY="5" orient="auto-start-reverse" markerUnits="strokeWidth" markerWidth="14" markerHeight="5.2">' +
+      '    <path d="M 2,2 L 6.21,4.11 Q 8,5 6.21,5.89 L 2,8 Z"/>' +
+      '  </marker>' +
+      '  <marker id="arrowdiag" viewBox="0 0 10 10" refX="24.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>' +
+      '  <marker id="arrowdiagrev" viewBox="0 0 10 10" refX="24.5" refY="5" orient="auto-start-reverse" markerUnits="strokeWidth" markerWidth="14" markerHeight="3.5">' +
+      '    <path d="m 2 2 l 6 3 l -6 3 z"/>' +
+      '  </marker>' +
       '  <clipPath id="startclip">' +
       '    <rect x="-4" y="-4" width="35" height="38"/>' +
       '  </clipPath>' +
@@ -287,11 +315,142 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     let w = self.dim.get_x_max(0,graph.max.row,graph.max.col,'start');
     if (w == 0) { w = bb.x + bb.width + self.width_shift; }
     // the alternative is bb.x + bb.width + self.width_shift, but this is bad when clipped elements
+    if (self.lr) { w = Math.max(w, bb.x + bb.width + self.width_shift); } // lr: labels can reach across the flow, e.g. rotated below a gateway; clipped labels only reach along it
 
-    self.svg.container.attr('height', bb.y + bb.height + self.height_shift); // small border on the bottom
-    self.svg.container.attr('width', w);  // 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));
+    if (self.lr) { // mirror at the diagonal: rows go to the right, columns go down
+      graph.svg.attr('transform',lr_matrix());
+      self.svg.container.attr('height', w - lr_shift() + self.height_shift);
+      self.svg.container.attr('width', bb.y + bb.height + self.height_shift + lr_shift());
+    } else {
+      self.svg.container.attr('height', bb.y + bb.height + self.height_shift); // small border on the bottom
+      self.svg.container.attr('width', w);  // small border on the right
+    }
+  } // }}}
+  this.get_svg = function() { // {{{
+    // standalone copy for export: the rules of all stylesheets marked with
+    // data-include-export are inlined into the style attributes (var()
+    // resolved, in cascade order), further columns from the label container are
+    // merged in, and interaction state and the render time are removed
+    var svgs = [self.svg.container.get(0)];
+    if (self.svg.label_container) {
+      self.svg.label_container.children('svg').not(self.svg.container).each(function(_,ele) { svgs.push(ele); });
+    }
+    var clones = svgs.map(function(s) { return s.cloneNode(true); });
+
+    var root = getComputedStyle(document.documentElement);
+    var rules = [];
+    var family = '';
+    $.each(document.styleSheets, function(_,sheet) {
+      if (!sheet.ownerNode || !sheet.ownerNode.hasAttribute('data-include-export')) { return; }
+      $.each(sheet.cssRules, function(_,rule) {
+        if (!rule.selectorText || rule.selectorText == ':root') { return; }
+        if (rule.selectorText == 'svg') {
+          if (rule.style.getPropertyValue('font-family') != '') {
+            family = getComputedStyle(svgs[0]).getPropertyValue('font-family').replace(/["']/g,'').trim();
+          }
+          return;
+        }
+        var css = rule.style.cssText.replace(/var\((--[\w-]+)\)/g, function(m,v) { return root.getPropertyValue(v).trim() || m; });
+        rule.selectorText.split(',').forEach(function(sel) {
+          rules.push({ sel: sel.trim(), spec: specificity(sel), order: rules.length, css: css });
+        });
+      });
+    });
+    rules.sort(function(a,b) { return a.spec - b.spec || a.order - b.order; });
+    family = family.replace(/-/,' ').split(' ').map(function(w) { return w[0].toUpperCase() + w.substr(1); }).join(' '); // adwaita-sans -> Adwaita Sans, the installed name
+
+    clones.forEach(function(clone) {
+      $(clone).find('.duration').remove();
+      $(clone).find('.selected').removeClass('selected');
+      $(clone).find('.hover').removeClass('hover');
+      $(clone).find('*').each(function(_,el) {
+        var decl = [];
+        rules.forEach(function(r) {
+          try { if (el.matches(r.sel)) { decl.push(r.css); } } catch (e) { } // e.g. unsupported pseudo classes
+        });
+        var own = el.getAttribute('style');
+        if (own && own.trim() != '') { decl.push(own.trim().replace(/;?$/,';')); }
+        if ($(el).is('text.super, g.hoverstyle, g.markstyle')) { decl.push('display: none;'); }
+        if (el.nodeName == 'text' && family != '') { decl.push('font-family: \'' + family + '\';'); }
+        if (decl.length > 0) { el.setAttribute('style', decl.join(' ')); }
+      });
+    });
+
+    var svg = clones.shift();
+    var width = parseInt(svg.getAttribute('width'));
+    clones.forEach(function(clone) {
+      var gr = $X('<g transform="translate(' + width + ')" xmlns="http://www.w3.org/2000/svg"></g>');
+      gr.append($(clone).children());
+      width += parseInt(clone.getAttribute('width'));
+      $(svg).append(gr);
+    });
+    svg.setAttribute('width', width + 1);
+    return svg;
+  } // }}}
+  this.get_svg_metrics = function() { // {{{
+    // the layout of the last drawing as it is shown (a copy, empty cells are
+    // null): pos_matrix holds the symbols per row and column, x and width are
+    // horizontal; con_list the connections between them. Rows and columns are
+    // 0-indexed here, the layout counts from 1. lr is laid out top to bottom
+    // and mirrored at the diagonal, so rows and columns are swapped back, and x
+    // and width come from the rows (as in get_x, x is the symbol position plus
+    // width_shift). geometry: a symbol is drawn shift left of its x, and the
+    // symbols of row r start at top + r * row. label_box is where the label is
+    // shown, in the coordinates of the svg
+    var center_x = (self.width - self.default_width) / 2;
+    var center_y = (self.height - self.default_height) / 2;
+    var geometry = self.lr ? // lr: x runs along the internal rows, the rows are the internal columns, lr_matrix moves both by lr_shift
+      { shift: self.width_shift - center_y, top: 2 * self.height_shift + center_x, row: self.width } :
+      { shift: self.width_shift - center_x, top: self.height_shift + center_y, row: self.height };
+    var pos =function(r,c) { return self.lr ? { row: c - 1, col: r - 1 } : { row: r - 1, col: c - 1 }; };
+    var row_start = function(r,c) { // like get_row, but symbols without an own entry (e.g. alternative) also find one to the right
+      var rs = self.dim.rows[r] || [];
+      for (var j = c; j >= 0; j--) { if (rs[j]) { return rs[j].start; } }
+      for (var j = c + 1; j < rs.length; j++) { if (rs[j]) { return rs[j].start; } }
+      return 0;
+    };
+    var pos_matrix = [];
+    self.dim.symbols.forEach(function(row,r) {
+      if (!row) { return; }
+      row.forEach(function(sym,c) {
+        if (!sym || !sym.type || r == 0 || c == 0) { return; } // without type the cell is only reserved (set_x), nothing is drawn there
+        var p = pos(r,c);
+        var s = $.extend({}, sym);
+        if (self.lr) {
+          s.x = row_start(r,c) + self.width;
+          s.width = (self.dim.rows[r] && self.dim.rows[r][c] && self.dim.rows[r][c].size) || self.height;
+        }
+        var lab = self.dim.labels[r + ',' + c];
+        if (lab) {
+          var b = get_box(lab);
+          s.label_box = { x: b.x, y: b.y, width: b.width, height: b.height };
+        }
+        if (!pos_matrix[p.row]) { pos_matrix[p.row] = []; }
+        pos_matrix[p.row][p.col] = s;
+      });
+    });
+    self.dim.implied.forEach(function(i) { // x/y are cells in the icon; lr mirrors the icon, so its x runs along the rows there
+      var dr = self.lr ? (i.x || 0) : (i.y || 0), dc = self.lr ? (i.y || 0) : (i.x || 0);
+      var r = i.row + dr, c = i.col + dc;
+      var p = pos(r,c);
+      var src = self.dim.symbols[i.row][i.col];
+      if (!pos_matrix[p.row]) { pos_matrix[p.row] = []; }
+      if (pos_matrix[p.row][p.col]) { return; } // a real symbol wins
+      pos_matrix[p.row][p.col] = self.lr ?
+        { x: row_start(i.row,i.col) + self.width + dr * self.height, width: self.height, type: i.type, eid: src.eid } :
+        { x: src.x + dc * self.width, width: self.width, type: i.type, eid: src.eid };
+    });
+    var con_list = self.dim.connections.map(function(c) {
+      return { from: pos(c.from.row,c.from.col), to: pos(c.to.row,c.to.col) };
+    });
+    return JSON.parse(JSON.stringify({ lr: self.lr == true, geometry: geometry, pos_matrix: pos_matrix, con_list: con_list })); // holes become null
+  } // }}}
+  var specificity = function(sel) { // {{{ ids, classes/attributes/pseudo classes, types
+    var s = sel.replace(/::[\w-]+/g,'');
+    var a = (s.match(/#[\w-]+/g) || []).length;
+    var b = (s.match(/\.[\w-]+|\[[^\]]*\]|:[\w-]+/g) || []).length;
+    var c = (s.replace(/\[[^\]]*\]/g,'').match(/(^|[\s>+~(])[a-zA-Z][\w-]*/g) || []).length;
+    return a * 10000 + b * 100 + c;
   } // }}}
   this.set_duration = function(start) { //{{{
     self.svg.container.append(
@@ -320,6 +479,9 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     $('> defs > [belongs-to=element]', self.svg.container).each(function() {$(this).remove()});
     self.dim.symbols = [];
     self.dim.connections = [];
+    self.dim.implied = [];
+    self.dim.labels = {};
+    self.dim.rows = [];
   } // }}}
   var get_symbol = this.get_symbol = function() { // {{{
   } // }}}
@@ -345,7 +507,8 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     return line;
   } //}}}
 
-  var set_x = this.dim.set_x = function(row,col,twidth,sname) { //{{{
+  var set_x = this.dim.set_x = function(row,col,twidth) { //{{{
+    // reserves the space of a cell; what is drawn there (type, label, ...) is set by set_x_cond
     if (!self.dim.symbols[row]) { self.dim.symbols[row] = []; }
     if (!self.dim.symbols[row][col]) { self.dim.symbols[row][col] = {}; }
 
@@ -385,10 +548,14 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     } 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,sty,eid) { //{{{
+    if (self.lr) { // labels widen the row, not the column
+      set_row(row,col,[]);
+      self.dim.rows[row][col].size = Math.max(self.dim.rows[row][col].size || 0, twidth);
+      twidth = self.width;
+    }
     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] = {};
@@ -496,6 +663,57 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   var get_y = this.draw.get_y = function(row) { // {{{
     return { y: row * self.height - self.height, height_shift: self.height_shift};
   } // }}}
+  var lr_shift = function() { // {{{
+    // mirroring swaps the left (width - width_shift) and top (height_shift) margins, so shift them back
+    return self.width - self.width_shift - self.height_shift;
+  } // }}}
+  var lr_matrix = function() { // {{{
+    return 'matrix(0,1,1,0,' + lr_shift() + ',' + (self.height_shift - lr_shift()) + ')'; // top margin is twice the height_shift
+  } // }}}
+  var set_row = this.dim.set_row = function(row,col,prev) { // {{{
+    // lr: a symbol starts where its predecessors end, so only things in the same block are aligned
+    if (!self.lr) { return; }
+    if (!self.dim.rows[row]) { self.dim.rows[row] = []; }
+    if (self.dim.rows[row][col]) { return; }
+    let mx = 0;
+    prev.forEach((p) => {
+      if (!p) { return; }
+      if (p.row == 0 || p.col == 0) { p = { row: 1, col: 1 }; } // first element connects to description
+      mx = Math.max(mx, get_row_end(p.row,p.col));
+    });
+    for (let i=1; i<row; i++) { // and after everything before in this and the following columns, e.g. blocks in vertical parallels share columns
+      for (let j=col; self.dim.rows[i] && j<self.dim.rows[i].length; j++) {
+        if (self.dim.rows[i][j]) { mx = Math.max(mx, get_row_end(i,j)); }
+      }
+    }
+    self.dim.rows[row][col] = { start: mx };
+  } // }}}
+  var get_row = this.dim.get_row = function(row,col) { // {{{
+    if (!self.lr) { return (row - 1) * self.height; }
+    for (let j=col; j>=0; j--) { // e.g. wide connections point to empty columns
+      if (self.dim.rows[row] && self.dim.rows[row][j]) { return self.dim.rows[row][j].start; }
+    }
+    return 0;
+  } // }}}
+  var get_row_end = this.dim.get_row_end = function(row,col) { // {{{
+    if (!self.lr) { return row * self.height; }
+    let size = self.dim.rows[row] && self.dim.rows[row][col] && self.dim.rows[row][col].size;
+    return get_row(row,col) + (size || self.height);
+  } // }}}
+  var get_row_max = this.dim.get_row_max = function(rowf,rowt,colf,colt) { // {{{
+    if (!self.lr) { return rowt * self.height; }
+    let mx = 0;
+    let last = false;
+    for (let i=rowf; i<=rowt; i++) {
+      for (let j=colf; j<=colt; j++) {
+        if (self.dim.rows[i] && self.dim.rows[i][j]) {
+          mx = Math.max(mx, get_row_end(i,j));
+          if (i == rowt) { last = true; }
+        }
+      }
+    }
+    return last ? mx : mx + self.height; // closing symbols are drawn after the border
+  } // }}}
 
   var get_width = this.draw.get_width = function(g) { //{{{
     let t = g.clone();
@@ -505,6 +723,22 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     t.remove();
     return w;
   } //}}}
+  var get_label_end = this.draw.get_label_end = function(lab,frame) { //{{{
+    // where a label ends, in the coordinates of frame (one of its ancestors),
+    // including all transforms in between, so it does not matter if the label
+    // is beside the icon, below it, rotated or right aligned
+    let inner = lab.clone();
+    lab.parentsUntil(frame).each(function(_,p) {
+      let w = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+      if ($(p).attr('transform')) { w.attr('transform',$(p).attr('transform')); }
+      inner = w.append(inner);
+    });
+    let g = $X('<g xmlns="http://www.w3.org/2000/svg"></g>').append(inner);
+    self.svg.container.append(g);
+    let bb = g[0].getBBox();
+    g.remove();
+    return Math.max(0, bb.x + bb.width);
+  } //}}}
   var get_height = this.draw.get_height = function(g) { //{{{
     let t = g.clone();
     self.svg.container.append(t);
@@ -516,18 +750,24 @@ function WfIllustrator(wf_adaptor) { // View  {{{
   var get_dim = this.draw.get_dim = function(g) { //{{{
     let element = g.clone();
     self.svg.container.append(element);
-    let svg = element[0].ownerSVGElement;
+    let dim = get_box(element[0]);
+    element.remove();
+    return dim;
+  } //}}}
+  var get_box = this.draw.get_box = function(el) { //{{{
+    // the enclosing box of a drawn element, in the coordinates of its svg,
+    // including all transforms (e.g. its blocks and the lr mirroring)
+    let svg = el.ownerSVGElement;
 
-    var r = element[0].getBBox();
+    var r = el.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());
+    var matrix = svg.getScreenCTM().inverse().multiply(el.getScreenCTM());
 
     p.x = r.x;
     p.y = r.y;
@@ -553,8 +793,6 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     var width = maxX - minX;
     var height = maxY - minY;
 
-    element.remove();
-
     return {
       x: minX,
       y: minY,
@@ -589,11 +827,11 @@ function WfIllustrator(wf_adaptor) { // View  {{{
 
     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);
+    let sstart = dstart           + center_x - self.width_shift;
+    let stop   = get_row(row,col) + center_y + 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 transform="translate(' + String(sstart) + ',' + String(stop) + ')' + (self.lr ? ' matrix(0,1,1,0,0,0)' : '') + '"></g>' + // lr: mirror back, so that the symbol is upright
                '</g>');
 
     // add the element-endpoint and other stuff to each symbol (from theme info function)
@@ -702,9 +940,10 @@ function WfIllustrator(wf_adaptor) { // View  {{{
             lab.text(title);
           }
         }
-        let width = this.get_width(lab);
+        if (self.elements[sname].hidelabel) { lab.addClass('invisible'); } // still takes its space
         if (mid.length > 0) {
           if (end.length > 0) {
+            let width = this.get_label_end(lab,mid); // the clip path is inside part-middle
             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">' +
@@ -723,7 +962,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
               lab.addClass('rotate');
               tdim = self.width;
             } else {
-              tdim = self.width + width + self.width_shift_label;
+              tdim = Math.max(self.width, this.get_label_end(lab,sym) + self.width_shift_label);
             }
             set_x_cond(row,col,dstart,tdim,sname,title,subtype,sty,id);
           }
@@ -743,6 +982,12 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       $('.part-end',sym).remove();
       set_x_cond(row,col,dstart,self.width,sname,title,subtype,sty,id);
     }
+    if (self.elements[sname].implied) { self.dim.implied.push($.extend({row: row, col: col}, self.elements[sname].implied)); }
+    if (self.elements[sname].hidelabel) { // only takes its space, it is not shown
+      self.dim.symbols[row][col].label = undefined;
+    } else if (lab.length > 0 && lab.text() != '' && $.contains(sym[0],lab[0])) {
+      self.dim.labels[row + ',' + col] = lab[0];
+    }
 
 
     $(g[0].childNodes[0]).append(sym);
@@ -758,10 +1003,10 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       );
     }
 
-    // hover
+    // hover, top left of the symbol, or top right if the theme says so (e.g. because of a label on the left)
     $(g[0].childNodes[0]).append(
       $X(
-        '<g class="hoverstyle markstyle" xmlns="http://www.w3.org/2000/svg">' +
+        '<g class="hoverstyle markstyle"' + (self.elements[sname].mark_position == 'right' ? ' transform="translate(27,0)"' : '') + ' xmlns="http://www.w3.org/2000/svg">' +
           '<circle cx="2" cy="0" r="7"/>' +
           '<path d="m -1 0 l 2 2 l 4 -4" class="standline"/>' +
         '</g>'
@@ -781,65 +1026,79 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     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+yshrink) + '" ' +
+        'y="' + (get_row(p1.row,p1.col)+self.height_shift/2-self.group_extend+yshrink) + '" ' +
         'width="' + (bend-bstart+2*self.group_extend) + '" ' +
-        'height="' + (((p2.row+1)-p1.row)*self.height+2*self.group_extend-2*yshrink) + '" ' +
+        'height="' + (get_row_max(p1.row,p2.row,p1.col,p2.col)-get_row(p1.row,p1.col)+2*self.group_extend-2*yshrink) + '" ' +
         '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, yshrink=0) { // {{{
     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+yshrink) + '" ' +
+        'y="' + (get_row(p1.row,p1.col)+self.height_shift/2-self.group_extend+yshrink) + '" ' +
         'width="' + (bend-bstart+2*self.group_extend) + '" ' +
-        'height="' + (((p2.row+1)-p1.row)*self.height+2*self.group_extend-2*yshrink) + '" ' +
+        'height="' + (get_row_max(p1.row,p2.row,p1.col,p2.col)-get_row(p1.row,p1.col)+2*self.group_extend-2*yshrink) + '" ' +
         '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) { // {{{
+  var draw_connection = this.draw.draw_connection = function(group, start, end, context_row, arrow, around=false) { // {{{
     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}});
+    let from = {row: start.row, col: start.col}, to = {row: end.row, col: end.col};
+    self.dim.connections.push(self.inverted ? {from: to, to: from} : {from: from, to: to}); // inverted: the arrow points to the start
 
     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="edge" marker-end="url(#' + (end.structural ? 'endarrow' : 'arrow') + ')"/>');
-    else
-      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(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                            String(cend) +   "," + String(end['row']*self.height-15+end.yoffset)
+    var line = $X('<path xmlns="http://www.w3.org/2000/svg" class="edge"/>');
+    let diag = false; // the arrow sits on a diagonal segment (into a gateway), so it has to be closer to the center
+    let sy = get_row(start['row'],start['col']) + self.height - 15 + start.yoffset; // center of the symbols
+    let ey = get_row(end['row'],end['col']) + self.height - 15 + end.yoffset;
+    if (around) { // e.g. back in an empty loop: leave at 45 degrees to the right, go straight, enter at 45 degrees
+      diag = true;
+      let off = 7.5 + 7; // from the center to the corner of the gateway, then 7 further
+      line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                            String(cstart+off) + "," + String(sy-off) +" "+
+                            String(cend+off) + "," + String(ey+off) +" "+
+                            String(cend) + "," + String(ey)
+      );
+    } else if (end['row']-start['row'] == 0 || end['col']-start['col'] == 0) { // straight line
+      line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                            String(cend) +   "," + String(ey)
       );
     } else if (end['row']-start['row'] > 0) { // downwards
       if (end['col']-start['col'] > 0) {// left - right
         if (self.compact) {
-          line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                                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+end.yoffset)
+          diag = self.inverted;
+          line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                                String(cstart+14) + "," + String(get_row_end(start['row'],start['col'])) +" "+ // first turn of horizontal-line going away from node
+                                String(cend) + "," + String(get_row_end(start['row'],start['col'])) +" "+
+                                String(cend) + "," + String(ey)
           );
         } else {
-          line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                                String(cend) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                                String(cend) + "," + String(end['row']*self.height-15+end.yoffset)
+          line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                                String(cend) + "," + String(sy) +" "+
+                                String(cend) + "," + String(ey)
           );
         }
       } else { // right - left
-        line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                              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+end.yoffset)
+        diag = !self.inverted;
+        line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                              String(cstart) + "," + String(get_row(end['row'],end['col'])+self.height-32) +" "+
+                              String(cend+14) + "," + String(get_row(end['row'],end['col'])+self.height-32) +" "+ // last turn of horizontal-line going into the node
+                              String(cend) + "," + String(ey)
         );
       }
     } else if(end['row']-start['row'] < 0) { // upwards
-      line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
-                            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+end.yoffset)
+      diag = !self.inverted;
+      let by = (self.lr ? get_row_end(start['row'],start['col']) : (self.dim.symbols.length-1)*self.height) + 4;
+      line.attr("d", "M " + String(cstart) + "," + String(sy) +" "+
+                            String(cstart) + "," + String(by) +" "+
+                            String(cend+15) + "," + String(by) +" "+
+                            String(cend+15) + "," + String(get_row(end['row'],end['col'])+self.height+15)+" "+
+                            String(cend) + "," + String(ey)
       );
     }
+    if (arrow) { line.attr(self.inverted ? 'marker-start' : 'marker-end', 'url(#' + (end.structural ? 'endarrow' : (diag ? 'arrowdiag' : 'arrow')) + (self.inverted ? 'rev' : '') + ')'); } // inverted: arrow points to the start
+    if (self.lr) { line.attr('transform',lr_matrix()); } // connections are not part of the graph group
     self.svg.container.append(line);
   } //  }}}
   // }}}
@@ -985,6 +1244,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
   // }}}
   // Adaption functions {{{
   this.insert_after = function(new_node, target, source_opts) { // {{{
+    reset_used_id_list();
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
         var nn = self.source(v,source_opts);
@@ -999,6 +1259,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     update();
   } // }}}
   this.insert_first_into = function(new_node, target, source_opts) { // {{{
+    reset_used_id_list();
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
         var nn = self.source(v,source_opts);
@@ -1013,6 +1274,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     update();
   } // }}}
   this.insert_last_into = function(new_node, target) { // {{{
+    reset_used_id_list();
     if ($.isArray(new_node)) {
       $.each(new_node,function(k,v){
         var nn = self.source(v);
@@ -1057,11 +1319,15 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       $(this).removeAttr('svg-label');
     });
   } //}}}
-  var parse = function(root, parent_pos)  { // private {{{
+  var reversed_loop = function(node) { // private {{{
+    return illustrator.wellformed_pre_test && node.tagName == 'loop' && $(node).attr('mode') == 'pre_test';
+  } // }}}
+  var parse = function(root, parent_pos, first_prev)  { // private {{{
     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 prev = [first_prev || parent_pos]; // connects parent with child(s), depending on the expansion
     var endnodes = [];
+    var markers = []; // wellformed_pre_test: branch markers, drawn in one row below all branches
     var sname = sym_name(root.tagName,root);
     var root_expansion = illustrator.elements[root.tagName].expansion(root);
     var block =  { 'max': {'row': pos.row, 'col': pos.col}, 'endnodes': [], 'svg': $X('<g class="group" xmlns="http://www.w3.org/2000/svg"/>') };
@@ -1080,10 +1346,12 @@ 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', '', pos.row, pos.row, pos.row, pos.col, block.svg, false, {}, {})
     } // }}}
 
-    $(root).children().filter(function(){ return this.localName[0] != '_'; }).each(function() {
+    var children = $(root).children().filter(function(){ return this.localName[0] != '_'; });
+    if (illustrator.inverted && root_expansion != 'horizontal') { children = $(children.get().reverse()); } // wellformed_pre_test: everything inside is drawn in reverse order, but not the branches
+    children.each(function() {
       var context = this;
       var tname = context.tagName;
       var sname = sym_name(tname,context);
@@ -1096,32 +1364,52 @@ 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,sname);
+          illustrator.dim.set_x(pos.row,pos.col,illustrator.width);
           pos.col++;
         }
         if (!illustrator.compact) {
           if (block.max.row) {
-            illustrator.dim.set_x(pos.row,pos.col,illustrator.width,sname);
+            illustrator.dim.set_x(pos.row,pos.col,illustrator.width);
             pos.row = block.max.row + 1;
           }
         }
       }
 
+      var bottom = false;
       if(illustrator.elements[tname] != undefined && illustrator.elements[tname].type == 'complex') {
+        bottom = illustrator.inverted && root_expansion == 'horizontal'; // wellformed_pre_test: branch markers are drawn below their content
         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,sname);
+        illustrator.dim.set_x(pos.row,pos.col,illustrator.width);
+        illustrator.dim.set_row(pos.row,pos.col,prev);
+        if ((bottom ? !illustrator.lr : (illustrator.lr && illustrator.elements[tname].expansion(context) == 'vertical' && !illustrator.elements[tname].col_shift(context))) && illustrator.elements[sname].svg) { // lr: the content follows the label in the same column, bottom: the marker is drawn after the next branches, so measure the symbol before it is drawn
+          let lab = (illustrator.elements[sname].label ? illustrator.elements[sname].label(context) : []) || [];
+          let tit = lab.find((l) => l && l.column == 'Label' && l.value);
+          illustrator.draw.draw_symbol(sname, 'measure', tit ? tit.value : undefined, pos.row, pos.row, pos.row, pos.col, $X('<g xmlns="http://www.w3.org/2000/svg"/>'), true, {}, {});
+        }
         // 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)));
+        if (reversed_loop(context)) { illustrator.inverted = !illustrator.inverted; }
+        let tblock;
+        if (bottom) { // content starts in the row of the marker and connects to the gateway
+          let up = JSON.parse(JSON.stringify(pos));
+          up.row--;
+          tblock = parse(context, up, prev[0]);
+        } else {
+          tblock = parse(context, JSON.parse(JSON.stringify(pos)));
+        }
+        if (reversed_loop(context)) { illustrator.inverted = !illustrator.inverted; }
 
         // 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;
+        if (bottom) { // markers are drawn after all branches, see below
+          markers.push({ tname: tname, sname: sname, context: context, prev: tblock.endnodes, col: pos.col, top: pos.row, maxcol: tblock.max.col });
+        }
 
         // console.log('<---- up', tname, parent_pos.row, block.max.row, parent_pos.col, block.max.col, illustrator.dim.debug());
 
@@ -1138,9 +1426,11 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       // }}}
 
       var g;
-      set_details(tname,sname,pos,context);
-      var origpos = JSON.parse(JSON.stringify(pos));
-      [g, endnodes] = draw_position(tname,parent_pos,origpos,prev,block,endnodes,context);
+      if (!bottom) {
+        set_details(tname,sname,pos,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 = JSON.parse(JSON.stringify(endnodes)); pos.row = block.max.row;} // covers e.g. input's for alternative, parallel_branch, ... everything with horizontal expansion
@@ -1155,6 +1445,11 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         pos.row++;
         max.row++;
         block.max.row = pos.row;
+        // the arrows to the closing symbol belong to the loop. empty loops: the
+        // straight arrow comes from the opening symbol, not from the content, and
+        // the way back goes around the side, so both point the other way
+        let flip = reversed_loop(context) != (illustrator.elements[csname].closeblock == true && pos.row == origpos.row + 1);
+        if (flip) { illustrator.inverted = !illustrator.inverted; }
         if (illustrator.elements[sname].endnodes == 'this') {
           pos.col++;
           if (pos.col > max.col) {
@@ -1168,6 +1463,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           set_details(ctname,csname,pos,context,true);
           [undefined, endnodes] = draw_position(ctname,parent_pos,pos,prev,block,[],context,{svg: g, pos: origpos});
         }
+        if (flip) { illustrator.inverted = !illustrator.inverted; }
         if (illustrator.elements[sname].border == 'structural') {
           // structural border: outgoing arrow starts at the group border instead of from the icon
           // small y offset.
@@ -1181,8 +1477,27 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       }
     });
 
+    if (markers.length > 0) {
+      max.row++;
+      block.max.row = max.row;
+      let maxcol = block.max.col;
+      if (illustrator.lr) { // all markers start at the same position, after the longest branch
+        markers.forEach((m) => { illustrator.dim.set_row(max.row,m.col,m.prev); });
+        let start = Math.max(...markers.map((m) => illustrator.dim.get_row(max.row,m.col)));
+        markers.forEach((m) => { illustrator.dim.rows[max.row][m.col].start = start; });
+      }
+      markers.forEach((m) => {
+        let mpos = { row: max.row, col: m.col, final: false, wide: false, yoffset: 0, top: m.top, marker: true }; // the tile starts at the top of the branch
+        block.endnodes = [mpos]; // the marker is the end of its branch
+        block.max.col = m.maxcol; // the tile only covers its own branch
+        set_details(m.tname,m.sname,mpos,m.context);
+        draw_position(m.tname,parent_pos,mpos,m.prev,block,endnodes,m.context);
+      });
+      block.max.col = maxcol;
+    }
+
     if($(root).children().filter(function(){ return this.attributes['svg-id'] != undefined; }).length == 0) { // empty complex found
-      endnodes = [parent_pos];
+      endnodes = [prev[0]]; // parent_pos, or for markers below their content the gateway
       max.row = parent_pos.row;
       max.col = parent_pos.col;
     }
@@ -1233,6 +1548,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     // console.log('----- pos ' + sname, parent_pos.row, block.max.row, parent_pos.col, block.max.col, block, illustrator.dim.debug());
 
     // Draw Symbol {{{
+    illustrator.dim.set_row(pos.row,pos.col,prev);
     let style = {};
     if (illustrator.elements[sname].style && context) {
       style = illustrator.elements[sname].style(context);
@@ -1265,7 +1581,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
         if (illustrator.elements[sname].closing_symbol) {
           illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row + 1 }, block.svg, yshrink);
         } else {
-          illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row }, block.svg, yshrink);
+          illustrator.draw.draw_tile($(context).attr('svg-id'), pos.top ? { row: pos.top, col: pos.col } : pos, { col: wide, row: block.max.row }, block.svg, yshrink); // top: marker below its content
         }
       }
     }
@@ -1287,6 +1603,9 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           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 { // no content: the way back goes around the side
+          connection_case = 7;
+          illustrator.draw.draw_connection(block.svg, pos, second.pos, 0, true, true);
         }
       } else {
         for (let node=0; node < block.endnodes.length; node++) {
@@ -1305,9 +1624,9 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       connection_case = 3;
       illustrator.draw.draw_connection(block.svg, { row: 1, col: 1, yoffset: 0 }, conn_target, 0, true);
     } else {
-      if (illustrator.elements[sname].noarrow == undefined || illustrator.elements[sname].noarrow == false) {
+      if (illustrator.elements[sname].noarrow == undefined || illustrator.elements[sname].noarrow == false || illustrator.inverted) { // inverted: the arrow points from the marker to the content
         for (let node=0; node < prev.length; node++) {
-          if (prev[node] && !prev[node].final) {
+          if (prev[node] && !(illustrator.inverted ? pos.final : prev[node].final)) { // inverted: nothing goes out of a final element, which is drawn as the target
             if (prev[node].wide) {
               var pn = JSON.parse(JSON.stringify(prev[node]));
               if (pos.col > prev[node].col) {
@@ -1320,10 +1639,10 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
               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], conn_target, 0, true);
+                illustrator.draw.draw_connection(block.svg, prev[node], conn_target, 0, !prev[node].marker);
               } else {
                 // console.log('++ case 5b',prev[node].row,pos.row,illustrator.dim.debug());
-                illustrator.draw.draw_connection(block.svg, prev[node], conn_target, 0, true);
+                illustrator.draw.draw_connection(block.svg, prev[node], conn_target, 0, !prev[node].marker); // no arrow into markers drawn below their content
               }
             }
           }