aceエディターで行数部分にブレイクポイントの表示を設定する

__editor.on("guttermousedown",function)__で行数部分のマウスダウンイベントを取得して、__editor.session.setBreakpoint(row) ;__でブレークポイントを設定できる。__editor.session.clearBreakpoint(row) ;__でブレークポイントに設定したものをクリアできる。今回のコードは１つだけブレークポイントを設定できる。的なものにしてみた。

• 全体のコード
  https://gist.github.com/nyamogera/846ca63302c078bd59a

• 該当部分だけのコード

css.css

.ace_gutter-cell.ace_breakpoint{ 
  border-radius: 20px 0px 0px 20px; 
  box-shadow: 0px 0px 1px 1px red inset; 
} 

(css変更できる)

js.js

var oldNumber = -1;
editor.on("guttermousedown", function(e){ 
		var target = e.domEvent.target; 
		if (target.className.indexOf("ace_gutter-cell") == -1) 
			return; 
		if (!editor.isFocused()) 
			return; 
		if (e.clientX > 25 + target.getBoundingClientRect().left) 
			return; 
	
		var row = e.getDocumentPosition().row 
		
		if( oldNumber == row ) {
			e.editor.session.clearBreakpoint(row);
			oldNumber = -1;
		} else{
			if( oldNumber >= 0 ) {
				e.editor.session.clearBreakpoint(oldNumber);
			} 
			e.editor.session.setBreakpoint(row) ;
			oldNumber = row;
		
		} 
		e.stop() ;
	})

今回の解決道順

1.aceのエディターの行数部分をDeveloper Toolsで見てどういった名前なのかを調べた。

この部分は「gutter」らしい。

2.「cloud9 ace gutter」で検索した。

aceだけだと別のものが出てきそうだったので、検索ワードに「cloud9」を追加。
一番目に「Modify the gutter of Ajax.org Cloud9 Editor (Ace Editor) - stack overflow」がヒットしたので試してみる。

• 検証コード

• 結果
  

ちゃんと文字列として表示されたよ！やったね！違う(´；ω；｀)ﾌﾞﾜｯ

3.ググるよりリファレンス読んだほうが早いのでは・・・？ と思い始める。

「API Reference/EditSession - Ace」で上のコードで使った「gutterRenderer」を[Cmd]+[F](ブラウザ内検索)で検索するが、出てこなかったので諦める。（これは検索ミス...。「gutter」で検索すべきだった。）

4.新しい検索ワードを思いつく「ace gutter breakpoint」

そういえばブレークポイントついてるようなのあったよな・・・？と思って検索。

それっぽいのヒット！！！「How to mark line numbers in javascript ace editor? - stack overflow」⇢「Enable breakpoints in embedded editor - Google Group」

でした。ちなみに「clearBreakpoint」はここのコードになかったので、「API Reference/EditSession - Ace」からブラウザ内で検索した。