kirigaya/digital-vcd-render
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成信标功能

Browse Source
This commit is contained in:
锦恢 2024-08-31 00:53:59 +08:00
parent 47e9e57c80
commit 6d250c2b67
8 changed files with 105 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/pivot/cursor.js
View File

@ -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;

13
src/components/pivot/index.vue
View File

@ -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 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() {

2
src/components/pivot/moving-pivot.vue
View File

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

5
src/components/pivot/pivot-view.js
View File

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

1
src/components/pivot/pivot-view.vue
View File

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

17
src/components/pivot/user-context-menu.js
View File

@ -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;
}

76
src/components/pivot/user-context-menu.vue
View File

@ -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>

95
src/components/pivot/user-pivot.vue
View File

@ -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>