
EVE-NGのLab編集機能から影響を受けてTWSNMP FC/FKにノード整列機能を付けてみた
今朝も4時前に、助手の猫さんといっしょに起きました。猫さんは、いつもと同じようにご飯を食べたあと寝ています。
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)
}
}
のような感じです。
明日に続く
いいなと思ったら応援しよう!
