sketchmark 1.0.2 → 1.1.0
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 +61 -36
- package/dist/animation/index.d.ts +9 -0
- package/dist/animation/index.d.ts.map +1 -1
- package/dist/index.cjs +501 -474
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +501 -474
- package/dist/index.js.map +1 -1
- package/dist/layout/index.d.ts.map +1 -1
- package/dist/parser/index.d.ts.map +1 -1
- package/dist/renderer/svg/index.d.ts.map +1 -1
- package/dist/scene/index.d.ts.map +1 -1
- package/dist/sketchmark.iife.js +501 -474
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -363,22 +363,34 @@ a --> b label="HTTPS" stroke="#cc0000" stroke-width=2 color="#aa0000" font-size=
|
|
|
363
363
|
|
|
364
364
|
---
|
|
365
365
|
|
|
366
|
-
## Groups
|
|
367
|
-
|
|
368
|
-
Groups visually contain one or more nodes, tables,
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
366
|
+
## Groups
|
|
367
|
+
|
|
368
|
+
Groups visually contain one or more nodes, tables, charts, markdown blocks,
|
|
369
|
+
or other groups by referencing their ids with `items=[...]`.
|
|
370
|
+
|
|
371
|
+
```
|
|
372
|
+
box a label="Node A"
|
|
373
|
+
box b label="Node B"
|
|
374
|
+
box c label="Node C"
|
|
375
|
+
|
|
376
|
+
group inner label="Inner Group" layout=row items=[c]
|
|
377
|
+
group outer label="Outer Group" layout=column items=[a,b,inner]
|
|
378
|
+
```
|
|
379
|
+
|
|
380
|
+
General form:
|
|
381
|
+
|
|
382
|
+
```
|
|
383
|
+
group <id> [label="..."] [layout=row|column|grid] [gap=N] [padding=N]
|
|
384
|
+
[columns=N] [align=start|center|end]
|
|
385
|
+
[justify=start|center|end|space-between|space-around]
|
|
386
|
+
[theme=...] [fill="..."] [stroke="..."] [width=N] [height=N]
|
|
387
|
+
[items=[id1,id2,...]]
|
|
388
|
+
```
|
|
389
|
+
|
|
390
|
+
- Groups are always declared at the top level.
|
|
391
|
+
- `items` order is the visual child order.
|
|
392
|
+
- Nested groups are created by referencing another group id from `items=[...]`.
|
|
393
|
+
- All authored nodes, groups, tables, charts, and markdown blocks must have explicit ids.
|
|
382
394
|
|
|
383
395
|
### Group Properties
|
|
384
396
|
|
|
@@ -400,14 +412,13 @@ group <id> [label="..."] [layout=row|column|grid] [gap=N] [padding=N]
|
|
|
400
412
|
|
|
401
413
|
#### `bare` keyword
|
|
402
414
|
|
|
403
|
-
`bare` is an alias for a group with no visible border or fill:
|
|
404
|
-
|
|
405
|
-
```
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
```
|
|
415
|
+
`bare` is an alias for a group with no visible border or fill:
|
|
416
|
+
|
|
417
|
+
```
|
|
418
|
+
box a label="Floating A"
|
|
419
|
+
box b label="Floating B"
|
|
420
|
+
bare myContainer layout=row items=[a,b]
|
|
421
|
+
```
|
|
411
422
|
|
|
412
423
|
---
|
|
413
424
|
|
|
@@ -534,9 +545,9 @@ theme muted fill="#f5f5f5" stroke="#999999" color="#444444"
|
|
|
534
545
|
|
|
535
546
|
box client label="Client" theme=primary
|
|
536
547
|
box server label="Server" theme=warning
|
|
537
|
-
cylinder db label="DB" theme=success
|
|
538
|
-
group services label="Services" theme=muted
|
|
539
|
-
```
|
|
548
|
+
cylinder db label="DB" theme=success
|
|
549
|
+
group services label="Services" theme=muted items=[client,server,db]
|
|
550
|
+
```
|
|
540
551
|
|
|
541
552
|
---
|
|
542
553
|
|
|
@@ -587,7 +598,7 @@ step <action> <target> [options]
|
|
|
587
598
|
| Action | Target | Options | Description |
|
|
588
599
|
|--------|--------|---------|-------------|
|
|
589
600
|
| `highlight` | node/edge/group | — | Pulsing glow highlight (only one element at a time) |
|
|
590
|
-
| `draw` | node/edge/group/table/chart/markdown | `duration=N` | Animated
|
|
601
|
+
| `draw` | node/edge/group/table/chart/markdown | `duration=N` | Animated reveal; drawing a group also reveals its subtree unless descendants have their own later draw step |
|
|
591
602
|
| `fade` | node/edge/group | — | Fade to 22% opacity |
|
|
592
603
|
| `unfade` | node/edge/group | — | Restore from fade |
|
|
593
604
|
| `erase` | node/edge/group | `duration=N` | Fade to invisible (opacity 0) |
|
|
@@ -805,11 +816,25 @@ config pointer=hand # hand cursor
|
|
|
805
816
|
|
|
806
817
|
The pointer only appears during annotation steps — it follows the guide path as the annotation draws in, then fades out.
|
|
807
818
|
|
|
808
|
-
### Pre-hidden Elements (Draw Targets)
|
|
809
|
-
|
|
810
|
-
Any element targeted by a `step draw` action starts **hidden** and only appears when that step fires. Elements NOT targeted by `draw` are always visible.
|
|
811
|
-
|
|
812
|
-
|
|
819
|
+
### Pre-hidden Elements (Draw Targets)
|
|
820
|
+
|
|
821
|
+
Any element targeted by a `step draw` action starts **hidden** and only appears when that step fires. Elements NOT targeted by `draw` are always visible.
|
|
822
|
+
|
|
823
|
+
For groups, this applies to the whole subtree:
|
|
824
|
+
|
|
825
|
+
- `step draw group1` pre-hides the group and all descendant nodes, nested groups, tables, charts, notes, and markdown blocks.
|
|
826
|
+
- When the group step fires, descendants without their own later `draw` step are revealed immediately.
|
|
827
|
+
- Descendants with an explicit later `draw` step stay hidden until that later step.
|
|
828
|
+
- Edges are still independent; a group draw does not automatically reveal connected edges.
|
|
829
|
+
|
|
830
|
+
For group targets, these actions also apply recursively to the same subtree:
|
|
831
|
+
|
|
832
|
+
- `fade` / `unfade`
|
|
833
|
+
- `show` / `hide`
|
|
834
|
+
- `erase`
|
|
835
|
+
- Edges still remain explicit for these actions too.
|
|
836
|
+
|
|
837
|
+
---
|
|
813
838
|
|
|
814
839
|
## Config Options
|
|
815
840
|
|
|
@@ -1048,8 +1073,8 @@ exportHTML(instance.svg, dslSource, { filename: 'diagram.html' });
|
|
|
1048
1073
|
| `<-->` | Edge | `a <--> b` |
|
|
1049
1074
|
| `--` | Edge | `a -- b` |
|
|
1050
1075
|
| `---` | Edge | `a --- b` |
|
|
1051
|
-
| `group` | Group | `group myGroup label="Services" layout=column
|
|
1052
|
-
| `bare` | Group | `bare myWrap
|
|
1076
|
+
| `group` | Group | `group myGroup label="Services" layout=column items=[api,db]` |
|
|
1077
|
+
| `bare` | Group | `bare myWrap layout=row items=[a,b]` |
|
|
1053
1078
|
| `table` | Table | `table myTable label="Users" { header Name Age }` |
|
|
1054
1079
|
| `bar-chart` | Chart | `bar-chart sales label="Sales" data [...]` |
|
|
1055
1080
|
| `line-chart` | Chart | `line-chart trend data [...]` |
|
|
@@ -1193,4 +1218,4 @@ interface DiagramInstance {
|
|
|
1193
1218
|
3. **Animation only works with SVG renderer** — the canvas renderer does not support animated steps.
|
|
1194
1219
|
4. **`step draw` makes elements start hidden** — any element you intend to `draw` will be invisible until its step fires.
|
|
1195
1220
|
5. **Node IDs must be unique** — duplicate IDs are silently deduplicated (only first definition kept).
|
|
1196
|
-
6. **Group children inherit group's coordinate space** — edges can connect across group boundaries using the node/group ID directly.
|
|
1221
|
+
6. **Group children inherit group's coordinate space** — edges can connect across group boundaries using the node/group ID directly.
|
|
@@ -29,6 +29,9 @@ export declare class AnimationController {
|
|
|
29
29
|
readonly drawTargetNotes: Set<string>;
|
|
30
30
|
readonly drawTargetCharts: Set<string>;
|
|
31
31
|
readonly drawTargetMarkdowns: Set<string>;
|
|
32
|
+
private readonly _drawStepIndexByElementId;
|
|
33
|
+
private readonly _parentGroupByElementId;
|
|
34
|
+
private readonly _groupDescendantIds;
|
|
32
35
|
private _captionEl;
|
|
33
36
|
private _captionTextEl;
|
|
34
37
|
private _annotationLayer;
|
|
@@ -39,6 +42,12 @@ export declare class AnimationController {
|
|
|
39
42
|
private _speechDone;
|
|
40
43
|
get drawTargets(): Set<string>;
|
|
41
44
|
constructor(svg: SVGSVGElement, steps: ASTStepItem[], _container?: HTMLElement | undefined, _rc?: any | undefined, _config?: Record<string, string | number | boolean> | undefined);
|
|
45
|
+
private _buildDrawStepIndex;
|
|
46
|
+
private _buildGroupVisibilityIndex;
|
|
47
|
+
private _hideGroupDescendants;
|
|
48
|
+
private _isDeferredForGroupReveal;
|
|
49
|
+
private _revealGroupSubtree;
|
|
50
|
+
private _resolveCascadeTargets;
|
|
42
51
|
/** The narration caption element — mount it anywhere via `yourContainer.appendChild(anim.captionElement)` */
|
|
43
52
|
get captionElement(): HTMLDivElement | null;
|
|
44
53
|
/** Enable/disable browser text-to-speech for narrate steps */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAGlE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,CAAC;AACpB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/animation/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,WAAW,EAAE,MAAM,cAAc,CAAC;AAGlE,MAAM,MAAM,kBAAkB,GAC1B,aAAa,GACb,eAAe,GACf,iBAAiB,GACjB,iBAAiB,GACjB,eAAe,CAAC;AACpB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,kBAAkB,CAAC;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AACD,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;AAoZ5D,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAQtE;AACD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOtE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOvE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOtE;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAOvE;AAsKD,qBAAa,mBAAmB;IA6C5B,OAAO,CAAC,GAAG;aACK,KAAK,EAAE,WAAW,EAAE;IACpC,OAAO,CAAC,UAAU,CAAC;IACnB,OAAO,CAAC,GAAG,CAAC;IACZ,OAAO,CAAC,OAAO,CAAC;IAhDlB,OAAO,CAAC,KAAK,CAAM;IACnB,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,WAAW,CAQf;IACJ,OAAO,CAAC,UAAU,CAA2B;IAC7C,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,eAAe,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACtC,QAAQ,CAAC,gBAAgB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACvC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC1C,OAAO,CAAC,QAAQ,CAAC,yBAAyB,CAAsB;IAChE,OAAO,CAAC,QAAQ,CAAC,uBAAuB,CAAsB;IAC9D,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAA2B;IAG/D,OAAO,CAAC,UAAU,CAA+B;IACjD,OAAO,CAAC,cAAc,CAAgC;IAGtD,OAAO,CAAC,gBAAgB,CAA4B;IACpD,OAAO,CAAC,YAAY,CAAoB;IAGxC,OAAO,CAAC,UAAU,CAA2B;IAC7C,OAAO,CAAC,YAAY,CAA6C;IAGjE,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,WAAW,CAA8B;IAEjD,IAAI,WAAW,IAAI,GAAG,CAAC,MAAM,CAAC,CAE7B;gBAGS,GAAG,EAAE,aAAa,EACV,KAAK,EAAE,WAAW,EAAE,EAC5B,UAAU,CAAC,EAAE,WAAW,YAAA,EACxB,GAAG,CAAC,EAAE,GAAG,YAAA,EACT,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,YAAA;IA6D7D,OAAO,CAAC,mBAAmB;IAc3B,OAAO,CAAC,0BAA0B;IA4ClC,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,yBAAyB;IAiBjC,OAAO,CAAC,mBAAmB;IAW3B,OAAO,CAAC,sBAAsB;IAmB9B,6GAA6G;IAC7G,IAAI,cAAc,IAAI,cAAc,GAAG,IAAI,CAE1C;IAED,8DAA8D;IAC9D,IAAI,GAAG,IAAI,OAAO,CAAsB;IACxC,IAAI,GAAG,CAAC,EAAE,EAAE,OAAO,EAAoD;IAEvE,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,KAAK,IAAI,OAAO,CAEnB;IAED,EAAE,CAAC,QAAQ,EAAE,iBAAiB,GAAG,MAAM,IAAI;IAM3C,OAAO,CAAC,IAAI;IAUZ,KAAK,IAAI,IAAI;IAMb,uDAAuD;IACvD,OAAO,IAAI,IAAI;IAWf,IAAI,IAAI,OAAO;IASf,IAAI,IAAI,OAAO;IAST,IAAI,CAAC,SAAS,SAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAe1C,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAczB,OAAO,CAAC,uBAAuB;IAK/B,OAAO,CAAC,aAAa;IAYrB,OAAO,CAAC,WAAW;IA8BnB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,SAAS;IAwIjB,OAAO,CAAC,UAAU;IAsBlB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,QAAQ;IA+DhB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,OAAO;IAkBf,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,OAAO;IA4Kf,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,QAAQ;IAYhB,OAAO,CAAC,QAAQ;IAoChB,OAAO,CAAC,YAAY;IA0BpB,OAAO,CAAC,UAAU;IAwBlB,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,aAAa;IAKrB,uFAAuF;IACvF,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,YAAY;IASpB;;;;;;OAMG;IACH,OAAO,CAAC,kBAAkB;IA2E1B,OAAO,CAAC,mBAAmB;IAmB3B,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,qBAAqB;IAyB7B,OAAO,CAAC,iBAAiB;IAwCzB,OAAO,CAAC,sBAAsB;IAiB9B,OAAO,CAAC,oBAAoB;IA+B5B,OAAO,CAAC,YAAY;CAkCrB;AAED,eAAO,MAAM,aAAa,wjCAoCzB,CAAC"}
|