VueUiQuadrant fixed janky animation on side zoom

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "2.1.12",
+  "version": "2.1.13",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -2749,6 +2749,7 @@ const radarConfig = ref({
 const quadrantConfig = ref({
   style: {
     chart: {
+      backgroundColor: '#1A1A1A',
       title: {
         text: "Title",
         subtitle: {
@@ -4507,7 +4508,7 @@ const cursorConfig = ref({
         </template>
       </Box>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
+      <Box open @copy="copyConfig(PROD_CONFIG.vue_ui_quadrant)">
         <template #title>
           <BaseIcon name="chartQuadrant" />
           VueUiQuadrant

src/App.vue

@@ -205,7 +205,7 @@ const waveScale = computed(() => {
                 style="font-variant-numeric: tabular-nums"
                 font-family="Arial"
             >
-                {{ position.x }}
+                {{ position.x.toFixed(0) }}
             </text>
             <g :transform="`translate(${50 - (cursorConfig.coordinatesFontSize / 2) + cursorConfig.coordinatesOffset}, ${-cursorConfig.centerCircleRadius + 50 - (cursorConfig.coordinatesFontSize / 2) + cursorConfig.coordinatesOffset})`">
                 <text
@@ -216,7 +216,7 @@ const waveScale = computed(() => {
                     transform="rotate(-90)"
                     font-family="Arial"
                 >
-                    {{ position.y }}
+                    {{ position.y.toFixed(0) }}
                 </text>
             </g>
         </g>

src/components/vue-ui-cursor.vue

@@ -273,12 +273,6 @@ function selectQuadrantSide(side) {
         }
         isZoom.value = true
     }
-    // if(isZoom.value && selectedSide.value === side) {
-    //     selectedSide.value = null;
-    //     isZoom.value = false;
-    // } else {
-    //     isZoom.value = true;
-    // }
 }
 
 const graduations = computed(() => {
@@ -1184,30 +1178,30 @@ defineExpose({
             </template>
 
             <!-- HIDDEN AREAS ON ZOOM -->
-            <g v-if="isZoom">
+            <g v-if="isZoom" class="vue-ui-dna">
                 <polygon 
                     v-if="selectedSide === 'TL'"
                     :points="`${svg.left},${svg.centerY} ${svg.centerX},${svg.centerY} ${svg.centerX},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.centerY}`"
                     :fill="quadrantConfig.style.chart.backgroundColor"
-                    style="opacity:0.95"
+                    style="opacity:1"
                 />
                 <polygon 
                     v-if="selectedSide === 'TR'"
                     :points="`${svg.left},${svg.top} ${svg.centerX},${svg.top} ${svg.centerX},${svg.centerY} ${svg.right},${svg.centerY} ${svg.right},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.top}`"
                     :fill="quadrantConfig.style.chart.backgroundColor"
-                    style="opacity:0.95"
+                    style="opacity:1"
                 />
                 <polygon 
                     v-if="selectedSide === 'BR'"
                     :points="`${svg.left},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.centerY} ${svg.centerX},${svg.centerY} ${svg.centerX},${svg.bottom} ${svg.left},${svg.bottom} ${svg.left},${svg.top}`"
                     :fill="quadrantConfig.style.chart.backgroundColor"
-                    style="opacity:0.95"
+                    style="opacity:1"
                 />
                 <polygon 
                     v-if="selectedSide === 'BL'"
                     :points="`${svg.left},${svg.top} ${svg.right},${svg.top} ${svg.right},${svg.bottom} ${svg.centerX},${svg.bottom} ${svg.centerX},${svg.centerY} ${svg.left},${svg.centerY} ${svg.left},${svg.top}`"
                     :fill="quadrantConfig.style.chart.backgroundColor"
-                    style="opacity:0.95"
+                    style="opacity:1"
                 />
             </g>