From ee882a53db64e1f8a3d8ab81f700475b3ec047fe Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Mon, 2 Sep 2024 15:30:58 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=20relative=20axis=20?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pivot/axis-item.vue    | 23 +++++++++++++++++++++--
 src/components/pivot/relative-axis.js |  3 ++-
 src/components/pivot/user-pivot.vue   |  8 +++++---
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/components/pivot/axis-item.vue b/src/components/pivot/axis-item.vue
index bddf0c2..6f81e8b 100644
--- a/src/components/pivot/axis-item.vue
+++ b/src/components/pivot/axis-item.vue
@@ -3,13 +3,17 @@
         class="axis-item"
         :style="itemStyle"
     >
-        <span>{{ props.pivot.label }}</span>
+        <span>{{ makeDiffLabel() }}</span>
     </div>
 </template>
 
 <script setup>
 import { computed, defineComponent } from 'vue';
-import { boxShift } from './pivot-view';
+import { boxShift, Id2Pivot } from './pivot-view';
+import { globalLookup } from '@/hook/global';
+import { RelativeAxis } from './relative-axis';
+import formatTime from '@/hook/wave-view/format-time';
+import { cursorX2time } from './cursor';
 
 
 defineComponent({ name: 'axis-item' });
@@ -24,6 +28,21 @@ const itemStyle = computed(() => ({
     left: props.pivot.x - boxShift + 'px'
 }));
 
+function makeDiffLabel() {
+    if (RelativeAxis.show) {
+        const currentPivotId = RelativeAxis.currentPivotId;
+        const currentPivot = Id2Pivot.get(currentPivotId);
+        if (currentPivot) {
+            const t1 = cursorX2time(currentPivot.x);
+            const t2 = cursorX2time(props.pivot.x);
+            const relativeTime = t2 - t1;
+            return formatTime(relativeTime, globalLookup.timescale);
+        }
+    }
+
+    return '?';
+}
+
 </script>
 
 <style scoped>
diff --git a/src/components/pivot/relative-axis.js b/src/components/pivot/relative-axis.js
index 38429ed..f05343f 100644
--- a/src/components/pivot/relative-axis.js
+++ b/src/components/pivot/relative-axis.js
@@ -1,6 +1,7 @@
 import { reactive } from "vue";
 
 export const RelativeAxis = reactive({
-    show: false
+    show: false,
+    currentPivotId: -1
 });
 
diff --git a/src/components/pivot/user-pivot.vue b/src/components/pivot/user-pivot.vue
index c9c47ed..a6ca3e3 100644
--- a/src/components/pivot/user-pivot.vue
+++ b/src/components/pivot/user-pivot.vue
@@ -225,9 +225,9 @@ function handleUserContextMenu(event) {
 
 
 function displayRelativeAxis() {
-
-
-
+    RelativeAxis.currentPivotId = props.id;
+    RelativeAxis.show = true;
+    
     currentPivotId.value = 0;
     UserPivotCtxShows.delete(props.id);
 }
@@ -236,6 +236,8 @@ function cancelRelativeAxis() {
     if (RelativeAxis.show === false) {
         return;
     }
+
+    RelativeAxis.show = false;
 }
 
 onMounted(() => {