@evqovs/danmaku 1.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2025 evqovv
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY
+SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
+IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# Danmaku  
+
+A lightweight ESM-based danmaku library.  
+
+## Usage:  
+
+* ### Step 1:  
+
+    ```ts
+    const container: HTMLDivElement | null = document.querySelector('#danmaku-container');
+    if (!container) {
+        throw new Error("Danmaku container doesn't exist.");
+    }
+    ```  
+
+    In the first place, you always need to get an element as the danmaku container (most often a `<div>`) using `document.getElementById()` or `document.querySelector()`.  
+
+* ### Step 2:  
+
+    ```ts
+    const manager = new DanmakuManager(info);
+    ```  
+
+    Create a `DanmakuManager` object.  
+
+    This is the parameter type for this `DanmakuManager` constructor:  
+
+    ```ts
+    interface ManagerOptions {
+        min_vertical_gap: number;
+	    min_horizontal_gap: number;
+        track_height: number;
+        max_launch_count_per_tick: number;
+        max_row_count: number;
+        alignment: DanmakuAlignment;
+        interval: number;
+    }
+    ```  
+
+    * min_vertical_gap: It determines the minimum vertical spacing of danmaku rows.  
+
+    * min_horizontal_gap: It determines the minimum horizontal spacing of danmakus (e.g. the spacing between the previous danmaku and the subsequent one).  
+
+    * track_height: It determines the height of one danmaku row.  
+
+    * max_launch_count_per_tick: The maximum number of launching danmakus per tick.  
+
+    * max_row_count: It determines the maximum number of danmaku rows.  
+
+    * alignment: It determines the position where the content of a danmaku should be placed.  
+
+        * top: The content will be placed at the top of the row.  
+
+        * center: The content will be placed at the middle of the row.  
+
+        * bottom: The content will be placed at the bottom of the row.  
+
+    * interval: Interval time for each rendering (e.g. each tick).  
+
+* ### Step 3:  
+
+    ```ts
+    manager.mount(container)；
+    ```  
+
+    Calling mount() method to mount the danmaku system to the container that we got before.  
+
+* ### Step 4:  
+
+    ```ts
+    manager.push(danmakus);
+    ```  
+
+    `push()` accepts an array whose type is `DanmakuOptions[]` from which each of elements describe a danmaku's behavior.  
+
+    ```ts
+    interface DanmakuOptions {
+    duration: number;
+    style: Partial<CSSStyleDeclaration>;
+    loop: boolean;
+    direction: DanmakuDirection;
+    node: Node[];
+    clone_node: boolean;
+    }
+    ```  
+
+    * duration: It specifies the duration of the danmaku from one side to the other.  
+
+    * style: You can specifies the style of this container which is a wrapper containing all content you gave of this danmaku.  
+
+    * loop: After playing done, drop its information or keep it for the next playing.  
+
+        * true: Keep it for the next playing.  
+
+        * false: Drop it.  
+
+    * direction: It specifies the horizontal movement direction of this danmaku.  
+
+    * node: All content you want to be wrapped.  
+
+    * clone_node: Copy the nodes you provided or not.  
+
+* ### Step 5:  
+
+    ```ts
+    manager.start_render();
+    ```  
+
+    It starts rendering danmaku.  
+
+* ### Something else:  
+
+    If you want a promise which will be settled when all danmakus you provided have been done with rendering, call `manager.manager.until_all_done()` which returns a promise that will be settled when all done with rendering.

package/dist/collision_detection.d.ts

@@ -0,0 +1,2 @@
+import type DanmakuItem from "./danmaku_item";
+export default function collision_detection(prev: DanmakuItem, cur: DanmakuItem, min_gap: number): boolean;

package/dist/danmaku.js

