@toonstrip/element 0.1.0 → 0.1.1
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 +74 -0
- package/package.json +16 -2
package/README.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# @toonstrip/element
|
|
2
|
+
|
|
3
|
+
`<comic-strip>` — a zero-framework-dependency custom element that renders a
|
|
4
|
+
`ComicStripDocument` (from `@toonstrip/schema`) as a live, responsive strip
|
|
5
|
+
of `<canvas>` panels, wrapping `@toonstrip/core`. Works in any framework, or
|
|
6
|
+
none.
|
|
7
|
+
|
|
8
|
+
Part of [toonstrip](https://github.com/dkdev24/toonstrip), a
|
|
9
|
+
framework-embeddable comic-strip renderer. Using Astro? See
|
|
10
|
+
[`@toonstrip/astro`](https://www.npmjs.com/package/@toonstrip/astro) for a
|
|
11
|
+
ready-made `<ComicStrip>` component instead.
|
|
12
|
+
|
|
13
|
+
## Install
|
|
14
|
+
|
|
15
|
+
```
|
|
16
|
+
npm install @toonstrip/element
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```html
|
|
22
|
+
<comic-strip id="strip"></comic-strip>
|
|
23
|
+
|
|
24
|
+
<script type="module">
|
|
25
|
+
import "@toonstrip/element";
|
|
26
|
+
|
|
27
|
+
const strip = document.getElementById("strip");
|
|
28
|
+
strip.packs = ["/packs/comic-chat/"]; // one or more asset-pack base URLs
|
|
29
|
+
strip.document = {
|
|
30
|
+
version: 1,
|
|
31
|
+
panels: [
|
|
32
|
+
{
|
|
33
|
+
backdrop: "pastoral",
|
|
34
|
+
camera: "establishing",
|
|
35
|
+
bodies: [{ character: "dan", emotion: { angle: 0, intensity: 0.6 } }],
|
|
36
|
+
speakers: [{ speaker: "caption", balloon: "caption", text: "A field outside town." }],
|
|
37
|
+
},
|
|
38
|
+
],
|
|
39
|
+
};
|
|
40
|
+
</script>
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
- `.packs` — array of asset-pack **base URLs**. Each must serve a
|
|
44
|
+
`pack.json` plus the `characters/`/`backdrops/` files it declares (fetched
|
|
45
|
+
over HTTP, not read from disk). Registering more than one pack that
|
|
46
|
+
declares the same character/backdrop id throws.
|
|
47
|
+
- `.document` — a `ComicStripDocument`, validated via `@toonstrip/schema` at
|
|
48
|
+
the boundary.
|
|
49
|
+
- `src="..."` attribute is also accepted as a convenience for fetching the
|
|
50
|
+
document JSON from a URL instead of setting `.document` directly.
|
|
51
|
+
|
|
52
|
+
## Behavior
|
|
53
|
+
|
|
54
|
+
- One `<canvas>` per panel, laid out via `@toonstrip/core`'s `layoutStrip`
|
|
55
|
+
(3 columns wide, 2 mid-width, 1 narrow) and relaid live on
|
|
56
|
+
`ResizeObserver`.
|
|
57
|
+
- `devicePixelRatio`-aware backing store; `IntersectionObserver`-gated
|
|
58
|
+
painting (a panel scrolled off-screen isn't redrawn until visible again).
|
|
59
|
+
- Shadow DOM style isolation; each panel carries `role="img"` and a
|
|
60
|
+
generated `aria-label` describing its camera shot, room, and dialogue.
|
|
61
|
+
- Pose selection is frozen once per panel in document order, so a resize
|
|
62
|
+
repaint reproduces the same figures rather than re-rolling them.
|
|
63
|
+
|
|
64
|
+
## Asset packs
|
|
65
|
+
|
|
66
|
+
Any `@toonstrip/pack-*` package (e.g.
|
|
67
|
+
[`@toonstrip/pack-comic-chat`](https://www.npmjs.com/package/@toonstrip/pack-comic-chat))
|
|
68
|
+
works, served as static files at the URL you pass to `.packs`. See
|
|
69
|
+
[`docs/packs.md`](https://github.com/dkdev24/toonstrip/blob/main/docs/packs.md)
|
|
70
|
+
in the repo for the pack contract and how to build your own.
|
|
71
|
+
|
|
72
|
+
## License
|
|
73
|
+
|
|
74
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toonstrip/element",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "<comic-strip>, a zero-framework-deps custom element for embedding toonstrip comic strips.",
|
|
4
5
|
"license": "MIT",
|
|
5
6
|
"type": "module",
|
|
6
7
|
"main": "./dist/index.js",
|
|
@@ -27,5 +28,18 @@
|
|
|
27
28
|
},
|
|
28
29
|
"publishConfig": {
|
|
29
30
|
"access": "public"
|
|
30
|
-
}
|
|
31
|
+
},
|
|
32
|
+
"keywords": [
|
|
33
|
+
"toonstrip",
|
|
34
|
+
"comic",
|
|
35
|
+
"custom-element",
|
|
36
|
+
"web-components"
|
|
37
|
+
],
|
|
38
|
+
"repository": {
|
|
39
|
+
"type": "git",
|
|
40
|
+
"url": "git+https://github.com/dkdev24/toonstrip.git",
|
|
41
|
+
"directory": "packages/element"
|
|
42
|
+
},
|
|
43
|
+
"homepage": "https://github.com/dkdev24/toonstrip#readme",
|
|
44
|
+
"bugs": "https://github.com/dkdev24/toonstrip/issues"
|
|
31
45
|
}
|