144 lines
3.6 KiB
Vue
144 lines
3.6 KiB
Vue
<template>
|
|
<div class="time-scale-up-wrapper">
|
|
|
|
</div>
|
|
|
|
<div class="time-scale-wrapper" :style="`left: ${currentX}px; width: ${300}px;`">
|
|
<div class="current-display-cursor-up">
|
|
<div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
|
|
<div class="time-scale-down"></div>
|
|
</div>
|
|
<div class="time-scale-line"></div>
|
|
<div class="current-display-cursor-down">
|
|
<div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
|
|
<div class="time-scale-up"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="time-scale-down-wrapper">
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted, reactive } from 'vue';
|
|
import { globalLookup, emitter } from '@/hook/global';
|
|
import { handleTimeScale } from '@/hook/utils';
|
|
import { wheelScale } from '@/hook/wheel';
|
|
|
|
export default {
|
|
name: 'time-scale',
|
|
|
|
setup() {
|
|
// see --sidebar-width
|
|
const left = 280 + 20;
|
|
|
|
// see --right-nav-width
|
|
const right = document.body.clientWidth - 60;
|
|
|
|
const timeScaleManage = reactive({
|
|
scale: 1,
|
|
unit: 'ns'
|
|
});
|
|
|
|
// 此时有关波形的元信息已经加载完毕
|
|
emitter.on('meta-ready', () => {
|
|
// const { scale, unit } = handleTimeScale(globalLookup.timescale);
|
|
// timeScaleManage.scale = scale;
|
|
// timeScaleManage.unit = unit;
|
|
|
|
// console.log(timeScaleManage.unit);
|
|
|
|
// const viewInfo = globalLookup.view;
|
|
});
|
|
|
|
// document.addEventListener('wheel', event => {
|
|
// if ((event.wheelDelta && event.ctrlKey) || event.detail) {
|
|
// event.preventDefault();
|
|
// }
|
|
|
|
// if (event.ctrlKey) {
|
|
// // console.log(event.wheelDelta);
|
|
// wheelScale(event);
|
|
// } else if (event.shiftKey) {
|
|
// // console.log(event.wheelDelta);
|
|
// console.log('deltaX', event.deltaX);
|
|
// console.log('deltaY', event.deltaY);
|
|
// }
|
|
// }, { capture: false, passive: false });
|
|
|
|
|
|
const currentX = 300;
|
|
|
|
return {
|
|
currentX,
|
|
timeScaleManage
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.time-scale-up-wrapper {
|
|
position: absolute;
|
|
top: 0;
|
|
left: calc(var(--sidebar-width) + 20px);
|
|
width: calc(100vw - var(--sidebar-width) - var(--right-nav-width) - 20px);
|
|
height: var(--time-scale-height);
|
|
background-color: var(--sidebar);
|
|
z-index: 50;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.time-scale-down-wrapper {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: calc(100vw - var(--right-nav-width));
|
|
height: var(--time-scale-height);
|
|
background-color: var(--sidebar);
|
|
z-index: 50;
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.time-scale-down {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 1px;
|
|
height: 10px;
|
|
border: 1px solid var(--scrollbar-hover);
|
|
background-color: var(--scrollbar-hover);
|
|
}
|
|
|
|
.time-scale-up {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 10px;
|
|
border: 1px solid var(--scrollbar-hover);
|
|
background-color: var(--scrollbar-hover);
|
|
}
|
|
|
|
.time-scale-wrapper {
|
|
position: absolute;
|
|
height: 100vh;
|
|
padding: 0;
|
|
top: 0;
|
|
cursor: crosshair;
|
|
z-index: 55;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* 沿着横轴（水平方向）对齐 */
|
|
justify-content: center;
|
|
/* 沿着纵轴（垂直方向）对齐 */
|
|
}
|
|
|
|
.time-scale-value {}
|
|
|
|
.time-scale-line {
|
|
width: 1px;
|
|
background-color: var(--scrollbar-hover);
|
|
height: calc(100vh - 2 * var(--time-scale-height));
|
|
}
|
|
</style> |