points from map reflect on chart

src/pages/workouts/components/LineWithLineChart.ts

@@ -1,21 +1,55 @@
+import { Ref } from 'vue'
+
 import { createTypedChart } from 'vue-chartjs'
 import { LineController } from 'chart.js'
 
 const lineAlign = 8;
 
+
+type GetMapPlugin = {
+  mapX: Ref<Array<number>>;
+}
+
 class LineWithLineController extends LineController {
   static override id = 'line-with-line'
 
+  private getMapX(): Array<number> {
+    if (!this.chart.config.plugins) {
+      return [];
+    }
+    for (let i in this.chart.config.plugins) {
+      if (this.chart.config.plugins[i].id != "yandexMapLine") {
+        continue
+      }
+      // @ts-ignore
+      const pluginProps: GetMapPlugin = this.chart.config.plugins[i]; 
+      return pluginProps.mapX.value; 
+    }
+    return [];
+  }
+
   public override draw() {
     super.draw()
-    if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) {
     const ctx = this.chart.ctx;
+    const topY = this.chart.scales.y.top;
+    const bottomY = this.chart.scales.y.bottom;
+
+    const xVertical = this.getMapX();
+    for (let i in xVertical) {
+      ctx.save();
+      ctx.beginPath();
+      ctx.moveTo(xVertical[i], topY);
+      ctx.lineTo(xVertical[i], bottomY);
+      ctx.lineWidth = 3;
+      ctx.strokeStyle = '#666';
+      ctx.stroke();
+      ctx.restore();
+    }
+    if (this.chart?.tooltip && this.chart.tooltip.opacity > 0) {
       let x = this.chart.tooltip.x - lineAlign;
       if (this.chart.tooltip.xAlign === 'right') {
         x = this.chart.tooltip.x + this.chart.tooltip.width + lineAlign;
       }
-      const topY = this.chart.scales.y.top;
-      const bottomY = this.chart.scales.y.bottom;
 
       // draw line
       ctx.save();

src/pages/workouts/components/WorkoutItem.vue

@@ -18,9 +18,24 @@
                         stroke: [{ color: '#007afce6', width: 4 }],
                     },
                 }" />
+                <yandex-map-listener :settings="{ onClick: (_: any, e: any) => {
+                    const xIndex = coordWithIndex.get(getKey(e.coordinates[0], e.coordinates[1]));
+                    if (mapX.length >= 2 || xIndex == undefined) {
+                        mapX = [];
+                        clickCoordinates = [];
+                    }
+                    if (xIndex !== undefined) {
+                        clickCoordinates.push(e.coordinates);
+                        mapX.push(xIndex);
+                    } 
+                }}"/>
                 <yandex-map-default-marker v-if="currentCoordinates" :settings="{
                     coordinates: currentCoordinates,
                 }" />
+                <yandex-map-default-marker :settings="{
+                    coordinates: coord,
+                    color: 'gray',
+                }" v-for="coord in clickCoordinates"/>
             </yandex-map>
         </div>
         <div id="workout-short-data">
@@ -130,7 +145,7 @@ import {
 
 import LineWithLineChart from './LineWithLineChart.js'
 import type { YMap } from '@yandex/ymaps3-types';
-import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapDefaultMarker } from 'vue-yandex-maps';
+import { YandexMap, YandexMapDefaultSchemeLayer, YandexMapFeature, YandexMapDefaultFeaturesLayer, YandexMapMarker, YandexMapDefaultMarker, YandexMapListener, } from 'vue-yandex-maps';
 import { WorkoutItem, distConvert, speedConvert, formatTime, ChartData } from "../Definitions.vue";
 
 
@@ -145,12 +160,23 @@ interface Props {
   }
 const { workoutItem, data, mapCenter, lineCoordinates, dzenLink: dzenLinkProps } = defineProps<Props>()
 const dzenLink = ref(dzenLinkProps);
-
 const map = shallowRef<null | YMap>(null);
 const chart = ref();
+const mapX = ref<Array<number>>([]);
+const mapXPrev = ref<Array<number>>([]);
 let currentCoordinates = ref<Array<number> | null>([]);
+let clickCoordinates = ref<Array<number>>([]);
+let coordWithIndex: Map<string, number> = new Map();
 let showModalTitle = ref(false);
 const showModalLink = ref(false);
+const getKey = (x: number, y: number) => {
+    x = Math.round(x * 1000) / 1000;
+    y = Math.round(y * 1000) / 1000;
+    return `${x}-${y}`;
+}
+for (let i = 0; i < lineCoordinates.length; i++) {
+    coordWithIndex.set(getKey(lineCoordinates[i][0], lineCoordinates[i][1]), i);
+}
 ChartJS.register(
     Title,
     Tooltip,
@@ -181,6 +207,30 @@ const chartPlugins = [
         currentCoordinates.value = null;
       }
     }
+},
+{
+    id: 'yandexMapLine',
+    mapX: mapX,
+    beforeInit(chart: any, ) {
+      setInterval(() => {
+        let isEq = true
+        for (let i = 0; i < mapX.value.length; i++) {
+            if (mapXPrev.value[i] == mapX.value[i]) {
+                continue;
+            }
+            isEq = false;
+            break;
+        }
+        console.log(isEq, mapX.value, mapXPrev.value);
+        if (isEq) {
+            return;
+        }
+        chart.draw();
+        for (let i = 0; i < mapX.value.length; i++) {
+            mapXPrev.value[i] = mapX.value[i];
+        }
+      }, 300)
+    }
 }
 ];
 const chartOptions = {