scrapbox-local-graphのやることリスト兼ね作業ログ
バグ
mobileでzoomが効かない
opacityは変化しているので、zoom().on("zoom")は機能している
何かで拡大率が相殺されている？
mobileで頻繁にcrashする
初回hover時にsimulationがresetされる
描画までのラグが大きい
どこで時間食っている？
とりあえず読み込み中表示を入れるか?
2023-02-04 多分解消されている
タイトルのエスケープに失敗している
data属性に入れるには、"などをencodeする必要がある
あとで調べよう
やりたいこと
ラベルをもっといい感じにしたい
3段組みにするとか
リンク数の少ないNodeを非表示にする機能
nodeの大きさにlinkedを使う？
✅preactで書きたい
dom変更頻度を減らす
描画処理を宣言的に書いて見やすくする
座標更新もD3にやらせる
DOM構築には元のデータを使う
✅git管理する
どこを変更したのかわからなくなってきた
d3.jsをCDNから引っ張ってくる
bundle size削減
大したファイルサイズじゃないのでいい
✅リンクの方向を矢印で示したい
D3で<marker>を構築するコードはここを参考にした 23:36:08 調整中
linkの色を薄めにすれば、矢印も目立たない
https://gyazo.com/2c1fe5f353d92b3d7e011fc1967945b9
✅hoverしたnodeの関連nodeをハイライトする
動的にスタイルを挿入しよう
18:05:23 実装できた
\`\`内では\"ではなく\\"とする必要があった
色合いがlight themeだと微妙……
バグをいくつか取り除いた
まあとりあえずこれで完成とする
2023-01-01 01:27:38 関連node以外の文字色を薄くする
だいぶ見やすくなったのではなかろうか
https://gyazo.com/47fb719c83929fdf20e917c9e0b2505a
✅現在ページを別の色で表示する
20:05:03 実装したはずなんだけどデグレてしまった
20:14:22 単にCSSを削ってしまっていただけだった
opacityを50%にしてみた
✅SVG領域の大きさを変更できるようにする
一旦rollbackして調べている
19:24:29 nodeとlinkの動きにラグが生じるようになってた
https://gyazo.com/1cbbaf4b979c2bf72890c212d0ce31f5
必要なpropertyだけ指定し直したら直った
19:30:36 ResizeObserverの処理の有無だけで現象の再現・消去ができるところまでコードを作った
19:38:23 同じ現象が発生した
わかった。<div>の高さをそれより小さい<svg>の高さに設定してしまったせいで、無限に高さが増えるループに突入してしまったんだ
19:42:37 <svg>からwidthとheightを削除すれば、外の要素の大きさにあわせてresizeされるようになるみたい
この状態なら<svg>にResizeObserverを適用できる
document.createElementNS("http://www.w3.org/2000/svg", "svg")
スクロールバーとpaddingがないなら同じだとしてよさそう
20:04:41 直った
2023-01-15
20:43:13 preactでrenderingするようにした
既存のDOMにデータをbindさせた
opacityやfont-sizeをCSS variablesから設定するようにし、なるべくJSによるスタイル操作を取り除いた
なぜか初回クリックでsimulationがrestartされるようになってしまった
いずれ調べる
16:57:29 codeをこのページからgitに移動した
2023-01-01
styleの調整をしている
なるべくCSS側で設定できるようにする
Nodeのtransitionまでは成功した
まだできていないもの
文字の大きさ変化
linkの色変化
変化はするのだが、transitionが効いてくれない
00:54:19 原因分かった
code:diff
-transition: color,font-size,opacity 0.2s linear;
+transition: color 0.2s linear, font-size 0.2s linear, opacity 0.2s linear;
,で一つの値に複数の値を詰め込むことはできないのか
2022-12-31
21:59:26 空リンクの計算を間違えていたので直した
outgoing linksを考慮していなかった
20:35:24 これでリリースする
16:25:34 CSSの調整中
見た目はいい感じになった
https://gyazo.com/7ed5c2601f2143878b5ec88a34acdbf8
リンクが少ないページ
https://gyazo.com/6c9e0a73f8202029c47c2b85e0217eb2
他の人のscrapboxで試す
https://gyazo.com/dba37a54d1dc9e6d5a0596cc6879c721
複数の1 hop linksと繋がってる2 hop linkがわかるのが面白い(screenshot中のブルーアーカイブ)
.pageと同じ枠にしてみた
https://gyazo.com/d7fc3b85ea35fcb0b6e919e46b411165
15:47:59 だいたい動くようになった
<a>タグで遷移するようにしてみた
テスト用
code:console.js
await (async()=>{
const relatedPages = document.querySelector(".related-page-list");
const root = document.createElement("div");
relatedPages.parentNode.insertBefore(root, relatedPages);
render(root, `#root {
--graph-link: gray;
}`);
})();