149 lines
5.2 KiB
Vue
149 lines
5.2 KiB
Vue
<template>
|
||
<!-- 上方的 toolbar -->
|
||
<ToolBar></ToolBar>
|
||
|
||
<!-- 主渲染区 -->
|
||
<MainRender></MainRender>
|
||
|
||
<!-- 左上角的 sidebar，用于显示 -->
|
||
<Sidebar></Sidebar>
|
||
|
||
<!-- 显示当前信号树形关系 -->
|
||
<!-- 右侧工具合集 -->
|
||
<RightNav :topModules="VcdInfo.topModules"></RightNav>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onMounted, reactive, watch } from 'vue';
|
||
import { useI18n } from 'vue-i18n';
|
||
|
||
import { ElLoading } from 'element-plus';
|
||
|
||
import { emitter, globalLookup, globalSetting } from '@/hook/global';
|
||
import { makeWaveView } from '@/hook/render';
|
||
import { getCrossOriginWorkerURL } from '@/hook/network';
|
||
|
||
|
||
import ToolBar from '@/components/toolbar';
|
||
import Sidebar from '@/components/sidebar';
|
||
import RightNav from '@/components/right-nav.vue';
|
||
import MainRender from '@/components/render';
|
||
|
||
const { t } = useI18n();
|
||
|
||
// 监听 globalSetting 并录入 localStorage
|
||
watch(
|
||
() => globalSetting,
|
||
() => {
|
||
localStorage.setItem('setting', JSON.stringify(globalSetting));
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
const VcdInfo = reactive({
|
||
topModules: [],
|
||
values: [],
|
||
});
|
||
|
||
onMounted(async () => {
|
||
const loading = new ElLoading.service({
|
||
lock: true,
|
||
text: t('loading'),
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
});
|
||
// 改变默认颜色
|
||
document.body.style.setProperty('--el-color-primary', 'var(--main-color)');
|
||
document.body.style.setProperty('--el-color-primary-light-9', 'var(--main-color)');
|
||
document.body.style.setProperty('--el-color-primary-light-3', 'var(--main-color)');
|
||
document.body.style.setProperty('--el-text-color-secondary', 'var(--foreground)');
|
||
document.body.style.setProperty('--el-text-color-regular', 'var(--foreground)');
|
||
document.body.style.setProperty('--el-border-color', 'var(--vscode-focusBorder)');
|
||
document.body.style.setProperty('--el-fill-color-blank', 'var(--sidebar)');
|
||
document.body.style.setProperty('--el-fill-color-light', 'var(--vscode-button-hoverBackground)');
|
||
document.body.style.setProperty('--el-switch-on-color', 'var(--main-color)');
|
||
document.body.style.setProperty('--el-border', 'var(--sidebar)');
|
||
document.body.style.setProperty('--el-border-color-light', 'var(--sidebar)');
|
||
document.body.style.setProperty('--el-border-color-lighter', 'var(--sidebar)');
|
||
document.body.style.setProperty('--el-bg-color-overlay', 'var(--sidebar)');
|
||
document.body.style.setProperty('--el-color-info-light-9', 'var(--vscode-focusBorder)');
|
||
document.body.style.setProperty('--el-color-info', 'var(--foreground)');
|
||
document.body.style.setProperty('--el-color-info-light-8', 'var(--vscode-focusBorder)');
|
||
// document.body.style.setProperty('--el-color-white', 'var(--background)');
|
||
|
||
// 设置全局宏
|
||
document.body.style.setProperty('--time-scale-height', '50px');
|
||
document.body.style.setProperty('--vcd-render-padding', '30px');
|
||
document.body.style.setProperty('--sidebar-width', '230px');
|
||
document.body.style.setProperty('--toolbar-height', '60px');
|
||
|
||
// signal height
|
||
document.body.style.setProperty('--display-signal-info-height', globalSetting.displaySignalHeight + 'px');
|
||
|
||
// 初始化 localStorage （如果没有的话）
|
||
if (!localStorage.getItem('setting')) {
|
||
localStorage.setItem('setting', JSON.stringify(globalSetting));
|
||
}
|
||
|
||
// 初始化载入 vcd 文件
|
||
const arrayBuffer = await window.readVcdFile();
|
||
const url = await getCrossOriginWorkerURL(window.workerPath);
|
||
const worker = new Worker(url, {
|
||
name: 'vcd-stream',
|
||
type: 'classic'
|
||
});
|
||
|
||
worker.postMessage({ arrayBuffer, workerRoot: window.workerRoot }, [arrayBuffer]);
|
||
|
||
worker.addEventListener('message', event => {
|
||
const workerVars = event.data;
|
||
const vcdInfo = workerVars.vcdInfo;
|
||
const signalValues = workerVars.signalValues;
|
||
|
||
for (const topModule of vcdInfo.wires.body) {
|
||
VcdInfo.topModules.push(topModule);
|
||
}
|
||
|
||
globalLookup.status = vcdInfo.status;
|
||
globalLookup.version = vcdInfo.version;
|
||
globalLookup.timescale = vcdInfo.timescale;
|
||
globalLookup.date = vcdInfo.date;
|
||
globalLookup.t0 = vcdInfo.t0 || 0;
|
||
|
||
globalLookup.tgcd = workerVars.tgcd;
|
||
globalLookup.time = workerVars.time;
|
||
globalLookup.chango = signalValues;
|
||
makeWaveView();
|
||
|
||
// console.log(signalValues['*']);
|
||
|
||
// console.log('duration time', globalLookup.time);
|
||
emitter.emit('meta-ready', null);
|
||
|
||
// 这一步时，已经加载完成
|
||
// 默认第一个模块被选中
|
||
if (VcdInfo.topModules.length > 0) {
|
||
const defaultMod = VcdInfo.topModules[0];
|
||
const wires = defaultMod.body.filter(mod => mod.link);
|
||
emitter.emit('tree-view', wires);
|
||
// 将顶层模块存储进全局对象，以便后续的搜索服务
|
||
for (const mod of VcdInfo.topModules) {
|
||
globalLookup.topModules.push(mod);
|
||
}
|
||
}
|
||
loading.close();
|
||
worker.terminate();
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
<style>
|
||
#app {
|
||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|
||
|
||
|
||
</style>
|