From 02e96853f3ec54a315cab9dcefabcaef7a4d2d05 Mon Sep 17 00:00:00 2001
From: artem <artem@webart-tech.ru>
Date: Sat, 26 Sep 2026 22:22:04 +0300
Subject: [PATCH] fix zoom

---
 .roo/memory-bank/activeContext.md             |  4 ++--
 .roo/memory-bank/progress.md                  | 14 ++++++++++++++
 src/pages/workouts/components/WorkoutItem.vue | 14 +++++++++++---
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/.roo/memory-bank/activeContext.md b/.roo/memory-bank/activeContext.md
index ce57cd9..1dd60c8 100644
--- a/.roo/memory-bank/activeContext.md
+++ b/.roo/memory-bank/activeContext.md
@@ -2,9 +2,9 @@
 
 ## Task State
 
-- task_id: TASK-INTEG-SECTION
+- task_id: TASK-SECTION-DIST-FIX
 - status: success
-- summary: **Playwright-интеграционный тест для TASK-SECTION-DURATION-ZOOM: 3 passed. Фиксы 2 багов (setChartRef timing + resetAll programmatic zoom).**
+- summary: **Добавлена строка «Дистанция» в «Данные участка» + drag-zoom теперь персистится при смене вкладки (selectedRange вместо null в onZoomComplete). 3 passed.**
 - next task: —
 
 ## ✅ CODER SUCCESS REPORT — TASK-INTEG-SECTION (+TASK-SECTION-BUGS)
diff --git a/.roo/memory-bank/progress.md b/.roo/memory-bank/progress.md
index 848c81a..628867d 100644
--- a/.roo/memory-bank/progress.md
+++ b/.roo/memory-bank/progress.md
@@ -1,5 +1,19 @@
 # Progress — Strava Frontend
 
+## 2026-09-26 — TASK-SECTION-DIST-FIX: строка «Дистанция» + drag-zoom персистится при смене вкладки
+
+- `src/pages/workouts/components/WorkoutItem.vue`:
+  - `computeAreaData`: добавлена строка `avgData["Дистанция"]` =
+    `distances[end-1] - distances[start]` (формат: >=1000 → "X.X км",
+    иначе "X м"). Расположена после «Продолжительность», перед циклом
+    по `chartConfigs`.
+  - `onZoomComplete`: `selectedRange.value = null` →
+    `selectedRange.value = { startIdx: start, endIdx: end }` — drag-zoom
+    теперь сохраняет диапазон индексов, и `applySelectedRangeZoom()`
+    (из `setChartRef` на remount) повторно применяет zoom после смены
+    вкладки.
+- Verified: `yarn build` exit 0; `npx playwright test tests/section-duration.spec.ts` → 3 passed.
+
 ## 2026-09-26 — TASK-INTEG-SECTION + TASK-SECTION-BUGS: интеграционный тест section-duration + фикс 2 багов
 
 - `../integration/tests/section-duration.spec.ts` (new): 3 Playwright-теста
diff --git a/src/pages/workouts/components/WorkoutItem.vue b/src/pages/workouts/components/WorkoutItem.vue
index 472348d..94870e3 100644
--- a/src/pages/workouts/components/WorkoutItem.vue
+++ b/src/pages/workouts/components/WorkoutItem.vue
@@ -605,6 +605,14 @@ const computeAreaData = (start: number, end: number) => {
     ),
   );
   avgData["Продолжительность"] = secondsToDuration(durSec);
+  const distMeters = Math.max(
+    0,
+    Math.round(Number(distances[end - 1]) - Number(distances[start])),
+  );
+  avgData["Дистанция"] =
+    distMeters >= 1000
+      ? (distMeters / 1000).toFixed(1) + " км"
+      : distMeters + " м";
   for (const config of chartConfigs.value) {
     const values = config.data.datasets[0].data.slice(start, end);
     const present = values.filter((v) => v !== null);
@@ -918,8 +926,8 @@ const buildChartOptions = (
                 }
               }
             }
-            // A manual zoom ends any earlier section selection.
-            selectedRange.value = null;
+            // Store the zoomed range so it persists across tab switches.
+            selectedRange.value = { startIdx: start, endIdx: end };
             computeAreaData(start, end);
             group.broadcastZoom(min, max);
           },
@@ -1120,7 +1128,6 @@ const chartConfigs = computed<Array<ChartConfig>>(() => {
     "linearAxis",
     yScaleById.linearAxis.options,
   );
-  push("power", "Мощность", data.power, "logAxis", yScaleById.logAxis.options);
   push(
     "elevation",
     "Подъем",
@@ -1128,6 +1135,7 @@ const chartConfigs = computed<Array<ChartConfig>>(() => {
     "yGroung",
     yScaleById.yGroung.options,
   );
+  push("power", "Мощность", data.power, "logAxis", yScaleById.logAxis.options);
   return configs;
 });
 const collectCharts = () => {