完成 relative axis 实现

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>

src/components/pivot/relative-axis.js

@@ -1,6 +1,7 @@
 import { reactive } from "vue";
 
 export const RelativeAxis = reactive({
-    show: false
+    show: false,
+    currentPivotId: -1
 });
 

src/components/pivot/user-pivot.vue

@@ -225,8 +225,8 @@ 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(() => {