Skip to content

Commit

Permalink
NN-427 Add the collapse function to pathway graph tool pane
Browse files Browse the repository at this point in the history
  • Loading branch information
TripZz committed Jan 12, 2024
1 parent a1cab92 commit 8513a7a
Showing 1 changed file with 64 additions and 7 deletions.
71 changes: 64 additions & 7 deletions frontend/src/components/pathwaytools/PathwayGraphMenu.vue
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<template>
<div class="pathways" :class="{ show_pathways_menu: pane_hidden === true }">
<div class="minimize-bar" v-on:click="pane_hidden = !pane_hidden" >
<img src="@/assets/pathwaybar/arrows.png" :style="{ transform: pane_hidden ? 'rotate(-90deg)' : 'rotate(90deg)' }">
<div id="menu-tools" :class="{ 'pathwaybar-small': pane_hidden === true, 'pathways': pane_hidden === false }">
<div id="menu-tools_header">
<img src="@/assets/pathwaybar/fullscreen.png" v-on:click="pane_hidden = !pane_hidden">
</div>
<div class="pathwaybar" v-show="pane_hidden === false">
<div class="pathwaybar">
<PathwayGraphList
:term_data='term_data'
></PathwayGraphList>
<PathwayGraphGraphs
<PathwayGraphGraphs v-show="pane_hidden === false"
:gephi_data='gephi_data'
:filtered_terms='filtered_terms'
:favourite_pathways='favourite_pathways'
></PathwayGraphGraphs>
<img id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
<img v-show="pane_hidden === false" id="pathway-bg" src="@/assets/pathwaybar/background-dna.png">
</div>
</div>
</template>
Expand All @@ -33,8 +33,65 @@ export default {
pane_hidden: false,
}
},
mounted() {
watch:{
pane_hidden(val) {
if (val) this.dragElement(document.getElementById("menu-tools"),val);
else {
this.resetElement(document.getElementById("menu-tools"));
}
}
},
methods: {
dragElement(elmnt, val) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "_header")) {
// if present, the header is where you move the DIV from:
document.getElementById(elmnt.id + "_header").onmousedown = dragMouseDown;
} else {
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
if (!val) return
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
},
resetElement(elmnt) {
// set the element's new position:
elmnt.style.top = null;
elmnt.style.left = null;
document.getElementById(elmnt.id + "_header").onmousedown = null;
}
},
}
</script>

Expand Down

0 comments on commit 8513a7a

Please sign in to comment.