优化 pivot 体验

This commit is contained in:
锦恢 2024-09-04 11:33:40 +08:00
parent ce90f9df4b
commit 0f8859c922
2 changed files with 10 additions and 5 deletions

View File

@ -20,7 +20,7 @@
<PivotView /> <PivotView />
<transition name="main-fade"> <transition name="main-fade">
<MovingPivotVue <MovingPivotVue
v-show="MovingPivot.show" v-show="MovingPivot.show && !MovingPivot.dragEnable"
/> />
</transition> </transition>
@ -52,7 +52,7 @@ function onMousedown() {
updateWireCurrentValue(); updateWireCurrentValue();
changeCursorLocation(); changeCursorLocation();
console.log('enter'); console.log(MovingPivot);
// //
for (const id of UserPivotCtxShows.keys()) { for (const id of UserPivotCtxShows.keys()) {

View File

@ -5,6 +5,7 @@
@mouseleave="onLeave()" @mouseleave="onLeave()"
@contextmenu.prevent="handleUserContextMenu($event)" @contextmenu.prevent="handleUserContextMenu($event)"
class="user-pivot" class="user-pivot"
:style="userPivotStyle"
> >
<div <div
class="vertical-cursor-wrapper" class="vertical-cursor-wrapper"
@ -102,12 +103,16 @@ const props = defineProps({
const currentColor = computed(() => { const currentColor = computed(() => {
if (props.id === currentPivotId.value) { if (props.id === currentPivotId.value) {
const rgbColor = parseColor(props.color); const rgbColor = parseColor(props.color);
const brighterColor = increaseBrightness(rgbColor, 10); const brighterColor = increaseBrightness(rgbColor, 20);
return `rgb(${brighterColor.r}, ${brighterColor.g}, ${brighterColor.b})`; return `rgb(${brighterColor.r}, ${brighterColor.g}, ${brighterColor.b})`;
} }
return props.color; return props.color;
}); });
const userPivotStyle = computed(() => ({
cursor: vline.dragEnable ? 'ew-resize': 'pointer'
}));
const colorStyle = computed(() => ({ const colorStyle = computed(() => ({
backgroundColor: currentColor.value backgroundColor: currentColor.value
})); }));
@ -198,8 +203,8 @@ function onVLineMouseup() {
currentPivotId.value = 0; currentPivotId.value = 0;
vline.originTime = 0; vline.originTime = 0;
vline.dragEnable = false; vline.dragEnable = false;
MovingPivot.currentTakenPivot = pivot; // MovingPivot.currentTakenPivot = pivot;
MovingPivot.show = false; // MovingPivot.show = false;
} }
const contextmenu = reactive({ const contextmenu = reactive({