paper.jsで図形を描く際、3点以上クリックしたのち、1点目をクリックすることでパスを閉じたい

Question

前提・実現したいこと

canvas上をクリックすることで点を記憶し、点と点の間を直線で結ぶ機能をpaper.jsで施しています。
Illustratorで言うところのペンツールのようなものです。
以下リンク動作サンプルです。
サンプル

3点以上クリックしたのちに1点目をクリックすることでパスを閉じ、次のクリックは1点目から。
という機能にしたいです。

発生している問題

3点以上クリックしたのち1点目をクリックしてもパスを閉じることができず、点を無限に増やすことができる状態です。
【例：三角形を作る場合】
■現状：4点目で1点目をクリック→次の点は5点目
■理想：4点目で1点目をクリック→パス閉じる→次の点は1点目

該当のソースコード

<script type="text/paperscript" canvas="canvas">
      var path = new Path();
      path.strokeColor = "red";
      path.strokeWidth = 2;
      path.selected = true;
      function onMouseDown(e) {
          path.add(e.point);
          } 
  </script>

試したこと

<script type="text/paperscript" canvas="canvas">
      var path = new Path();
      path.strokeColor = "red";
      path.strokeWidth = 2;
      path.selected = true;
          function onMouseDown(e) {
              path.add(e.point);
              //1点目を打つと発火
              function isFirst() {
              　　//パスを閉じる
              　　path.closePath();
              　　//リセット

              }
          } 
  </script>

paper.jsの公式サイトのリファレンスに
isFirst()
最初のセグメントかどうかを判定すると思われるメソッドがありました。
isFirst()の判定の結果がtrueになればパスを閉じる、というイベントができるかもしれないと希望を持ってスクリプトを書いてみましたが、上記スクリプトは全く機能しませんでした。
また、パスを閉じる→次のクリックは1点目、を実装できそうなプロパティ等は見当たりませんでした。

補足情報

paper.jsは外部ファイルではなく、paperscriptで記述しています。

Answer 1

まずはポイントだけ。

1. ３点以上の判定はpath.segmentsを数えれば良いです。３つ以上あるかチェック。
2. マウス押下時、起点のポイントかどうかは、マウスポイントとprojectのヒットテストの結果オブジェクトを元に、その型をチェック。segmentかどうかチェック。

http://paperjs.org/reference/hitresult/
3. ヒットしたオブジェクトのfirstSegmentとヒットしたsegmentが同じかどうか

上記条件が揃った場合、pathを閉じます。

片手間で書いたのでざっくりなコードですが、こうやればとりあえずできます。

/** ヒット判定オプション */
var hitOptions = Object.seal( {
	segments: true,
	stroke: false,
	fill: false,
	tolerance: 10
} );

var path = null;

function onMouseDown( e )
{
	var hitSeg = project.hitTest( e.point.clone(), hitOptions );
	var isClose = path != null
		&& path.segments.length > 2
		&& hitSeg
		&& hitSeg.type === 'segment'
		&& hitSeg.item.firstSegment === hitSeg.segment;
	if ( isClose )
	{
		path.closed = true;
		path = null;
		return false;
	}


	if ( path == null )
	{
		path = new Path();
		path.strokeColor = "red";
		path.strokeWidth = 2;
		path.selected = true;
		path.add( e.point );
	}
	else
	{
		path.add( e.point );
	}
} 

あとはsegmentをマウスオーバーでわかりやすく、といった視覚効果等も実装できればより良いでしょう。

追記
isFirst()が効かないとのことですが、利用されているライブラリのバージョンが古そうです。
回答の作例はwhoiwhoiさんが示されたサンプル(jsbin.com)で利用されているバージョンでの回答です。

Comments

[whoiwhoi]

so87様
先日はpaper.jsを教えてくださりありがとうございました。
また当問題も解決していただきありがとうございます。
動作確認ができました。
ご教示いただいたスクリプトを一行一行反芻いたします。

ライブラリは下記CDNから、一番新しいと私が勝手に思った0.22を使用しました。
https://cdnjs.com/libraries/paper.js/0.12.0
試しに推奨されているとおぼしき0.12.0のpaper-full.jsに差し替えると、paperscriptそのものが機能しませんでした。
動作しないサンプル→ https://jsbin.com/vulelayeli/1/edit?html,js,output
これはCDNかJS Binの問題かもしれません。

また、isFirst()が機能しなかったのは当たり判定の許容値の設定をしていなかったからかもと、ご教示いただいたスクリプトを見て思いました。（tolerance: 10　←これが許容値でしょうか）

[so87]

0.22は現在のバージョニングになる以前のpaper.jsの最終バージョンだと思います。0.22からv0.1.0へと移行したものと推測されます。よって現在確認できる一番古いバージョンかと思われます。ソースコード自体にisFirstも見当たりません。
また、0.12.0のpaper-full.jsで機能しないとのことですが、確認したところ機能はしています。
ただし、paper.jsがcanvasを認識した時のサイズが[縦:0,横:0]となっていますので、paper.jsのインスタンス内でのprojectサイズが[縦:0,横:0]となっているのが、機能しないと判断された原因かと思います。
正しく動作させるならば、まずはキャンバスサイズを決定してからということになるのと、もうひとつ、現在svgを同じcanvasにdrawImageさせていますが、現行のpaper.jsではpaper.jsのレイヤーを使って切り分けるか、canvas自体をcssで２重に重ねて表示させるか、という仕様に変更する必要があります。
この辺りの仕様変更は、よりプログラマブルに機能性が分離した結果かと思います。

toleranceは許容値ですね。大変ありがたい機能です。
パスを閉じるまではマウスポインタまで動的にstrokeを追いかけて、起点segmentへの吸着！といったイラストレーターのpathツールのあの動作もいけるな～って想像が膨らみます。わたくし的にpaper.jsは神ライブラリのひとつだと思っています＾＾

ちなみに作例でObject.sealしているのは今回は特に意味ないです。普段の自分のコードでは定数オブジェクトはなるべくsealだったりfreezeさせて守っているというだけなので。