Skip to content

Commit 0ed6f59

Browse files
graphierosgraphieros
committed
Improvement - VueUiWordCloud & VueUiMolecule - Add zoom lock user option
1 parent 71f6988 commit 0ed6f59

File tree

10 files changed

+130
-28
lines changed

10 files changed

+130
-28
lines changed

‎TestingArena/ArenaVueUiIcon.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { VueUiIcon } from "vue-data-ui";
66
import { VueUiIcon as VueUiIconTreeshaken } from "vue-data-ui/vue-ui-icon";
77
88
const icons = ref([
9-
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg", "chartStackline"
9+
"annotator", "chart3dBar", "chartAgePyramid", "chartBar", "chartCandlestick", "chartChestnut", "chartDonut", "chartDonutEvolution", "chartGauge", "chartHeatmap", "chartLine", "chartMoodRadar", "chartOnion", "chartQuadrant", "chartRadar", "chartRelationCircle", "chartRings", "chartScatter", "chartSparkHistogram", "chartSparkStackbar", "chartTable", "chartThermometer", "chartTiremarks", "chartVerticalBar", "chartWaffle", "chartWheel", "close", "dashboard", "digit0", "digit1", "digit2", "digit3", "digit4", "digit5", "digit6", "digit7", "digit8", "digit9", "excel", "image", "labelClose", "labelOpen", "menu", "moodFlat", "moodHappy", "moodNeutral", "moodSad", "pdf", "screenshot", "skeleton", "smiley", "sort", "spin", "star", "tableClose", "tableOpen", "chartNestedDonuts", "chartSparkbar", "refresh", "circleQuestion", "circleExclamation", "circleCheck", "circleCancel", "moodLaughing", "moodWink", "moodEmbarrassed", "moodSurprised", "exitFullscreen", "fullscreen", "arrowRight", "arrowTop", "arrowBottom", "arrowLeft", "chartCluster", "chartSparkline", "legend", "csv", "chartGalaxy", "kpi", "kpiBox", "tooltip", "vueDataUi", "ratio", "func", "settings", "trendUp", "trendDown", "clipBoard", "zoomPlus", "zoomMinus", "clipboardLine", "clipboardDonut", "clipboardBar", "clipboardVariable", "triangle", "triangleFill", "square", "squareFill", "diamond", "diamondFill", "pentagon", "pentagonFill", "hexagon", "hexagonFill", "circle", "circleFill", "star", "starFace", "starFill", "numbers", "sigma", "mu", "lambda", "people", "copy", "accordion", "cursor", "trend", "chartStripPlot", "chartDumbbell", "copyLeft", "chartWordCloud", "stack", "unstack", "window", "chartFlow", "chartParallelCoordinatePlot", "tooltipDisabled", "pause", "play", "stop", "restart", "lap", "carouselTable", "battery", "chartStackbar", "chartBullet", "trash", "annotatorDisabled", "palette", "boxes", "chartFunnel", "chartHistoryPlot", "chartTableSparkline", "chartCirclePack", "icons", "robot", "hourglass", "computer", "htmlTag", "curlyBrackets", "curlySpread", "world", "eye", "chartRidgeline", "chartChord", "tableDialogOpen", "tableDialogClose", "minimap", "svg", "chartStackline", "zoomLock", "zoomUnlock", "lock", "unlock"
1010
])
1111
1212
</script>

