微调

src/components/pivot/moving-pivot.vue

@@ -9,7 +9,7 @@
                 <div class="cursor-down-arrow" :style="borderStyle"></div>
             </div>
             <div class="vertical-line" :style="verticalLineStyle"></div>
-            <div class="current-display-cursor-down">
+            <div class="current-display-cursor-down" v-show="!RelativeAxis.show">
                 <div class="current-time-value" :style="colorStyle">{{ MovingPivot.label }}</div>
                 <div class="cursor-up-arrow" :style="borderStyle"></div>
             </div>
@@ -24,6 +24,8 @@ import { computed, defineComponent, ref, onMounted } from 'vue';
 import { time2cursorX, MovingPivot, cursorX2time } from './cursor';
 import formatTime from '@/hook/wave-view/format-time';
 import { getNearestUserPivot, UserPivots } from './pivot-view';
+import { RelativeAxis } from './relative-axis';
+
 
 defineComponent({ name: 'user-pivot' });
 const element = ref(null);

src/components/pivot/named-axis-item.vue

@@ -0,0 +1,99 @@
+<template>
+    <div
+        class="axis-item"
+        :style="itemStyle"
+    >
+        <span>
+            <span
+                class="label-container"
+                :style="containerStyle"
+            >
+                {{ makeDiffLabel() }}
+            </span>
+        </span>
+    </div>
+</template>
+
+<script setup>
+import { computed, defineComponent } from 'vue';
+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, MovingPivot, SystemPivot } from './cursor';
+
+
+
+defineComponent({ name: 'named-axis-item' });
+
+const props = defineProps({
+    type: {
+        type: String
+    }
+});
+
+const containerStyle = computed(() => ({
+    backgroundColor: getPivot().color,
+    left: (props.type === 'moving') ? '23px' : '25px'
+}));
+
+const itemStyle = computed(() => ({
+    left: getPivot().left - boxShift + 'px',
+    
+}));
+
+function getPivot() {
+    switch (props.type) {
+        case 'system':
+            return SystemPivot;
+            break;
+        case 'moving':
+            return MovingPivot;
+            break;
+        default:
+            return SystemPivot;
+            break;
+        }
+}
+
+function makeDiffLabel() {
+    if (RelativeAxis.show) {
+        const currentPivotId = RelativeAxis.currentPivotId;
+        const currentPivot = Id2Pivot.get(currentPivotId);
+        if (currentPivot) {
+            const t1 = cursorX2time(currentPivot.x);
+            const pivot = getPivot();
+            const t2 = cursorX2time(pivot.left);
+            const relativeTime = t2 - t1;
+            return formatTime(relativeTime, globalLookup.timescale);
+        }
+    }
+
+    return '?';
+}
+
+</script>
+
+<style scoped>
+.axis-item {
+    position: absolute;
+    height: 30px;
+    bottom: 0;
+    font-size: 1.0rem;
+    color: var(--sidebar);
+    font-family: var(--vcd-value-font-family);
+}
+
+.axis-item span {
+    position: relative;
+}
+
+.label-container {
+    position: absolute;
+    top: -23px;
+    color: var(--sidebar);
+    border-radius: 0 .3em 0 0;
+    padding: 5px;
+}
+
+</style>

src/components/pivot/relative-axis.vue

@@ -9,6 +9,12 @@
             :key="pivotId"
             :pivot="Id2Pivot.get(pivotId)"
         />
+        <NamedAxisItem
+            type="system"
+        />
+        <NamedAxisItem
+            type="moving"
+        />
     </div>
 </template>
 
@@ -17,6 +23,7 @@ import { computed, defineComponent, onMounted } from 'vue';
 import { RelativeAxis } from './relative-axis';
 import { boxShift, Id2Pivot, UserPivotColor, VisibleUserPivotIds } from './pivot-view';
 import AxisItem from './axis-item.vue';
+import NamedAxisItem from './named-axis-item.vue';
 
 defineComponent({ name: 'relative-axis' });
 

src/components/pivot/user-pivot.vue

@@ -238,6 +238,8 @@ function cancelRelativeAxis() {
     }
 
     RelativeAxis.show = false;
+    currentPivotId.value = 0;
+    UserPivotCtxShows.set(props.id, false);
 }
 
 onMounted(() => {