完成信标功能

src/components/pivot/cursor.js

@@ -13,6 +13,8 @@ export const MovingPivot = reactive({
     currentTime: 0,
     show: true,
 
+    enterUserPivot: false,
+
     /**
      * @type {import('./pivot-view').UserPivot | undefined}
      */
@@ -38,7 +40,7 @@ export const SystemPivot = reactive({
  * @description 左击改变系统信标的位置
  */
 export function changeCursorLocation() {
-    if (MovingPivot.dragEnable) {
+    if (MovingPivot.dragEnable || !MovingPivot.show) {
         return;
     }
     SystemPivot.show = true;

src/components/pivot/index.vue

@@ -21,11 +21,6 @@
             />
         </transition>
 
-        <transition name="collapse-from-top">
-            <UserContextMenu
-                v-show="pivotcontextmenu.show"
-            />
-        </transition>
     </div>
 </template>
 
@@ -39,8 +34,7 @@ import PivotView from './pivot-view.vue';
 import Pivot from '@/components/pivot/system-pivot.vue';
 import { globalLookup } from '@/hook/global';
 import MovingPivotVue from './moving-pivot.vue';
-import { pivotcontextmenu } from './user-context-menu';
+import { UserPivotCtxShows } from './pivot-view';
-import UserContextMenu from './user-context-menu.vue';
 
 
 defineComponent({ name: 'main-render' });
@@ -48,9 +42,12 @@ defineComponent({ name: 'main-render' });
 /**
  * @description 渲染区域被鼠标点击时
  */
-function onRenderClick() {
+function onRenderClick() {    
     updateWireCurrentValue();
     changeCursorLocation();
+    for (const id of UserPivotCtxShows.keys()) {
+        UserPivotCtxShows.set(id, false);
+    }
 }
 
 function onEnter() {

src/components/pivot/moving-pivot.vue

@@ -73,6 +73,8 @@ function onMousemove(event) {
             // 此时距离用户信标比较近，隐藏主信标
             MovingPivot.show = false;
             MovingPivot.currentTakenPivot = userPivot;
+        } else {
+            MovingPivot.show = true;
         }
     }
 }

src/components/pivot/pivot-view.js

@@ -136,3 +136,8 @@ export function getNearestUserPivot(time) {
     }
     return UserPivots.get(nextT);
 }
+
+/**
+ * @type {Map<number, boolean>}
+ */
+export const UserPivotCtxShows = reactive(new Map());

src/components/pivot/pivot-view.vue

@@ -9,6 +9,7 @@
             :label="pivot[1].label"
             :x="pivot[1].x"
             :time="pivot[1].time"
+            :id="pivot[1].id"
         />
     </div>
 </template>

src/components/pivot/user-context-menu.js

@@ -1,17 +0,0 @@
-import { reactive } from "vue";
-import { getNearestUserPivot } from "./pivot-view";
-import { globalLookup } from "@/hook/global";
-
-
-export const pivotcontextmenu = reactive({
-    show: false,
-    x: 0,
-    y: 0
-});
-
-export function handleUserContextMenu(event) {
-    const x = event.x;
-    pivotcontextmenu.x = event.x;
-    pivotcontextmenu.y = event.y;
-    pivotcontextmenu.show = true;
-}

src/components/pivot/user-context-menu.vue

@@ -1,76 +0,0 @@
-<template>
-    <div
-        class="user-context-menu"
-        :style="contextStyle"
-    >
-        <div class="menu-container">
-            <div
-                class="menu-item-container"
-                @click="deleteUserPivot()"
-            >
-                <span class="menu-item-icon iconfont icon-delete"></span>
-                <span class="menu-item-name">{{ t('pivot.context.delete') }}</span>
-            </div>
-            <div
-                class="menu-item-container"
-                @click="displayRelativeAxis()"
-            >
-                <span class="menu-item-icon iconfont icon-axis"></span>
-                <span class="menu-item-name">{{ t('pivot.context.display-axis') }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { computed, defineComponent } from 'vue';
-import { MovingPivot } from './cursor';
-import { useI18n } from 'vue-i18n';
-import { pivotcontextmenu } from './user-context-menu';
-import { globalLookup } from '@/hook/global';
-import { getNearestUserPivot, orderedTimes, searchOrderedTimeIndex, UserPivots } from './pivot-view';
-
-defineComponent({ name: 'user-context-menu' });
-
-const { t } = useI18n();
-
-const contextStyle = computed(() => ({
-    top: pivotcontextmenu.y + ' px',
-    left: pivotcontextmenu.x + 20 + 'px'
-}));
-
-function deleteUserPivot() {
-    const x = pivotcontextmenu.x;
-    const pstate = globalLookup.pstate;
-    if (pstate) {
-        const { xOffset, xScale, tgcd } = pstate;
-        const currentTime = Math.round((x - xOffset) / xScale) * tgcd;
-        const pivot = getNearestUserPivot(currentTime);
-        if (pivot) {
-            const i = searchOrderedTimeIndex(pivot.time);
-            orderedTimes.splice(i, 1);
-            UserPivots.delete(pivot.time);
-            pivotcontextmenu.show = false;
-        }
-    }
-}
-
-function displayRelativeAxis() {
-
-}
-
-</script>
-
-<style scoped>
-
-.user-context-menu {
-    z-index: 200;
-    border-radius: .5em;
-    padding: 10px;
-    position: fixed;
-    box-shadow: 0 0 10px 1px rgb(16, 16, 16);
-    background-color: var(--sidebar);
-    border: solid 1px var(--sidebar-border);
-}
-
-</style>

src/components/pivot/user-pivot.vue

@@ -3,6 +3,7 @@
         v-if="renderPivot" 
         @mouseenter="onEnter()"
         @mouseleave="onLeave()"
+        @mouseup="onVLineMouseup()"
         @contextmenu.prevent="handleUserContextMenu($event)"
         class="user-pivot"
     >
@@ -26,6 +27,33 @@
                 <div class="cursor-up-arrow" :style="borderStyle"></div>
             </div>
         </div>
+
+        <teleport to='body'>
+            <transition name="collapse-from-top">
+                <div
+                    v-show="UserPivotCtxShows.get(props.id)"
+                    class="user-context-menu"
+                    :style="contextStyle"
+                >
+                    <div class="menu-container">
+                        <div
+                            class="menu-item-container"
+                            @click="deleteUserPivot()"
+                        >
+                            <span class="menu-item-icon iconfont icon-delete"></span>
+                            <span class="menu-item-name">{{ t('pivot.context.delete') }}</span>
+                        </div>
+                        <div
+                            class="menu-item-container"
+                            @click="displayRelativeAxis()"
+                        >
+                            <span class="menu-item-icon iconfont icon-axis"></span>
+                            <span class="menu-item-name">{{ t('pivot.context.display-axis') }}</span>
+                        </div>
+                    </div>
+                </div>
+            </transition>
+        </teleport>
     </div>
 </template>
 
@@ -34,12 +62,15 @@ import { globalLookup } from '@/hook/global';
 import { eventHandler, registerWheelEvent } from '@/hook/wave-view';
 import { computed, defineComponent, ref, onMounted, reactive, nextTick } from 'vue';
 import { calcCursorLeft, mousemoveEventPipes, MovingPivot } from './cursor';
-import { orderedTimes, searchOrderedTimeIndex, UserPivots } from './pivot-view';
+import { getNearestUserPivot, orderedTimes, searchOrderedTimeIndex, UserPivotCtxShows, UserPivots } from './pivot-view';
 import formatTime from '@/hook/wave-view/format-time';
-import { handleUserContextMenu } from './user-context-menu';
+import { useI18n } from 'vue-i18n';
+// import { handleUserContextMenu } from './user-context-menu';
 
 defineComponent({ name: 'user-pivot' });
 
+const { t } = useI18n();
+
 const props = defineProps({
     color: {
         type: String,
@@ -53,6 +84,9 @@ const props = defineProps({
     },
     time: {
         type: Number
+    },
+    id: {
+        type: Number
     }
 });
 
@@ -81,11 +115,13 @@ const renderPivot = computed(() => {
 
 
 function onEnter() {
+    MovingPivot.enterUserPivot = true;
 }
 
 function onLeave() {
     MovingPivot.show = true;
     MovingPivot.currentTakenPivot = undefined;
+    MovingPivot.enterUserPivot = false;
 }
 
 const vline = reactive({
@@ -116,8 +152,8 @@ function onVLineMousedown() {
         orderedTimes.splice(i, 1);
     }
 
-    // 开启拖拽
+    // // 开启拖拽
-    console.log('begin to drag');
+    // console.log('begin to drag');
 
     mousemoveEventPipes.set(pivot.id, event => {
         const x = event.clientX || event.x;
@@ -133,6 +169,9 @@ function onVLineMousedown() {
 }
 
 function onVLineMouseup() {
+    MovingPivot.dragEnable = false;
+    mousemoveEventPipes.delete(props.id);
+
     const div = vline.element;
     if (!(div instanceof HTMLElement)) {
         return;
@@ -140,7 +179,6 @@ function onVLineMouseup() {
     const pivot = UserPivots.get(vline.originTime);
     
     if (pivot) {
-        mousemoveEventPipes.delete(pivot.id);
         UserPivots.delete(vline.originTime);
         UserPivots.set(pivot.time, pivot);
         orderedTimes.push(pivot.time);
@@ -151,9 +189,44 @@ function onVLineMouseup() {
     vline.dragEnable = false;
     MovingPivot.currentTakenPivot = pivot;
     MovingPivot.show = false;
-    MovingPivot.dragEnable = false;
 }
 
+const contextmenu = reactive({
+    show: false,
+    x: 0,
+    y: 0,
+});
+
+const contextStyle = computed(() => ({
+    top: contextmenu.y + 'px',
+    left: contextmenu.x + 20 + 'px'
+}));
+
+function handleUserContextMenu(event) {    
+    contextmenu.x = event.x;
+    contextmenu.y = event.y;
+    for (const id of UserPivotCtxShows.keys()) {
+        UserPivotCtxShows.set(id, false);
+    }
+    UserPivotCtxShows.set(props.id, true);
+}
+
+function deleteUserPivot() {
+    const i = searchOrderedTimeIndex(props.time);
+    orderedTimes.splice(i, 1);
+    UserPivots.delete(props.time);
+    contextmenu.show = false;
+    UserPivotCtxShows.delete(props.id);
+}
+
+function displayRelativeAxis() {
+
+}
+
+onMounted(() => {
+    UserPivotCtxShows.set(props.id, false);
+});
+
 </script>
 
 <style scoped>
@@ -229,4 +302,14 @@ function onVLineMouseup() {
     left: 17.93px;
     top: 0;
 }
+
+.user-context-menu {
+    z-index: 200;
+    border-radius: .5em;
+    padding: 10px;
+    position: fixed;
+    box-shadow: 0 0 10px 1px rgb(16, 16, 16);
+    background-color: var(--sidebar);
+    border: solid 1px var(--sidebar-border);
+}
 </style>