Kozaneba開発日記2021-09-08

https://gyazo.com/9424e7b64aacc23712232345e0d3efdc

---

やることをメモする

インポート用のJSONを生成するPythonスクリプト

グループの作成を追加

サンプルのソースコード可視化をグループを使ったものに変える

辺は何本くらいになる？

アイテム削除のサポート

物理演算

実行中は操作禁止

ピン、アンピン

グループ収縮力を導入する？

---

今日はソースコード可視化の機能を改善するぞ〜、まずPythonスクリプトからグループを作れるようにする

ポモドーロ開始

グループ作れるようになった

次はフォルダ階層をグループで表現するポモドーロ開始

終了

Pythonライブラリの設計が悪くて使いづらいことがわかった

インスタンスを作成するところとBaに追加するところで分けていたが、作成して追加しない状態がそもそも不自然

設計を変える、ポモドーロ開始

pytestでテスト書いてpytest-watchでウォッチしてリファクタリングした

コーラを一口飲んで10回スクワットしてきた

次はこの新しい設計で可視化コードを作る

開始

矢印なしだと動いたけど矢印が謎にundefinedになる

10回インクラインプッシュアップしてコーラを一口飲んだ

閉じてるグループの中身に対する矢印

グループへの矢印にするのか、消すのか

消えたらまずいか

バグを直すぞポモドーロ開始

えー、NaN

もっと小さなデータで再現すべきか

JSON経由だと型エラーが出ないので、Pythonで生成したものを読ませるとき、正しくない値になりうる

undefinedが入っていればFirestoreに保存するタイミングでエラーになる

インポート時に実行時のチェックがあるべきか

小さいサンプルを作ってバグを直すポモドーロ開始

バグを直した

https://gyazo.com/6fec08b1824fccef497b685daf1a6bad

https://gyazo.com/25b415aebf4f5fe65f61d5975b634348

うむ、そうなるか

https://gyazo.com/1b4e1e9bb496257d9a66d672ba85dc99

比較的マシなやつを開いてみた

https://gyazo.com/084abc398e5d0466382139fe7802d4e9

うーむ、イベントによって選択範囲がリセットされるのも、描画部分から選択範囲の情報を取得するのも当たり前だからこの参照は必須だよな…

線を細くして透明度つけたから関係の強いものが濃く見えるようになった

https://gyazo.com/cf0f4c0380621dd35072d4141448859d

CanvasとMenuの関係、何？

あっ、ユーティリティ関数がここに入ったままだぞ

https://gyazo.com/1be558bd6bd328c3bd90b992bd1efb58

濃い薄いが見えることは大事だな、濃い関係は「まあ、そりゃそうだよな」みたいになる。薄い関係が変なところにあると、それは本来そこにあるべきじゃないものの発見につながる

https://gyazo.com/998e38303d3f7a098dbe74037886c737

ちゅるちゅる…わいわい

https://gyazo.com/53dc2ebe85bead86d7ea5b9b87cb4346

物理演算、閉じたグループがあるときは中身ではなく閉じたグループが動くべき…

1ポモドーロ物理演算を直すかな…

グループが閉じている時にはグループを移動対象にする

ピン留め機能をつけた

ポモドーロdone

ああ、そうか、言語仕様としてディレクトリの外から参照されてるのか中だけからしか参照されてないのかが区別されないのだ

Aのタイプが複雑だからとBのスタイルにしたとしても、中央の丸が「やたら多くのものと相互作用するもの」になってしまう

選んだものに出入りする矢印を強調表示したり、逆に選んだものに出入りする矢印の存在感を減らしたり物理演算に参加しなくしたり、が必要なのではないか

https://gyazo.com/3e11f55a16fe6fef6459f17e0588466a

この四つのハブ的なやつを消せばスッキリする

https://gyazo.com/ee8200d6aeac22c63f569f36f708d232

残りはこんな感じ

https://gyazo.com/9c415198f7b77e5e769d865c4cbdafa8

最初に可視化した時「何もわからない！」ってなったのだけど少しずつ開いて確認したら結局のところ僕の書き方が悪かった。

Aが使ってるロジックをBも使いたいという時に、関数やモジュールに括り出してそれをBから呼んだが、それだけではダメだった

https://gyazo.com/ec15c6104492a7d97d2c00dcd409a3b7

そのままではディレクトリごとに畳んだ場合に、BがAに依存していることになってしまう。3番のように括り出すのが正解だった。

例えば物理演算のPhysicsディレクトリがなぜ他のものと相互作用するかというと、

「物理演算中はクラウド保存を止めないといけない」「ドラッグして位置が確定した時にピン留めする」「選択範囲メニューからピン留めを外す機能がある」の3点なわけだ

https://gyazo.com/9424e7b64aacc23712232345e0d3efdc

いじってみたい人はこちらから。保存はされないので好きにいじり回して大丈夫です。ただしMacBookは熱々になります。

解析対象のコードはこれで、解析に使ったスクリプトはpythonディレクトリにあります