Fixed bug where lines didn't show on subsequent pages

This commit is contained in:
PMKuipers 2023-11-11 20:18:05 +01:00
parent c3278f687c
commit 942c02ac40
3 changed files with 24 additions and 32 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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