autumn_plugin_pixijs/
lib.rs

1//! This crate adds PixiJS 2D canvas stages to Autumn apps. It works with
2//! Maud and htmx.
3//!
4//! Add [`PixiPlugin`] to the app. Put [`pixi_stylesheet()`] and
5//! [`pixi_script()`] in the page `<head>`. Then write a [`Stage`]:
6//!
7//! ```rust,no_run
8//! use autumn_plugin_pixijs::{
9//!     Color, PixiPlugin, Shape, Sprite, Stage, Text, pixi_script, pixi_stylesheet,
10//! };
11//! use autumn_web::prelude::*;
12//!
13//! #[get("/")]
14//! async fn index() -> Markup {
15//!     html! {
16//!         html {
17//!             head { (pixi_stylesheet()) (pixi_script()) }
18//!             body {
19//!                 (Stage::new()
20//!                     .id("game")
21//!                     .label("A coin game")
22//!                     .background(Color::hex(0x0f172a))
23//!                     .add(Text::new("Tap the coin").fill(Color::WHITE).position([400.0, 60.0]))
24//!                     .add(Shape::star(5, 120.0, 50.0).fill(Color::hex(0xff7a18)).spin(30.0))
25//!                     .add(Sprite::new("/static/img/coin.png")
26//!                         .label("Gold coin")
27//!                         .tap_post("/collect")
28//!                         .tap_target("#game")
29//!                         .tap_swap("outerHTML")))
30//!             }
31//!         }
32//!     }
33//! }
34//!
35//! # async fn run() {
36//! autumn_web::app()
37//!     .plugin(PixiPlugin::new())
38//!     .routes(routes![index])
39//!     .run()
40//!     .await;
41//! # }
42//! ```
43//!
44//! # How it works
45//!
46//! - The crate contains [PixiJS](https://pixijs.com) 8.22.0 (MIT) and its
47//!   `unsafe-eval` package. It does not use npm or a bundler.
48//!   [`PIXI_ASSETS`] serves them under `/static/_plugins/pixi/`. SRI covers
49//!   every tag.
50//! - The builder renders `data-pixi-*` attributes. `init.js` reads them and
51//!   builds the stage. You can also write the attributes by hand.
52//! - `init.js` scans on load, on `htmx:afterSwap`, and on each DOM insertion.
53//!   It builds a stage again when its declarations change. It frees a stage
54//!   when its element leaves the document.
55//! - A tappable object sends a `pixi:tap` event from its declaration. An
56//!   htmx trigger can use it.
57//! - The `pixi:ready` event gives your own JavaScript the application, the
58//!   root container, and the global `PIXI`.
59//!
60//! # Limits
61//!
62//! - The plugin uses WebGL or Canvas 2D. It does not use the WebGPU
63//!   renderer.
64//! - The declarative layer has no filters, masks, particles, or physics.
65//!   Use the `pixi:ready` event for custom code.
66//! - Each WebGL stage has its own context. Browsers keep about 16 contexts.
67//!   [`Renderer::Canvas`] uses no WebGL context.
68//! - Do not let user content keep `data-pixi-*` or `hx-*` attributes. User
69//!   markup could then start stages, load image URLs, and send requests.
70
71mod assets;
72mod plugin;
73mod script;
74mod stage;
75
76pub use assets::{ASSETS_NAMESPACE, PIXI_ASSETS, PIXI_VERSION, VENDORED, VendoredFile};
77pub use plugin::{PLUGIN_NAME, PixiPlugin};
78pub use script::{pixi_script, pixi_stylesheet};
79pub use stage::{
80    Align, AnimatedSprite, Color, DEFAULT_STAGE_SIZE, Geometry, MAX_POLYGON_POINTS, MAX_STAGE_SIDE,
81    Renderer, Shape, Sprite, Stage, StageObject, Text, TilingSprite, Vec2,
82};
autumn_plugin_pixijs/lib.rs

autumn_plugin_pixijs/
lib.rs
