cpee 2.1.56 → 2.1.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2d77967638de8fff8f7c245c4913c4f49811645831bb8029a40515862ef0b65c
-  data.tar.gz: 32b6ab1f5ddc14fb1e8584ce2aacfcec2a44f988d7bb9ada9db844f7524409b0
+  metadata.gz: 880c2cfd824abd01dda1b53285ef3fd95527fff1fd85084534e1158f1f9ed68b
+  data.tar.gz: 18269ab06823c002e027af1c111cb61a9865f82263e0aba59254c219c6424d66
 SHA512:
-  metadata.gz: f6c79e249af879938e24817a2a943b35864280a95e6dd9153a8f7286c6f2160dcc282e0341a9d67569e906e3e04d6a5f1c6a6fc0309df451a79dff982edcb13c
-  data.tar.gz: 0b3d58a8a0cc37333d45e3f7681062ab8ab9abdddc5123c67c6b493a73ea7c844e8015ac3d219fdca69c664a2e785ce77a3963a189cae7aff476d58cb678ba89
+  metadata.gz: 6359ca4690a8dbfc2ebbf3f03bb812c1dd27282cc8e7549404ec24404fa99c7f863ccd8bd2c1fb4aab6beb19468aa480fea2a4e127872a62ec888aa162a5b3d3
+  data.tar.gz: 4af5818c1a0779992da01302a989919b218ef4fd09d2cca4bd5f9253c3455563ca12984f77d04def36ae90b26ef29e14bfab9e5a2c2a8e3b97dbb4219eaa4c87

data/cockpit/css/resources-label.css

@@ -1,35 +1,36 @@
-.resource-label {
-  position: absolute;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  min-width: 10ex;
-  height: 2em;
-  text-align: center;
-  line-height: 2em;
-  background-color: var(--wfadaptor-background);
-  border: 1pt solid var(--wfadaptor-border);
-  border-radius: 1em;
+svg.displaylabel .displaylabel {
+  fill: var(--wfadaptor-background);
+  fill-opacity:1;
+  stroke: var(--wfadaptor-border);
+  stroke-width:1.6;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+  stroke-miterlimit:4;
+  stroke-opacity:1;
+  stroke-dasharray:none;
 }
-
-.resource-label:before {
-  content: ' ';
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: 15px;
-  top: 2em;
-  border: 8.5px solid;
-  border-color: var(--wfadaptor-border) transparent transparent var(--wfadaptor-border);
+svg.displaylabel .displaylabelinner {
+  fill: var(--wfadaptor-background);
+  fill-opacity:1;
+  stroke: var(--wfadaptor-background);
+  stroke-width:1.6;
+  stroke-linecap:round;
+  stroke-linejoin:round;
+  stroke-miterlimit:4;
+  stroke-opacity:1;
+  stroke-dasharray:none;
 }
-
-.resource-label:after {
-  content: ' ';
-  position: absolute;
-  width: 0;
-  height: 0;
-  left: 16px;
-  top: 2em;
-  border: 7.5px solid;
-  border-color: var(--wfadaptor-background) transparent transparent var(--wfadaptor-background);
+svg.displaylabel text.label {
+  font-size:12px;
+  font-style:normal;
+  font-variant:normal;
+  font-stretch:normal;
+  text-align:center;
+  line-height:125%;
+  writing-mode:horizontal-tb;
+  text-anchor:start;
+  fill: var(--wfadaptor-base);
+  fill-opacity:1;
+  stroke:none;
+  font-family:Arial;
 }
-

data/cockpit/css/resources-svg.css

@@ -10,11 +10,11 @@ svg .resource-point.write {
 svg .resource-point.both {
   fill: blue;
 }
-svg line.resource-line {
+svg line.resource-column {
   stroke: red;
   stroke-opacity: 0.1;
 }
-svg line.resource-line:hover {
+svg line.resource-column:hover {
   stroke: red;
   stroke-opacity: 0.2;
 }

data/cockpit/css/ui.css

@@ -22,54 +22,14 @@ body {
 #graphcanvas {
   grid-column: 1;
 }
-#graphgrid .graphlabel {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  display: flex;
-  flex-direction: row;
-}
-#graphgrid .graphempty {
-  padding-left: 0.5em;
-  display: flex;
-  flex-direction: row;
-}
 #graphgrid .graphlast {
   padding-left: 0.5em;
   display: flex;
   flex-direction: row;
 }
-#graphgrid.striped .graphlabel, #graphgrid.striped .graphempty {
-  border-left: 1pt solid var(--wfadaptor-border);
-}
-#graphgrid.striped .graphlabel.even, #graphgrid.striped .graphempty.even, #graphgrid.striped .graphlast.even {
-  background-color: #e9e9e9;
-}
-#graphgrid .graphlabel > span {
-  align-self: center;
-  white-space: nowrap;
-}
-#graphgrid .graphlabel.hover {
-  color: var(--wfadaptor-selected);
-  cursor: pointer;
-}
-#graphgrid .graphlabel.selected {
-  color: var(--wfadaptor-selected);
-}
 
