エディット機能

六帖webアプリ
kickzone/TrainNavi2 · GitHub
線路のエディット機能を追加。実質、googleマップに合わせて線路の形を整えるための機能となった。1日で300行ちょいのコードを書いた。
上手くいかなかったことはたくさんある。まず、canvasにmousemoveのイベントをかましていると、要素のmousemoveのイベントが動作しない。駅オブジェクトをドラッグして位置を変更したいのに、クリックイベントは発生するものの、mousemoveが動作しないため何も起こらない。おそらくcanvasに吸い取られてしまっているのだろう。この場合、canvasのイベントは消し去っておく必要がある。

//stationというオブジェクトがcanvas上にあるとする
function OnStationMouseDown(evt){
	var canvas = $("canvas")[0];
	//canvasのイベントを捨てる
	canvas.removeEventListener('mousemove', OnCanvasMouseMove, false);
	canvas.removeEventListener('mouseup', OnCanvasMouseUp, false);
	//新たにイベントを登録する
	canvas.addEventListener('mousemove', OnStationMouseMove, false);
	canvas.addEventListener('mouseup', OnStationMouseUp, false);
}

function OnStationMouseMove(evt){
	//mousemoveイベントの処理
}
function OnStationMouseUp(evt){
	//mousemoveイベントの処理

	//イベントハンドラを元に戻す
	canvas.removeEventListener('mousemove', OnStationMouseMove, false);
	canvas.removeEventListener('mouseup', OnStationMouseUp, false);
	canvas.addEventListener('mousemove', OnCanvasMouseMove, false);
	canvas.addEventListener('mouseup', OnCanvasMouseUp, false);
}

さらに、JavaScript→PHPにPOSTを使って値を受け渡しするとき、配列の個数が1000を超えると、1000を超えたものから削除されていく、という恐ろしいPHPの仕様にぶつかった。
参考
この仕様を知らなかったので、大きなデータを保存したら一部が消えてしまってびっくらこいた。1時間くらいの作業が吹っ飛んだので非常にまいった。配列の受け渡しはやめて、半角スペースなどのセパレータをつけてPHPでpreg_splitを使って分解するように変更した。