« タブレット用のルーチンを実装した、、、けれど | トップページ | LongDriver の公開 »

2016年10月30日 (日)

LongDriver のバグ取り

LongDriver のタブレットでの不具合(茶色のバーをタップしても反応しない)は解決しました。茶色のバーにはイベントとして touchstart, touchmove, touchend そして click を割り当てているのですが、その全てで evt.preventDefault() を実行していました。ここに evt は当該イベントです。 touchstarttouchend で、この evt.preventDefault() を外したら茶色のバーがタップを認識してくれました。

最初は evt.preventDefault() が無くて問題が発生し、それではと、全てに evt.preventDefault() を入れたら、それはそれで問題となる。必要な所だけに置けと言うことになるのかも知れませんが、面倒です。

さらに、タブレット、PC両方に共通する問題が1つ有りました。画像の上下に選手のダミーマークが有りますが、それをクリックすると選択モードに入ります。ここで画像下側の茶色バーをクリックするとルート作成モードに入ります。このルート作成モード時にフィールドをスクロールするために画像下側の茶色バー上でドラッグすると、フィールドがスクロールされるだけではなく、茶色バーをクリックした効果も現れ、ルート作成モードを終了します。

この問題を解決するために Chrome のデバロッパーツールでブレイクポイントを設定してステップ実行をしながらバグを見つけようとしたのですが、マウスを茶色バーからデベロッパーツールに移動する必要が有り、それがスクロールと判断されてまともなチェックが出来ません。

さて困ったなと思いながら、この記事を書くために下図を作成していたら気が付きました。 nonDrawisScroll をチェックしていなかったのです。 nonDraw() はルート作成モード時に画像下側の茶色バーがクリックされた時のイベントハンドラーです。状態遷移図から判るように、本当のクリックの時だけでなく hScroll 経由の mouseup の時も nonDraw は実行されるのです。 hScroll 経由のイベントは nonDraw にとって要らないイベントです。そこで nonDrawisScroll のチェックを追加して正常な動作になりました。

\[ \xymatrix{ \ar[r]^<{mousedown} & *[F:<3pt>] \txt{startScroll\\isScroll=false}\ar[r]^{mousemove} \ar[d]_{mouseup=click} & *[F:<3pt>]\txt{hScroll\\isScroll = true} \ar[ld]^{mouseup} \ar[d]^{mouseup} \\ & *[F:<3pt>]\txt{nonDraw\\isScroll?} & **[F:<3pt>]\txt{endScroll} } \]

function nonDraw(evt){
    evt.preventDefault();

    if (ground.isScroll){          // この4行が無かったのがバグ
        ground.isScroll = false;
        return;
    }

    playBook.isDraw = false;
    ground.hbar.onclick = makeRoute;
}

« タブレット用のルーチンを実装した、、、けれど | トップページ | LongDriver の公開 »

フットボールのプレイ図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/64420737

この記事へのトラックバック一覧です: LongDriver のバグ取り:

« タブレット用のルーチンを実装した、、、けれど | トップページ | LongDriver の公開 »