143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<template>
|
|
<div class="module">
|
|
<div @click="clickItem()" class="vcd-treeview-item"
|
|
:class="module === globalLookup.currentModule ? 'vcd-treeview-selected' : ''">
|
|
<span class="module-tag-status" @click.stop="expandManage.click">
|
|
<div :class="expandManage.expandTagClass"></div>
|
|
</span>
|
|
<span :class="`iconfont ${makeIconClass(module)}`"></span>
|
|
 {{ module.name }}
|
|
</div>
|
|
|
|
<div v-if="mods.length > 0" v-show="expandManage.expanded" class="vcd-subtree-wrapper">
|
|
<div style="width: 20px;"></div>
|
|
<div style="width: 100%;">
|
|
<modules
|
|
v-for="(child, index) in mods"
|
|
:module="child"
|
|
:key="index"
|
|
></modules>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
import { reactive, onMounted } from 'vue';
|
|
import { emitter, globalLookup } from '@/hook/global';
|
|
import { isScope, isVariable, makeIconClass } from '@/hook/utils';
|
|
|
|
export default {
|
|
name: "modules",
|
|
props: {
|
|
module: Object
|
|
},
|
|
setup(props) {
|
|
const module = props.module;
|
|
globalLookup.initcurrentModule(module);
|
|
|
|
const signals = [];
|
|
const mods = [];
|
|
|
|
for (const wire of module.body) {
|
|
if (isScope(wire)) {
|
|
mods.push(wire);
|
|
} else if (isVariable(wire)) {
|
|
signals.push(wire);
|
|
}
|
|
}
|
|
|
|
function clickItem() {
|
|
emitter.emit('tree-view', signals);
|
|
// color change into selected
|
|
globalLookup.currentModule = module;
|
|
console.log(module);
|
|
}
|
|
|
|
const expandManage = reactive({
|
|
expanded: true,
|
|
expandTagClass: mods.length === 0 ? '' : 'expand-tag',
|
|
click() {
|
|
this.expanded = !this.expanded;
|
|
if (this.expandTagClass) {
|
|
this.expandTagClass = this.expanded ? 'expand-tag' : 'collapse-tag';
|
|
}
|
|
}
|
|
});
|
|
|
|
return {
|
|
module,
|
|
mods,
|
|
clickItem,
|
|
expandManage,
|
|
globalLookup,
|
|
makeIconClass
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.icon-memory-chip {
|
|
color: #FF7043;
|
|
}
|
|
|
|
.module {
|
|
text-align: left;
|
|
}
|
|
|
|
.vcd-subtree-wrapper {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.vcd-treeview-item {
|
|
color: var(--sidebar-item-text);
|
|
cursor: pointer;
|
|
height: 27px;
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.vcd-treeview-item::selection {
|
|
background: none;
|
|
}
|
|
|
|
.vcd-treeview-item:hover {
|
|
background-color: var(--sidebar-item-selected);
|
|
border-radius: .3em;
|
|
}
|
|
|
|
.vcd-treeview-selected {
|
|
background-color: var(--button-active) !important;
|
|
border-radius: .3em;
|
|
}
|
|
|
|
.module-tag-status {
|
|
width: 25px;
|
|
height: 25px;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
display: flex;
|
|
}
|
|
|
|
.expand-tag {
|
|
height: 7px;
|
|
width: 7px;
|
|
border-top: solid 1.7px var(--sidebar-item-text);
|
|
border-left: solid 1.7px var(--sidebar-item-text);
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.collapse-tag {
|
|
height: 7px;
|
|
width: 7px;
|
|
border-top: solid 1.7px var(--sidebar-item-text);
|
|
border-left: solid 1.7px var(--sidebar-item-text);
|
|
transform: rotate(135deg);
|
|
}
|
|
</style>
|