cpee 2.1.52 → 2.1.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: abf105360b93a73b4be3fbceb75cc95f805fe947917d1a8da91a727a1bfce520
-  data.tar.gz: 7f7dbec843a239c9dfc97166aaddd3e6cd43ddc5d3fd10335a87d72ea6aeda1b
+  metadata.gz: 6b18fb6a90f4eecc274718f826b2eb26594170285bccbe81799b01d62893f7a7
+  data.tar.gz: '0990fbfc1a1e7f3dc0874fa53f0d8eae1a9a86e05fc8c3a0b4a8decc4f3cb6c9'
 SHA512:
-  metadata.gz: 60ff6635449e118df6f272a1c7d8e5f23637d30ea60e4d0c3b928d6dd63a896ddcadde07093029a64cb7050642da53311f6d80e360f1ed267c01153e3dfa4ad4
-  data.tar.gz: b8e5e91f5afdbab0e986c3bb0dc68bd468c86ee4d6633d1c8254cee9be8a4620f288968f558f0bb92e1fa0854ec9a760ec7744c14476148bf77fd939df42de1a
+  metadata.gz: 5a163fa0d363e66371e948d7c307d0bde0eab957ce9479b19aa7c80c90d5b0e731187b4e5f831faa4a36451f3741182dba5c14fd2b9dc9ac6ff3d1dba0e57691
+  data.tar.gz: 897ea95574747419d64820adafb97cac14bfd24493e725f8e6e9a106d46317f280df0a478650a718bcdefd2bb435d4f68cb75f0aa3941d36827afe4929d4c195

data/cockpit/css/{resources.css → resources-label.css}

@@ -1,10 +1,3 @@
-resources {
-  border-left: 1pt solid var(--wfadaptor-border);
-}
-#resources line.resource-line:hover {
-  stroke: red;
-}
-
 .resource-label {
   position: absolute;
   padding-left: 0.5em;

data/cockpit/css/resources-svg.css

@@ -0,0 +1,20 @@
+svg rect.border {
+  fill: var(--wfadaptor-border);
+}
+svg .resource-point.read {
+  fill: green;
+}
+svg .resource-point.write {
+  fill: orange;
+}
+svg .resource-point.both {
+  fill: blue;
+}
+svg line.resource-line {
+  stroke: red;
+  stroke-opacity: 0.1;
+}
+svg line.resource-line:hover {
+  stroke: red;
+  stroke-opacity: 0.2;
+}

data/cockpit/css/ui.css

@@ -41,10 +41,6 @@ body {
 #graphgrid.striped .graphlabel, #graphgrid.striped .graphempty {
   border-left: 1pt solid var(--wfadaptor-border);
 }
-#graphgrid.striped #resources rect.border {
-  width: 1pt;
-  fill: var(--wfadaptor-border);
-}
 #graphgrid.striped .graphlabel.even, #graphgrid.striped .graphempty.even, #graphgrid.striped .graphlast.even {
   background-color: #e9e9e9;
 }

data/cockpit/edit.html

@@ -55,7 +55,10 @@
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/edit.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
+    <script type="text/javascript" src="js/resources.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="/global_ui/uicpee.css" type="text/css"/>
     <style>
       /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
@@ -242,8 +245,9 @@
         <ui-behind                                                 ><a style='display:none' target='_blank' id='current-track'>T</a><a style='display:none' target='_blank' id='current-graph'>G</a></ui-behind>
       </ui-tabbar>
       <ui-content>
-        <ui-area data-belongs-to-tab="details" id='graphcolumn'>
+        <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
           <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>

data/cockpit/graph.html

@@ -55,7 +55,10 @@
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
+    <script type="text/javascript" src="js/resources.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/graph.css" type="text/css"/>
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
@@ -63,6 +66,7 @@
     <div id="trackfull">
       <div id='graphcolumn'>
         <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>

data/cockpit/index.html

@@ -46,7 +46,7 @@
 
     <!-- modelling ui -->
     <script type="text/javascript" src="js/wfadaptor.js"></script>
