cpee 2.1.128 → 2.1.130

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bcd03c0a07a2a1e264b5d3f8470ab2b0c1f9e6603b02e9c3448493cf6410d717
-  data.tar.gz: 4c38994ad48fa9703749b8d675bfa657cbac4f34e31ec17cce66405b486c5ae4
+  metadata.gz: 825594df724f06da6073b554297121d71ca0e6745788bf29ef403eb58abdd134
+  data.tar.gz: 785e81f35516662bc94bb7b3861e4f8c54cb21d3d9cf131fe8488aa68ec99bc1
 SHA512:
-  metadata.gz: 488800a06b5b45929a7b6f0dbad7300d6bdd77c4f7f3865d8e4968e5c3b197243d791346394bc7bbe320b9ece2bd56bb8a675982a7b58a1003a966b1b3fb18be
-  data.tar.gz: 6225dabee23d8f553b3fb02595995fbc44774d993735e6171ddd6d8961e2035d7e9a547b16395a9bf5dc6d7a5defe762fbdbbce7bdf20d51b06489c6d8f06fb4
+  metadata.gz: f47fa192c73abb9072247b58e7e67a975dc794ecfd4efa31b8444c80e995fa3468de253c766e2d667bac028475b6396bdad0af67703a161f3cda033dcaa391a1
+  data.tar.gz: 1c9e2df7f50f90ec733b6a004907d8a2d53a6b4ab8669c723bd3828800383abc20fe616f3e6a4369caac5f1724026a29fc6445474e70b46c6303bb6ba2282a73

data/cockpit/compliance.html

@@ -58,12 +58,14 @@
     <script type="text/javascript" src="js/details.js"></script>
     <script type="text/javascript" src="js/parameters.js"></script>
     <script type="text/javascript" src="js/extended_columns.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/extended_columns-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
+    <style></style>
 
     <script type="text/javascript" src="js/compliance.js"></script>
     <link rel="stylesheet" href="css/compliance.css" type="text/css"/>
@@ -137,7 +139,7 @@
     <ui-tabbed id="instance">
       <ui-tabbar>
         <ui-tab class="switch"                                                ></ui-tab>
-        <ui-tab class=""                data-tab="new"       id="tabnew"      >New</ui-tab>
+        <ui-tab class=""                data-tab="new"       id="tabnew"      >Config</ui-tab>
         <ui-tab class="inactive hidden" data-tab="instance"  id="tabinstance" >Instance</ui-tab>
         <ui-tab class="inactive hidden" data-tab="execution" id="tabexecution">Execution</ui-tab>
         <ui-behind                                                            ><a style='display:none' target='_blank' id='current-instance'></a><a style='display:none' target='_blank' id='current-instance-properties'>P</a><a style='display:none' target='_blank' id='current-instance-subscriptions'>S</a><a style='display:none' target='_blank' id='current-instance-callbacks'>C</a></ui-behind>
@@ -149,17 +151,14 @@
           <tr>
             <td>Resources:</td>
             <td><input name="res-url" type="text" value=""/></td>
-            <td></td>
           </tr>
           <tr>
             <td>Engine:</td>
             <td><input name="base-url" type="text" value=""/></td>
-            <td><button name="base">create new instance</button></td>
           </tr>
           <tr>
             <td>Instance:</td>
             <td><input name="instance-url" type="text" value=""/></td>
-            <td><button name="instance">monitor instance</button></td>
           </tr>
           </table>
         </ui-area> <!--}}}-->
@@ -170,7 +169,8 @@
                 <form id='fuckchrome'>
                   <input type='file' name='testsetfile' id='testsetfile'/>
                 </form>
-                <button title='a template includes various settings, subscriptions or a (partial) model' name="loadtestset">load template</button><button title='a testset includes various settings, subscriptions or a model' name="loadtestsetfile">load testset</button>
+                <button title='save a testset includes various settings, subscriptions and a model' name="save" disabled=""><div>save</div><div class="hidden" id='lastsavedline'>(last: <span id="lastsaved"></span>)</div></button>
+                <button title='a testset includes various settings, subscriptions or a model' name="loadtestsetfile">load testset</button>
               </div>
               <div>
                 <input type='file' name='modelfile' id='modelfile'/>
