ベジェ曲線データをターミナルに表示する
バックエンドでメニューを実行したら、フロンエンドにファイルを保存するイベントのメッセージを送ります。フロントエンドでそのイベントメッセージを受け取ったら、またバックエンドに"save"メッセージとともに保存する「ベジェ曲線データ」を引数として送り、TAURIコマンド「save」関数でファイルを保存する処理を行います。まだこのPage 2では、ベジェ曲線データの数値をターミナルに表示するだけで保存まではしません。
キャンバスを真っ白に初期化する新規作成メニュー
次のサンプルコードを追記して、プロジェクトをデバッグビルドして実行したら、「ファイル」→「新規作成」メニューを実行してください。バックエンドから'event-new'イベントメッセージが呼ばれて、描いた絵が消えて初期状態に戻ります。
(前略)
// 新規
async function setNew() {
await window.__TAURI__.event.listen('event-new', () => {
_pos.length = 0;
_current = 0;
line();
});
}
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
setNew();
setOpen();
(中略)
});
(後略)
サンプルコードの解説
「setNew」関数において、TAURIのlistenメソッドで'event-new'メッセージが送られてくるのを待機します。'event-new'メッセージが送られてきたらベジェ曲線データを初期化して、空白でキャンバスを塗り潰します。
htmlファイルのDOMが読み込み完了したらsetNew関数を呼び出します。
バックエンドからTAURIコマンド「save関数」を呼び出す
バックエンドから「名前を付けて保存」のメッセージが送られてきたら、バックエンドにベジェ曲線データをTAURIコマンドsave関数に送ります。このとき、まだ何も処理していないので何も起こりません。
戻り値の_saved変数には、最後に保存したパスが入っており、ファイルを開くダイアログを開くときに、そのディレクトリを最初に開きます。
(前略)
// 書き込み関数
async function setSave() {
await window.__TAURI__.event.listen('event-save', async () => {
_pos.length = _current*4;
_saved = await invoke("save", {data: _pos});
});
}
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
setNew();
setOpen();
setSave();
(中略)
});
(後略)
サンプルコードの解説
「setSave」関数において、TAURIのlistenメソッドで'event-save'メッセージが送られてくるのを待機します。'event-save'メッセージが送られてきたらベジェ曲線データを引数としてバックエンドに送ります。
htmlファイルのDOMが読み込み完了したらsetSave関数を呼び出します。
TAURIコマンドsave関数
以下のサンプルコード[2]を追記して、プロジェクトをデバッグビルドして実行します。その後、何らかの絵を描いて「ファイル」→「名前を付けて保存」メニューを実行します。すると、次の図のようにターミナルにベジェ曲線データの整数値が表示されます。
#[tauri::command]で「save」関数をTAURIコマンド関数として宣言します。暫定的に戻り値に空の文字列を保存したファイル名として返します。
(前略)
// データ保存TAURIコマンド関数
#[tauri::command]
fn save(data: Vec<isize>,loadsave: State<'_, LoadSavePath>) -> String {
for d in data { println!("{}",d.to_string()); }
"".to_string()
}
// エントリーポイント
#[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,save])
.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");
}
(後略)
サンプルコードの解説
TAURIコマンドsave関数で、引数のdata配列を1行ずつターミナルに表示します。空白の文字列を戻り値で返します。
「run」関数でTAURIビルダーのinvoke_handlerメソッドでTAURIコマンドsave関数を登録します。invokeは「呼び出す」意味で、handlerは「何かを扱う代理」の意味です。