-#graphgrid .graphlabel.selected a, #graphgrid .graphlabel.hover a {
-  color: var(--wfadaptor-selected);
-}
-#graphgrid .graphlabel a {
-  color: var(--x-ui-light-text-color);
-}
-#graphgrid .graphlabel a::after {
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: 0.8em;
-  text-rendering: auto;
-	content: ' ';
-}
-#graphgrid .graphlabel.selected a::after, graphgrid .graphlabel.hover a::after {
-  color: var(--wfadaptor-selected);
+#graphgrid.striped .graphlast.even {
+  background-color: #e9e9e9;
 }
 
 #instance ui-content { height: 7em; }

data/cockpit/css/wfadaptor.css

@@ -218,6 +218,15 @@ svg .marked .cline {
   stroke-dasharray:none;
 }
 
+svg.labelsrow text.label {
+  cursor: pointer;
+}
+svg.labelsrow text.label:hover, svg.labelsrow text.label.hover {
+  fill: var(--wfadaptor-selected);
+}
+svg text.label.selected {
+  fill: var(--wfadaptor-selected);
+}
 svg .selected text.label {
   color: var(--wfadaptor-selected);
   fill: var(--wfadaptor-selected);

data/cockpit/edit.html

@@ -17,6 +17,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
+    <meta charset="utf-8"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>CPEE Cockpit</title>
 
@@ -46,16 +47,17 @@
 
     <!-- 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>
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
+    <script type="text/javascript" src="js/resources.js"></script>
     <script type="text/javascript" src="js/edit.js"></script>
     <script type="text/javascript" src="js/modifiers.js"></script>
-    <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
@@ -120,6 +122,17 @@
     <div class='menu' id='templates'></div>
     <div class='menu' id='modeltypes'></div>
 
+    <template id="label">
+      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0; left: 0;" class="displaylabel">
+        <g transform="translate(1 %%1) rotate(-%%2)">
+          <rect class="displaylabel" width="200" height="14" x="8" y="0" rx="5" ry="5"/>
+          <path class="displaylabel" d="M10,13 0,13 8,8"/>
+          <path class="displaylabelinner" d="M10,11.5 8.5,11.5 8.5,9.5 10,9.5"/>
+          <text class="label" x="18" y="10">aaaa</text>
+        </g>
+      </svg>
+    </template>
+
     <ui-tabbed id="instance">
       <ui-tabbar>
         <ui-tab class="switch"                                                ></ui-tab>

data/cockpit/graph.html

@@ -47,7 +47,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,6 +56,7 @@
     <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>
+    <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
@@ -63,6 +64,16 @@
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
     <div class='hidden' id='relaxngworker'></div>
+    <template id="label">
+      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0; left: 0;" class="displaylabel">
+        <g transform="translate(1 %%1) rotate(-%%2)">
+          <rect class="displaylabel" width="200" height="14" x="8" y="0" rx="5" ry="5"/>
+          <path class="displaylabel" d="M10,13 0,13 8,8"/>
+          <path class="displaylabelinner" d="M10,11.5 8.5,11.5 8.5,9.5 10,9.5"/>
+          <text class="label" x="18" y="10">aaaa</text>
+        </g>
+      </svg>
+    </template>
     <div id="trackfull">
       <div id='graphcolumn'>
         <div id='graphgrid'>

data/cockpit/index.html

@@ -17,6 +17,7 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
   <head>
+    <meta charset="utf-8"/>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>CPEE Cockpit</title>
 
@@ -53,8 +54,9 @@
     <script type="text/javascript" src="js/instance.js"></script>
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
-    <script type="text/javascript" src="js/modifiers.js"></script>
     <script type="text/javascript" src="js/resources.js"></script>
+    <script type="text/javascript" src="js/modifiers.js"></script>
+    <script type="text/javascript" src="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-svg.css" type="text/css" data-include-export="true"/>
@@ -119,6 +121,17 @@
     <div class='menu' id='templates'></div>
     <div class='menu' id='modeltypes'></div>
 
+    <template id="label">
+      <svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" style="position: absolute; top: 0; left: 0;" class="displaylabel">
+        <g transform="translate(1 %%1) rotate(-%%2)">
+          <rect class="displaylabel" width="200" height="14" x="8" y="0" rx="5" ry="5"/>
+          <path class="displaylabel" d="M10,13 0,13 8,8"/>
+          <path class="displaylabelinner" d="M10,11.5 8.5,11.5 8.5,9.5 10,9.5"/>
+          <text class="label" x="18" y="10">aaaa</text>
+        </g>
+      </svg>
+    </template>
+
     <ui-tabbed id="instance">
       <ui-tabbar>
         <ui-tab class="switch"                                                ></ui-tab>

data/cockpit/js/details.js

@@ -68,6 +68,7 @@ function do_main_work() { //{{{
       vtarget.parents('g.element[element-id]').addClass('selected');
     }
     manifestation.adaptor.illustrator.get_label_by_svg_id(svgid).addClass('selected');
+    $('#graphgrid [element-id=' + svgid + ']').addClass('selected');
 
 
     var newnode = vtarget.parents('g.element[element-id]');

data/cockpit/js/instance.js

@@ -567,7 +567,7 @@ function adaptor_init(url,theme,dslx) { //{{{
           $('#graphgrid').removeClass('striped');
         }
 
-        $('#graphgrid .graphlabel, #graphgrid .graphempty, #resources, #graphgrid .graphlast').remove();
+        $('.labelsrow, #graphgrid .graphlast').remove();
         let tcolumns = [];
         let tcolumntype = {};
         let tcolumncount = {}
@@ -605,9 +605,10 @@ function adaptor_init(url,theme,dslx) { //{{{
                     mapPoints.set(k, p);
                   }
 
-                  let tsvg = $X('<g xmlns="http://www.w3.org/2000/svg"></g>');
+                  let tsvg = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + (val.row-1) + '"></g>');
 
                   var cx = space;
