@ascii-web/client 0.9.1 → 0.9.3
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/dist/ascii-img.js +31 -14
- package/package.json +2 -2
package/dist/ascii-img.js
CHANGED
|
@@ -11,27 +11,38 @@ const STYLES = `
|
|
|
11
11
|
:host {
|
|
12
12
|
display: block;
|
|
13
13
|
width: 100%;
|
|
14
|
-
overflow: hidden;
|
|
15
14
|
contain: inline-size;
|
|
16
15
|
}
|
|
17
|
-
pre {
|
|
16
|
+
pre, .measure {
|
|
18
17
|
margin: 0;
|
|
19
18
|
padding: 0;
|
|
20
|
-
overflow: hidden;
|
|
21
19
|
white-space: pre;
|
|
22
|
-
max-width: 100%;
|
|
23
20
|
font-family: var(--ascii-font-family, monospace);
|
|
24
21
|
font-size: var(--ascii-font-size, 8px);
|
|
25
22
|
line-height: var(--ascii-line-height, 1);
|
|
23
|
+
}
|
|
24
|
+
pre {
|
|
26
25
|
color: var(--ascii-color, white);
|
|
27
26
|
background-color: var(--ascii-bg, black);
|
|
28
27
|
}
|
|
28
|
+
/* clips the measure span so its width never makes the page scroll */
|
|
29
|
+
.measure-box {
|
|
30
|
+
position: absolute;
|
|
31
|
+
width: 0;
|
|
32
|
+
height: 0;
|
|
33
|
+
overflow: hidden;
|
|
34
|
+
}
|
|
35
|
+
.measure {
|
|
36
|
+
visibility: hidden;
|
|
37
|
+
}
|
|
29
38
|
`;
|
|
30
39
|
export class AsciiImg extends HTMLElement {
|
|
31
40
|
static observedAttributes = ['src', 'alt', 'min-cols', 'max-cols'];
|
|
32
41
|
#shadow;
|
|
33
42
|
#pre;
|
|
43
|
+
#measure;
|
|
34
44
|
#resizeObserver;
|
|
45
|
+
#resizeFrame = 0;
|
|
35
46
|
#imageData = null;
|
|
36
47
|
#imageNaturalWidth = 0;
|
|
37
48
|
#imageNaturalHeight = 0;
|
|
@@ -47,8 +58,21 @@ export class AsciiImg extends HTMLElement {
|
|
|
47
58
|
this.#pre = document.createElement('pre');
|
|
48
59
|
this.#pre.setAttribute('aria-hidden', 'true');
|
|
49
60
|
this.#shadow.appendChild(this.#pre);
|
|
61
|
+
this.#measure = document.createElement('span');
|
|
62
|
+
this.#measure.className = 'measure';
|
|
63
|
+
this.#measure.textContent = 'M'.repeat(100);
|
|
64
|
+
const measureBox = document.createElement('div');
|
|
65
|
+
measureBox.className = 'measure-box';
|
|
66
|
+
measureBox.appendChild(this.#measure);
|
|
67
|
+
this.#shadow.appendChild(measureBox);
|
|
50
68
|
this.setAttribute('role', 'img');
|
|
51
|
-
|
|
69
|
+
// render on the next frame rather than inside the callback: rendering
|
|
70
|
+
// changes the host's height, which would resize the observed element
|
|
71
|
+
// mid-callback and trigger a ResizeObserver loop error
|
|
72
|
+
this.#resizeObserver = new ResizeObserver(() => {
|
|
73
|
+
cancelAnimationFrame(this.#resizeFrame);
|
|
74
|
+
this.#resizeFrame = requestAnimationFrame(() => this.renderAscii());
|
|
75
|
+
});
|
|
52
76
|
}
|
|
53
77
|
connectedCallback() {
|
|
54
78
|
this.#resizeObserver.observe(this);
|
|
@@ -56,6 +80,7 @@ export class AsciiImg extends HTMLElement {
|
|
|
56
80
|
}
|
|
57
81
|
disconnectedCallback() {
|
|
58
82
|
this.#resizeObserver.disconnect();
|
|
83
|
+
cancelAnimationFrame(this.#resizeFrame);
|
|
59
84
|
}
|
|
60
85
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
61
86
|
if (oldValue === newValue)
|
|
@@ -109,15 +134,7 @@ export class AsciiImg extends HTMLElement {
|
|
|
109
134
|
};
|
|
110
135
|
}
|
|
111
136
|
measureCharWidth() {
|
|
112
|
-
|
|
113
|
-
span.style.font = getComputedStyle(this.#pre).font;
|
|
114
|
-
span.style.visibility = 'hidden';
|
|
115
|
-
span.style.position = 'absolute';
|
|
116
|
-
span.textContent = 'M';
|
|
117
|
-
document.body.appendChild(span);
|
|
118
|
-
const width = span.getBoundingClientRect().width;
|
|
119
|
-
document.body.removeChild(span);
|
|
120
|
-
return width;
|
|
137
|
+
return this.#measure.getBoundingClientRect().width / 100;
|
|
121
138
|
}
|
|
122
139
|
async renderAscii() {
|
|
123
140
|
if (!this.#imageData || !this.#imageNaturalHeight || !this.#imageNaturalWidth)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ascii-web/client",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.3",
|
|
4
4
|
"description": "A web component that renders images as ASCII art using WASM",
|
|
5
5
|
"author": "Raffaele Cataldo",
|
|
6
6
|
"type": "module",
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"dist/"
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@ascii-web/wasm": "0.9.
|
|
19
|
+
"@ascii-web/wasm": "0.9.2"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"typescript": "^5.6.0"
|