@@ -0,0 +1,635 @@
+class DanmakuTrack {
+    top;
+    height;
+    items = [];
+    bottom = 0;
+    constructor(top, height) {
+        this.top = top;
+        this.height = height;
+        this.bottom = top + height;
+    }
+    attach(d, alignment) {
+        this.items.push(d);
+        d.set_style('top', this.compute_position(d, alignment));
+    }
+    detach(d) {
+        this.items = this.items.filter(item => item !== d);
+    }
+    peek_last() {
+        return this.items.length !== 0 ? this.items[this.items.length - 1] : null;
+    }
+    cancel() {
+        for (const d of [...this.items]) {
+            d.plugin_system.lifecycle.end.emit(d);
+        }
+    }
+    compute_position(d, alignment) {
+        let pos = 0;
+        switch (alignment) {
+            case 'top':
+                pos = this.top;
+                break;
+            case 'center':
+                pos = this.top + (this.height - d.height) / 2;
+                break;
+            case 'bottom':
+                pos = this.top + this.height - d.height;
+                break;
+            default: throw new Error('Unexpected alignment.');
+        }
+        return `${pos}px`;
+    }
+}
+
+class DanmakuContainer {
+    constructor() {
+        this.node = document.createElement("div");
+        this.apply_style({
+            "overflow": "hidden",
+            "position": "relative",
+            "top": "0",
+            "left": "0",
+            "width": "100%",
+            "height": "100%",
+        });
+    }
+    apply_style(style) {
+        Object.assign(this.node.style, style);
+    }
+    mount(node) {
+        if (this.is_mounted()) {
+            throw new Error("Container already mounted. Unmount before remounting.");
+        }
+        node.appendChild(this.node);
+        this.parent_node = node;
+        this.format();
+    }
+    unmount() {
+        if (!this.is_mounted()) {
+            return;
+        }
+        this.node.parentNode.removeChild(this.node);
+        this.parent_node = null;
+    }
+    is_mounted() {
+        return this.parent_node !== null;
+    }
+    resize() {
+        this.format();
+    }
+    format() {
+        const rect = this.node.getBoundingClientRect();
+        Object.assign(this, {
+            width: rect.width,
+            height: rect.height,
+        });
+    }
+    node;
+    parent_node = null;
+    width = 0;
+    height = 0;
+}
+
+function collision_detection_impl(prev, cur, min_gap) {
+    const pv = prev.speed;
+    const cv = cur.speed;
+    const dv = cv - pv;
+    const moved = prev.get_moved_distance();
+    const gap = moved - prev.width;
+    if (gap < 0) {
+        return false;
+    }
+    if (pv >= cv) {
+        return gap >= min_gap;
+    }
+    const remain_dis = prev.container_width - gap + min_gap;
+    const remain_time = remain_dis / pv;
+    const catchup_time = (gap - min_gap) / dv;
+    return catchup_time > remain_time;
+}
+function collision_detection(prev, cur, min_gap) {
+    return collision_detection_impl(prev, cur, min_gap);
+}
+
+class SyncHook {
+    callbacks = [];
+    tap(cb) {
+        this.callbacks.push(cb);
+        return this;
+    }
+    untap(target) {
+        this.callbacks = this.callbacks.filter(cb => cb !== target);
+        return this;
+    }
+    emit(...args) {
+        [...this.callbacks].forEach(cb => cb(...args));
+    }
+}
+class PluginSystem {
+    lifecycle;
+    constructor(lifecycle) {
+        this.lifecycle = lifecycle;
+    }
+    use(plugin) {
+        for (const key in plugin) {
+            const hook = this.lifecycle[key];
+            const fn = plugin[key];
+            if (hook && fn) {
+                hook.tap(fn);
+            }
+        }
+    }
+}
+function create_danmaku_plugin_system() {
+    return new PluginSystem({
+        start: new SyncHook,
+        end: new SyncHook,
+        pause: new SyncHook,
+        resume: new SyncHook,
+        cancel: new SyncHook,
+        mount: new SyncHook,
+        unmount: new SyncHook,
+        format: new SyncHook,
+        resize: new SyncHook,
+    });
+}
+function create_manager_plugin_system() {
+    return new PluginSystem({
+        $start: new SyncHook,
+        $end: new SyncHook,
+        $pause: new SyncHook,
+        $resume: new SyncHook,
+        $cancel: new SyncHook,
+        $mount: new SyncHook,
+        $unmount: new SyncHook,
+        $format: new SyncHook,
+        $resize: new SyncHook,
+        start: new SyncHook,
+        stop: new SyncHook,
+        cancel: new SyncHook,
+        freeze: new SyncHook,
+        unfreeze: new SyncHook,
+        mount: new SyncHook,
+        unmount: new SyncHook,
+        format: new SyncHook,
+        resize: new SyncHook,
+        finish: new SyncHook,
+        screen_empty: new SyncHook,
+    });
+}
+function create_danmaku_bridge_plugin(m) {
+    const plugin = {};
+    for (const key of Object.keys(m.lifecycle)) {
+        if (key.startsWith('$')) {
+            const short_name = key.slice(1);
+            plugin[short_name] = (...args) => {
+                m.lifecycle[key].emit(...args);
+            };
+        }
+    }
+    return plugin;
+}
+
+const now = () => performance.now();
+const next_frame = requestAnimationFrame;
+
+class DanmakuItem {
+    options;
+    constructor(options) {
+        this.options = options;
+        this.apply_style(DanmakuItem.init_style);
+        this.apply_style(options.style);
+        this.duration = options.duration;
+        this.direction = options.direction;
+        for (const node of options.node) {
+            this.node.appendChild(options.clone_node ? node.cloneNode(true) : node);
+        }
+        this.node.addEventListener('transitionend', () => this.plugin_system.lifecycle.end.emit(this));
+    }
+    play() {
+        if (this.status !== 'idle') {
+            return;
+        }
+        this.recorder.start_time = now();
+        this.set_style('transition', `transform ${this.duration}ms linear`);
+        this.set_style('transform', `translateX(${this.destination}px)`);
+        this.status = 'running';
+        this.plugin_system.lifecycle.start.emit(this);
+    }
+    pause() {
+        if (this.status !== 'running') {
+            return;
+        }
+        this.recorder.last_paused_at = now();
+        const is_to_left = this.direction === 'to_left';
+        const negative = is_to_left ? -1 : 1;
+        const moved_dis = this.get_moved_distance();
+        this.set_style('transitionDuration', '0ms');
+        this.set_style('transform', `translateX(${negative * moved_dis}px)`);
+        this.status = 'paused';
+        this.plugin_system.lifecycle.pause.emit(this);
+    }
+    resume() {
+        if (this.status !== 'paused') {
+            return;
+        }
+        this.recorder.paused_duration += now() - this.recorder.last_paused_at;
+        const remaining_time = this.duration - this.get_elapsed_time();
+        this.recorder.last_paused_at = 0;
+        this.set_style('transitionDuration', `${remaining_time}ms`);
+        this.set_style('transform', `translateX(${this.destination}px)`);
+        this.status = 'running';
+        this.plugin_system.lifecycle.resume.emit(this);
+    }
+    cancel() {
+        if (this.status === 'idle') {
+            return;
+        }
+        this.set_style('transition', '');
+        this.set_style('transform', '');
+        Object.assign(this.recorder, {
+            start_time: 0,
+            last_paused_at: 0,
+            paused_duration: 0,
+        });
+        this.status = 'idle';
+        this.plugin_system.lifecycle.cancel.emit(this);
+    }
+    resize() {
+        if (!this.container_node) {
+            throw new Error('This item is not mounted yet.');
+        }
+        const is_to_left = this.direction === 'to_left';
+        const negative = is_to_left ? -1 : 1;
+        const { width: cw, height: ch } = this.container_node.getBoundingClientRect();
+        const et = this.get_elapsed_time();
+        const total_dis = cw + this.width;
+        const prog = et / this.duration;
+        const new_x = negative * total_dis * prog;
+        const remaining_time = this.duration - et;
+        const dest = negative * total_dis;
+        this.set_style('transitionDuration', '0ms');
+        this.set_style('transform', `translateX(${new_x}px)`);
+        if (this.status === 'running') {
+            next_frame(() => {
+                this.set_style('transitionDuration', `${remaining_time}ms`);
+                this.set_style('transform', `translateX(${dest}px)`);
+            });
+        }
+        Object.assign(this, {
+            container_width: cw,
+            container_height: ch,
+            destination: dest,
+        });
+    }
+    get_elapsed_time() {
+        switch (this.status) {
+            case 'idle': return 0;
+            case 'running': return now() - this.recorder.start_time - this.recorder.paused_duration;
+            case 'paused': return this.recorder.last_paused_at - this.recorder.start_time - this.recorder.paused_duration;
+            default: throw new Error('Unexpected status.');
+        }
+    }
+    get_moved_distance() {
+        return this.get_elapsed_time() * this.speed;
+    }
+    is_mounted() {
+        return this.container_node !== null;
+    }
+    mount(node) {
+        this.unmount();
+        this.container_node = node;
+        this.container_node.appendChild(this.node);
+        this.format();
+    }
+    unmount() {
+        if (this.node.parentNode) {
+            this.node.parentNode.removeChild(this.node);
+        }
+        this.container_node = null;
+    }
+    set_style(key, value) {
+        this.node.style[key] = value;
+    }
+    apply_style(style) {
+        Object.assign(this.node.style, style);
+    }
+    attach(track, alignment) {
+        if (this.track !== null) {
+            return;
+        }
+        track.attach(this, alignment);
+    }
+    detach() {
+        if (this.track !== null) {
+            this.track.detach(this);
+            this.track = null;
+        }
+    }
+    format() {
+        if (!this.container_node) {
+            throw new Error('This item is not mounted yet.');
+        }
+        const { width: w, height: h } = this.node.getBoundingClientRect();
+        const { width: cw, height: ch } = this.container_node.getBoundingClientRect();
+        const is_to_left = this.direction === 'to_left';
+        const negative = is_to_left ? -1 : 1;
+        Object.assign(this, {
+            width: w,
+            height: h,
+            container_width: cw,
+            container_height: ch,
+            total_distance: cw + w,
+            speed: (cw + w) / this.duration,
+            destination: negative * (cw + w),
+        });
+        this.set_style(is_to_left ? 'right' : 'left', `${-this.width}px`);
+    }
+    width = 0;
+    height = 0;
+    plugin_system = create_danmaku_plugin_system();
+    container_width = 0;
+    container_height = 0;
+    duration = 0;
+    speed = 0;
+    direction;
+    destination = 0;
+    status = 'idle';
+    node = document.createElement('div');
+    container_node = null;
+    track = null;
+    recorder = {
+        start_time: 0,
+        last_paused_at: 0,
+        paused_duration: 0,
+    };
+    static init_style = {
+        'position': 'absolute',
+        'whiteSpace': 'nowrap',
+        'display': 'flex',
+        'alignItems': 'center',
+        'willChange': 'transform',
+    };
+}
+
+class DanmakuEngine {
+    options;
+    container = new DanmakuContainer();
+    tracks = [];
+    stash = [];
+    set = new Set;
+    constructor(options) {
+        this.options = options;
+    }
+    format() {
+        this.format_tracks();
+    }
+    add(info) {
+        this.stash.push(...info);
+    }
+    each(fn) {
+        for (const d of this.set) {
+            fn(d);
+        }
+    }
+    clear_stash() {
+        this.stash.length = 0;
+    }
+    create_and_mount_danmaku(info) {
+        const d = new DanmakuItem(info);
+        d.mount(this.container.node);
+        return d;
+    }
+    render(bridge_plugin, hooks) {
+        if (this.tracks.length === 0 || this.stash.length === 0) {
+            return;
+        }
+        const attempts = Math.min(this.stash.length, this.options.max_launch_count_per_tick, this.tracks.length);
+        for (let i = 0; i < attempts; i++) {
+            const info = this.stash.shift();
+            if (!info) {
+                break;
+            }
+            const d = this.create_and_mount_danmaku(info);
+            if (d.height > this.options.track_height) {
+                d.unmount();
+                break;
+            }
+            const track = this.get_launchable_track(d);
+            if (!track) {
+                d.unmount();
+                this.stash.unshift(info);
+                continue;
+            }
+            const cleanup = () => {
+                d.detach();
+                this.set.delete(d);
+                d.unmount();
+            };
+            const is_screen_empty = () => {
+                if (this.set.size === 0) {
+                    hooks.screen_empty.emit();
+                }
+            };
+            const is_finished = () => {
+                if (this.set.size === 0 && this.stash.length === 0) {
+                    hooks.finish.emit();
+                }
+            };
+            d.plugin_system.use(bridge_plugin);
+            d.plugin_system.use({
+                end: () => {
+                    cleanup();
+                    is_screen_empty();
+                    is_finished();
+                },
+                cancel: () => {
+                    cleanup();
+                    is_screen_empty();
+                    is_finished();
+                }
+            });
+            d.attach(track, this.options.alignment);
+            d.play();
+            this.set.add(d);
+            if (info.loop) {
+                this.stash.push(info);
+            }
+        }
+    }
+    resize() {
+        this.each(d => d.resize());
+        const old_h = this.container.height;
+        this.container.resize();
+        this.resize_tracks(old_h);
+    }
+    get_launchable_track(cur) {
+        for (const track of this.tracks) {
+            const prev = track.peek_last();
+            if (!prev ||
+                collision_detection(prev, cur, this.options.min_horizontal_gap)) {
+                return track;
+            }
+        }
+        return null;
+    }
+    format_tracks() {
+        const { max_row_count, track_height, min_vertical_gap } = this.options;
+        const { height } = this.container;
+        const rows = Math.min(max_row_count, Math.floor((height + min_vertical_gap) / (track_height + min_vertical_gap)));
+        const row_step = track_height + min_vertical_gap;
+        const total_height = (rows - 1) * row_step + track_height;
+        const remaining_gap = Math.max(0, height - total_height);
+        const start_y = remaining_gap / 2;
+        for (let i = 0; i < rows; i++) {
+            this.tracks.push(new DanmakuTrack(start_y + i * row_step, this.options.track_height));
+        }
+    }
+    resize_tracks(old_h) {
+        const new_h = this.container.height;
+        if (new_h === old_h) {
+            return;
+        }
+        const is_shrinking = new_h < old_h;
+        is_shrinking ? this.shrink_tracks(new_h) : this.expand_tracks(new_h);
+    }
+    shrink_tracks(limit) {
+        for (let i = this.tracks.length - 1; i >= 0; i--) {
+            const t = this.tracks[i];
+            if (t.bottom > limit) {
+                t.cancel();
+                this.tracks.splice(i, 1);
+            }
+        }
+    }
+    expand_tracks(limit) {
+        if (this.tracks.length === 0) {
+            this.format_tracks();
+            return;
+        }
+        const last = this.tracks[this.tracks.length - 1];
+        let top = last.bottom + this.options.min_vertical_gap;
+        while (top + this.options.track_height <= limit) {
+            this.tracks.push(new DanmakuTrack(top, this.options.track_height));
+            top += this.options.track_height + this.options.min_vertical_gap;
+        }
+    }
+}
+
+class DanmakuManager {
+    options;
+    plugin_system = create_manager_plugin_system();
+    status = 'idle';
+    engine;
+    render_timer = null;
+    constructor(options) {
+        this.options = options;
+        this.engine = new DanmakuEngine(options);
+    }
+    push(info) {
+        this.engine.add(info);
+    }
+    until_all_done() {
+        return new Promise(res => this.plugin_system.lifecycle.finish.tap(() => res()));
+    }
+    start_render() {
+        if (this.status !== 'idle') {
+            return;
+        }
+        const cycle = () => {
+            this.render_timer = setTimeout(cycle, this.options.interval);
+            this.engine.render(create_danmaku_bridge_plugin(this.plugin_system), {
+                finish: this.plugin_system.lifecycle.finish,
+                screen_empty: this.plugin_system.lifecycle.screen_empty
+            });
+        };
+        cycle();
+        this.status = 'rendering';
+        this.plugin_system.lifecycle.start.emit();
+    }
+    stop_render() {
+        if (this.status !== 'rendering') {
+            return;
+        }
+        if (this.render_timer) {
+            clearTimeout(this.render_timer);
+        }
+        this.render_timer = null;
+        this.status = 'idle';
+        this.plugin_system.lifecycle.stop.emit();
+    }
+    cancel() {
+        this.stop_render();
+        this.engine.each(d => d.cancel());
+        this.engine.clear_stash();
+        this.status = 'idle';
+        this.plugin_system.lifecycle.cancel.emit();
+    }
+    graceful_stop() {
+        this.stop_render();
+        return new Promise(res => this.plugin_system.lifecycle.screen_empty.tap(() => {
+            res();
+            this.status = 'idle';
+            this.plugin_system.lifecycle.stop.emit();
+        }));
+    }
+    graceful_cancel() {
+        this.stop_render();
+        this.engine.clear_stash();
+        return new Promise(res => this.plugin_system.lifecycle.screen_empty.tap(() => {
+            res();
+            this.status = 'idle';
+            this.plugin_system.lifecycle.cancel.emit();
+        }));
+    }
+    freeze() {
+        if (this.status !== 'rendering') {
+            return;
+        }
+        this.stop_render();
+        this.engine.each(d => d.pause());
+        this.status = 'frozen';
+        this.plugin_system.lifecycle.freeze.emit();
+    }
+    unfreeze() {
+        if (this.status !== 'frozen') {
+            return;
+        }
+        this.engine.each(d => d.resume());
+        this.start_render();
+        this.status = 'rendering';
+        this.plugin_system.lifecycle.unfreeze.emit();
+    }
+    mount(node) {
+        if (this.engine.container.is_mounted()) {
+            this.unmount();
+        }
+        this.engine.container.mount(node);
+        this.format();
+        this.plugin_system.lifecycle.mount.emit(node);
+    }
+    unmount() {
+        if (!this.engine.container.is_mounted()) {
+            return;
+        }
+        const p = this.engine.container.parent_node;
+        this.engine.container.unmount();
+        this.plugin_system.lifecycle.mount.emit(p);
+    }
+    resize() {
+        this.engine.resize();
+        this.plugin_system.lifecycle.resize.emit();
+    }
+    set_style(key, value) {
+        this.engine.each(d => d.set_style(key, value));
+    }
+    apply_style(style) {
+        this.engine.each(d => d.apply_style(style));
+    }
+    format() {
+        this.engine.format();
+        this.plugin_system.lifecycle.format.emit();
+    }
+}
+
+export { DanmakuManager };