+                  var count = 0;
                   for (const [k, p] of mapPoints) {
                     let firstAssignFlag = false;
                     p.x = cx;
@@ -617,12 +618,15 @@ function adaptor_init(url,theme,dslx) { //{{{
                       let inner;
 
                       if (p.AR == "Read") {
-                        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>');
+                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" 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
-                        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>');
+                        inner = $X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" 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") {
-                        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>');
+                        inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
+                      } else if (p.AR == "ReadAssign") {
+                        inner = $X('<circle xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" cx="' + (p.x + iconsize/2) + '" cy="' + pos + '" r="' + (iconsize / 2) + '" class="resource-point both"></circle>');
+                        if (pos == p.y0) { firstAssignFlag = true; }
                       }
 
                       // extend the bars
@@ -635,16 +639,26 @@ function adaptor_init(url,theme,dslx) { //{{{
                     }
 
                     if (firstAssignFlag) {
-                      // Additional logic and construction of another polygon for orange triangle pointing left
+                      // Additional logic and construction of another polygon for orange triangle pointing left in row 0
                       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"></polygon>').append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k)));
+                      if (tcolumnsvgs[col.column][1] == undefined) {
+                        tcolumnsvgs[col.column][1] = $X('<g xmlns="http://www.w3.org/2000/svg" class="resource-row" element-row="' + 0 + '"></g>');
+                      }
+                      tcolumnsvgs[col.column][1].append($X('<polygon xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" points="' + (p.x + iconsize) + ',' + firstpos + ' ' + (p.x) + ',' + (firstpos + iconsize/2) + ' ' + (p.x) + ',' + (firstpos - iconsize/2) + '" class="resource-point write"></polygon>').append($X('<text xmlns="http://www.w3.org/2000/svg"></text>').text(k)));
                     }
                     cx += iconsize + space;
+                    count += 1;
                   }
 
-                  tcolumnsvgs[col.column][val.row] = tsvg;
+                  if (tsvg.children().length > 0) {
+                    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"></text>').text(col.value);
+                  tsvg = $X('<text class="label" element-id="' + val.element_id + '" x="' + space + '" y="' + (dimensions.height * val.row - dimensions.height_shift) + '" xmlns="http://www.w3.org/2000/svg"></text>')
+                  tsvg.text(col.value);
+                  tsvg.mouseover(function(ev){ manifestation.events.mouseover($(ev.currentTarget).attr('element-id')); });
+                  tsvg.mouseout(function(ev){ manifestation.events.mouseout($(ev.currentTarget).attr('element-id')); });
+                  tsvg.click(function(ev){ manifestation.events.click($(ev.currentTarget).attr('element-id')); });
                   tcolumnsvgs[col.column][val.row] = tsvg;
                 }
 
@@ -661,7 +675,7 @@ function adaptor_init(url,theme,dslx) { //{{{
 
         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 svgcolumn = $X('<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" class="labelsrow"></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;
@@ -684,8 +698,10 @@ function adaptor_init(url,theme,dslx) { //{{{
               }
             }
             if (tcolumntype[h] == 'resource' || tcolumntype[h] == 'bodsod') {
+              let count = 0;
               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="' + tcolumntype[h] + '-line" stroke-width="' + iconsize + '"><text>' + k + '</text></line>'));
+                svgback.append($X('<line xmlns="http://www.w3.org/2000/svg" resource-column="' + count + '" x1="' + (p.x + iconsize/2) + '" y1="' + p.y0 + '" x2="' + (p.x + iconsize/2) + '" y2="' + (p.ymax + 0.01) + '" class="' + tcolumntype[h] + '-column" stroke-width="' + iconsize + '"><text>' + k + '</text></line>'));
+                count += 1;
               }
             }
 
@@ -1110,6 +1126,7 @@ function save_svgfile() {// {{{
     });
     gc.append(gr);
   });
