Improvement - VueUiWordCloud & VueUiMolecule - Add zoom reset button

graphieros · graphieros · commit 3d54eaa4c482 · 2025-05-17T07:46:06.000+02:00
diff --git a/TestingArena/ArenaVueUiWordCloud.vue b/TestingArena/ArenaVueUiWordCloud.vue
@@ -156,9 +156,9 @@ const step = ref(0)
                         WATERMARK
                     </div>
                 </template>
-                <template #reset-action="{ reset }">
+                <!-- <template #reset-action="{ reset }">
                     <button @click="reset()">REFRESH</button>
-                </template>
+                </template> -->
             </LocalVueUiWordCloud>
         </template>
 
diff --git a/src/components/vue-ui-molecule.vue b/src/components/vue-ui-molecule.vue
@@ -35,6 +35,7 @@ import PenAndPaper from "../atoms/PenAndPaper.vue";
 import { useUserOptionState } from "../useUserOptionState";
 import { useChartAccessibility } from "../useChartAccessibility";
 import usePanZoom from "../usePanZoom";
+import BaseIcon from "../atoms/BaseIcon.vue";
 
 const { vue_ui_molecule: DEFAULT_CONFIG } = useConfig();
 
@@ -445,7 +446,7 @@ function toggleAnnotator() {
 
 const active = computed(() => !isAnnotator.value)
 
-const { viewBox } = usePanZoom(svgRef, {
+const { viewBox, resetZoom, isZoom } = usePanZoom(svgRef, {
     x: 0,
     y: 0,
     width: svg.value.width <= 0 ? 10 : svg.value.width,
@@ -638,6 +639,22 @@ defineExpose({
             <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
         </div>
 
+        <div v-if="isZoom" data-html2canvas-ignore class="reset-wrapper">
+            <slot name="reset-action" :reset="resetZoom">
+                <button 
+                    data-cy-reset 
+                    tabindex="0" 
+                    role="button" 
+                    class="vue-data-ui-refresh-button"
+                    :style="{
+                        background: FINAL_CONFIG.style.chart.backgroundColor
+                    }"
+                    @click="resetZoom(true)">
+                    <BaseIcon name="refresh" :stroke="FINAL_CONFIG.style.chart.color" />
+                </button>
+            </slot>
+        </div>
+
         <Skeleton
             v-if="!isDataset"
             :config="{
@@ -723,4 +740,37 @@ defineExpose({
     user-select: none;
     position: relative;
 }
+
+.reset-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 0 24px;
+    height: 40px;
+    position: absolute;
+    bottom: 12px;
+    right: 0;
+}
+
+.vue-data-ui-refresh-button {
+    outline: none;
+    border: none;
+    background: transparent;
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+    transform-origin: center;
+    &:focus {
+        outline: 1px solid v-bind(slicerColor);
+    }
+    &:hover {
+        transform: rotate(-90deg)
+    }
+}
 </style>
diff --git a/src/components/vue-ui-word-cloud.vue b/src/components/vue-ui-word-cloud.vue
@@ -30,6 +30,7 @@ import { useUserOptionState } from '../useUserOptionState';
 import { useChartAccessibility } from '../useChartAccessibility';
 import usePanZoom from '../usePanZoom';
 import { positionWords } from '../wordcloud';
+import BaseIcon from '../atoms/BaseIcon.vue';
 
 const { vue_ui_word_cloud: DEFAULT_CONFIG } = useConfig();
 
@@ -118,7 +119,6 @@ watch(() => props.config, (_newCfg) => {
     prepareChart();
     titleStep.value += 1;
     tableStep.value += 1;
-    refreshSlicer();
     
     // Reset mutable config
     mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
@@ -334,7 +334,7 @@ function toggleAnnotator() {
 
 const active = computed(() => !isAnnotator.value && FINAL_CONFIG.value.style.chart.zoom.show)
 
-const { viewBox } = usePanZoom(svgRef, {
+const { viewBox, resetZoom, isZoom } = usePanZoom(svgRef, {
     x: 0,
     y: 0,
     width: svg.value.width <= 0 ? 10 : svg.value.width,
@@ -393,6 +393,7 @@ function useTooltip(word) {
 <template>
     <div class="vue-ui-word-cloud" ref="wordCloudChart" :id="`wordCloud_${uid}`"
         :style="`width: 100%; font-family:${FINAL_CONFIG.style.fontFamily};background:${FINAL_CONFIG.style.chart.backgroundColor};${FINAL_CONFIG.responsive ? 'height:100%' : ''}`" @mouseenter="() => setUserOptionsVisibility(true)" @mouseleave="() => setUserOptionsVisibility(false)">
+
         <PenAndPaper
             v-if="FINAL_CONFIG.userOptions.buttons.annotator"
             :svgRef="svgRef"
@@ -522,6 +523,22 @@ function useTooltip(word) {
             <slot name="watermark" v-bind="{ isPrinting: isPrinting || isImaging }"/>
         </div>
 
+        <div v-if="isZoom" data-html2canvas-ignore class="reset-wrapper">
+            <slot name="reset-action" :reset="resetZoom">
+                <button 
+                    data-cy-reset 
+                    tabindex="0" 
+                    role="button" 
+                    class="vue-data-ui-refresh-button"
+                    :style="{
+                        background: FINAL_CONFIG.style.chart.backgroundColor
+                    }"
+                    @click="resetZoom(true)">
+                    <BaseIcon name="refresh" :stroke="FINAL_CONFIG.style.chart.color" />
+                </button>
+            </slot>
+        </div>
+
         <Tooltip
             :show="mutableConfig.showTooltip && isTooltip"
             :backgroundColor="FINAL_CONFIG.style.chart.tooltip.backgroundColor"
@@ -582,7 +599,7 @@ function useTooltip(word) {
     </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 @import "../vue-data-ui.css";
 
 .vue-ui-word-cloud * {
@@ -616,5 +633,36 @@ text.animated {
     opacity: 0.5 !important;
 }
 
+.reset-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    padding: 0 24px;
+    height: 40px;
+    position: absolute;
+    bottom: 12px;
+    right: 0;
+}
 
+.vue-data-ui-refresh-button {
+    outline: none;
+    border: none;
+    background: transparent;
+    height: 36px;
+    width: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform 0.2s ease-in-out;
+    transform-origin: center;
+    &:focus {
+        outline: 1px solid v-bind(slicerColor);
+    }
+    &:hover {
+        transform: rotate(-90deg)
+    }
+}
 </style>
diff --git a/src/usePanZoom.js b/src/usePanZoom.js
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted, watch, nextTick, watchEffect } from 'vue';
+import { ref, onMounted, onUnmounted, watch, nextTick, watchEffect, computed } from 'vue';
 
 export default function usePanZoom(svgRef, initialViewBox = { x: 0, y: 0, width: 100, height: 100 }, speed = 1, activeRef) {
     const viewBox = ref({ ...initialViewBox });
@@ -10,6 +10,13 @@ export default function usePanZoom(svgRef, initialViewBox = { x: 0, y: 0, width:
     const pinchStartViewBox = ref(null);
     const isPinching = ref(false);
 
+    const isZoom = computed(() => {
+        return viewBox.value.x !== initialViewBox.x ||
+        viewBox.value.y !== initialViewBox.y ||
+        viewBox.value.width !== initialViewBox.width ||
+        viewBox.value.height !== initialViewBox.height
+    })
+
     let velocity = { x: 0, y: 0 };
     let animationFrame = null;
     let zoomAnimationFrame = null;
@@ -70,6 +77,40 @@ export default function usePanZoom(svgRef, initialViewBox = { x: 0, y: 0, width:
         isPanning.value = false;
     };
 
+    function resetZoom(animated = false) {
+        if (!animated) {
+            viewBox.value = { ...initialViewBox };
+            scale.value = 1;
+            return;
+        }
+
+        const startViewBox = { ...viewBox.value };
+        const startScale = scale.value;
+        const duration = 300;
+        let start = null;
+    
+        function animate(ts) {
+            if (!start) start = ts;
+            const progress = Math.min((ts - start) / duration, 1);
+
+            viewBox.value = {
+                x: startViewBox.x + (initialViewBox.x - startViewBox.x) * progress,
+                y: startViewBox.y + (initialViewBox.y - startViewBox.y) * progress,
+                width: startViewBox.width + (initialViewBox.width - startViewBox.width) * progress,
+                height: startViewBox.height + (initialViewBox.height - startViewBox.height) * progress,
+            };
+            scale.value = startScale + (1 - startScale) * progress;
+    
+            if (progress < 1) {
+                requestAnimationFrame(animate);
+            } else {
+                viewBox.value = { ...initialViewBox };
+                scale.value = 1;
+            }
+        }
+        requestAnimationFrame(animate);
+    }
+
     function zoom(event) {
         event.preventDefault();
         const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
@@ -213,5 +254,5 @@ export default function usePanZoom(svgRef, initialViewBox = { x: 0, y: 0, width:
         };
     });
 
-    return { viewBox };
+    return { viewBox, resetZoom, isZoom };
 }
