scrapbox-local-graphのやることリスト兼ね作業ログ
from scrapbox-local-graph
バグ
mobileでzoomが効かない
opacityは変化しているので、
zoom().on("zoom") は機能している何かで拡大率が相殺されている？
mobileで頻繁にcrashする
初回hover時にsimulationがresetされる
ref callbackで解消できないか？
描画までのラグが大きい
どこで時間食っている？
とりあえず読み込み中表示を入れるか?
2023-02-04 多分解消されている
タイトルのエスケープに失敗している
data属性に入れるには、
" などをencodeする必要があるあとで調べよう
やりたいこと
ラベルをもっといい感じにしたい
3段組みにするとか
リンク数の少ないNodeを非表示にする機能
ScrapUniverseにあるやつ
これはまず✅リンク先へスクロールする機能をscrapbox-userscript-stdに入れてから実装する
nodeの大きさに
linked を使う？✅preactで書きたい
dom変更頻度を減らす
描画処理を宣言的に書いて見やすくする
structuredClone()したobjectに対して設定し、座標計算する
座標更新もD3にやらせる
DOM構築には元のデータを使う
✅git管理する
どこを変更したのかわからなくなってきた
d3.jsをCDNから引っ張ってくる
bundle size削減
大したファイルサイズじゃないのでいい
✅リンクの方向を矢印で示したい
svg:markerを使う
D3で
<marker> を構築するコードはここを参考にした23:36:08 調整中
linkの色を薄めにすれば、矢印も目立たない
✅hoverしたnodeの関連nodeをハイライトする
:has()だと無理そう
:hoverを
:has(:hover) のように選択できない動的にスタイルを挿入しよう
18:05:23 実装できた
\ \ 内では \" ではなく \\" とする必要があった色合いがlight themeだと微妙……
CSS Transitionも設定する
18:37:43 ラベルの細かい位置設定は、d3-transitionを使ったほうが楽っぽいな
2023-01-01 01:10:01 dominant-baselineで縦方向の基準を文字列の上に指定すれば解決する
バグをいくつか取り除いた
まあとりあえずこれで完成とする
2023-01-01 01:27:38 関連node以外の文字色を薄くする
だいぶ見やすくなったのではなかろうか
✅現在ページを別の色で表示する
20:05:03 実装したはずなんだけどデグレてしまった
20:14:22 単にCSSを削ってしまっていただけだった
✅空リンクのノードの色を薄くしたい
opacityを50%にしてみた
✅SVG領域の大きさを変更できるようにする
ResizeObserverを使う？
19:19:59 ResizeObserverを使ったら無限にheightが増えるバグが生まれた。どうして……
一旦rollbackして調べている
19:24:29 nodeとlinkの動きにラグが生じるようになってた
transtion-propertyを
all にしていたせい必要なpropertyだけ指定し直したら直った
19:30:36
ResizeObserver の処理の有無だけで現象の再現・消去ができるところまでコードを作った19:31:26 pollingすればなんとかならない？
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させた
Toshi's NoteBook: D3.jsで既存のSVG Elementを扱うで似たような方法が紹介されている
opacityやfont-sizeをCSS variablesから設定するようにし、なるべくJSによるスタイル操作を取り除いた
なぜか初回クリックでsimulationがrestartされるようになってしまった
いずれ調べる
16:57:29 codeをこのページからgitに移動した
2023-01-01
00:43:04 夜更かししてしまった
styleの調整をしている
なるべくCSS側で設定できるようにする
そうしないとCSS Transitionが効かないみたい？
Nodeのtransitionまでは成功した
まだできていないもの
文字の大きさ変化
linkの色変化
変化はするのだが、transitionが効いてくれない
00:54:19 原因分かった
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の調整中
見た目はいい感じになった
リンクが少ないページ
2 hop linkに何があるのか見やすくなったかも
他の人のscrapboxで試す
複数の1 hop linksと繋がってる2 hop linkがわかるのが面白い(screenshot中の
ブルーアーカイブ ) .page と同じ枠にしてみた
15:47:59 だいたい動くようになった
<a> タグで遷移するようにしてみたテスト用
console.jsawait (async()=>{
const {render}=await import("https://scrapbox.io/api/code/takker-dist/scrapbox-local-graph-min/script.js");
const relatedPages = document.querySelector(".related-page-list");
const root = document.createElement("div");
relatedPages.parentNode.insertBefore(root, relatedPages);
render(root, `#root {
--graph-link: gray;
}`);
})();#2023-01-16 02:11:44
#2023-01-15 20:47:03
#2023-01-13 02:08:46
#2023-01-01 01:38:35
#2022-12-31 20:31:04