package/dist/danmaku_container.d.ts

@@ -0,0 +1,13 @@
+export default class DanmakuContainer {
+    constructor();
+    apply_style(style: Partial<CSSStyleDeclaration>): void;
+    mount(node: HTMLElement): void;
+    unmount(): void;
+    is_mounted(): boolean;
+    resize(): void;
+    private format;
+    node: HTMLDivElement;
+    parent_node: HTMLElement | null;
+    width: number;
+    height: number;
+}

package/dist/danmaku_engine.d.ts

@@ -0,0 +1,35 @@
+import DanmakuContainer from "./danmaku_container";
+import DanmakuItem, { DanmakuOptions } from "./danmaku_item";
+import { create_danmaku_bridge_plugin, ManagerHooks } from "./lifecycle";
+export type DanmakuAlignment = "top" | "center" | "bottom";
+export interface EngineOptions {
+    min_vertical_gap: number;
+    min_horizontal_gap: number;
+    track_height: number;
+    max_launch_count_per_tick: number;
+    max_row_count: number;
+    alignment: DanmakuAlignment;
+}
+export default class DanmakuEngine {
+    private options;
+    container: DanmakuContainer;
+    private tracks;
+    private stash;
+    private set;
+    constructor(options: EngineOptions);
+    format(): void;
+    add(info: DanmakuOptions[]): void;
+    each(fn: (d: DanmakuItem) => void): void;
+    clear_stash(): void;
+    create_and_mount_danmaku(info: DanmakuOptions): DanmakuItem;
+    render(bridge_plugin: ReturnType<typeof create_danmaku_bridge_plugin>, hooks: {
+        finish: ManagerHooks['finish'];
+        screen_empty: ManagerHooks['screen_empty'];
+    }): void;
+    resize(): void;
+    private get_launchable_track;
+    private format_tracks;
+    private resize_tracks;
+    private shrink_tracks;
+    private expand_tracks;
+}

