EVE-NGのLab編集機能から影響を受けてTWSNMP FC/FKにノード整列機能を付けてみた

今朝も４時前に、助手の猫さんといっしょに起きました。猫さんは、いつもと同じようにご飯を食べたあと寝ています。

EVE-NGでLabを作る時に画面上に配置するルーターたPCなどを整列する機能を見てTWSNMPのマップ編集にも付けたくなりました。

水平、垂直、円形に整列です。

実現する方法を、何日か前から考えていました。よい方法を思いついたので作ってみました。
思いついたアイデアは

• 複数のノードを選択して右クリックした時に整列メニューを表示する

• 水平に整列は、一番左のノードを基準に縦方向を同じ座標にする（間隔は調整ない）

• 垂直に整列は、一番上のノードを基準に横方向を同じ座標にする。（間隔は調整しない）

• 円形に整列は、選択した個数で半径を決めて、一番左のノードを基準に時計まわりに配置する（間隔は、自動調整）

です。
作ってみた結果は、TWSNMP FCのメニューは

水平に整列は、

のようになります。TWSNMP FKで円形に整列した場合は

です。
久しぶりに、sinとかcosとかπとか使ってプログラムを作ったのは、かなりの脳トレになったと思います。
円形に整列のソースコードは

export const circle = (selected:any) => {
　　　//  一番左を探すためにソートする
  selected.sort((a:any,b:any)=>{
    return nodes[a].X - nodes[b].X;
  });
　　// 選択したノード数から半径と中心を決める
  const c = 120 * selected.length;
  const r = Math.trunc(c/3.14/2);
  const cx = nodes[selected[0]].X + r;
  const cy = nodes[selected[0]].Y;
// 円形に配置する
  for(let i =0; i < selected.length;i++) {
    const id = selected[i];
    const d  = (180 - (i*(360 / selected.length)));
    const a =  d * Math.PI /180;
    nodes[id].X = Math.trunc(r * Math.cos(a) +cx)
    nodes[id].Y = Math.trunc(r * Math.sin(a) +cy)
  }
}

のような感じです。

明日に続く