scrapbox-local-graph

Scrapbox版local graph (Obsidian)

https://github.com/takker99/scrapbox-local-graph

実装

コードはほぼlocal graph (Obsidian)のパクリ

ObsidianのLocal Graphのcode readingで改造したものを流用する

描画

新規作成したDOMにshadow DOMを生やしてmountする

データ

api/deleted-pages/:projectname/:pageidのみを使う

depth=2の場合に制限される

scrapbox-local-graphのやることリスト兼ね作業ログ

使い方

簡単な方法

bundle

$ deno check --remote -r=https://scrapbox.io https://scrapbox.io/api/code/takker/Scrapbox-local-graph/sample.ts

code:sample.ts

import { 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を開いたとき、以下のリンクは確実に表示できる

such that A→B or A←B

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は、空リンクだと誤判定する可能性がある

興味を引いたグラフ構造

/motoso/中国の表現規制

https://gyazo.com/bb88f722ea40ef4a9e52deba952dac2a

scrapbox-local-graph

https://gyazo.com/a1676afcd2007d1ee6c47431fd48e538

/nishio/別途下書きなどしない

https://gyazo.com/3698c47e162c6a569d50ecfed0937341

/nishio/書いて考える

中身のないページでも構造がちゃんとしているものもある

https://gyazo.com/bfad43a7d8dbd52d89fd7b44eec97b41

実装

SVGの構築はなるべくPreactにやらせ、D3.jsはsimulationとzoomのみこなすようにしている

https://qiita.com/ganezasan/items/e1c51b3e936bb0011680#2-domの書き出しはd3を使わず自分で書きscaleやcolormaxminなどの計算やデータ操作で利用すると同じ考え

いろいろ無理があってバグっているところが1箇所あるが、概ね安定させられたとみていいだろう

hover時のanimationはなるべくCSS Animationで済ませた

d3-transitionを使わずに実装できた

get json

code:template

scrapbox-local-graph-min

code:mod.js

@CODE@

code:mod.tsx

export * 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