package/dist/danmaku_item.d.ts

@@ -0,0 +1,47 @@
+import { DanmakuAlignment } from "./danmaku_engine";
+import DanmakuTrack from "./danmaku_track";
+export interface DanmakuOptions {
+    duration: number;
+    style: Partial<CSSStyleDeclaration>;
+    loop: boolean;
+    direction: DanmakuDirection;
+    node: Node[];
+    clone_node: boolean;
+}
+export type DanmakuStatus = 'idle' | 'running' | 'paused';
+export type DanmakuDirection = 'to_left' | 'to_right';
+export type StyleKey = keyof Omit<CSSStyleDeclaration, 'length' | 'parentRule'>;
+export default class DanmakuItem {
+    options: DanmakuOptions;
+    constructor(options: DanmakuOptions);
+    play(): void;
+    pause(): void;
+    resume(): void;
+    cancel(): void;
+    resize(): void;
+    get_elapsed_time(): number;
+    get_moved_distance(): number;
+    is_mounted(): boolean;
+    mount(node: HTMLElement): void;
+    unmount(): void;
+    set_style<T extends StyleKey>(key: T, value: CSSStyleDeclaration[T]): void;
+    apply_style(style: Partial<CSSStyleDeclaration>): void;
+    attach(track: DanmakuTrack, alignment: DanmakuAlignment): void;
+    detach(): void;
+    private format;
+    width: number;
+    height: number;
+    plugin_system: import("./lifecycle").PluginSystem<import("./lifecycle").DanmakuHooks>;
+    container_width: number;
+    container_height: number;
+    duration: number;
+    speed: number;
+    direction: DanmakuDirection;
+    private destination;
+    private status;
+    private node;
+    private container_node;
+    private track;
+    private recorder;
+    private static readonly init_style;
+}

