リファクタリング/機能拡張

[PARA-DISO]

利用可能なツールの追加

• biome
  静的解析、フォーマットが可能
  解析、フォーマット、修正をそれぞれnpm run lint, npm run fmt, npm run apply-lintを割り当て

npm installで利用可能

共通操作

• 不要なファイル/コードの削除

FrontEnd

リファクタリング

• ESModule, Classによるカプセル化、機能分離
• TauriのインタフェースをBackEndでラップ (JSの関数を露出し、文字列指定を除去)
• JSによるCSSの直接指定を除去
  classのトグルによって操作へ変更
• HTMLの構造を整理
  • sectionによる要素の区切りを導入
  • main,footerの導入
  • scriptをheadの中に移動
  • 要素でのイベントの直接指定を除去
• HTMLのトップレベル要素に対するflex指定を除去
• Backgroundの画像をwebp形式に変更

機能変更/追加

• キーボード表示にチャンネルごとの色で描画する機能
• 文字列表示を単純なログ表示から各チャンネルの状態表示に
• Log表示機能をconsoleのメソッドに追加。(cosole.log等で表示可能)
• 周期タスクを管理するクラスの追加(描画周りの一括管理)
• FileAPIからtauriのdialog APIへ変更=>フロントエンドは見た目に専念するように変更
• WarnigやErrorをdialog表示可能に
• 利用可能な物理ポートのサジェスト
  • linuxは非対応?

TODO

• [ ] 見た目の崩れの修正
• [ ] 画面切り替え機能(バックエンドからのイベント発火がない)
• [ ] 各種シンボル名を修正(class, id, variable function, etc...)
• [ ] コーディング規約の導入...

Optional

型を導入したい

• [ ] JSをTypeScriptへ変更
• [ ] CSSをSCSSへ変更

BackEnd

既知のバグ

• シリアルポートをクローズしない問題の解消
• メッセージの受信サイズが固定長な問題の解消

リファクタリング/修正

• シリアルポートに関する依存ライブラリの変更
• Tauriの機能とシリアル通信の機能を分離

TODO

• [ ] フロントエンドへのシリアルポートのopen/closeの成否の通知
  フロントは一応errorイベントの待ちはある。
• [ ] ログファイルの生成

各種図

機能関係

少し違うかも。

flowchart TB
  FrontEnd
  subgraph BackEnd
    tauri[Tauri I/F]
    subgraph async
        command[From Tauri]
        serial[From FPGA]
    end
    SerialPort --> serial
    command --> SerialPort
  end
tauri-->FrontEnd
FrontEnd --> tauri --> command
serial --> tauri

バックエンドのステート図

stateDiagram
  direction TB
  [*] --> InitState
  InitState --> OpenPort:OpenEvent
  OpenPort --> InitState:Faild Open Port
  OpenPort --> WaitEvent:Success Port Open
  WaitEvent --> InternalCommand:fire event from FE
  WaitEvent --> SequenceMSG:receive from serial port
  InternalCommand --> FileSend:Send Event
  FileSend --> WaitEvent
  SequenceMSG --> WaitEvent
  InternalCommand --> InitState:Close Event