From 6392a0686ff0c9c5c3d6cfd6b57b2788074d7f96 Mon Sep 17 00:00:00 2001
From: PMKuipers <pm@miqra.nl>
Date: Tue, 18 Jul 2023 13:19:48 +0200
Subject: [PATCH] Removed old line wrapper hack

---
 amd/src/page-edit-plan.js              |  5 +--
 amd/src/studyplan-editor-components.js | 43 ++++++++++++++++++++------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/amd/src/page-edit-plan.js b/amd/src/page-edit-plan.js
index 2fea2bc..ab81a38 100644
--- a/amd/src/page-edit-plan.js
+++ b/amd/src/page-edit-plan.js
@@ -16,7 +16,7 @@ import ModalComponents from './modedit-modal';
 import Debugger from './debugger';
 
 import {load_strings} from './string-helper';
-import {ProcessStudyplan, fixLineWrappers} from './studyplan-processor';
+import {ProcessStudyplan} from './studyplan-processor';
 import {download,upload} from './downloader';
 
 import PortalVue from './portal-vue';
@@ -56,9 +56,6 @@ export function init(contextid,categoryid) {
 
     const in_systemcontext = (contextid <= 1);
 
-    // Add the event listeners for the line wrappers (needed to keep the arrows in their place)
-    window.addEventListener('resize',fixLineWrappers); 
-
     // Setup the initial Vue app for this page
     let app = new Vue({
         el: '#root',
diff --git a/amd/src/studyplan-editor-components.js b/amd/src/studyplan-editor-components.js
index 172b408..09fcd3f 100644
--- a/amd/src/studyplan-editor-components.js
+++ b/amd/src/studyplan-editor-components.js
@@ -1366,6 +1366,7 @@ export default {
                             :key="line.id"
                             v-model="value.studylines[lineindex]"
                             :numlines='value.studylines.length'
+                            :layers='countLineLayers(line)+1'
                         ></t-studyline-heading>
                     </div>
                     <!-- Next, paint all the cells in the scrollable -->
@@ -1500,9 +1501,14 @@ export default {
                     type: Number,
                     default: 1,
                 },
+                layers: {
+                    type: Number,
+                    default: 1,
+                },
             },
             data() {
                 return {
+                    layerHeights: {}
                 };
             },
             created() {
@@ -1514,16 +1520,31 @@ export default {
                 
             },
             methods: {
-                onLineHeightChange(lineid,newheight){
+                onLineHeightChange(lineid,layerid,newheight){
+                    // All layers for this line have the first slot send an update message on layer height change.
+                    // When one of those updates is received, record the height and recalculate the total height of the 
+                    // header
                     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);
+                            //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}`);
+
+                        const items = document.querySelectorAll(
+                            `.t-studyplan-content-edit .t-studyline-slot-0[data-studyline='${this.value.id}']`);
+                        
+                        let heightSum = 0;
+                        for(const ix in items){
+                            debug.info(items[ix]);
+                            const height = items[ix].clientHeight;
+                            heightSum += height;
+                        }
+
+                        debug.info(`Line height change line ${lineid} layer ${layerid}`, items, heightSum);
+                        const heightStyle=`calc( ${heightSum}px ${offset})`;
+                        //debug.info(`Received line height change line ${lineid} to ${heightStyle}`);
                         this.$refs.mainEl.style.height = heightStyle;
                     }
                 }
@@ -1661,9 +1682,11 @@ export default {
                     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);
+                        if(self.$refs.sizeElement){
+                            const height = self.$refs.sizeElement.clientHeight;
+                            debug.info(`Sending height change event line ${self.line.id} height ${height}`);
+                            ItemEventBus.$emit('lineHeightChange', self.line.id, self.layer, height);
+                        }
                     }).observe(self.$refs.sizeElement);
                 }
             },
@@ -1812,7 +1835,7 @@ export default {
 
             },
             template: `
-            <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?'t-studyline-firstcolumn':'')
+            <div :class="'t-studyline-slot '+type + ' t-studyline-slot-'+slotindex + ((slotindex==0)?' t-studyline-firstcolumn':'')
                          + ((line.sequence%2)?' odd':' even') "
                          :data-studyline="line.id" ref="sizeElement"
                 ><drag v-if="item"
@@ -1910,13 +1933,13 @@ export default {
                     dragelement.style.removeProperty('position');
                     document.removeEventListener("mousemove",this.onMouseMove);
                 },
-                onMouseMove: debounce(function(event){
+                onMouseMove: function(event){
                     let dragelement = document.getElementById('t-item-cdrag-'+this.value.id);
                     dragelement.style.position = 'fixed';
                     dragelement.style.left = event.clientX+'px';
                     dragelement.style.top = event.clientY+'px';
                     // line will follow automatically
-                },20),
+                },
                 onDrop(event){
                     let from_id = event.data.id;
                     let to_id = this.value.id;