Improvement - VueUiWordCloud - Add zoom controls

Author: graphieros

TestingArena/ArenaVueUiWordCloud.vue

@@ -30,13 +30,13 @@ Maecenas convallis libero at nisl lacinia facilisis. Nulla facilisi. Sed bibendu
 
 const shortText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus pulvinar pretium venenatis. Donec imperdiet elit id porttitor tristique. Aenean ac commodo justo. Vestibulum placerat molestie nisl, sit amet lacinia nulla posuere quis. Aenean ullamcorper eu ex vitae facilisis. Aliquam erat volutpat. Proin nunc felis, porttitor quis commodo lacinia, gravida sed orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus mattis vitae tellus ac luctus. Vestibulum faucibus sem nec varius eleifend. In gravida venenatis ipsum sit amet ultricies. Nam efficitur, dui ac imperdiet vestibulum, justo metus consectetur libero, posuere tempor neque magna vitae augue. Etiam gravida massa quis turpis vulputate, ac tempus nisi imperdiet.'
 
-const dataset = ref(undefined);
+const dataset = ref(createWordCloudDatasetFromPlainText(longText));
 
-onMounted(() => {
-    setTimeout(() => {
-        dataset.value = createWordCloudDatasetFromPlainText(longText);
-    }, 2000)
-})
+// onMounted(() => {
+//     setTimeout(() => {
+//         dataset.value = createWordCloudDatasetFromPlainText(longText);
+//     }, 2000)
+// })
 
 const model = createModel([
     CHECKBOX("debug", { def: true }),

src/atoms/BaseZoomControls.vue

@@ -76,6 +76,17 @@ const emit = defineEmits(['zoomIn', 'zoomOut', 'resetZoom', 'switchDirection']);
             :size="config.style.chart.controls.fontSize * 1.2"
         />
     </button>
+    <button
+        :disabled="scale === 1"
+        @click="emit('resetZoom')" 
+        class="vue-data-ui-zoom-controls-button"
+    >
+        <BaseIcon 
+            name="revert" 
+            :stroke="config.style.chart.controls.color" 
+            :size="config.style.chart.controls.fontSize * 1.2"
+        />
+    </button>
     <button
         v-if="withDirection" 
         @click="emit('switchDirection')" 
@@ -134,4 +145,13 @@ const emit = defineEmits(['zoomIn', 'zoomOut', 'resetZoom', 'switchDirection']);
     transform: translateX(-50%) !important;
     bottom: 1rem;
 }
+
+button:disabled {
+    cursor:not-allowed;
+    opacity: 0.3;
+}
+
+button:disabled:hover {
+    box-shadow: none;
+}
 </style>

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

@@ -27,7 +27,6 @@ import {
     treeShake,
     XMLNS
 } from '../lib';
-import { throttle } from '../canvas-lib';
 import { useConfig } from '../useConfig';
 import { useLoading } from '../useLoading';
 import { usePrinter } from '../usePrinter';
@@ -43,6 +42,7 @@ import Title from '../atoms/Title.vue'; // Must be ready in responsive mode
 import themes from "../themes/vue_ui_word_cloud.json";
 import usePanZoom from '../usePanZoom';
 import BaseScanner from '../atoms/BaseScanner.vue';
+import BaseZoomControls from '../atoms/BaseZoomControls.vue';
 
 const Tooltip = defineAsyncComponent(() => import('../atoms/Tooltip.vue'));
 const BaseIcon = defineAsyncComponent(() => import('../atoms/BaseIcon.vue'));
@@ -92,6 +92,7 @@ const tableUnit = ref(null);
 const userOptionsRef = ref(null);
 const cloudFinalized = ref(false);
 const isRelayout = ref(false);
+const zoomControls = ref(null);
 
 const FINAL_CONFIG = ref(prepareConfig());
 
@@ -279,6 +280,7 @@ const resizeJob = debounce(() => {
     const { width, height } = useResponsive({
         chart: wordCloudChart.value,
         title: FINAL_CONFIG.value.style.chart.title.text ? chartTitle.value : null,
+        legend: FINAL_CONFIG.value.style.chart.controls.show ? zoomControls.value?.$el : null,
         source: source.value
     });
 
@@ -562,7 +564,7 @@ function toggleZoom() {
 
 const active = computed(() => !isAnnotator.value && mutableConfig.value.showZoom);
 
-const { viewBox, resetZoom, isZoom, setInitialViewBox } = usePanZoom(svgRef, {
+const { viewBox, resetZoom, isZoom, setInitialViewBox, zoomByFactor, scale } = usePanZoom(svgRef, {
     x: 0,
     y: 0,
     width: svg.value.width <= 0 ? 10 : svg.value.width,
@@ -662,6 +664,14 @@ async function generateSvg({ isCb }) {
     }
 }
 
+function zoomIn() {
+    zoomByFactor(1.5, true);
+}
+
+function zoomOut() {
+    zoomByFactor(1 / 1.5, true);
+}
+
 defineExpose({
     getData,
     getImage,
@@ -853,12 +863,23 @@ function useTooltip(word, index) {
             </template>
         </UserOptions>
 
+        <BaseZoomControls
+            ref="zoomControls"
+            v-if="FINAL_CONFIG.style.chart.controls.position === 'top' && FINAL_CONFIG.style.chart.controls.show && !loading"
+            :config="FINAL_CONFIG"
+            :scale="scale"
+            :isFullscreen="isFullscreen"
+            @zoomIn="zoomIn"
+            @zoomOut="zoomOut"
+            @resetZoom="resetZoom(true)"
+        />
+
         <svg
             ref="svgRef"
             :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen  }" 
             :xmlns="XMLNS"
             :viewBox="`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`"
-            :style="`overflow:hidden;background:transparent;`"
+            :style="`overflow:hidden;background:transparent;display:block`"
         >
             <PackageVersion />
 
@@ -929,20 +950,20 @@ function useTooltip(word, index) {
 
         <div v-if="isZoom" data-dom-to-png-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>
 
+        <BaseZoomControls
+            ref="zoomControls"
+            v-if="FINAL_CONFIG.style.chart.controls.position === 'bottom' && FINAL_CONFIG.style.chart.controls.show && !loading"
+            :config="FINAL_CONFIG"
+            :scale="scale"
+            :isFullscreen="isFullscreen"
+            @zoomIn="zoomIn"
+            @zoomOut="zoomOut"
+            @resetZoom="resetZoom(true)"
+        />
+
         <Tooltip
             :show="mutableConfig.showTooltip && isTooltip"
             :backgroundColor="FINAL_CONFIG.style.chart.tooltip.backgroundColor"

src/themes/vue_ui_word_cloud.json

@@ -11,6 +11,12 @@
                         "color": "#757575"
                     }
                 },
+                "controls": {
+                    "backgroundColor": "#2A2A2A",
+                    "buttonColor": "#2A2A2A",
+                    "color": "#CCCCCC",
+                    "border": "1px solid #4A4A4A"
+                },
                 "words": {
                     "selectedStroke": "#1A1A1A"
                 },
@@ -44,6 +50,12 @@
                         "color": "#757575"
                     }
                 },
+                "controls": {
+                    "backgroundColor": "#FFF8E1",
+                    "buttonColor": "#FFF8E1",
+                    "color": "#424242",
+                    "border": "1px solid #d9bbb2"
+                },
                 "words": {
                     "selectedStroke": "#FFF8E1"
                 },
@@ -81,6 +93,12 @@
                         "color": "#BDBDBD"
                     }
                 },
+                "controls": {
+                    "backgroundColor": "#1E1E1E",
+                    "buttonColor": "#1E1E1E",
+                    "color": "#BDBDBD",
+                    "border": "1px solid #3A3A3A"
+                },
                 "words": {
                     "selectedStroke": "#1E1E1E"
                 },
@@ -112,6 +130,12 @@
             "chart": {
                 "backgroundColor": "#1A1A1A",
                 "color": "#99AA99",
+                "controls": {
+                    "backgroundColor": "#1A1A1A",
+                    "buttonColor": "#1A1A1A",
+                    "color": "#99AA99",
+                    "border": "1px solid #1e361e"
+                },
                 "title": {
                     "color": "#66CC66",
                     "subtitle": {
@@ -139,6 +163,12 @@
             "chart": {
                 "backgroundColor": "#fbfafa",
                 "color": "#8A9892",
+                "controls": {
+                    "backgroundColor": "#fbfafa",
+                    "buttonColor": "#fbfafa",
+                    "color": "#99AA99",
+                    "border": "1px solid #ebded3"
+                },
                 "title": {
                     "color": "#8A9892",
                     "subtitle": {
@@ -166,6 +196,13 @@
             "chart": {
                 "backgroundColor": "#f6f6fb",
                 "color": "#50606C",
+                "controls": {
+                    "backgroundColor": "#f6f6fb",
+                    "buttonColor": "#f6f6fb",
+                    "color": "#50606C",
+                    "border": "1px solid #98aab8",
+                    "borderRadius": "0"
+                },
                 "title": {
                     "color": "#50606C",
                     "subtitle": {

src/useConfig.js

@@ -4638,6 +4638,17 @@ export function useConfig() {
                 zoom: {
                     show: true,
                 },
+                controls: {
+                    position: 'bottom',
+                    show: true,
+                    backgroundColor: COLOR_GREY_LIGHT,
+                    buttonColor: COLOR_GREY_LIGHT,
+                    color: COLOR_BLACK,
+                    fontSize: 14,
+                    border: `1px solid ${COLOR_GREY_MID}`,
+                    padding: `0.5rem`,
+                    borderRadius: `0.25rem`
+                },
                 words: {
                     maxFontSize: 100,
                     minFontSize: FONT._10,

types/vue-data-ui.d.ts

@@ -291,6 +291,18 @@ declare module "vue-data-ui" {
         strokeDasharray?: number;
     }
 
+    export type ChartZoomControls = {
+        position?: 'top' | 'bottom';
+        show?: boolean;
+        backgroundColor?: string;
+        buttonColor?: string;
+        color?: string;
+        fontSize?: number;
+        border?: string;
+        padding?: string;
+        borderRadius?: string;
+    }
+
     export type ChartUserOptions = {
         show?: boolean;
         showOnChartHover?: boolean;
@@ -1541,7 +1553,8 @@ declare module "vue-data-ui" {
         | "triangleInformation"
         | "triangleExclamation"
         | "direction"
-        | "chartDag";
+        | "chartDag"
+        | "revert";
 
     export const VueUiIcon: DefineComponent<{
         name: VueUiIconName;
@@ -7030,6 +7043,7 @@ declare module "vue-data-ui" {
                 height?: number;
                 width?: number;
                 zoom?: Omit<ChartZoom, "fontSize">;
+                controls?: ChartZoomControls;
                 words?: {
                     maxFontSize?: number;
                     minFontSize?: number;
@@ -9517,17 +9531,7 @@ declare module "vue-data-ui" {
                         color?: string;
                     };
                 };
-                controls?: {
-                    position?: 'top' | 'bottom';
-                    show?: boolean;
-                    backgroundColor?: string;
-                    buttonColor?: string;
-                    color?: string;
-                    fontSize?: number;
-                    border?: string;
-                    padding?: string;
-                    borderRadius?: string;
-                };
+                controls?: ChartZoomControls;
                 zoom?: {
                     active?: boolean;
                 };
@@ -9724,17 +9728,7 @@ declare module "vue-data-ui" {
                         offsetY?: number;
                     };
                 };
-                controls?: {
-                    position?: 'top' | 'bottom';
-                    show?: boolean;
-                    backgroundColor?: string;
-                    buttonColor?: string;
-                    color?: string;
-                    fontSize?: number;
-                    border?: string;
-                    padding?: string;
-                    borderRadius?: string;
-                };
+                controls?: ChartZoomControls;
                 title?: ChartTitle;
                 tooltip?: ChartTooltip;
                 zoom?: {