Fixed bug where lines didn't show on subsequent pages

amd/src/report-viewer-components.js

@@ -386,17 +386,20 @@ export default {
                     return show;
                 },
                 selectedpageChanged(newTabIndex,prevTabIndex) {
-                    const page = this.value.pages[newTabIndex];
+                    
+                    ItemEventBus.$emit('redrawLines', null);
                     scrollCurrentIntoView(this.value.id);
                 }
             },
             mounted() {
                 scrollCurrentIntoView(this.value.id);
+                this.$root.$emit('redrawLines');
             },
             updated() {
                 scrollCurrentIntoView(this.value.id);
                 ItemEventBus.$emit('lineHeightChange', null);
-
+                this.$root.$emit('redrawLines');
+                ItemEventBus.$emit('redrawLines');
             },
             template: `
             <div>
@@ -406,6 +409,7 @@ export default {
                     @activate-tab='selectedpageChanged'
                     content-class="mt-1">
                     <b-tab
+                        
                         v-for="(page,pageindex) in value.pages"
                         :key="page.id"
                         :title-item-class="'s-studyplanpage-tab '+ page.timing"
@@ -742,24 +746,18 @@ export default {
                 },
                 redrawLine(conn){
                     let lineColor = this.lineColor();
-
-                    // prepare lineinfo link or delete old line
-                    let lineinfo = this.lines[conn.to_id];
-                    if(lineinfo){
-                        if(lineinfo.line){
-                            lineinfo.line.remove();
-                            lineinfo.line = undefined;
-                        }
-                    } else {
-                        lineinfo = {};
-                        this.lines[conn.to_id] = lineinfo;
-                    }
-
                     // draw new line...
                     let start = document.getElementById('studyitem-'+conn.from_id);
                     let end= document.getElementById('studyitem-'+conn.to_id);
+
+                    // delete old line
+                    if(this.lines[conn.to_id]){
+                        this.lines[conn.to_id].remove();
+                        delete this.lines[conn.to_id];
+                    }
+
                     if(start !== null && end !== null && isVisible(start) && isVisible(end)){
-                        lineinfo.line = new SimpleLine(start,end,{
+                        this.lines[conn.to_id] = new SimpleLine(start,end,{
                             color: lineColor,
                             gravity: {
                                 start: LINE_GRAVITY,
@@ -786,7 +784,11 @@ export default {
                 },
                 onWindowResize(){
                     this.redrawLines();
-                }
+                },
+                onRedrawLines(){
+                    this.redrawLines();
+                },
+
             },
             computed: {
                 hasConnectionsOut() {
@@ -800,7 +802,7 @@ export default {
                 }
             },
             created(){
-
+                ItemEventBus.$on('redrawLines', this.onRedrawLines);
             },
             mounted(){
                 // Initialize connection lines when mounting
@@ -816,21 +818,11 @@ export default {
             beforeDestroy(){
                 for(let i in this.value.connections.out){
                     let conn = this.value.connections.out[i];
-                    let lineinfo = this.lines[conn.to_id];
+                    this.removeLine(conn);
-                    if(lineinfo){
-                        if(lineinfo.line){
-                            if(lineinfo.lineElm ){
-                                lineinfo.lineElm.parentNode.removeChild(lineinfo.lineElm);
-                                lineinfo.lineElm = undefined;
-                            } else {
-                                lineinfo.line.remove();
-                            }
-                            lineinfo.line = undefined;
-                        }
-                    }
                 }
                 // Remove resize event listener
                 window.removeEventListener('resize',this.onWindowResize);
+                ItemEventBus.$off('redrawLines', this.onRedrawLines);
             },
             beforeUpdate(){
             },