Skip to content

Developer's Note

Jump to bottom
Yudai Tanabe edited this page May 13, 2021 · 5 revisions

Developer's Note

from Kanon_memo_by_masuhara

URL: https://github.com/prg-titech/Kanon

install

read README.md

run

npm start -> open localhost:8000

index.html を開く
npm run-script app

source tree [[file:/current/students/t4/oka/Kanon][file:/current/students/t4/oka/Kanon]]

app.js npm用のもの何か. standalone application用

example.gif

external/ git submodule npm install でダウンロードされる (nodeでできなかったものだけここ)

escodegen AST -> js source code
esprima.js JS parser
prototype_window browser中でwindow を開く. 期待構造編集窓とか

Gruntfile.js JSを更新するとブラウザが勝手に再読込してくれるための何か

index.html Kanon 画面の定義

LICENSE

node_modules npm install で勝手に入るJSライブラリ

package.json npm の設定, 依存ライブラリの名前とバージョンとか

README.md

samples Kanonで編集するプログラムの例

src 本丸

css/
call-tree-network.css 右下のやつ
split-pane.css 3画面分割している部分だけの設定
style.css 全体的な設定
tooltip.css 期待構造窓の設定
import.js index.htmlのメタタグ中に書くべきものを, うるさいのでここに書いている
js 本丸
animation.js
call-tree/
code-instrumentation/
ast-builder.js instrumentするコードを生成するための補助関数
ast-transforms.js visitorsの定義
                    __$__.ASTTransforms : {
                            <visitor_generator># : () -> { enter: (node,path)->(), leave: (node,path)->() }
                    }
ast-walker.js traverseを定義 (Kahn live editor由来)
instrument.js 本丸:string-code -> string-code , 2回walkしている
context.js instrumented code が呼び出す CheckPoint の定義 (snapshotting)
                                    ContextUpdateが呼び出すDraw (viewとsnapshotを探して描画)
                                    MoveContextOnCursorPosition カーソル位置を固定して文脈を前後させる
                                    instrumented code が呼出びす RegisterCallRelationship (caller/calleeを記録)
editor.js
error.js
eventHandler.js
jumpToConst.js
layout/
manipulate.js
network.js
probe.js
readFile.js
saveFile.js
setup.js
storePositions.js
testize.js
toVisjs.js traverse.jsで得たオブジェクトグラフを vis.js形式に変換
traverse.js snapshottingのための, オブジェクトを渡り歩く
update.js main的なもの PositionUpdateはエディタ編集1操作(変更をともなう)ごとのcallback
                                    ContextUpdate: 文脈が変化したときに呼び出されるとグラフ表示を更新する
updateLabelPos.js

what to do based on example tasks

オブジェクトにクラスごとに異なる色を付ける

toVisjs.js の Translator の最初for文でやっている
    (snapshotを取るときに見た目も決定しているので注意)
ノードがリテラル、変数、オブジェクトなどで分岐
Update.useBoxToVisualizeArray : 現在は箱を使った表示をさせないためのconfig
nodeのcolorフィールドをいじる
http://visjs.org/docs/network/ のAPIに従う http://visjs.org/docs/network/nodes.html
ブラウザを再読込すればOK
graph というのは、snapshot traverse.js に定義がある
objectノードはobjectのコピー

instrument後のソースコードを眺める

developer tool, console, $.Update.CodeWithCP を見る

1つ外の文脈に移動するキーボードショートカットを定義する

event handlerを設定
[[file:~/current/students/t4/oka/Kanon/src/js/editor.js::$.langTools%20=%20ace.require('ace/ext/language_tools');][editor.js]] を編集
最後の方に

#+BEGIN_SRC js $.editor.commands.addCommand({ name: 'UpContext', bindKey: {win: 'Ctrl-Shift-u', mac: 'Command-Shift-u'}, exec: function() { alert("UpContext!"); } }); #+END_SRC みたいに追加

cursor 位置の関数名を判別する、その関数名を持つ CSID を見つける
ALT: カーソル位置に対応するCSID+関数ラベルがどこかにあるのでそれを使う

#+BEGIN_SRC $.Context.SnapshotContext Object { cpID: "18", loopLabel: "FunctionDeclaration2", contextSensitiveID: "main-ForStatement1-1-call2-FunctionDeclaration1-call1-FunctionDeclaration2" } #+END_SRC こんな感じの情報を使えばよい

実行時call tree 上でCSIDが対応するノードを見つけ、その親を見つける
CSIDから親のCSIDを直接求めるのはあやしい点があるのですすめない
$.CallTree.rootNode から情報をたどればよい
クラス定義は [[file:~/current/students/t4/oka/Kanon/src/js/call-tree/callTree.js::$.CallTree%20=%20{};][callTree.js]] にある
その親が表わすCSIDに文脈を変更する

例えば "main-ForStatement1-1-call2-FunctionDeclaration1" に戻る

$.Context.SpecifiedContext に現在の文脈が記録されている、これを更新する
CSIDから呼出をした関数呼出式を特定する
そこにカーソルを移動

$.Context.LabelPos の中から対応する文/式の種類(Call, Loop, New)とかの辞書からLabelを参照する

call2 の場所だったら、 $.Context.LabelPos.Call.call2 に start, end がある (line は1始まり)

editorの row (これは0始まり)

[[https://ace.c9.io/#nav=api&api=editor][ACE Editor のAPI]] を見て $.editor.moveCursorTo(6,21); とかする。 jumpToConstruction の定義を参考にせよ

さらに $.Update.ContextUpdate() を呼ぶ (カーソル位置を探して、snapshopを見つけて再描画)

オブジェクト図ペインの隅に変数の値を表示する (宿題!)

透明な DIV を作って、オブジェクト図ペインの端にレイアウトする
リテラル変数もsnapshopに記録する
描画時に

breakpointを設定してデバグする

BrowserのDebugger、ファイルを開いて、breakpoint を設定、あとは使うとそこに落ちる
Clone this wiki locally