94 lines
2.3 KiB
Vue
94 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div>Signals({{wires.content.length}})</div>
|
|
<hr>
|
|
<div class="vcd-signal-wires-display">
|
|
<div v-for="(wire, index) in wires.content" :key="index"
|
|
@click="clickItem(wire)"
|
|
class="vcd-signal-wire-item"
|
|
:class="globalLookup.currentWires.has(wire) ? 'vcd-treeview-selected' : ''">
|
|
<div><span class="iconfont icon-wave-square"></span> {{ wire.name }}</div>
|
|
<div>
|
|
<div :class="wire.caption ? 'vcd-signal-wire-caption' : ''">
|
|
{{ wire.caption }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { reactive } from 'vue';
|
|
import { emitter, globalLookup } from '@/hook/global';
|
|
|
|
/* eslint-disable */
|
|
export default {
|
|
name: 'wires',
|
|
props: {},
|
|
setup() {
|
|
// wire : link, name, size, type
|
|
const wires = reactive({
|
|
content: []
|
|
});
|
|
|
|
emitter.on('tree-view', sendWires => {
|
|
wires.content.length = 0;
|
|
for (const wire of sendWires) {
|
|
const caption = wire.size === 1 ? '' : `${wire.size - 1}:0`;
|
|
wires.content.push({
|
|
name: wire.name,
|
|
caption
|
|
});
|
|
}
|
|
});
|
|
|
|
function clickItem(wire) {
|
|
if (globalLookup.currentWires.has(wire)) {
|
|
globalLookup.currentWires.delete(wire);
|
|
} else {
|
|
globalLookup.currentWires.add(wire);
|
|
}
|
|
}
|
|
|
|
return {
|
|
wires,
|
|
clickItem,
|
|
globalLookup
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.icon-wave-square {
|
|
color: #00F600;
|
|
}
|
|
|
|
.vcd-signal-wires-display {
|
|
color: var(--sidebar-item-text);
|
|
padding: 0px 8px;
|
|
}
|
|
|
|
.vcd-signal-wire-item {
|
|
margin: 3px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
height: 25px;
|
|
cursor: pointer;
|
|
align-items: center;
|
|
}
|
|
|
|
.vcd-signal-wire-item:hover {
|
|
background-color: var(--vscode-button-hoverBackground);
|
|
border-radius: .3em;
|
|
}
|
|
|
|
.vcd-signal-wire-caption {
|
|
color: var(--sidebar-item-text);
|
|
border-radius: .5em;
|
|
background-color: var(--color-deepPurple);
|
|
padding: 3px;
|
|
font-size: 15px;
|
|
}
|
|
</style> |