from 2021-09-07
やることをメモする
- インポート用のJSONを生成するPythonスクリプト
- グループの作成を追加
- サンプルのソースコード可視化をグループを使ったものに変える
- 辺は何本くらいになる？
- アイテム削除のサポート
- 物理演算
- 実行中は操作禁止
- ピン、アンピン
- グループ収縮力を導入する？
今日はソースコード可視化の機能を改善するぞ〜、まずPythonスクリプトからグループを作れるようにする
- ポモドーロ開始
- グループ作れるようになった
次はフォルダ階層をグループで表現するポモドーロ開始
- 終了
- Pythonライブラリの設計が悪くて使いづらいことがわかった
- インスタンスを作成するところとBaに追加するところで分けていたが、作成して追加しない状態がそもそも不自然
設計を変える、ポモドーロ開始
- pytestでテスト書いてpytest-watchでウォッチしてリファクタリングした
- コーラを一口飲んで10回スクワットしてきた
次はこの新しい設計で可視化コードを作る
-
開始
-
矢印なしだと動いたけど矢印が謎にundefinedになる
-
10回インクラインプッシュアップしてコーラを一口飲んだ
-
閉じてるグループの中身に対する矢印
- グループへの矢印にするのか、消すのか
- 消えたらまずいか
バグを直すぞポモドーロ開始
-
えー、NaN
-
もっと小さなデータで再現すべきか
-
JSON経由だと型エラーが出ないので、Pythonで生成したものを読ませるとき、正しくない値になりうる
- undefinedが入っていればFirestoreに保存するタイミングでエラーになる
- インポート時に実行時のチェックがあるべきか
小さいサンプルを作ってバグを直すポモドーロ開始
- バグを直した
うむ、そうなるか
比較的マシなやつを開いてみた
- うーむ、イベントによって選択範囲がリセットされるのも、描画部分から選択範囲の情報を取得するのも当たり前だからこの参照は必須だよな…
線を細くして透明度つけたから関係の強いものが濃く見えるようになった
CanvasとMenuの関係、何？
- あっ、ユーティリティ関数がここに入ったままだぞ
- 濃い薄いが見えることは大事だな、濃い関係は「まあ、そりゃそうだよな」みたいになる。薄い関係が変なところにあると、それは本来そこにあるべきじゃないものの発見につながる
ちゅるちゅる…わいわい
- 物理演算、閉じたグループがあるときは中身ではなく閉じたグループが動くべき…
1ポモドーロ物理演算を直すかな…
- グループが閉じている時にはグループを移動対象にする
- ピン留め機能をつけた
- ポモドーロdone
ああ、そうか、言語仕様としてディレクトリの外から参照されてるのか中だけからしか参照されてないのかが区別されないのだ
Aのタイプが複雑だからとBのスタイルにしたとしても、中央の丸が「やたら多くのものと相互作用するもの」になってしまう
- 選んだものに出入りする矢印を強調表示したり、逆に選んだものに出入りする矢印の存在感を減らしたり物理演算に参加しなくしたり、が必要なのではないか
この四つのハブ的なやつを消せばスッキリする
- 残りはこんな感じ
最初に可視化した時「何もわからない！」ってなったのだけど少しずつ開いて確認したら結局のところ僕の書き方が悪かった。
- Aが使ってるロジックをBも使いたいという時に、関数やモジュールに括り出してそれをBから呼んだが、それだけではダメだった
- そのままではディレクトリごとに畳んだ場合に、BがAに依存していることになってしまう。3番のように括り出すのが正解だった。
例えば物理演算のPhysicsディレクトリがなぜ他のものと相互作用するかというと、
- 「物理演算中はクラウド保存を止めないといけない」「ドラッグして位置が確定した時にピン留めする」「選択範囲メニューからピン留めを外す機能がある」の3点なわけだ
いじってみたい人はこちらから。保存はされないので好きにいじり回して大丈夫です。ただしMacBookは熱々になります。
- https://kozaneba.netlify.app/#view=ycoPTxkIAT2PfKhVHGFi 解析対象のコードはこれで、解析に使ったスクリプトはpythonディレクトリにあります
- https://github.com/nishio/kozaneba/tree/f4c3233e3dedc424f16bd51dce5b721845926a5d