scrapbox-local-graph
Scrapbox版local graph (Obsidian)
実装
コードはほぼlocal graph (Obsidian)のパクリ
ObsidianのLocal Graphのcode readingで改造したものを流用する
描画
新規作成したDOMにshadow DOMを生やしてmountする
データ
depth=2 の場合に制限される使い方
簡単な方法
$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/Scrapbox-local-graph/sample.tssample.tsimport { setup } from "./mod.tsx";
import { Scrapbox } from "../scrapbox-jp%2Ftypes/userscript.ts";
declare const scrapbox: Scrapbox;
// 現状だとmobileでクラッシュする
if (!/mobile/i.test(navigator.userAgent)) {
const { open, close, isOpen } = setup();
scrapbox.PageMenu.addItem({
title: "toggle Local Graph",
onClick: () => { isOpen() ? close(): open(); },
});
}
ページ
A を開いたとき、以下のリンクは確実に表示できる B such that
A → B or A ← B C such that
A → B → C or A → B ← C or A ← B → C このうち、
A → B or A ← B or A → B ← C の B と C は空リンクかどうかも確実に判定できる A → B → C と A ← B → C の C は、空リンクだと誤判定する可能性がある興味を引いたグラフ構造
中身のないページでも構造がちゃんとしているものもある
実装
SVGの構築はなるべくPreactにやらせ、D3.jsはsimulationとzoomのみこなすようにしている
いろいろ無理があってバグっているところが1箇所あるが、概ね安定させられたとみていいだろう
hover時のanimationはなるべくCSS Animationで済ませた
d3-transitionを使わずに実装できた
templatescrapbox-local-graph-min
code:mod.js
@CODE@mod.tsxexport * from "https://raw.githubusercontent.com/takker99/scrapbox-local-graph/0.1.2/mod.tsx";
#2023-01-15 16:02:17
#2022-12-31 12:53:59