Fix - Prevented click event propagations

Author: graphieros

src/atoms/BaseDirectionPad.vue

@@ -16,19 +16,19 @@ const emit = defineEmits(['moveLeft', 'moveTop', 'moveRight', 'moveBottom', 'res
 <template>
     <div :style="`position: ${isFullscreen ? 'fixed' : 'absolute'};bottom:0;right:${isFullscreen ? '12px' : '0'};width:80px;height:80px`" data-html2canvas-ignore>
         <div style="position: relative;height:100%;width:100%">           
-            <button @click="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
+            <button @click.stop="emit('moveLeft')" style="position: absolute;left:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="arrowLeft" style="cursor: pointer"/>
             </button>
-            <button @click="emit('moveTop')" style="position: absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
+            <button @click.stop="emit('moveTop')" style="position: absolute;top:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="arrowTop" style="cursor: pointer"/>
             </button>
-            <button @click="emit('moveRight')" style="position: absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
+            <button @click.stop="emit('moveRight')" style="position: absolute;right:0;top:50%;transform:translateY(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="arrowRight" style="cursor: pointer"/>
             </button>
-            <button @click="emit('moveBottom')" style="position: absolute;bottom:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
+            <button @click.stop="emit('moveBottom')" style="position: absolute;bottom:0;left:50%;transform:translateX(-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="arrowBottom" style="cursor: pointer"/>
             </button>
-            <button @click="emit('reset')" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
+            <button @click.stop="emit('reset')" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:24px;width:24px;padding:0;background:transparent;border:none;display:flex;align-items:center;justify-content:center;">
                 <BaseIcon :stroke="color" name="close" style="cursor: pointer" :strokeWidth="2"/>
             </button>
         </div>

src/atoms/RecursiveCircles.vue

@@ -10,7 +10,7 @@
                     :stroke="hoveredUid && hoveredUid === node.uid ? strokeHovered : stroke" 
                     :stroke-width="hoveredUid && hoveredUid === node.uid ? node.circleRadius / 6 : node.circleRadius / 12" 
                     style="cursor:pointer"
-                    @click="zoom(node)" 
+                    @click.stop="zoom(node)" 
                     @mouseover="hover(node)" 
                     @mouseleave="hover(null)" 
                 />

src/components/vue-ui-molecule.vue

@@ -539,7 +539,7 @@ defineExpose({
 
         <svg :xmlns="XMLNS" v-if="isDataset" data-cy="cluster-svg" :viewBox="dynamicViewBox"
             :class="{ 'vue-data-ui-fullscreen--on': isFullscreen, 'vue-data-ui-fulscreen--off': !isFullscreen }"
-            :style="`overflow: hidden; background:${moleculeConfig.style.chart.backgroundColor};color:${moleculeConfig.style.chart.color}`" @click="unzoom($event)">
+            :style="`overflow: hidden; background:${moleculeConfig.style.chart.backgroundColor};color:${moleculeConfig.style.chart.color}`" @click.stop="unzoom($event)">
 
             <defs>
                 <radialGradient v-for="color in Object.keys(gradientIds)" :id="`gradient_${color}`" cx="50%" cy="30%" r="50%" fx="50%" fy="50%">