package/dist/danmaku_manager.d.ts

@@ -0,0 +1,28 @@
+import { EngineOptions } from "./danmaku_engine";
+import { DanmakuOptions, StyleKey } from "./danmaku_item";
+export interface ManagerOptions extends EngineOptions {
+    interval: number;
+}
+export default class DanmakuManager {
+    options: ManagerOptions;
+    plugin_system: import("./lifecycle").PluginSystem<import("./lifecycle").ManagerHooks>;
+    private status;
+    private engine;
+    private render_timer;
+    constructor(options: ManagerOptions);
+    push(info: DanmakuOptions[]): void;
+    until_all_done(): Promise<void>;
+    start_render(): void;
+    stop_render(): void;
+    cancel(): void;
+    graceful_stop(): Promise<void>;
+    graceful_cancel(): Promise<void>;
+    freeze(): void;
+    unfreeze(): void;
+    mount(node: HTMLElement): void;
+    unmount(): void;
+    resize(): void;
+    set_style<T extends StyleKey>(key: T, value: CSSStyleDeclaration[T]): void;
+    apply_style(style: Partial<CSSStyleDeclaration>): void;
+    private format;
+}

package/dist/danmaku_track.d.ts

@@ -0,0 +1,14 @@
+import { DanmakuAlignment } from "./danmaku_engine";
+import DanmakuItem from "./danmaku_item";
+export default class DanmakuTrack {
+    top: number;
+    height: number;
+    private items;
+    bottom: number;
+    constructor(top: number, height: number);
+    attach(d: DanmakuItem, alignment: DanmakuAlignment): void;
+    detach(d: DanmakuItem): void;
+    peek_last(): DanmakuItem | null;
+    cancel(): void;
+    private compute_position;
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { DanmakuAlignment } from "./danmaku_engine";
+import { DanmakuDirection, DanmakuOptions } from "./danmaku_item";
+import DanmakuManager, { ManagerOptions } from "./danmaku_manager";
+export { DanmakuManager };
+export type { DanmakuAlignment, DanmakuDirection, DanmakuOptions, ManagerOptions, };

package/dist/lifecycle.d.ts

@@ -0,0 +1,50 @@
+import DanmakuItem from "./danmaku_item";
+export declare class SyncHook<T extends any[] = []> {
+    private callbacks;
+    tap(cb: (...args: T) => void): this;
+    untap(target: (...args: T) => void): this;
+    emit(...args: T): void;
+}
+export declare class PluginSystem<T extends Record<string, SyncHook<any>>> {
+    lifecycle: T;
+    constructor(lifecycle: T);
+    use(plugin: {
+        [K in keyof T]?: T[K]['emit'];
+    }): void;
+}
+export type DanmakuHooks = {
+    start: SyncHook<[DanmakuItem]>;
+    end: SyncHook<[DanmakuItem]>;
+    pause: SyncHook<[DanmakuItem]>;
+    resume: SyncHook<[DanmakuItem]>;
+    cancel: SyncHook<[DanmakuItem]>;
+    mount: SyncHook<[DanmakuItem]>;
+    unmount: SyncHook<[DanmakuItem]>;
+    format: SyncHook<[DanmakuItem]>;
+    resize: SyncHook<[DanmakuItem]>;
+};
+export type ManagerHooks = {
+    $start: SyncHook<[DanmakuItem]>;
+    $end: SyncHook<[DanmakuItem]>;
+    $pause: SyncHook<[DanmakuItem]>;
+    $resume: SyncHook<[DanmakuItem]>;
+    $cancel: SyncHook<[DanmakuItem]>;
+    $mount: SyncHook<[DanmakuItem]>;
+    $unmount: SyncHook<[DanmakuItem]>;
+    $format: SyncHook<[DanmakuItem]>;
+    $resize: SyncHook<[DanmakuItem]>;
+    start: SyncHook<[]>;
+    stop: SyncHook<[]>;
+    cancel: SyncHook<[]>;
+    freeze: SyncHook<[]>;
+    unfreeze: SyncHook<[]>;
+    mount: SyncHook<[HTMLElement]>;
+    unmount: SyncHook<[HTMLElement]>;
+    format: SyncHook<[]>;
+    resize: SyncHook<[]>;
+    finish: SyncHook<[]>;
+    screen_empty: SyncHook<[]>;
+};
+export declare function create_danmaku_plugin_system(): PluginSystem<DanmakuHooks>;
+export declare function create_manager_plugin_system(): PluginSystem<ManagerHooks>;
+export declare function create_danmaku_bridge_plugin(m: ReturnType<typeof create_manager_plugin_system>): Record<string, unknown>;

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const now: () => number;
+export declare const next_frame: typeof requestAnimationFrame;

package/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "@evqovs/danmaku",
+    "version": "1.0.0",
+    "description": "A lightweight ESM-based danmaku library.",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./dist/danmaku.js",
+            "types": "./dist/index.d.ts"
+        }
+    },
+    "scripts": {
+        "clean": "npx rimraf ./dist",
+        "build": "npm run clean && npx rollup -c"
+    },
+    "devDependencies": {
+        "@rollup/plugin-typescript": "^12.3.0",
+        "rimraf": "^6.0.1",
+        "rollup": "^4.52.5",
+        "tslib": "^2.8.1"
+    },
+    "author": "evqovv",
+    "license": "ISC",
+    "keywords": [
+        "danmaku"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/evqovv/danmaku.git"
+    },
+    "homepage": "https://github.com/evqovv/danmaku#readme",
+    "bugs": {
+        "url": "https://github.com/evqovv/danmaku/issues"
+    }
+}