@@ -238,7 +238,7 @@
         <ui-tab class=""         data-tab="dataelements" id="tabdataelements">Data Objects</ui-tab>
         <ui-tab class="inactive" data-tab="endpoints"    id="tabendpoints"   >Endpoints</ui-tab>
         <ui-tab class="inactive" data-tab="attributes"   id="tabattributes"  >Attributes</ui-tab>
-        <ui-tab class="inactive" data-tab="requirements"   id="tabrequirements">Requirements</ui-tab>
+        <ui-tab class="inactive" data-tab="requirements" id="tabrequirements">Requirements</ui-tab>
         <ui-behind                                                           ></ui-behind>
       </ui-tabbar>
       <ui-content>
@@ -274,16 +274,18 @@
       </ui-tabbar>
       <ui-content>
         <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
-          <div id="modelling">
+          <ui-part id='modelling'>
             <div id='graphgrid'>
               <div class="resource-label" style="display: none"></div>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' class='graphcolumn' width='1' height='1'></svg>
             </div>
-          </div>
+          </ui-part>
         </ui-area>
         <ui-resizehandle data-belongs-to-tab="details" data-label="drag to resize"></ui-resizehandle>
         <ui-area data-belongs-to-tab="details" id="detailcolumn">
-          <div id="dat_details" class='x-ui-layout'></div>
+          <ui-part id='details'>
+            <div id="dat_details" class='x-ui-layout'></div>
+          </ui-part>
         </ui-area>
         <ui-area data-belongs-to-tab="dsl" id="areadsl" class="inactive"></ui-area>
         <ui-area data-belongs-to-tab="log" id="arealog" class="inactive"> <!--{{{-->

data/cockpit/css/llm.css

@@ -30,17 +30,6 @@
   animation: dotty steps(1,end) 1s infinite;
   content: '';
 }
-
-@keyframes dotty {
-  0%   { content: ''; }
-  16%  { content: '.'; }
-  32%  { content: '..'; }
-  48%  { content: '...'; }
-  64%  { content: '..'; }
-  80%  { content: '.'; }
-  100% { content: ''; }
-}
-
 @keyframes dotty {
   0%   { content: 'ₒₒₒ'; }
   16%  { content: 'ₒₒ∘'; }
@@ -54,22 +43,37 @@
 #prompt_container {
   padding: 0.2em 0.5em;
   outline: none;
-  min-height: 7.3em;
   display: flex;
+  align-items: stretch;
   flex-wrap: nowrap;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 
-.max {
-  max-height: 2.66em;
+#input {
+  flex: 1 0 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 9.5em;
 }
 
 .stand_alone {
   height: 100%;
 }
+
+#details {
+  padding-left: 1.5em;
+  min-height: 9em;
+}
 #prompt {
   flex: 1 1 auto;
+  height: 100%;
+  overflow: scroll;
   outline: none;
-  overflow-y: scroll;
+}
+#prompt_submit_container {
+  flex: 0 0 auto;
+  align-self: stretch;
 }
 #prompt:empty:before {
   font-family: adwaita-sans;
@@ -85,10 +89,6 @@
   min-height: 2.66em;
 }
 
-#llmlabel {
-  width: 20%;
-}
-
 .single {
   width: 2.3em;
   height: 2.3em;
@@ -119,7 +119,3 @@
 #detailcolumn {
   padding-left: 0em !important;
 }
-#details {
-  padding-left: 1.5em;
-  min-height: 7em;
-}

data/cockpit/css/ui.css

@@ -186,12 +186,9 @@ span.vote {
 }
 
 #details {
-  flex: 0 1 auto;
-  height: 100%;
   overflow: scroll;
 }
 #modelling {
-  flex: 0 1 auto;
   height: 100%;
   overflow: scroll;
 }
@@ -221,6 +218,7 @@ span.vote {
   padding-left: 1.5em;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
 }
 
 #dat_log tr:nth-child(odd) { background-color: #e8e8e8; color: #333; }

