Webデスクトップの制作 #07 アイコン選択モード

アイコンをクリックイベントでウィンドウが開いていた状態を通常のOSのように、ダブルクリックでウィンドウが開くようにしたいと思います。 そして合わせてアイコンを選択状態にすることで、どのアイコンのウィンドウが開いたのか分かりやすくしてみます。

デモ

ソースコード

https://github.com/yugeta/web_desktop/ 今回のCommitは"#07"です。

解説

アイコンをクリックからダブルクリックに移行するので、イベント処理を、addEventListener("click", ...)からaddEventListener("dblclick", ...)にアイコン処理を移行しました。 合わせてこれまでアイコン用のJSモジュールが無かったので、icon.jsを追加しました。 このモジュールでは、アイコンの選択(select)と、同階層の一括選択解除(clear)の２つの関数を持たせておきます。 選択解除というのは、デスクトップの何も無い箇所を選択した時に、アイコンの選択を解除するのと、別のアイコンを選択した時に、選択されているアイコンがあればそれを非選択に解除する機能を持たせています。 選択時のアイコンは、背景と枠線（見えにくいけど）をそれぞれ黒と白で描画して、デスクトップの背景画像がどんな場合でも分かりやすくなるようにしてみました。 今は背景画像が変更できないので、あまり恩恵を感じませんが、きっとそのうちにこの仕様で良かったと思う日が来るでしょう。（変更するかもしれんけど）

あとがき

アイコン操作はまだまだ課題が残っています。 開いたフォルダの中にアイコンを移動したり、フォルダ内のアイコンをリスト表示したり・・・ まだまだ先の長い開発になりそうです。 でも、毎日ちょっとずつ進めることで確実に完了には近づいていますよ。 ソースコードなど煩雑になってきているので、不明点などある場合は、質問を投げてくれれば解説したいと思います。