Implemented height fixer for header

amd/src/studyplan-editor-components.js

@@ -1362,7 +1362,8 @@ export default {
                                     :slotindex="index" 
                                     :line="line"
                                     :plan="value"
-                                    :class= "'t-studyline ' + (line.sequence==1?' first':'') + (line.sequence==numlines?' last':'')"
+                                    :class= "'t-studyline ' + (line.sequence==1?' first':'') + 
+                                             (line.sequence==value.studylines.length?' last':'')"
                                     >
                                 </t-studyline-slot
                                 ><t-studyline-slot 
@@ -1374,7 +1375,7 @@ export default {
                                     :plan="value"
                                     :class="  't-studyline ' 
                                             + (line.sequence==1?' first':'') 
-                                            + (line.sequence==numlines?' last':'')
+                                            + (line.sequence==value.studylines.length?' last':'')
                                             + (index==value.slots?' end':'')"
                                     >
                                 </t-studyline-slot
@@ -1479,15 +1480,34 @@ export default {
                 return {
                 };
             },
+            created() {
+                    // Listener for the signal that a new connection was made and needs to be drawn
+                    // Sent by the incoming item  - By convention, outgoing items are responsible for drawing the lines
+                    ItemEventBus.$on('lineHeightChange', this.onLineHeightChange);
+            },
             computed: {
-
+                
             },
             methods: {
+                onLineHeightChange(lineid,newheight){
+                    if(lineid == this.value.id){
+                        let offset = "";
+                        if(this.value.sequence==1 || this.value.sequence==this.numlines) {
+                            const cstyle = getComputedStyle(this.$refs.mainEl);
+                            offset = " + " +cstyle.borderTopWidth + " + " + cstyle.borderBottomWidth;
+                            debug.info("Adding extra height to offset border",cstyle);
+                        }
+                        const heightStyle=`calc( ${newheight}px ${offset})`;
+                        debug.info(`Received line height change line ${lineid} to ${heightStyle}`);
+                        this.$refs.mainEl.style.height = heightStyle;
+                    }
+                }
             },
             template: `
             <div :class="'t-studyline t-studyline-heading' + ((value.sequence%2)?' odd':' even') +
                 (value.sequence==1?' first':'') + (value.sequence==numlines?' last':'')" 
                 :data-studyline="value.id" :data-sequence="value.sequence" :data-numlines="numlines"
+                ref="mainEl"
                 ><div class="t-studyline-handle" :style="'background-color: ' + value.color"></div>
                 <div class="t-studyline-title">
                     <abbr v-b-tooltip.hover :title="value.name">{{ value.shortname }}</abbr>
@@ -1602,6 +1622,23 @@ export default {
                 },
 
             },
+            mounted() {
+                const self=this;
+                if(self.type == "gradable" && self.slotindex == 1){
+                    debug.info(`Creating height listener for line ${self.line.id} type ${self.type} slot ${self.slotindex}`,
+                    "element",self.$refs.sizeElement);
+                    self.resizeListener = new ResizeObserver(() => {
+                        const height = self.$refs.sizeElement.clientHeight;
+                        debug.info(`Sending height change event line ${self.line.id} height ${height}`);
+                        ItemEventBus.$emit('lineHeightChange', self.line.id, height);
+                    }).observe(self.$refs.sizeElement);
+                }
+            },
+            unmounted() {
+                if(this.resizeListener) {
+                    this.resizeListener.disconnect();
+                }
+            },
             computed: {
                 listtype() {
                     return this.type;
@@ -1616,6 +1653,7 @@ export default {
             },
             data() {
                 return {
+                    resizeListener: null,
                 };
             },
             methods: {
@@ -1755,7 +1793,7 @@ export default {
             template: `
             <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?'t-studyline-firstcolumn':'')
                          + ((line.sequence%2)?' odd':' even') "
-                         :data-studyline="line.id"
+                         :data-studyline="line.id" ref="sizeElement"
                 >
                 <drop-list
                     :items="value"

amd/src/studyplan-processor.js

@@ -126,7 +126,6 @@ export function ProcessStudyplan(studyplan){
 
 /**
  * Update the line wrapper elements to properly display the lines between items
- * 
  * TODO: For a short time, during the loading time of the page, the arrows get messed up if the frame is scrolled
  * Somehow this is not the case after a short while. This phenomenon must be investigated.
  */