API 레퍼런스
TypeScript 타입은 패키지에 포함되어 있습니다(types/).
pele-animate
| 내보내기 | 시그니처 | 설명 |
|---|---|---|
watch |
watch(container: HTMLElement, source?: string, options?: { autoplay?: boolean; interval?: number; hold?: number }): void |
컨테이너를 장면(pa-scene)으로 표시하고, Pele가 그 안에 렌더링하는 SVG마다 애니메이션을 적용하며, 크기 변경으로 Pele가 다시 배치하면 다시 적용합니다. autoplay(또는 %% pa: 주석의 autoplay)를 지정하면 스크롤 인트로 대신 화면에 보이는 즉시 단계 모드를 반복 재생합니다. interval(기본값 1200 ms)과 hold(마지막 단계에서 기본값 2400 ms)는 재생 타이밍을 정합니다. |
prepare |
prepare(source?: string): string |
아이콘 노드의 레이블에 여백을 채워서 Pele가 아이콘 크기(h) 이상의 폭으로 박스를 배치하도록 한 Mermaid 소스를 돌려줍니다. 결과는 mount()에, 원본 소스는 watch()에 전달합니다. 이를 거치지 않으면 레이블이 아이콘보다 짧을 때 엣지 끝과 화살촉이 아이콘 밑에 들어갑니다. |
animate |
animate(svg: SVGSVGElement, options?: { hover?: Element; source?: string }): void |
렌더링된 SVG 하나에 애니메이션을 적용합니다. source는 %% pa: 핀을 읽는 데 쓰이며, svg.paSteps를 설정합니다. |
parseOrder |
parseOrder(source?: string): Map<string, number> |
%% pa: 주석을 파싱하여 노드 id(엣지는 'X>Y')에서 0부터 시작하는 단계 번호로 대응시킨 Map을 돌려줍니다. |
svg.paSteps(타입 PaStep[], PaStep = Array<[element: Element, parts: Element[]]>)는 animate()가 설정하며 단계마다 하나씩 배열이 담깁니다.
pele-animate/glyphs
| 내보내기 | 시그니처 | 설명 |
|---|---|---|
icons |
icons(name: string): string |
Pele의 icons 리졸버입니다. 알 수 없는 이름에는 무난한 둥근 사각형을 돌려줍니다. |
registerGlyphs |
registerGlyphs(pack: Record<string, string>, strokeWidth?: number): void |
글리프를 추가합니다({ name: '<24x24 SVG의 내부 마크업>' }). 선 두께 기본값은 1.1입니다. |
registerTabler |
registerTabler(pack: Record<string, string>, strokeWidth?: number): void |
선 두께가 --pa-stroke를 따르는 아웃라인 아이콘을 추가합니다(대체값은 strokeWidth, 기본값 1.5). |
S, L, W |
string |
글리프 마크업에 쓰는 테마 색상 표현식입니다. 각각 진한 색, 연한 색, 흰색입니다. |
pele-animate/tabler/<category>
모듈을 import하면 해당 카테고리의 아이콘이 등록되며, pack: Record<string, string>(이름에서 내부 마크업으로)도 함께 내보냅니다. 카테고리 목록은 아이콘에 있습니다.
pele-animate/preset-doverunner
import하면 doverunner-* 글리프 20개가 등록됩니다. 내보내는 항목은 없습니다.
pele-animate/style.css
장면 프레임, 움직임, 단계 컨트롤의 스타일이며 한 번만 import하면 됩니다.
볼 수 있는 클래스
pa-scene(컨테이너), pa-ready(애니메이션이 적용된 SVG), pa-in과 pa-done(인트로 상태), pa-stepping(단계 모드), pa-controls(버튼 바)가 있습니다. 이 클래스는 내부용이라 바뀔 수 있으므로, 직접 지정하기보다는 테마의 CSS 변수를 사용하시기 바랍니다.