いよいよデスクトップのアイコンをHTML固定表示から、動的なデータ対応バージョンに切り替えたいと思います。
でもその他にもバグを見つけたのでそれの修正と、整理整頓を含むリファクタリングを今回は実施しています。
デモ
※デモは最新版が表示されています。該当のデモを見たい場合は、ソースをCloneしてコミットを戻してブラウザで表示して確認してください。
ソースコード
https://github.com/yugeta/web_desktop/
今回のCommitは"#09"です。
解説
今回行った作業は大きく分けて３つ、それぞれ説明しておきます。
不具合修正
前回の状態でウィンドウのサイズ変更（リサイズ）をした後で、別のウィンドウを移動させると、
リサイズ操作が残った状態で、移動と同時に動いてしまっていました。
何だか分からない症状だったので、調べてみたら、event.jsに重大なバグが見つかりました。
pointermove(e){
if(!e.buttons){
if(Window.move_options){
Window.move_options = null
}
if(Window.resize_options){
Window.resize_options = null
}
return
}
ソースの下の方のイベントで、上記の箇所の色付きの文字が追加箇所を追記して不具合が回避できました。
これは、移動やリサイズのイベントが終了したタイミングで、それぞれの保持しているデータを削除する処理なのですが、これがリサイズ処理だけ抜けていたという事でした。
リファクタリング
今回大きな変更としては、icon.jsのファイルを、iconフォルダに関数分割して入れるようにしました。
window.jsの時と同じやり方なのですが、今後の機能追加で、icon操作も大量に関数が追加されることが想定されるので、今回のデータからの表示処理に対応させる形で、リファクタかけておきました。
他にも、libフォルダを追加して、ライブラリ系の処理モジュールはこの中に放り込んでおいて、できるだけroot階層をスッキリさせるようにしました。
アイコンのデータ表示処理の追加
まず、以前に設置してあったasset.jsの処理に追加する形で、asset/setting.jsonというファイルを追加。
それをAssetクラスで一括読み込みして、その中で、jsonファイルはデータとして保持するように少し改編
次に、デスクトップ全体を司る処理用に、desktop.jsを追加して、その中で初期の段階で、アイコンデータがある場合は、デスクトップ上に表示するようにIconクラスを実行する処理を追加。
Iconクラスでは、Viewクラスを呼び出して、データを送るだけにしています。
Icon/Viewクラスでは、データを受け取ったら、iconを表示する処理を書いているんですが、その時に、assetでセットしている、icon.htmlというパーツを元に、
前回構築した、convert.jsを利用して、データを作り出して、appendしています。
あとがき
少し時間を空けると、これまで何をやっていたかわからなくなりがちなプログラミング作業ですが、
メモ書きやコメント、gitコミットログなどを元に、以前の作業を思い出して、なんとな作業コンティニューをできるようになります。
でも、今回のようにブログを書いていると、ブログを確認しながら作業の記憶呼び戻しができるので、まあまあ悪くないブログ開発だと感じています。
他人に教えるように書くブログは、シチ面倒くさくもありますが、いいドキュメント構築にも役立つ作業なんでしょうね。
ちなみに、今回登録したsetting.jsonは、今回開発しているWebデスクトップのいろいろな設定情報を登録して、簡易に状態更新できる便利なファイルにしていく予定なので、使い方も含めて、お楽しみください。
0 件のコメント:
コメントを投稿