https://caldariprimeponyclub.com/src/ui/ImageQueue.mjs

1import { ClearImage, SetImage } from "./ImageRepository.mjs";
2
3const IN_FLIGHT = 32;
4
5const STALL_MS = 8000;
6
7const pending = [];
8
9let active = 0;
10
11function Centre(element)
12{
13    const host = element.closest(".cmp-grid, .asset-pane, .cat-columns") ?? document.body;
14    const box = host.getBoundingClientRect();
15    const left = Math.max(box.left, 0);
16    const right = Math.min(box.right, window.innerWidth);
17
18    return {
19        x: (left + right) / 2,
20        y: window.innerHeight / 2
21    };
22}
23
24function Rank(element)
25{
26    const box = element.getBoundingClientRect();
27
28    if (!box.width || !box.height) return Number.MAX_SAFE_INTEGER;
29
30    const centre = Centre(element);
31    const dx = (box.left + box.width / 2 - centre.x) / box.width;
32    const dy = (box.top + box.height / 2 - centre.y) / box.height;
33
34    const ring = Math.max(Math.abs(dx), Math.abs(dy));
35    const angle = Math.atan2(dy, dx) + Math.PI;
36
37    return Math.round(ring) * 1000 + angle * 100;
38}
39
40function Pump()
41{
42    while (active < IN_FLIGHT && pending.length)
43    {
44
45        pending.sort((left, right) => left.rank - right.rank);
46
47        const job = pending.shift();
48
49        if (!job.image.isConnected)
50        {
51            continue;
52        }
53
54        active++;
55
56        let released = false;
57        const Release = () =>
58        {
59            if (released) return;
60            released = true;
61            active--;
62            Pump();
63        };
64        const timer = setTimeout(Release, STALL_MS);
65
66        SetImage(job.image, job.src, job.options).finally(() =>
67        {
68            clearTimeout(timer);
69            Release();
70        });
71    }
72}
73
74export function QueueImage(image, src, options = {})
75{
76    ClearImage(image);
77
78    for (let i = pending.length - 1; i >= 0; i--)
79    {
80        if (pending[i].image === image) pending.splice(i, 1);
81    }
82    pending.push({ image, src, options, rank: Rank(image) });
83    Pump();
84}
85
86export function QueuedCount()
87{
88    return pending.length + active;
89}
90
91export default QueueImage;