「開く」を実行したら三角形を描画する
このページでは、バックエンドで開くメニューを実行したらフロントエンドにファイルを開くメッセージを送り、フロントエンドからバックエンドにファイルを開くように指示する方法を解説します。その後、バックエンドから三角形のベジェ曲線データを受け取って描画する方法も解説します。
フロントエンドでファイルを開くメッセージを待機する
フロントエンドの「main.js」ファイルで、バックエンドのRustからファイルを開くメッセージが送られてくるのを待機します。「listen」は意訳すれば聞き耳を立てることです。
ファイルを開くメッセージを受け取ったら、またバックエンドのRustにベジェ曲線データを読み込むメッセージを送ってTAURIコマンド「load」関数を呼び出し、返されたベジェ曲線データを「pos」変数に受け取ります。「TAURIコマンド関数」と言うのはフロントエンドから呼び出せるバックエンドのRustで書いた関数のことです。
// TAURI
const { invoke } = window.__TAURI__.core;
// 変数
let _canvas = document.querySelector('canvas');
let _context = _canvas.getContext('2d');
let _click = false;
let _pos = [];
let _current = 0;
let _saved = "";
// 読み込み関数
async function setOpen() {
await window.__TAURI__.event.listen('event-open', async () => {
let pos = await invoke("load", {saved: _saved});
if (pos.length > 0) {
_pos = pos;
_current = _pos.length/4;
line();
}
});
}
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
setOpen();
(中略)
});
(後略)
サンプルコードの解説
TAURIのイベントのlistenメソッドで'event-open'メッセージを待機し、それを受け取ったら"load"メッセージをバックエンドに呼び出します。「invoke」は「呼び出す」という意味です。まだ使いませんが「saved」引数はファイルを保存した際のディレクトリを取得するためにファイル名を渡します。
ベジェ曲線データの要素が1個以上ある場合に「_pos」配列にpos配列を代入し、現在の頂点数(_current)を計算し、line関数でベジェ曲線を描画します。
バックエンドでファイルを開くと暫定的に三角形のベジェ曲線データを返す
以下のサンプルコード[2]を追記して、プロジェクトをデバッグビルドして実行します。「ファイル」→「開く」メニューが実行されたら、TAURIコマンドload関数が呼ばれて三角形が描画されます。次のページでは、TAURIコマンドload関数を呼び出し、ファイルを開くダイアログを開いて.bezier曲線データを読み込む方法を解説します。暫定的には、三角形のベジェ曲線データを返すだけです。
// クレート
use tauri::{menu::*, AppHandle, Wry, Error, State, Manager, App, path::BaseDirectory};
use std::path::Path;
// 読み込み書き込みパス構造体
struct LoadSavePath {
data_path: String,
}
impl LoadSavePath {
fn new(app:&mut App) -> Self {
LoadSavePath {
data_path: "".to_string(),
}
}
}
// データ読み込みTAURIコマンド関数
#[tauri::command]
fn load(saved: &str,loadsave: State<'_, LoadSavePath>) -> Vec<isize> {
let data = vec![150,100,150,100,200,200,200,200,100,200,100,200,150,100,150,100];
data
}
// エントリーポイント
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_shell::init())
// TAURIコマンド関数の登録
.invoke_handler(tauri::generate_handler![load])
.setup(|app| {
let _ = app.set_menu(get_menu(app.handle())?);
//
let path = LoadSavePath::new(app);
app.manage(path);
app.on_menu_event(|handle, event| { run_menu_process(handle, event.id().as_ref()) });
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
(後略)
サンプルコードの解説
パスを扱う「std::path::Path」クレートを使えるようにします。
「LoadSavePath」構造体でファイルを開いたり保存したりするディレクトリの情報を管理し、コンストラクタの「new」メソッドで空のパスを「data_path」プロパティに代入します。
TAURIコマンドload関数が呼ばれたら単純に三角形のベジェ曲線の配列データを返します。
run関数で、TAURIビルダーのinvoke_handlerメソッドでTAURIコマンドload関数を登録します。
