@cardenelabs/dragon 0.36.3 → 0.36.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -25,6 +25,30 @@ npm install @cardenelabs/dragon
|
|
|
25
25
|
| 描く部品 | 原本から時系列図と構成図を描き、段ごとに動かす部品。cdl には頼らない |
|
|
26
26
|
| 書き出し | 同じ原本から mp4、GIF、HTML、PNG を書き出す命令 |
|
|
27
27
|
|
|
28
|
+
## 頁に置く
|
|
29
|
+
|
|
30
|
+
頁で 1 度だけ字の入口 `@cardenelabs/dragon/fonts` を import し、記法を読んだ原本を `mountDiagram` に渡す。
|
|
31
|
+
|
|
32
|
+
```ts
|
|
33
|
+
import "@cardenelabs/dragon/fonts";
|
|
34
|
+
import { mountDiagram, parseNotation } from "@cardenelabs/dragon";
|
|
35
|
+
|
|
36
|
+
const source = await (await fetch("login.dragon")).text();
|
|
37
|
+
const parsed = parseNotation(source);
|
|
38
|
+
if (!parsed.ok) throw new Error(parsed.errors.map((e) => `${e.line}: ${e.message}`).join("\n"));
|
|
39
|
+
|
|
40
|
+
const host = document.getElementById("figure");
|
|
41
|
+
if (host === null) throw new Error("図を置く要素が無い");
|
|
42
|
+
const player = mountDiagram(host, parsed.diagram);
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
字の入口は、同梱の 2 つの字 (Noto Sans JP と JetBrains Mono) の CSS を読み込むだけで、何も出さない。
|
|
46
|
+
図は同梱の字で測った字の幅で組むため、読み込まないと端末の字で描かれ、札から字がはみ出すことがある。
|
|
47
|
+
CSS と字の file は、束ねる道具 (Vite など) が頁へ運ぶ。
|
|
48
|
+
|
|
49
|
+
`mountDiagram` が返す `player` で段を動かす (`next`、`prev`、`play`、`pause`、`destroy`)。
|
|
50
|
+
3 つめの引数には色味や段が替わった時に呼ぶ関数などの設定 (`PlayerOptions`) を渡す。
|
|
51
|
+
|
|
28
52
|
## dragon記法
|
|
29
53
|
|
|
30
54
|
どの行も次の決まり 4 つに従う。
|