Update range slider

neuroanatomy · Jun 8, 2022 · 3f7815d · 3f7815d
1 parent 034e180
commit 3f7815d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "multer": "^1.4.2",
     "mustache-express": "^1.3.0",
     "neuroweblab": "github:neuroanatomy/neuroweblab",
-    "nwl-components": "^0.0.21",
+    "nwl-components": "^0.0.22",
     "pako": "^1.0.11",
     "passport": "^0.4.1",
     "passport-github": "^1.1.0",

diff --git a/templates/project.mustache b/templates/project.mustache
@@ -48,7 +48,7 @@
                 <Editor :title="title">
                     <template v-slot:tools>
                         <Row centered>
-                            <RangeSlider :max="totalSlices" v-model="currentSlice" @input="sliceChange" />
+                            <RangeSlider :max="totalSlices" v-model="currentSlice" @update:modelValue="sliceChange" />
                         </Row>
                         <Row centered>
                             <ButtonsGroup>
@@ -155,9 +155,9 @@
                         <div id="stereotaxic" style="width:100%;height:100%"></div>
                         <AdjustSettings
                             v-if="displayAdjustSettings"
-                            :alpha="alphaValue" @change-alpha="changeAlpha"
-                            :brightness="brightnessValue" @change-brightness="changeBrightness"
-                            :contrast="contrastValue" @change-contrast="changeContrast"
+                            :alpha="alpha" @change-alpha="changeAlpha"
+                            :brightness="brightness" @change-brightness="changeBrightness"
+                            :contrast="contrast" @change-contrast="changeContrast"
                         />
                     </template>
                 </Editor>
@@ -186,7 +186,6 @@
     .text {
         opacity: 0.5;
         width: 100%;
-        height: 100%;
     }
     .text:hover {
         opacity: 1;

diff --git a/view/atlasmaker/src/atlasmaker-interaction.js b/view/atlasmaker/src/atlasmaker-interaction.js
@@ -150,8 +150,6 @@ export var AtlasMakerInteraction = {
      */
   changePenColor: function (index) {
     const me = AtlasMakerWidget;
-    var c = me.ontology.labels[index].color;
-    $('#color').css({ backgroundColor:'rgb(' + c[0] + ', ' + c[1] + ', ' + c[2] + ')' });
     me.User.penValue = me.ontology.labels[index].value;
     me.sendUserDataMessage(JSON.stringify({ 'penValue':me.User.penValue }));
   },
@@ -164,43 +162,12 @@ export var AtlasMakerInteraction = {
   changeSlice: function (x) {
     const me = AtlasMakerWidget;
     me.User.slice = x;
+    console.log('change slice', x);
+    console.log('change user slice', me.User.slice);
     me.sendUserDataMessage(JSON.stringify({ 'slice':me.User.slice }));
     me.drawImages();
   },
 
-  /**
-     * @function prevSlice
-     * @returns {void}
-     */
-  prevSlice: function () {
-    const me = AtlasMakerWidget;
-    var x = $('#slice').data('val')-1;
-    if(x<0) { x = 0; }
-    x = Math.round(x);
-    if(x !== $('#slice').data('val')) {
-      $('#slice').data('val', x);
-      me.changeSlice(x);
-      $('#slice').trigger('updateDisplay');
-    }
-  },
-
-  /**
-     * @function nextSlice
-     * @returns {void}
-     */
-  nextSlice: function () {
-    const me = AtlasMakerWidget;
-    var max = $('#slice').data('max');
-    var x = $('#slice').data('val') + 1;
-    if(x>max) { x = max; }
-    x = Math.round(x);
-    if(x !== $('#slice').data('val')) {
-      $('#slice').data('val', x);
-      me.changeSlice(x);
-      $('#slice').trigger('updateDisplay');
-    }
-  },
-
   /**
      * @function toggleFill
      * @param {bool} doFill Whether to fill or not
@@ -686,14 +653,6 @@ export var AtlasMakerInteraction = {
         me.displayInformation();
       }
       break;
-    case 37: // left arrow
-      me.prevSlice();
-      e.preventDefault();
-      break;
-    case 39: // right arrow
-      me.nextSlice(this);
-      e.preventDefault();
-      break;
     }
   },
 

diff --git a/view/brainbox/src/pages/project-page.js b/view/brainbox/src/pages/project-page.js
@@ -71,9 +71,9 @@ const PageContents = {
       project: projectInfo,
       icons: requireIconsMap(),
       fullscreen: Vue.ref(false),
-      alphaValue: Vue.ref(50),
-      brightnessValue: Vue.ref(50),
-      contrastValue: Vue.ref(50),
+      alpha: Vue.ref(50),
+      brightness: Vue.ref(50),
+      contrast: Vue.ref(50),
       linkPrefix: `${config.baseURL}/mri?url=`,
       volumeAnnotations: Vue.ref([]),
       // define a map associating annotations keys to value selectors
@@ -163,20 +163,27 @@ const PageContents = {
       window.addEventListener('newMessage', this.handleNewChatMessages);
       window.addEventListener('newNotification', this.handleNewNotification);
 
-      document.addEventListener('keydown', function(event) {
+      document.addEventListener('keydown', (event) => {
         const selectedTr = document.querySelector('tr.selected');
-        if (!selectedTr) { return; }
         switch(event.key) {
         case 'ArrowUp':
+          if (!selectedTr) { return; }
           if (selectedTr.previousElementSibling) {
             selectedTr.previousElementSibling.click();
           }
           break;
         case 'ArrowDown':
+          if (!selectedTr) { return; }
           if (selectedTr.nextElementSibling) {
             selectedTr.nextElementSibling.click();
           }
           break;
+        case 'ArrowLeft':
+          this.sliceChange(Math.max(0, AtlasMakerWidget.User.slice - 1));
+          break;
+        case 'ArrowRight':
+          this.sliceChange(Math.min(this.totalSlices, AtlasMakerWidget.User.slice + 1));
+          break;
         default:
           break;
         }
@@ -336,6 +343,7 @@ const PageContents = {
 
     sliceChange(slice) {
       this.title = `Slice ${slice}`;
+      this.currentSlice = slice;
       AtlasMakerWidget.changeSlice(slice);
     },
 
@@ -447,12 +455,12 @@ const PageContents = {
 
     changeBrightness(x) {
       const b = (2 * x / 100);
-      const c = 2 * this.contrastValue / 100;
+      const c = 2 * this.contrast / 100;
       document.querySelector('#canvas').style.filter = `brightness(${b}) contrast(${c})`;
     },
 
     changeContrast(x) {
-      const b = 2 * this.brightnessValue / 100;
+      const b = 2 * this.brightness / 100;
       const c = (2 * x / 100);
       document.querySelector('#canvas').style.filter = `brightness(${b}) contrast(${c})`;
     }