data/cockpit/edit.html

@@ -65,10 +65,7 @@
     <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
-    <style>
-      /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
-      /* shit balls, no elegance is left in this world */
-    </style>
+    <style></style>
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
      <div id='disclaimer' class='hidden'> <!--{{{-->
@@ -268,16 +265,18 @@
       </ui-tabbar>
       <ui-content>
         <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
-          <div id="modelling">
+          <ui-part id='modelling'>
             <div id='graphgrid'>
               <div class="resource-label" style="display: none"></div>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' class='graphcolumn' width='1' height='1'></svg>
             </div>
-          </div>
+          </ui-part>
         </ui-area>
         <ui-resizehandle data-belongs-to-tab="details" data-label="drag to resize"></ui-resizehandle>
         <ui-area data-belongs-to-tab="details" id="detailcolumn">
-          <div id="dat_details" class='x-ui-layout'></div>
+          <ui-part id='details'>
+            <div id="dat_details" class='x-ui-layout'></div>
+          </ui-part>
         </ui-area>
         <ui-area data-belongs-to-tab="dsl" id="areadsl" class="inactive"></ui-area>
         <ui-area data-belongs-to-tab="log" id="arealog" class="inactive"> <!--{{{-->

data/cockpit/index.html

@@ -64,10 +64,7 @@
     <link rel="stylesheet" href="css/extended_columns-label.css" type="text/css"/>
     <link rel="stylesheet" href="css/extended_columns-svg.css" type="text/css" data-include-export="true"/>
     <link rel="stylesheet" href="/global_ui/uicpee.css" type="text/css"/>
-    <style>
-      /* has to be fucking inline, because firefox and chrome disagree how to handle filter urls */
-      /* shit balls, no elegance is left in this world */
-    </style>
+    <style></style>
   </head>
   <body data-base-port="8298" data-res-port="9303" data-theme-base="themes" is="x-ui-">
      <div id='disclaimer' class='hidden'> <!--{{{-->
@@ -269,16 +266,18 @@
       </ui-tabbar>
       <ui-content>
         <ui-area data-belongs-to-tab="details" id='graphcolumn' oncontextmenu='return false'>
-          <div id="modelling">
+          <ui-part id='modelling'>
             <div id='graphgrid'>
               <div class="resource-label" style="display: none"></div>
               <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:x="http://www.w3.org/1999/xlink" id='graphcanvas' class='graphcolumn' width='1' height='1'></svg>
             </div>
-          </div>
+          </ui-part>
         </ui-area>
         <ui-resizehandle data-belongs-to-tab="details" data-label="drag to resize"></ui-resizehandle>
         <ui-area data-belongs-to-tab="details" id="detailcolumn">
-          <div id="dat_details" class='x-ui-layout'></div>
+          <ui-part id='details'>
+            <div id="dat_details" class='x-ui-layout'></div>
+          </ui-part>
         </ui-area>
         <ui-area data-belongs-to-tab="dsl" id="areadsl" class="inactive"></ui-area>
         <ui-area data-belongs-to-tab="log" id="arealog" class="inactive"> <!--{{{-->

data/cockpit/js/details.js

@@ -82,7 +82,7 @@ function do_main_work(svgid) { //{{{
   var tnewnode = ttarget.parents('g.element[element-id]');
   var tnewtype = tnewnode.attr('element-type') + '_' + tnewnode.attr('element-endpoint');
 
-  desc.refresh(function(graphrealization){
+  desc.redraw(function(graphrealization){
     var vtarget = manifestation.adaptor.illustrator.get_node_by_svg_id(svgid);
     if (vtarget.length > 0) {
       vtarget.parents('g.element[element-id]').addClass('selected');

data/cockpit/js/instance.js

@@ -360,6 +360,7 @@ async function sse() { //{{{
           case 'description':
             monitor_instance_dsl();
             monitor_graph_change(false);
+            document.dispatchEvent(graph_changed);
             break;
           case 'endpoints':
             monitor_instance_values("endpoints");
@@ -559,7 +560,11 @@ function monitor_instance_values(type,vals) {// {{{
               });
             }
           });
-          $.when.apply($, deferreds).done();
+          $.when.apply($, deferreds).done(function(){
+            if (save['graph_adaptor'] && !suspended_redrawing) {
+              save['graph_adaptor'].redraw();
+            }
+          });
         } else if(type == "attributes") {
           $(" > attributes > *",res).each((k,v)=>{
             save['attributes_raw'][v.nodeName] = v.textContent;
@@ -723,12 +728,10 @@ function adaptor_init(url,theme,dslx) { //{{{
       suspended_redrawing = false;
     });
   } else {
-    save['graph_adaptor'].update(function(graphrealization){
-      var svgid = manifestation.selected();
-      graphrealization.set_description($(dslx));
-      manifestation.events.click(svgid);
-      format_instance_pos();
-    });
+    var svgid = manifestation.selected();
+    save['graph_adaptor'].set_description($(dslx));
+    manifestation.events.click(svgid);
+    format_instance_pos();
   }
 } //}}}
 
@@ -1402,7 +1405,7 @@ function format_visual_remove(what,cls,sum=true) {//{{{
 
 function scroll_into_view(what) { //{{{
   if (save['state'] != "running") return;
-  var tcontainer = $('#graphcolumn')[0];
+  var tcontainer = $('#modelling')[0];
   if ($('g[element-id="' + what + '"]').length > 0) {
     var telement = $('g[element-id="' + what + '"]')[0].getBBox().y;
     if (tcontainer.scrollTop > telement) {

data/cockpit/js/wfadaptor.js

@@ -191,8 +191,6 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
   this.illustrator = illustrator = new WfIllustrator(this);
   this.description = description = new WfDescription(this, this.illustrator);
 
-  this.update = function(doit){ doit(self); };
-
   this.draw_element = function(type,id,label) {
     let pos = {'row': 1,'col': 0};
     let block = { 'max': {'row': pos.row, 'col': pos.col}, 'endnodes': [], 'svg': $X('<g class="group" xmlns="http://www.w3.org/2000/svg"/>') };
@@ -200,8 +198,8 @@ function WfAdaptor(theme_base,doit) { // Controller {{{
     self.illustrator.set_svg(block);
   }
 
-  this.redraw = function(){
-    description.redraw();
+  this.redraw = function(doit){
+    description.redraw(doit);
   }
 
   $.getScript(self.theme_base).done(function() {
@@ -230,6 +228,7 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     this.width_shift = this.width * 0.39;
     this.width_shift_label = 7;
     this.group_extend = 1;
+    this.structural_tighten = 3; // 'structural' borders are smaller in y
     this.elements = {}; // the svgs
     this.svg = {};
     this.draw = {};
@@ -254,6 +253,9 @@ function WfIllustrator(wf_adaptor) { // View  {{{
       '  <marker id="arrow" viewBox="0 0 10 10" refX="28.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="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>' +
       '  <clipPath id="startclip">' +
       '    <rect x="-4" y="-4" width="35" height="38"/>' +
       '  </clipPath>' +
@@ -774,22 +776,23 @@ function WfIllustrator(wf_adaptor) { // View  {{{
 
     return g;
   } // }}}
-  var draw_border = this.draw.draw_border = function(id, p1, p2, group) { // {{{
+  var draw_border = this.draw.draw_border = function(id, p1, p2, group, yshrink) { // {{{
+    yshrink = yshrink || 0;
     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) + '" ' +
+        'y="' + ((p1.row-1)*self.height+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) + '" ' +
+        'height="' + (((p2.row+1)-p1.row)*self.height+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) { // {{{
+  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) + '" ' +
+        'y="' + ((p1.row-1)*self.height+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) + '" ' +
+        'height="' + (((p2.row+1)-p1.row)*self.height+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) { // {{{
@@ -801,40 +804,40 @@ function WfIllustrator(wf_adaptor) { // View  {{{
     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(#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) +" "+
-                            String(cend) +   "," + String(end['row']*self.height-15)
+      line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15+start.yoffset) +" "+
+                            String(cend) +   "," + String(end['row']*self.height-15+end.yoffset)
       );
     } 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) +" "+
+          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)
+                                String(cend) + "," + String(end['row']*self.height-15+end.yoffset)
           );
         } else {
-          line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
-                                String(cend) + "," + String(start['row']*self.height-15) +" "+
-                                String(cend) + "," + String(end['row']*self.height-15)
+          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)
           );
         }
       } else { // right - left
-        line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+        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)
+                              String(cend) + "," + String(end['row']*self.height-15+end.yoffset)
         );
       }
     } else if(end['row']-start['row'] < 0) { // upwards
-      line.attr("d", "M " + String(cstart) + "," + String(start['row']*self.height-15) +" "+
+      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)
+                            String(cend) + "," + String(end['row']*self.height-15+end.yoffset)
       );
     }
     self.svg.container.append(line);
@@ -890,7 +893,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     labels = [];
     let start = performance.now();
     illustrator.clear();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false,yoffset:0});
     illustrator.set_svg(graph);
     self.set_labels(graph);
     illustrator.set_duration(start);
@@ -946,53 +949,38 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     used_id_list.push(prefix + id);
     return prefix + id;
   } // }}}
-  var refresh = this.refresh = function(doit) {
-    id_counter = {};
-    labels = [];
-    let start = performance.now();
-    illustrator.clear();
-    clean_description();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
-    illustrator.set_svg(graph);
-    self.set_labels(graph);
-    illustrator.set_duration(start);
-    doit(self);
-  }
-  var redraw = this.redraw = function(){
+  var redraw = this.redraw = function(doit) {
     id_counter = {};
     let start = performance.now();
     labels = [];
     illustrator.clear();
     clean_description();
-    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
+    var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false,yoffset:0});
     illustrator.set_svg(graph);
     self.set_labels(graph);
     illustrator.set_duration(start);
+    if (doit) doit(self);
   }
   var update = this.update = function(svgid) { // {{{
     id_counter = {};
-    if(update_illustrator){
-      let start = performance.now();
-      labels = [];
-      illustrator.clear();
-      clean_description();
-      var graph = parse(description.children('description').get(0), {'row':0,'col':0,final:false,wide:false});
-      illustrator.set_svg(graph);
-      self.set_labels(graph);
-      illustrator.set_duration(start);
+    var notify_target = () => {
+      var newn = $('*[new=true]',description);
+      newn.removeAttr('new');
+
+      if (newn.attr('svg-id') != undefined)
+        adaptor.notify(newn.attr('svg-id'));
+      else if (svgid != undefined)
+        adaptor.notify(svgid);
+      else if (newn.parents('[svg-id]').length > 0)
+        adaptor.notify(newn.parent('[svg-id]').attr('svg-id'));
+      else
+        console.info('Something went horribly wrong');
+    };
+    if (update_illustrator) {
+      self.redraw(notify_target);
+    } else {
+      notify_target();
     }
-
-    var newn = $('*[new=true]',description);
-    newn.removeAttr('new');
-
-    if (newn.attr('svg-id') != undefined)
-      adaptor.notify(newn.attr('svg-id'));
-    else if (svgid != undefined)
-      adaptor.notify(svgid);
-    else if (newn.parents('[svg-id]').length > 0)
-      adaptor.notify(newn.parent('[svg-id]').attr('svg-id'));
-    else
-      console.info('Something went horribly wrong');
   } // }}}
   // }}}
   // Adaption functions {{{
@@ -1181,6 +1169,16 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           [undefined, endnodes] = draw_position(ctname,parent_pos,pos,prev,block,[],context,{svg: g, pos: origpos});
         }
         prev = JSON.parse(JSON.stringify(endnodes));
+        if (illustrator.elements[sname].border == 'structural') {
+          // structural border: outgoing arrow starts at the group border instead of leaving from the icon
+          // small y offset
+          prev = prev.map(function(p) {
+            if (!p) return p;
+            var np = JSON.parse(JSON.stringify(p));
+            np.yoffset = illustrator.height_shift/2 + illustrator.group_extend + 15 - illustrator.structural_tighten;
+            return np;
+          });
+        }
       }
     });
 
@@ -1255,18 +1253,20 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
       } else { console.log("no icon "+ sname);}
       if (illustrator.elements[sname] && illustrator.elements[sname].border) {
         let wide = (illustrator.elements[sname].wide == true && block.max.col == pos.col) ? pos.col + 1 : block.max.col;
+        let yshrink = illustrator.elements[sname].border == 'structural' ? illustrator.structural_tighten : 0;
         if (illustrator.elements[sname].closing_symbol) {
-          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: block.max.row + 1 }, block.svg);
+          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: block.max.row + 1 }, block.svg, yshrink);
         } else {
-          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: block.max.row }, block.svg);
+          illustrator.draw.draw_border($(context).attr('svg-id'), pos, { col: wide, row: block.max.row }, block.svg, yshrink);
         }
       }
       if (illustrator.elements[sname] && illustrator.elements[sname].type == 'complex') {
         let wide = (illustrator.elements[sname].wide == true && block.max.col == pos.col) ? pos.col + 1 : block.max.col;
+        let yshrink = illustrator.elements[sname].border == 'structural' ? illustrator.structural_tighten : 0;
         if (illustrator.elements[sname].closing_symbol) {
-          illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row + 1 }, block.svg);
+          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);
+          illustrator.draw.draw_tile($(context).attr('svg-id'), pos, { col: wide, row: block.max.row }, block.svg, yshrink);
         }
       }
     }
