fix(ColorBy): Do not rely on magic str separator

Kitware · Oct 16, 2020 · ead945b · ead945b
1 parent bd21948
commit ead945b
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 31 deletions.
diff --git a/src/components/controls/ColorBy/script.js b/src/components/controls/ColorBy/script.js
@@ -44,7 +44,7 @@ function convertArrays(arrays, addSolidColor = false) {
     const item = arrays[i];
     options.push({
       text: item.name,
-      value: `${item.name}--:|:--${item.location}`,
+      value: [item.name, item.location],
     });
   }
   return options;
@@ -66,7 +66,7 @@ export default {
     return {
       palette: SPECTRAL.concat('#ffffff', '#000000'),
       available: '',
-      colorBy: 'solid',
+      colorBy: 'solid', // Either 'solid' or [arrayName, arrayLocation]
       arrays: [SOLID_COLOR],
       piecewiseFunction: null,
       solidColor: '#ffffff',
@@ -87,18 +87,16 @@ export default {
       return this.$proxyManager.getProxyById(this.sourceId);
     },
     colorByName() {
-      if (this.colorBy.indexOf('--:|:--') === -1) {
-        return null;
+      if (Array.isArray(this.colorBy)) {
+        return this.colorBy[0];
       }
-      const cb = this.colorBy.split('--:|:--');
-      return cb[0];
+      return null;
     },
     colorByLocation() {
-      if (this.colorBy.indexOf('--:|:--') === -1) {
-        return null;
+      if (Array.isArray(this.colorBy)) {
+        return this.colorBy[1];
       }
-      const cb = this.colorBy.split('--:|:--');
-      return cb[1];
+      return null;
     },
     hasPresetOpacity() {
       const preset = vtkColorMaps.getPresetByName(this.presetName);
@@ -123,6 +121,14 @@ export default {
     origDataRange() {
       return this.originalLUTRanges[this.colorByName] ?? [];
     },
+    arraySelectValue() {
+      return this.arrays.find((arr) =>
+        Array.isArray(arr.value)
+          ? arr.value[0] === this.colorByName &&
+            arr.value[1] === this.colorByLocation
+          : arr.value === this.colorBy
+      );
+    },
   },
   watch: {
     interpolateScalarsBeforeMapping(value) {
@@ -324,7 +330,7 @@ export default {
 
         // only get name and location of colorBy array
         if (colorByValue.length) {
-          this.colorBy = colorByValue.slice(0, 2).join('--:|:--');
+          this.colorBy = colorByValue.slice(0, 2);
         } else {
           // should only happen with geometry
           this.colorBy = 'solid';
@@ -408,5 +414,8 @@ export default {
     setDataRange(dataRange) {
       this.dataRange = [Number(dataRange[0]) || 0, Number(dataRange[1]) || 0];
     },
+    setColorBy(colorBy) {
+      this.colorBy = colorBy;
+    },
   },
 };
diff --git a/src/components/controls/ColorBy/template.html b/src/components/controls/ColorBy/template.html
@@ -13,8 +13,9 @@
               dense
               flat
               hide-details
-              v-model="colorBy"
               :items="arrays"
+              :value="arraySelectValue"
+              @change="setColorBy"
             />
           </v-flex>
           <v-flex xs12 v-if="colorBy === 'solid'">
@@ -27,10 +28,7 @@
           </v-flex>
         </template>
         <template v-if="colorBy !== 'solid'">
-          <v-flex
-            xs12
-            class="pt-2"
-          >
+          <v-flex xs12 class="pt-2">
             <v-menu
               :close-on-content-click="false"
               offset-y
@@ -52,11 +50,7 @@
               />
             </v-menu>
           </v-flex>
-          <v-flex
-            xs5
-            class="pb-4"
-            :class="$style.negativeTopSpacing"
-          >
+          <v-flex xs5 class="pb-4" :class="$style.negativeTopSpacing">
             <v-text-field
               @change="$proxyManager.renderAllViews()"
               label="Min"
@@ -73,10 +67,7 @@
             class="text-center pb-4"
             :class="$style.negativeTopSpacing"
           >
-            <v-tooltip
-              v-if="available === 'geometry'"
-              bottom
-            >
+            <v-tooltip v-if="available === 'geometry'" bottom>
               <template v-slot:activator="{ on }">
                 <v-btn
                   icon
@@ -92,11 +83,7 @@
             </v-tooltip>
             <v-spacer v-else />
           </v-flex>
-          <v-flex
-            xs5
-            class="pb-4"
-            :class="$style.negativeTopSpacing"
-          >
+          <v-flex xs5 class="pb-4" :class="$style.negativeTopSpacing">
             <v-text-field
               @change="$proxyManager.renderAllViews()"
               label="Max"
@@ -176,7 +163,8 @@
                 :class="$style.click"
                 v-on:click.stop="interpolateScalarsBeforeMapping = !interpolateScalarsBeforeMapping"
               >
-                {{ interpolateScalarsBeforeMapping ? 'mdi-checkbox-marked' : 'mdi-checkbox-blank-outline' }}
+                {{ interpolateScalarsBeforeMapping ? 'mdi-checkbox-marked' :
+                'mdi-checkbox-blank-outline' }}
               </v-icon>
             </v-flex>
             <v-flex xs10>