From 572970ab60ef073a275a9ada5af03f77a86715f8 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Mon, 23 Oct 2023 11:39:44 +0200
Subject: [PATCH] NN-366 Implemented new graph parameter selection window

- adjusted structure
- add new design
---
 .../src/components/term_graph/TermToolBar.vue |   8 +-
 .../src/components/toolbar/MainToolBar.vue    |  13 +-
 .../toolbar/modules/EdgeOpacity.vue           |  24 +-
 .../toolbar/modules/ProteinList.vue           |  18 +-
 .../toolbar/modules/SelectionList.vue         | 367 +++++++++++-------
 .../toolbar/modules/SelectionWindow.vue       |  67 ----
 6 files changed, 255 insertions(+), 242 deletions(-)
 delete mode 100644 frontend/src/components/toolbar/modules/SelectionWindow.vue

diff --git a/frontend/src/components/term_graph/TermToolBar.vue b/frontend/src/components/term_graph/TermToolBar.vue
index cfa1ff52..f94fcb41 100644
--- a/frontend/src/components/term_graph/TermToolBar.vue
+++ b/frontend/src/components/term_graph/TermToolBar.vue
@@ -23,9 +23,9 @@
             <div class="menu-items">
                 <ExportScreen :type="screen_type"></ExportScreen>
                 <NodeLabelSelect :type="screen_type"></NodeLabelSelect>
-                <SelectionWindow
+                <!-- <SelectionWindow
                 @selection_status_changed = 'selection_status = $event'
-                ></SelectionWindow>
+                ></SelectionWindow> -->
                 <FDRValue></FDRValue>
                 <TermConnectedGraph></TermConnectedGraph>
             </div>
@@ -70,7 +70,7 @@ import NodeLabelSelect from '@/components/toolbar/modules/NodeLabelSelect.vue'
 import TermConnectedGraph from '@/components/term_graph/TermConnectedGraph.vue'
 import TermSearch from '@/components/term_graph/TermSearch.vue'
 import FDRValue from '@/components/term_graph/FDRValue.vue'
-import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
+// import SelectionWindow from '@/components/toolbar/modules/SelectionWindow.vue'
 import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 
@@ -84,7 +84,7 @@ export default {
         TermSearch,
         FDRValue,
         NodeLabelSelect,
-        SelectionWindow,
+        // SelectionWindow,
         SelectionList
 
     },
diff --git a/frontend/src/components/toolbar/MainToolBar.vue b/frontend/src/components/toolbar/MainToolBar.vue
index 3fb2ad41..4492da86 100644
--- a/frontend/src/components/toolbar/MainToolBar.vue
+++ b/frontend/src/components/toolbar/MainToolBar.vue
@@ -11,8 +11,7 @@
                 v-on:mouseleave="tools_active=false">
                 <img src="@/assets/toolbar/menu-burger.png" alt="Tool Icon">
             </li>
-            <li v-on:mouseover="tools_active=true"
-                v-on:mouseleave="tools_active=false">
+            <li v-on:click="selection_active=!selection_active">
                 <img src="@/assets/toolbar/settings-sliders.png" alt="Graph Icon">
             </li>
             <li v-on:click="center()">
@@ -28,7 +27,12 @@
         :tools_active = 'tools_active'
         @tools_active_changed = 'tools_active = $event'
         ></MenuWindow>
-        <ProteinList v-if="protein_active"
+        <SelectionList v-show="selection_active"
+        :gephi_data = 'gephi_data'
+        @selection_active_changed = 'selection_active = $event'>
+        </SelectionList>
+        <ProteinList v-show="protein_active"
+        :gephi_data = 'gephi_data'
         @protein_active_changed = 'protein_active = $event'>
         </ProteinList>
 
@@ -39,6 +43,7 @@
 
 import MenuWindow from '@/components/toolbar/windows/MenuWindow.vue'
 import ProteinList from '@/components/toolbar/modules/ProteinList.vue'
