use dashed line for wireless link

src/hooks/useDrawTopology.ts

@@ -8,7 +8,7 @@ import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
 import { DragControls } from 'three/examples/jsm/controls/DragControls.js'
 import Stats from 'three/examples/jsm/libs/stats.module'
 import * as TWEEN from '@tweenjs/tween.js'
-import { NODE_TYPE, NETWORK_TYPE, type Packet } from '@/networks/common'
+import { NODE_TYPE, NETWORK_TYPE, type Packet, type LinkMeta, LINK_TYPE } from '@/networks/common'
 
 export function useDrawTopology(dom: HTMLElement) {
   const scene = new THREE.Scene()
@@ -433,24 +433,24 @@ export function useDrawTopology(dom: HTMLElement) {
     return { dragBox, dragBoxHelper }
   }
 
-  let drawnLinks: { [uid: number]: any } = {}
+  let drawnLinks: { [uid: number]: { mesh: any; link: LinkMeta } } = {}
   const drawLinks = () => {
     for (const l of Object.values(Network.Links.value)) {
       if (drawnLinks[l.uid] == undefined) {
-        drawLink(l.uid, l.v1, l.v2)
+        drawLink(l)
       }
     }
   }
-  const drawLink = (uid: number, v1: number, v2: number) => {
+  const drawLink = (l: LinkMeta) => {
     const p1 = new THREE.Vector3(
-      Network.Nodes.value[v1].pos[0],
+      Network.Nodes.value[l.v1].pos[0],
       1.6,
-      Network.Nodes.value[v1].pos[1]
+      Network.Nodes.value[l.v1].pos[1]
     )
     const p3 = new THREE.Vector3(
-      Network.Nodes.value[v2].pos[0],
+      Network.Nodes.value[l.v2].pos[0],
       1.6,
-      Network.Nodes.value[v2].pos[1]
+      Network.Nodes.value[l.v2].pos[1]
     )
 
     const x2 = (p1.x + p3.x) / 2
@@ -460,18 +460,34 @@ export function useDrawTopology(dom: HTMLElement) {
 
     const curve = new THREE.QuadraticBezierCurve3(p1, p2, p3)
     const points = curve.getPoints(64)
-    const mesh = new THREE.Line(
-      new THREE.BufferGeometry().setFromPoints(points),
-      new THREE.LineBasicMaterial({ color: 'white' })
-    )
+    let mesh: any
+    if (l.type == LINK_TYPE.WIRELESS) {
+      mesh = new THREE.Line(
+        new THREE.BufferGeometry().setFromPoints(points),
+        new THREE.LineDashedMaterial({
+          color: 'white',
+          scale: 2,
+          dashSize: 1,
+          gapSize: 1,
+        })
+      )
+      mesh.computeLineDistances()
+    } else {
+      mesh = new THREE.Line(
+        new THREE.BufferGeometry().setFromPoints(points),
+        new THREE.LineBasicMaterial({
+          color: 'white'
+        })
+      )
+    }
     scene.add(mesh)
-    drawnLinks[uid] = { mesh, uid, v1, v2 }
+    drawnLinks[l.uid] = { mesh, link: l }
   }
   const clearLink = (uid: number) => {
     scene.remove(drawnLinks[uid].mesh)
     drawnLinks[uid].mesh.geometry.dispose()
     drawnLinks[uid].mesh.material.dispose()
-    drawnLinks[uid] = undefined
+    delete drawnLinks[uid]
   }
   const clearLinks = () => {
     for (const l of Object.values(drawnLinks)) {
@@ -748,7 +764,7 @@ export function useDrawTopology(dom: HTMLElement) {
     if (event.object.userData.type == 'TSCH') {
       const node = event.object.userData.node_id
       for (const l of Object.values(drawnLinks)) {
-        if (l.v1 == node || l.v2 == node) {
+        if (l.link.v1 == node || l.link.v2 == node) {
           relatedLinks.push(l)
         }
       }
@@ -782,9 +798,9 @@ export function useDrawTopology(dom: HTMLElement) {
         event.object.position.z
       ]
 
-      for (const link of relatedLinks) {
-        clearLink(link.uid)
-        drawLink(link.uid, link.v1, link.v2)
+      for (const l of relatedLinks) {
+        clearLink(l.link.uid)
+        drawLink(l.link)
       }
       for (const pkt of relatedUnicastPackets) {
         clearPacket(pkt.uid)

src/hooks/useStates.ts

@@ -2,11 +2,11 @@
 
 import { ref } from 'vue'
 
-// import { TSCHNetwork } from '@/networks/TSCH/network'
-// export const Network = new TSCHNetwork()
+import { TSCHNetwork } from '@/networks/TSCH/network'
+export const Network = new TSCHNetwork()
 
-import { TSNNetwork } from '@/networks/TSN/network'
-export const Network = new TSNNetwork()
+// import { TSNNetwork } from '@/networks/TSN/network'
+// export const Network = new TSNNetwork()
 
 // import { FiveGNetwork } from '@/networks/5G/network'
 // export const Network = new FiveGNetwork()

src/networks/5G/network.ts

@@ -1,5 +1,5 @@
 import { ref } from 'vue'
-import { Network, NETWORK_TYPE, NODE_TYPE } from '../common'
+import { LINK_TYPE, Network, NETWORK_TYPE, NODE_TYPE } from '../common'
 import type { ScheduleConfig, FiveGNodeMeta } from './typedefs'
 import { SeededRandom } from '@/hooks/useSeed'
 
@@ -54,7 +54,7 @@ export class FiveGNetwork extends Network {
         w: new Worker(new URL('@/networks/5G/node.ts', import.meta.url), { type: 'module' })
       }
       // add links
-      super.addLink(0, i)
+      super.addLink(0, i, LINK_TYPE.WIRELESS)
 
       // send init msg
       // n.w!.postMessage(<Message>{

src/networks/TSCH/network.ts

@@ -9,7 +9,7 @@ import type {
 } from './typedefs'
 import { ADDR, MSG_TYPES, PKT_TYPES, CELL_TYPES } from './typedefs'
 import { SeededRandom } from '@/hooks/useSeed'
-import { Network, NETWORK_TYPE, NODE_TYPE } from '../common'
+import { LINK_TYPE, Network, NETWORK_TYPE, NODE_TYPE } from '../common'
 import type { Packet, Message, MsgHandler } from '../common'
 
 export class TSCHNetwork extends Network {
@@ -80,7 +80,7 @@ export class TSCHNetwork extends Network {
       this.Nodes.value[node].parent = payload.parent
       this.Nodes.value[node].neighbors.push(payload.parent)
       this.Nodes.value[payload.parent].neighbors.push(node)
-      super.addLink(node, payload.parent)
+      super.addLink(node, payload.parent, LINK_TYPE.WIRELESS)
     }
 
     this.Nodes.value[node].queueLen = payload.queue.length

src/networks/TSN/network.ts

@@ -1,5 +1,5 @@
 import { ref, toRaw } from 'vue'
-import { Network, NETWORK_TYPE, NODE_TYPE, type Message } from '../common'
+import { Network, NETWORK_TYPE, NODE_TYPE, type Message, LINK_TYPE } from '../common'
 import { MSG_TYPES, type INIT_MSG_PAYLOAD, type ScheduleConfig, type TSNNodeMeta } from './typedefs'
 import { SeededRandom } from '@/hooks/useSeed'
 import { KDNode, KDTree } from './kdtree'
@@ -78,11 +78,11 @@ export class TSNNetwork extends Network {
     for (let i = 1; i <= this.TopoConfig.value.num_nodes; i++) {
       this.Nodes.value[i].neighbors = tree.FindKNearest(
         this.Nodes.value[i].pos,
-        5,
+        3,
         this.TopoConfig.value.tx_range
       )
       this.Nodes.value[i].neighbors.forEach((n: number) => {
-        super.addLink(i, n)
+        super.addLink(i, n, LINK_TYPE.WIRED)
       })
     }
   }

src/networks/common.ts

@@ -30,6 +30,12 @@ export interface LinkMeta {
   uid: number
   v1: number
   v2: number
+  type: number
+}
+
+export enum LINK_TYPE {
+  WIRED,
+  WIRELESS
 }
 
 export enum END_SYSTEM_TYPE {
@@ -138,14 +144,14 @@ export class Network {
       this.EndSystems.value.push(es)
     }
   }
-  addLink(v1: number, v2: number) {
+  addLink(v1: number, v2: number, type: number) {
     if (v1 > v2) {
       ;[v1, v2] = [v2, v1]
     }
     // Cantor pairing
     const uid = 0.5 * (v1 + v2) * (v1 + v2 + 1) + v2
     if (this.Links.value[uid] == undefined) {
-      this.Links.value[uid] = <LinkMeta>{ uid, v1, v2 }
+      this.Links.value[uid] = <LinkMeta>{ uid, v1, v2, type }
     }
   }