尝试修复 bug, 找到原因: user-pivot.vue 的闭包似乎共用了变量,尝试将闭包函数的变量全部放入js中

This commit is contained in:
锦恢 2024-08-31 18:44:50 +08:00
parent 6d250c2b67
commit 2953ea46c6
4 changed files with 51 additions and 9 deletions

View File

@ -3,8 +3,10 @@
<!-- <TimeScale></TimeScale> --> <!-- <TimeScale></TimeScale> -->
<div <div
class="vcd-render-wrapper" class="vcd-render-wrapper"
@mousedown="onRenderClick()" @mousedown="onMousedown()"
@mouseup="onMouseup()"
@mouseenter="onEnter()" @mouseenter="onEnter()"
@mouseleave="onLeave()"
:ref="el => pivotWrapper = el" :ref="el => pivotWrapper = el"
> >
<Pivot <Pivot
@ -42,19 +44,29 @@ defineComponent({ name: 'main-render' });
/** /**
* @description 渲染区域被鼠标点击时 * @description 渲染区域被鼠标点击时
*/ */
function onRenderClick() { function onMousedown() {
updateWireCurrentValue(); updateWireCurrentValue();
changeCursorLocation(); changeCursorLocation();
//
for (const id of UserPivotCtxShows.keys()) { for (const id of UserPivotCtxShows.keys()) {
UserPivotCtxShows.set(id, false); UserPivotCtxShows.set(id, false);
} }
} }
function onMouseup() {
}
function onEnter() { function onEnter() {
MovingPivot.show = true; MovingPivot.show = true;
MovingPivot.currentTakenPivot = undefined; MovingPivot.currentTakenPivot = undefined;
} }
function onLeave() {
MovingPivot.show = false;
}
const pivotWrapper = ref(null); const pivotWrapper = ref(null);
onMounted(() => { onMounted(() => {

View File

@ -73,8 +73,6 @@ function onMousemove(event) {
// //
MovingPivot.show = false; MovingPivot.show = false;
MovingPivot.currentTakenPivot = userPivot; MovingPivot.currentTakenPivot = userPivot;
} else {
MovingPivot.show = true;
} }
} }
} }

View File

@ -3,7 +3,6 @@
v-if="renderPivot" v-if="renderPivot"
@mouseenter="onEnter()" @mouseenter="onEnter()"
@mouseleave="onLeave()" @mouseleave="onLeave()"
@mouseup="onVLineMouseup()"
@contextmenu.prevent="handleUserContextMenu($event)" @contextmenu.prevent="handleUserContextMenu($event)"
class="user-pivot" class="user-pivot"
> >
@ -20,7 +19,6 @@
:style="colorStyle" :style="colorStyle"
:ref="el => vline.element = el" :ref="el => vline.element = el"
@mousedown.stop="onVLineMousedown()" @mousedown.stop="onVLineMousedown()"
@mouseup.stop="onVLineMouseup()"
></div> ></div>
<div class="current-display-cursor-down"> <div class="current-display-cursor-down">
<div class="current-time-value" :style="colorStyle">{{ props.label }}</div> <div class="current-time-value" :style="colorStyle">{{ props.label }}</div>
@ -127,7 +125,8 @@ function onLeave() {
const vline = reactive({ const vline = reactive({
dragEnable: false, dragEnable: false,
element: undefined, element: undefined,
originTime: 0 originTime: 0,
delayTag: false,
}); });
@ -156,6 +155,11 @@ function onVLineMousedown() {
// console.log('begin to drag'); // console.log('begin to drag');
mousemoveEventPipes.set(pivot.id, event => { mousemoveEventPipes.set(pivot.id, event => {
if (vline.dragEnable === false || vline.delayTag === true) {
return;
}
console.log('move pivot', vline);
const x = event.clientX || event.x; const x = event.clientX || event.x;
pivot.x = x; pivot.x = x;
const pstate = globalLookup.pstate; const pstate = globalLookup.pstate;
@ -168,6 +172,16 @@ function onVLineMousedown() {
}); });
} }
document.onmouseup = () => {
vline.delayTag = true;
console.log('mouse up');
console.log(vline);
setTimeout(() => {
vline.delayTag = false;
}, 300);
onVLineMouseup();
}
function onVLineMouseup() { function onVLineMouseup() {
MovingPivot.dragEnable = false; MovingPivot.dragEnable = false;
mousemoveEventPipes.delete(props.id); mousemoveEventPipes.delete(props.id);

View File

@ -1,5 +1,8 @@
<template> <template>
<div class="toolbar-container"> <div
class="toolbar-container"
@mouseenter="onEnter()"
>
<div class="toolbar-body"> <div class="toolbar-body">
<CurrentStatus></CurrentStatus> <CurrentStatus></CurrentStatus>
&emsp; &emsp;
@ -16,16 +19,31 @@
</template> </template>
<script setup> <script setup>
import { defineComponent } from 'vue'; import { defineComponent, nextTick } from 'vue';
import CurrentStatus from './current-status.vue'; import CurrentStatus from './current-status.vue';
import SignalModal from './signal-modal.vue'; import SignalModal from './signal-modal.vue';
import SignalValueFormat from './signal-value-format.vue'; import SignalValueFormat from './signal-value-format.vue';
import CursorLocation from './cursor-location.vue'; import CursorLocation from './cursor-location.vue';
import ValueSearch from './value-search.vue'; import ValueSearch from './value-search.vue';
import { MovingPivot } from '../pivot/cursor';
defineComponent({ name: 'toolbar' }); defineComponent({ name: 'toolbar' });
function onEnter() {
console.log('enter');
MovingPivot.show = false;
console.log(MovingPivot.show);
nextTick(() => {
MovingPivot.show = false;
});
setTimeout(() => {
console.log(MovingPivot.show);
MovingPivot.show = false;
}, 20);
}
</script> </script>