@trama-chain/layout

Trama 노드의 기하 계산과 그래프 자동 배치.

React·DOM에 의존하지 않는다. 편집기와 정적 뷰어가 같은 계산을 공유하고, Node 환경 (서버 파이프라인)에서도 그대로 쓸 수 있다.

설치

pnpm add @trama-chain/layout

자동 배치

LLM이나 스크립트가 만든 문서에는 좌표가 없는 경우가 많다. position이 비어 있으면 편집기는 그 노드를 그리지 않고 정적 뷰어는 전부 한 점에 겹쳐 놓는다. 좌표를 구조에서 유도해 채운다.

import { withAutoLayout } from '@trama-chain/layout';
import { parseTrama } from '@trama-chain/core/schema';

const doc = withAutoLayout(parseTrama(json));

기본은 좌표가 없는 노드만 채운다. 전부 다시 놓으려면 { mode: 'all' }.

import { autoLayoutPositions } from '@trama-chain/layout';

const positions = autoLayoutPositions(model);  // Map<NodeId, { x, y }> — 노드 중심 좌표

간격은 columnGap·rowGap·origin으로 조정한다.

성질

• 결정적 — 같은 문서를 두 번 넣으면 같은 좌표가 나온다. 시간·난수에 의존하지 않고 updatedAt 같은 시간 필드도 건드리지 않는다.
• 흐름은 좌 → 우. lag=0 엣지가 열을 만들고 lag=1(되먹임)은 열 계산에서 빠진다 — 되먹임까지 넣으면 순환 모델이 한 줄로 늘어진다.
• 노드 크기는 실측값을 쓴다. 들어오는 엣지 수가 좌측 핀 소켓 수를 정하고 그것이 높이를 늘리므로, 입력이 많은 노드는 그만큼 넓은 자리를 받는다.
• 사이클이 있는 문서에서도 끝나며 모든 노드에 좌표가 생긴다.

입력은 parseTrama를 통과한 문서여야 한다.

기하

getNodeLayout(node, opts)가 노드 한 개의 크기·핀·소켓 위치를 계산한다. 편집기의 드래그 판정, 케이블 끝점, 정적 SVG의 좌표가 모두 이 결과를 공유한다.

라이선스

MIT