作図ソフトの設計あれこれ

SVGベースの作図canvas（HTMLCanvasElementではなく概念としての）に対するイベントハンドラ

アンカー要素それぞれにイベントハンドラハンドラをセット

• アンカー要素のdownイベントが発生するのでその操作が始まったことを検知しやすい
• アンカー要素がたくさんあるとイベントの経路が煩雑になってくる
• 検知は楽なものの、その後は結局canvas側のmoveイベントなどで分岐を書くことになる
• 単にclickされたかどうかをチェックしたいだけなら楽な方法
  • しかしdragなどclick以上の何かをしようとするとその後の不便が目立つ

アンカー要素にはdata-anchor-type的なカスタム値をセット

• canvasのdownイベントにてそのカスタム値をチェックしてなにがdownされたか判定する
• イベントハンドラをcanvasに集約できる
  • 何がdownされたかの判定はブラウザに任せつつ、処理をcanvas側にまとめられる
• closestを使ってdownされた要素がどのアンカーに属するかを辿る必要があるのでパフォーマンスはやや劣化する可能性あり