From 6d250c2b6797d4a1791542bb3df5d09c5b7ff4c6 Mon Sep 17 00:00:00 2001 From: Kirigaya <1193466151@qq.com> Date: Sat, 31 Aug 2024 00:53:59 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BF=A1=E6=A0=87=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/pivot/cursor.js | 4 +- src/components/pivot/index.vue | 13 ++- src/components/pivot/moving-pivot.vue | 2 + src/components/pivot/pivot-view.js | 5 ++ src/components/pivot/pivot-view.vue | 1 + src/components/pivot/user-context-menu.js | 17 ---- src/components/pivot/user-context-menu.vue | 76 ----------------- src/components/pivot/user-pivot.vue | 95 ++++++++++++++++++++-- 8 files changed, 105 insertions(+), 108 deletions(-) delete mode 100644 src/components/pivot/user-context-menu.js delete mode 100644 src/components/pivot/user-context-menu.vue diff --git a/src/components/pivot/cursor.js b/src/components/pivot/cursor.js index f49e923..37d4dec 100644 --- a/src/components/pivot/cursor.js +++ b/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; diff --git a/src/components/pivot/index.vue b/src/components/pivot/index.vue index 15c698b..4a390d9 100644 --- a/src/components/pivot/index.vue +++ b/src/components/pivot/index.vue @@ -21,11 +21,6 @@ /> - - - @@ -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 UserContextMenu from './user-context-menu.vue'; +import { UserPivotCtxShows } from './pivot-view'; 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() { diff --git a/src/components/pivot/moving-pivot.vue b/src/components/pivot/moving-pivot.vue index ab87bfd..eae3e78 100644 --- a/src/components/pivot/moving-pivot.vue +++ b/src/components/pivot/moving-pivot.vue @@ -73,6 +73,8 @@ function onMousemove(event) { // 此时距离用户信标比较近，隐藏主信标 MovingPivot.show = false; MovingPivot.currentTakenPivot = userPivot; + } else { + MovingPivot.show = true; } } } diff --git a/src/components/pivot/pivot-view.js b/src/components/pivot/pivot-view.js index f9fd09a..2909835 100644 --- a/src/components/pivot/pivot-view.js +++ b/src/components/pivot/pivot-view.js @@ -136,3 +136,8 @@ export function getNearestUserPivot(time) { } return UserPivots.get(nextT); } + +/** + * @type {Map} + */ +export const UserPivotCtxShows = reactive(new Map()); diff --git a/src/components/pivot/pivot-view.vue b/src/components/pivot/pivot-view.vue index db85156..65583db 100644 --- a/src/components/pivot/pivot-view.vue +++ b/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" /> diff --git a/src/components/pivot/user-context-menu.js b/src/components/pivot/user-context-menu.js deleted file mode 100644 index 2874e3b..0000000 --- a/src/components/pivot/user-context-menu.js +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/pivot/user-context-menu.vue b/src/components/pivot/user-context-menu.vue deleted file mode 100644 index 31afa5b..0000000 --- a/src/components/pivot/user-context-menu.vue +++ /dev/null @@ -1,76 +0,0 @@ - - - - - \ No newline at end of file diff --git a/src/components/pivot/user-pivot.vue b/src/components/pivot/user-pivot.vue index 0d9691d..b3b69a8 100644 --- a/src/components/pivot/user-pivot.vue +++ b/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 @@
+ + + +
+
+
+ + {{ t('pivot.context.delete') }} +
+
+ + {{ t('pivot.context.display-axis') }} +
+
+
+ + @@ -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); +}); + \ No newline at end of file