change signals name

src/components/MenuBar.vue

@@ -1,23 +1,8 @@
 <script setup lang="ts">
-import {
-  SignalShowSettings,
-  SignalShowSchedule,
-  SignalShowStatistics,
-  SignalEditTopology,
-  SignalResetCamera
-} from '@/hooks/useStates'
+import { MenubarSignals } from '@/hooks/useStates'
 import { DataAnalysis, Edit, Camera, Operation } from '@element-plus/icons-vue'
 import IconCube from './icons/IconCube.vue'
-
-onKeyStroke('Escape', () => {
-  SignalShowSettings.value = !SignalShowSettings.value
-})
-
-import { onKeyStroke } from '@vueuse/core'
 import IconGithub from './icons/IconGithub.vue'
-onKeyStroke('`', () => {
-  SignalShowSchedule.value = !SignalShowSchedule.value
-})
 </script>
 
 <template>
@@ -34,7 +19,11 @@ onKeyStroke('`', () => {
       </el-col>
       <el-col :span="4">
         <el-tooltip effect="light" content="Network settings" :hide-after="0" placement="right-start">
-          <el-button class="btn" size="small" @click="SignalShowSettings = !SignalShowSettings">
+          <el-button
+            class="btn"
+            size="small"
+            @click="MenubarSignals.ShowSettings.value = !MenubarSignals.ShowSettings.value"
+          >
             <el-icon color="#aaa" size="20">
               <Operation />
             </el-icon>
@@ -43,7 +32,11 @@ onKeyStroke('`', () => {
       </el-col>
       <el-col :span="4">
         <el-tooltip effect="light" content="Resoure grid" :hide-after="0" placement="right-start">
-          <el-button class="btn" size="small" @click="SignalShowSchedule = !SignalShowSchedule">
+          <el-button
+            class="btn"
+            size="small"
+            @click="MenubarSignals.ShowSchedule.value = !MenubarSignals.ShowSchedule.value"
+          >
             <el-icon color="#aaa" size="18">
               <IconCube />
             </el-icon>
@@ -52,7 +45,11 @@ onKeyStroke('`', () => {
       </el-col>
       <el-col :span="4">
         <el-tooltip effect="light" content="Network statistics" :hide-after="0" placement="right-start">
-          <el-button class="btn" size="small" @click="SignalShowStatistics = !SignalShowStatistics">
+          <el-button
+            class="btn"
+            size="small"
+            @click="MenubarSignals.ShowNetworkStats.value = !MenubarSignals.ShowNetworkStats.value"
+          >
             <el-icon color="#aaa" size="20">
               <DataAnalysis />
             </el-icon>
@@ -61,7 +58,11 @@ onKeyStroke('`', () => {
       </el-col>
       <el-col :span="4">
         <el-tooltip effect="light" content="Edit topology" :hide-after="0" placement="right-start">
-          <el-button class="btn" size="small" @click="SignalEditTopology = !SignalEditTopology">
+          <el-button
+            class="btn"
+            size="small"
+            @click="MenubarSignals.ShowTopoEditToolbox.value = !MenubarSignals.ShowTopoEditToolbox.value"
+          >
             <el-icon color="#aaa" size="20">
               <Edit />
             </el-icon>
@@ -70,7 +71,7 @@ onKeyStroke('`', () => {
       </el-col>
       <el-col :span="4">
         <el-tooltip effect="light" content="Reset camera" :hide-after="0" placement="right-start">
-          <el-button class="btn" size="small" @click="SignalResetCamera++">
+          <el-button class="btn" size="small" @click="MenubarSignals.ResetCamera.value++">
             <el-icon color="#aaa" size="20">
               <Camera />
             </el-icon>

src/components/ScheduleTable.vue

@@ -1,17 +1,16 @@
 <script setup lang="ts">
+import { MenubarSignals } from '@/hooks/useStates'
 import { ref, onMounted } from 'vue'
 // import { useDrawSchedule3D } from '@/hooks/useDrawSchedule3D'
 
-import { SignalShowSchedule } from '@/hooks/useStates'
-
 const chartDom = ref()
 onMounted(() => {
   // useDrawSchedule3D(chartDom.value)
 })
 </script>
 
 <template>
-  <el-card class="card" v-show="SignalShowSchedule">
+  <el-card class="card" v-show="MenubarSignals.ShowSchedule.value">
     <div class="chart" ref="chartDom"></div>
   </el-card>
 </template>

src/components/SettingsPanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watch } from 'vue'
-import { Network, SignalShowSettings } from '@/hooks/useStates'
+import { MenubarSignals, Network } from '@/hooks/useStates'
 
 watch(
   [Network.Config],
@@ -12,7 +12,7 @@ watch(
 </script>
 
 <template>
-  <el-card class="card" v-show="SignalShowSettings">
+  <el-card class="card" v-show="MenubarSignals.ShowSettings.value">
     <!-- <el-row class="form-row">
       <el-col :span="12" class="label-col">
         <img src="../assets/settings-toporand.png" class="icon" />

src/components/TopoEditToolbox.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { Network, SignalEditTopology, SignalAddNode, SignalUpdateLinks } from '@/hooks/useStates'
-import { Check, Plus, Switch, Sort, Download } from '@element-plus/icons-vue'
+import { Network, MenubarSignals, TopoEditSignals } from '@/hooks/useStates'
+import { Plus, Switch, Sort, Download, Finished } from '@element-plus/icons-vue'
 import { NODE_TYPE } from '@/core/typedefs'
 
 const nodeType = ref(0)
@@ -31,19 +31,19 @@ const v2 = ref(1)
 
 const addNode = () => {
   Network.AddNode(nodeType.value)
-  SignalAddNode.value++
+  TopoEditSignals.AddNode.value++
 }
 const connect = () => {
   Network.connect(v1.value, v2.value)
-  SignalUpdateLinks.value++
+  TopoEditSignals.UpdateLinks.value++
 }
 const autoConnect = () => {
   Network.EstablishConnection()
-  SignalUpdateLinks.value++
+  TopoEditSignals.UpdateLinks.value++
 }
 const finishEdit = () => {
   Network.StartWebWorkers()
-  SignalEditTopology.value = !SignalEditTopology.value
+  MenubarSignals.ShowTopoEditToolbox.value = !MenubarSignals.ShowTopoEditToolbox.value
 }
 const exportTopo = () => {
   const link: HTMLAnchorElement = document.createElement('a')
@@ -60,7 +60,7 @@ const exportTopo = () => {
 </script>
 
 <template>
-  <el-card>
+  <el-card v-show="MenubarSignals.ShowTopoEditToolbox.value">
     <el-row :gutter="10" align="middle">
       <el-col :span="6"> Load: </el-col>
       <el-col :span="18">
@@ -108,7 +108,7 @@ const exportTopo = () => {
             <el-button @click="autoConnect" color="royalblue" :icon="Switch" circle />
           </el-tooltip>
           <el-tooltip effect="light" content="Finish edit and start WebWorkers" :hide-after="0" placement="bottom">
-            <el-button @click="finishEdit" color="red" :icon="Check" circle />
+            <el-button @click="finishEdit" color="red" :icon="Finished" circle />
           </el-tooltip>
           <el-tooltip effect="light" content="Export current topology" :hide-after="0" placement="bottom">
             <el-button @click="exportTopo" type="info" :icon="Download" circle />

src/core/network.ts

@@ -78,13 +78,13 @@ export class NetworkHub {
 
     watch(this.StatsPublisherNode, (newN, oldN) => {
       if (oldN > 0 && this.Nodes.value[oldN] != undefined) {
-        this.Nodes.value[oldN].w!.postMessage(<Message>{
+        this.Nodes.value[oldN].w?.postMessage(<Message>{
           type: MSG_TYPE.STATS_SUBSCRIBE,
           payload: <StatsSubscribePayload>{ flag: false }
         })
       }
       if (this.Nodes.value[newN] != undefined) {
-        this.Nodes.value[newN].w!.postMessage(<Message>{
+        this.Nodes.value[newN].w?.postMessage(<Message>{
           type: MSG_TYPE.STATS_SUBSCRIBE,
           payload: <StatsSubscribePayload>{ flag: true }
         })
@@ -160,7 +160,7 @@ export class NetworkHub {
     }
     pkt.asn = this.ASN.value
     if (isValid) {
-      this.Nodes.value[pkt.mac_dst].w!.postMessage(pkt)
+      this.Nodes.value[pkt.mac_dst].w?.postMessage(pkt)
 
       // must use this format for the detailedView function of el-table-v2
       pkt.id = this.Packets.value.length

src/hooks/useDrawTopology.ts

@@ -1,5 +1,5 @@
 import { watch } from 'vue'
-import { Network, SignalEditTopology, SignalResetCamera, SignalAddNode, SignalUpdateLinks } from './useStates'
+import { Network, MenubarSignals, TopoEditSignals } from './useStates'
 
 import * as THREE from 'three'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
@@ -210,7 +210,7 @@ export async function useDrawTopology(dom: HTMLElement) {
 
     const dragBoxHelper = new THREE.BoxHelper(model, 'skyblue')
     dragBoxHelper.castShadow = false
-    dragBoxHelper.visible = SignalEditTopology.value
+    dragBoxHelper.visible = MenubarSignals.ShowTopoEditToolbox.value
     scene.add(dragBoxHelper)
 
     drawnNodes[node.id] = {
@@ -504,7 +504,7 @@ export async function useDrawTopology(dom: HTMLElement) {
     let relatedLinks: any = []
     let relatedUnicastPackets: any = []
     let relatedBeaconPacket: any = undefined
-    if (!SignalEditTopology.value) {
+    if (!MenubarSignals.ShowTopoEditToolbox.value) {
       dragControls.deactivate()
     }
     dragControls.addEventListener('dragstart', function (event: any) {
@@ -585,10 +585,10 @@ export async function useDrawTopology(dom: HTMLElement) {
   Network.StartWebWorkers()
   // ###################
 
-  watch(SignalAddNode, () => {
+  watch(TopoEditSignals.AddNode, () => {
     drawNodes()
   })
-  watch(SignalUpdateLinks, () => {
+  watch(TopoEditSignals.UpdateLinks, () => {
     clearLinks()
     drawLinks()
   })
@@ -613,12 +613,12 @@ export async function useDrawTopology(dom: HTMLElement) {
     drawNodes()
     drawLinks()
   })
-  watch(SignalResetCamera, () => {
+  watch(MenubarSignals.ResetCamera, () => {
     animateCameraPosition({ x: 0, y: 70, z: 80 }, 1000)
     animatePanPosition({ x: 0, y: 0, z: 0 }, 1000)
   })
-  watch(SignalEditTopology, () => {
-    if (SignalEditTopology.value) {
+  watch(MenubarSignals.ShowTopoEditToolbox, () => {
+    if (MenubarSignals.ShowTopoEditToolbox.value) {
       dragControls.activate()
     } else {
       dragControls.deactivate()

src/hooks/useStates.ts

@@ -11,10 +11,15 @@ export const Network = new NetworkHub(<Config>{
   tx_range: 20
 })
 
-export const SignalResetCamera = ref(1)
-export const SignalShowSettings = ref(false)
-export const SignalShowSchedule = ref(false)
-export const SignalShowStatistics = ref(false)
-export const SignalEditTopology = ref(false)
-export const SignalAddNode = ref(0)
-export const SignalUpdateLinks = ref(0)
+export const MenubarSignals = {
+  ShowSettings: ref(false),
+  ShowSchedule: ref(false),
+  ShowNetworkStats: ref(false),
+  ShowTopoEditToolbox: ref(false),
+  ResetCamera: ref(1)
+}
+
+export const TopoEditSignals = {
+  AddNode: ref(0),
+  UpdateLinks: ref(0)
+}

src/views/HomeView.vue

@@ -9,7 +9,6 @@ import MiniMap from '@/components/MiniMap.vue'
 import SettingsPanel from '@/components/SettingsPanel.vue'
 import FlowsPanelVue from '@/components/FlowsPanel.vue'
 import TopoEditToolbox from '@/components/TopoEditToolbox.vue'
-import { SignalEditTopology } from '@/hooks/useStates'
 import EventLogs from '@/components/EventLogs.vue'
 </script>
 
@@ -18,10 +17,7 @@ import EventLogs from '@/components/EventLogs.vue'
     <SettingsPanel style="position: absolute; left: 25%; width: 50%; top: 14%; height: 64%; z-index: 9999" />
   </transition>
   <MenuBar style="position: absolute; top: 16px; left: 16px; width: 150px; z-index: 999" />
-  <TopoEditToolbox
-    v-show="SignalEditTopology"
-    style="position: absolute; top: 48px; left: 16px; width: 300px; z-index: 999"
-  />
+  <TopoEditToolbox style="position: absolute; top: 48px; left: 16px; width: 300px; z-index: 999" />
   <ControlPanel style="position: absolute; top: 16px; left: 40%; min-width: 336px; width: 20%; z-index: 999" />
   <EventLogs style="position: absolute; left: 16px; z-index: 999" />
   <NodeStats style="position: absolute; bottom: 16px; left: 38%; min-width: 400px; z-index: 999" />