+  gc.find('.selected').removeClass('selected');
   var varreps = {};
   $(window.document.styleSheets).each(function(i,x){
     if (x && x.href && x.ownerNode.attributes.getNamedItem('data-include-export')) {
@@ -1127,7 +1144,6 @@ function save_svgfile() {// {{{
         loc.each(function(k,loco) {
           var sty = $(loco).attr('style') == undefined ? '' : $(loco).attr('style');
           $(loco).attr('style',cst + sty);
-          console.log(loco);
         });
       });
       var loc = $(gc).find('text.super');
@@ -1152,7 +1168,7 @@ async function set_testset(testset,exec) {// {{{
   var promises = [];
 
   var tset = $X('<properties xmlns="http://cpee.org/ns/properties/2.0"/>');
-  tset.append($("testset > executionwrapper",testset));
+  tset.append($("testset > executionhandler",testset));
   tset.append($("testset > positions",testset));
   tset.append($("testset > dataelements",testset));
   tset.append($("testset > endpoints",testset));

data/cockpit/js/resources.js

@@ -1,16 +1,64 @@
+function show_label(x,y,deg,text) {
+  const degrees_to_radians = deg => (deg * Math.PI) / 180.0;
+
+  let clone = $('svg',document.querySelector('#label').content.cloneNode(true));
+  $('text',clone).text(text);
+  let n = $('body').append(clone);
+  let dim = $('text',clone)[0].getBBox();
+  let height = $('rect',clone).attr('height');
+  let width = dim.width + dim.x;
+  let shift = (width + 10) * Math.sin(degrees_to_radians(deg));
+  let shift_plus = height * Math.sin(degrees_to_radians(90-deg));
+  let neigh = (width + 10) * Math.cos(degrees_to_radians(deg)) + height * Math.cos(degrees_to_radians(90-deg));
+
+  let top_y = 23 * Math.cos(degrees_to_radians(deg));
+  let top_x = 23 * Math.sin(degrees_to_radians(deg));
+
+  $(clone).css('left',x-top_x);
+  $(clone).css('top',y-shift-top_y);
+
+  $(clone).attr('height',shift + shift_plus + 2);
+  $(clone).attr('width',neigh + 2);
+  $('g',clone).attr('transform',$('g',clone).attr('transform').replace(/%%1/, shift + 1).replace(/%%2/, deg));
+  $('rect',clone).attr('width',width);
+}
+
+function show_row_label(data) {
+  let pos = data.getBoundingClientRect();
+  let pos_top = $('#graphcolumn')[0].getBoundingClientRect();
+  let pos_y;
+  let text = $('text',data).text();
+  if (pos.y < (pos_top.y + 10)) {
+    pos_y = pos_top.y + 10;
+  } else {
+    pos_y = pos.y;
+  }
+  show_label(pos.x + 12, pos_y, 60, text);
+}
+
 $(document).ready(function() {
-  $('.resource-label').on('mouseover',()=>{
-    $('.resource-label').hide(); // Speech Bubble hide when over
+  var current_label;
+  $('#graphgrid').on('mouseout','svg .resource-column, svg .resource-point',(data)=>{
+    $('.displaylabel').remove();
+    current_label = undefined;
   });
-  $('#graphgrid').on('mouseover','#resources line.resource-line, #resources g polygon.resource-point',(data)=>{
-    const left = $('.resource-label').offset().left;
-    const pos = $(data.target).offset().left - 11;
-    if ($('.resource-label').is(":hidden") || left != pos) {
-      let labeltext = $('text',data.currentTarget).text();
-      $('.resource-label').text(labeltext);
-      $('.resource-label').css('left', pos);
-      $('.resource-label').css('top', data.originalEvent.clientY - 50);
-      $('.resource-label').show();
+  $('#graphcolumn').scroll((data)=>{
+    if (current_label != undefined) {
+      $('.displaylabel').remove();
+      show_row_label(current_label);
     }
   });
+  $('#graphgrid').on('mouseover','svg .resource-column',(data)=>{
+    show_row_label(data.target);
+    current_label = data.target;
+  });
+  $('#graphgrid').on('mouseover','svg .resource-point',(ev)=>{
+    let rc = $(ev.target).attr('resource-column');
+    let data = $('.resource-column[resource-column=' + rc + ']')[0];
+    show_row_label(data);
+    current_label = data;
+    // let pos = data.target.getBoundingClientRect();
+    // let text = $('text',data.target).text();
+    // show_label(pos.x + 12, pos.y + 5, 60, text);
+  });
 });

data/cockpit/js/wfadaptor.js

@@ -153,12 +153,14 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
 } // }}}
 
 // WfIllustrator:
-// Is in charge of displaying the Graph. It is further able insert and remove elements with given ID's from the illsutration.
+// Is in charge of displaying the Graph. It is further able insert and remove elements with given ID's from the illustration.
 function WfIllustrator(wf_adaptor) { // View  {{{
   // Variable {{{
     // public
     this.height = 40;
     this.width = 40;
+    this.default_width = 40;
+    this.default_height = 40;
     this.height_shift = this.height * 0.26;
     this.width_shift = this.width * 0.39;
     this.elements = {}; // the svgs
@@ -230,14 +232,16 @@ function WfIllustrator(wf_adaptor) { // View  {{{
 
   var draw_symbol = this.draw.draw_symbol = function (sname, id, title, row, col, group, addition) { // {{{
     if(self.elements[sname] == undefined || self.elements[sname].svg == undefined) sname = 'unknown';
+    let center_x = (self.width - self.default_width) / 2;
+    let center_y = (self.height - self.default_height) / 2;
     if (addition) {
-      var g = $X('<g class="element" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
-                    '<g transform="translate(' + String(col*self.width-self.width_shift) + ',' + String(row*self.height-(self.height-self.height_shift)) + ')"></g>' +
+      var g = $X('<g class="element" element-row="' + (row-1) + '" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
+                    '<g transform="translate(' + String(col*self.width+center_x-self.width_shift) + ',' + String(row*self.height+center_y-(self.height-self.height_shift)) + ')"></g>' +
                  '</g>');
     } else {
-      var g = $X('<g class="element" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
-                    '<g transform="translate(' + String(col*self.width-self.width_shift) + ',' + String(row*self.height-(self.height-self.height_shift)) + ')">' +
-                      '<text class="super" transform="translate(30,8.4)">' +
+      var g = $X('<g class="element" element-row="' + (row-1) + '" element-type="' + sname + '" element-id="' + id  + '" xmlns="http://www.w3.org/2000/svg">' +
+                    '<g transform="translate(' + String(col*self.width+center_x-self.width_shift) + ',' + String(row*self.height+center_y-(self.height-self.height_shift)) + ')">' +
+                      '<text class="super" transform="translate(' + (self.default_width-10) + ',8.4)">' +
                         '<tspan class="active">0</tspan>' +
                         '<tspan class="colon">,</tspan>' +
                         '<tspan class="vote">0</tspan>' +

data/cockpit/model.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>
@@ -54,8 +54,9 @@
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/model.js"></script>
-    <script type="text/javascript" src="js/modifiers.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="themes/base.js"></script>
     <link rel="stylesheet" href="css/ui.css" type="text/css"/>
     <link rel="stylesheet" href="css/model.css" type="text/css"/>
     <link rel="stylesheet" href="css/resources-label.css" type="text/css"/>