‎TestingArena/ArenaVueUiMolecule.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,7 @@ const model = ref([
198198
{ key: 'style.chart.tooltip.position', def: 'center', type: 'select', options: ['left', 'center', 'right']},
199199
{ key: 'style.chart.tooltip.offsetY', def: 24, type: 'number', min: 0, max: 48},
200200
201+
{ key: 'style.chart.zoom.show', def: false, type: 'checkbox'},
201202
{ key: 'style.chart.zoom.speed', def: 1, type: 'number', min: 0, max: 2, step: 0.01},
202203
203204
{ key: 'table.show', def: false, type: 'checkbox'},
@@ -316,6 +317,9 @@ onMounted(async () => {
316317
<!-- <template #chart-background>
317318
<div style="width: 100%; height: 100%; background: radial-gradient(at top left, red, white)"/>
318319
</template> -->
320+
<!-- <template #optionZoom="{ isZoomLocked }">
321+
LOCKED: {{ isZoomLocked }}
322+
</template> -->
319323
<template #optionPdf>
320324
PRINT PDF
321325
</template>

‎src/atoms/BaseIcon.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,11 @@ const icons = computed(() => {
204204
printer: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 6 13 L 6 17 C 6 18 7 18 7 18 L 13 18 C 13 18 14 18 14 17 L 14 13 C 14 13 14 12 13 12 L 7 12 C 6 12 6 13 6 13 M 5 15 L 3 15 C 3 15 2 15 2 14 L 2 9 C 2 8 3 8 3 8 L 17 8 C 18 8 18 9 18 9 L 18 14 C 18 15 17 15 17 15 L 15 15 M 6 7 L 6 4 C 6 3 7 3 7 3 L 13 3 C 14 3 14 4 14 4 L 14 7"/>`,
205205
save: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 3 2 L 3 2 L 14 2 L 18 6 L 18 17 C 18 18 17 18 17 18 L 3 18 C 3 18 2 18 2 17 L 2 3 C 2 3 2 2 3 2 M 5 2 L 5 4 C 5 5 6 5 6 5 L 12 5 C 12 5 13 5 13 4 L 13 2 M 10 9 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 9"/>`,
206206
svg: `<path fill="none" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" stroke-linecap="round" stroke-linejoin="round" d="M 4 1 C 2 1 1 2 1 4 L 1 16 C 1 18 2 19 4 19 L 16 19 C 18 19 19 18 19 16 L 19 6 C 15 6 14 5 14 1 Z M 8.458 9.052 L 10 16 L 11.519 9.03 M 16 11 C 16 8 12.995 8.81 13 11 L 13 14 C 13 17 15.99 16.299 16 14 L 16 13 L 15 13 M 6.982 10.286 C 6.564 8.238 3.921 8.788 4 11 C 4.757 13.259 6.806 11.607 7 14 C 7 17 3.854 16.299 4 14"/>`,
207-
chartStackline: `<path d="M 2 16 L 2 18 L 18 18 L 18 10 L 14 14 L 11 12 L 8 15 L 5 13 Z" stroke="none" fill="${props.stroke}" style="opacity:0.9"/><path d="M 2 16 L 5 13 L 8 15 L 11 12 L 14 14 L 18 10 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 L 2 9 Z" stroke="none" fill="${props.stroke}"" style="opacity:0.6"/><path d="M 2 9 L 2 2 L 18 2 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 Z" stroke="none" fill="${props.stroke}" style="opacity:0.3"/><path d="M 1 1 L 1 19 L 19 19" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`
207+
chartStackline: `<path d="M 2 16 L 2 18 L 18 18 L 18 10 L 14 14 L 11 12 L 8 15 L 5 13 Z" stroke="none" fill="${props.stroke}" style="opacity:0.9"/><path d="M 2 16 L 5 13 L 8 15 L 11 12 L 14 14 L 18 10 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 L 2 9 Z" stroke="none" fill="${props.stroke}"" style="opacity:0.6"/><path d="M 2 9 L 2 2 L 18 2 L 18 6 L 14 8 L 11 6 L 8 9 L 5 8 Z" stroke="none" fill="${props.stroke}" style="opacity:0.3"/><path d="M 1 1 L 1 19 L 19 19" stroke="${props.stroke}" stroke-linecap="round" stroke-linejoin="round" fill="none"/>`,
208+
zoomUnlock: `<path d="M 10 1 A 1 1 0 0 0 10 19 A 1 1 0 0 0 10 1 M 16.36 16.368 L 19 19 M 6 10 L 6 14 C 6 15 7 15 7 15 L 13 15 C 13 15 14 15 14 14 L 14 10 C 14 10 14 9 13 9 L 7 9 C 6 9 6 10 6 10 M 13 9 A 1 1 0 0 0 9 5 M 10 11 L 10 13" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
209+
zoomLock: `<path d="M 10 1 A 1 1 0 0 0 10 19 A 1 1 0 0 0 10 1 M 16.36 16.368 L 19 19 M 6 10 L 6 14 C 6 15 7 15 7 15 L 13 15 C 13 15 14 15 14 14 L 14 10 C 14 10 14 9 13 9 L 7 9 C 6 9 6 10 6 10 M 13 9 M 10 11 L 10 13 M 13 9 C 14 3 6 3 7 9" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
210+
lock: `<path d="M 16 8 C 16 -1 4 -1 4 8 M 3 8 L 17 8 C 18 8 18 9 18 9 L 18 18 C 18 19 17 19 17 19 L 3 19 C 3 19 2 19 2 18 L 2 9 C 2 9 2 8 3 8 M 10 11 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 11 M 10 13 L 10 16" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
211+
unlock: `<path d="M 16 8 C 18 1 10 0 8 2 M 3 8 L 17 8 C 18 8 18 9 18 9 L 18 18 C 18 19 17 19 17 19 L 3 19 C 3 19 2 19 2 18 L 2 9 C 2 9 2 8 3 8 M 10 11 A 1 1 0 0 0 10 13 A 1 1 0 0 0 10 11 M 10 13 L 10 16" stroke="${props.stroke}" stroke-width="${props.strokeWidth}" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
208212
}
209213
});
210214

‎src/atoms/UserOptions.vue‎

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,14 @@ const props = defineProps({
140140
tableDialog: {
141141
type: Boolean,
142142
default: false,
143+
},
144+
hasZoom: {
145+
type: Boolean,
146+
default: false,
147+
},
148+
isZoom: {
149+
type: Boolean,
150+
default: false
143151
}
144152
});
145153
@@ -155,7 +163,8 @@ const emit = defineEmits([
155163
'toggleTooltip',
156164
'toggleAnimation',
157165
'toggleAnnotator',
158-
'generateSvg'
166+
'generateSvg',
167+
'toggleZoom'
159168
]);
160169
161170
async function generatePdf() {
@@ -246,6 +255,17 @@ function toggleAnimation() {
246255
}
247256
}
248257
258+
const isZoomActive = ref(props.isZoom);
259+
260+
function toggleZoom() {
261+
if (props.callbacks.zoom) {
262+
props.callbacks.zoom();
263+
} else {
264+
isZoomActive.value = !isZoomActive.value;
265+
emit('toggleZoom');
266+
}
267+
}
268+
249269
const isAnnotator = computed({
250270
get:() => {
251271
return props.isAnnotation;
@@ -338,7 +358,8 @@ const isInfo = ref({
338358
fullscreen: false,
339359
animation: false,
340360
annotator: false,
341-
svg: false
361+
svg: false,
362+
zoom: false,
342363
})
343364
344365
</script>
@@ -484,6 +505,19 @@ const isInfo = ref({
484505
</div>
485506
</button>
486507

508+
<button tabindex="0" v-if="hasZoom" data-cy="user-options-fullscreen" class="vue-ui-user-options-button" @mouseenter="isInfo.zoom = true" @mouseout="isInfo.zoom = false" @click="toggleZoom()">
509+
<template v-if="$slots.optionZoom">
510+
<slot name="optionZoom" v-bind="{ toggleZoom, isZoomLocked: !isZoom }"/>
511+
</template>
512+
<template v-else>
513+
<BaseIcon v-if="isZoom" name="zoomUnlock" :stroke="color" style="pointer-events: none;"/>
514+
<BaseIcon v-if="!isZoom" name="zoomLock" :stroke="color" style="pointer-events: none;"/>
515+
</template>
516+
<div data-cy="uo-tooltip" dir="auto" v-if="isDesktop && titles.zoom" :class="{'button-info-left': position === 'left', 'button-info-right' : position === 'right', 'button-info-right-visible': position === 'right' && isInfo.zoom, 'button-info-left-visible': position === 'left' && isInfo.zoom }" :style="{ background: backgroundColor, color: color }">
517+
{{ titles.zoom }}
518+
</div>
519+
</button>
520+
487521
<button tabindex="0" v-if="hasAnimation" data-cy="user-options-anim" class="vue-ui-user-options-button" @mouseenter="isInfo.animation = true" @mouseout="isInfo.animation = false" @click="toggleAnimation">
488522
<template v-if="$slots.optionAnimation">
489523
<slot name="optionAnimation" v-bind="{ toggleAnimation, isAnimated }"/>

‎src/components/vue-data-ui.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,7 @@ const emit = defineEmits([
176176
'resetZoom',
177177
'showSeries',
178178
'hideSeries',
179+
'toggleZoom',
179180
]);
180181
181182
const isError = computed(() => !components[props.component]);
@@ -223,6 +224,7 @@ const autoSize = ref(() => null);
223224
const resetZoom = ref(() => null);
224225
const showSeries = ref(() => null);
225226
const hideSeries = ref(() => null);
227+
const toggleZoom = ref(() => null);
226228
227229
onMounted(() => {
228230
if (isError.value) {
@@ -328,6 +330,9 @@ watch(currentComponentRef, async (newRef) => {
328330
if (newRef.hideSeries) {
329331
hideSeries.value = newRef.hideSeries;
330332
}
333+
if (newRef.toggleZoom) {
334+
toggleZoom.value = newRef.toggleZoom;
335+
}
331336
}
332337
})
333338
@@ -365,7 +370,8 @@ const getEventHandlers = () => {
365370
'toggleTable',
366371
'resetZoom',
367372
'showSeries',
368-
'hideSeries'
373+
'hideSeries',
374+
'toggleZoom'
369375
];
370376
const handlers = {};
371377
eventNames.forEach(event => {
@@ -444,7 +450,8 @@ defineExpose({
444450
selectRibbon,
445451
resetZoom,
446452
showSeries,
447-
hideSeries
453+
hideSeries,
454+
toggleZoom
448455
});
449456
450457
const notSupported = computed(() => {

‎src/components/vue-ui-molecule.vue‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -206,6 +206,7 @@ watch(() => props.config, (_newCfg) => {
206206
// Reset mutable config
207207
mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
208208
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
209+
mutableConfig.value.showZoom = FINAL_CONFIG.value.style.chart.zoom.show;
209210
}, { deep: true });
210211
211212
const layoutEpoch = ref(0);
@@ -240,14 +241,16 @@ const customPalette = computed(() => {
240241
const mutableConfig = ref({
241242
showTable: FINAL_CONFIG.value.table.show,
242243
showDataLabels: true,
243-
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show
244+
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show,
245+
showZoom: FINAL_CONFIG.value.style.chart.zoom.show
244246
});
245247
246248
watch(FINAL_CONFIG, () => {
247249
mutableConfig.value = {
248250
showTable: FINAL_CONFIG.value.table.show,
249251
showDataLabels: true,
250-
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show
252+
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show,
253+
showZoom: FINAL_CONFIG.value.style.chart.zoom.show
251254
}
252255
}, { immediate: true });
253256
@@ -564,12 +567,16 @@ function toggleTooltip() {
564567
mutableConfig.value.showTooltip = !mutableConfig.value.showTooltip;
565568
}
566569
570+
function toggleZoom() {
571+
mutableConfig.value.showZoom = !mutableConfig.value.showZoom;
572+
}
573+
567574
const isAnnotator = ref(false);
568575
function toggleAnnotator() {
569576
isAnnotator.value = !isAnnotator.value;
570577
}
571578
572-
const active = computed(() => !isAnnotator.value)
579+
const active = computed(() => !isAnnotator.value && mutableConfig.value.showZoom)
573580
574581
const { viewBox, resetZoom, isZoom, setInitialViewBox } = usePanZoom(svgRef, {
575582
x: 0,
@@ -680,7 +687,8 @@ defineExpose({
680687
toggleLabels,
681688
toggleTooltip,
682689
toggleAnnotator,
683-
toggleFullscreen
690+
toggleFullscreen,
691+
toggleZoom
684692
});
685693
686694
</script>
@@ -696,7 +704,7 @@ defineExpose({
696704
>
697705

698706
<PenAndPaper
699-
v-if="FINAL_CONFIG.userOptions.buttons.annotator"
707+
v-if="FINAL_CONFIG.userOptions.buttons.annotator && !!svgRef"
700708
:svgRef="svgRef"
701709
:backgroundColor="FINAL_CONFIG.style.chart.backgroundColor"
702710
:color="FINAL_CONFIG.style.chart.color"
@@ -772,6 +780,8 @@ defineExpose({
772780
:callbacks="FINAL_CONFIG.userOptions.callbacks"
773781
:printScale="FINAL_CONFIG.userOptions.print.scale"
774782
:tableDialog="FINAL_CONFIG.table.useDialog"
783+
:hasZoom="FINAL_CONFIG.userOptions.buttons.zoom"
784+
:isZoom="mutableConfig.showZoom"
775785
@toggleFullscreen="toggleFullscreen"
776786
@generatePdf="generatePdf"
777787
@generateCsv="generateCsv"
@@ -781,6 +791,7 @@ defineExpose({
781791
@toggleLabels="toggleLabels"
782792
@toggleTooltip="toggleTooltip"
783793
@toggleAnnotator="toggleAnnotator"
794+
@toggleZoom="toggleZoom"
784795
:style="{
785796
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
786797
}"
@@ -815,6 +826,9 @@ defineExpose({
815826
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
816827
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
817828
</template>
829+
<template v-if="$slots.optionZoom" #optionZoom="{ toggleZoom, isZoomLocked }">
830+
<slot name="optionZoom" v-bind="{ toggleZoom , isZoomLocked }"/>
831+
</template>
818832
</UserOptions>
819833

820834
<svg

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

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,13 @@ const { loading, FINAL_DATASET, manualLoading } = useLoading({
9999
...toRefs(props),
100100
FINAL_CONFIG,
101101
prepareConfig,
102+
callback: () => {
103+
Promise.resolve().then(() => {
104+
mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
105+
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
106+
mutableConfig.value.showZoom = FINAL_CONFIG.value.style.chart.zoom.show;
107+
})
108+
},
102109
skeletonDataset: [
103110
{ name: "Lorem", value: 6 },
104111
{ name: "ipsum",value: 3 },
@@ -257,6 +264,7 @@ watch(() => props.config, (_newCfg) => {
257264
// Reset mutable config
258265
mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
259266
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
267+
mutableConfig.value.showZoom = FINAL_CONFIG.value.style.chart.zoom.show;
260268
}, { deep: true });
261269
262270
const svg = ref({
@@ -358,14 +366,14 @@ const { isPrinting, isImaging, generatePdf, generateImage } = usePrinter({
358366
const mutableConfig = ref({
359367
showTable: FINAL_CONFIG.value.table.show,
360368
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show,
369+
showZoom: FINAL_CONFIG.value.style.chart.zoom.show
361370
});
362371
363372
// v3 - Essential to make shifting between loading config and final config work
364373
watch(FINAL_CONFIG, () => {
365-
mutableConfig.value = {
366-
showTable: FINAL_CONFIG.value.table.show,
367-
showTooltip: FINAL_CONFIG.value.style.chart.tooltip.show,
368-
}
374+
mutableConfig.value.showTable = FINAL_CONFIG.value.table.show;
375+
mutableConfig.value.showTooltip = FINAL_CONFIG.value.style.chart.tooltip.show;
376+
mutableConfig.value.showZoom = FINAL_CONFIG.value.style.chart.zoom.show;
369377
}, { immediate: true });
370378
371379
function measureTextSize(text, fontSize, fontFamily = "Arial") {
@@ -547,7 +555,11 @@ function toggleAnnotator() {
547555
isAnnotator.value = !isAnnotator.value;
548556
}
549557
550-
const active = computed(() => !isAnnotator.value && FINAL_CONFIG.value.style.chart.zoom.show)
558+
function toggleZoom() {
559+
mutableConfig.value.showZoom = !mutableConfig.value.showZoom;
560+
}
561+
562+
const active = computed(() => !isAnnotator.value && mutableConfig.value.showZoom);
551563
552564
const { viewBox, resetZoom, isZoom, setInitialViewBox } = usePanZoom(svgRef, {
553565
x: 0,
@@ -660,7 +672,8 @@ defineExpose({
660672
toggleTable,
661673
toggleTooltip,
662674
toggleAnnotator,
663-
toggleFullscreen
675+
toggleFullscreen,
676+
toggleZoom
664677
});
665678
666679
const selectedWord = ref(null);
@@ -795,6 +808,8 @@ function useTooltip(word, index) {
795808
:callbacks="FINAL_CONFIG.userOptions.callbacks"
796809
:printScale="FINAL_CONFIG.userOptions.print.scale"
797810
:tableDialog="FINAL_CONFIG.table.useDialog"
811+
:hasZoom="FINAL_CONFIG.userOptions.buttons.zoom"
812+
:isZoom="mutableConfig.showZoom"
798813
@toggleFullscreen="toggleFullscreen"
799814
@generatePdf="generatePdf"
800815
@generateCsv="generateCsv"
@@ -803,6 +818,7 @@ function useTooltip(word, index) {
803818
@toggleTable="toggleTable"
804819
@toggleTooltip="toggleTooltip"
805820
@toggleAnnotator="toggleAnnotator"
821+
@toggleZoom="toggleZoom"
806822
:style="{
807823
visibility: keepUserOptionState ? userOptionsVisible ? 'visible' : 'hidden' : 'visible'
808824
}"
@@ -831,6 +847,9 @@ function useTooltip(word, index) {
831847
<template v-if="$slots.optionAnnotator" #optionAnnotator="{ toggleAnnotator, isAnnotator }">
832848
<slot name="optionAnnotator" v-bind="{ toggleAnnotator, isAnnotator }" />
833849
</template>
850+
<template v-if="$slots.optionZoom" #optionZoom="{ toggleZoom, isZoomLocked }">
851+
<slot name="optionZoom" v-bind="{ toggleZoom , isZoomLocked }"/>
852+
</template>
834853
</UserOptions>
835854

836855
<svg

0 commit comments

Comments
 (0)