Study編 キーボードショートカットのカスタマイズ

記事作成日: 2023-11-26

自分用のdraw.ioアプリにキーボードショートカットを追加していきます｡

Vanilla JS (Pure JS)

JavaScript製のWebアプリって大抵はvanilla jsでキーボードショートカットもカスタマイズできてしまいますよね｡

全画面表示(draw.ioの)

document.addEventListener('keydown', evt => {
	// Alt + X
	if (evt.altKey) {
		if(evt.code === 'KeyX'){
			document.querySelector('[title="Fullscreen"]').click()
			evt.preventDefault()
		}
	}
})

windowの全画面表示(F11)ではなく､draw.ioの機能のほうの全画面表示です｡これはとても便利なのでオススメです

mxKeyHandlerクラス

キーストロークイベントをリッスンするイベント ハンドラーも使えます｡

以下のコードはzキーを押すとconsoleにzと表示します｡

var keyHandler = new mxKeyHandler(graph);
keyHandler.bindKey(90, function(evt)
{
	console.log("z");
});

mxKeyHandler()の第二引数にtargetを指定することができます｡

ActionにBindする

Draw.loadPlugin(function(ui)
{
	ui.keyHandler.bindAction(90, false, "print")
}

zキーを押すとprint dialogが表示されます｡組み込みの機能に簡単にバインドさせることができます｡

参考リンク

mxKeyHandler