Improvement - VueUiWordCloud - Improve word opacity handling on hover

Author: graphieros

src/components/vue-ui-word-cloud.vue

@@ -160,6 +160,7 @@ const { loading, FINAL_DATASET, manualLoading } = useLoading({
                     words: {
                         color: '#6A6A6A',
                         usePalette: false,
+                        selectedStroke: '#CCCCCC'
                     }
                 }
             }
@@ -781,14 +782,27 @@ function useTooltip(word, index) {
                         @click="onTrapClick(word, index)"
                     />
                     <text
-                        :fill="word.color" 
-                        :font-weight="FINAL_CONFIG.style.chart.words.bold ? 'bold' : 'normal'" :key="index"
-                        :x="word.x" :y="word.y" :font-size="word.fontSize"
+                        :fill="word.color"
+                        :font-weight="FINAL_CONFIG.style.chart.words.bold ? 'bold' : 'normal'"
+                        :key="index"
+                        :x="word.x"
+                        :y="word.y"
+                        :font-size="word.fontSize"
                         :transform="`translate(${word.width / 2}, ${word.height / 2})`"
-                        :class="{'animated': FINAL_CONFIG.useCssAnimation, 'word-selected': selectedWord && selectedWord === word.id && mutableConfig.showTooltip, 'word-not-selected': selectedWord && selectedWord !== word.id && mutableConfig.showTooltip }"
+                        :class="{ 'animated': FINAL_CONFIG.useCssAnimation && !loading }"
                         text-anchor="middle"
                         dominant-baseline="central"
-                        :style="`animation-delay:${index * FINAL_CONFIG.animationDelayMs}ms !important; pointer-events:none;`"
+                        paint-order="stroke fill"
+                        :stroke="(!selectedWord || selectedWord === word.id) ? FINAL_CONFIG.style.chart.words.selectedStroke : undefined"
+                        :stroke-width="word.height * 0.05"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        :style="`
+                            animation-delay:${index * FINAL_CONFIG.animationDelayMs}ms !important;
+                            pointer-events:none;
+                            fill-opacity:${(!selectedWord || selectedWord === word.id) ? 1 : FINAL_CONFIG.style.chart.words.hoverOpacity} !important;
+                            transition:fill-opacity 0.3s ease-in-out !important;
+                        `"
                     >
                         {{ word.name }}
                     </text>
@@ -916,13 +930,6 @@ text.animated {
     }
 }
 
-.animated.word-selected {
-    opacity: 1;
-}
-.word-not-selected {
-    opacity: 0.5 !important;
-}
-
 .reset-wrapper {
     display: flex;
     flex-direction: row;

src/themes.json

@@ -8761,6 +8761,9 @@
                             "color": "#757575"
                         }
                     },
+                    "words": {
+                        "selectedStroke": "#FFF8E1"
+                    },
                     "tooltip": {
                         "backgroundColor": "#FFECB3",
                         "backgroundOpacity": 30,
@@ -8795,6 +8798,9 @@
                             "color": "#BDBDBD"
                         }
                     },
+                    "words": {
+                        "selectedStroke": "#1E1E1E"
+                    },
                     "tooltip": {
                         "backgroundColor": "#1E1E1E",
                         "backgroundOpacity": 30,
@@ -8828,6 +8834,9 @@
                         "subtitle": {
                             "color": "#99AA99"
                         }
+                    },
+                    "words": {
+                        "selectedStroke": "#1A1A1A"
                     }
                 }
             },
@@ -8852,6 +8861,9 @@
                         "subtitle": {
                             "color": "#99AA99"
                         }
+                    },
+                    "words": {
+                        "selectedStroke": "#fbfafa"
                     }
                 }
             },
@@ -8876,6 +8888,9 @@
                         "subtitle": {
                             "color": "#718890"
                         }
+                    },
+                    "words": {
+                        "selectedStroke": "#f6f6fb"
                     }
                 }
             },

src/useConfig.js

@@ -4398,7 +4398,9 @@ export function useConfig() {
                     proximity: 10,
                     packingWeight: 1,
                     color: COLOR_BLACK,
-                    usePalette: true
+                    usePalette: true,
+                    hoverOpacity: 0.5,
+                    selectedStroke: 'transparent'
                 },
                 title: TITLE,
                 tooltip: {

types/vue-data-ui.d.ts

@@ -6935,6 +6935,8 @@ declare module "vue-data-ui" {
                     packingWeight?: number;
                     color?: string;
                     usePalette?: boolean;
+                    hoverOpacity?: number;
+                    selectedStroke?: string;
                 };
                 title?: ChartTitle;
                 tooltip?: ChartTooltip & {