+import SelectionList from '@/components/toolbar/modules/SelectionList.vue'
 
 export default {
     name: 'MainToolBar',
@@ -47,11 +52,13 @@ export default {
     components: {
         MenuWindow,
         ProteinList,
+        SelectionList
     },
     data() {
         return {
             tools_active: false,
             protein_active: false,
+            selection_active: false,
         }
     },
     methods: {
diff --git a/frontend/src/components/toolbar/modules/EdgeOpacity.vue b/frontend/src/components/toolbar/modules/EdgeOpacity.vue
index b787d963..1737d2d3 100644
--- a/frontend/src/components/toolbar/modules/EdgeOpacity.vue
+++ b/frontend/src/components/toolbar/modules/EdgeOpacity.vue
@@ -1,6 +1,7 @@
 <template>
     <div>
         <div class="tool-item">
+            <div class="opacity">
                 <span>Background edge opacity</span>
                 <input class="opacity-input"
                     type="number"
@@ -10,17 +11,20 @@
                     v-model="opacityBackground.value"
                     v-on:change="change_opacity('background')"
                 />
+            </div>
         </div>
         <div class="tool-item">
-            <span>Highlighted edge opacity</span>
-            <input class="opacity-input"
-                type="number"
-                v-bind:min="opacityHighlight.min"
-                v-bind:max="opacityHighlight.max"
-                v-bind:step="opacityHighlight.step"
-                v-model="opacityHighlight.value"
-                v-on:change="change_opacity('highlight')"
-            />
+            <div class="opacity">
+                <span>Highlighted edge opacity</span>
+                <input class="opacity-input"
+                    type="number"
+                    v-bind:min="opacityHighlight.min"
+                    v-bind:max="opacityHighlight.max"
+                    v-bind:step="opacityHighlight.step"
+                    v-model="opacityHighlight.value"
+                    v-on:change="change_opacity('highlight')"
+                />
+            </div>
         </div>
     </div>
 </template>
@@ -56,7 +60,7 @@ export default {
 </script>
 
 <style>
-input[type=number] { 
+.opacity input[type=number] { 
     position: absolute;
     margin-top:0.1vw;
     right: 6.3%;
diff --git a/frontend/src/components/toolbar/modules/ProteinList.vue b/frontend/src/components/toolbar/modules/ProteinList.vue
index 493e4f6c..0efea924 100644
--- a/frontend/src/components/toolbar/modules/ProteinList.vue
+++ b/frontend/src/components/toolbar/modules/ProteinList.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="tool-item">
-        <div id="protein_highlight">
+        <div id="protein_highlight" class="window-menu">
             <div class="highlight_list">
                     <textarea v-model="raw_text" rows="10" cols="30" autofocus></textarea>
                     <button v-on:click="highlight(raw_text)" id="highlight_protein">search</button>
             </div>  
-            <div id="protein_highlight_header">
+            <div id="protein_highlight_header" class="window-header">
                 <div class="headertext">
                     <span>highlight proteins</span>
                     <img  class="protein_close" src="@/assets/pathwaybar/cross.png" v-on:click="unactive_proteinlist()">
@@ -19,11 +19,11 @@
 
 export default {
     name: 'ProteinList',
+    props: ['gephi_data'],
     emits: ['protein_active_changed'],
     data() {
         return {
             raw_text: "",
-            protein_data: this.$store.state.gephi_json.data,
         }
     },
     methods: {
@@ -76,7 +76,7 @@ export default {
 
             const protein_names = new Set(proteins.toUpperCase().split("\n"))
             const subset = []
-            com.protein_data.nodes.forEach(node => {
+            com.gephi_data.nodes.forEach(node => {
                 if(protein_names.has(node.attributes['Name'])){
                     subset.push(node)
                 }
@@ -95,7 +95,7 @@ export default {
 
 <style>
 
-#protein_highlight {
+.window-menu {
     position: fixed;
     top: 30%;
     left: 42%;
@@ -115,7 +115,7 @@ export default {
     text-align: center;
 }
 
-#protein_highlight_header {
+.window-header {
     width: 100%;
     height: 9.41%;
     position: absolute;
@@ -126,21 +126,21 @@ export default {
     text-align: center;
 }
 
-#protein_highlight_header .headertext{
+.window-header .headertext{
 	color:  #0A0A1A;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }
-#protein_highlight_header .headertext span{
+.window-header .headertext span{
     height: 100%;
     display: flex;
     font-size: 0.9vw;
     align-items: center;
 }
 
-#protein_highlight_header .protein_close{
+.window-header .protein_close{
     right: 3%;
     width: 0.9vw;
     height: 0.9vw;
diff --git a/frontend/src/components/toolbar/modules/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
index 7ee27982..0a682cc3 100644
--- a/frontend/src/components/toolbar/modules/SelectionList.vue
+++ b/frontend/src/components/toolbar/modules/SelectionList.vue
@@ -1,81 +1,77 @@
 <template>
-    <div class="selection_item">
-        <span>Hubs</span>
-        <div class="boundary">
-            <input id="hubs-slider"
-                type="range"
-                v-bind:min="degree_boundary.min"
-                v-bind:max="degree_boundary.max"
-                v-bind:step="degree_boundary.step"
-                v-model="degree_boundary.value"
-                v-on:change="draw_hubs()"
-            />
-            <input id="hubs-input"
-                type="number"
-                v-bind:min="degree_boundary.min"
-                v-bind:max="degree_boundary.max"
-                v-bind:step="degree_boundary.step"
-                v-model="degree_boundary.value"
-                v-on:change="draw_hubs()"
-            />
-        </div>
-        <span>Betweenness Centrality</span>
-        <div class="boundary">
-            <input id="bc-slider"
-                type="range"
-                v-bind:min="bc_boundary.min"
-                v-bind:max="bc_boundary.max"
-                v-bind:step="bc_boundary.step"
-                v-model="bc_boundary.value"
-                v-on:change="draw_bc()"
-            />
-            <input id="bc-input"
-                type="number"
-                v-bind:min="bc_boundary.min"
-                v-bind:max="bc_boundary.max"
-                v-bind:step="bc_boundary.step"
-                v-model="bc_boundary.value"
-                v-on:change="draw_bc()"
-            />
-        </div>
-        <span>PageRank</span>
-        <div class="boundary">
-            <input id="pr-slider"
-                type="range"
-                v-bind:min="pr_boundary.min"
-                v-bind:max="pr_boundary.max"
-                v-bind:step="pr_boundary.step"
-                v-model="pr_boundary.value"
-                v-on:change="draw_hubs()"
-            />
-            <input id="pr-input"
-                type="number"
-                v-bind:min="pr_boundary.min"
-                v-bind:max="pr_boundary.max"
-                v-bind:step="pr_boundary.step"
-                v-model="pr_boundary.value"
-                v-on:change="draw_hubs()"
-            />
-        </div>
-        <div v-show="term_data">
-            <span>Padj</span>
-            <div class="boundary">
-                <input id="padj-slider"
-                type="range"
-                v-bind:min="padj_boundary.min"
-                v-bind:max="padj_boundary.max"
-                v-bind:step="padj_boundary.step"
-                v-model="padj_boundary.value"
-                v-on:change="draw_padj()"
-                />
-                <input id="padj-input"
-                type="number"
-                v-bind:min="padj_boundary.min"
-                v-bind:max="padj_boundary.max"
-                v-bind:step="padj_boundary.step"
-                v-model="padj_boundary.value"
-                v-on:change="draw_padj()"
-                />
+        <div class="tool-item">
+        <div id="selection_highlight" class="window-menu">
+            <div class="selection_list">
+                <div class="window-label">degree value</div>
+                <div class="menu-items">
+                    <input
+                        type="range"
+                        v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max" v-bind:step="degree_boundary.step"
+                        v-model="degree_boundary.value"
+                        v-on:change="searchSubset()"
+                        v-on:input="valueChanged"	
+                    />
+                    <input
+                        type="number"
+                        v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max" v-bind:step="degree_boundary.step"
+                        v-model="degree_boundary.value"
+                        v-on:change="searchSubset()"
+                    />
+                </div>
+                <div class="window-label">betweenness centrality value</div>
+                <div class="menu-items">
+                    <input
+                        type="range"
+                        v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
+                        v-model="bc_boundary.value"
+                        v-on:change="searchSubset()"
+                        v-on:input="valueChanged"	
+                    />
+                    <input
+                        type="number"
+                        v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
+                        v-model="bc_boundary.value"
+                        v-on:change="searchSubset()"
+                    />
+                </div>
+                <div class="window-label">page rank value</div>
+                <div class="menu-items">
+                    <input 
+                        type="range"
+                        v-bind:min="padj_boundary.min" v-bind:max="padj_boundary.max" v-bind:step="padj_boundary.step"
+                        v-model="padj_boundary.value"
+                        v-on:change="searchSubset()"
+                        v-on:input="valueChanged"	
+                    />
+                    <input 
+                        type="number"
+                        v-bind:min="padj_boundary.min" v-bind:max="padj_boundary.max" v-bind:step="padj_boundary.step"
+                        v-model="padj_boundary.value"
+                        v-on:change="searchSubset()"
+                    />
+                </div>
+                <div class="window-label">padj value</div>
+                <div class="menu-items">
+                    <input
+                        type="range"
+                        v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
+                        v-model="pr_boundary.value"
+                        v-on:change="searchSubset()"
+                        v-on:input="valueChanged"	
+                    />
+                    <input 
+                        type="number"
+                        v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
+                        v-model="pr_boundary.value"
+                        v-on:change="searchSubset()"
+                    />
+                </div>
+            </div>  
+            <div id="selection_highlight_header" class="window-header">
+                <div class="headertext">
+                    <span>graph parameter</span>
+                    <img  class="protein_close" src="@/assets/pathwaybar/cross.png" v-on:click="unactive_proteinlist()">
+                </div>
             </div>
         </div>
     </div>
@@ -85,23 +81,18 @@
 export default {
     name: 'SelectionList',
     props: ['gephi_data','term_data'],
+    emits: ['selection_active_changed'],
     data() {
         return {
             once: true,
-			cc_boundary: {
-				value: 0,
-				min: 0,
-				max: 1.0,
-				step: 0.01
-			},
 			degree_boundary: {
-				value: Number,
+				value: 0,
 				min: 0,
 				max: Number,
 				step: 1
 			},
             pr_boundary: {
-                value: 0.0001,
+                value: 0,
 				min: 0,
 				max: 0.02,
 				step: 0.0001
@@ -121,94 +112,109 @@ export default {
         }
     },
     methods: {
-		draw_hubs: function() {
-			var com = this;
+        dragElement(elmnt) {
+
+            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;
+            }
 
-            console.log(com.term_data)
+            function elementDrag(e) {
+                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;
+            }
+        },
+		initialize_dg: function() {
+			var com = this;
 
 			var dataForm = com.gephi_data || com.term_data;
 
 			// initialize values of slider
-			if (com.once) {
-				// _____ this calculation has only to be done once _______
-				let mean = 0;
-				var subset_degree;
+            // let mean = 0;
+            var subset_degree;
 
-				subset_degree = dataForm.nodes.map(arrayItem => {
-					return arrayItem.attributes["Degree"]
-				});
+            subset_degree = dataForm.nodes.map(arrayItem => {
+                return arrayItem.attributes["Degree"]
+            });
 
-				// ---mean calculation---
+            // ---mean calculation---
 
-				// Convert String values to Integers
-				var result = subset_degree.map(function (x) { 
-					return parseInt(x, 10);
-				});
+            // Convert String values to Integers
+            var result = subset_degree.map(function (x) { 
+                return parseInt(x, 10);
+            });
 
-				let sum = result.reduce((accumulator, value) => {
-					return accumulator + value;
-				});
+            // let sum = result.reduce((accumulator, value) => {
+            //     return accumulator + value;
+            // });
 
-				mean = sum/subset_degree.length;
+            // mean = sum/subset_degree.length;
 
-				// ---empirical standard deviation---
+            // ---empirical standard deviation---
 
-				let stdDev = 0;
-				stdDev = Math.sqrt(result.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / (subset_degree.length - 1));
+            // let stdDev = 0;
+            // stdDev = Math.sqrt(result.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / (subset_degree.length - 1));
 
-				// set init degree and max value
-				var init_degree = Math.ceil(mean + (2*stdDev));
-				var maxDeg = Math.max(...result);       // Need to use spread operator!
+            // set init degree and max value
+            // var init_degree = Math.ceil(mean + (2*stdDev));
+            var maxDeg = Math.max(...result);       // Need to use spread operator!
 
-				this.degree_boundary.value = init_degree;
-				this.degree_boundary.max = maxDeg;
-				com.once = false;
-
-			}
-            this.searchSubset(dataForm)
+            // this.degree_boundary.value = init_degree;
+            this.degree_boundary.max = maxDeg;
 		},
-        draw_bc: function() {
+        initialize_bc() {
             var com = this;
 
-			var dataForm = com.gephi_data || com.term_data;
-
-			// initialize values of slider
-			if (com.once) {
-				// _____ this calculation has only to be done once _______
-				var subset_bc
-				subset_bc = dataForm.nodes.map(arrayItem => {
-					return arrayItem.attributes["Betweenness Centrality"]
-				});
-
-				// Convert String values to Integers
-				var result = subset_bc.map(function (x) { 
-					return parseInt(x, 10);
-				});
-				var maxDeg = Math.max(...result);       // Need to use spread operator!
-
-				this.bc_boundary.max = maxDeg;
-				com.once = false;
-			}
-            
-            this.searchSubset(dataForm)
-        },
-        draw_pr: function(){
-            var com = this
             var dataForm = com.gephi_data || com.term_data;
 
-            this.searchSubset(dataForm)
+            // _____ this calculation has only to be done once _______
+            var subset_bc
+            subset_bc = dataForm.nodes.map(arrayItem => {
+                return arrayItem.attributes["Betweenness Centrality"]
+            });
 
-        },
-        draw_padj: function(){
-            var com = this
-            var dataForm = com.gephi_data || com.term_data;
+            // Convert String values to Integers
+            var result = subset_bc.map(function (x) { 
+                return parseInt(x, 10);
+            });
+            var maxDeg = Math.max(...result);       // Need to use spread operator!
 
-            this.searchSubset(dataForm)
+            this.bc_boundary.max = maxDeg;
 
         },
-
-        searchSubset(dataForm) {
+        searchSubset() {
             var com = this
+
+            var dataForm = com.gephi_data || com.term_data;
             var searchSubset = (dataForm === com.gephi_data) ? "searchSubset" : "searchTermSubset";
             // filter hubs
 			var finalNodes = [];
@@ -229,10 +235,73 @@ export default {
 			}
 			finalNodes = nodes;
 			this.emitter.emit(searchSubset, finalNodes);
+        },
+        unactive_proteinlist(){
+            this.$emit("selection_active_changed", false);
+        },
+        valueChanged(event){
+            let a = (event.target.value / event.target.max)* 100;
+            event.target.style.background = `linear-gradient(to right,#0A0A1A,#0A0A1A ${a}%,#ccc ${a}%)`;
         }
 	},
+    mounted(){
+        this.dragElement(document.getElementById("selection_highlight"));
+        
+    },
+    created() {
+        this.initialize_dg(), this.initialize_bc()   
+    }
 }
 </script>
 
 <style>
+
+.selection_list {
+    position: absolute;
+    top: 9.41%;
+    width: 100%;
+    height: 12vw;
+    padding-top: 3%;
+    border-radius: 0px 0px 5px 5px;
+    background: rgba(222, 222, 222, 0.61);
+    backdrop-filter: blur(7.5px);
+}
+
+.selection_list .window-label {
+    color: white;
+}
+
+.selection_list input[type=number] { 
+    position: absolute;
+    margin-top:0.2vw;
+    right: 5%;
+    width: 20%;
+    border: none;
+    height: 6%;
+    font-family: 'ABeeZee', sans-serif;
+    font-size: 0.7vw;
+    color:  white;
+    background: none;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    text-align: right;
+}
+
+.selection_list input[type=range]{
+	appearance: none;
+	outline: none;
+    width: 10vw;
+    height: 0.3vw;
+	border-radius: 5px;
+	background-color: #ccc;
+}
+.selection_list input[type=range]::-webkit-slider-thumb {
+    background: #fafafa;
+    appearance: none;
+    box-shadow: 1px 2px 26px 1px #bdbdbd;
+    width: 0.8vw;
+    height: 0.8vw;
+    border-radius: 50%;
+}
+
 </style>
\ No newline at end of file
diff --git a/frontend/src/components/toolbar/modules/SelectionWindow.vue b/frontend/src/components/toolbar/modules/SelectionWindow.vue
deleted file mode 100644
index c4f3020f..00000000
--- a/frontend/src/components/toolbar/modules/SelectionWindow.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <div class="tool-item">
-        <li v-on:click="visible_list()">Selection List... </li>
-    </div>
-</template>
-
-<script>
-
-export default {
-    name: 'SelectionWindow',
-    emits:['selection_status_changed'],
-    data() {
-        return {
-        }
-    },
-    methods: {
-        dragElement(elmnt) {
-            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) {
-                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;
-            }
-            },
-        visible_list(){
-            this.$emit("selection_status_changed", true);
-        }
-    },
-    mounted(){
-        var com = this;
-
-        com.dragElement(document.getElementById("selection_highlight"));
-    }
-}
-</script>
\ No newline at end of file