textmode.export.js 1.2.1 → 1.2.2
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 +170 -172
- package/dist/textmode.export.esm.js +963 -944
- package/dist/textmode.export.umd.js +2 -2
- package/dist/types/exporters/base/DataExtractor.d.ts +2 -1
- package/dist/types/exporters/base/DataExtractor.d.ts.map +1 -1
- package/dist/types/exporters/base/FileHandler.d.ts +3 -0
- package/dist/types/exporters/base/FileHandler.d.ts.map +1 -1
- package/dist/types/exporters/gif/GIFExporter.d.ts +5 -2
- package/dist/types/exporters/gif/GIFExporter.d.ts.map +1 -1
- package/dist/types/exporters/gif/GIFRecorder.d.ts +3 -3
- package/dist/types/exporters/gif/GIFRecorder.d.ts.map +1 -1
- package/dist/types/exporters/gif/types.d.ts.map +1 -1
- package/dist/types/exporters/image/ImageExporter.d.ts +7 -2
- package/dist/types/exporters/image/ImageExporter.d.ts.map +1 -1
- package/dist/types/exporters/image/index.d.ts +1 -1
- package/dist/types/exporters/image/index.d.ts.map +1 -1
- package/dist/types/exporters/image/types.d.ts.map +1 -1
- package/dist/types/exporters/svg/SVGContentGenerator.d.ts +9 -1
- package/dist/types/exporters/svg/SVGContentGenerator.d.ts.map +1 -1
- package/dist/types/exporters/svg/SVGDataExtractor.d.ts +3 -1
- package/dist/types/exporters/svg/SVGDataExtractor.d.ts.map +1 -1
- package/dist/types/exporters/svg/SVGExporter.d.ts +3 -0
- package/dist/types/exporters/svg/SVGExporter.d.ts.map +1 -1
- package/dist/types/exporters/svg/SVGPathGenerator.d.ts +8 -4
- package/dist/types/exporters/svg/SVGPathGenerator.d.ts.map +1 -1
- package/dist/types/exporters/svg/index.d.ts +1 -1
- package/dist/types/exporters/svg/index.d.ts.map +1 -1
- package/dist/types/exporters/svg/types.d.ts.map +1 -1
- package/dist/types/exporters/txt/TXTExporter.d.ts +4 -0
- package/dist/types/exporters/txt/TXTExporter.d.ts.map +1 -1
- package/dist/types/exporters/txt/index.d.ts.map +1 -1
- package/dist/types/exporters/txt/types.d.ts.map +1 -1
- package/dist/types/exporters/video/VideoExporter.d.ts +5 -2
- package/dist/types/exporters/video/VideoExporter.d.ts.map +1 -1
- package/dist/types/exporters/video/VideoRecorder.d.ts +3 -3
- package/dist/types/exporters/video/VideoRecorder.d.ts.map +1 -1
- package/dist/types/exporters/video/index.d.ts +1 -1
- package/dist/types/exporters/video/index.d.ts.map +1 -1
- package/dist/types/exporters/video/types.d.ts +2 -2
- package/dist/types/exporters/video/types.d.ts.map +1 -1
- package/dist/types/index.d.ts +6 -0
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/overlay/blades/Blade.d.ts +6 -1
- package/dist/types/overlay/blades/Blade.d.ts.map +1 -1
- package/dist/types/overlay/blades/GIFBlade.d.ts.map +1 -1
- package/dist/types/overlay/blades/ImageBlade.d.ts.map +1 -1
- package/dist/types/overlay/blades/SVGBlade.d.ts.map +1 -1
- package/dist/types/overlay/blades/TextBlade.d.ts.map +1 -1
- package/dist/types/overlay/blades/VideoBlade.d.ts.map +1 -1
- package/dist/types/overlay/components/actions/Button.d.ts.map +1 -1
- package/dist/types/overlay/components/base/Component.d.ts.map +1 -1
- package/dist/types/overlay/components/base/Container.d.ts.map +1 -1
- package/dist/types/overlay/components/base/Field.d.ts.map +1 -1
- package/dist/types/overlay/components/display/Header.d.ts.map +1 -1
- package/dist/types/overlay/components/display/StatusDisplay.d.ts.map +1 -1
- package/dist/types/overlay/components/inputs/CheckboxInput.d.ts.map +1 -1
- package/dist/types/overlay/components/inputs/NumberInput.d.ts.map +1 -1
- package/dist/types/overlay/components/inputs/RangeInput.d.ts.map +1 -1
- package/dist/types/overlay/components/inputs/SelectInput.d.ts.map +1 -1
- package/dist/types/overlay/components/inputs/TextInput.d.ts.map +1 -1
- package/dist/types/overlay/core/EventBus.d.ts +1 -0
- package/dist/types/overlay/core/EventBus.d.ts.map +1 -1
- package/dist/types/overlay/core/OverlayController.d.ts.map +1 -1
- package/dist/types/overlay/core/StateManager.d.ts.map +1 -1
- package/dist/types/overlay/formatRegistry.d.ts.map +1 -1
- package/dist/types/overlay/index.d.ts +1 -0
- package/dist/types/overlay/index.d.ts.map +1 -1
- package/dist/types/overlay/models/FormatDefinition.d.ts +3 -3
- package/dist/types/overlay/models/FormatDefinition.d.ts.map +1 -1
- package/dist/types/overlay/models/OverlayEvents.d.ts.map +1 -1
- package/dist/types/overlay/models/OverlayState.d.ts.map +1 -1
- package/dist/types/overlay/services/ClipboardService.d.ts +7 -2
- package/dist/types/overlay/services/ClipboardService.d.ts.map +1 -1
- package/dist/types/overlay/services/ExportService.d.ts.map +1 -1
- package/dist/types/overlay/services/PositionService.d.ts.map +1 -1
- package/dist/types/overlay/types.d.ts.map +1 -1
- package/dist/types/types.d.ts +68 -0
- package/dist/types/types.d.ts.map +1 -1
- package/dist/types/utils/pixels.d.ts +1 -0
- package/dist/types/utils/pixels.d.ts.map +1 -1
- package/package.json +115 -71
|
@@ -1,249 +1,248 @@
|
|
|
1
|
-
class
|
|
2
|
-
$extractFramebufferData(
|
|
3
|
-
return { characterPixels:
|
|
1
|
+
class At {
|
|
2
|
+
$extractFramebufferData(t) {
|
|
3
|
+
return { characterPixels: t.readPixels(0), primaryColorPixels: t.readPixels(1), secondaryColorPixels: t.readPixels(2) };
|
|
4
4
|
}
|
|
5
|
-
$getCharacterIndex(
|
|
6
|
-
return e
|
|
5
|
+
$getCharacterIndex(t, e) {
|
|
6
|
+
return t[e] + (t[e + 1] << 8);
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
9
|
class Q {
|
|
10
|
-
$downloadFile(
|
|
10
|
+
$downloadFile(t, e) {
|
|
11
11
|
try {
|
|
12
|
-
const r = this._sanitizeFilename(
|
|
12
|
+
const r = this._sanitizeFilename(e), a = URL.createObjectURL(t), i = document.createElement("a");
|
|
13
13
|
i.href = a, i.download = r, i.style.display = "none", i.rel = "noopener", document.body.appendChild(i), i.click(), document.body.removeChild(i), URL.revokeObjectURL(a);
|
|
14
14
|
} catch (r) {
|
|
15
15
|
console.error("[textmode-export] Failed to download file:", r);
|
|
16
16
|
}
|
|
17
17
|
}
|
|
18
|
-
_sanitizeFilename(
|
|
19
|
-
if (!
|
|
20
|
-
const
|
|
21
|
-
return
|
|
18
|
+
_sanitizeFilename(t) {
|
|
19
|
+
if (!t) return this._generateDefaultFilename();
|
|
20
|
+
const e = t.trim();
|
|
21
|
+
return e ? e.replace(/[<>:"/\\|?*]/g, "_").replace(/\s+/g, "_").replace(/_{2,}/g, "_").replace(/^_+|_+$/g, "").substring(0, 255) || this._generateDefaultFilename() : this._generateDefaultFilename();
|
|
22
22
|
}
|
|
23
23
|
_generateDefaultFilename() {
|
|
24
24
|
return `textmode-export-${(/* @__PURE__ */ new Date()).toISOString().slice(0, 19).replace(/:/g, "-")}`;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
|
-
function
|
|
28
|
-
return { r:
|
|
27
|
+
function ft(n, t) {
|
|
28
|
+
return { r: n[t], g: n[t + 1], b: n[t + 2], a: n[t + 3] };
|
|
29
29
|
}
|
|
30
|
-
class
|
|
31
|
-
_extractTransformData(
|
|
32
|
-
const r = e
|
|
33
|
-
return { isInverted: a, flipHorizontal: i, flipVertical: s, rotation: Math.round(360 *
|
|
30
|
+
class qt extends At {
|
|
31
|
+
_extractTransformData(t, e) {
|
|
32
|
+
const r = t[e + 2], a = !!(1 & r), i = !!(2 & r), s = !!(4 & r), l = t[e + 3] / 255;
|
|
33
|
+
return { isInverted: a, flipHorizontal: i, flipVertical: s, rotation: Math.round(360 * l * 100) / 100 };
|
|
34
34
|
}
|
|
35
|
-
_calculateCellPosition(
|
|
36
|
-
return { x:
|
|
35
|
+
_calculateCellPosition(t, e, r) {
|
|
36
|
+
return { x: t, y: e, cellX: t * r.cellWidth, cellY: e * r.cellHeight };
|
|
37
37
|
}
|
|
38
|
-
$extractSVGCellData(
|
|
38
|
+
$extractSVGCellData(t, e) {
|
|
39
39
|
const r = [];
|
|
40
40
|
let a = 0;
|
|
41
|
-
for (let i = 0; i <
|
|
42
|
-
const
|
|
43
|
-
let p =
|
|
44
|
-
const
|
|
45
|
-
if (
|
|
41
|
+
for (let i = 0; i < e.rows; i++) for (let s = 0; s < e.cols; s++) {
|
|
42
|
+
const l = 4 * a, d = this.$getCharacterIndex(t.characterPixels, l);
|
|
43
|
+
let p = ft(t.primaryColorPixels, l), o = ft(t.secondaryColorPixels, l);
|
|
44
|
+
const c = this._extractTransformData(t.characterPixels, l);
|
|
45
|
+
if (c.isInverted) {
|
|
46
46
|
const m = p;
|
|
47
|
-
p =
|
|
47
|
+
p = o, o = m;
|
|
48
48
|
}
|
|
49
|
-
const u = this._calculateCellPosition(s, i,
|
|
50
|
-
r.push({ charIndex:
|
|
49
|
+
const u = this._calculateCellPosition(s, i, e);
|
|
50
|
+
r.push({ charIndex: d, primaryColor: p, secondaryColor: o, transform: c, position: u }), a++;
|
|
51
51
|
}
|
|
52
52
|
return r;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
|
-
class
|
|
56
|
-
_createGlyphPath(
|
|
57
|
-
const s = i /
|
|
58
|
-
return { getBoundingBox: () => ({ x1: r +
|
|
59
|
-
}
|
|
60
|
-
_glyphToSVGPath(
|
|
61
|
-
if (!
|
|
62
|
-
const { xs: i, ys: s, endPts:
|
|
63
|
-
if (!(i && s &&
|
|
64
|
-
let p = "",
|
|
65
|
-
for (let
|
|
66
|
-
const u = c
|
|
67
|
-
if (!(u <
|
|
68
|
-
if (u >=
|
|
69
|
-
const m =
|
|
55
|
+
class Ht {
|
|
56
|
+
_createGlyphPath(t, e, r, a, i) {
|
|
57
|
+
const s = i / t.head.unitsPerEm;
|
|
58
|
+
return { getBoundingBox: () => ({ x1: r + e.xMin * s, y1: a + -e.yMax * s, x2: r + e.xMax * s, y2: a + -e.yMin * s }), toSVG: () => this._glyphToSVGPath(e, r, a, s) };
|
|
59
|
+
}
|
|
60
|
+
_glyphToSVGPath(t, e, r, a) {
|
|
61
|
+
if (!t || !t.xs) return "";
|
|
62
|
+
const { xs: i, ys: s, endPts: l, flags: d } = t;
|
|
63
|
+
if (!(i && s && l && d)) return "";
|
|
64
|
+
let p = "", o = 0;
|
|
65
|
+
for (let c = 0; c < l.length; c++) {
|
|
66
|
+
const u = l[c];
|
|
67
|
+
if (!(u < o)) {
|
|
68
|
+
if (u >= o) {
|
|
69
|
+
const m = e + i[o] * a, x = r - s[o] * a;
|
|
70
70
|
p += `M${m.toFixed(2)},${x.toFixed(2)}`;
|
|
71
|
-
let h =
|
|
71
|
+
let h = o + 1;
|
|
72
72
|
for (; h <= u; )
|
|
73
|
-
if (1 &
|
|
74
|
-
const g =
|
|
73
|
+
if (1 & d[h]) {
|
|
74
|
+
const g = e + i[h] * a, _ = r - s[h] * a;
|
|
75
75
|
p += `L${g.toFixed(2)},${_.toFixed(2)}`, h++;
|
|
76
76
|
} else {
|
|
77
|
-
const g =
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
const f = t + i[v] * a, C = r - s[v] * a;
|
|
77
|
+
const g = e + i[h] * a, _ = r - s[h] * a, v = h + 1 > u ? o : h + 1;
|
|
78
|
+
if (1 & d[v]) {
|
|
79
|
+
const f = e + i[v] * a, C = r - s[v] * a;
|
|
81
80
|
p += `Q${g.toFixed(2)},${_.toFixed(2)} ${f.toFixed(2)},${C.toFixed(2)}`, h = v + 1;
|
|
82
81
|
} else {
|
|
83
|
-
const f = (g + (
|
|
82
|
+
const f = (g + (e + i[v] * a)) / 2, C = (_ + (r - s[v] * a)) / 2;
|
|
84
83
|
p += `Q${g.toFixed(2)},${_.toFixed(2)} ${f.toFixed(2)},${C.toFixed(2)}`, h = v;
|
|
85
84
|
}
|
|
86
85
|
}
|
|
87
86
|
p += "Z";
|
|
88
87
|
}
|
|
89
|
-
|
|
88
|
+
o = u + 1;
|
|
90
89
|
}
|
|
91
90
|
}
|
|
92
91
|
return p;
|
|
93
92
|
}
|
|
94
|
-
_generateCharacterPath(
|
|
95
|
-
const s =
|
|
96
|
-
return s ? this._createGlyphPath(
|
|
93
|
+
_generateCharacterPath(t, e, r, a, i) {
|
|
94
|
+
const s = e.characterMap.get(t)?.glyphData;
|
|
95
|
+
return s ? this._createGlyphPath(e.font, s, r, a, i) : null;
|
|
97
96
|
}
|
|
98
|
-
$generatePositionedCharacterPath(
|
|
99
|
-
if (!
|
|
100
|
-
const p =
|
|
97
|
+
$generatePositionedCharacterPath(t, e, r, a, i, s, l, d) {
|
|
98
|
+
if (!d) return null;
|
|
99
|
+
const p = l / e.font.head.unitsPerEm, o = r + (i - d.advanceWidth * p) / 2, c = a + (s + 0.7 * l) / 2, u = this._generateCharacterPath(t, e, o, c, l);
|
|
101
100
|
return u && u.toSVG() || null;
|
|
102
101
|
}
|
|
103
102
|
}
|
|
104
|
-
class
|
|
103
|
+
class jt {
|
|
105
104
|
_pathGenerator;
|
|
106
105
|
constructor() {
|
|
107
|
-
this._pathGenerator = new
|
|
106
|
+
this._pathGenerator = new Ht();
|
|
108
107
|
}
|
|
109
|
-
$generateSVGHeader(
|
|
110
|
-
const { width:
|
|
111
|
-
return `<?xml version="1.0" encoding="UTF-8"?><svg width="${
|
|
108
|
+
$generateSVGHeader(t) {
|
|
109
|
+
const { width: e, height: r } = t;
|
|
110
|
+
return `<?xml version="1.0" encoding="UTF-8"?><svg width="${e}" height="${r}" viewBox="0 0 ${e} ${r}" xmlns="http://www.w3.org/2000/svg"><title>textmode.js sketch</title>`;
|
|
112
111
|
}
|
|
113
112
|
$generateSVGFooter() {
|
|
114
113
|
return "</g></svg>";
|
|
115
114
|
}
|
|
116
|
-
_generateTransformAttribute(
|
|
117
|
-
const { transform: r, position: a } =
|
|
115
|
+
_generateTransformAttribute(t, e) {
|
|
116
|
+
const { transform: r, position: a } = t;
|
|
118
117
|
if (!r.flipHorizontal && !r.flipVertical && !r.rotation) return "";
|
|
119
|
-
const i = a.cellX +
|
|
118
|
+
const i = a.cellX + e.cellWidth / 2, s = a.cellY + e.cellHeight / 2, l = [];
|
|
120
119
|
if (r.flipHorizontal || r.flipVertical) {
|
|
121
|
-
const
|
|
122
|
-
|
|
120
|
+
const d = r.flipHorizontal ? -1 : 1, p = r.flipVertical ? -1 : 1;
|
|
121
|
+
l.push(`translate(${i} ${s})scale(${d} ${p})translate(${-i} ${-s})`);
|
|
123
122
|
}
|
|
124
|
-
return r.rotation &&
|
|
123
|
+
return r.rotation && l.push(`rotate(${r.rotation} ${i} ${s})`), ` transform="${l.join(" ")}"`;
|
|
125
124
|
}
|
|
126
|
-
_generateCellBackground(
|
|
127
|
-
if (!r.includeBackgroundRectangles ||
|
|
128
|
-
const { position: a } =
|
|
129
|
-
return r.drawMode === "stroke" ? `<rect x="${a.cellX}" y="${a.cellY}" width="${
|
|
125
|
+
_generateCellBackground(t, e, r) {
|
|
126
|
+
if (!r.includeBackgroundRectangles || t.secondaryColor.a === 0) return "";
|
|
127
|
+
const { position: a } = t, { r: i, g: s, b: l, a: d } = t.secondaryColor, p = `rgba(${i},${s},${l},${d / 255})`;
|
|
128
|
+
return r.drawMode === "stroke" ? `<rect x="${a.cellX}" y="${a.cellY}" width="${e.cellWidth}" height="${e.cellHeight}" stroke="${p}" fill="none" stroke-width="${r.strokeWidth}"/>` : `<rect x="${a.cellX}" y="${a.cellY}" width="${e.cellWidth}" height="${e.cellHeight}" fill="${p}"/>`;
|
|
130
129
|
}
|
|
131
|
-
_generateCharacterPath(
|
|
132
|
-
const i = r.characters[
|
|
130
|
+
_generateCharacterPath(t, e, r, a) {
|
|
131
|
+
const i = r.characters[t.charIndex];
|
|
133
132
|
if (!i) return "";
|
|
134
|
-
const s = this._pathGenerator.$generatePositionedCharacterPath(i.character, r,
|
|
133
|
+
const s = this._pathGenerator.$generatePositionedCharacterPath(i.character, r, t.position.cellX, t.position.cellY, e.cellWidth, e.cellHeight, r.fontSize, i.glyphData);
|
|
135
134
|
if (!s) return "";
|
|
136
|
-
const { r:
|
|
137
|
-
return a.drawMode === "stroke" ? `<path d="${s}" stroke="${
|
|
135
|
+
const { r: l, g: d, b: p, a: o } = t.primaryColor, c = `rgba(${l},${d},${p},${o / 255})`;
|
|
136
|
+
return a.drawMode === "stroke" ? `<path d="${s}" stroke="${c}" stroke-width="${a.strokeWidth}" fill="none"/>` : `<path d="${s}" fill="${c}"/>`;
|
|
138
137
|
}
|
|
139
|
-
$generateCellContent(
|
|
140
|
-
const i = [], s = this._generateCellBackground(
|
|
138
|
+
$generateCellContent(t, e, r, a) {
|
|
139
|
+
const i = [], s = this._generateCellBackground(t, e, a);
|
|
141
140
|
s && i.push(s);
|
|
142
|
-
const
|
|
143
|
-
if (
|
|
144
|
-
const
|
|
145
|
-
i.push(
|
|
141
|
+
const l = this._generateCharacterPath(t, e, r, a);
|
|
142
|
+
if (l) {
|
|
143
|
+
const d = this._generateTransformAttribute(t, e);
|
|
144
|
+
i.push(d ? `<g${d}>${l}</g>` : l);
|
|
146
145
|
}
|
|
147
146
|
return i.join("");
|
|
148
147
|
}
|
|
149
|
-
$generateSVGContent(
|
|
150
|
-
const i = [this.$generateSVGHeader(
|
|
151
|
-
for (const s of
|
|
148
|
+
$generateSVGContent(t, e, r, a) {
|
|
149
|
+
const i = [this.$generateSVGHeader(e), '<g id="ascii-cells">'];
|
|
150
|
+
for (const s of t) i.push(this.$generateCellContent(s, e, r, a));
|
|
152
151
|
return i.push(this.$generateSVGFooter()), i.join("");
|
|
153
152
|
}
|
|
154
|
-
$optimizeSVGContent(
|
|
155
|
-
return
|
|
153
|
+
$optimizeSVGContent(t) {
|
|
154
|
+
return t.replace(/\s+/g, " ").replace(/> </g, "><");
|
|
156
155
|
}
|
|
157
156
|
}
|
|
158
|
-
class
|
|
159
|
-
_applyDefaultOptions(
|
|
160
|
-
return { includeBackgroundRectangles:
|
|
157
|
+
class gt {
|
|
158
|
+
_applyDefaultOptions(t) {
|
|
159
|
+
return { includeBackgroundRectangles: t.includeBackgroundRectangles ?? !0, drawMode: t.drawMode ?? "fill", strokeWidth: t.strokeWidth ?? 1, filename: t.filename };
|
|
161
160
|
}
|
|
162
|
-
$generateSVG(
|
|
163
|
-
const r = new
|
|
161
|
+
$generateSVG(t, e = {}) {
|
|
162
|
+
const r = new qt(), a = new jt(), i = r.$extractSVGCellData(r.$extractFramebufferData(t.layers.base.drawFramebuffer), t.grid), s = a.$generateSVGContent(i, t.grid, t.font, this._applyDefaultOptions(e));
|
|
164
163
|
return a.$optimizeSVGContent(s);
|
|
165
164
|
}
|
|
166
|
-
$saveSVG(
|
|
167
|
-
new Q().$downloadFile(new Blob([this.$generateSVG(
|
|
165
|
+
$saveSVG(t, e = {}) {
|
|
166
|
+
new Q().$downloadFile(new Blob([this.$generateSVG(t, e)], { type: "image/svg+xml;charset=utf-8" }), e.filename);
|
|
168
167
|
}
|
|
169
168
|
}
|
|
170
|
-
const
|
|
171
|
-
class
|
|
172
|
-
_applyDefaultOptions(
|
|
173
|
-
return { format:
|
|
169
|
+
const st = { png: "image/png", jpg: "image/jpeg", webp: "image/webp" }, lt = { png: ".png", jpg: ".jpg", webp: ".webp" };
|
|
170
|
+
class bt {
|
|
171
|
+
_applyDefaultOptions(t) {
|
|
172
|
+
return { format: t.format ?? "png", scale: Math.abs(t.scale ?? 1), filename: t.filename };
|
|
174
173
|
}
|
|
175
|
-
_validateOptions(
|
|
176
|
-
if (!(
|
|
174
|
+
_validateOptions(t) {
|
|
175
|
+
if (!(t.format in st)) throw new Error(`Saving '${t.format}' files is not supported`);
|
|
177
176
|
}
|
|
178
|
-
async $generateImageBlob(
|
|
179
|
-
const r =
|
|
180
|
-
return a.width = s, a.height =
|
|
181
|
-
a.toBlob((
|
|
182
|
-
|
|
183
|
-
},
|
|
177
|
+
async $generateImageBlob(t, e) {
|
|
178
|
+
const r = t, a = document.createElement("canvas"), i = a.getContext("2d"), s = Math.round(r.width * e.scale), l = Math.round(r.height * e.scale);
|
|
179
|
+
return a.width = s, a.height = l, i.imageSmoothingEnabled = !1, i.clearRect(0, 0, s, l), i.drawImage(r, 0, 0, r.width, r.height, 0, 0, s, l), await new Promise((d, p) => {
|
|
180
|
+
a.toBlob((o) => {
|
|
181
|
+
o ? d(o) : p(new Error(`Failed to generate ${e.format.toUpperCase()} blob`));
|
|
182
|
+
}, st[e.format]);
|
|
184
183
|
});
|
|
185
184
|
}
|
|
186
|
-
async $saveImage(
|
|
187
|
-
const r = this._applyDefaultOptions(
|
|
185
|
+
async $saveImage(t, e = {}) {
|
|
186
|
+
const r = this._applyDefaultOptions(e);
|
|
188
187
|
this._validateOptions(r);
|
|
189
|
-
const a = await this.$generateImageBlob(
|
|
188
|
+
const a = await this.$generateImageBlob(t, r);
|
|
190
189
|
new Q().$downloadFile(a, r.filename);
|
|
191
190
|
}
|
|
192
|
-
async $copyImageToClipboard(
|
|
191
|
+
async $copyImageToClipboard(t, e = {}) {
|
|
193
192
|
if (typeof navigator > "u" || !navigator.clipboard || typeof navigator.clipboard.write != "function") throw new Error("Clipboard API is not available in this environment");
|
|
194
|
-
const r = this._applyDefaultOptions(
|
|
193
|
+
const r = this._applyDefaultOptions(e);
|
|
195
194
|
this._validateOptions(r);
|
|
196
|
-
const a = await this.$generateImageBlob(
|
|
195
|
+
const a = await this.$generateImageBlob(t, r), i = new ClipboardItem({ [st[r.format]]: a });
|
|
197
196
|
await navigator.clipboard.write([i]);
|
|
198
197
|
}
|
|
199
198
|
}
|
|
200
|
-
class
|
|
201
|
-
_applyDefaultOptions(
|
|
202
|
-
return { preserveTrailingSpaces:
|
|
199
|
+
class vt {
|
|
200
|
+
_applyDefaultOptions(t) {
|
|
201
|
+
return { preserveTrailingSpaces: t.preserveTrailingSpaces ?? !1, emptyCharacter: t.emptyCharacter ?? " ", filename: t.filename };
|
|
203
202
|
}
|
|
204
|
-
_createTXTContent(
|
|
205
|
-
const r = new
|
|
206
|
-
let
|
|
207
|
-
for (let
|
|
203
|
+
_createTXTContent(t, e) {
|
|
204
|
+
const r = new At(), a = t.layers.base.drawFramebuffer, i = r.$extractFramebufferData(a), s = [];
|
|
205
|
+
let l = 0;
|
|
206
|
+
for (let d = 0; d < t.grid.rows; d++) {
|
|
208
207
|
let p = "";
|
|
209
|
-
for (let
|
|
210
|
-
const
|
|
211
|
-
p +=
|
|
208
|
+
for (let o = 0; o < t.grid.cols; o++) {
|
|
209
|
+
const c = 4 * l, u = r.$getCharacterIndex(i.characterPixels, c);
|
|
210
|
+
p += t.font.characters[u]?.character || e.emptyCharacter, l++;
|
|
212
211
|
}
|
|
213
|
-
|
|
212
|
+
e.preserveTrailingSpaces || (p = p.trimEnd()), s.push(p);
|
|
214
213
|
}
|
|
215
214
|
return s.join(`
|
|
216
215
|
`);
|
|
217
216
|
}
|
|
218
|
-
$generateTXT(
|
|
219
|
-
return this._createTXTContent(
|
|
217
|
+
$generateTXT(t, e = {}) {
|
|
218
|
+
return this._createTXTContent(t, this._applyDefaultOptions(e));
|
|
220
219
|
}
|
|
221
|
-
$saveTXT(
|
|
222
|
-
const r = this._applyDefaultOptions(
|
|
220
|
+
$saveTXT(t, e = {}) {
|
|
221
|
+
const r = this._applyDefaultOptions(e), a = this._createTXTContent(t, r), i = new Blob([a], { type: "text/plain;charset=utf-8" });
|
|
223
222
|
new Q().$downloadFile(i, r.filename);
|
|
224
223
|
}
|
|
225
224
|
}
|
|
226
|
-
class
|
|
225
|
+
class Qt {
|
|
227
226
|
_canvas;
|
|
228
227
|
_ctx;
|
|
229
|
-
async $record(
|
|
230
|
-
const i = Math.max(1, Math.round(
|
|
231
|
-
return await new Promise((
|
|
232
|
-
const
|
|
233
|
-
let
|
|
228
|
+
async $record(t, e, r, a) {
|
|
229
|
+
const i = Math.max(1, Math.round(e.frameRate)), s = Math.round(1e3 / i), l = Math.max(1, Math.round(e.frameCount));
|
|
230
|
+
return await new Promise((d, p) => {
|
|
231
|
+
const o = [];
|
|
232
|
+
let c, u = 0, m = !1;
|
|
234
233
|
const x = () => {
|
|
235
|
-
|
|
234
|
+
c && (c(), c = void 0);
|
|
236
235
|
}, h = (_) => {
|
|
237
|
-
m || (m = !0, x(),
|
|
236
|
+
m || (m = !0, x(), d(_));
|
|
238
237
|
}, g = () => {
|
|
239
|
-
if (u >=
|
|
238
|
+
if (u >= l) h(o);
|
|
240
239
|
else try {
|
|
241
|
-
const _ =
|
|
240
|
+
const _ = e.scale, v = Math.max(1, Math.round(t.width * _)), f = Math.max(1, Math.round(t.height * _));
|
|
242
241
|
this._canvas || (this._canvas = document.createElement("canvas")), this._canvas.width === v && this._canvas.height === f || (this._canvas.width = v, this._canvas.height = f), this._ctx || (this._ctx = this._canvas.getContext("2d"));
|
|
243
242
|
const C = this._ctx;
|
|
244
|
-
C.imageSmoothingEnabled = !1, C.clearRect(0, 0, v, f), C.drawImage(
|
|
245
|
-
const
|
|
246
|
-
|
|
243
|
+
C.imageSmoothingEnabled = !1, C.clearRect(0, 0, v, f), C.drawImage(t, 0, 0, t.width, t.height, 0, 0, v, f);
|
|
244
|
+
const S = { imageData: C.getImageData(0, 0, v, f), width: v, height: f, delayMs: s };
|
|
245
|
+
o.push(S), u += 1, a?.({ state: "recording", frameIndex: u, totalFrames: l }), u >= l && h(o);
|
|
247
246
|
} catch (_) {
|
|
248
247
|
((v) => {
|
|
249
248
|
if (m) return;
|
|
@@ -253,86 +252,86 @@ class Qe {
|
|
|
253
252
|
})(_);
|
|
254
253
|
}
|
|
255
254
|
};
|
|
256
|
-
|
|
255
|
+
c = r(() => {
|
|
257
256
|
g();
|
|
258
|
-
}), a?.({ state: "recording", frameIndex: 0, totalFrames:
|
|
257
|
+
}), a?.({ state: "recording", frameIndex: 0, totalFrames: l });
|
|
259
258
|
});
|
|
260
259
|
}
|
|
261
260
|
}
|
|
262
|
-
var
|
|
263
|
-
for (var
|
|
264
|
-
},
|
|
265
|
-
function
|
|
266
|
-
return 0.29889531 *
|
|
261
|
+
var Pt = Object.defineProperty, Xt = (n) => Pt(n, "__esModule", { value: !0 }), Yt = (n, t) => () => (t || n((t = { exports: {} }).exports, t), t.exports), Jt = (n, t) => {
|
|
262
|
+
for (var e in t) Pt(n, e, { get: t[e], enumerable: !0 });
|
|
263
|
+
}, Kt = Yt((n) => {
|
|
264
|
+
function t(c, u, m) {
|
|
265
|
+
return 0.29889531 * c + 0.58662247 * u + 0.11448223 * m;
|
|
267
266
|
}
|
|
268
|
-
function
|
|
269
|
-
return 0.59597799 *
|
|
267
|
+
function e(c, u, m) {
|
|
268
|
+
return 0.59597799 * c - 0.2741761 * u - 0.32180189 * m;
|
|
270
269
|
}
|
|
271
|
-
function r(
|
|
272
|
-
return 0.21147017 *
|
|
270
|
+
function r(c, u, m) {
|
|
271
|
+
return 0.21147017 * c - 0.52261711 * u + 0.31114694 * m;
|
|
273
272
|
}
|
|
274
|
-
function a(
|
|
275
|
-
let m =
|
|
273
|
+
function a(c, u) {
|
|
274
|
+
let m = c[0] - u[0], x = c[1] - u[1], h = c[2] - u[2], g = i(c) - i(u);
|
|
276
275
|
return m * m * 0.5053 + x * x * 0.299 + h * h * 0.1957 + g * g;
|
|
277
276
|
}
|
|
278
|
-
function i(
|
|
279
|
-
return
|
|
277
|
+
function i(c) {
|
|
278
|
+
return c[3] != null ? c[3] : 255;
|
|
280
279
|
}
|
|
281
|
-
function s(
|
|
282
|
-
return Math.sqrt(a(
|
|
280
|
+
function s(c, u) {
|
|
281
|
+
return Math.sqrt(a(c, u));
|
|
283
282
|
}
|
|
284
|
-
function c
|
|
285
|
-
let [m, x, h] =
|
|
286
|
-
return f * f * 0.5053 + C * C * 0.299 +
|
|
283
|
+
function l(c, u) {
|
|
284
|
+
let [m, x, h] = c, [g, _, v] = u, f = t(m, x, h) - t(g, _, v), C = e(m, x, h) - e(g, _, v), S = r(m, x, h) - r(g, _, v), E = i(c) - i(u);
|
|
285
|
+
return f * f * 0.5053 + C * C * 0.299 + S * S * 0.1957 + E * E;
|
|
287
286
|
}
|
|
288
|
-
function
|
|
289
|
-
return Math.sqrt(c
|
|
287
|
+
function d(c, u) {
|
|
288
|
+
return Math.sqrt(l(c, u));
|
|
290
289
|
}
|
|
291
|
-
function p(
|
|
290
|
+
function p(c, u) {
|
|
292
291
|
var m, x = 0;
|
|
293
|
-
for (m = 0; m <
|
|
294
|
-
let h =
|
|
292
|
+
for (m = 0; m < c.length; m++) {
|
|
293
|
+
let h = c[m] - u[m];
|
|
295
294
|
x += h * h;
|
|
296
295
|
}
|
|
297
296
|
return x;
|
|
298
297
|
}
|
|
299
|
-
function
|
|
300
|
-
return Math.sqrt(p(
|
|
298
|
+
function o(c, u) {
|
|
299
|
+
return Math.sqrt(p(c, u));
|
|
301
300
|
}
|
|
302
|
-
|
|
303
|
-
}),
|
|
304
|
-
function
|
|
305
|
-
let
|
|
301
|
+
Xt(n), Jt(n, { colorDifferenceRGBToYIQ: () => d, colorDifferenceRGBToYIQSquared: () => l, colorDifferenceYIQ: () => s, colorDifferenceYIQSquared: () => a, euclideanDistance: () => o, euclideanDistanceSquared: () => p });
|
|
302
|
+
}), Zt = { trailer: 59 };
|
|
303
|
+
function Dt(n = 256) {
|
|
304
|
+
let t = 0, e = new Uint8Array(n);
|
|
306
305
|
return { get buffer() {
|
|
307
|
-
return
|
|
306
|
+
return e.buffer;
|
|
308
307
|
}, reset() {
|
|
309
|
-
|
|
310
|
-
}, bytesView: () =>
|
|
311
|
-
r(
|
|
308
|
+
t = 0;
|
|
309
|
+
}, bytesView: () => e.subarray(0, t), bytes: () => e.slice(0, t), writeByte(a) {
|
|
310
|
+
r(t + 1), e[t] = a, t++;
|
|
312
311
|
}, writeBytes(a, i = 0, s = a.length) {
|
|
313
|
-
r(
|
|
314
|
-
for (let
|
|
312
|
+
r(t + s);
|
|
313
|
+
for (let l = 0; l < s; l++) e[t++] = a[l + i];
|
|
315
314
|
}, writeBytesView(a, i = 0, s = a.byteLength) {
|
|
316
|
-
r(
|
|
315
|
+
r(t + s), e.set(a.subarray(i, i + s), t), t += s;
|
|
317
316
|
} };
|
|
318
317
|
function r(a) {
|
|
319
|
-
var i =
|
|
318
|
+
var i = e.length;
|
|
320
319
|
if (i >= a) return;
|
|
321
320
|
a = Math.max(a, i * (i < 1048576 ? 2 : 1.125) >>> 0), i != 0 && (a = Math.max(a, 256));
|
|
322
|
-
let s =
|
|
323
|
-
|
|
321
|
+
let s = e;
|
|
322
|
+
e = new Uint8Array(a), t > 0 && e.set(s.subarray(0, t), 0);
|
|
324
323
|
}
|
|
325
324
|
}
|
|
326
|
-
var Z = 12,
|
|
327
|
-
function
|
|
328
|
-
a = a ||
|
|
329
|
-
let
|
|
330
|
-
i.fill(0),
|
|
331
|
-
let
|
|
332
|
-
for (let k =
|
|
325
|
+
var Z = 12, xt = 5003, te = [0, 1, 3, 7, 15, 31, 63, 127, 255, 511, 1023, 2047, 4095, 8191, 16383, 32767, 65535];
|
|
326
|
+
function ee(n, t, e, r, a, i, s, l) {
|
|
327
|
+
a = a || Dt(512), i = i || new Uint8Array(256), s = s || new Int32Array(xt), l = l || new Int32Array(xt);
|
|
328
|
+
let d = s.length, p = Math.max(2, r);
|
|
329
|
+
i.fill(0), l.fill(0), L();
|
|
330
|
+
let o = 0, c = 0, u = p + 1, m = u, x = !1, h = m, g = D(h), _ = 1 << u - 1, v = _ + 1, f = _ + 2, C = 0, S = e[0], E = 0;
|
|
331
|
+
for (let k = d; k < 65536; k *= 2) ++E;
|
|
333
332
|
E = 8 - E, a.writeByte(p), T(_);
|
|
334
|
-
for (let k = 1; k <
|
|
335
|
-
return T(
|
|
333
|
+
for (let k = 1; k < e.length; k++) V(e[k]);
|
|
334
|
+
return T(S), T(v), a.writeByte(0), a.bytesView();
|
|
336
335
|
function A(k) {
|
|
337
336
|
i[C++] = k, C >= 254 && B();
|
|
338
337
|
}
|
|
@@ -340,16 +339,16 @@ function tt(o, e, t, r, a, i, s, c) {
|
|
|
340
339
|
s.fill(-1);
|
|
341
340
|
}
|
|
342
341
|
function V(k) {
|
|
343
|
-
let R = (k << Z) +
|
|
344
|
-
if (s[y] === R)
|
|
342
|
+
let R = (k << Z) + S, y = k << E ^ S;
|
|
343
|
+
if (s[y] === R) S = l[y];
|
|
345
344
|
else {
|
|
346
345
|
if (s[y] >= 0) {
|
|
347
|
-
let w = y === 0 ? 1 :
|
|
346
|
+
let w = y === 0 ? 1 : d - y;
|
|
348
347
|
do
|
|
349
|
-
if (y -= w, y < 0 && (y +=
|
|
348
|
+
if (y -= w, y < 0 && (y += d), s[y] === R) return void (S = l[y]);
|
|
350
349
|
while (s[y] >= 0);
|
|
351
350
|
}
|
|
352
|
-
T(
|
|
351
|
+
T(S), S = k, f < 1 << Z ? (l[y] = f++, s[y] = R) : (L(), f = _ + 2, x = !0, T(_));
|
|
353
352
|
}
|
|
354
353
|
}
|
|
355
354
|
function B() {
|
|
@@ -359,284 +358,284 @@ function tt(o, e, t, r, a, i, s, c) {
|
|
|
359
358
|
return (1 << k) - 1;
|
|
360
359
|
}
|
|
361
360
|
function T(k) {
|
|
362
|
-
for (
|
|
361
|
+
for (o &= te[c], c > 0 ? o |= k << c : o = k, c += h; c >= 8; ) A(255 & o), o >>= 8, c -= 8;
|
|
363
362
|
if ((f > g || x) && (x ? (h = m, g = D(h), x = !1) : (++h, g = h == Z ? 1 << Z : D(h))), k == v) {
|
|
364
|
-
for (;
|
|
363
|
+
for (; c > 0; ) A(255 & o), o >>= 8, c -= 8;
|
|
365
364
|
B();
|
|
366
365
|
}
|
|
367
366
|
}
|
|
368
367
|
}
|
|
369
|
-
var
|
|
370
|
-
function
|
|
371
|
-
return
|
|
368
|
+
var re = ee;
|
|
369
|
+
function Vt(n, t, e) {
|
|
370
|
+
return n << 8 & 63488 | t << 2 & 992 | e >> 3 & 31;
|
|
372
371
|
}
|
|
373
|
-
function
|
|
374
|
-
return
|
|
372
|
+
function Ot(n, t, e, r) {
|
|
373
|
+
return n >> 4 | 240 & t | (240 & e) << 4 | (240 & r) << 8;
|
|
375
374
|
}
|
|
376
|
-
function
|
|
377
|
-
return
|
|
375
|
+
function Tt(n, t, e) {
|
|
376
|
+
return n >> 4 << 8 | t >> 4 << 4 | e >> 4;
|
|
378
377
|
}
|
|
379
|
-
function
|
|
380
|
-
return
|
|
378
|
+
function tt(n, t, e) {
|
|
379
|
+
return n < t ? t : n > e ? e : n;
|
|
381
380
|
}
|
|
382
|
-
function
|
|
383
|
-
return
|
|
381
|
+
function at(n) {
|
|
382
|
+
return n * n;
|
|
384
383
|
}
|
|
385
|
-
function
|
|
386
|
-
for (var r = 0, a = 1e100, i =
|
|
387
|
-
var
|
|
384
|
+
function yt(n, t, e) {
|
|
385
|
+
for (var r = 0, a = 1e100, i = n[t], s = i.cnt, l = (i.ac, i.rc), d = i.gc, p = i.bc, o = i.fw; o != 0; o = n[o].fw) {
|
|
386
|
+
var c = n[o].cnt, u = s * c / (s + c);
|
|
388
387
|
if (!(u >= a)) {
|
|
389
388
|
var m = 0;
|
|
390
|
-
!((m += u *
|
|
389
|
+
!((m += u * at(n[o].rc - l)) >= a) && !((m += u * at(n[o].gc - d)) >= a) && !((m += u * at(n[o].bc - p)) >= a) && (a = m, r = o);
|
|
391
390
|
}
|
|
392
391
|
}
|
|
393
392
|
i.err = a, i.nn = r;
|
|
394
393
|
}
|
|
395
|
-
function
|
|
394
|
+
function dt() {
|
|
396
395
|
return { ac: 0, rc: 0, gc: 0, bc: 0, cnt: 0, nn: 0, fw: 0, bk: 0, tm: 0, mtm: 0, err: 0 };
|
|
397
396
|
}
|
|
398
|
-
function
|
|
399
|
-
let
|
|
400
|
-
if (
|
|
401
|
-
let i =
|
|
402
|
-
|
|
397
|
+
function ae(n, t) {
|
|
398
|
+
let e = new Array(t === "rgb444" ? 4096 : 65536), r = n.length;
|
|
399
|
+
if (t === "rgba4444") for (let a = 0; a < r; ++a) {
|
|
400
|
+
let i = n[a], s = i >> 24 & 255, l = i >> 16 & 255, d = i >> 8 & 255, p = 255 & i, o = Ot(p, d, l, s), c = o in e ? e[o] : e[o] = dt();
|
|
401
|
+
c.rc += p, c.gc += d, c.bc += l, c.ac += s, c.cnt++;
|
|
403
402
|
}
|
|
404
|
-
else if (
|
|
405
|
-
let i =
|
|
406
|
-
|
|
403
|
+
else if (t === "rgb444") for (let a = 0; a < r; ++a) {
|
|
404
|
+
let i = n[a], s = i >> 16 & 255, l = i >> 8 & 255, d = 255 & i, p = Tt(d, l, s), o = p in e ? e[p] : e[p] = dt();
|
|
405
|
+
o.rc += d, o.gc += l, o.bc += s, o.cnt++;
|
|
407
406
|
}
|
|
408
407
|
else for (let a = 0; a < r; ++a) {
|
|
409
|
-
let i =
|
|
410
|
-
|
|
408
|
+
let i = n[a], s = i >> 16 & 255, l = i >> 8 & 255, d = 255 & i, p = Vt(d, l, s), o = p in e ? e[p] : e[p] = dt();
|
|
409
|
+
o.rc += d, o.gc += l, o.bc += s, o.cnt++;
|
|
411
410
|
}
|
|
412
|
-
return
|
|
411
|
+
return e;
|
|
413
412
|
}
|
|
414
|
-
function
|
|
415
|
-
let { format: r = "rgb565", clearAlpha: a = !0, clearAlphaColor: i = 0, clearAlphaThreshold: s = 0, oneBitAlpha:
|
|
416
|
-
for (var x = 0, h = 0; h <
|
|
417
|
-
let k =
|
|
413
|
+
function ie(n, t, e) {
|
|
414
|
+
let { format: r = "rgb565", clearAlpha: a = !0, clearAlphaColor: i = 0, clearAlphaThreshold: s = 0, oneBitAlpha: l = !1 } = e || {}, d = e.useSqrt !== !1, p = r === "rgba4444", o = ae(n, r), c = o.length, u = c - 1, m = new Uint32Array(c + 1);
|
|
415
|
+
for (var x = 0, h = 0; h < o.length; ++h) {
|
|
416
|
+
let k = o[h];
|
|
418
417
|
if (k != null) {
|
|
419
418
|
var g = 1 / k.cnt;
|
|
420
|
-
p && (k.ac *= g), k.rc *= g, k.gc *= g, k.bc *= g,
|
|
419
|
+
p && (k.ac *= g), k.rc *= g, k.gc *= g, k.bc *= g, o[x++] = k;
|
|
421
420
|
}
|
|
422
421
|
}
|
|
423
|
-
for (
|
|
422
|
+
for (at(t) / x < 0.022 && (d = !1), h = 0; h < x - 1; ++h) o[h].fw = h + 1, o[h + 1].bk = h, d && (o[h].cnt = Math.sqrt(o[h].cnt));
|
|
424
423
|
var _, v, f;
|
|
425
|
-
for (
|
|
426
|
-
|
|
427
|
-
var C =
|
|
428
|
-
for (v = ++m[0]; v > 1 && !(
|
|
424
|
+
for (d && (o[h].cnt = Math.sqrt(o[h].cnt)), h = 0; h < x; ++h) {
|
|
425
|
+
yt(o, h);
|
|
426
|
+
var C = o[h].err;
|
|
427
|
+
for (v = ++m[0]; v > 1 && !(o[_ = m[f = v >> 1]].err <= C); v = f) m[v] = _;
|
|
429
428
|
m[v] = h;
|
|
430
429
|
}
|
|
431
|
-
var
|
|
432
|
-
for (h = 0; h <
|
|
430
|
+
var S = x - t;
|
|
431
|
+
for (h = 0; h < S; ) {
|
|
433
432
|
for (var E; ; ) {
|
|
434
433
|
var A = m[1];
|
|
435
|
-
if ((E =
|
|
436
|
-
for (E.mtm == u ? A = m[1] = m[m[0]--] : (
|
|
434
|
+
if ((E = o[A]).tm >= E.mtm && o[E.nn].mtm <= E.tm) break;
|
|
435
|
+
for (E.mtm == u ? A = m[1] = m[m[0]--] : (yt(o, A), E.tm = h), C = o[A].err, v = 1; (f = v + v) <= m[0] && (f < m[0] && o[m[f]].err > o[m[f + 1]].err && f++, !(C <= o[_ = m[f]].err)); v = f) m[v] = _;
|
|
437
436
|
m[v] = A;
|
|
438
437
|
}
|
|
439
|
-
var L =
|
|
440
|
-
g = 1 / (V + B), p && (E.ac = g * (V * E.ac + B * L.ac)), E.rc = g * (V * E.rc + B * L.rc), E.gc = g * (V * E.gc + B * L.gc), E.bc = g * (V * E.bc + B * L.bc), E.cnt += L.cnt, E.mtm = ++h,
|
|
438
|
+
var L = o[E.nn], V = E.cnt, B = L.cnt;
|
|
439
|
+
g = 1 / (V + B), p && (E.ac = g * (V * E.ac + B * L.ac)), E.rc = g * (V * E.rc + B * L.rc), E.gc = g * (V * E.gc + B * L.gc), E.bc = g * (V * E.bc + B * L.bc), E.cnt += L.cnt, E.mtm = ++h, o[L.bk].fw = L.fw, o[L.fw].bk = L.bk, L.mtm = u;
|
|
441
440
|
}
|
|
442
441
|
let D = [];
|
|
443
442
|
var T = 0;
|
|
444
443
|
for (h = 0; ; ++T) {
|
|
445
|
-
let k =
|
|
446
|
-
p && (w =
|
|
447
|
-
let
|
|
448
|
-
if (
|
|
444
|
+
let k = tt(Math.round(o[h].rc), 0, 255), R = tt(Math.round(o[h].gc), 0, 255), y = tt(Math.round(o[h].bc), 0, 255), w = 255;
|
|
445
|
+
p && (w = tt(Math.round(o[h].ac), 0, 255), l && (w = w <= (typeof l == "number" ? l : 127) ? 0 : 255), a && w <= s && (k = R = y = i, w = 0));
|
|
446
|
+
let F = p ? [k, R, y, w] : [k, R, y];
|
|
447
|
+
if (oe(D, F) || D.push(F), (h = o[h].fw) == 0) break;
|
|
449
448
|
}
|
|
450
449
|
return D;
|
|
451
450
|
}
|
|
452
|
-
function
|
|
453
|
-
for (let
|
|
454
|
-
let r =
|
|
451
|
+
function oe(n, t) {
|
|
452
|
+
for (let e = 0; e < n.length; e++) {
|
|
453
|
+
let r = n[e], a = r[0] === t[0] && r[1] === t[1] && r[2] === t[2], i = !(r.length >= 4 && t.length >= 4) || r[3] === t[3];
|
|
455
454
|
if (a && i) return !0;
|
|
456
455
|
}
|
|
457
456
|
return !1;
|
|
458
457
|
}
|
|
459
|
-
function
|
|
460
|
-
let r = (
|
|
461
|
-
if (
|
|
462
|
-
let
|
|
463
|
-
i[m] != null ?
|
|
458
|
+
function ne(n, t, e) {
|
|
459
|
+
let r = (e = e || "rgb565") === "rgb444" ? 4096 : 65536, a = new Uint8Array(n.length), i = new Array(r);
|
|
460
|
+
if (e === "rgba4444") for (let s = 0; s < n.length; s++) {
|
|
461
|
+
let l, d = n[s], p = d >> 24 & 255, o = d >> 16 & 255, c = d >> 8 & 255, u = 255 & d, m = Ot(u, c, o, p);
|
|
462
|
+
i[m] != null ? l = i[m] : (l = se(u, c, o, p, t), i[m] = l), a[s] = l;
|
|
464
463
|
}
|
|
465
|
-
else for (let s = 0; s <
|
|
466
|
-
let
|
|
467
|
-
i[u] != null ?
|
|
464
|
+
else for (let s = 0; s < n.length; s++) {
|
|
465
|
+
let l, d = n[s], p = d >> 16 & 255, o = d >> 8 & 255, c = 255 & d, u = e === "rgb444" ? Tt(c, o, p) : Vt(c, o, p);
|
|
466
|
+
i[u] != null ? l = i[u] : (l = le(c, o, p, t), i[u] = l), a[s] = l;
|
|
468
467
|
}
|
|
469
468
|
return a;
|
|
470
469
|
}
|
|
471
|
-
function
|
|
470
|
+
function se(n, t, e, r, a) {
|
|
472
471
|
let i = 0, s = 1e100;
|
|
473
|
-
for (let
|
|
474
|
-
let
|
|
475
|
-
u > s || (u += W(p -
|
|
472
|
+
for (let l = 0; l < a.length; l++) {
|
|
473
|
+
let d = a[l], p = d[0], o = d[1], c = d[2], u = W(d[3] - r);
|
|
474
|
+
u > s || (u += W(p - n), !(u > s) && (u += W(o - t), !(u > s) && (u += W(c - e), !(u > s) && (s = u, i = l))));
|
|
476
475
|
}
|
|
477
476
|
return i;
|
|
478
477
|
}
|
|
479
|
-
function
|
|
478
|
+
function le(n, t, e, r) {
|
|
480
479
|
let a = 0, i = 1e100;
|
|
481
480
|
for (let s = 0; s < r.length; s++) {
|
|
482
|
-
let
|
|
483
|
-
|
|
481
|
+
let l = r[s], d = l[0], p = l[1], o = l[2], c = W(d - n);
|
|
482
|
+
c > i || (c += W(p - t), !(c > i) && (c += W(o - e), !(c > i) && (i = c, a = s)));
|
|
484
483
|
}
|
|
485
484
|
return a;
|
|
486
485
|
}
|
|
487
|
-
function W(
|
|
488
|
-
return
|
|
486
|
+
function W(n) {
|
|
487
|
+
return n * n;
|
|
489
488
|
}
|
|
490
|
-
function
|
|
491
|
-
let { initialCapacity:
|
|
489
|
+
function de(n = {}) {
|
|
490
|
+
let { initialCapacity: t = 4096, auto: e = !0 } = n, r = Dt(t), a = new Uint8Array(256), i = new Int32Array(5003), s = new Int32Array(5003), l = !1;
|
|
492
491
|
return { reset() {
|
|
493
|
-
r.reset(),
|
|
492
|
+
r.reset(), l = !1;
|
|
494
493
|
}, finish() {
|
|
495
|
-
r.writeByte(
|
|
494
|
+
r.writeByte(Zt.trailer);
|
|
496
495
|
}, bytes: () => r.bytes(), bytesView: () => r.bytesView(), get buffer() {
|
|
497
496
|
return r.buffer;
|
|
498
497
|
}, get stream() {
|
|
499
498
|
return r;
|
|
500
|
-
}, writeHeader:
|
|
499
|
+
}, writeHeader: d, writeFrame(p, o, c, u = {}) {
|
|
501
500
|
let { transparent: m = !1, transparentIndex: x = 0, delay: h = 0, palette: g = null, repeat: _ = 0, colorDepth: v = 8, dispose: f = -1 } = u, C = !1;
|
|
502
|
-
if (
|
|
501
|
+
if (e ? l || (C = !0, d(), l = !0) : C = !!u.first, o = Math.max(0, Math.floor(o)), c = Math.max(0, Math.floor(c)), C) {
|
|
503
502
|
if (!g) throw new Error("First frame must include a { palette } option");
|
|
504
|
-
|
|
503
|
+
ue(r, o, c, g, v), _t(r, g), _ >= 0 && pe(r, _);
|
|
505
504
|
}
|
|
506
|
-
let
|
|
507
|
-
|
|
505
|
+
let S = Math.round(h / 10);
|
|
506
|
+
ce(r, f, S, m, x);
|
|
508
507
|
let E = !!g && !C;
|
|
509
|
-
|
|
508
|
+
he(r, o, c, E ? g : null), E && _t(r, g), me(r, p, o, c, v, a, i, s);
|
|
510
509
|
} };
|
|
511
|
-
function
|
|
512
|
-
|
|
510
|
+
function d() {
|
|
511
|
+
Rt(r, "GIF89a");
|
|
513
512
|
}
|
|
514
513
|
}
|
|
515
|
-
function
|
|
514
|
+
function ce(n, t, e, r, a) {
|
|
516
515
|
var i, s;
|
|
517
|
-
|
|
516
|
+
n.writeByte(33), n.writeByte(249), n.writeByte(4), a < 0 && (a = 0, r = !1), r ? (i = 1, s = 2) : (i = 0, s = 0), t >= 0 && (s = 7 & t), s <<= 2, n.writeByte(0 | s | i), N(n, e), n.writeByte(a || 0), n.writeByte(0);
|
|
518
517
|
}
|
|
519
|
-
function
|
|
520
|
-
let i = 128 | a - 1 << 4 |
|
|
521
|
-
N(
|
|
518
|
+
function ue(n, t, e, r, a = 8) {
|
|
519
|
+
let i = 128 | a - 1 << 4 | ht(r.length) - 1;
|
|
520
|
+
N(n, t), N(n, e), n.writeBytes([i, 0, 0]);
|
|
522
521
|
}
|
|
523
|
-
function
|
|
524
|
-
|
|
522
|
+
function pe(n, t) {
|
|
523
|
+
n.writeByte(33), n.writeByte(255), n.writeByte(11), Rt(n, "NETSCAPE2.0"), n.writeByte(3), n.writeByte(1), N(n, t), n.writeByte(0);
|
|
525
524
|
}
|
|
526
|
-
function
|
|
527
|
-
let
|
|
528
|
-
for (let r = 0; r <
|
|
525
|
+
function _t(n, t) {
|
|
526
|
+
let e = 1 << ht(t.length);
|
|
527
|
+
for (let r = 0; r < e; r++) {
|
|
529
528
|
let a = [0, 0, 0];
|
|
530
|
-
r <
|
|
529
|
+
r < t.length && (a = t[r]), n.writeByte(a[0]), n.writeByte(a[1]), n.writeByte(a[2]);
|
|
531
530
|
}
|
|
532
531
|
}
|
|
533
|
-
function
|
|
534
|
-
if (
|
|
535
|
-
let a = 0, i = 0, s =
|
|
536
|
-
|
|
537
|
-
} else
|
|
532
|
+
function he(n, t, e, r) {
|
|
533
|
+
if (n.writeByte(44), N(n, 0), N(n, 0), N(n, t), N(n, e), r) {
|
|
534
|
+
let a = 0, i = 0, s = ht(r.length) - 1;
|
|
535
|
+
n.writeByte(128 | a | i | s);
|
|
536
|
+
} else n.writeByte(0);
|
|
538
537
|
}
|
|
539
|
-
function
|
|
540
|
-
|
|
538
|
+
function me(n, t, e, r, a = 8, i, s, l) {
|
|
539
|
+
re(e, r, t, a, n, i, s, l);
|
|
541
540
|
}
|
|
542
|
-
function N(
|
|
543
|
-
|
|
541
|
+
function N(n, t) {
|
|
542
|
+
n.writeByte(255 & t), n.writeByte(t >> 8 & 255);
|
|
544
543
|
}
|
|
545
|
-
function
|
|
546
|
-
for (var
|
|
544
|
+
function Rt(n, t) {
|
|
545
|
+
for (var e = 0; e < t.length; e++) n.writeByte(t.charCodeAt(e));
|
|
547
546
|
}
|
|
548
|
-
function
|
|
549
|
-
return Math.max(Math.ceil(Math.log2(
|
|
547
|
+
function ht(n) {
|
|
548
|
+
return Math.max(Math.ceil(Math.log2(n)), 1);
|
|
550
549
|
}
|
|
551
|
-
|
|
552
|
-
class
|
|
550
|
+
Kt();
|
|
551
|
+
class fe {
|
|
553
552
|
_recorder;
|
|
554
553
|
_textmodifier;
|
|
555
554
|
_registerPostDrawHook;
|
|
556
|
-
constructor(
|
|
557
|
-
this._recorder = new
|
|
555
|
+
constructor(t, e) {
|
|
556
|
+
this._recorder = new Qt(), this._textmodifier = t, this._registerPostDrawHook = e;
|
|
558
557
|
}
|
|
559
|
-
async $saveGIF(
|
|
560
|
-
const
|
|
558
|
+
async $saveGIF(t = {}) {
|
|
559
|
+
const e = this._textmodifier.canvas, r = this._applyDefaultOptions(t), a = t.onProgress;
|
|
561
560
|
try {
|
|
562
|
-
const i = await this._recorder.$record(
|
|
563
|
-
for (let
|
|
564
|
-
const
|
|
565
|
-
s.writeFrame(v, u, m, { palette: _, delay: h, repeat:
|
|
561
|
+
const i = await this._recorder.$record(e, r, this._registerPostDrawHook, a), s = de(), { repeat: l } = t;
|
|
562
|
+
for (let o = 0; o < i.length; o++) {
|
|
563
|
+
const c = i[o], { width: u, height: m, imageData: x, delayMs: h } = c, g = new Uint32Array(x.data.buffer), _ = ie(g, 256, {}), v = ne(g, _);
|
|
564
|
+
s.writeFrame(v, u, m, { palette: _, delay: h, repeat: o === 0 ? l : -1 }), o % 2 != 0 && o !== i.length - 1 || (a?.({ state: "encoding", frameIndex: o + 1, totalFrames: i.length }), await new Promise((f) => setTimeout(f, 0)));
|
|
566
565
|
}
|
|
567
566
|
s.finish();
|
|
568
|
-
const
|
|
567
|
+
const d = s.bytes(), p = d.buffer.slice(d.byteOffset, d.byteOffset + d.byteLength);
|
|
569
568
|
new Q().$downloadFile(new Blob([p], { type: "image/gif" }), r.filename), a?.({ state: "completed", totalFrames: r.frameCount });
|
|
570
569
|
} catch (i) {
|
|
571
570
|
throw a?.({ state: "error", message: i instanceof Error ? i.message : "GIF export failed" }), i;
|
|
572
571
|
}
|
|
573
572
|
}
|
|
574
|
-
_applyDefaultOptions(
|
|
575
|
-
const
|
|
576
|
-
return { filename:
|
|
573
|
+
_applyDefaultOptions(t) {
|
|
574
|
+
const e = Math.abs(Math.round(t.frameCount ?? 300)), r = Math.abs(t.frameRate ?? 60), a = Math.abs(t.scale ?? 1), i = Math.max(-1, Math.round(t.repeat ?? 0));
|
|
575
|
+
return { filename: t.filename, frameCount: e, frameRate: r, scale: a, repeat: i };
|
|
577
576
|
}
|
|
578
577
|
}
|
|
579
|
-
function
|
|
580
|
-
return
|
|
578
|
+
function ge(n) {
|
|
579
|
+
return n && n.__esModule && Object.prototype.hasOwnProperty.call(n, "default") ? n.default : n;
|
|
581
580
|
}
|
|
582
|
-
var
|
|
583
|
-
function
|
|
584
|
-
return
|
|
585
|
-
function
|
|
586
|
-
return (function(
|
|
587
|
-
if (typeof
|
|
588
|
-
return window.atob(
|
|
589
|
-
})(typeof
|
|
581
|
+
var wt, Ct = { exports: {} };
|
|
582
|
+
function be() {
|
|
583
|
+
return wt || (wt = 1, n = Ct, (function() {
|
|
584
|
+
function t(d, p) {
|
|
585
|
+
return (function(o) {
|
|
586
|
+
if (typeof o != "string" || !o.match(/^data:image\/webp;base64,/i)) throw new Error("Failed to decode WebP Base64 URL");
|
|
587
|
+
return window.atob(o.substring(23));
|
|
588
|
+
})(typeof d == "string" && /^data:image\/webp/.test(d) ? d : d.toDataURL("image/webp", p));
|
|
590
589
|
}
|
|
591
|
-
function
|
|
592
|
-
return (
|
|
590
|
+
function e(d) {
|
|
591
|
+
return (d.charCodeAt(0) | d.charCodeAt(1) << 8 | d.charCodeAt(2) << 16 | d.charCodeAt(3) << 24) >>> 0;
|
|
593
592
|
}
|
|
594
|
-
function r(
|
|
595
|
-
let p =
|
|
593
|
+
function r(d) {
|
|
594
|
+
let p = d.indexOf("VP8", 12);
|
|
596
595
|
if (p === -1) throw new Error("Bad image format, does this browser support WebP?");
|
|
597
|
-
let
|
|
598
|
-
for (; p <
|
|
599
|
-
let
|
|
600
|
-
switch (u =
|
|
596
|
+
let o = !1;
|
|
597
|
+
for (; p < d.length - 8; ) {
|
|
598
|
+
let c, u;
|
|
599
|
+
switch (u = d.substring(p, p + 4), p += 4, c = e(d.substring(p, p + 4)), p += 4, u) {
|
|
601
600
|
case "VP8 ":
|
|
602
|
-
return { frame:
|
|
601
|
+
return { frame: d.substring(p, p + c), hasAlpha: o };
|
|
603
602
|
case "ALPH":
|
|
604
|
-
|
|
603
|
+
o = !0;
|
|
605
604
|
}
|
|
606
|
-
p +=
|
|
605
|
+
p += c, 1 & c && p++;
|
|
607
606
|
}
|
|
608
607
|
throw new Error("Failed to find VP8 keyframe in WebP image, is this image mistakenly encoded in the Lossless WebP format?");
|
|
609
608
|
}
|
|
610
|
-
function a(
|
|
611
|
-
this.value =
|
|
609
|
+
function a(d) {
|
|
610
|
+
this.value = d;
|
|
612
611
|
}
|
|
613
|
-
function i(
|
|
614
|
-
this.value =
|
|
612
|
+
function i(d) {
|
|
613
|
+
this.value = d;
|
|
615
614
|
}
|
|
616
|
-
function s(
|
|
617
|
-
if (Array.isArray(
|
|
618
|
-
else if (typeof
|
|
619
|
-
else if (
|
|
615
|
+
function s(d, p, o) {
|
|
616
|
+
if (Array.isArray(o)) for (let c = 0; c < o.length; c++) s(d, p, o[c]);
|
|
617
|
+
else if (typeof o == "string") d.writeString(o);
|
|
618
|
+
else if (o instanceof Uint8Array) d.writeBytes(o);
|
|
620
619
|
else {
|
|
621
|
-
if (!
|
|
622
|
-
if (
|
|
623
|
-
let
|
|
624
|
-
|
|
625
|
-
} else if (typeof
|
|
626
|
-
else if (typeof
|
|
627
|
-
else if (
|
|
628
|
-
else if (
|
|
620
|
+
if (!o.id) throw new Error("Bad EBML datatype " + typeof o.data);
|
|
621
|
+
if (o.offset = d.pos + p, d.writeUnsignedIntBE(o.id), Array.isArray(o.data)) {
|
|
622
|
+
let c, u, m;
|
|
623
|
+
o.size === -1 ? d.writeByte(255) : o.size === -2 ? (c = d.pos, d.writeBytes([15, 255, 255, 255, 255])) : (c = d.pos, d.writeBytes([0, 0, 0, 0])), u = d.pos, o.dataOffset = u + p, s(d, p, o.data), o.size !== -1 && o.size !== -2 && (m = d.pos, o.size = m - u, d.seek(c), d.writeEBMLVarIntWidth(o.size, 4), d.seek(m));
|
|
624
|
+
} else if (typeof o.data == "string") d.writeEBMLVarInt(o.data.length), o.dataOffset = d.pos + p, d.writeString(o.data);
|
|
625
|
+
else if (typeof o.data == "number") o.size || (o.size = d.measureUnsignedInt(o.data)), d.writeEBMLVarInt(o.size), o.dataOffset = d.pos + p, d.writeUnsignedIntBE(o.data, o.size);
|
|
626
|
+
else if (o.data instanceof i) d.writeEBMLVarInt(8), o.dataOffset = d.pos + p, d.writeDoubleBE(o.data.value);
|
|
627
|
+
else if (o.data instanceof a) d.writeEBMLVarInt(4), o.dataOffset = d.pos + p, d.writeFloatBE(o.data.value);
|
|
629
628
|
else {
|
|
630
|
-
if (!(
|
|
631
|
-
|
|
629
|
+
if (!(o.data instanceof Uint8Array)) throw new Error("Bad EBML datatype " + typeof o.data);
|
|
630
|
+
d.writeEBMLVarInt(o.data.byteLength), o.dataOffset = d.pos + p, d.writeBytes(o.data);
|
|
632
631
|
}
|
|
633
632
|
}
|
|
634
633
|
}
|
|
635
|
-
let
|
|
636
|
-
return function(
|
|
637
|
-
let
|
|
634
|
+
let l = function(d, p) {
|
|
635
|
+
return function(o) {
|
|
636
|
+
let c, u, m = !1, x = 0, h = 0, g = null, _ = null, v = null, f = [], C = 0, S = 0, E = { quality: 0.95, transparent: !1, alphaQuality: void 0, fileWriter: null, fd: null, frameDuration: null, frameRate: null }, A = { Cues: { id: new Uint8Array([28, 83, 187, 107]), positionEBML: null }, SegmentInfo: { id: new Uint8Array([21, 73, 169, 102]), positionEBML: null }, Tracks: { id: new Uint8Array([22, 84, 174, 107]), positionEBML: null } }, L = { id: 17545, data: new i(0) }, V = [], B = new p(o.fileWriter || o.fd);
|
|
638
637
|
function D(y) {
|
|
639
|
-
return y -
|
|
638
|
+
return y - c.dataOffset;
|
|
640
639
|
}
|
|
641
640
|
function T() {
|
|
642
641
|
u = (function() {
|
|
@@ -648,201 +647,201 @@ function bt() {
|
|
|
648
647
|
return U;
|
|
649
648
|
})();
|
|
650
649
|
let y = { id: 357149030, data: [{ id: 2807729, data: 1e6 }, { id: 19840, data: "webm-writer-js" }, { id: 22337, data: "webm-writer-js" }, L] }, w = [{ id: 176, data: x }, { id: 186, data: h }];
|
|
651
|
-
|
|
652
|
-
let
|
|
653
|
-
|
|
654
|
-
let $ = new
|
|
655
|
-
s($, B.pos, [{ id: 440786851, data: [{ id: 17030, data: 1 }, { id: 17143, data: 1 }, { id: 17138, data: 4 }, { id: 17139, data: 8 }, { id: 17026, data: "webm" }, { id: 17031, data: 2 }, { id: 17029, data: 2 }] },
|
|
650
|
+
o.transparent && w.push({ id: 21440, data: 1 });
|
|
651
|
+
let F = { id: 374648427, data: [{ id: 174, data: [{ id: 215, data: 1 }, { id: 29637, data: 1 }, { id: 156, data: 0 }, { id: 2274716, data: "und" }, { id: 134, data: "V_VP8" }, { id: 2459272, data: "VP8" }, { id: 131, data: 1 }, { id: 224, data: w }] }] };
|
|
652
|
+
c = { id: 408125543, size: -2, data: [u, y, F] };
|
|
653
|
+
let $ = new d(256);
|
|
654
|
+
s($, B.pos, [{ id: 440786851, data: [{ id: 17030, data: 1 }, { id: 17143, data: 1 }, { id: 17138, data: 4 }, { id: 17139, data: 8 }, { id: 17026, data: "webm" }, { id: 17031, data: 2 }, { id: 17029, data: 2 }] }, c]), B.write($.getAsDataArray()), A.SegmentInfo.positionEBML.data = D(y.offset), A.Tracks.positionEBML.data = D(F.offset), m = !0;
|
|
656
655
|
}
|
|
657
656
|
function k(y) {
|
|
658
657
|
return y.alpha ? (function(w) {
|
|
659
|
-
let
|
|
658
|
+
let F, $, M = new d(4);
|
|
660
659
|
if (!(w.trackNumber > 0 && w.trackNumber < 127)) throw new Error("TrackNumber must be > 0 and < 127");
|
|
661
|
-
return M.writeEBMLVarInt(w.trackNumber), M.writeU16BE(w.timecode), M.writeByte(0),
|
|
660
|
+
return M.writeEBMLVarInt(w.trackNumber), M.writeU16BE(w.timecode), M.writeByte(0), F = { id: 161, data: [M.getAsDataArray(), w.frame] }, $ = { id: 30113, data: [{ id: 166, data: [{ id: 238, data: 1 }, { id: 165, data: w.alpha }] }] }, { id: 160, data: [F, $] };
|
|
662
661
|
})(y) : (function(w) {
|
|
663
|
-
let
|
|
662
|
+
let F = new d(4);
|
|
664
663
|
if (!(w.trackNumber > 0 && w.trackNumber < 127)) throw new Error("TrackNumber must be > 0 and < 127");
|
|
665
|
-
return
|
|
664
|
+
return F.writeEBMLVarInt(w.trackNumber), F.writeU16BE(w.timecode), F.writeByte(128), { id: 163, data: [F.getAsDataArray(), w.frame] };
|
|
666
665
|
})(y);
|
|
667
666
|
}
|
|
668
667
|
function R() {
|
|
669
668
|
if (f.length === 0) return;
|
|
670
669
|
let y = 0;
|
|
671
670
|
for (let I = 0; I < f.length; I++) y += f[I].frame.length + (f[I].alpha ? f[I].alpha.length : 0);
|
|
672
|
-
let w = new
|
|
671
|
+
let w = new d(y + 64 * f.length), F = (function(I) {
|
|
673
672
|
return { id: 524531317, data: [{ id: 231, data: Math.round(I.timecode) }] };
|
|
674
673
|
})({ timecode: Math.round(C) });
|
|
675
|
-
for (let I = 0; I < f.length; I++)
|
|
674
|
+
for (let I = 0; I < f.length; I++) F.data.push(k(f[I]));
|
|
676
675
|
var $, M, U;
|
|
677
|
-
s(w, B.pos,
|
|
676
|
+
s(w, B.pos, F), B.write(w.getAsDataArray()), $ = 1, M = Math.round(C), U = F.offset, V.push({ id: 187, data: [{ id: 179, data: M }, { id: 183, data: [{ id: 247, data: $ }, { id: 241, data: D(U) }] }] }), f = [], C += S, S = 0;
|
|
678
677
|
}
|
|
679
|
-
this.addFrame = function(y, w,
|
|
678
|
+
this.addFrame = function(y, w, F) {
|
|
680
679
|
m || (x = y.width || 0, h = y.height || 0, T());
|
|
681
|
-
let $, M = r(
|
|
682
|
-
$ =
|
|
680
|
+
let $, M = r(t(y, o.quality)), U = null;
|
|
681
|
+
$ = F || (typeof w == "number" ? w : o.frameDuration), o.transparent && (w instanceof HTMLCanvasElement || typeof w == "string" ? U = w : M.hasAlpha && (U = (function(I) {
|
|
683
682
|
g !== null && g.width === I.width && g.height === I.height || (g = document.createElement("canvas"), g.width = I.width, g.height = I.height, _ = g.getContext("2d"), v = _.createImageData(g.width, g.height));
|
|
684
|
-
let q = I.getContext("2d").getImageData(0, 0, I.width, I.height).data, J = v.data, K = 0,
|
|
685
|
-
for (let
|
|
686
|
-
let
|
|
687
|
-
J[K++] =
|
|
683
|
+
let q = I.getContext("2d").getImageData(0, 0, I.width, I.height).data, J = v.data, K = 0, Wt = I.width * I.height * 4;
|
|
684
|
+
for (let ot = 3; ot < Wt; ot += 4) {
|
|
685
|
+
let nt = q[ot];
|
|
686
|
+
J[K++] = nt, J[K++] = nt, J[K++] = nt, J[K++] = 255;
|
|
688
687
|
}
|
|
689
688
|
return _.putImageData(v, 0, 0), g;
|
|
690
689
|
})(y))), (function(I) {
|
|
691
|
-
I.trackNumber = 1, I.timecode = Math.round(
|
|
692
|
-
})({ frame: M.frame, duration: $, alpha: U ? r(
|
|
690
|
+
I.trackNumber = 1, I.timecode = Math.round(S), f.push(I), S += I.duration, S >= 5e3 && R();
|
|
691
|
+
})({ frame: M.frame, duration: $, alpha: U ? r(t(U, o.alphaQuality)).frame : null });
|
|
693
692
|
}, this.complete = function() {
|
|
694
693
|
return m || T(), R(), (function() {
|
|
695
|
-
let y = { id: 475249515, data: V }, w = new
|
|
694
|
+
let y = { id: 475249515, data: V }, w = new d(16 + 32 * V.length);
|
|
696
695
|
s(w, B.pos, y), B.write(w.getAsDataArray()), A.Cues.positionEBML.data = D(y.offset);
|
|
697
696
|
})(), (function() {
|
|
698
|
-
let y = new
|
|
697
|
+
let y = new d(u.size), w = B.pos;
|
|
699
698
|
s(y, u.dataOffset, u.data), B.seek(u.dataOffset), B.write(y.getAsDataArray()), B.seek(w);
|
|
700
699
|
})(), (function() {
|
|
701
|
-
let y = new
|
|
700
|
+
let y = new d(8), w = B.pos;
|
|
702
701
|
y.writeDoubleBE(C), B.seek(L.dataOffset), B.write(y.getAsDataArray()), B.seek(w);
|
|
703
702
|
})(), (function() {
|
|
704
|
-
let y = new
|
|
705
|
-
y.writeUnsignedIntBE(
|
|
703
|
+
let y = new d(10), w = B.pos;
|
|
704
|
+
y.writeUnsignedIntBE(c.id), y.writeEBMLVarIntWidth(B.pos - c.dataOffset, 5), B.seek(c.offset), B.write(y.getAsDataArray()), B.seek(w);
|
|
706
705
|
})(), B.complete("video/webm");
|
|
707
706
|
}, this.getWrittenSize = function() {
|
|
708
707
|
return B.length;
|
|
709
|
-
},
|
|
710
|
-
let
|
|
708
|
+
}, o = (function(y, w) {
|
|
709
|
+
let F = {};
|
|
711
710
|
return [y, w].forEach(function($) {
|
|
712
|
-
for (let M in $) Object.prototype.hasOwnProperty.call($, M) && (
|
|
713
|
-
}),
|
|
714
|
-
})(E,
|
|
715
|
-
if (!
|
|
716
|
-
if (!
|
|
717
|
-
|
|
711
|
+
for (let M in $) Object.prototype.hasOwnProperty.call($, M) && (F[M] = $[M]);
|
|
712
|
+
}), F;
|
|
713
|
+
})(E, o || {}), (function() {
|
|
714
|
+
if (!o.frameDuration) {
|
|
715
|
+
if (!o.frameRate) throw new Error("Missing required frameDuration or frameRate setting");
|
|
716
|
+
o.frameDuration = 1e3 / o.frameRate;
|
|
718
717
|
}
|
|
719
|
-
|
|
718
|
+
o.quality = Math.max(Math.min(o.quality, 0.99999), 0), o.alphaQuality === void 0 ? o.alphaQuality = o.quality : o.alphaQuality = Math.max(Math.min(o.alphaQuality, 0.99999), 0);
|
|
720
719
|
})();
|
|
721
720
|
};
|
|
722
721
|
};
|
|
723
|
-
|
|
724
|
-
})()),
|
|
725
|
-
var
|
|
726
|
-
}
|
|
727
|
-
var
|
|
728
|
-
function
|
|
729
|
-
return
|
|
730
|
-
let
|
|
731
|
-
this.data = new Uint8Array(
|
|
722
|
+
n.exports = l;
|
|
723
|
+
})()), Ct.exports;
|
|
724
|
+
var n;
|
|
725
|
+
}
|
|
726
|
+
var Et, kt = { exports: {} };
|
|
727
|
+
function ve() {
|
|
728
|
+
return Et || (Et = 1, n = kt, (function() {
|
|
729
|
+
let t = function(e) {
|
|
730
|
+
this.data = new Uint8Array(e), this.pos = 0;
|
|
732
731
|
};
|
|
733
|
-
|
|
734
|
-
this.pos =
|
|
735
|
-
},
|
|
736
|
-
for (let r = 0; r <
|
|
737
|
-
},
|
|
738
|
-
this.data[this.pos++] =
|
|
739
|
-
},
|
|
740
|
-
this.data[this.pos++] =
|
|
741
|
-
},
|
|
742
|
-
let r = new Uint8Array(new Float64Array([
|
|
732
|
+
t.prototype.seek = function(e) {
|
|
733
|
+
this.pos = e;
|
|
734
|
+
}, t.prototype.writeBytes = function(e) {
|
|
735
|
+
for (let r = 0; r < e.length; r++) this.data[this.pos++] = e[r];
|
|
736
|
+
}, t.prototype.writeByte = function(e) {
|
|
737
|
+
this.data[this.pos++] = e;
|
|
738
|
+
}, t.prototype.writeU8 = t.prototype.writeByte, t.prototype.writeU16BE = function(e) {
|
|
739
|
+
this.data[this.pos++] = e >> 8, this.data[this.pos++] = e;
|
|
740
|
+
}, t.prototype.writeDoubleBE = function(e) {
|
|
741
|
+
let r = new Uint8Array(new Float64Array([e]).buffer);
|
|
743
742
|
for (let a = r.length - 1; a >= 0; a--) this.writeByte(r[a]);
|
|
744
|
-
},
|
|
745
|
-
let r = new Uint8Array(new Float32Array([
|
|
743
|
+
}, t.prototype.writeFloatBE = function(e) {
|
|
744
|
+
let r = new Uint8Array(new Float32Array([e]).buffer);
|
|
746
745
|
for (let a = r.length - 1; a >= 0; a--) this.writeByte(r[a]);
|
|
747
|
-
},
|
|
748
|
-
for (let r = 0; r <
|
|
749
|
-
},
|
|
746
|
+
}, t.prototype.writeString = function(e) {
|
|
747
|
+
for (let r = 0; r < e.length; r++) this.data[this.pos++] = e.charCodeAt(r);
|
|
748
|
+
}, t.prototype.writeEBMLVarIntWidth = function(e, r) {
|
|
750
749
|
switch (r) {
|
|
751
750
|
case 1:
|
|
752
|
-
this.writeU8(128 |
|
|
751
|
+
this.writeU8(128 | e);
|
|
753
752
|
break;
|
|
754
753
|
case 2:
|
|
755
|
-
this.writeU8(64 |
|
|
754
|
+
this.writeU8(64 | e >> 8), this.writeU8(e);
|
|
756
755
|
break;
|
|
757
756
|
case 3:
|
|
758
|
-
this.writeU8(32 |
|
|
757
|
+
this.writeU8(32 | e >> 16), this.writeU8(e >> 8), this.writeU8(e);
|
|
759
758
|
break;
|
|
760
759
|
case 4:
|
|
761
|
-
this.writeU8(16 |
|
|
760
|
+
this.writeU8(16 | e >> 24), this.writeU8(e >> 16), this.writeU8(e >> 8), this.writeU8(e);
|
|
762
761
|
break;
|
|
763
762
|
case 5:
|
|
764
|
-
this.writeU8(8 |
|
|
763
|
+
this.writeU8(8 | e / 4294967296 & 7), this.writeU8(e >> 24), this.writeU8(e >> 16), this.writeU8(e >> 8), this.writeU8(e);
|
|
765
764
|
break;
|
|
766
765
|
default:
|
|
767
766
|
throw new Error("Bad EBML VINT size " + r);
|
|
768
767
|
}
|
|
769
|
-
},
|
|
770
|
-
if (
|
|
771
|
-
if (
|
|
772
|
-
if (
|
|
773
|
-
if (
|
|
774
|
-
if (
|
|
775
|
-
throw new Error("EBML VINT size not supported " +
|
|
776
|
-
},
|
|
777
|
-
this.writeEBMLVarIntWidth(
|
|
778
|
-
},
|
|
779
|
-
switch (r === void 0 && (r = this.measureUnsignedInt(
|
|
768
|
+
}, t.prototype.measureEBMLVarInt = function(e) {
|
|
769
|
+
if (e < 127) return 1;
|
|
770
|
+
if (e < 16383) return 2;
|
|
771
|
+
if (e < 2097151) return 3;
|
|
772
|
+
if (e < 268435455) return 4;
|
|
773
|
+
if (e < 34359738367) return 5;
|
|
774
|
+
throw new Error("EBML VINT size not supported " + e);
|
|
775
|
+
}, t.prototype.writeEBMLVarInt = function(e) {
|
|
776
|
+
this.writeEBMLVarIntWidth(e, this.measureEBMLVarInt(e));
|
|
777
|
+
}, t.prototype.writeUnsignedIntBE = function(e, r) {
|
|
778
|
+
switch (r === void 0 && (r = this.measureUnsignedInt(e)), r) {
|
|
780
779
|
case 5:
|
|
781
|
-
this.writeU8(Math.floor(
|
|
780
|
+
this.writeU8(Math.floor(e / 4294967296));
|
|
782
781
|
case 4:
|
|
783
|
-
this.writeU8(
|
|
782
|
+
this.writeU8(e >> 24);
|
|
784
783
|
case 3:
|
|
785
|
-
this.writeU8(
|
|
784
|
+
this.writeU8(e >> 16);
|
|
786
785
|
case 2:
|
|
787
|
-
this.writeU8(
|
|
786
|
+
this.writeU8(e >> 8);
|
|
788
787
|
case 1:
|
|
789
|
-
this.writeU8(
|
|
788
|
+
this.writeU8(e);
|
|
790
789
|
break;
|
|
791
790
|
default:
|
|
792
791
|
throw new Error("Bad UINT size " + r);
|
|
793
792
|
}
|
|
794
|
-
},
|
|
795
|
-
return
|
|
796
|
-
},
|
|
793
|
+
}, t.prototype.measureUnsignedInt = function(e) {
|
|
794
|
+
return e < 256 ? 1 : e < 65536 ? 2 : e < 1 << 24 ? 3 : e < 4294967296 ? 4 : 5;
|
|
795
|
+
}, t.prototype.getAsDataArray = function() {
|
|
797
796
|
if (this.pos < this.data.byteLength) return this.data.subarray(0, this.pos);
|
|
798
797
|
if (this.pos == this.data.byteLength) return this.data;
|
|
799
798
|
throw new Error("ArrayBufferDataStream's pos lies beyond end of buffer");
|
|
800
|
-
},
|
|
801
|
-
})()),
|
|
802
|
-
var
|
|
803
|
-
}
|
|
804
|
-
var
|
|
805
|
-
function
|
|
806
|
-
return
|
|
807
|
-
let
|
|
799
|
+
}, n.exports = t;
|
|
800
|
+
})()), kt.exports;
|
|
801
|
+
var n;
|
|
802
|
+
}
|
|
803
|
+
var Bt, It, St, Ft = { exports: {} };
|
|
804
|
+
function xe() {
|
|
805
|
+
return Bt || (Bt = 1, n = Ft, (function() {
|
|
806
|
+
let t = function(e) {
|
|
808
807
|
return function(r) {
|
|
809
|
-
let a = [], i = Promise.resolve(), s = null,
|
|
810
|
-
function
|
|
808
|
+
let a = [], i = Promise.resolve(), s = null, l = null;
|
|
809
|
+
function d(c) {
|
|
811
810
|
return new Promise(function(u, m) {
|
|
812
811
|
let x = new FileReader();
|
|
813
812
|
x.addEventListener("loadend", function() {
|
|
814
813
|
u(x.result);
|
|
815
|
-
}), x.readAsArrayBuffer(
|
|
814
|
+
}), x.readAsArrayBuffer(c);
|
|
816
815
|
});
|
|
817
816
|
}
|
|
818
|
-
function p(
|
|
817
|
+
function p(c) {
|
|
819
818
|
return new Promise(function(u, m) {
|
|
820
|
-
|
|
819
|
+
c instanceof Uint8Array ? u(c) : c instanceof ArrayBuffer || ArrayBuffer.isView(c) ? u(new Uint8Array(c)) : c instanceof Blob ? u(d(c).then(function(x) {
|
|
821
820
|
return new Uint8Array(x);
|
|
822
|
-
})) : u(
|
|
821
|
+
})) : u(d(new Blob([c])).then(function(x) {
|
|
823
822
|
return new Uint8Array(x);
|
|
824
823
|
}));
|
|
825
824
|
});
|
|
826
825
|
}
|
|
827
|
-
function
|
|
828
|
-
let u =
|
|
826
|
+
function o(c) {
|
|
827
|
+
let u = c.byteLength || c.length || c.size;
|
|
829
828
|
if (!Number.isInteger(u)) throw new Error("Failed to determine size of element");
|
|
830
829
|
return u;
|
|
831
830
|
}
|
|
832
|
-
r && r.constructor.name === "FileWriter" ? s = r :
|
|
833
|
-
if (
|
|
834
|
-
if (isNaN(
|
|
835
|
-
if (
|
|
836
|
-
this.pos =
|
|
837
|
-
}, this.write = function(
|
|
838
|
-
let u = { offset: this.pos, data:
|
|
831
|
+
r && r.constructor.name === "FileWriter" ? s = r : e && r && (l = r), this.pos = 0, this.length = 0, this.seek = function(c) {
|
|
832
|
+
if (c < 0) throw new Error("Offset may not be negative");
|
|
833
|
+
if (isNaN(c)) throw new Error("Offset may not be NaN");
|
|
834
|
+
if (c > this.length) throw new Error("Seeking beyond the end of file is not allowed");
|
|
835
|
+
this.pos = c;
|
|
836
|
+
}, this.write = function(c) {
|
|
837
|
+
let u = { offset: this.pos, data: c, length: o(c) }, m = u.offset >= this.length;
|
|
839
838
|
this.pos += u.length, this.length = Math.max(this.length, this.pos), i = i.then(function() {
|
|
840
|
-
if (
|
|
839
|
+
if (l) return new Promise(function(x, h) {
|
|
841
840
|
p(u.data).then(function(g) {
|
|
842
|
-
let _ = 0, v = Buffer.from(g.buffer), f = function(C,
|
|
843
|
-
_ +=
|
|
841
|
+
let _ = 0, v = Buffer.from(g.buffer), f = function(C, S, E) {
|
|
842
|
+
_ += S, _ >= E.length ? x() : e.write(l, E, _, E.length - _, u.offset + _, f);
|
|
844
843
|
};
|
|
845
|
-
|
|
844
|
+
e.write(l, v, 0, v.length, u.offset, f);
|
|
846
845
|
});
|
|
847
846
|
});
|
|
848
847
|
if (s) return new Promise(function(x, h) {
|
|
@@ -861,53 +860,53 @@ function xt() {
|
|
|
861
860
|
}
|
|
862
861
|
a.push(u);
|
|
863
862
|
});
|
|
864
|
-
}, this.complete = function(
|
|
865
|
-
return i =
|
|
863
|
+
}, this.complete = function(c) {
|
|
864
|
+
return i = l || s ? i.then(function() {
|
|
866
865
|
return null;
|
|
867
866
|
}) : i.then(function() {
|
|
868
867
|
let u = [];
|
|
869
868
|
for (let m = 0; m < a.length; m++) u.push(a[m].data);
|
|
870
|
-
return new Blob(u, { type:
|
|
869
|
+
return new Blob(u, { type: c });
|
|
871
870
|
}), i;
|
|
872
871
|
};
|
|
873
872
|
};
|
|
874
873
|
};
|
|
875
|
-
|
|
876
|
-
})()),
|
|
877
|
-
var
|
|
878
|
-
}
|
|
879
|
-
function
|
|
880
|
-
return
|
|
881
|
-
}
|
|
882
|
-
var
|
|
883
|
-
const
|
|
884
|
-
class
|
|
885
|
-
async $record(
|
|
886
|
-
const i = Math.max(1, Math.round(
|
|
887
|
-
return await new Promise((p,
|
|
888
|
-
let
|
|
874
|
+
n.exports = t;
|
|
875
|
+
})()), Ft.exports;
|
|
876
|
+
var n;
|
|
877
|
+
}
|
|
878
|
+
function ye() {
|
|
879
|
+
return St ? It : (St = 1, It = be()(ve(), xe()(null)));
|
|
880
|
+
}
|
|
881
|
+
var _e = ye();
|
|
882
|
+
const we = ge(_e);
|
|
883
|
+
class Ce {
|
|
884
|
+
async $record(t, e, r, a) {
|
|
885
|
+
const i = Math.max(1, Math.round(e.frameRate)), s = Math.max(1, Math.round(e.frameCount)), l = new we({ quality: e.quality, alphaQuality: e.transparent ? e.quality : void 0, transparent: e.transparent, frameRate: i }), d = this._createSnapshotSurface();
|
|
886
|
+
return await new Promise((p, o) => {
|
|
887
|
+
let c, u = "capturing", m = !1, x = 0;
|
|
889
888
|
const h = () => {
|
|
890
|
-
|
|
889
|
+
c && (c(), c = void 0);
|
|
891
890
|
}, g = () => {
|
|
892
891
|
a?.({ state: "recording", frameIndex: x, totalFrames: s });
|
|
893
892
|
}, _ = (f) => {
|
|
894
893
|
if (m) return;
|
|
895
894
|
m = !0, h();
|
|
896
895
|
const C = f instanceof Error ? f.message : "WEBM export failed";
|
|
897
|
-
a?.({ state: "error", message: C }),
|
|
896
|
+
a?.({ state: "error", message: C }), o(f instanceof Error ? f : new Error(String(f)));
|
|
898
897
|
}, v = () => {
|
|
899
|
-
u !== "capturing" || m || (u = "encoding", h(),
|
|
898
|
+
u !== "capturing" || m || (u = "encoding", h(), l.complete().then((f) => {
|
|
900
899
|
((C) => {
|
|
901
900
|
m || (m = !0, a?.({ state: "completed", frameIndex: Math.min(s, x), totalFrames: s }), p(C));
|
|
902
901
|
})(f);
|
|
903
902
|
}).catch(_));
|
|
904
903
|
};
|
|
905
|
-
|
|
904
|
+
c = r(() => {
|
|
906
905
|
(() => {
|
|
907
906
|
if (u === "capturing") if (x >= s) v();
|
|
908
907
|
else try {
|
|
909
|
-
const f =
|
|
910
|
-
|
|
908
|
+
const f = d(t);
|
|
909
|
+
l.addFrame(f), x += 1, g(), x >= s && v();
|
|
911
910
|
} catch (f) {
|
|
912
911
|
_(f);
|
|
913
912
|
}
|
|
@@ -916,31 +915,31 @@ class Ct {
|
|
|
916
915
|
});
|
|
917
916
|
}
|
|
918
917
|
_createSnapshotSurface() {
|
|
919
|
-
let
|
|
918
|
+
let t = null, e = null;
|
|
920
919
|
return (r) => {
|
|
921
|
-
const a = Math.max(1, r.width), i = Math.max(1, r.height), s = ((
|
|
922
|
-
return s &&
|
|
920
|
+
const a = Math.max(1, r.width), i = Math.max(1, r.height), s = ((l, d) => (t || (t = document.createElement("canvas")), t.width !== l || t.height !== d ? (t.width = l, t.height = d, e = t.getContext("2d"), e && (e.imageSmoothingEnabled = !1)) : e || (e = t.getContext("2d"), e && (e.imageSmoothingEnabled = !1)), e ? t : null))(a, i);
|
|
921
|
+
return s && e ? (e.clearRect(0, 0, a, i), e.drawImage(r, 0, 0, a, i), s) : r;
|
|
923
922
|
};
|
|
924
923
|
}
|
|
925
924
|
}
|
|
926
|
-
class
|
|
925
|
+
class Ee {
|
|
927
926
|
_recorder;
|
|
928
927
|
_textmodifier;
|
|
929
928
|
_registerPostDrawHook;
|
|
930
|
-
constructor(
|
|
931
|
-
this._recorder = new
|
|
929
|
+
constructor(t, e) {
|
|
930
|
+
this._recorder = new Ce(), this._textmodifier = t, this._registerPostDrawHook = e;
|
|
932
931
|
}
|
|
933
|
-
async $saveWEBM(
|
|
934
|
-
const
|
|
932
|
+
async $saveWEBM(t = {}) {
|
|
933
|
+
const e = this._textmodifier.canvas, r = this._applyDefaultOptions(t);
|
|
935
934
|
try {
|
|
936
|
-
const a = await this._recorder.$record(
|
|
935
|
+
const a = await this._recorder.$record(e, r, this._registerPostDrawHook, t.onProgress);
|
|
937
936
|
new Q().$downloadFile(a, r.filename);
|
|
938
937
|
} catch (a) {
|
|
939
|
-
throw
|
|
938
|
+
throw t.onProgress?.({ state: "error", message: a instanceof Error ? a.message : "WEBM export failed" }), a;
|
|
940
939
|
}
|
|
941
940
|
}
|
|
942
|
-
_applyDefaultOptions(
|
|
943
|
-
return { filename:
|
|
941
|
+
_applyDefaultOptions(t) {
|
|
942
|
+
return { filename: t.filename, frameRate: Math.abs(Math.round(t.frameRate ?? 60)), frameCount: Math.abs(Math.round(t.frameCount ?? 300)), quality: Math.abs(Math.min(Math.max(t.quality ?? 1, 0), 1)), transparent: !!t.transparent, debugLogging: !!t.debugLogging };
|
|
944
943
|
}
|
|
945
944
|
}
|
|
946
945
|
const b = { root: "textmode-export-overlay", stack: "textmode-export-overlay__stack", stackDense: "textmode-export-overlay__stack--dense", stackCompact: "textmode-export-overlay__stack--compact", section: "textmode-export-overlay__section", header: "textmode-export-overlay__header", headerTitleRow: "textmode-export-overlay__header-title-row", headerLinks: "textmode-export-overlay__header-links", row: "textmode-export-overlay__row", label: "textmode-export-overlay__label", field: "textmode-export-overlay__field", fieldCompact: "textmode-export-overlay__field--compact", fieldDense: "textmode-export-overlay__field--dense", fieldFull: "textmode-export-overlay__field--full", fieldChannel: "textmode-export-overlay__field--channel", input: "textmode-export-overlay__input", checkbox: "textmode-export-overlay__checkbox", muted: "textmode-export-overlay__muted", status: "textmode-export-overlay__status", statusGif: "textmode-export-overlay__status--gif", statusVideo: "textmode-export-overlay__status--video", statusTitle: "textmode-export-overlay__status-title", statusValue: "textmode-export-overlay__status-value", divider: "textmode-export-overlay__divider", title: "textmode-export-overlay__title", button: "textmode-export-overlay__button", buttonPrimary: "textmode-export-overlay__button--primary", buttonSecondary: "textmode-export-overlay__button--secondary", buttonFull: "textmode-export-overlay__button--full", supportLink: "textmode-export-overlay__support-link", supportIcon: "textmode-export-overlay__support-icon", linkIcon: "textmode-export-overlay__link-icon" };
|
|
@@ -948,11 +947,11 @@ class O {
|
|
|
948
947
|
element;
|
|
949
948
|
mounted = !1;
|
|
950
949
|
destroyed = !1;
|
|
951
|
-
mount(
|
|
950
|
+
mount(t) {
|
|
952
951
|
if (this.destroyed) throw new Error("Cannot mount a destroyed component");
|
|
953
952
|
if (this.mounted) return;
|
|
954
|
-
const
|
|
955
|
-
|
|
953
|
+
const e = this.render();
|
|
954
|
+
t.appendChild(e), this.element = e, this.onMount(), this.mounted = !0;
|
|
956
955
|
}
|
|
957
956
|
unmount() {
|
|
958
957
|
this.mounted && this.element && (this._onUnmount(), this.element.remove(), this.element = void 0, this.mounted = !1);
|
|
@@ -960,8 +959,8 @@ class O {
|
|
|
960
959
|
destroy() {
|
|
961
960
|
this.destroyed || (this.unmount(), this._onDestroy(), this.destroyed = !0);
|
|
962
961
|
}
|
|
963
|
-
update(
|
|
964
|
-
this.mounted && this.onUpdate(
|
|
962
|
+
update(t) {
|
|
963
|
+
this.mounted && this.onUpdate(t);
|
|
965
964
|
}
|
|
966
965
|
onMount() {
|
|
967
966
|
}
|
|
@@ -969,7 +968,7 @@ class O {
|
|
|
969
968
|
}
|
|
970
969
|
_onDestroy() {
|
|
971
970
|
}
|
|
972
|
-
onUpdate(
|
|
971
|
+
onUpdate(t) {
|
|
973
972
|
}
|
|
974
973
|
get root() {
|
|
975
974
|
if (!this.element) throw new Error("Component is not mounted yet");
|
|
@@ -982,29 +981,29 @@ class O {
|
|
|
982
981
|
class H extends O {
|
|
983
982
|
static _iconNamespace = "http://www.w3.org/2000/svg";
|
|
984
983
|
render() {
|
|
985
|
-
const e = document.createElement("div");
|
|
986
|
-
e.classList.add(b.stack, b.stackDense, b.header);
|
|
987
984
|
const t = document.createElement("div");
|
|
988
|
-
t.classList.add(b.
|
|
985
|
+
t.classList.add(b.stack, b.stackDense, b.header);
|
|
986
|
+
const e = document.createElement("div");
|
|
987
|
+
e.classList.add(b.headerTitleRow);
|
|
989
988
|
const r = document.createElement("strong");
|
|
990
989
|
r.textContent = "textmode.export.js", r.classList.add(b.title);
|
|
991
990
|
const a = document.createElement("div");
|
|
992
991
|
a.classList.add(b.headerLinks);
|
|
993
|
-
const i = this._createLink("https://github.com/humanbydefinition/textmode.export.js", "View repository on GitHub", b.linkIcon, [{ d: "M0 0h24v24H0z", fill: "none", stroke: "none" }, { d: "M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" }]), s = this._createLink("https://code.textmode.art/support
|
|
994
|
-
a.appendChild(i), a.appendChild(s),
|
|
995
|
-
const
|
|
996
|
-
return
|
|
992
|
+
const i = this._createLink("https://github.com/humanbydefinition/textmode.export.js", "View repository on GitHub", b.linkIcon, [{ d: "M0 0h24v24H0z", fill: "none", stroke: "none" }, { d: "M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" }]), s = this._createLink("https://code.textmode.art/docs/support", "Support textmode.export.js", b.supportIcon, [{ d: "M0 0h24v24H0z", fill: "none", stroke: "none" }, { d: "M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" }, { d: "M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }, { d: "M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" }, { d: "M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" }, { d: "M16.746 16.726a3 3 0 1 0 .252 -5.555" }]);
|
|
993
|
+
a.appendChild(i), a.appendChild(s), e.appendChild(r), e.appendChild(a);
|
|
994
|
+
const l = document.createElement("div");
|
|
995
|
+
return l.classList.add(b.divider), t.appendChild(e), t.appendChild(l), t;
|
|
997
996
|
}
|
|
998
|
-
_createLink(
|
|
997
|
+
_createLink(t, e, r, a) {
|
|
999
998
|
const i = document.createElement("a");
|
|
1000
|
-
return i.href =
|
|
999
|
+
return i.href = t, i.target = "_blank", i.rel = "noopener noreferrer", i.classList.add(b.supportLink), i.setAttribute("aria-label", e), i.appendChild(this._createIcon(r, a)), i;
|
|
1001
1000
|
}
|
|
1002
|
-
_createIcon(
|
|
1001
|
+
_createIcon(t, e) {
|
|
1003
1002
|
const r = document.createElementNS(H._iconNamespace, "svg");
|
|
1004
|
-
r.setAttribute("xmlns", H._iconNamespace), r.setAttribute("width", "18"), r.setAttribute("height", "18"), r.setAttribute("viewBox", "0 0 24 24"), r.setAttribute("fill", "none"), r.setAttribute("stroke", "currentColor"), r.setAttribute("stroke-width", "2"), r.setAttribute("stroke-linecap", "round"), r.setAttribute("stroke-linejoin", "round"), r.classList.add(
|
|
1005
|
-
for (const a of
|
|
1003
|
+
r.setAttribute("xmlns", H._iconNamespace), r.setAttribute("width", "18"), r.setAttribute("height", "18"), r.setAttribute("viewBox", "0 0 24 24"), r.setAttribute("fill", "none"), r.setAttribute("stroke", "currentColor"), r.setAttribute("stroke-width", "2"), r.setAttribute("stroke-linecap", "round"), r.setAttribute("stroke-linejoin", "round"), r.classList.add(t);
|
|
1004
|
+
for (const a of e) {
|
|
1006
1005
|
const i = document.createElementNS(H._iconNamespace, "path");
|
|
1007
|
-
for (const [s,
|
|
1006
|
+
for (const [s, l] of Object.entries(a)) i.setAttribute(s, l);
|
|
1008
1007
|
r.appendChild(i);
|
|
1009
1008
|
}
|
|
1010
1009
|
return r;
|
|
@@ -1012,59 +1011,59 @@ class H extends O {
|
|
|
1012
1011
|
}
|
|
1013
1012
|
class P extends O {
|
|
1014
1013
|
props;
|
|
1015
|
-
constructor(
|
|
1016
|
-
super(), this.props =
|
|
1014
|
+
constructor(t) {
|
|
1015
|
+
super(), this.props = t;
|
|
1017
1016
|
}
|
|
1018
1017
|
render() {
|
|
1019
|
-
const
|
|
1020
|
-
|
|
1021
|
-
const
|
|
1022
|
-
if (
|
|
1018
|
+
const t = document.createElement("div");
|
|
1019
|
+
t.classList.add(b.field), this.applyVariant(t, this.props.variant);
|
|
1020
|
+
const e = document.createElement("label");
|
|
1021
|
+
if (e.classList.add(b.label), e.textContent = this.props.label, this.props.labelFor && (e.htmlFor = this.props.labelFor), t.appendChild(e), this.props.description) {
|
|
1023
1022
|
const r = document.createElement("span");
|
|
1024
|
-
r.classList.add(b.muted), r.textContent = this.props.description,
|
|
1023
|
+
r.classList.add(b.muted), r.textContent = this.props.description, t.appendChild(r);
|
|
1025
1024
|
}
|
|
1026
|
-
return
|
|
1025
|
+
return t;
|
|
1027
1026
|
}
|
|
1028
|
-
attachControl(
|
|
1029
|
-
this.root.appendChild(
|
|
1027
|
+
attachControl(t) {
|
|
1028
|
+
this.root.appendChild(t);
|
|
1030
1029
|
}
|
|
1031
|
-
update(
|
|
1032
|
-
this.props =
|
|
1030
|
+
update(t) {
|
|
1031
|
+
this.props = t, super.update(t);
|
|
1033
1032
|
}
|
|
1034
|
-
onUpdate(
|
|
1035
|
-
const
|
|
1036
|
-
for (;
|
|
1037
|
-
this.props =
|
|
1033
|
+
onUpdate(t) {
|
|
1034
|
+
const e = this.root;
|
|
1035
|
+
for (; e.firstChild; ) e.removeChild(e.firstChild);
|
|
1036
|
+
this.props = t, e.classList.add(b.field), this.applyVariant(e, t.variant);
|
|
1038
1037
|
const r = document.createElement("label");
|
|
1039
|
-
if (r.classList.add(b.label), r.textContent =
|
|
1038
|
+
if (r.classList.add(b.label), r.textContent = t.label, t.labelFor && (r.htmlFor = t.labelFor), e.appendChild(r), t.description) {
|
|
1040
1039
|
const a = document.createElement("span");
|
|
1041
|
-
a.classList.add(b.muted), a.textContent =
|
|
1040
|
+
a.classList.add(b.muted), a.textContent = t.description, e.appendChild(a);
|
|
1042
1041
|
}
|
|
1043
1042
|
}
|
|
1044
|
-
applyVariant(
|
|
1045
|
-
switch (
|
|
1043
|
+
applyVariant(t, e) {
|
|
1044
|
+
switch (t.classList.remove(b.fieldCompact, b.fieldDense, b.fieldFull, b.fieldChannel), e) {
|
|
1046
1045
|
case "compact":
|
|
1047
|
-
|
|
1046
|
+
t.classList.add(b.fieldCompact);
|
|
1048
1047
|
break;
|
|
1049
1048
|
case "dense":
|
|
1050
|
-
|
|
1049
|
+
t.classList.add(b.fieldDense);
|
|
1051
1050
|
break;
|
|
1052
1051
|
case "full":
|
|
1053
|
-
|
|
1052
|
+
t.classList.add(b.fieldFull);
|
|
1054
1053
|
break;
|
|
1055
1054
|
case "channel":
|
|
1056
|
-
|
|
1055
|
+
t.classList.add(b.fieldChannel);
|
|
1057
1056
|
}
|
|
1058
1057
|
}
|
|
1059
1058
|
}
|
|
1060
|
-
class
|
|
1059
|
+
class mt extends O {
|
|
1061
1060
|
props;
|
|
1062
1061
|
select;
|
|
1063
1062
|
handleChange = () => {
|
|
1064
1063
|
this.props.defaultValue = this.select.value;
|
|
1065
1064
|
};
|
|
1066
|
-
constructor(
|
|
1067
|
-
super(), this.props =
|
|
1065
|
+
constructor(t) {
|
|
1066
|
+
super(), this.props = t;
|
|
1068
1067
|
}
|
|
1069
1068
|
render() {
|
|
1070
1069
|
return this.select = document.createElement("select"), this.select.classList.add(b.input), this.props.id && (this.select.id = this.props.id), this.populateOptions(), this.select.addEventListener("change", this.handleChange), this.select;
|
|
@@ -1075,34 +1074,34 @@ class me extends O {
|
|
|
1075
1074
|
get value() {
|
|
1076
1075
|
return this.select.value;
|
|
1077
1076
|
}
|
|
1078
|
-
set value(
|
|
1079
|
-
this.select && (this.select.value =
|
|
1077
|
+
set value(t) {
|
|
1078
|
+
this.select && (this.select.value = t), this.props.defaultValue = t;
|
|
1080
1079
|
}
|
|
1081
1080
|
_onUnmount() {
|
|
1082
1081
|
this.select.removeEventListener("change", this.handleChange);
|
|
1083
1082
|
}
|
|
1084
|
-
onUpdate(
|
|
1085
|
-
this.props =
|
|
1083
|
+
onUpdate(t) {
|
|
1084
|
+
this.props = t, this.populateOptions(), t.defaultValue && (this.select.value = t.defaultValue);
|
|
1086
1085
|
}
|
|
1087
|
-
update(
|
|
1088
|
-
this.props = { ...this.props, ...
|
|
1086
|
+
update(t) {
|
|
1087
|
+
this.props = { ...this.props, ...t }, this.select && (t.id && (this.select.id = t.id), t.options && this.populateOptions(), t.defaultValue !== void 0 && (this.select.value = t.defaultValue));
|
|
1089
1088
|
}
|
|
1090
1089
|
populateOptions() {
|
|
1091
1090
|
if (this.select) {
|
|
1092
1091
|
this.select.innerHTML = "";
|
|
1093
|
-
for (const
|
|
1094
|
-
const
|
|
1095
|
-
|
|
1092
|
+
for (const t of this.props.options) {
|
|
1093
|
+
const e = document.createElement("option");
|
|
1094
|
+
e.value = t.value, e.textContent = t.label, this.select.appendChild(e);
|
|
1096
1095
|
}
|
|
1097
1096
|
this.props.defaultValue && (this.select.value = this.props.defaultValue);
|
|
1098
1097
|
}
|
|
1099
1098
|
}
|
|
1100
1099
|
}
|
|
1101
|
-
class
|
|
1100
|
+
class Lt extends O {
|
|
1102
1101
|
props;
|
|
1103
1102
|
button;
|
|
1104
|
-
constructor(
|
|
1105
|
-
super(), this.props =
|
|
1103
|
+
constructor(t) {
|
|
1104
|
+
super(), this.props = t;
|
|
1106
1105
|
}
|
|
1107
1106
|
render() {
|
|
1108
1107
|
return this.button = document.createElement("button"), this.button.type = "button", this.button.textContent = this.props.label, this.button.classList.add(b.button), this.props.variant === "secondary" ? this.button.classList.add(b.buttonSecondary) : this.button.classList.add(b.buttonPrimary), this.props.fullWidth && this.button.classList.add(b.buttonFull), this.button.disabled = !!this.props.disabled, this.button;
|
|
@@ -1110,87 +1109,87 @@ class Le extends O {
|
|
|
1110
1109
|
get buttonElement() {
|
|
1111
1110
|
return this.button;
|
|
1112
1111
|
}
|
|
1113
|
-
setLabel(
|
|
1114
|
-
this.props.label =
|
|
1112
|
+
setLabel(t) {
|
|
1113
|
+
this.props.label = t, this.button.textContent = t;
|
|
1115
1114
|
}
|
|
1116
|
-
setDisabled(
|
|
1117
|
-
this.props.disabled =
|
|
1115
|
+
setDisabled(t) {
|
|
1116
|
+
this.props.disabled = t, this.button.disabled = t;
|
|
1118
1117
|
}
|
|
1119
|
-
onUpdate(
|
|
1120
|
-
this.props =
|
|
1118
|
+
onUpdate(t) {
|
|
1119
|
+
this.props = t, this.button.textContent = t.label, this.button.disabled = !!t.disabled, t.variant === "secondary" ? (this.button.classList.add(b.buttonSecondary), this.button.classList.remove(b.buttonPrimary)) : (this.button.classList.add(b.buttonPrimary), this.button.classList.remove(b.buttonSecondary)), this.button.classList.toggle(b.buttonFull, !!t.fullWidth);
|
|
1121
1120
|
}
|
|
1122
1121
|
}
|
|
1123
|
-
class
|
|
1122
|
+
class ke {
|
|
1124
1123
|
api;
|
|
1125
|
-
constructor(
|
|
1126
|
-
this.api =
|
|
1124
|
+
constructor(t) {
|
|
1125
|
+
this.api = t;
|
|
1127
1126
|
}
|
|
1128
|
-
async $copy(
|
|
1129
|
-
switch (
|
|
1127
|
+
async $copy(t, e) {
|
|
1128
|
+
switch (t) {
|
|
1130
1129
|
case "txt": {
|
|
1131
|
-
const r = this.api.toString(
|
|
1130
|
+
const r = this.api.toString(e);
|
|
1132
1131
|
await navigator.clipboard.writeText(r);
|
|
1133
1132
|
break;
|
|
1134
1133
|
}
|
|
1135
1134
|
case "svg": {
|
|
1136
|
-
const r = this.api.toSVG(
|
|
1135
|
+
const r = this.api.toSVG(e);
|
|
1137
1136
|
await navigator.clipboard.writeText(r);
|
|
1138
1137
|
break;
|
|
1139
1138
|
}
|
|
1140
1139
|
case "image":
|
|
1141
|
-
await this.api.copyCanvas(
|
|
1140
|
+
await this.api.copyCanvas(e);
|
|
1142
1141
|
break;
|
|
1143
1142
|
default:
|
|
1144
|
-
throw new Error(`Clipboard not supported for ${
|
|
1143
|
+
throw new Error(`Clipboard not supported for ${t}`);
|
|
1145
1144
|
}
|
|
1146
1145
|
}
|
|
1147
1146
|
}
|
|
1148
|
-
class
|
|
1147
|
+
class Be {
|
|
1149
1148
|
api;
|
|
1150
1149
|
events;
|
|
1151
|
-
constructor(
|
|
1152
|
-
this.api =
|
|
1150
|
+
constructor(t, e) {
|
|
1151
|
+
this.api = t, this.events = e;
|
|
1153
1152
|
}
|
|
1154
|
-
async $requestExport(
|
|
1155
|
-
this.events.$emit("export:request", { format:
|
|
1153
|
+
async $requestExport(t, e, r = {}) {
|
|
1154
|
+
this.events.$emit("export:request", { format: t });
|
|
1156
1155
|
try {
|
|
1157
1156
|
const a = { onGIFProgress: r.onGIFProgress ? (i) => {
|
|
1158
|
-
r.onGIFProgress?.(i), this.events.$emit("export:progress", { format:
|
|
1159
|
-
} :
|
|
1160
|
-
r.onVideoProgress?.(i), this.events.$emit("export:progress", { format:
|
|
1161
|
-
} :
|
|
1162
|
-
await this._execute(
|
|
1157
|
+
r.onGIFProgress?.(i), this.events.$emit("export:progress", { format: t, progress: i });
|
|
1158
|
+
} : t === "gif" ? (i) => this.events.$emit("export:progress", { format: t, progress: i }) : void 0, onVideoProgress: r.onVideoProgress ? (i) => {
|
|
1159
|
+
r.onVideoProgress?.(i), this.events.$emit("export:progress", { format: t, progress: i });
|
|
1160
|
+
} : t === "video" ? (i) => this.events.$emit("export:progress", { format: t, progress: i }) : void 0 };
|
|
1161
|
+
await this._execute(t, e, a), this.events.$emit("export:success", { format: t });
|
|
1163
1162
|
} catch (a) {
|
|
1164
|
-
throw this.events.$emit("export:error", { format:
|
|
1163
|
+
throw this.events.$emit("export:error", { format: t, error: a }), a;
|
|
1165
1164
|
}
|
|
1166
1165
|
}
|
|
1167
|
-
_execute(
|
|
1168
|
-
switch (
|
|
1166
|
+
_execute(t, e, r) {
|
|
1167
|
+
switch (t) {
|
|
1169
1168
|
case "txt":
|
|
1170
|
-
return Promise.resolve(this.api.saveStrings(
|
|
1169
|
+
return Promise.resolve(this.api.saveStrings(e));
|
|
1171
1170
|
case "image":
|
|
1172
|
-
return this.api.saveCanvas(
|
|
1171
|
+
return this.api.saveCanvas(e);
|
|
1173
1172
|
case "svg":
|
|
1174
|
-
return Promise.resolve(this.api.saveSVG(
|
|
1173
|
+
return Promise.resolve(this.api.saveSVG(e));
|
|
1175
1174
|
case "gif": {
|
|
1176
|
-
const a = { ...
|
|
1175
|
+
const a = { ...e, onProgress: r.onGIFProgress };
|
|
1177
1176
|
return this.api.saveGIF(a);
|
|
1178
1177
|
}
|
|
1179
1178
|
case "video": {
|
|
1180
|
-
const a = { ...
|
|
1179
|
+
const a = { ...e, onProgress: r.onVideoProgress };
|
|
1181
1180
|
return this.api.saveWEBM(a);
|
|
1182
1181
|
}
|
|
1183
1182
|
}
|
|
1184
1183
|
}
|
|
1185
1184
|
}
|
|
1186
|
-
class
|
|
1185
|
+
class Ie {
|
|
1187
1186
|
modifier;
|
|
1188
1187
|
overlay;
|
|
1189
1188
|
animationFrameId = null;
|
|
1190
1189
|
handleUpdate;
|
|
1191
1190
|
bound = !1;
|
|
1192
|
-
constructor(
|
|
1193
|
-
this.modifier =
|
|
1191
|
+
constructor(t, e) {
|
|
1192
|
+
this.modifier = t, this.overlay = e, this.handleUpdate = () => this.scheduleUpdate();
|
|
1194
1193
|
}
|
|
1195
1194
|
scheduleUpdate() {
|
|
1196
1195
|
this.animationFrameId !== null && cancelAnimationFrame(this.animationFrameId), this.animationFrameId = requestAnimationFrame(() => this.update());
|
|
@@ -1200,18 +1199,18 @@ class It {
|
|
|
1200
1199
|
}
|
|
1201
1200
|
update() {
|
|
1202
1201
|
this.animationFrameId = null;
|
|
1203
|
-
const
|
|
1204
|
-
this.overlay.style.top = `${
|
|
1202
|
+
const t = this.modifier.canvas.getBoundingClientRect();
|
|
1203
|
+
this.overlay.style.top = `${t.top + window.scrollY + 8}px`, this.overlay.style.left = `${t.left + window.scrollX + 8}px`;
|
|
1205
1204
|
}
|
|
1206
1205
|
dispose() {
|
|
1207
1206
|
this.animationFrameId !== null && (cancelAnimationFrame(this.animationFrameId), this.animationFrameId = null), this.bound && (window.removeEventListener("resize", this.handleUpdate), window.removeEventListener("scroll", this.handleUpdate, !0), this.bound = !1);
|
|
1208
1207
|
}
|
|
1209
1208
|
}
|
|
1210
|
-
const X = "textmode-export-number-input",
|
|
1211
|
-
|
|
1212
|
-
},
|
|
1213
|
-
const
|
|
1214
|
-
return
|
|
1209
|
+
const X = "textmode-export-number-input", Se = `${X}__field`, Fe = `${X}__controls`, Le = `${X}__control`, Ut = `${X}__display`, et = `${Ut}--visible`, Me = (n) => {
|
|
1210
|
+
n.dispatchEvent(new Event("input", { bubbles: !0 })), n.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
1211
|
+
}, Mt = (n) => {
|
|
1212
|
+
const t = document.createElement("button");
|
|
1213
|
+
return t.type = "button", t.className = Le, t.textContent = n > 0 ? "▲" : "▼", t;
|
|
1215
1214
|
};
|
|
1216
1215
|
class G extends O {
|
|
1217
1216
|
props;
|
|
@@ -1224,14 +1223,14 @@ class G extends O {
|
|
|
1224
1223
|
holdIntervalId;
|
|
1225
1224
|
activePointerId;
|
|
1226
1225
|
disabledObserver;
|
|
1227
|
-
constructor(
|
|
1228
|
-
super(), this.props =
|
|
1226
|
+
constructor(t) {
|
|
1227
|
+
super(), this.props = t;
|
|
1229
1228
|
}
|
|
1230
1229
|
render() {
|
|
1231
|
-
const e = document.createElement("div");
|
|
1232
|
-
e.className = X, this.input = document.createElement("input"), this.input.type = "number", this.input.value = this.props.defaultValue, Object.assign(this.input, this.props.attributes), this.input.className = Ft, this.display = document.createElement("div"), this.display.className = Ue;
|
|
1233
1230
|
const t = document.createElement("div");
|
|
1234
|
-
|
|
1231
|
+
t.className = X, this.input = document.createElement("input"), this.input.type = "number", this.input.value = this.props.defaultValue, Object.assign(this.input, this.props.attributes), this.input.className = Se, this.display = document.createElement("div"), this.display.className = Ut;
|
|
1232
|
+
const e = document.createElement("div");
|
|
1233
|
+
return e.className = Fe, this.incrementButton = Mt(1), this.decrementButton = Mt(-1), e.appendChild(this.incrementButton), e.appendChild(this.decrementButton), t.appendChild(this.input), t.appendChild(this.display), t.appendChild(e), this.bindStepControls(), this.bindHoldBehavior(), this.bindInputListeners(), this.observeDisabledState(t), this.updateDisplay(), t;
|
|
1235
1234
|
}
|
|
1236
1235
|
get inputElement() {
|
|
1237
1236
|
return this.input;
|
|
@@ -1239,8 +1238,8 @@ class G extends O {
|
|
|
1239
1238
|
get value() {
|
|
1240
1239
|
return this.input.value;
|
|
1241
1240
|
}
|
|
1242
|
-
set value(
|
|
1243
|
-
this.input.value =
|
|
1241
|
+
set value(t) {
|
|
1242
|
+
this.input.value = t, this.updateDisplay();
|
|
1244
1243
|
}
|
|
1245
1244
|
refresh() {
|
|
1246
1245
|
this.updateDisplay();
|
|
@@ -1249,29 +1248,29 @@ class G extends O {
|
|
|
1249
1248
|
this.clearHoldTimers(), this.disabledObserver?.disconnect();
|
|
1250
1249
|
}
|
|
1251
1250
|
bindStepControls() {
|
|
1252
|
-
const
|
|
1251
|
+
const t = (i) => () => {
|
|
1253
1252
|
if (this.input.disabled) return;
|
|
1254
|
-
const s = this.input.value,
|
|
1255
|
-
if (
|
|
1253
|
+
const s = this.input.value, l = this.input.getAttribute("step");
|
|
1254
|
+
if (l && l !== "any") i > 0 ? this.input.stepUp() : this.input.stepDown();
|
|
1256
1255
|
else {
|
|
1257
|
-
const
|
|
1258
|
-
this.input.value = String(
|
|
1256
|
+
const d = i > 0 ? 1 : -1, p = Number.parseFloat(this.input.value || "0"), o = Number.isFinite(p) ? p + d : d;
|
|
1257
|
+
this.input.value = String(o);
|
|
1259
1258
|
}
|
|
1260
|
-
this.input.value !== s &&
|
|
1261
|
-
},
|
|
1262
|
-
if (this.suppressClickAfterPointer.get(i)) return this.suppressClickAfterPointer.set(i, !1), void
|
|
1259
|
+
this.input.value !== s && Me(this.input), this.updateDisplay(), this.input.focus({ preventScroll: !0 });
|
|
1260
|
+
}, e = t(1), r = t(-1), a = (i, s) => (l) => {
|
|
1261
|
+
if (this.suppressClickAfterPointer.get(i)) return this.suppressClickAfterPointer.set(i, !1), void l.preventDefault();
|
|
1263
1262
|
s();
|
|
1264
1263
|
};
|
|
1265
|
-
this.incrementButton.addEventListener("click", a(this.incrementButton,
|
|
1264
|
+
this.incrementButton.addEventListener("click", a(this.incrementButton, e)), this.decrementButton.addEventListener("click", a(this.decrementButton, r));
|
|
1266
1265
|
}
|
|
1267
1266
|
bindHoldBehavior() {
|
|
1268
|
-
const
|
|
1267
|
+
const t = (e, r) => {
|
|
1269
1268
|
const a = r > 0 ? () => this.incrementButton.click() : () => this.decrementButton.click();
|
|
1270
|
-
|
|
1271
|
-
if (
|
|
1272
|
-
|
|
1269
|
+
e.addEventListener("pointerdown", (l) => {
|
|
1270
|
+
if (l.button === 0) {
|
|
1271
|
+
l.preventDefault(), this.suppressClickAfterPointer.set(e, !0), this.activePointerId = l.pointerId;
|
|
1273
1272
|
try {
|
|
1274
|
-
|
|
1273
|
+
e.setPointerCapture(l.pointerId);
|
|
1275
1274
|
} catch {
|
|
1276
1275
|
}
|
|
1277
1276
|
a(), this.holdTimeoutId = window.setTimeout(() => {
|
|
@@ -1282,7 +1281,7 @@ class G extends O {
|
|
|
1282
1281
|
const i = () => {
|
|
1283
1282
|
if (this.activePointerId !== void 0) {
|
|
1284
1283
|
try {
|
|
1285
|
-
|
|
1284
|
+
e.releasePointerCapture(this.activePointerId);
|
|
1286
1285
|
} catch {
|
|
1287
1286
|
}
|
|
1288
1287
|
this.activePointerId = void 0;
|
|
@@ -1290,28 +1289,28 @@ class G extends O {
|
|
|
1290
1289
|
}, s = () => {
|
|
1291
1290
|
this.clearHoldTimers(), i();
|
|
1292
1291
|
};
|
|
1293
|
-
|
|
1292
|
+
e.addEventListener("pointerup", s), e.addEventListener("pointerleave", s), e.addEventListener("pointercancel", s);
|
|
1294
1293
|
};
|
|
1295
|
-
|
|
1294
|
+
t(this.incrementButton, 1), t(this.decrementButton, -1);
|
|
1296
1295
|
}
|
|
1297
1296
|
bindInputListeners() {
|
|
1298
|
-
const
|
|
1297
|
+
const t = () => {
|
|
1299
1298
|
this.props.defaultValue = this.input.value, this.updateDisplay();
|
|
1300
1299
|
};
|
|
1301
|
-
this.input.addEventListener("input",
|
|
1300
|
+
this.input.addEventListener("input", t), this.input.addEventListener("change", t);
|
|
1302
1301
|
}
|
|
1303
|
-
observeDisabledState(
|
|
1304
|
-
const
|
|
1302
|
+
observeDisabledState(t) {
|
|
1303
|
+
const e = () => {
|
|
1305
1304
|
const r = this.input.disabled;
|
|
1306
|
-
this.incrementButton.disabled = r, this.decrementButton.disabled = r,
|
|
1305
|
+
this.incrementButton.disabled = r, this.decrementButton.disabled = r, t.classList.toggle("is-disabled", r), r ? (this.display.classList.remove(et), this.input.style.removeProperty("color"), this.input.style.removeProperty("caretColor")) : this.updateDisplay();
|
|
1307
1306
|
};
|
|
1308
|
-
typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(
|
|
1307
|
+
typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(e), this.disabledObserver.observe(this.input, { attributes: !0, attributeFilter: ["disabled"] })), e();
|
|
1309
1308
|
}
|
|
1310
1309
|
updateDisplay() {
|
|
1311
|
-
const
|
|
1312
|
-
if (!
|
|
1313
|
-
const
|
|
1314
|
-
a ? (this.display.textContent = a, this.display.classList.add(
|
|
1310
|
+
const t = this.props.formatDisplay;
|
|
1311
|
+
if (!t) return this.display.textContent = "", this.display.classList.remove(et), this.input.style.removeProperty("color"), void this.input.style.removeProperty("caretColor");
|
|
1312
|
+
const e = this.input.value, r = Number.parseFloat(e), a = t(Number.isFinite(r) ? r : Number.NaN, e, this.input);
|
|
1313
|
+
a ? (this.display.textContent = a, this.display.classList.add(et), this.input.style.color = "transparent", this.input.style.caretColor = "#f8fafc") : (this.display.textContent = "", this.display.classList.remove(et), this.input.style.removeProperty("color"), this.input.style.removeProperty("caretColor"));
|
|
1315
1314
|
}
|
|
1316
1315
|
clearHoldTimers() {
|
|
1317
1316
|
this.holdTimeoutId !== void 0 && (window.clearTimeout(this.holdTimeoutId), this.holdTimeoutId = void 0), this.holdIntervalId !== void 0 && (window.clearInterval(this.holdIntervalId), this.holdIntervalId = void 0);
|
|
@@ -1320,147 +1319,147 @@ class G extends O {
|
|
|
1320
1319
|
class j extends O {
|
|
1321
1320
|
variant;
|
|
1322
1321
|
additionalClasses;
|
|
1323
|
-
constructor(
|
|
1324
|
-
super(), this.variant =
|
|
1322
|
+
constructor(t = "stack", e = []) {
|
|
1323
|
+
super(), this.variant = t, this.additionalClasses = e;
|
|
1325
1324
|
}
|
|
1326
1325
|
render() {
|
|
1327
|
-
const
|
|
1328
|
-
return
|
|
1326
|
+
const t = document.createElement("div"), e = [this.variant === "stack" ? b.stack : void 0, this.variant === "stackDense" ? b.stackDense : void 0, this.variant === "stackCompact" ? b.stackCompact : void 0, this.variant === "row" ? b.row : void 0, this.variant === "section" ? b.section : void 0, ...this.additionalClasses].filter(Boolean);
|
|
1327
|
+
return t.classList.add(...e), t;
|
|
1329
1328
|
}
|
|
1330
1329
|
}
|
|
1331
|
-
const $
|
|
1332
|
-
class
|
|
1330
|
+
const $t = { neutral: "textmode-export-overlay__status-value--neutral", active: "textmode-export-overlay__status-value--active", alert: "textmode-export-overlay__status-value--alert" };
|
|
1331
|
+
class Nt extends O {
|
|
1333
1332
|
props;
|
|
1334
1333
|
container;
|
|
1335
1334
|
messageElement;
|
|
1336
|
-
constructor(
|
|
1337
|
-
super(), this.props =
|
|
1335
|
+
constructor(t) {
|
|
1336
|
+
super(), this.props = t;
|
|
1338
1337
|
}
|
|
1339
1338
|
render() {
|
|
1340
1339
|
this.container = document.createElement("div"), this.container.classList.add(b.status), this.props.context === "gif" ? this.container.classList.add(b.statusGif) : this.props.context === "video" && this.container.classList.add(b.statusVideo);
|
|
1341
|
-
const
|
|
1342
|
-
return
|
|
1340
|
+
const t = document.createElement("span");
|
|
1341
|
+
return t.classList.add(b.statusTitle), t.textContent = this.props.title, this.messageElement = document.createElement("span"), this.messageElement.classList.add(b.statusValue), this.messageElement.textContent = this.props.message, this.applyVariant(this.props.variant ?? "neutral"), this.container.appendChild(t), this.container.appendChild(this.messageElement), this.container;
|
|
1343
1342
|
}
|
|
1344
|
-
setMessage(
|
|
1345
|
-
this.messageElement.textContent =
|
|
1343
|
+
setMessage(t, e = "neutral") {
|
|
1344
|
+
this.messageElement.textContent = t, this.applyVariant(e);
|
|
1346
1345
|
}
|
|
1347
|
-
onUpdate(
|
|
1348
|
-
this.props =
|
|
1346
|
+
onUpdate(t) {
|
|
1347
|
+
this.props = t, this.setMessage(t.message, t.variant ?? "neutral");
|
|
1349
1348
|
}
|
|
1350
|
-
applyVariant(
|
|
1351
|
-
this.messageElement.classList.remove(...Object.values($
|
|
1349
|
+
applyVariant(t) {
|
|
1350
|
+
this.messageElement.classList.remove(...Object.values($t)), this.messageElement.classList.add($t[t]);
|
|
1352
1351
|
}
|
|
1353
1352
|
}
|
|
1354
1353
|
class Y extends O {
|
|
1355
1354
|
_config;
|
|
1356
1355
|
_managedComponents = /* @__PURE__ */ new Set();
|
|
1357
|
-
constructor(
|
|
1358
|
-
super(), this._config =
|
|
1356
|
+
constructor(t) {
|
|
1357
|
+
super(), this._config = t;
|
|
1359
1358
|
}
|
|
1360
|
-
_manageComponent(
|
|
1361
|
-
return this._managedComponents.add(
|
|
1359
|
+
_manageComponent(t) {
|
|
1360
|
+
return this._managedComponents.add(t), t;
|
|
1362
1361
|
}
|
|
1363
1362
|
_onUnmount() {
|
|
1364
|
-
for (const
|
|
1363
|
+
for (const t of this._managedComponents) t.unmount();
|
|
1365
1364
|
}
|
|
1366
1365
|
_onDestroy() {
|
|
1367
|
-
for (const
|
|
1366
|
+
for (const t of this._managedComponents) t.destroy();
|
|
1368
1367
|
this._managedComponents.clear();
|
|
1369
1368
|
}
|
|
1370
1369
|
}
|
|
1371
1370
|
const z = { frameCount: 300, frameRate: 60, scale: 1, repeat: 0 };
|
|
1372
|
-
class
|
|
1371
|
+
class ut extends Y {
|
|
1373
1372
|
frameCountInput = this._manageComponent(new G({ defaultValue: String(z.frameCount), attributes: { min: "1", max: "600", step: "1" } }));
|
|
1374
1373
|
frameRateInput = this._manageComponent(new G({ defaultValue: String(z.frameRate), attributes: { min: "1", max: "60", step: "1" } }));
|
|
1375
1374
|
scaleInput = this._manageComponent(new G({ defaultValue: String(z.scale), attributes: { min: "0.1", max: "8", step: "0.1" } }));
|
|
1376
|
-
repeatInput = this._manageComponent(new G({ defaultValue: "0", attributes: { min: "0", max: "50", step: "1" }, formatDisplay: (
|
|
1377
|
-
status = this._manageComponent(new
|
|
1375
|
+
repeatInput = this._manageComponent(new G({ defaultValue: "0", attributes: { min: "0", max: "50", step: "1" }, formatDisplay: (t, e) => Number.isFinite(t) ? t === 0 ? "∞" : null : e.trim() === "" ? null : e }));
|
|
1376
|
+
status = this._manageComponent(new Nt({ title: "status", message: "ready to record", variant: "neutral", context: "gif" }));
|
|
1378
1377
|
recordingState = "idle";
|
|
1379
|
-
constructor(
|
|
1380
|
-
super(
|
|
1378
|
+
constructor(t) {
|
|
1379
|
+
super(t);
|
|
1381
1380
|
}
|
|
1382
1381
|
render() {
|
|
1383
|
-
const
|
|
1384
|
-
|
|
1385
|
-
const
|
|
1386
|
-
|
|
1382
|
+
const t = document.createElement("div");
|
|
1383
|
+
t.classList.add(b.stack);
|
|
1384
|
+
const e = new j("row");
|
|
1385
|
+
e.mount(t);
|
|
1387
1386
|
const r = new P({ label: "number of frames", labelFor: "textmode-export-gif-frame-count", variant: "dense" });
|
|
1388
|
-
r.mount(
|
|
1387
|
+
r.mount(e.root), this.frameCountInput.mount(r.root), this.frameCountInput.inputElement.id = "textmode-export-gif-frame-count";
|
|
1389
1388
|
const a = new P({ label: "frame rate (fps)", labelFor: "textmode-export-gif-frame-rate", variant: "dense" });
|
|
1390
|
-
a.mount(
|
|
1389
|
+
a.mount(e.root), this.frameRateInput.mount(a.root), this.frameRateInput.inputElement.id = "textmode-export-gif-frame-rate";
|
|
1391
1390
|
const i = new j("row");
|
|
1392
|
-
i.mount(
|
|
1391
|
+
i.mount(t);
|
|
1393
1392
|
const s = new P({ label: "scale", labelFor: "textmode-export-gif-scale", variant: "dense" });
|
|
1394
1393
|
s.mount(i.root), this.scaleInput.mount(s.root), this.scaleInput.inputElement.id = "textmode-export-gif-scale";
|
|
1395
|
-
const
|
|
1396
|
-
return
|
|
1394
|
+
const l = new P({ label: "loop count", labelFor: "textmode-export-gif-repeat", variant: "dense" });
|
|
1395
|
+
return l.mount(i.root), this.repeatInput.mount(l.root), this.repeatInput.inputElement.id = "textmode-export-gif-repeat", this.status.mount(t), t;
|
|
1397
1396
|
}
|
|
1398
1397
|
getOptions() {
|
|
1399
|
-
const
|
|
1400
|
-
return { frameCount: this.safeParseInt(this.frameCountInput.value,
|
|
1398
|
+
const t = this._config.defaultOptions ?? {};
|
|
1399
|
+
return { frameCount: this.safeParseInt(this.frameCountInput.value, t.frameCount ?? 300), frameRate: this.safeParseInt(this.frameRateInput.value, t.frameRate ?? 60), scale: this.safeParseFloat(this.scaleInput.value, t.scale ?? 1), repeat: this.safeParseInt(this.repeatInput.value, t.repeat ?? 0) };
|
|
1401
1400
|
}
|
|
1402
1401
|
reset() {
|
|
1403
1402
|
this.recordingState = "idle", this.applyDefaults(), this.setRecordingState("idle");
|
|
1404
1403
|
}
|
|
1405
1404
|
validate() {
|
|
1406
|
-
const
|
|
1407
|
-
return Number.isFinite(
|
|
1405
|
+
const t = Number.parseInt(this.frameCountInput.value, 10), e = Number.parseInt(this.frameRateInput.value, 10), r = Number.parseFloat(this.scaleInput.value);
|
|
1406
|
+
return Number.isFinite(t) && t > 0 && Number.isFinite(e) && e > 0 && Number.isFinite(r) && r > 0;
|
|
1408
1407
|
}
|
|
1409
1408
|
isRecording() {
|
|
1410
1409
|
return this.recordingState === "recording" || this.recordingState === "encoding";
|
|
1411
1410
|
}
|
|
1412
|
-
setRecordingState(
|
|
1413
|
-
this.recordingState =
|
|
1414
|
-
const r =
|
|
1415
|
-
switch (this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.scaleInput.inputElement.disabled = r, this.repeatInput.inputElement.disabled = r,
|
|
1411
|
+
setRecordingState(t, e) {
|
|
1412
|
+
this.recordingState = t;
|
|
1413
|
+
const r = t === "recording" || t === "encoding";
|
|
1414
|
+
switch (this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.scaleInput.inputElement.disabled = r, this.repeatInput.inputElement.disabled = r, t) {
|
|
1416
1415
|
case "recording":
|
|
1417
|
-
if (
|
|
1418
|
-
const a =
|
|
1419
|
-
this.status.setMessage(`recording ${a}/${
|
|
1416
|
+
if (e?.totalFrames) {
|
|
1417
|
+
const a = e.frameIndex ?? 0;
|
|
1418
|
+
this.status.setMessage(`recording ${a}/${e.totalFrames}`, "active");
|
|
1420
1419
|
} else this.status.setMessage("recording…", "active");
|
|
1421
1420
|
break;
|
|
1422
1421
|
case "encoding":
|
|
1423
|
-
if (
|
|
1424
|
-
const a =
|
|
1425
|
-
this.status.setMessage(`encoding ${a}/${
|
|
1422
|
+
if (e?.totalFrames) {
|
|
1423
|
+
const a = e.frameIndex ?? 0;
|
|
1424
|
+
this.status.setMessage(`encoding ${a}/${e.totalFrames}`, "active");
|
|
1426
1425
|
} else this.status.setMessage("encoding…", "active");
|
|
1427
1426
|
break;
|
|
1428
1427
|
case "completed":
|
|
1429
1428
|
this.status.setMessage("GIF saved successfully", "active");
|
|
1430
1429
|
break;
|
|
1431
1430
|
case "error":
|
|
1432
|
-
this.status.setMessage(
|
|
1431
|
+
this.status.setMessage(e?.message ?? "failed to export GIF", "alert");
|
|
1433
1432
|
break;
|
|
1434
1433
|
default:
|
|
1435
1434
|
this.status.setMessage("ready to record", "neutral");
|
|
1436
1435
|
}
|
|
1437
1436
|
}
|
|
1438
|
-
handleProgress(
|
|
1439
|
-
if (
|
|
1437
|
+
handleProgress(t) {
|
|
1438
|
+
if (t.state !== "recording" && t.state !== "encoding" || !t.totalFrames) t.state === "completed" ? this.status.setMessage("GIF saved successfully", "active") : t.state === "error" && this.status.setMessage(t.message ?? "failed to export GIF", "alert");
|
|
1440
1439
|
else {
|
|
1441
|
-
const
|
|
1442
|
-
this.status.setMessage(`${
|
|
1440
|
+
const e = t.state === "recording" ? "recording" : "encoding";
|
|
1441
|
+
this.status.setMessage(`${e} ${t.frameIndex ?? 0}/${t.totalFrames}`, "active");
|
|
1443
1442
|
}
|
|
1444
1443
|
}
|
|
1445
1444
|
applyDefaults() {
|
|
1446
|
-
const
|
|
1447
|
-
this.frameCountInput.value = String(
|
|
1445
|
+
const t = this._config.defaultOptions ?? {}, e = t.frameCount ?? z.frameCount, r = t.frameRate ?? z.frameRate, a = t.scale ?? z.scale, i = t.repeat ?? z.repeat;
|
|
1446
|
+
this.frameCountInput.value = String(e), this.frameRateInput.value = String(r), this.scaleInput.value = String(a), this.repeatInput.value = String(i), this.frameCountInput.refresh(), this.frameRateInput.refresh(), this.scaleInput.refresh(), this.repeatInput.refresh();
|
|
1448
1447
|
}
|
|
1449
|
-
safeParseInt(
|
|
1450
|
-
const r = Number.parseInt(
|
|
1451
|
-
return Number.isFinite(r) ? r :
|
|
1448
|
+
safeParseInt(t, e) {
|
|
1449
|
+
const r = Number.parseInt(t, 10);
|
|
1450
|
+
return Number.isFinite(r) ? r : e;
|
|
1452
1451
|
}
|
|
1453
|
-
safeParseFloat(
|
|
1454
|
-
const r = Number.parseFloat(
|
|
1455
|
-
return Number.isFinite(r) ? r :
|
|
1452
|
+
safeParseFloat(t, e) {
|
|
1453
|
+
const r = Number.parseFloat(t);
|
|
1454
|
+
return Number.isFinite(r) ? r : e;
|
|
1456
1455
|
}
|
|
1457
1456
|
}
|
|
1458
|
-
const
|
|
1459
|
-
if (typeof
|
|
1460
|
-
const
|
|
1461
|
-
return Number.isFinite(
|
|
1462
|
-
},
|
|
1463
|
-
class
|
|
1457
|
+
const it = "textmode-export-range-input", $e = `${it}__field`, Ae = `${it}__tooltip`, ct = `${it}__tooltip--visible`, rt = (n, t) => {
|
|
1458
|
+
if (typeof n != "string" || n.length === 0) return t;
|
|
1459
|
+
const e = Number.parseFloat(n);
|
|
1460
|
+
return Number.isFinite(e) ? e : t;
|
|
1461
|
+
}, Pe = (n, t, e) => Math.min(e, Math.max(t, n));
|
|
1462
|
+
class De extends O {
|
|
1464
1463
|
props;
|
|
1465
1464
|
input;
|
|
1466
1465
|
tooltip;
|
|
@@ -1471,12 +1470,12 @@ class Dt extends O {
|
|
|
1471
1470
|
activePointerId;
|
|
1472
1471
|
disabledObserver;
|
|
1473
1472
|
resizeObserver;
|
|
1474
|
-
constructor(
|
|
1475
|
-
super(), this.props =
|
|
1473
|
+
constructor(t) {
|
|
1474
|
+
super(), this.props = t;
|
|
1476
1475
|
}
|
|
1477
1476
|
render() {
|
|
1478
|
-
const
|
|
1479
|
-
return
|
|
1477
|
+
const t = document.createElement("div");
|
|
1478
|
+
return t.className = it, this.input = document.createElement("input"), this.input.type = "range", this.input.value = this.props.defaultValue, Object.assign(this.input, this.props.attributes), this.input.className = $e, this.tooltip = document.createElement("div"), this.tooltip.className = Ae, t.appendChild(this.input), t.appendChild(this.tooltip), this.bindEvents(t), this.updateTooltip(), this.syncDisabledState(t), t;
|
|
1480
1479
|
}
|
|
1481
1480
|
get inputElement() {
|
|
1482
1481
|
return this.input;
|
|
@@ -1484,13 +1483,13 @@ class Dt extends O {
|
|
|
1484
1483
|
get value() {
|
|
1485
1484
|
return this.input.value;
|
|
1486
1485
|
}
|
|
1487
|
-
set value(
|
|
1488
|
-
this.input.value =
|
|
1486
|
+
set value(t) {
|
|
1487
|
+
this.input.value = t, this.updateTooltip();
|
|
1489
1488
|
}
|
|
1490
1489
|
_onDestroy() {
|
|
1491
1490
|
this.disabledObserver?.disconnect(), this.resizeObserver?.disconnect();
|
|
1492
1491
|
}
|
|
1493
|
-
bindEvents(
|
|
1492
|
+
bindEvents(t) {
|
|
1494
1493
|
this.input.addEventListener("pointerenter", () => {
|
|
1495
1494
|
this.hoverActive = !0, this.refreshTooltipVisibility();
|
|
1496
1495
|
}), this.input.addEventListener("pointerleave", () => {
|
|
@@ -1513,27 +1512,27 @@ class Dt extends O {
|
|
|
1513
1512
|
this.activePointerId = void 0;
|
|
1514
1513
|
}
|
|
1515
1514
|
});
|
|
1516
|
-
const
|
|
1515
|
+
const e = () => {
|
|
1517
1516
|
this.pointerActive = !1, this.suppressFocusFromPointer = !1, this.hoverActive = this.input.matches(":hover"), this.releasePointerCapture(), this.refreshTooltipVisibility();
|
|
1518
1517
|
};
|
|
1519
|
-
this.input.addEventListener("pointerup",
|
|
1518
|
+
this.input.addEventListener("pointerup", e), this.input.addEventListener("pointercancel", e), this.input.addEventListener("lostpointercapture", e), this.input.addEventListener("input", () => {
|
|
1520
1519
|
(this.hoverActive || this.focusActive || this.pointerActive) && this.updateTooltip(), this.props.defaultValue = this.input.value;
|
|
1521
1520
|
}), this.input.addEventListener("change", () => {
|
|
1522
1521
|
this.pointerActive || this.updateTooltip(), this.props.defaultValue = this.input.value;
|
|
1523
1522
|
}), typeof ResizeObserver < "u" && (this.resizeObserver = new ResizeObserver(() => {
|
|
1524
|
-
this.tooltip.classList.contains(
|
|
1525
|
-
}), this.resizeObserver.observe(
|
|
1523
|
+
this.tooltip.classList.contains(ct) && this.updateTooltipPosition();
|
|
1524
|
+
}), this.resizeObserver.observe(t));
|
|
1526
1525
|
}
|
|
1527
1526
|
refreshTooltipVisibility() {
|
|
1528
|
-
const
|
|
1529
|
-
|
|
1527
|
+
const t = (this.hoverActive || this.focusActive || this.pointerActive) && !this.input.disabled;
|
|
1528
|
+
t && this.updateTooltip(), this.tooltip.classList.toggle(ct, t);
|
|
1530
1529
|
}
|
|
1531
|
-
syncDisabledState(
|
|
1532
|
-
const
|
|
1530
|
+
syncDisabledState(t) {
|
|
1531
|
+
const e = () => {
|
|
1533
1532
|
const r = this.input.disabled;
|
|
1534
|
-
|
|
1533
|
+
t.classList.toggle("is-disabled", r), r && (this.hoverActive = !1, this.focusActive = !1, this.pointerActive = !1, this.suppressFocusFromPointer = !1, this.releasePointerCapture(), this.tooltip.classList.remove(ct));
|
|
1535
1534
|
};
|
|
1536
|
-
typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(
|
|
1535
|
+
typeof MutationObserver < "u" && (this.disabledObserver = new MutationObserver(e), this.disabledObserver.observe(this.input, { attributes: !0, attributeFilter: ["disabled"] })), e();
|
|
1537
1536
|
}
|
|
1538
1537
|
releasePointerCapture() {
|
|
1539
1538
|
if (this.activePointerId !== void 0) {
|
|
@@ -1548,78 +1547,78 @@ class Dt extends O {
|
|
|
1548
1547
|
this.updateTooltipContent(), this.updateTooltipPosition();
|
|
1549
1548
|
}
|
|
1550
1549
|
updateTooltipContent() {
|
|
1551
|
-
const
|
|
1552
|
-
this.tooltip.textContent = e
|
|
1550
|
+
const t = this.props.formatValue ?? ((r) => `${r}`), e = this.getCurrentValue();
|
|
1551
|
+
this.tooltip.textContent = t(e, this.input);
|
|
1553
1552
|
}
|
|
1554
1553
|
updateTooltipPosition() {
|
|
1555
|
-
const
|
|
1554
|
+
const t = this.getMin(), e = this.getMax(), r = Pe(this.getCurrentValue(), t, e), a = e - t, i = a === 0 ? 0 : (r - t) / a;
|
|
1556
1555
|
this.tooltip.style.left = 100 * i + "%";
|
|
1557
1556
|
}
|
|
1558
1557
|
getMin() {
|
|
1559
|
-
return
|
|
1558
|
+
return rt(this.input.min, 0);
|
|
1560
1559
|
}
|
|
1561
1560
|
getMax() {
|
|
1562
|
-
return
|
|
1561
|
+
return rt(this.input.max, 100);
|
|
1563
1562
|
}
|
|
1564
1563
|
getCurrentValue() {
|
|
1565
|
-
return
|
|
1564
|
+
return rt(this.input.value, rt(this.props.defaultValue, 0));
|
|
1566
1565
|
}
|
|
1567
1566
|
}
|
|
1568
|
-
function
|
|
1569
|
-
if (!Number.isFinite(
|
|
1570
|
-
const
|
|
1571
|
-
return
|
|
1567
|
+
function Ve(n) {
|
|
1568
|
+
if (!Number.isFinite(n)) return "default quality";
|
|
1569
|
+
const t = Math.max(0, Math.min(1, n));
|
|
1570
|
+
return t >= 0.995 ? "near-lossless" : t >= 0.98 ? "maximum detail" : t >= 0.88 ? "ultra quality" : t >= 0.7 ? "high quality" : t >= 0.5 ? "balanced" : t >= 0.25 ? "compact" : t >= 0.1 ? "lightweight" : "draft";
|
|
1572
1571
|
}
|
|
1573
|
-
function
|
|
1574
|
-
return `${
|
|
1572
|
+
function Oe(n) {
|
|
1573
|
+
return `${Ve(n)} (quality ≈ ${n.toFixed(3)})`;
|
|
1575
1574
|
}
|
|
1576
|
-
class
|
|
1577
|
-
frameRateInput = this._manageComponent(new G({ defaultValue: String(60), attributes: { min: String(1), max: String(60), step: "1" }, formatDisplay: (
|
|
1575
|
+
class pt extends Y {
|
|
1576
|
+
frameRateInput = this._manageComponent(new G({ defaultValue: String(60), attributes: { min: String(1), max: String(60), step: "1" }, formatDisplay: (t) => Number.isFinite(t) ? `${t} fps` : null }));
|
|
1578
1577
|
frameCountInput = this._manageComponent(new G({ defaultValue: String(480), attributes: { min: String(1), max: String(3600), step: "1" } }));
|
|
1579
|
-
qualityInput = this._manageComponent(new
|
|
1580
|
-
status = this._manageComponent(new
|
|
1578
|
+
qualityInput = this._manageComponent(new De({ defaultValue: String(0.7), attributes: { min: String(0), max: String(1), step: "0.001" }, formatValue: (t) => Oe(t) }));
|
|
1579
|
+
status = this._manageComponent(new Nt({ title: "status", message: "ready to record", variant: "neutral", context: "video" }));
|
|
1581
1580
|
recordingState = "idle";
|
|
1582
|
-
constructor(
|
|
1583
|
-
super(
|
|
1581
|
+
constructor(t) {
|
|
1582
|
+
super(t);
|
|
1584
1583
|
}
|
|
1585
1584
|
render() {
|
|
1586
|
-
const
|
|
1587
|
-
|
|
1588
|
-
const
|
|
1589
|
-
|
|
1585
|
+
const t = document.createElement("div");
|
|
1586
|
+
t.classList.add(b.stack);
|
|
1587
|
+
const e = new j("row");
|
|
1588
|
+
e.mount(t);
|
|
1590
1589
|
const r = new P({ label: "number of frames", labelFor: "textmode-export-video-frame-count", variant: "compact" });
|
|
1591
|
-
r.mount(
|
|
1590
|
+
r.mount(e.root), this.frameCountInput.mount(r.root), this.frameCountInput.inputElement.id = "textmode-export-video-frame-count";
|
|
1592
1591
|
const a = new P({ label: "frame rate (fps)", labelFor: "textmode-export-video-frame-rate", variant: "compact" });
|
|
1593
|
-
a.mount(
|
|
1592
|
+
a.mount(e.root), this.frameRateInput.mount(a.root), this.frameRateInput.inputElement.id = "textmode-export-video-frame-rate";
|
|
1594
1593
|
const i = new P({ label: "quality", labelFor: "textmode-export-video-quality", variant: "full" });
|
|
1595
|
-
return i.mount(
|
|
1594
|
+
return i.mount(t), this.qualityInput.mount(i.root), this.qualityInput.inputElement.id = "textmode-export-video-quality", this.status.mount(t), t;
|
|
1596
1595
|
}
|
|
1597
1596
|
getOptions() {
|
|
1598
|
-
const
|
|
1599
|
-
return { frameCount: Number.isFinite(
|
|
1597
|
+
const t = this._config.defaultOptions ?? {}, e = Number.parseInt(this.frameCountInput.value, 10), r = Number.parseFloat(this.frameRateInput.value), a = Number.parseFloat(this.qualityInput.value);
|
|
1598
|
+
return { frameCount: Number.isFinite(e) ? e : t.frameCount ?? 480, frameRate: Number.isFinite(r) ? r : t.frameRate ?? 60, quality: Number.isFinite(a) ? a : t.quality ?? 0.7 };
|
|
1600
1599
|
}
|
|
1601
1600
|
reset() {
|
|
1602
1601
|
this.recordingState = "idle", this.applyDefaults(), this.status.setMessage("ready to record", "neutral");
|
|
1603
1602
|
}
|
|
1604
1603
|
validate() {
|
|
1605
|
-
const
|
|
1606
|
-
return Number.isFinite(
|
|
1604
|
+
const t = Number.parseInt(this.frameCountInput.value, 10), e = Number.parseFloat(this.frameRateInput.value);
|
|
1605
|
+
return Number.isFinite(t) && t >= 1 && Number.isFinite(e) && e >= 1;
|
|
1607
1606
|
}
|
|
1608
1607
|
isRecording() {
|
|
1609
1608
|
return this.recordingState === "recording";
|
|
1610
1609
|
}
|
|
1611
|
-
setRecordingState(
|
|
1612
|
-
this.recordingState =
|
|
1613
|
-
const r =
|
|
1614
|
-
this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.qualityInput.inputElement.disabled = r, this.syncStatus(
|
|
1610
|
+
setRecordingState(t, e) {
|
|
1611
|
+
this.recordingState = t;
|
|
1612
|
+
const r = t === "recording";
|
|
1613
|
+
this.frameCountInput.inputElement.disabled = r, this.frameRateInput.inputElement.disabled = r, this.qualityInput.inputElement.disabled = r, this.syncStatus(t, e);
|
|
1615
1614
|
}
|
|
1616
|
-
handleProgress(
|
|
1617
|
-
this.syncStatus(
|
|
1615
|
+
handleProgress(t) {
|
|
1616
|
+
this.syncStatus(t.state, t);
|
|
1618
1617
|
}
|
|
1619
|
-
syncStatus(
|
|
1620
|
-
switch (
|
|
1618
|
+
syncStatus(t, e) {
|
|
1619
|
+
switch (t) {
|
|
1621
1620
|
case "recording": {
|
|
1622
|
-
const r =
|
|
1621
|
+
const r = e?.frameIndex ?? 0, a = e?.totalFrames ?? this.resolvePlannedFrameCount();
|
|
1623
1622
|
if (a) {
|
|
1624
1623
|
const i = Math.min(Math.max(0, Math.round(r)), a);
|
|
1625
1624
|
this.status.setMessage(`recording ${i}/${a} frames`, "active");
|
|
@@ -1630,23 +1629,23 @@ class pe extends Y {
|
|
|
1630
1629
|
this.status.setMessage("saved to disk", "active");
|
|
1631
1630
|
break;
|
|
1632
1631
|
case "error":
|
|
1633
|
-
this.status.setMessage(
|
|
1632
|
+
this.status.setMessage(e?.message ? `error: ${e.message}` : "recording failed", "alert");
|
|
1634
1633
|
break;
|
|
1635
1634
|
default:
|
|
1636
1635
|
this.status.setMessage("ready to record", "neutral");
|
|
1637
1636
|
}
|
|
1638
1637
|
}
|
|
1639
1638
|
resolvePlannedFrameCount() {
|
|
1640
|
-
const
|
|
1641
|
-
return Number.isFinite(
|
|
1639
|
+
const t = Number.parseInt(this.frameCountInput.value, 10);
|
|
1640
|
+
return Number.isFinite(t) && t > 0 ? Math.round(t) : void 0;
|
|
1642
1641
|
}
|
|
1643
1642
|
applyDefaults() {
|
|
1644
|
-
const
|
|
1645
|
-
this.frameCountInput.value = String(
|
|
1643
|
+
const t = this._config.defaultOptions ?? {}, e = t.frameCount ?? 480, r = t.frameRate ?? 60, a = t.quality ?? 0.7;
|
|
1644
|
+
this.frameCountInput.value = String(e), this.frameRateInput.value = String(r), this.qualityInput.value = String(a), this.frameCountInput.refresh(), this.frameRateInput.refresh();
|
|
1646
1645
|
}
|
|
1647
1646
|
}
|
|
1648
|
-
const
|
|
1649
|
-
class
|
|
1647
|
+
const Te = `@layer textmode-export-overlay{.textmode-export-overlay{--overlay-bg: rgba(20, 20, 20, .8);--overlay-surface: rgba(40, 40, 40, .9);--overlay-border: rgba(255, 255, 255, .14);--overlay-border-strong: rgba(255, 255, 255, .2);--overlay-border-focus: rgba(160, 160, 160, .6);--overlay-focus-shadow: 0 0 0 1px rgba(140, 140, 140, .28);--overlay-text: #ffffff;--overlay-muted: rgba(200, 200, 200, .74);--overlay-radius: .75rem;--overlay-stack-gap: .55rem;position:absolute;top:0;left:0;display:flex;flex-direction:column;gap:var(--overlay-stack-gap);min-width:236px;max-width:236px;padding:.65rem .8rem;background:var(--overlay-bg);color:var(--overlay-text);border-radius:var(--overlay-radius);border:1px solid var(--overlay-border);box-shadow:0 12px 28px #0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:.82rem;line-height:1.35;pointer-events:auto;z-index:2147483647}.textmode-export-overlay *{box-sizing:border-box}.textmode-export-overlay__header{display:flex;flex-direction:column;gap:.4rem}.textmode-export-overlay__header-title-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem}.textmode-export-overlay__header-links{display:inline-flex;align-items:center;gap:.3rem}.textmode-export-overlay__support-link{display:inline-flex;align-items:center;justify-content:center;padding:.2rem;border-radius:.45rem;border:1px solid transparent;color:#d7d7d7d1;background:transparent;text-decoration:none;line-height:0;transition:background .18s ease,color .18s ease,transform .18s ease,border-color .18s ease}.textmode-export-overlay__support-link:hover{color:#fff;background:#5a5a5a4d;border-color:#c8c8c824}.textmode-export-overlay__support-link:focus-visible{outline:none;border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow)}.textmode-export-overlay__support-icon,.textmode-export-overlay__link-icon{display:block;width:1rem;height:1rem}.textmode-export-overlay__stack{display:flex;flex-direction:column;gap:var(--overlay-stack-gap)}.textmode-export-overlay__stack--dense{gap:.3rem}.textmode-export-overlay__stack--compact{gap:.45rem}.textmode-export-overlay__section{display:flex;flex-direction:column;gap:.4rem}.textmode-export-overlay__title{font-size:.92rem;font-weight:600}.textmode-export-overlay__divider{width:100%;height:1px;background:#ffffff29;margin-top:.25rem}.textmode-export-overlay__label{font-weight:500;opacity:.9}.textmode-export-overlay__checkbox{display:flex;align-items:center;gap:.5rem}.textmode-export-overlay__checkbox input[type=checkbox]{width:1rem;height:1rem;accent-color:rgba(100,100,100,.9)}.textmode-export-overlay__row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-start;width:100%}.textmode-export-overlay__field{display:flex;flex-direction:column;gap:.3rem;flex:1 1 120px;min-width:120px}.textmode-export-overlay__field--compact{flex:1 1 100px;min-width:100px}.textmode-export-overlay__field--dense{flex:1 1 90px;min-width:90px}.textmode-export-overlay__field--channel{flex:1 1 0;min-width:0}.textmode-export-overlay__field--full{width:100%;flex:1 1 100%}.textmode-export-overlay__input,.textmode-export-overlay select.textmode-export-overlay__input,.textmode-export-overlay input.textmode-export-overlay__input{width:100%;padding:.35rem .5rem;border-radius:.4rem;border:1px solid var(--overlay-border-strong);background:var(--overlay-surface);color:var(--overlay-text);font:inherit;line-height:1.35;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}.textmode-export-overlay select.textmode-export-overlay__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(200, 200, 200, 0.74)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .5rem center;background-size:1rem;padding-right:2rem}.textmode-export-overlay__input:focus{outline:none;border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow);background:#2d2f42eb}.textmode-export-overlay__input::placeholder{color:var(--overlay-muted);opacity:.7}.textmode-export-overlay__muted{font-size:.75rem;opacity:.7;display:block}.textmode-export-overlay__button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;border-radius:.45rem;border:none;font-weight:600;padding:.45rem .7rem;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease}.textmode-export-overlay__button--primary{background:#505050;color:#fff}.textmode-export-overlay__button--secondary{background:#606060;color:#fff}.textmode-export-overlay__button--full{width:100%}.textmode-export-overlay__button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 7px 18px #00000073}.textmode-export-overlay__button--primary:hover:not(:disabled){background:#404040}.textmode-export-overlay__button--secondary:hover:not(:disabled){background:#4a4a4a}.textmode-export-overlay__button:disabled{cursor:default;opacity:.55;transform:none;box-shadow:none}.textmode-export-overlay__status{display:flex;flex-direction:column;gap:.25rem;padding:.45rem .55rem;border-radius:.45rem;border:1px solid rgba(110,110,110,.22);background:#4646462e}.textmode-export-overlay__status--gif{background:#5050501f;border-color:#78787840}.textmode-export-overlay__status--video{background:#4646461f;border-color:#6e6e6e40}.textmode-export-overlay__status-title{font-weight:600;font-size:.75rem;opacity:.85;text-transform:uppercase;letter-spacing:.04em}.textmode-export-overlay__status-value{font-size:.82rem;color:#dedede;transition:color .18s ease}.textmode-export-overlay__status-value--neutral{color:#cfcfcf}.textmode-export-overlay__status-value--active{color:#f5f5f5}.textmode-export-overlay__status-value--alert{color:#b8b8b8}.textmode-export-number-input,.textmode-export-overlay .textmode-export-number-input{display:flex;align-items:stretch;width:100%;background:var(--overlay-surface);border:1px solid var(--overlay-border-strong);border-radius:.4rem;overflow:hidden;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;position:relative}.textmode-export-number-input:focus-within{border-color:var(--overlay-border-focus);box-shadow:var(--overlay-focus-shadow)}.textmode-export-number-input.is-disabled{opacity:.55}.textmode-export-number-input__field{flex:1 1 auto;min-width:0;border:none;background:transparent;color:var(--overlay-text);font:inherit;padding:.35rem .5rem;appearance:textfield}.textmode-export-number-input__field::-webkit-outer-spin-button,.textmode-export-number-input__field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.textmode-export-number-input__field:focus{outline:none}.textmode-export-number-input__controls{display:flex;flex-direction:column;border-left:1px solid rgba(255,255,255,.12);min-width:1.6rem}.textmode-export-number-input__control{display:flex;align-items:center;justify-content:center;width:100%;flex:1;border:none;background:#32323299;color:#d0d0d0;font-size:.68rem;line-height:1;cursor:pointer;transition:background .15s ease,color .15s ease;padding:0}.textmode-export-number-input__control:hover:not(:disabled){background:#5a5a5ad9;color:#fff}.textmode-export-number-input__control:disabled{cursor:default;opacity:.4;background:#28282880;color:#c8c8c866}.textmode-export-number-input:focus-within .textmode-export-number-input__control{background:#3c3c3cbf;color:#e8e8e8}.textmode-export-number-input__display{position:absolute;inset:0;display:flex;align-items:center;padding:.4rem .55rem;pointer-events:none;color:#f8fafc;opacity:0;transition:opacity .14s ease}.textmode-export-number-input__display--visible{opacity:1}.textmode-export-range-input{position:relative;width:100%}.textmode-export-range-input.is-disabled{opacity:.55}.textmode-export-range-input__field{width:100%;height:1.4rem;padding:0;margin:0;background:transparent;cursor:pointer;appearance:none;-webkit-appearance:none}.textmode-export-range-input__field::-webkit-slider-thumb{width:12px;height:12px;margin-top:-3.5px;-webkit-appearance:none;border-radius:50%;background:#a0a0a0;border:2px solid #303030;box-shadow:0 0 0 2px #00000059}.textmode-export-range-input__field::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#8c8c8cd9,#646464a6)}.textmode-export-range-input__field::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#a0a0a0;border:2px solid #303030;margin-top:-3.5px}.textmode-export-range-input__field::-moz-range-track{height:5px;border-radius:999px;background:linear-gradient(90deg,#8c8c8cd9,#646464a6)}.textmode-export-range-input__tooltip{position:absolute;top:-1.5rem;left:0;transform:translate(-50%);padding:.2rem .35rem;border-radius:.35rem;background:#1e1e1ee0;color:#f8fafc;font-size:.68rem;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s ease}.textmode-export-range-input__tooltip--visible{opacity:1}}`;
|
|
1648
|
+
class Re {
|
|
1650
1649
|
_textmodifier;
|
|
1651
1650
|
_state;
|
|
1652
1651
|
_events;
|
|
@@ -1663,29 +1662,29 @@ class Rt {
|
|
|
1663
1662
|
_positionService;
|
|
1664
1663
|
_header = new H();
|
|
1665
1664
|
_formatField = new P({ label: "export format", labelFor: "textmode-export-format", variant: "full" });
|
|
1666
|
-
_formatSelect = new
|
|
1667
|
-
_exportButton = new
|
|
1668
|
-
_copyButton = new
|
|
1665
|
+
_formatSelect = new mt({ id: "textmode-export-format", options: [] });
|
|
1666
|
+
_exportButton = new Lt({ label: "download file", fullWidth: !0, variant: "primary" });
|
|
1667
|
+
_copyButton = new Lt({ label: "copy to clipboard", fullWidth: !0, variant: "primary" });
|
|
1669
1668
|
_currentFormat;
|
|
1670
1669
|
_currentBlade;
|
|
1671
1670
|
_handleFormatSelectChange = () => {
|
|
1672
1671
|
this._handleFormatChange(this._formatSelect.value);
|
|
1673
1672
|
};
|
|
1674
1673
|
_handleExportClickSafe = () => {
|
|
1675
|
-
this._handleExportClick().catch((
|
|
1676
|
-
console.error("[textmode-export] Export failed",
|
|
1674
|
+
this._handleExportClick().catch((t) => {
|
|
1675
|
+
console.error("[textmode-export] Export failed", t);
|
|
1677
1676
|
});
|
|
1678
1677
|
};
|
|
1679
1678
|
_handleCopyClickSafe = () => {
|
|
1680
|
-
this._handleCopyClick().catch((
|
|
1681
|
-
console.error("[textmode-export] Copy failed",
|
|
1679
|
+
this._handleCopyClick().catch((t) => {
|
|
1680
|
+
console.error("[textmode-export] Copy failed", t);
|
|
1682
1681
|
});
|
|
1683
1682
|
};
|
|
1684
|
-
constructor(
|
|
1685
|
-
this._textmodifier =
|
|
1683
|
+
constructor(t, e, r, a, i) {
|
|
1684
|
+
this._textmodifier = t, this._state = r, this._events = a, this._exportService = new Be(e, a), this._clipboardService = new ke(e), this._definitions = i, this._currentFormat = r.snapshot.format, this._initializeFormatMap(), this._registerEventHandlers();
|
|
1686
1685
|
}
|
|
1687
1686
|
$mount() {
|
|
1688
|
-
this._createOverlay(), this._renderStaticContent(), this._positionService = new
|
|
1687
|
+
this._createOverlay(), this._renderStaticContent(), this._positionService = new Ie(this._textmodifier, this._shadowHost), this._positionService.bind(), this._switchFormat(this._currentFormat);
|
|
1689
1688
|
}
|
|
1690
1689
|
show() {
|
|
1691
1690
|
this._shadowHost && (this._shadowHost.style.display = "");
|
|
@@ -1701,76 +1700,76 @@ class Rt {
|
|
|
1701
1700
|
}
|
|
1702
1701
|
$dispose() {
|
|
1703
1702
|
this._formatSelect.isMounted() && this._formatSelect.selectElement.removeEventListener("change", this._handleFormatSelectChange), this._exportButton.isMounted() && this._exportButton.buttonElement.removeEventListener("click", this._handleExportClickSafe), this._copyButton.isMounted() && this._copyButton.buttonElement.removeEventListener("click", this._handleCopyClickSafe);
|
|
1704
|
-
for (const
|
|
1703
|
+
for (const t of this._eventUnsubscribers) t();
|
|
1705
1704
|
this._eventUnsubscribers.length = 0, this._events.$clear();
|
|
1706
|
-
for (const
|
|
1705
|
+
for (const t of this._formats.values()) t.blade.destroy();
|
|
1707
1706
|
this._formats.clear(), this._currentBlade = void 0, this._shadowHost?.isConnected && this._shadowHost.remove(), this._positionService?.dispose();
|
|
1708
1707
|
}
|
|
1709
1708
|
_initializeFormatMap() {
|
|
1710
|
-
for (const
|
|
1711
|
-
const
|
|
1712
|
-
this._formats.set(
|
|
1709
|
+
for (const t of this._definitions) {
|
|
1710
|
+
const e = t.createBlade();
|
|
1711
|
+
this._formats.set(t.format, { definition: t, blade: e, initialized: !1 });
|
|
1713
1712
|
}
|
|
1714
1713
|
}
|
|
1715
1714
|
_createOverlay() {
|
|
1716
1715
|
this._shadowHost = document.createElement("div"), this._shadowHost.dataset.plugin = "textmode-export-overlay-host", this._shadowHost.style.cssText = "position: absolute; top: 0; left: 0; pointer-events: none; z-index: 2147483647;", this._shadowRoot = this._shadowHost.attachShadow({ mode: "open" });
|
|
1717
|
-
const
|
|
1718
|
-
|
|
1716
|
+
const t = document.createElement("style");
|
|
1717
|
+
t.textContent = Te, this._shadowRoot.appendChild(t), this._overlayElement = document.createElement("div"), this._overlayElement.dataset.plugin = "textmode-export-overlay", this._overlayElement.classList.add(b.root, b.stack), this._shadowRoot.appendChild(this._overlayElement), document.body.appendChild(this._shadowHost);
|
|
1719
1718
|
}
|
|
1720
1719
|
_renderStaticContent() {
|
|
1721
1720
|
this._header.mount(this._overlayElement);
|
|
1722
|
-
const
|
|
1723
|
-
|
|
1721
|
+
const t = document.createElement("div");
|
|
1722
|
+
t.classList.add(b.section), this._overlayElement.appendChild(t), this._formatField.mount(t), this._prepareFormatOptions(), this._formatSelect.mount(this._formatField.root), this._formatSelect.selectElement.addEventListener("change", this._handleFormatSelectChange), this._optionsContainer = document.createElement("div"), this._optionsContainer.classList.add(b.stack, b.stackCompact), this._overlayElement.appendChild(this._optionsContainer), this._exportButton.mount(this._overlayElement), this._exportButton.buttonElement.addEventListener("click", this._handleExportClickSafe), this._copyButtonContainer = document.createElement("div"), this._copyButtonContainer.classList.add(b.stack, b.stackDense), this._overlayElement.appendChild(this._copyButtonContainer), this._copyButton.mount(this._copyButtonContainer), this._copyButton.buttonElement.dataset.defaultLabel = "copy to clipboard", this._copyButton.buttonElement.addEventListener("click", this._handleCopyClickSafe);
|
|
1724
1723
|
}
|
|
1725
1724
|
_prepareFormatOptions() {
|
|
1726
|
-
const
|
|
1727
|
-
this._formatSelect.update({ options:
|
|
1725
|
+
const t = this._definitions.map((e) => ({ value: e.format, label: e.label }));
|
|
1726
|
+
this._formatSelect.update({ options: t, defaultValue: this._currentFormat });
|
|
1728
1727
|
}
|
|
1729
1728
|
_registerEventHandlers() {
|
|
1730
|
-
this._eventUnsubscribers.push(this._events.$on("export:request", ({ format:
|
|
1731
|
-
|
|
1732
|
-
}), this._events.$on("export:success", ({ format:
|
|
1733
|
-
if (
|
|
1734
|
-
const
|
|
1735
|
-
|
|
1729
|
+
this._eventUnsubscribers.push(this._events.$on("export:request", ({ format: t }) => {
|
|
1730
|
+
t === this._currentFormat && (this._state.$set({ isBusy: !0, error: void 0 }), this._updateExportButton());
|
|
1731
|
+
}), this._events.$on("export:success", ({ format: t }) => {
|
|
1732
|
+
if (t === this._currentFormat) {
|
|
1733
|
+
const e = { isBusy: !1 };
|
|
1734
|
+
t === "gif" && (e.gifProgress = void 0), t === "video" && (e.videoProgress = void 0), this._state.$set(e), this._updateExportButton();
|
|
1736
1735
|
}
|
|
1737
|
-
}), this._events.$on("export:error", ({ format:
|
|
1738
|
-
|
|
1739
|
-
}), this._events.$on("export:progress", ({ format:
|
|
1740
|
-
if (
|
|
1741
|
-
if (
|
|
1742
|
-
const r =
|
|
1736
|
+
}), this._events.$on("export:error", ({ format: t, error: e }) => {
|
|
1737
|
+
t === this._currentFormat && (this._state.$set({ isBusy: !1, error: e }), this._updateExportButton());
|
|
1738
|
+
}), this._events.$on("export:progress", ({ format: t, progress: e }) => {
|
|
1739
|
+
if (e) {
|
|
1740
|
+
if (t === "gif" && this._currentBlade?.blade instanceof ut) {
|
|
1741
|
+
const r = e;
|
|
1743
1742
|
this._state.$set({ gifProgress: r }), this._currentBlade.blade.handleProgress(r);
|
|
1744
|
-
} else if (
|
|
1745
|
-
const r =
|
|
1743
|
+
} else if (t === "video" && this._currentBlade?.blade instanceof pt) {
|
|
1744
|
+
const r = e;
|
|
1746
1745
|
this._state.$set({ videoProgress: r }), this._currentBlade.blade.handleProgress(r);
|
|
1747
1746
|
}
|
|
1748
1747
|
this._updateExportButton();
|
|
1749
1748
|
}
|
|
1750
1749
|
}));
|
|
1751
1750
|
}
|
|
1752
|
-
_handleFormatChange(
|
|
1753
|
-
this._currentFormat =
|
|
1751
|
+
_handleFormatChange(t) {
|
|
1752
|
+
this._currentFormat = t, this._state.$set({ format: t }), this._switchFormat(t), this._events.$emit("format:change", { format: t });
|
|
1754
1753
|
}
|
|
1755
|
-
_switchFormat(
|
|
1756
|
-
const
|
|
1757
|
-
if (!
|
|
1758
|
-
this._currentBlade && this._currentBlade.blade.unmount(), this._optionsContainer.innerHTML = "",
|
|
1754
|
+
_switchFormat(t) {
|
|
1755
|
+
const e = this._formats.get(t);
|
|
1756
|
+
if (!e) throw new Error(`Unknown export format: ${t}`);
|
|
1757
|
+
this._currentBlade && this._currentBlade.blade.unmount(), this._optionsContainer.innerHTML = "", e.blade.mount(this._optionsContainer), e.initialized || (e.blade.reset(), e.initialized = !0), this._currentBlade = e, this._formatSelect.value = t, this._updateCopyButtonState(), this._updateExportButton(), this._positionService?.scheduleUpdate();
|
|
1759
1758
|
}
|
|
1760
1759
|
_updateCopyButtonState() {
|
|
1761
|
-
const
|
|
1762
|
-
this._copyButtonContainer.style.display =
|
|
1760
|
+
const t = this._currentBlade?.definition.supportsClipboard ?? !1;
|
|
1761
|
+
this._copyButtonContainer.style.display = t ? "flex" : "none", this._copyButton.setDisabled(!t);
|
|
1763
1762
|
}
|
|
1764
1763
|
async _handleExportClick() {
|
|
1765
1764
|
if (!this._currentBlade) return;
|
|
1766
|
-
const
|
|
1765
|
+
const t = this._currentBlade.definition.format, e = this._currentBlade.blade.getOptions();
|
|
1767
1766
|
if (this._currentBlade.blade.validate()) {
|
|
1768
|
-
if (
|
|
1767
|
+
if (t === "gif") {
|
|
1769
1768
|
const r = this._currentBlade.blade;
|
|
1770
1769
|
if (r.isRecording()) return;
|
|
1771
1770
|
r.setRecordingState("recording");
|
|
1772
1771
|
try {
|
|
1773
|
-
await this._exportService.$requestExport("gif",
|
|
1772
|
+
await this._exportService.$requestExport("gif", e, { onGIFProgress: (a) => {
|
|
1774
1773
|
r.setRecordingState(a.state, a);
|
|
1775
1774
|
} });
|
|
1776
1775
|
} catch (a) {
|
|
@@ -1780,12 +1779,12 @@ class Rt {
|
|
|
1780
1779
|
r.setRecordingState("idle"), this._updateExportButton();
|
|
1781
1780
|
}, 1600);
|
|
1782
1781
|
}
|
|
1783
|
-
if (
|
|
1782
|
+
if (t === "video") {
|
|
1784
1783
|
const r = this._currentBlade.blade;
|
|
1785
1784
|
if (r.isRecording()) return;
|
|
1786
1785
|
r.setRecordingState("recording");
|
|
1787
1786
|
try {
|
|
1788
|
-
await this._exportService.$requestExport("video",
|
|
1787
|
+
await this._exportService.$requestExport("video", e, { onVideoProgress: (a) => {
|
|
1789
1788
|
r.setRecordingState(a.state, a);
|
|
1790
1789
|
} });
|
|
1791
1790
|
} catch (a) {
|
|
@@ -1797,7 +1796,7 @@ class Rt {
|
|
|
1797
1796
|
}
|
|
1798
1797
|
this._exportButton.setDisabled(!0), this._exportButton.setLabel("exporting…");
|
|
1799
1798
|
try {
|
|
1800
|
-
await this._exportService.$requestExport(
|
|
1799
|
+
await this._exportService.$requestExport(t, e);
|
|
1801
1800
|
} finally {
|
|
1802
1801
|
this._exportButton.setDisabled(!1), this._exportButton.setLabel("download file");
|
|
1803
1802
|
}
|
|
@@ -1805,10 +1804,23 @@ class Rt {
|
|
|
1805
1804
|
}
|
|
1806
1805
|
async _handleCopyClick() {
|
|
1807
1806
|
if (!this._currentBlade || !this._currentBlade.definition.supportsClipboard) return;
|
|
1808
|
-
const
|
|
1807
|
+
const t = this._currentBlade.definition.format, e = this._currentBlade.blade.getOptions(), r = this._copyButton.buttonElement.dataset.defaultLabel ?? "copy to clipboard";
|
|
1809
1808
|
this._copyButton.setDisabled(!0), this._copyButton.setLabel("copying…");
|
|
1810
1809
|
try {
|
|
1811
|
-
|
|
1810
|
+
switch (t) {
|
|
1811
|
+
case "txt":
|
|
1812
|
+
await this._clipboardService.$copy("txt", e);
|
|
1813
|
+
break;
|
|
1814
|
+
case "svg":
|
|
1815
|
+
await this._clipboardService.$copy("svg", e);
|
|
1816
|
+
break;
|
|
1817
|
+
case "image":
|
|
1818
|
+
await this._clipboardService.$copy("image", e);
|
|
1819
|
+
break;
|
|
1820
|
+
default:
|
|
1821
|
+
return;
|
|
1822
|
+
}
|
|
1823
|
+
this._copyButton.setLabel("copied!");
|
|
1812
1824
|
} catch (a) {
|
|
1813
1825
|
console.error("[textmode-export] Failed to copy to clipboard", a), this._copyButton.setLabel("copy failed!");
|
|
1814
1826
|
} finally {
|
|
@@ -1819,8 +1831,8 @@ class Rt {
|
|
|
1819
1831
|
}
|
|
1820
1832
|
_updateExportButton() {
|
|
1821
1833
|
if (!this._currentBlade) return;
|
|
1822
|
-
const
|
|
1823
|
-
if (
|
|
1834
|
+
const t = this._currentBlade.definition.format;
|
|
1835
|
+
if (t === "gif" && this._currentBlade.blade instanceof ut) {
|
|
1824
1836
|
const r = this._currentBlade.blade, a = this._state.snapshot.gifProgress;
|
|
1825
1837
|
if (r.isRecording()) if (this._exportButton.setDisabled(!0), a?.totalFrames) {
|
|
1826
1838
|
const i = a.frameIndex ?? 0, s = a.state === "encoding" ? "encoding" : "recording";
|
|
@@ -1832,7 +1844,7 @@ class Rt {
|
|
|
1832
1844
|
else this._exportButton.setDisabled(!1), this._exportButton.setLabel("start recording");
|
|
1833
1845
|
return;
|
|
1834
1846
|
}
|
|
1835
|
-
if (
|
|
1847
|
+
if (t === "video" && this._currentBlade.blade instanceof pt) {
|
|
1836
1848
|
const r = this._currentBlade.blade, a = this._state.snapshot.videoProgress;
|
|
1837
1849
|
if (r.isRecording()) if (this._exportButton.setDisabled(!0), a?.totalFrames) {
|
|
1838
1850
|
const i = a.frameIndex ?? 0;
|
|
@@ -1841,75 +1853,80 @@ class Rt {
|
|
|
1841
1853
|
else this._exportButton.setDisabled(!1), this._exportButton.setLabel("start recording");
|
|
1842
1854
|
return;
|
|
1843
1855
|
}
|
|
1844
|
-
const
|
|
1845
|
-
this._exportButton.setDisabled(
|
|
1846
|
-
}
|
|
1847
|
-
}
|
|
1848
|
-
class
|
|
1849
|
-
_listeners =
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1856
|
+
const e = this._state.snapshot.isBusy;
|
|
1857
|
+
this._exportButton.setDisabled(e), this._exportButton.setLabel(e ? "exporting…" : "download file");
|
|
1858
|
+
}
|
|
1859
|
+
}
|
|
1860
|
+
class Ue {
|
|
1861
|
+
_listeners = {};
|
|
1862
|
+
_getPool(t) {
|
|
1863
|
+
const e = this._listeners[t];
|
|
1864
|
+
if (e) return e;
|
|
1865
|
+
const r = /* @__PURE__ */ new Set();
|
|
1866
|
+
return this._listeners[t] = r, r;
|
|
1867
|
+
}
|
|
1868
|
+
$on(t, e) {
|
|
1869
|
+
const r = this._getPool(t);
|
|
1870
|
+
return r.add(e), () => {
|
|
1871
|
+
r.delete(e), r.size === 0 && delete this._listeners[t];
|
|
1855
1872
|
};
|
|
1856
1873
|
}
|
|
1857
|
-
$emit(
|
|
1858
|
-
const r = this._listeners
|
|
1874
|
+
$emit(t, e) {
|
|
1875
|
+
const r = this._listeners[t];
|
|
1859
1876
|
if (r) for (const a of [...r]) try {
|
|
1860
|
-
a(
|
|
1877
|
+
a(e);
|
|
1861
1878
|
} catch (i) {
|
|
1862
1879
|
console.error("[textmode-export] Event handler failed", i);
|
|
1863
1880
|
}
|
|
1864
1881
|
}
|
|
1865
1882
|
$clear() {
|
|
1866
|
-
this._listeners.
|
|
1883
|
+
for (const t of Object.keys(this._listeners)) delete this._listeners[t];
|
|
1867
1884
|
}
|
|
1868
1885
|
}
|
|
1869
|
-
class
|
|
1886
|
+
class Ne {
|
|
1870
1887
|
_state;
|
|
1871
1888
|
_listeners = /* @__PURE__ */ new Set();
|
|
1872
|
-
constructor(
|
|
1873
|
-
this._state =
|
|
1889
|
+
constructor(t) {
|
|
1890
|
+
this._state = t;
|
|
1874
1891
|
}
|
|
1875
1892
|
get snapshot() {
|
|
1876
1893
|
return Object.freeze({ ...this._state });
|
|
1877
1894
|
}
|
|
1878
|
-
$set(
|
|
1879
|
-
this._state = Object.assign({}, this._state,
|
|
1880
|
-
const
|
|
1895
|
+
$set(t) {
|
|
1896
|
+
this._state = Object.assign({}, this._state, t);
|
|
1897
|
+
const e = this.snapshot;
|
|
1881
1898
|
for (const r of [...this._listeners]) try {
|
|
1882
|
-
r(
|
|
1899
|
+
r(e);
|
|
1883
1900
|
} catch (a) {
|
|
1884
1901
|
console.error("[textmode-export] State listener failed", a);
|
|
1885
1902
|
}
|
|
1886
1903
|
}
|
|
1887
|
-
$subscribe(
|
|
1888
|
-
return this._listeners.add(
|
|
1889
|
-
this._listeners.delete(
|
|
1904
|
+
$subscribe(t) {
|
|
1905
|
+
return this._listeners.add(t), t(this.snapshot), () => {
|
|
1906
|
+
this._listeners.delete(t);
|
|
1890
1907
|
};
|
|
1891
1908
|
}
|
|
1892
|
-
$reset(
|
|
1893
|
-
this._state =
|
|
1894
|
-
const
|
|
1895
|
-
for (const r of [...this._listeners]) r(
|
|
1909
|
+
$reset(t) {
|
|
1910
|
+
this._state = t;
|
|
1911
|
+
const e = this.snapshot;
|
|
1912
|
+
for (const r of [...this._listeners]) r(e);
|
|
1896
1913
|
}
|
|
1897
1914
|
}
|
|
1898
|
-
const
|
|
1899
|
-
class
|
|
1915
|
+
const Ge = (n) => ({ format: n, isBusy: !1 });
|
|
1916
|
+
class Gt extends O {
|
|
1900
1917
|
props;
|
|
1901
1918
|
checkbox;
|
|
1902
1919
|
labelElement;
|
|
1903
1920
|
handleChange = () => {
|
|
1904
1921
|
this.props.defaultChecked = this.checkbox.checked;
|
|
1905
1922
|
};
|
|
1906
|
-
constructor(
|
|
1907
|
-
super(), this.props =
|
|
1923
|
+
constructor(t) {
|
|
1924
|
+
super(), this.props = t;
|
|
1908
1925
|
}
|
|
1909
1926
|
render() {
|
|
1910
1927
|
this.labelElement = document.createElement("label"), this.labelElement.classList.add(b.checkbox), this.checkbox = document.createElement("input"), this.checkbox.type = "checkbox", this.props.id && (this.checkbox.id = this.props.id), this.checkbox.checked = !!this.props.defaultChecked, this.checkbox.addEventListener("change", this.handleChange);
|
|
1911
|
-
const
|
|
1912
|
-
return
|
|
1928
|
+
const t = document.createElement("span");
|
|
1929
|
+
return t.textContent = this.props.label, this.labelElement.htmlFor = this.props.id ?? "", this.labelElement.appendChild(this.checkbox), this.labelElement.appendChild(t), this.labelElement;
|
|
1913
1930
|
}
|
|
1914
1931
|
get inputElement() {
|
|
1915
1932
|
return this.checkbox;
|
|
@@ -1917,24 +1934,24 @@ class Ge extends O {
|
|
|
1917
1934
|
get checked() {
|
|
1918
1935
|
return this.checkbox.checked;
|
|
1919
1936
|
}
|
|
1920
|
-
set checked(
|
|
1921
|
-
this.checkbox.checked =
|
|
1937
|
+
set checked(t) {
|
|
1938
|
+
this.checkbox.checked = t;
|
|
1922
1939
|
}
|
|
1923
1940
|
_onUnmount() {
|
|
1924
1941
|
this.checkbox.removeEventListener("change", this.handleChange);
|
|
1925
1942
|
}
|
|
1926
|
-
onUpdate(
|
|
1927
|
-
this.props =
|
|
1943
|
+
onUpdate(t) {
|
|
1944
|
+
this.props = t, t.id && (this.checkbox.id = t.id, this.labelElement.htmlFor = t.id), this.checkbox.checked = !!t.defaultChecked, this.labelElement.lastElementChild && (this.labelElement.lastElementChild.textContent = t.label);
|
|
1928
1945
|
}
|
|
1929
1946
|
}
|
|
1930
|
-
class
|
|
1947
|
+
class ze extends O {
|
|
1931
1948
|
props;
|
|
1932
1949
|
input;
|
|
1933
1950
|
handleInput = () => {
|
|
1934
1951
|
this.props.defaultValue = this.input.value;
|
|
1935
1952
|
};
|
|
1936
|
-
constructor(
|
|
1937
|
-
super(), this.props =
|
|
1953
|
+
constructor(t) {
|
|
1954
|
+
super(), this.props = t;
|
|
1938
1955
|
}
|
|
1939
1956
|
render() {
|
|
1940
1957
|
return this.input = document.createElement("input"), this.input.type = "text", this.input.classList.add(b.input), this.props.id && (this.input.id = this.props.id), this.props.maxLength !== void 0 && (this.input.maxLength = this.props.maxLength), this.props.defaultValue !== void 0 && (this.input.value = this.props.defaultValue), this.input.addEventListener("input", this.handleInput), this.input;
|
|
@@ -1945,31 +1962,31 @@ class zt extends O {
|
|
|
1945
1962
|
get value() {
|
|
1946
1963
|
return this.input.value;
|
|
1947
1964
|
}
|
|
1948
|
-
set value(
|
|
1949
|
-
this.input.value =
|
|
1965
|
+
set value(t) {
|
|
1966
|
+
this.input.value = t;
|
|
1950
1967
|
}
|
|
1951
1968
|
_onUnmount() {
|
|
1952
1969
|
this.input.removeEventListener("input", this.handleInput);
|
|
1953
1970
|
}
|
|
1954
|
-
onUpdate(
|
|
1955
|
-
this.props =
|
|
1971
|
+
onUpdate(t) {
|
|
1972
|
+
this.props = t, t.id && (this.input.id = t.id), t.maxLength !== void 0 && (this.input.maxLength = t.maxLength), t.defaultValue !== void 0 && (this.input.value = t.defaultValue);
|
|
1956
1973
|
}
|
|
1957
1974
|
}
|
|
1958
|
-
class
|
|
1959
|
-
trailingSpaces = this._manageComponent(new
|
|
1960
|
-
emptyCharacter = this._manageComponent(new
|
|
1961
|
-
constructor(
|
|
1962
|
-
super(
|
|
1975
|
+
class We extends Y {
|
|
1976
|
+
trailingSpaces = this._manageComponent(new Gt({ label: "preserve trailing spaces", defaultChecked: !1 }));
|
|
1977
|
+
emptyCharacter = this._manageComponent(new ze({ id: "textmode-export-empty-character", defaultValue: " ", maxLength: 1 }));
|
|
1978
|
+
constructor(t) {
|
|
1979
|
+
super(t);
|
|
1963
1980
|
}
|
|
1964
1981
|
render() {
|
|
1965
|
-
const
|
|
1966
|
-
|
|
1967
|
-
const
|
|
1968
|
-
return
|
|
1982
|
+
const t = document.createElement("div");
|
|
1983
|
+
t.classList.add(b.stack), this.trailingSpaces.mount(t);
|
|
1984
|
+
const e = new P({ label: "empty character", labelFor: "textmode-export-empty-character", variant: "full" });
|
|
1985
|
+
return e.mount(t), this.emptyCharacter.mount(e.root), t;
|
|
1969
1986
|
}
|
|
1970
1987
|
getOptions() {
|
|
1971
|
-
const
|
|
1972
|
-
return { preserveTrailingSpaces: this.trailingSpaces.checked, emptyCharacter:
|
|
1988
|
+
const t = this._config.defaultOptions ?? {}, e = this.emptyCharacter.value || t.emptyCharacter || " ";
|
|
1989
|
+
return { preserveTrailingSpaces: this.trailingSpaces.checked, emptyCharacter: e };
|
|
1973
1990
|
}
|
|
1974
1991
|
reset() {
|
|
1975
1992
|
this.applyDefaults();
|
|
@@ -1978,60 +1995,60 @@ class Wt extends Y {
|
|
|
1978
1995
|
return this.emptyCharacter.value.length <= 1;
|
|
1979
1996
|
}
|
|
1980
1997
|
applyDefaults() {
|
|
1981
|
-
const
|
|
1982
|
-
this.trailingSpaces.checked =
|
|
1998
|
+
const t = this._config.defaultOptions ?? {};
|
|
1999
|
+
this.trailingSpaces.checked = t.preserveTrailingSpaces ?? !1, this.emptyCharacter.value = t.emptyCharacter ?? " ";
|
|
1983
2000
|
}
|
|
1984
2001
|
}
|
|
1985
|
-
class
|
|
1986
|
-
formatSelect = this._manageComponent(new
|
|
2002
|
+
class qe extends Y {
|
|
2003
|
+
formatSelect = this._manageComponent(new mt({ id: "textmode-export-image-format", options: [{ value: "png", label: `PNG (${lt.png})` }, { value: "jpg", label: `JPG (${lt.jpg})` }, { value: "webp", label: `WEBP (${lt.webp})` }], defaultValue: "png" }));
|
|
1987
2004
|
scaleInput = this._manageComponent(new G({ defaultValue: "1", attributes: { min: "0.1", step: "0.1" } }));
|
|
1988
|
-
constructor(
|
|
1989
|
-
super(
|
|
2005
|
+
constructor(t) {
|
|
2006
|
+
super(t);
|
|
1990
2007
|
}
|
|
1991
2008
|
render() {
|
|
1992
|
-
const
|
|
1993
|
-
|
|
1994
|
-
const
|
|
1995
|
-
|
|
2009
|
+
const t = document.createElement("div");
|
|
2010
|
+
t.classList.add(b.stack);
|
|
2011
|
+
const e = new j("row");
|
|
2012
|
+
e.mount(t);
|
|
1996
2013
|
const r = new P({ label: "image format", labelFor: "textmode-export-image-format", variant: "compact" });
|
|
1997
|
-
r.mount(
|
|
2014
|
+
r.mount(e.root), this.formatSelect.mount(r.root);
|
|
1998
2015
|
const a = new P({ label: "scale", labelFor: "textmode-export-image-scale", variant: "dense" });
|
|
1999
|
-
return a.mount(
|
|
2016
|
+
return a.mount(e.root), this.scaleInput.mount(a.root), this.scaleInput.inputElement.id = "textmode-export-image-scale", t;
|
|
2000
2017
|
}
|
|
2001
2018
|
getOptions() {
|
|
2002
|
-
const
|
|
2003
|
-
return { format: this.formatSelect.value, scale: Number.isFinite(
|
|
2019
|
+
const t = Number.parseFloat(this.scaleInput.value);
|
|
2020
|
+
return { format: this.formatSelect.value, scale: Number.isFinite(t) ? t : this._config.defaultOptions?.scale ?? 1 };
|
|
2004
2021
|
}
|
|
2005
2022
|
reset() {
|
|
2006
2023
|
this.applyDefaults(), this.scaleInput.refresh();
|
|
2007
2024
|
}
|
|
2008
2025
|
validate() {
|
|
2009
|
-
const
|
|
2010
|
-
return Number.isFinite(
|
|
2026
|
+
const t = Number.parseFloat(this.scaleInput.value);
|
|
2027
|
+
return Number.isFinite(t) && t > 0;
|
|
2011
2028
|
}
|
|
2012
2029
|
applyDefaults() {
|
|
2013
|
-
const
|
|
2014
|
-
this.formatSelect.value =
|
|
2015
|
-
const
|
|
2016
|
-
this.scaleInput.value = String(
|
|
2030
|
+
const t = this._config.defaultOptions ?? {};
|
|
2031
|
+
this.formatSelect.value = t.format ?? "png";
|
|
2032
|
+
const e = t.scale ?? 1;
|
|
2033
|
+
this.scaleInput.value = String(e);
|
|
2017
2034
|
}
|
|
2018
2035
|
}
|
|
2019
|
-
class
|
|
2020
|
-
includeBackground = this._manageComponent(new
|
|
2021
|
-
drawMode = this._manageComponent(new
|
|
2036
|
+
class He extends Y {
|
|
2037
|
+
includeBackground = this._manageComponent(new Gt({ id: "textmode-export-svg-include-backgrounds", label: "include cell backgrounds", defaultChecked: !0 }));
|
|
2038
|
+
drawMode = this._manageComponent(new mt({ id: "textmode-export-svg-draw-mode", options: [{ value: "fill", label: "fill" }, { value: "stroke", label: "stroke" }], defaultValue: "fill" }));
|
|
2022
2039
|
strokeWidth = this._manageComponent(new G({ defaultValue: "1", attributes: { min: "0", step: "0.1" } }));
|
|
2023
|
-
constructor(
|
|
2024
|
-
super(
|
|
2040
|
+
constructor(t) {
|
|
2041
|
+
super(t);
|
|
2025
2042
|
}
|
|
2026
2043
|
render() {
|
|
2027
|
-
const
|
|
2028
|
-
|
|
2029
|
-
const
|
|
2030
|
-
|
|
2044
|
+
const t = document.createElement("div");
|
|
2045
|
+
t.classList.add(b.stack), this.includeBackground.mount(t);
|
|
2046
|
+
const e = new j("row");
|
|
2047
|
+
e.mount(t);
|
|
2031
2048
|
const r = new P({ label: "draw mode", labelFor: "textmode-export-svg-draw-mode", variant: "compact" });
|
|
2032
|
-
r.mount(
|
|
2049
|
+
r.mount(e.root), this.drawMode.mount(r.root);
|
|
2033
2050
|
const a = new P({ label: "stroke width", labelFor: "textmode-export-svg-stroke-width", variant: "compact" });
|
|
2034
|
-
return a.mount(
|
|
2051
|
+
return a.mount(e.root), this.strokeWidth.mount(a.root), this.strokeWidth.inputElement.id = "textmode-export-svg-stroke-width", this.drawMode.selectElement.addEventListener("change", () => this.updateStrokeControls()), this.updateStrokeControls(), t;
|
|
2035
2052
|
}
|
|
2036
2053
|
getOptions() {
|
|
2037
2054
|
return { includeBackgroundRectangles: this.includeBackground.checked, drawMode: this.drawMode.value, strokeWidth: Number.parseFloat(this.strokeWidth.value) };
|
|
@@ -2040,47 +2057,49 @@ class Ht extends Y {
|
|
|
2040
2057
|
this.applyDefaults(), this.updateStrokeControls();
|
|
2041
2058
|
}
|
|
2042
2059
|
validate() {
|
|
2043
|
-
const
|
|
2044
|
-
return this.drawMode.value !== "stroke" || Number.isFinite(
|
|
2060
|
+
const t = Number.parseFloat(this.strokeWidth.value);
|
|
2061
|
+
return this.drawMode.value !== "stroke" || Number.isFinite(t) && t >= 0;
|
|
2045
2062
|
}
|
|
2046
2063
|
updateStrokeControls() {
|
|
2047
|
-
const
|
|
2048
|
-
this.strokeWidth.inputElement.disabled = !
|
|
2064
|
+
const t = this.drawMode.value === "stroke";
|
|
2065
|
+
this.strokeWidth.inputElement.disabled = !t, this.strokeWidth.refresh();
|
|
2049
2066
|
}
|
|
2050
2067
|
applyDefaults() {
|
|
2051
|
-
const
|
|
2052
|
-
this.includeBackground.checked =
|
|
2053
|
-
const
|
|
2054
|
-
this.strokeWidth.value = String(
|
|
2068
|
+
const t = this._config.defaultOptions ?? {};
|
|
2069
|
+
this.includeBackground.checked = t.includeBackgroundRectangles ?? !0, this.drawMode.value = t.drawMode ?? "fill";
|
|
2070
|
+
const e = t.strokeWidth ?? 1;
|
|
2071
|
+
this.strokeWidth.value = String(e), this.strokeWidth.refresh();
|
|
2055
2072
|
}
|
|
2056
2073
|
}
|
|
2057
|
-
const
|
|
2058
|
-
function
|
|
2059
|
-
return
|
|
2074
|
+
const je = [{ format: "txt", label: "plain text (.txt)", supportsClipboard: !0, createBlade: () => new We({ format: "txt", label: "plain text (.txt)", supportsClipboard: !0, defaultOptions: { preserveTrailingSpaces: !1, emptyCharacter: " " } }) }, { format: "image", label: "image (.png / .jpg / .webp)", supportsClipboard: !0, createBlade: () => new qe({ format: "image", label: "image (.png / .jpg / .webp)", supportsClipboard: !0, defaultOptions: { format: "png", scale: 1 } }) }, { format: "svg", label: "vector (.svg)", supportsClipboard: !0, createBlade: () => new He({ format: "svg", label: "vector (.svg)", supportsClipboard: !0, defaultOptions: { includeBackgroundRectangles: !0, drawMode: "fill", strokeWidth: 1 } }) }, { format: "gif", label: "animated GIF (.gif)", supportsClipboard: !1, createBlade: () => new ut({ format: "gif", label: "animated GIF (.gif)", supportsClipboard: !1, defaultOptions: { frameCount: 300, frameRate: 60, scale: 1, repeat: 0 } }) }, { format: "video", label: "video (.webm)", supportsClipboard: !1, createBlade: () => new pt({ format: "video", label: "video (.webm)", supportsClipboard: !1, defaultOptions: { frameCount: 480, frameRate: 60, quality: 0.7 } }) }];
|
|
2075
|
+
function Qe() {
|
|
2076
|
+
return je;
|
|
2060
2077
|
}
|
|
2061
|
-
function
|
|
2062
|
-
const
|
|
2078
|
+
function Xe(n, t) {
|
|
2079
|
+
const e = Qe(), r = e[0]?.format, a = new Ne(Ge(r)), i = new Ue(), s = new Re(n, t, a, i, e);
|
|
2063
2080
|
return s.$mount(), s;
|
|
2064
2081
|
}
|
|
2065
|
-
const
|
|
2066
|
-
const
|
|
2067
|
-
new
|
|
2068
|
-
}, saveStrings: (
|
|
2069
|
-
new
|
|
2070
|
-
}, toSVG: (
|
|
2071
|
-
Object.assign(
|
|
2072
|
-
}, async uninstall(
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
2079
|
-
|
|
2080
|
-
|
|
2082
|
+
const zt = { name: "textmode.export", version: "1.2.1", async install(n, t) {
|
|
2083
|
+
const e = { saveCanvas: async (l = {}) => new bt().$saveImage(n.canvas, l), copyCanvas: async (l = {}) => new bt().$copyImageToClipboard(n.canvas, l), saveSVG: (l = {}) => {
|
|
2084
|
+
new gt().$saveSVG(n, l);
|
|
2085
|
+
}, saveStrings: (l = {}) => {
|
|
2086
|
+
new vt().$saveTXT(n, l);
|
|
2087
|
+
}, toSVG: (l = {}) => new gt().$generateSVG(n, l), toString: (l = {}) => new vt().$generateTXT(n, l), saveGIF: async (l = {}) => new fe(n, t.registerPostDrawHook).$saveGIF(l), saveWEBM: async (l = {}) => new Ee(n, t.registerPostDrawHook).$saveWEBM(l) }, r = Xe(n, e), a = { show: () => r.show(), hide: () => r.hide(), toggle: () => r.toggle(), isVisible: () => r.isVisible() }, i = { ...e, exportOverlay: a }, s = n;
|
|
2088
|
+
Object.assign(s, i), s._exportOverlayController = r;
|
|
2089
|
+
}, async uninstall(n) {
|
|
2090
|
+
const t = n;
|
|
2091
|
+
t._exportOverlayController?.$dispose(), delete t._exportOverlayController;
|
|
2092
|
+
const r = ["exportOverlay", "saveCanvas", "copyCanvas", "saveSVG", "saveStrings", "toSVG", "toString", "saveGIF", "saveWEBM"];
|
|
2093
|
+
for (const a of r) delete t[a];
|
|
2094
|
+
} }, Ye = (n = {}) => {
|
|
2095
|
+
const t = n.overlay ?? !0, e = { ...zt }, r = e.install;
|
|
2096
|
+
return e.install = async (a, i) => {
|
|
2097
|
+
const s = a;
|
|
2098
|
+
await r.call(e, s, i), t || s.exportOverlay?.hide();
|
|
2099
|
+
}, e;
|
|
2081
2100
|
};
|
|
2082
|
-
typeof window < "u" && (window.ExportPlugin =
|
|
2101
|
+
typeof window < "u" && (window.ExportPlugin = zt, window.createTextmodeExportPlugin = Ye);
|
|
2083
2102
|
export {
|
|
2084
|
-
|
|
2085
|
-
|
|
2103
|
+
zt as ExportPlugin,
|
|
2104
|
+
Ye as createTextmodeExportPlugin
|
|
2086
2105
|
};
|