improve click event and add eventlogs panel

src/components/EventLogs.vue

@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { ref, watch, nextTick } from 'vue'
+import { Logs } from '@/hooks/useStates'
+
+const logContainer = ref<HTMLElement | null>(null)
+watch(
+  Logs,
+  () => {
+    nextTick(() => {
+      if (logContainer.value != undefined) {
+        logContainer.value.scrollTop = logContainer.value.scrollHeight
+      }
+    })
+  },
+  { deep: true }
+)
+</script>
+
+<template>
+  <div class="log-container" ref="logContainer">
+    <div class="log" v-for="(log, i) in Logs" :key="i">{{ log }}</div>
+  </div>
+</template>
+
+<style scoped>
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');
+
+.log-container {
+  display: flex;
+  height: 40%;
+  max-width: 40%;
+  overflow-y: scroll;
+  flex-direction: column-reverse;
+}
+.log {
+  font-family: 'Share Tech Mono', monospace;
+  padding-right: 20px;
+  font-size: .88rem;
+}
+</style>

src/components/NodeStats.vue

@@ -2,6 +2,7 @@
 import rpi4 from '@/assets/rpi4.png'
 import sensortag from '@/assets/sensortag.png'
 import { Network, SelectedNode } from '@/hooks/useStates'
+import { NODE_TYPE } from '@/core/typedefs'
 </script>
 
 <template>
@@ -11,13 +12,12 @@ import { Network, SelectedNode } from '@/hooks/useStates'
         <img :src="SelectedNode == 1 ? rpi4 : sensortag" />
       </el-col>
       <el-col :span="13">
-        <span style="font-weight: 600; font-size: 0.9rem">[TSCH-{{ SelectedNode }}]</span>
-        6TiSCH {{ SelectedNode == 1 ? 'gateway' : 'end device' }}<br />
-        - {{ SelectedNode == 1 ? 'Raspberry Pi 4B' : 'CC2650 SensorTag' }} <br />
+        <span style="font-weight: 600; font-size: 0.9rem">
+          {{ NODE_TYPE[Network.Nodes.value[SelectedNode].type] }}-{{ SelectedNode }}
+        </span>
+        <br />
         - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX:
         {{ Network.Nodes.value[SelectedNode].rx_cnt }}<br />