@@ -1274,6 +1274,14 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
 
     // Calculate Connection {{{
     let connection_case = 0;
+    var conn_target = pos;
+    if (illustrator.elements[sname].border == 'structural' && !second) {
+      // structural border: incoming arrow stops at the group border instead of reaching into the icon
+      // (only a pixel-level yoffset, row/col stay integers so get_x() column lookups stay correct)
+      conn_target = JSON.parse(JSON.stringify(pos));
+      conn_target.yoffset = -illustrator.height + illustrator.height_shift/2 - illustrator.group_extend + 15 + illustrator.structural_tighten;
+      conn_target.structural = true;
+    }
     if(illustrator.elements[sname] != undefined && illustrator.elements[sname].closeblock == true) { // Close Block if element e.g. loop
       if (second) {
         if (second.pos.row+1 < pos.row) { // when no content, dont paint the up arrow
@@ -1296,7 +1304,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
     } else { endnodes = [JSON.parse(JSON.stringify(pos))]; } // sets this element as only endpoint (aggregate)
     if(prev[0].row == 0 || prev[0].col == 0) { // this enforces the connection from description to the first element
       connection_case = 3;
-      illustrator.draw.draw_connection(block.svg, { row: 1, col: 1 }, pos, 0, true);
+      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) {
         for (let node=0; node < prev.length; node++) {
@@ -1308,15 +1316,15 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
               }
               connection_case = 4;
               // console.log('++ case 4',prev[node].row,pos.row,illustrator.dim.debug());
-              illustrator.draw.draw_connection(block.svg, pn, pos, 0, true);
+              illustrator.draw.draw_connection(block.svg, pn, conn_target, 0, true);
             } else {
               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], pos, 0, true);
+                illustrator.draw.draw_connection(block.svg, prev[node], conn_target, 0, true);
               } else {
                 // console.log('++ case 5b',prev[node].row,pos.row,illustrator.dim.debug());
-                illustrator.draw.draw_connection(block.svg, prev[node], pos, 0, true);
+                illustrator.draw.draw_connection(block.svg, prev[node], conn_target, 0, true);
               }
             }
           }
@@ -1326,7 +1334,7 @@ function WfDescription(wf_adaptor, wf_illustrator) { // Model {{{
           if (prev[node] && !prev[node].final) {
             connection_case = 6;
             // console.log('++ case 6',prev[node].row,pos.row,illustrator.dim.debug());
-            illustrator.draw.draw_connection(block.svg, prev[node], pos, prev[node].row, false);
+            illustrator.draw.draw_connection(block.svg, prev[node], conn_target, prev[node].row, false);
           }
         }
       }