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