@yanqirenshi/colonoscope

図の要素を「覗いて」表示・編集する汎用インスペクタパネル(React コンポーネント)です。

assh0le / Colon / Rectum に連なる命名 — Colon の中を覗く内視鏡(colonoscope)。 内視鏡は観察だけでなく処置もできる、つまり「表示 + 編集」です。

設計原則

d3.* パッケージは描画のみの原則を保ちます。Colonoscope は:

• d3.* のクリックコールバックが渡す datum を受け取って表示する
• 編集結果は onApply({ path: 値 }) で通知するだけ
• データの所有と再描画はホストアプリの責務(多くのペインタは enter-only join のため、 再マウント方式 — 例えば key={version} — が確実)

d3.* 側は Colonoscope を知りません(依存は一方向)。スタイルは自己完結(インライン)で、 className(colonoscope / colonoscope__*)も付与するので CSS での上書きも可能です。

使い方

import Colonoscope from '@yanqirenshi/colonoscope';

// 例: d3.deployment との接続
const [selected, setSelected] = useState(null);
const [version, setVersion] = useState(0);

const rectum = useMemo(() => {
  const r = new Rectum({
    callbacks: { node: { click: (node) => setSelected(node) } },
  });
  r.data(data);
  return r;
}, [version]);

<div style={{ position: 'relative' }}>
  <D3Deployment key={version} rectum={rectum} />

  <Colonoscope
    target={selected}                          // null で非表示
    title={(t) => t.label?.text}               // 省略時は _id
    subtitle={(t) => t.type}
    fields={[
      { path: 'label.text',  label: '名称', type: 'text' },
      { path: 'description', label: '説明', type: 'textarea' },
      { path: '_id',         label: 'ID',   type: 'readonly' },
    ]}
    onApply={(values) => {                     // { 'label.text': '...', ... }
      applyToData(values);                     // 入力データへ書き戻し(ホスト側)
      setSelected(null);
      setVersion((v) => v + 1);                // 再描画
    }}
    onClose={() => setSelected(null)}
  />
</div>

フィールド型

| type | 表示 | |---|---| | text | 1行テキスト入力 | | textarea | 複数行入力 | | number | 数値入力 | | readonly | テキスト表示のみ |

「適用」ボタンは値が変更されたときだけ有効になります。

コマンド

npm run build     -w @yanqirenshi/colonoscope   # tsc で dist/ へビルド(d.ts 含む)
npm run typecheck -w @yanqirenshi/colonoscope
npm test          -w @yanqirenshi/colonoscope   # vitest