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

save

Browse Source
This commit is contained in:
锦恢 2024-07-29 16:53:48 +08:00
parent ae4368b4bb
commit ef31523aee
11 changed files with 6477 additions and 2357 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2359
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -15,17 +15,15 @@
"onml": "^2.1.0",
"stream": "^0.0.2",
"vue": "^3.2.13",
"vue-draggable-plus": "^0.5.2",
"vue-i18n": "^9.9.1",
"w3c-keyname": "^2.2.8",
"waveql": "^1.8.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint-plugin-vue": "^8.0.3",
"ignore-loader": "^0.1.2",
"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0"

2
src/App.vue
View File

@ -24,7 +24,7 @@ import { emitter, globalLookup, globalSetting } from '@/hook/global';
import { makeWaveView } from '@/hook/render';
import { getCrossOriginWorkerURL } from '@/hook/network';
import Sidebar from '@/components/sidebar.vue';
import Sidebar from '@/components/sidebar';
import RightNav from '@/components/right-nav.vue';
import MainRender from '@/components/render';

114
src/components/sidebar.vue → src/components/sidebar/index.vue
View File

@ -3,29 +3,44 @@
<div class="display-signal-wrapper" :style="sideBarWrapperStyle">
<div class="display-signal-container" :style="sidedBarContainerStyle">
<div :style="timeScaleStyle"></div>
<div class="display-signal-item"
:style="sideBarItemStyle"
v-for="(signal, index) in globalLookup.currentWires" :key="index">
<div class="signal-color-vendor">
<span :class="makeSignalIconClass(signal)"></span>
</div>
<div class="signal-info">
<div class="signal-info">
<el-tooltip
effect="dark"
:content="makeFullSignalNameDeps(signal)"
placement="top"
raw-content
>
<div class="signal-info-name">
<span class="signal-parent-info" v-show="showParent">{{ signal.parent.name }}</span>
<span>{{ signal.name }}</span>
</div>
</el-tooltip>
<VueDraggable
v-model="globalLookup.currentWires"
:animation="150"
ghost-class="signal-drag-ghost"
>
<!-- <div v-for="item in testList" :key="item.id">
{{ item.name }}
</div> -->
<div
class="display-signal-item-container"
:style="sideBarItemStyle"
v-for="(signal, index) in globalLookup.currentWires"
:key="signal.link"
>
<div class="display-signal-item">
<div class="signal-color-vendor">
<span :class="makeSignalIconClass(signal)"></span>
</div>
<div class="signal-info-width" v-show="showWidth">
<div :class="signal.size > 1 ? 'signal-info-caption' : ''">
{{ makeSignalCaption(signal) }}
<div class="signal-info">
<div class="signal-info">
<el-tooltip
effect="dark"
:content="makeFullSignalNameDeps(signal)"
placement="top"
raw-content
>
<div class="signal-info-name">
<span class="signal-parent-info" v-show="showParent">{{ signal.parent.name }}</span>
<span>{{ signal.name }}</span>
</div>
</el-tooltip>
<div class="signal-info-width" v-show="showWidth">
<div :class="signal.size > 1 ? 'signal-info-caption' : ''">
{{ makeSignalCaption(signal) }}
</div>
</div>
</div>
</div>
</div>
@ -40,10 +55,8 @@
{{ globalLookup.currentSignalValues[signal.link] }}
</div></el-tooltip>
</div>
</div>
</div>
</VueDraggable>
</div>
</div>
<div class="add-signal-button" @click="addSignal">
@ -53,14 +66,35 @@
</template>
<script setup>
import { reactive, computed, defineComponent } from 'vue';
import { reactive, computed, defineComponent, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { VueDraggable } from 'vue-draggable-plus';
import { emitter, globalLookup, globalSetting, globalStyle } from '@/hook/global';
import { makeIconClass } from '@/hook/utils';
const { t } = useI18n();
defineComponent({ name: 'side-bar' });
const testList = ref([
{
name: 'Joao',
id: 1
},
{
name: 'Jean',
id: 2
},
{
name: 'Johanna',
id: 3
},
{
name: 'Juan',
id: 4
}]);
const showWidth = computed(() => globalSetting.displaySignalInfoScope.includes('width'));
const showParent = computed(() => globalSetting.displaySignalInfoScope.includes('parent'));
@ -118,6 +152,7 @@ function makeFullSignalNameDeps(signal) {
return htmlString;
}
</script>
<style>
@ -146,7 +181,7 @@ function makeFullSignalNameDeps(signal) {
.display-signal-wrapper {
background-color: var(--sidebar);
border: solid 1px var(--sidebar-border);
min-width: var(--sidebar-width);
width: var(--sidebar-width);
height: calc(100vh - 90px);
box-shadow: 0 0 15px 1px rgb(16, 16, 16);
overflow: hidden;
@ -157,9 +192,16 @@ function makeFullSignalNameDeps(signal) {
background-color: var(--background);
height: var(--display-signal-info-height);
display: flex;
width: 200px;
cursor: pointer;
}
.display-signal-item-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.display-signal-item::selection {
background-color: none;
}
@ -210,18 +252,22 @@ function makeFullSignalNameDeps(signal) {
.signal-info-caption {
width: fit-content;
color: var(--sidebar-item-text);
color: var(--background);
border-radius: .5em;
background-color: #7CA532;
padding: 5px;
font-size: 16px;
padding: 3px;
font-size: 0.8rem;
}
.signal-info-current-value-wrapper {
margin-left: 10px;
width: 60px;
width: 50px;
border-radius: .5em;
background-color: var(--background);
height: var(--display-signal-info-height);
display: flex;
justify-content: space-around;
justify-content: center;
align-items: center;
}
.signal-info-current-value {
@ -248,4 +294,8 @@ function makeFullSignalNameDeps(signal) {
text-overflow: ellipsis;
}
.signal-drag-ghost {
opacity: 0.5;
background: #c8ebfb;
}
</style>

29
src/components/toolbar/index.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="toolbar-container">
<div class="toolbar-body">
<div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style>
.toolbar-container {
position: fixed;
bottom: 10px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.toolbar-body {
}
</style>

4
src/components/treeview/index.vue
View File

@ -5,7 +5,7 @@
<br>
<div class="vcd-module-wrapper">
<div class="vcd-module-info">
<div>{{ t('module') }}</div>
<div class="vcd-signal-title">{{ t('module') }}</div>
<hr>
<div class="vcd-module-display-wrapper">
<Modules v-for="mod of props.topModules"
@ -60,7 +60,7 @@ export default {
}
.vcd-module-wires {
width: 300px;
width: 220px;
}
.vcd-module-display-wrapper {

15
src/components/treeview/signals.vue
View File

@ -7,7 +7,7 @@
@click="toggleRender(signal)"
class="vcd-signal-signal-item"
:class="globalLookup.currentWires.has(signal) ? 'vcd-treeview-selected' : ''">
<div><span :class="`iconfont ${makeIconClass(signal)}`"></span>&ensp;{{ signal.name }}</div>
<div class="vcd-signal-signal-item-text"><span :class="`iconfont ${makeIconClass(signal)}`"></span>&ensp;{{ signal.name }}</div>
<div>
<div :class="signal.size > 1 ? 'vcd-signal-signal-caption' : ''">
{{ makeSignalCaption(signal) }}
@ -127,4 +127,17 @@ export default {
padding: 3px;
font-size: 12px;
}
.vcd-signal-signal-item-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 200px;
}
.vcd-signal-signal-item-text:hover {
overflow: unset;
text-overflow: unset;
}
</style>

3
src/hook/global.js
View File

@ -15,6 +15,7 @@ const globalLookup = reactive({
currentSignalValues: {},
// 当前 ns 数（或者 ps）
currentTime: 0,
@ -86,7 +87,7 @@ const globalSetting = reactive({
language: 'zh',
caseSensitivity: false,
displayParentOnly: false,
displaySignalHeight: 50,
displaySignalHeight: 30,
searchMode: 'so', // so, mo, sm
searchScope: ['wire', 'reg', 'integer'],
displaySignalInfoScope: ['width'],

4
src/hook/wave-view/render-utils.js
View File

@ -63,7 +63,7 @@ const gl_Shifts = new Float32Array([ // 14
// 为了满足 vec 类型的波形的开头和结尾的那个小小的内嵌的、不受scale影响的值
// 第一列 Y 第二列 X 在所有计算完成后的额外偏移量
const barShift = 0.005;
const barShift = 0.004;
const gl_Shifts_for_bar = new Float32Array([
0, 0, // 0
@ -81,7 +81,7 @@ gl_Shifts_map.set(0, 0);
gl_Shifts_map.set(1, 1);
const lineWidth = 0.004 * 3800 / screenWidthPixel; // 不能写为 0.0045 这样会因为插值造成不同线段的宽度不一致的问题
const widthShift = lineWidth / 2;
const widthShift = 0.002;
const gl_WidthShifts = new Float32Array([
0, widthShift, // 0
- widthShift, widthShift, // 1

9
src/hook/wave-view/x-offset-update.js
View File

@ -8,9 +8,12 @@ const xOffsetUpdate = (pstate, nextOffsetXFn) => {
const minOffsetX = - width - xScale * time * 1.2; // minimum offset
nextOffsetX = Math.max(nextOffsetX, minOffsetX);
// console.log('max offset', maxOffsetX);
// console.log('min offset', minOffsetX);
// console.log('next offset', nextOffsetX);
// 检测 0 是否超出了左侧的 --sidebar-width 的位置
// 参考公式 xx = Math.round((xCursor - xOffset) / xScale) * tgcd; 带入 xx = 0
if (nextOffsetX >= sidebarWidth) {
nextOffsetX = sidebarWidth - 20;
}
if (nextOffsetX === xOffset) {
return false; // exit without scroll

6285
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff