Improvement - Add zoom drag optional feature

Author: graphieros

src/components/vue-ui-candlestick.vue

@@ -874,6 +874,8 @@ defineExpose({
                 v-model:end="slicer.end"
                 :refreshStartPoint="FINAL_CONFIG.style.zoom.startIndex !== null ? FINAL_CONFIG.style.zoom.startIndex : 0"
                 :refreshEndPoint="FINAL_CONFIG.style.zoom.endIndex !== null ? FINAL_CONFIG.style.zoom.endIndex + 1 : len"
+                :enableRangeHandles="FINAL_CONFIG.style.zoom.enableRangeHandles"
+                :enableSelectionDrag="FINAL_CONFIG.style.zoom.enableSelectionDrag"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">

src/components/vue-ui-dashboard.vue

@@ -48,7 +48,7 @@ const isPaused = ref(false);
 
 function handleInteraction(event) {
     const target = event.target;
-    if (target.tagName === "INPUT" && target.type === "range") {
+    if ((target.tagName === "INPUT" && target.type === "range") || target.classList.contains('range-handle')) {
         isPaused.value = true;
     }
 }

src/components/vue-ui-donut-evolution.vue

@@ -1061,6 +1061,8 @@ defineExpose({
             v-model:end="slicer.end"
             :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
             :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : maxLength"
+            :enableRangeHandles="FINAL_CONFIG.style.chart.zoom.enableRangeHandles"
+            :enableSelectionDrag="FINAL_CONFIG.style.chart.zoom.enableSelectionDrag"
             @reset="refreshSlicer"
         >
             <template #reset-action="{ reset }">

src/components/vue-ui-quick-chart.vue

@@ -1696,6 +1696,8 @@ defineExpose({
                 v-model:end="slicer.end"
                 :refreshStartPoint="FINAL_CONFIG.zoomStartIndex !== null ? FINAL_CONFIG.zoomStartIndex : 0"
                 :refreshEndPoint="FINAL_CONFIG.zoomEndIndex !== null ? FINAL_CONFIG.zoomEndIndex + 1 : formattedDataset.maxSeriesLength"
+                :enableRangeHandles="FINAL_CONFIG.zoomEnableRangeHandles"
+                :enableSelectionDrag="FINAL_CONFIG.zoomEnableSelectionDrag"
                 @reset="refreshSlicer"
                 @trapMouse="setCommonSelectedIndex"
             >

src/components/vue-ui-stackbar.vue

@@ -1375,6 +1375,8 @@ defineExpose({
                 v-model:end="slicer.end"
                 :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
                 :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : Math.max(...dataset.map(ds => ds.series.length))"
+                :enableRangeHandles="FINAL_CONFIG.style.chart.zoom.enableRangeHandles"
+                :enableSelectionDrag="FINAL_CONFIG.style.chart.zoom.enableSelectionDrag"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">

src/components/vue-ui-xy-canvas.vue

@@ -1594,6 +1594,8 @@ defineExpose({
                 v-model:end="slicer.end"
                 :refreshStartPoint="FINAL_CONFIG.style.chart.zoom.startIndex !== null ? FINAL_CONFIG.style.chart.zoom.startIndex : 0"
                 :refreshEndPoint="FINAL_CONFIG.style.chart.zoom.endIndex !== null ? FINAL_CONFIG.style.chart.zoom.endIndex + 1 : maxSeries"
+                :enableRangeHandles="FINAL_CONFIG.style.chart.zoom.enableRangeHandles"
+                :enableSelectionDrag="FINAL_CONFIG.style.chart.zoom.enableSelectionDrag"
                 @reset="refreshSlicer"
             >
                 <template #reset-action="{ reset }">

src/components/vue-ui-xy.vue

@@ -1106,6 +1106,8 @@
             v-model:end="slicer.end"
             :refreshStartPoint="FINAL_CONFIG.chart.zoom.startIndex !== null ? FINAL_CONFIG.chart.zoom.startIndex : 0"
             :refreshEndPoint="FINAL_CONFIG.chart.zoom.endIndex !== null ? FINAL_CONFIG.chart.zoom.endIndex + 1 : Math.max(...dataset.map(datapoint => largestTriangleThreeBucketsArray({data:datapoint.series, threshold: FINAL_CONFIG.downsample.threshold}).length))"
+            :enableRangeHandles="FINAL_CONFIG.chart.zoom.enableRangeHandles"
+            :enableSelectionDrag="FINAL_CONFIG.chart.zoom.enableSelectionDrag"
             @reset="refreshSlicer"
             @trapMouse="selectMinimapIndex"
         >