@objectifthunes/three-book 0.5.6 → 0.5.8
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/demo-kit/dist/index.d.ts +1159 -0
- package/demo-kit/dist/index.js +336 -0
- package/dist/TextBlock.d.ts +35 -1
- package/dist/TextBlock.d.ts.map +1 -1
- package/dist/index.js +185 -141
- package/dist/textContentUtils.d.ts.map +1 -1
- package/package.json +11 -4
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
import { BookDirection as y, BookPointerInteraction as L, getSpreadPairs as k, computeDefaultImageRect as N, loadImage as S, drawImageWithFit as I } from "@objectifthunes/three-book";
|
|
2
|
+
import { PX_PER_UNIT as oe, createPageTexture as de, drawImageWithFit as ce, loadImage as le } from "@objectifthunes/three-book";
|
|
3
|
+
import * as E from "three";
|
|
4
|
+
import { OrbitControls as T } from "three/addons/controls/OrbitControls.js";
|
|
5
|
+
const O = "rgba(255,255,255,0.6)", F = 3, _ = 1.4, R = 22, U = "#1a1a1a", H = [
|
|
6
|
+
"Georgia",
|
|
7
|
+
"Times New Roman",
|
|
8
|
+
"Garamond",
|
|
9
|
+
"Palatino",
|
|
10
|
+
"Arial",
|
|
11
|
+
"Helvetica",
|
|
12
|
+
"Verdana",
|
|
13
|
+
"Trebuchet MS",
|
|
14
|
+
"Tahoma",
|
|
15
|
+
"Courier New",
|
|
16
|
+
"Lucida Console",
|
|
17
|
+
"Comic Sans MS"
|
|
18
|
+
];
|
|
19
|
+
function A(n, o) {
|
|
20
|
+
return {
|
|
21
|
+
text: "Your text here",
|
|
22
|
+
x: Math.round(n * 0.06),
|
|
23
|
+
y: Math.round(o * 0.55),
|
|
24
|
+
width: Math.round(n * 0.88),
|
|
25
|
+
fontFamily: "",
|
|
26
|
+
fontSize: R,
|
|
27
|
+
fontWeight: "normal",
|
|
28
|
+
fontStyle: "normal",
|
|
29
|
+
color: U,
|
|
30
|
+
textAlign: "left"
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
function W(n) {
|
|
34
|
+
switch (n) {
|
|
35
|
+
case "right-to-left":
|
|
36
|
+
return y.RightToLeft;
|
|
37
|
+
case "up-to-down":
|
|
38
|
+
return y.UpToDown;
|
|
39
|
+
case "down-to-up":
|
|
40
|
+
return y.DownToUp;
|
|
41
|
+
case "left-to-right":
|
|
42
|
+
default:
|
|
43
|
+
return y.LeftToRight;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
function $() {
|
|
47
|
+
return {
|
|
48
|
+
image: null,
|
|
49
|
+
objectUrl: null,
|
|
50
|
+
useImage: !1,
|
|
51
|
+
fitMode: "cover",
|
|
52
|
+
fullBleed: !0,
|
|
53
|
+
imageRect: null
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
function M(n) {
|
|
57
|
+
n.objectUrl && URL.revokeObjectURL(n.objectUrl), n.objectUrl = null, n.image = null, n.useImage = !1, n.imageRect = null;
|
|
58
|
+
}
|
|
59
|
+
function z(n, o, e) {
|
|
60
|
+
const d = document.createElement("div");
|
|
61
|
+
d.className = "demo-section-title", d.style.cursor = "pointer", d.style.display = "flex", d.style.justifyContent = "space-between", d.style.alignItems = "center", d.style.userSelect = "none";
|
|
62
|
+
const t = document.createElement("span");
|
|
63
|
+
t.textContent = o;
|
|
64
|
+
const a = document.createElement("span");
|
|
65
|
+
a.textContent = e ? "▴" : "▾", a.style.fontSize = "10px", d.appendChild(t), d.appendChild(a), n.appendChild(d);
|
|
66
|
+
const c = document.createElement("div");
|
|
67
|
+
return c.style.display = e ? "block" : "none", n.appendChild(c), d.addEventListener("click", () => {
|
|
68
|
+
const r = c.style.display !== "none";
|
|
69
|
+
c.style.display = r ? "none" : "block", a.textContent = r ? "▾" : "▴";
|
|
70
|
+
}), { header: d, body: c };
|
|
71
|
+
}
|
|
72
|
+
function G(n, o) {
|
|
73
|
+
const e = document.createElement("div");
|
|
74
|
+
return e.textContent = o, e.className = "demo-section-title", n.appendChild(e), e;
|
|
75
|
+
}
|
|
76
|
+
function X(n, o, e, d, t, a, c) {
|
|
77
|
+
const r = document.createElement("label");
|
|
78
|
+
r.className = "demo-field";
|
|
79
|
+
const i = document.createElement("div");
|
|
80
|
+
i.className = "demo-field-row";
|
|
81
|
+
const h = document.createElement("span");
|
|
82
|
+
h.textContent = o;
|
|
83
|
+
const l = document.createElement("span"), f = t < 0.01 ? 3 : t < 0.1 ? 2 : 1;
|
|
84
|
+
l.textContent = a.toFixed(f);
|
|
85
|
+
const m = document.createElement("input");
|
|
86
|
+
return m.type = "range", m.min = String(e), m.max = String(d), m.step = String(t), m.value = String(a), m.className = "demo-slider", m.addEventListener("input", () => {
|
|
87
|
+
const b = parseFloat(m.value);
|
|
88
|
+
l.textContent = b.toFixed(f), c(b);
|
|
89
|
+
}), i.appendChild(h), i.appendChild(l), r.appendChild(i), r.appendChild(m), n.appendChild(r), m;
|
|
90
|
+
}
|
|
91
|
+
function Y(n, o, e, d) {
|
|
92
|
+
const t = document.createElement("label");
|
|
93
|
+
t.className = "demo-field";
|
|
94
|
+
const a = document.createElement("div");
|
|
95
|
+
a.className = "demo-field-row";
|
|
96
|
+
const c = document.createElement("span");
|
|
97
|
+
c.textContent = o;
|
|
98
|
+
const r = document.createElement("span");
|
|
99
|
+
r.textContent = e;
|
|
100
|
+
const i = document.createElement("input");
|
|
101
|
+
return i.type = "color", i.value = e, i.className = "demo-color-input", i.addEventListener("input", () => {
|
|
102
|
+
r.textContent = i.value, d(i.value);
|
|
103
|
+
}), a.appendChild(c), a.appendChild(r), t.appendChild(a), t.appendChild(i), n.appendChild(t), i;
|
|
104
|
+
}
|
|
105
|
+
function Z(n, o, e, d) {
|
|
106
|
+
const t = document.createElement("label");
|
|
107
|
+
t.className = "demo-checkbox-field";
|
|
108
|
+
const a = document.createElement("span");
|
|
109
|
+
a.textContent = o;
|
|
110
|
+
const c = document.createElement("input");
|
|
111
|
+
return c.type = "checkbox", c.checked = e, c.className = "demo-checkbox", c.addEventListener("change", () => {
|
|
112
|
+
d(c.checked);
|
|
113
|
+
}), t.appendChild(a), t.appendChild(c), n.appendChild(t), c;
|
|
114
|
+
}
|
|
115
|
+
function V(n, o, e, d, t) {
|
|
116
|
+
const a = document.createElement("label");
|
|
117
|
+
a.className = "demo-field";
|
|
118
|
+
const c = document.createElement("div");
|
|
119
|
+
c.className = "demo-field-row";
|
|
120
|
+
const r = document.createElement("span");
|
|
121
|
+
r.textContent = o;
|
|
122
|
+
const i = document.createElement("select");
|
|
123
|
+
i.className = "demo-select";
|
|
124
|
+
for (const h of d) {
|
|
125
|
+
const l = document.createElement("option");
|
|
126
|
+
l.value = h.value, l.textContent = h.label, l.selected = h.value === e, i.appendChild(l);
|
|
127
|
+
}
|
|
128
|
+
return i.addEventListener("change", () => {
|
|
129
|
+
t(i.value);
|
|
130
|
+
}), c.appendChild(r), a.appendChild(c), a.appendChild(i), n.appendChild(a), i;
|
|
131
|
+
}
|
|
132
|
+
function q() {
|
|
133
|
+
const n = new E.Scene();
|
|
134
|
+
n.background = new E.Color(1710638);
|
|
135
|
+
const o = new E.PerspectiveCamera(
|
|
136
|
+
45,
|
|
137
|
+
window.innerWidth / window.innerHeight,
|
|
138
|
+
0.1,
|
|
139
|
+
100
|
|
140
|
+
);
|
|
141
|
+
o.position.set(0, 4, 5), o.lookAt(0, 0, 0);
|
|
142
|
+
const e = new E.WebGLRenderer({ antialias: !0 });
|
|
143
|
+
e.setSize(window.innerWidth, window.innerHeight), e.setPixelRatio(window.devicePixelRatio), e.shadowMap.enabled = !0, document.body.appendChild(e.domElement);
|
|
144
|
+
const d = new E.AmbientLight(16777215, 0.6);
|
|
145
|
+
n.add(d);
|
|
146
|
+
const t = new E.DirectionalLight(16777215, 1.2);
|
|
147
|
+
t.position.set(5, 10, 5), t.castShadow = !0, t.shadow.mapSize.set(2048, 2048), n.add(t);
|
|
148
|
+
const a = new T(o, e.domElement);
|
|
149
|
+
a.enableDamping = !0, a.dampingFactor = 0.05, a.target.set(0, 0.5, 0);
|
|
150
|
+
const c = new E.PlaneGeometry(20, 20), r = new E.MeshStandardMaterial({ color: 2763338 }), i = new E.Mesh(c, r);
|
|
151
|
+
i.rotation.x = -Math.PI / 2, i.position.y = -0.01, i.receiveShadow = !0, n.add(i);
|
|
152
|
+
function h(l) {
|
|
153
|
+
d.intensity = l.ambientIntensity, t.intensity = l.sunIntensity, t.position.set(l.sunX, l.sunY, l.sunZ);
|
|
154
|
+
}
|
|
155
|
+
return window.addEventListener("resize", () => {
|
|
156
|
+
o.aspect = window.innerWidth / window.innerHeight, o.updateProjectionMatrix(), e.setSize(window.innerWidth, window.innerHeight);
|
|
157
|
+
}), { scene: n, camera: o, renderer: e, controls: a, ambientLight: d, dirLight: t, syncLights: h };
|
|
158
|
+
}
|
|
159
|
+
function J(n, o, e, d) {
|
|
160
|
+
const t = new L(n, o);
|
|
161
|
+
return t.enabled = d, t.onTurnStart = () => {
|
|
162
|
+
e.enabled = !1;
|
|
163
|
+
}, t.onTurnEnd = () => {
|
|
164
|
+
e.enabled = !0;
|
|
165
|
+
}, t;
|
|
166
|
+
}
|
|
167
|
+
function K(n) {
|
|
168
|
+
const { title: o, subtitle: e, tabs: d } = n, t = document.createElement("div");
|
|
169
|
+
t.className = "demo-panel", t.style.left = "10px", t.style.width = "min(92vw, 380px)", t.addEventListener("pointerdown", (p) => p.stopPropagation());
|
|
170
|
+
const a = document.createElement("div");
|
|
171
|
+
a.className = "demo-panel-header";
|
|
172
|
+
const c = document.createElement("div"), r = document.createElement("h1");
|
|
173
|
+
r.textContent = o, r.className = "demo-panel-title";
|
|
174
|
+
const i = document.createElement("p");
|
|
175
|
+
i.textContent = e, i.className = "demo-panel-subtitle", c.appendChild(r), c.appendChild(i), a.appendChild(c);
|
|
176
|
+
const h = document.createElement("button");
|
|
177
|
+
h.textContent = "✕", h.className = "demo-close-btn", a.appendChild(h), t.appendChild(a);
|
|
178
|
+
const l = document.createElement("div");
|
|
179
|
+
l.className = "demo-status", l.textContent = "Building...", t.appendChild(l);
|
|
180
|
+
const f = document.createElement("div");
|
|
181
|
+
f.className = "demo-tab-bar";
|
|
182
|
+
const m = [], b = [];
|
|
183
|
+
function g(p) {
|
|
184
|
+
for (let s = 0; s < d.length; s++) {
|
|
185
|
+
const u = d[s].key === p;
|
|
186
|
+
b[s].style.display = u ? "block" : "none", m[s].className = u ? "demo-tab demo-tab--active" : "demo-tab";
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
for (let p = 0; p < d.length; p++) {
|
|
190
|
+
const s = d[p], u = document.createElement("button");
|
|
191
|
+
u.textContent = s.label, u.className = p === 0 ? "demo-tab demo-tab--active" : "demo-tab", u.addEventListener("click", () => g(s.key)), m.push(u), f.appendChild(u), s.content.style.display = p === 0 ? "block" : "none", b.push(s.content);
|
|
192
|
+
}
|
|
193
|
+
t.appendChild(f);
|
|
194
|
+
for (const p of b) t.appendChild(p);
|
|
195
|
+
const C = document.createElement("button");
|
|
196
|
+
return C.textContent = "☰ Panel", C.className = "demo-toggle-btn", C.style.display = "none", h.addEventListener("click", () => {
|
|
197
|
+
t.style.display = "none", C.style.display = "block";
|
|
198
|
+
}), C.addEventListener("click", () => {
|
|
199
|
+
t.style.display = "", C.style.display = "none";
|
|
200
|
+
}), document.body.appendChild(t), document.body.appendChild(C), {
|
|
201
|
+
root: t,
|
|
202
|
+
toggleBtn: C,
|
|
203
|
+
statusEl: l,
|
|
204
|
+
setStatus(p) {
|
|
205
|
+
l.textContent = p;
|
|
206
|
+
},
|
|
207
|
+
switchTab: g
|
|
208
|
+
};
|
|
209
|
+
}
|
|
210
|
+
function B(n, o, e) {
|
|
211
|
+
const t = o.has(n - 1) ? n - 1 : Math.min(n, e - 1), a = o.has(t);
|
|
212
|
+
return { effectiveIdx: t, isSpread: a };
|
|
213
|
+
}
|
|
214
|
+
function Q(n) {
|
|
215
|
+
const o = document.createElement("div");
|
|
216
|
+
function e(d) {
|
|
217
|
+
o.innerHTML = "";
|
|
218
|
+
const { pageCount: t, currentPage: a, spreadPages: c, onPageChange: r, onSpreadToggle: i } = d, h = new Set(k(t)), { effectiveIdx: l, isSpread: f } = B(a, c, t);
|
|
219
|
+
if (h.has(l)) {
|
|
220
|
+
const s = document.createElement("label");
|
|
221
|
+
s.className = "demo-spread-toggle";
|
|
222
|
+
const u = document.createElement("input");
|
|
223
|
+
u.type = "checkbox", u.checked = f, u.className = "demo-spread-checkbox", u.addEventListener("change", () => {
|
|
224
|
+
i(l, u.checked);
|
|
225
|
+
}), s.appendChild(u), s.appendChild(
|
|
226
|
+
document.createTextNode(`Double-page spread: Pages ${l + 1}–${l + 2}`)
|
|
227
|
+
), o.appendChild(s);
|
|
228
|
+
}
|
|
229
|
+
const m = document.createElement("div");
|
|
230
|
+
m.className = "demo-page-nav";
|
|
231
|
+
const b = document.createElement("button");
|
|
232
|
+
b.textContent = "←", b.className = "demo-btn", b.disabled = l <= 0, b.addEventListener("click", () => r(l - 1));
|
|
233
|
+
const g = document.createElement("input");
|
|
234
|
+
g.type = "number", g.min = "1", g.max = String(t), g.value = String(l + 1), g.className = "demo-input--page", g.addEventListener("change", () => {
|
|
235
|
+
const s = Math.max(1, Math.min(t, parseInt(g.value, 10) || 1)) - 1;
|
|
236
|
+
r(s);
|
|
237
|
+
});
|
|
238
|
+
const C = document.createElement("span");
|
|
239
|
+
if (C.className = "demo-page-count", C.textContent = `/ ${t}`, m.appendChild(b), m.appendChild(g), m.appendChild(C), f) {
|
|
240
|
+
const s = document.createElement("span");
|
|
241
|
+
s.className = "demo-spread-label", s.textContent = `(Spread ${l + 1}–${l + 2})`, m.appendChild(s);
|
|
242
|
+
}
|
|
243
|
+
const p = document.createElement("button");
|
|
244
|
+
p.textContent = "→", p.className = "demo-btn", p.disabled = l >= t - 1, p.addEventListener("click", () => r(l + 1)), m.appendChild(p), o.appendChild(m);
|
|
245
|
+
}
|
|
246
|
+
return e(n), {
|
|
247
|
+
root: o,
|
|
248
|
+
update(d) {
|
|
249
|
+
e(d);
|
|
250
|
+
}
|
|
251
|
+
};
|
|
252
|
+
}
|
|
253
|
+
function D(n, o, e = 64, d = 64) {
|
|
254
|
+
const t = document.createElement("canvas");
|
|
255
|
+
t.width = 128, t.height = 128;
|
|
256
|
+
const a = t.getContext("2d");
|
|
257
|
+
if (a.fillStyle = o, a.fillRect(0, 0, 128, 128), n.useImage && n.image) {
|
|
258
|
+
const c = n.fullBleed ? 0 : 14;
|
|
259
|
+
I(a, n.image, c, c, 128 - c * 2, 128 - c * 2, n.fitMode);
|
|
260
|
+
}
|
|
261
|
+
return t.className = "demo-thumb", t.style.width = `${e}px`, t.style.height = `${d}px`, t;
|
|
262
|
+
}
|
|
263
|
+
function ee(n) {
|
|
264
|
+
const { label: o, slot: e, bgColor: d, showFitControls: t, canvasWidth: a, canvasHeight: c, onChanged: r } = n, i = a ?? 512, h = c ?? 512, l = document.createElement("div");
|
|
265
|
+
l.className = "demo-card";
|
|
266
|
+
const f = document.createElement("div");
|
|
267
|
+
f.className = "demo-card-row", f.appendChild(D(e, d));
|
|
268
|
+
const m = document.createElement("div");
|
|
269
|
+
m.className = "demo-card-body";
|
|
270
|
+
const b = document.createElement("div");
|
|
271
|
+
b.className = "demo-card-label", b.textContent = o, m.appendChild(b);
|
|
272
|
+
const g = document.createElement("div");
|
|
273
|
+
if (g.className = "demo-card-controls", t) {
|
|
274
|
+
const s = document.createElement("select");
|
|
275
|
+
s.className = "demo-select demo-select--mini";
|
|
276
|
+
for (const w of ["contain", "cover", "fill"]) {
|
|
277
|
+
const x = document.createElement("option");
|
|
278
|
+
x.value = w, x.textContent = w.charAt(0).toUpperCase() + w.slice(1), x.selected = w === e.fitMode, s.appendChild(x);
|
|
279
|
+
}
|
|
280
|
+
s.addEventListener("change", () => {
|
|
281
|
+
e.fitMode = s.value, e.image && (e.imageRect = N(e.image, i, h, e.fitMode, e.fullBleed)), r();
|
|
282
|
+
}), g.appendChild(s);
|
|
283
|
+
const u = document.createElement("label");
|
|
284
|
+
u.className = "demo-inline-label";
|
|
285
|
+
const v = document.createElement("input");
|
|
286
|
+
v.type = "checkbox", v.checked = e.fullBleed, v.className = "demo-checkbox--sm", v.addEventListener("change", () => {
|
|
287
|
+
e.fullBleed = v.checked, e.image && (e.imageRect = N(e.image, i, h, e.fitMode, e.fullBleed)), r();
|
|
288
|
+
}), u.appendChild(v), u.appendChild(document.createTextNode("Bleed")), g.appendChild(u);
|
|
289
|
+
}
|
|
290
|
+
const C = document.createElement("button");
|
|
291
|
+
C.type = "button", C.textContent = "Clear", C.className = "demo-btn", C.addEventListener("click", () => {
|
|
292
|
+
M(e), r();
|
|
293
|
+
}), g.appendChild(C), m.appendChild(g);
|
|
294
|
+
const p = document.createElement("input");
|
|
295
|
+
return p.type = "file", p.accept = "image/*", p.className = "demo-file-input", p.addEventListener("change", () => {
|
|
296
|
+
var s;
|
|
297
|
+
S(((s = p.files) == null ? void 0 : s[0]) ?? null).then((u) => {
|
|
298
|
+
u && (e.objectUrl && URL.revokeObjectURL(e.objectUrl), e.objectUrl = u.objectUrl, e.image = u.image, e.useImage = !0, e.imageRect = N(u.image, i, h, e.fitMode, e.fullBleed), r());
|
|
299
|
+
});
|
|
300
|
+
}), m.appendChild(p), f.appendChild(m), l.appendChild(f), l;
|
|
301
|
+
}
|
|
302
|
+
async function te(n, o) {
|
|
303
|
+
if (!o) return;
|
|
304
|
+
n.objectUrl && URL.revokeObjectURL(n.objectUrl);
|
|
305
|
+
const e = await S(o);
|
|
306
|
+
e && (n.objectUrl = e.objectUrl, n.image = e.image, n.useImage = !0);
|
|
307
|
+
}
|
|
308
|
+
export {
|
|
309
|
+
R as DEFAULT_FONT_SIZE,
|
|
310
|
+
_ as DEFAULT_LINE_HEIGHT,
|
|
311
|
+
U as DEFAULT_TEXT_COLOR,
|
|
312
|
+
F as DEMO_SHADOW_BLUR,
|
|
313
|
+
O as DEMO_SHADOW_COLOR,
|
|
314
|
+
H as FONT_OPTIONS,
|
|
315
|
+
oe as PX_PER_UNIT,
|
|
316
|
+
Z as addCheckbox,
|
|
317
|
+
z as addCollapseToggle,
|
|
318
|
+
Y as addColor,
|
|
319
|
+
G as addSectionTitle,
|
|
320
|
+
V as addSelect,
|
|
321
|
+
X as addSlider,
|
|
322
|
+
M as clearImageSlot,
|
|
323
|
+
A as createDefaultTextBlock,
|
|
324
|
+
J as createDemoInteraction,
|
|
325
|
+
K as createDemoPanel,
|
|
326
|
+
q as createDemoScene,
|
|
327
|
+
$ as createImageSlot,
|
|
328
|
+
ee as createImageSlotCard,
|
|
329
|
+
Q as createPageNavigation,
|
|
330
|
+
de as createPageTexture,
|
|
331
|
+
ce as drawImageWithFit,
|
|
332
|
+
le as loadImage,
|
|
333
|
+
te as loadImageFromFile,
|
|
334
|
+
B as resolvePageIndex,
|
|
335
|
+
W as toBookDirection
|
|
336
|
+
};
|
package/dist/TextBlock.d.ts
CHANGED
|
@@ -33,6 +33,26 @@ export interface TextBlockOptions {
|
|
|
33
33
|
shadowColor?: string;
|
|
34
34
|
/** Shadow blur radius in pixels (default 0). */
|
|
35
35
|
shadowBlur?: number;
|
|
36
|
+
/** Horizontal shadow offset in pixels (default 0). */
|
|
37
|
+
shadowOffsetX?: number;
|
|
38
|
+
/** Vertical shadow offset in pixels (default 0). */
|
|
39
|
+
shadowOffsetY?: number;
|
|
40
|
+
/** Text case transformation (default 'none'). */
|
|
41
|
+
textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
42
|
+
/** Text decoration (default 'none'). */
|
|
43
|
+
textDecoration?: 'none' | 'underline' | 'strikethrough';
|
|
44
|
+
/** Background fill color behind text (default '' = none). */
|
|
45
|
+
background?: string;
|
|
46
|
+
/** Padding around text for background box in pixels (default 0). */
|
|
47
|
+
backgroundPadding?: number;
|
|
48
|
+
/** Maximum visible lines, 0 = unlimited (default 0). Truncated with '…'. */
|
|
49
|
+
maxLines?: number;
|
|
50
|
+
/** Container height for vertical alignment, 0 = auto (default 0). */
|
|
51
|
+
height?: number;
|
|
52
|
+
/** Vertical alignment within height (default 'top'). */
|
|
53
|
+
verticalAlign?: 'top' | 'middle' | 'bottom';
|
|
54
|
+
/** Rotation in radians around text block center (default 0). */
|
|
55
|
+
rotation?: number;
|
|
36
56
|
}
|
|
37
57
|
export declare class TextBlock {
|
|
38
58
|
x: number;
|
|
@@ -49,6 +69,16 @@ export declare class TextBlock {
|
|
|
49
69
|
opacity: number;
|
|
50
70
|
shadowColor: string;
|
|
51
71
|
shadowBlur: number;
|
|
72
|
+
shadowOffsetX: number;
|
|
73
|
+
shadowOffsetY: number;
|
|
74
|
+
textTransform: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
|
|
75
|
+
textDecoration: 'none' | 'underline' | 'strikethrough';
|
|
76
|
+
background: string;
|
|
77
|
+
backgroundPadding: number;
|
|
78
|
+
maxLines: number;
|
|
79
|
+
height: number;
|
|
80
|
+
verticalAlign: 'top' | 'middle' | 'bottom';
|
|
81
|
+
rotation: number;
|
|
52
82
|
constructor(options?: TextBlockOptions);
|
|
53
83
|
private _font;
|
|
54
84
|
/**
|
|
@@ -56,9 +86,13 @@ export declare class TextBlock {
|
|
|
56
86
|
* Respects explicit newlines.
|
|
57
87
|
*/
|
|
58
88
|
wrapLines(ctx: CanvasRenderingContext2D): string[];
|
|
89
|
+
private _applyMaxLines;
|
|
59
90
|
/** Total rendered height in canvas pixels. */
|
|
60
91
|
measureHeight(ctx: CanvasRenderingContext2D): number;
|
|
61
|
-
/**
|
|
92
|
+
/**
|
|
93
|
+
* Returns true if the point (px, py) is within the text bounding box.
|
|
94
|
+
* Note: rotation is not accounted for — the hit area is always axis-aligned.
|
|
95
|
+
*/
|
|
62
96
|
hitTest(ctx: CanvasRenderingContext2D, px: number, py: number): boolean;
|
|
63
97
|
private _maxLineWidth;
|
|
64
98
|
draw(ctx: CanvasRenderingContext2D): void;
|
package/dist/TextBlock.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextBlock.d.ts","sourceRoot":"","sources":["../src/TextBlock.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,kDAAkD;IAClD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,iDAAiD;IACjD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IAC/B,qCAAqC;IACrC,SAAS,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAChC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACxC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"TextBlock.d.ts","sourceRoot":"","sources":["../src/TextBlock.ts"],"names":[],"mappings":"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"}
|