空間キャンバスSpatialCanvasExperimental
パネルやノードを配置できる、ドット背景とグリッド間隔を持つキャンバス面です。
プレビュー
状態とバリエーション
パネル配置
作業面の上にツールやプロパティパネルを配置します。
ツール
選択、描画、確認を行います。
プロパティ
選択中ノードの設定です。
ノード配置
絶対配置のノードをキャンバス上に並べます。
開始
確認
公開
選択範囲
キャンバス上をドラッグして矩形で囲い、範囲内のノードを選択します。
開始
確認
公開
2件を選択中
細かいグリッド
細かい配置や位置合わせを見せる時に gridSize を小さくします。
細かい配置向けのグリッド
大きいグリッド
大きな構成確認では gridSize を広げます。
大きな構成確認向けのグリッド
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| gridSize | number | 20 | 背景グリッドの間隔です。px 単位で指定します。 |
| children | ReactNode | - | キャンバス内に配置するノードやパネルです。 |
| className | string | - | サイズや背景を調整する追加 className です。 |
使い方
import { FloatingPanel, SpatialCanvas } from "@gunjo/ui";
export function CanvasWorkspace() {
return (
<div className="h-[420px] overflow-hidden rounded-lg border">
<SpatialCanvas gridSize={40}>
<FloatingPanel title="ツール" className="absolute left-4 top-4 w-48">
<div className="p-3 text-sm text-muted-foreground">選択、描画、確認を行います。</div>
</FloatingPanel>
<FloatingPanel title="プロパティ" className="absolute bottom-4 right-4 w-56">
<div className="p-3 text-sm text-muted-foreground">選択中ノードの設定です。</div>
</FloatingPanel>
</SpatialCanvas>
</div>
);
}設計の判断
- 土台の紙だけを部品にした。資料の核は座標の変換です（移動と拡大を2つの値で持ち、画面の座標をキャンバスの座標に直してから扱う）。GUNJO の
SpatialCanvasはそこを持ちません。方眼の背景と、はみ出しの切り取りと、ドラッグ中に文字が選ばれない指定（select-none）だけを持つ箱です。ノードをどう置いて動かすかは、この上に載せる画面が決めます。 - 方眼は2枚重ねで、明るい配色と暗い配色で濃さを変える。
gridSize（既定20px）の点の方眼と、その5倍の間隔の線の方眼を重ねています。線のほうは明るい配色でopacity-5、暗い配色でopacity-20と別の濃さにしてあり、どちらでも「言われれば見える」くらいに合わせました。 - 移動・拡大・ミニマップ・表示範囲外の間引きは入っていません。資料が挙げる4点（マウスの位置を中心にした拡大、ポインターの捕捉、大量のノードの間引き、キーボードでの操作）はどれも未実装で、載せる画面ごとに書くことになります。ここは部品に上げる余地がはっきり残っている場所です。
使用コンポーネント
関連コンポーネント
いつ・なぜ使うか（UIXHERO）
「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。