-        <!-- - Queue length: {{ (Network.Nodes.value[SelectedNode].queueLen }}<br />
-        - Rank in topology: {{ Network.Nodes.value[SelectedNode].rank }} -->
       </el-col>
     </el-row>
   </el-card>

src/components/TopoEditToolbox.vue

@@ -45,7 +45,7 @@ const finishEdit = () => {
   <el-card class="card">
     <el-row :gutter="30">
       <el-col
-        >Load preset topology:<el-select size="20px">
+        >Load preset topology:<el-select>
           <el-option
             class="item"
             v-for="item in presetTopos"
@@ -58,7 +58,7 @@ const finishEdit = () => {
     <el-row :gutter="30">
       <el-col>
         Add a
-        <el-select size="20px" v-model="nodeType">
+        <el-select v-model="nodeType">
           <el-option-group v-for="group in nodeTypes" :key="group.label" :label="group.label">
             <el-option
               class="item"

src/hooks/useDrawTopology.ts

@@ -1,5 +1,6 @@
-import { watch } from 'vue'
+import { nextTick, watch } from 'vue'
 import {
+  Logs,
   Network,
   SelectedNode,
   SignalEditTopology,
@@ -18,6 +19,7 @@ import { type Node, NODE_TYPE, ADDR, type Packet, type Link, LINK_TYPE } from '@
 export function useDrawTopology(dom: HTMLElement) {
   const scene = new THREE.Scene()
   const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)
+  camera.layers.enableAll()
   const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true })
   const controls = new OrbitControls(camera, renderer.domElement)
   renderer.setSize(window.innerWidth, window.innerHeight)
@@ -75,6 +77,8 @@ export function useDrawTopology(dom: HTMLElement) {
     scene.add(plane)
   }
 
+  const LABEL_LAYER = new THREE.Layers()
+  LABEL_LAYER.set(1)
   const createLabel = (value: string): THREE.Sprite => {
     const canvas = document.createElement('canvas')
     const padding = 10
@@ -108,13 +112,34 @@ export function useDrawTopology(dom: HTMLElement) {
     const sprite = new THREE.Sprite(spriteMaterial)
 
     // Scale down sprite to match your scene
+    sprite.layers.set(1)
     sprite.scale.set(canvas.width / 108, canvas.height / 108, 1)
     return sprite
   }
 
+  const loadingManager = new THREE.LoadingManager()
+  loadingManager.onStart = function (url, itemsLoaded, itemsTotal) {
+    // console.log(
+    //   'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'
+    // )
+    Logs.value.unshift('Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.')
+  }
+
+  loadingManager.onLoad = function () {
+    // console.log('Loading complete!')
+    Logs.value.unshift('Loading complete!')
+  }
+
+  loadingManager.onProgress = function (url, itemsLoaded, itemsTotal) {
+    // console.log(
+    //   'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.'
+    // )
+    // Logs.value.unshift( 'Loading file: '  + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.')
+  }
+
   const modelTemplates: { [type: number]: any } = {}
   const loadGLTFModels = async () => {
-    const loader = new GLTFLoader()
+    const loader = new GLTFLoader(loadingManager)
     const loadModel = async (
       type: number,
       modelPath: string,
@@ -547,6 +572,7 @@ export function useDrawTopology(dom: HTMLElement) {
 
   // onClick
   const raycaster = new THREE.Raycaster()
+  raycaster.layers.set(0)
   const mouse = new THREE.Vector2()
   window.addEventListener(
     'click',
@@ -556,14 +582,12 @@ export function useDrawTopology(dom: HTMLElement) {
 
       raycaster.setFromCamera(mouse, camera)
 
-      const intersects = raycaster.intersectObjects(scene.children, true)
-
-      if (intersects.length > 0) {
-        if (
-          intersects[0].object.userData.node_id != undefined &&
-          intersects[0].object.userData.type == 'TSCH'
-        )
-          SelectedNode.value = intersects[0].object.userData.node_id
+      const intersects = raycaster.intersectObjects(scene.children)
+      for (const o of intersects) {
+        if (o.object.userData.node_id != undefined) {
+          SelectedNode.value = o.object.userData.node_id
+          break
+        }
       }
     },
     false

src/hooks/useStates.ts

@@ -2,15 +2,16 @@
 
 import { ref } from 'vue'
 import { type Config } from '@/core/typedefs'
-
 import { NetworkHub } from '@/core/network'
+
 export const Network = new NetworkHub(<Config>{
   seed: 17,
   num_nodes: 15,
   grid_size: 80,
   tx_range: 20
 })
 
+export const Logs = ref<string[]>([])
 export const SelectedNode = ref(1)
 export const SignalResetCamera = ref(1)
 export const SignalShowSettings = ref(false)

src/views/HomeView.vue

@@ -4,12 +4,13 @@ import ControlPanel from '@/components/ControlPanel.vue'
 import Topology from '@/components/NetworkTopology.vue'
 import PacketSniffer from '@/components/PacketSniffer.vue'
 // import ScheduleTable from '@/components/ScheduleTable.vue'
-// import NodeStats from '@/components/NodeStats.vue'
+import NodeStats from '@/components/NodeStats.vue'
 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>
 
 <template>
@@ -26,9 +27,10 @@ import { SignalEditTopology } from '@/hooks/useStates'
   <ControlPanel
     style="position: absolute; top: 16px; left: 40%; min-width: 336px; width: 20%; z-index: 999"
   />
-  <!-- <NodeStats
+  <EventLogs style="position: absolute; top: 30%; left: 16px; z-index: 999" />
+  <NodeStats
     style="position: absolute; bottom: 16px; left: 38%; width: 26%; min-width: 400px; z-index: 999"
-  /> -->
+  />
   <Topology style="position: absolute; z-index: 10" />
   <MiniMap style="position: absolute; bottom: 16px; left: 16px; z-index: 999" />
   <FlowsPanelVue