-    <link rel="stylesheet" href="css/wfadaptor.css" type="text/css"/>
+    <link rel="stylesheet" href="css/wfadaptor.css" type="text/css" data-include-export="true"/>
 
     <!-- custom stuff, play arround  -->
     <script type="text/javascript" src="js/ui.js"></script>
@@ -56,7 +56,8 @@
     <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="js/resources.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
-    <link rel="stylesheet" href="css/resources.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="/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/js/details.js

@@ -7,20 +7,6 @@ $(document).ready(function() {
     clearTimeout(timer);
     timer = setTimeout(do_main_save, 5000);
   });
-  $(document).on('change','#dat_details select',function(e){
-    clearTimeout(timer);
-    do_main_save();
-  });
-  $(document).on('blur','#dat_details input, #dat_details textarea, #dat_details [contenteditable]',function(e){
-    clearTimeout(timer);
-    do_main_save();
-  });
-  $(document).on('keypress','#dat_details input',function(e){
-    if (e.keyCode == 13) {
-      clearTimeout(timer);
-      do_main_save();
-    }
-  });
   $(document).on('keypress','#dat_details [contenteditable]',function(e){
     if (e.keyCode == 13) {
       document.execCommand('insertLineBreak')
@@ -35,6 +21,10 @@ $(document).ready(function() {
     clearTimeout(timer);
     do_main_save();
   });
+  $(document).on('relaxngui_change', '#dat_details', function(e){
+    clearTimeout(timer);
+    do_main_save();
+  });
 });
 
 function do_main_save() { //{{{

data/cockpit/js/edit.js

@@ -7,6 +7,9 @@ document.addEventListener('parameters:changed', function (e) {
 document.addEventListener('modifiers:changed', function (e) {
   $("button[name=save]").prop("disabled",false);
 }, false);
+document.addEventListener('model:loaded', function (e) {
+  $("button[name=save]").prop("disabled",false);
+}, false);
 
 function leading_zeros(dt) {
   return (dt < 10 ? '0' : '') + dt;

data/cockpit/js/instance.js

@@ -6,6 +6,7 @@ var loading = false;
 var subscription;
 var subscription_state = 'less';
 var graph_changed = new Event("graph:changed", {"bubbles":true, "cancelable":false});
+var model_loaded = new Event("model:loaded", {"bubbles":true, "cancelable":false});
 var save = {};
     save['endpoints'] = undefined;
     save['dataelements'] = undefined;
@@ -504,10 +505,12 @@ function monitor_instance_values(type,vals) {// {{{
           } else {
             save['modeltype'] = undefined;
           }
-          if ($('#modifiers > div').length == 0) {
-            modifiers_display().then(function(){ modifiers_select(); });
-          } else {
-            modifiers_select();
+          if ($('#modifiers').length > 0) {
+            if ($('#modifiers > div').length == 0) {
+              modifiers_display().then(function(){ modifiers_select(); });
+            } else {
+              modifiers_select();
+            }
           }
           var text = $(" > attributes > info",res).text() + " (" + url.replace(/\/$/,'').split(/[\\/]/).pop() + ")";
           $('#title').text(text);
@@ -565,109 +568,88 @@ function adaptor_init(url,theme,dslx) { //{{{
         }
 
         $('#graphgrid .graphlabel, #graphgrid .graphempty, #resources, #graphgrid .graphlast').remove();
-        var tlabels = {};
-        var tcolumns = [];
-        var tcolumncount = {}
-        var thidden = [];
+        let tcolumns = [];
+        let tcolumntype = {};
+        let tcolumncount = {}
 
-        var tsvgs = {};
         const mapPoints = new Map();
-        let iconsize = 14;
-        let iconshift = 7;
+        const tcolumnsvgs = {};
+        const iconsize = 10;
+        const space = 5;
 
         _.each(labels,function(val){
           if (val.label != "") {
-            tlabels[val.row] = [];
             _.each(val.label,function(col) {
               if (!tcolumns.includes(col.column)) {
                 tcolumns.push(col.column);
                 tcolumncount[col.column] = 0;
+                tcolumnsvgs[col.column] = {};
               }
-              if (!thidden.includes(col.column) && col.type == 'resource') {
-                thidden.push(col.column);
+              if (tcolumntype[col.column] == undefined && col.type != undefined) {
+                tcolumntype[col.column] = col.type;
               }
               if (col.value != undefined) {
+                let pos = dimensions.height_shift/2 + dimensions.height * (val.row - 1) + (dimensions.height / 2);
+                let firstpos = dimensions.height_shift/2 + (dimensions.height / 2);
 
-                // Start Peilei
                 if (col.type == "resource") {
-                  let str = '';
                   for (const [k, v] of Object.entries(col.value)) {
-                    var p = {};
-                    p.AR = v;
-                    p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
+                    var p = { AR: v };
                     if (!mapPoints.has(k)) {
-                      p.y0 = p.y0 == undefined ? (dimensions.height_shift/2 + dimensions.height * val.row - 20) : p.y0;
-                      p.ymax = (p.ymax == undefined) ? p.y0 : p.ymax; //(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax ? dimensions.height_shift/2 + dimensions.height * val.row - 20 : p.ymax);
+                      p.y0 = p.y0 == undefined ? pos : p.y0;
+                      p.ymax = (p.ymax == undefined) ? p.y0 : p.ymax;
                     } else {
                       p.y0 = mapPoints.get(k).y0;
-                      p.ymax = mapPoints.get(k).ymax; //(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax ? dimensions.height_shift/2 + dimensions.height * val.row - 20 : p.ymax);
+                      p.ymax = mapPoints.get(k).ymax;
                     }
                     mapPoints.set(k, p);
                   }
-                  var cx = iconshift*2;
-                  str += '<g xmlns="http://www.w3.org/2000/svg">';
 
+                  let tsvg = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+
+                  var cx = space;
                   for (const [k, p] of mapPoints) {
-                    let firstAssignFlag = 0;
-                    p.x0 = p.xc = cx;
+                    let firstAssignFlag = false;
+                    p.x = cx;
 
                     // Including Triangle
                     if (k in col.value) {   // Define points for a triangle pointing to the right
+                      let inner;
+
                       if (p.AR == "Read") {
-                        str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 20) + ' ' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 15) + ' ' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 25) + '" fill="green" class="resource-point">';
-                        if (p.yc == p.y0) {
-                          firstAssignFlag = 1;
-                        }
+                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" points="' + (p.x) + ',' + pos + ' ' + (p.x + iconsize) + ',' + (pos + iconsize/2) + ' ' + (p.x + iconsize) + ',' + (pos - iconsize/2) + '" class="resource-point read"></polygon>');
+                        if (pos == p.y0) { firstAssignFlag = true; }
                       } else if (p.AR == "Assign") {    // Define points for a triangle pointing to the left
-                        str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 20) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 15) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * val.row - 25) + '" fill="orange" class="resource-point">';
+                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" points="' + (p.x + iconsize) + ',' + pos + ' ' + (p.x) + ',' + (pos + iconsize/2) + ' ' + (p.x) + ',' + (pos - iconsize/2) + '" class="resource-point write"></polygon>');
                       } else if (p.AR == "AssignRead") {
-                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
-                        str += '<circle xmlns="http://www.w3.org/2000/svg" cx="' + cx + '" cy="' + p.yc + '" r="5" fill="blue" class="resource-point">';
+                        inner = $X('<circle xmlns="http://www.w3.org/2000/svg" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
                       }
 
-                      if (dimensions.height_shift/2 + dimensions.height * val.row != p.y0) {
-                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
-                        if (dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax) {
-                          p.ymax = dimensions.height_shift/2 + dimensions.height * val.row - 20;
-                        }
+                      // extend the bars
+                      if (pos > p.ymax) {
+                        p.ymax = pos;
                       }
 
-                      // Converted from <title>
-                      str += '<text xmlns="http://www.w3.org/2000/svg">' + k + '</text>';
-
-                      if (p.AR == "Read" || p.AR == "Assign") {
-                        str += '</polygon>';
-                      } else if (p.AR == "AssignRead") {
-                        str += '</circle>';
-                      }
+                      inner.append($X('<text xmlns="http://www.w3.org/2000/svg">' + k + '</text>'));
+                      tsvg.append(inner);
                     }
 
-                    if (firstAssignFlag == 1) {
+                    if (firstAssignFlag) {
                       // Additional logic and construction of another polygon for orange triangle pointing left
-                      p.y0 -= dimensions.height;
-                      str += '<polygon xmlns="http://www.w3.org/2000/svg" points="' + (cx + 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 20) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 15) + ' ' + (cx - 5) + ',' + (dimensions.height_shift/2 + dimensions.height * (val.row - 1) - 25) + '" fill="orange" class="resource-point">' + '<text xmlns="http://www.w3.org/2000/svg">' + k + '</text></polygon>';
+                      p.y0 -= (val.row-1) * dimensions.height;
+                      tsvg.append($X('<polygon xmlns="http://www.w3.org/2000/svg" points="' + (p.x + iconsize) + ',' + firstpos + ' ' + (p.x) + ',' + (firstpos + iconsize/2) + ' ' + (p.x) + ',' + (firstpos - iconsize/2) + '" class="resource-point write">' + '<text xmlns="http://www.w3.org/2000/svg">' + k + '</text></polygon>'));
                     }
-                    cx += iconsize;
+                    cx += iconsize + space;
                   }
 
-                  for (const [k, p] of mapPoints) {
-                    if(k in col.value) {
-                      if (dimensions.height_shift/2+dimensions.height*val.row != p.y0) {
-                        p.yc = dimensions.height_shift/2 + dimensions.height * val.row - 20;
-                        if(dimensions.height_shift/2 + dimensions.height * val.row - 20 > p.ymax) {
-                          p.ymax = dimensions.height_shift/2 + dimensions.height * val.row - 20;
-                        }
-                      }
-                    }
-                  }
-                  str += '</g>';
-
-                  tsvgs[val.row] = $X(str);
+                  tcolumnsvgs[col.column][val.row] = tsvg;
+                } else {
+                  tsvg = $X('<text  x="' + space + '" y="' + (dimensions.height * val.row - dimensions.height_shift) + '" xmlns="http://www.w3.org/2000/svg">' + col.value + '</text>');
+                  tcolumnsvgs[col.column][val.row] = tsvg;
                 }
 
                 tcolumncount[col.column] += 1;
               }
-              tlabels[val.row][tcolumns.indexOf(col.column)] = { label: col.value, type: val.tname, id: val.element_id };
             });
           }
         });
@@ -677,48 +659,47 @@ function adaptor_init(url,theme,dslx) { //{{{
           'grid-template-columns': 'max-content' + (tcolumns.length > 0 ? ' repeat(' + tcolumns.length.toString() + ',max-content)' : '') + ' auto'
         });
 
-        for (var i = 0; i < max.row; i++) {
-          for (var j = 0; j < tcolumns.length - 1; j++) {
-            if (thidden != tcolumns[j]) {
-              if (tlabels[i+1] != undefined && tlabels[i+1][j] != undefined && tlabels[i+1][j].label != undefined && tlabels[i+1][j].label != '') {
-                var col = tlabels[i+1][j];
-                var ele = $('<div element-row="' + i + '" class="graphlabel ' + (i % 2 == 0 ? 'odd' : 'even') + '" element-type="' + col.type + '" element-id="' + col.id + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '"><span>' + col.label + '</span></div>');
-                graphrealization.illustrator.draw.bind_event(ele, col.type, false);
-                $('#graphgrid').append(ele);
-              } else {
-                if (tcolumncount[tcolumns[j]] != 0) {
-                  var ele = $('<div element-row="' + i + '" class="graphempty ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + dimensions.height_shift + 'px">&#032;</div>');
-                  $('#graphgrid').append(ele);
-                }
+        tcolumns.forEach(h => {
+          if (Object.keys(tcolumnsvgs[h]).length > 0) {
+            const svgcolumn = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id="resources"></svg>');
+            const svgback = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+            const svgfront = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+            let xwidth = 0;
+            svgcolumn.append(svgback);
+            svgcolumn.append(svgfront);
+            svgcolumn.css('grid-row', '1/span ' + (max.row + 2))
+            svgcolumn.css('grid-column', tcolumns.indexOf(tcolumns.first) + 2);
+            svgcolumn.attr('height', $('#graphcanvas').attr('height'));
+            $('#graphgrid').append(svgcolumn);
+
+            for (var i = 0; i < max.row; i++) {
+              let node = svgfront.append($(tcolumnsvgs[h][i+1]));
+              if (xwidth < node[0].getBBox().width) { xwidth = node[0].getBBox().width; }
+            }
+            xwidth = xwidth + 2 * space;
+            if (striped == true) {
+              for (var i = 0; i < max.row; i++) {
+                svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="stripe ' +  (i % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" width="' + (xwidth + 1) + '" height="' + dimensions.height + '"></rect>'));
+                svgback.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="border" x="0" y="' + (dimensions.height * i + dimensions.height_shift/2) + '" height="' + dimensions.height + '" width="1"></rect>'));
+              }
+            }
+            if (tcolumntype[h] == "resource") {
+              for (const [k, p] of mapPoints) {
+                svgback.append($X('<line xmlns="http://www.w3.org/2000/svg" x1="' + (p.x + iconsize/2) + '" y1="' + p.y0 + '" x2="' + (p.x + iconsize/2) + '" y2="' + p.ymax + '" class="resource-line" stroke-width="' + iconsize + '"><text>' + k + '</text></line>'));
               }
             }
-          }
-
-          var j = tcolumns.length;
-          var ele = $('<div element-row="' + i + '" class="graphlast ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + dimensions.height_shift + 'px">&#032;</div>');
-          $('#graphgrid').append(ele);
-        }
 
-        if (Object.keys(tsvgs).length > 0) {
-          let dataflow = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id="resources"></svg>');
-          dataflow.css('grid-row', '1/span ' + (max.row + 2));
-          dataflow.css('grid-column', tcolumns.indexOf(thidden.first) + 2);
-          dataflow.attr('height', $('#graphcanvas').attr('height'));
-          dataflow.attr('width', mapPoints.size * iconsize + iconshift * 2);
+            $('.resource-label').hide();  // Speech Bubble hide by default
 
-          for (var i = 0; i < max.row; i++) {   // Needs parenthesises below
-            dataflow.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="stripe ' +  (i % 2 == 0 ? 'even' : 'odd') + '" x="0" y="' + (dimensions.height * i + 5.2) + '" width="' + (mapPoints.size * iconsize + iconshift * 2) + '" height="' + dimensions.height + '"></rect>'));
-            dataflow.append($X('<rect xmlns="http://www.w3.org/2000/svg" class="border" x="0" y="' + (dimensions.height * i + 5.2) + '" height="' + dimensions.height + '"></rect>'));
-          }
-          for (const [k, p] of mapPoints) {
-            dataflow.append($X('<line xmlns="http://www.w3.org/2000/svg" x1="' + p.x0 + '" y1="' + p.y0 + '" x2="' + p.xc + '" y2="' + p.ymax + '" class="resource-line" stroke-opacity="0.1" stroke="orange" stroke-width="10" marker-end="url(#arrowhead)"><text>' + k + '</text></line>'));
-          }
-          for (var i = 0; i < max.row; i++) {
-            dataflow.append($(tsvgs[i+1]));
+            svgcolumn.attr('width', xwidth);
           }
-          $('#graphgrid').append(dataflow);
+        });
 
-          $('.resource-label').hide();  // Speech Bubble hide by default
+        // Add the last stripe
+        var j = tcolumns.length;
+        for (var i = 0; i < max.row; i++) {
+          var ele = $('<div element-row="' + i + '" class="graphlast ' + (i % 2 == 0 ? 'odd' : 'even') + '" style="grid-column: ' + (j+2) + '; grid-row: ' + (i+2) + '; padding-bottom: ' + dimensions.height_shift + 'px">&#032;</div>');
+          $('#graphgrid').append(ele);
         }
       };
       graphrealization.set_svg_container($('#graphcanvas'));
@@ -1120,48 +1101,50 @@ function save_svgfile() {// {{{
   var url = $('body').attr('current-instance');
 
   var gc = $('#graphcanvas').clone();
-  $.ajax({
-    type: "GET",
-    url: "css/wfadaptor.css",
-    success: function(res){
-      gc.prepend($X('<style xmlns="http://www.w3.org/2000/svg" type="text/css"><![CDATA[' + res + ']]></style>'));
-      $(window.document.styleSheets).each(function(i,x){
-        if (x && x.href && x.href.match(/wfadaptor\.css$/)) {
-					var varreps = {};
-          $(x.cssRules).each(function(j,y){
-            if (y.selectorText == ":root") {
-              $(y.style).each(function(k,z) {
-								varreps['var\\(' + z + '\\)'] = getComputedStyle(document.documentElement).getPropertyValue(z).toString();
-							});
-            }
-            var loc = $(gc).find(y.selectorText.replace(/svg /g,''));
-						var cst = y.style.cssText;
-            for (k in varreps) {
-							cst = cst.replace(new RegExp(k,'g'),varreps[k]);
-						}
-            loc.each(function(k,loco) {
-              var sty = $(loco).attr('style') == undefined ? '' : $(loco).attr('style');
-              $(loco).attr('style',cst + sty);
-            });
+  var start = parseInt(gc.attr('width'));
+  $('#graphgrid > svg:not(#graphcanvas)').each( (i,ele) => {
+    const gr = $X('<g transform="translate(' + start + ')" xmlns="http://www.w3.org/2000/svg"></g>');
+    start = start + parseInt(ele.getAttribute('width'));
+    $('g',ele).each((j,g) => {
+      gr.append($(g).clone());
+    });
+    gc.append(gr);
+  });
+  var varreps = {};
+  $(window.document.styleSheets).each(function(i,x){
+    if (x && x.href && x.ownerNode.attributes.getNamedItem('data-include-export')) {
+      $(x.cssRules).each(function(j,y){
+        if (y.selectorText == ":root") {
+          $(y.style).each(function(k,z) {
+            varreps['var\\(' + z + '\\)'] = getComputedStyle(document.documentElement).getPropertyValue(z).toString();
           });
-          var loc = $(gc).find('text.super');
-          loc.attr('style',loc.attr('style') + ' display: none');
-          var loc = $(gc).find('.stripe');
-          loc.attr('style',loc.attr('style') + ' display: none');
         }
+        var loc = $(gc).find(y.selectorText.replace(/svg /g,''));
+        var cst = y.style.cssText;
+        for (k in varreps) {
+          cst = cst.replace(new RegExp(k,'g'),varreps[k]);
+        }
+        loc.each(function(k,loco) {
+          var sty = $(loco).attr('style') == undefined ? '' : $(loco).attr('style');
+          $(loco).attr('style',cst + sty);
+          console.log(loco);
+        });
       });
-      $.ajax({
-        type: "GET",
-        url: url + "/properties/attributes/info/",
-        success: function(res){
-          $('#savesvgfile').attr('download',res + '.svg');
-          $('#savesvgfile').attr('href','data:application/xml;charset=utf-8;base64,' + $B64(gc.serializeXML()));
-          document.getElementById('savesvgfile').click();
-        },
-        error: report_failure
-      });
+      var loc = $(gc).find('text.super');
+      loc.attr('style',loc.attr('style') + ' display: none; ');
     }
   });
+  gc.attr('width',start+1);
+  $.ajax({
+    type: "GET",
+    url: url + "/properties/attributes/info/",
+    success: function(res){
+      $('#savesvgfile').attr('download',res + '.svg');
+      $('#savesvgfile').attr('href','data:application/xml;charset=utf-8;base64,' + $B64(gc.serializePrettyXML()));
+      document.getElementById('savesvgfile').click();
+    },
+    error: report_failure
+  });
 }// }}}
 async function set_testset(testset,exec) {// {{{
   var url = $('body').attr('current-instance');
@@ -1208,6 +1191,8 @@ async function set_testset(testset,exec) {// {{{
 
   await Promise.all(promises);
 
+  document.dispatchEvent(model_loaded);
+
   $.ajax({
     type: "GET",
     url: url + "/properties/state/",
@@ -1224,7 +1209,9 @@ async function set_testset(testset,exec) {// {{{
       });
     }
   });
- }// }}}
+
+
+}// }}}
 
 function load_testsetfile_after() { //{{{
   if (loading) return;
@@ -1344,7 +1331,10 @@ async function load_des(url,model) { //{{{
       'CPEE-Event-Source': myid
     },
     data: model,
-    error: report_failure
+    error: report_failure,
+    success: () => {
+      document.dispatchEvent(model_loaded);
+    }
   });
 } //}}}
 

data/cockpit/js/modifiers.js

@@ -7,20 +7,6 @@ $(document).ready(function() {
     clearTimeout(timer);
     timer = setTimeout(function(){ do_mod_save(e.target) }, 5000);
   });
-  $(document).on('change','#modifiers div.additional select',function(e){
-    clearTimeout(timer);
-    do_mod_save(e.target);
-  });
-  $(document).on('blur','#modifiers div.additional input, #modifiers div.additional textarea, #modifiers div.additional [contenteditable]',function(e){
-    clearTimeout(timer);
-    do_mod_save(e.target);
-  });
-  $(document).on('keypress','#modifiers div.additional input',function(e){
-    if (e.keyCode == 13) {
-      clearTimeout(timer);
-      do_mod_save(e.target);
-    }
-  });
   $(document).on('keypress','#modifiers div.additional [contenteditable]',function(e){
     if (e.keyCode == 13) {
       document.execCommand('insertText', false, '\n');
@@ -35,6 +21,10 @@ $(document).ready(function() {
     clearTimeout(timer);
     do_mod_save(e.target);
   });
+  $(document).on('relaxngui_change', '#modifiers div.additional', function(e){
+    clearTimeout(timer);
+    do_mod_save(e.target);
+  });
 });
 
 function do_mod_save(target) {

data/cockpit/js/parameters.js

@@ -46,16 +46,6 @@ $(document).ready(function() {
     clearTimeout(timer);
     timer = setTimeout(function(){ do_parameters_save(event); }, 5000);
   });
-  $(document).on('blur','#dat_dataelements input, #dat_endpoints input, #dat_attributes input',function(event){
-    clearTimeout(timer);
-    do_parameters_save(event);
-  }); //}}}
-  $(document).on('keypress','#dat_dataelements input, #dat_endpoints input, #dat_attributes input',function(event){
-    if (event.keyCode == 13) {
-      clearTimeout(timer);
-      do_parameters_save(event);
-    }
-  }); //}}}
   $(document).on('relaxngui_remove', '#dat_dataelements, #dat_endpoints, #dat_attributes', function(event){
     clearTimeout(timer);
     do_parameters_save(event);
@@ -64,6 +54,10 @@ $(document).ready(function() {
     clearTimeout(timer);
     do_parameters_save(event);
   });
+  $(document).on('relaxngui_change', '#dat_dataelements, #dat_endpoints, #dat_attributes', function(event){
+    clearTimeout(timer);
+    do_parameters_save(event);
+  });
 });
 
 function do_parameters_save(event) { //{{{