modern-text 1.2.3 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +35 -19
- package/dist/index.d.cts +31 -27
- package/dist/index.d.mts +31 -27
- package/dist/index.d.ts +31 -27
- package/dist/index.js +5 -5
- package/dist/index.mjs +35 -21
- package/package.json +12 -12
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Path2D, BoundingBox, setCanvasContext,
|
|
1
|
+
import { Path2D, BoundingBox, setCanvasContext, Path2DSet, Matrix3, svgToDOM, svgToPath2DSet, Vector2 } from 'modern-path2d';
|
|
2
2
|
import { getDefaultStyle } from 'modern-idoc';
|
|
3
3
|
import { fonts } from 'modern-font';
|
|
4
4
|
|
|
@@ -253,7 +253,7 @@ class Character {
|
|
|
253
253
|
if (Math.abs(advanceWidth - advanceHeight) > 0.1) {
|
|
254
254
|
y -= (ascender - typoAscender) / (ascender + Math.abs(descender)) * advanceHeight;
|
|
255
255
|
}
|
|
256
|
-
glyphIndex =
|
|
256
|
+
glyphIndex = void 0;
|
|
257
257
|
}
|
|
258
258
|
if (isVertical && !set1.has(content) && (content.codePointAt(0) <= 256 || set2.has(content))) {
|
|
259
259
|
path.addCommands(
|
|
@@ -274,12 +274,12 @@ class Character {
|
|
|
274
274
|
isVertical ? {
|
|
275
275
|
x: point.x,
|
|
276
276
|
y: top - (advanceHeight - advanceWidth) / 2 + baseline
|
|
277
|
-
} :
|
|
277
|
+
} : void 0
|
|
278
278
|
);
|
|
279
279
|
}
|
|
280
280
|
path.rotate(90, point);
|
|
281
281
|
} else {
|
|
282
|
-
if (glyphIndex !==
|
|
282
|
+
if (glyphIndex !== void 0) {
|
|
283
283
|
path.addCommands(
|
|
284
284
|
sfnt.glyphs.get(glyphIndex).getPathCommands(x, y, style.fontSize)
|
|
285
285
|
);
|
|
@@ -289,7 +289,7 @@ class Character {
|
|
|
289
289
|
isVertical ? {
|
|
290
290
|
x: x + advanceWidth / 2,
|
|
291
291
|
y: top + typoAscender / (ascender + Math.abs(descender)) * advanceHeight
|
|
292
|
-
} :
|
|
292
|
+
} : void 0
|
|
293
293
|
);
|
|
294
294
|
}
|
|
295
295
|
} else {
|
|
@@ -297,7 +297,7 @@ class Character {
|
|
|
297
297
|
if (needsItalic) {
|
|
298
298
|
this._italic(
|
|
299
299
|
path,
|
|
300
|
-
isVertical ? { x: x + advanceHeight / 2, y } :
|
|
300
|
+
isVertical ? { x: x + advanceHeight / 2, y } : void 0
|
|
301
301
|
);
|
|
302
302
|
}
|
|
303
303
|
}
|
|
@@ -325,13 +325,13 @@ class Character {
|
|
|
325
325
|
if (this.path.curves[0]?.curves.length) {
|
|
326
326
|
return this.path.getMinMax(min, max, withStyle);
|
|
327
327
|
} else {
|
|
328
|
-
return
|
|
328
|
+
return void 0;
|
|
329
329
|
}
|
|
330
330
|
}
|
|
331
331
|
getGlyphBoundingBox(withStyle) {
|
|
332
|
-
const minMax = this.getGlyphMinMax(
|
|
332
|
+
const minMax = this.getGlyphMinMax(void 0, void 0, withStyle);
|
|
333
333
|
if (!minMax) {
|
|
334
|
-
return
|
|
334
|
+
return void 0;
|
|
335
335
|
}
|
|
336
336
|
const { min, max } = minMax;
|
|
337
337
|
return new BoundingBox(min.x, min.y, max.x - min.x, max.y - min.y);
|
|
@@ -445,7 +445,7 @@ function filterEmpty(val) {
|
|
|
445
445
|
return val;
|
|
446
446
|
const res = {};
|
|
447
447
|
for (const key in val) {
|
|
448
|
-
if (val[key] !== "" && val[key] !==
|
|
448
|
+
if (val[key] !== "" && val[key] !== void 0) {
|
|
449
449
|
res[key] = val[key];
|
|
450
450
|
}
|
|
451
451
|
}
|
|
@@ -589,7 +589,7 @@ class Measurer {
|
|
|
589
589
|
const isFlex = Boolean(style.justifyContent || style.alignItems);
|
|
590
590
|
Object.assign(dom.style, {
|
|
591
591
|
boxSizing: "border-box",
|
|
592
|
-
display: isFlex ? "inline-flex" :
|
|
592
|
+
display: isFlex ? "inline-flex" : void 0,
|
|
593
593
|
width: "max-content",
|
|
594
594
|
height: "max-content",
|
|
595
595
|
whiteSpace: "pre-wrap",
|
|
@@ -604,8 +604,8 @@ class Measurer {
|
|
|
604
604
|
listStyleType: "inherit",
|
|
605
605
|
padding: "0",
|
|
606
606
|
margin: "0",
|
|
607
|
-
width: isFlex && isHorizontal ? "100%" :
|
|
608
|
-
height: isFlex && !isHorizontal ? "100%" :
|
|
607
|
+
width: isFlex && isHorizontal ? "100%" : void 0,
|
|
608
|
+
height: isFlex && !isHorizontal ? "100%" : void 0
|
|
609
609
|
});
|
|
610
610
|
paragraphs.forEach((paragraph) => {
|
|
611
611
|
const li = document.createElement("li");
|
|
@@ -658,7 +658,7 @@ class Measurer {
|
|
|
658
658
|
width: rect.width
|
|
659
659
|
};
|
|
660
660
|
}
|
|
661
|
-
return
|
|
661
|
+
return void 0;
|
|
662
662
|
}).filter(Boolean);
|
|
663
663
|
}
|
|
664
664
|
measureDom(dom) {
|
|
@@ -871,6 +871,13 @@ class EventEmitter {
|
|
|
871
871
|
}
|
|
872
872
|
}
|
|
873
873
|
|
|
874
|
+
function background() {
|
|
875
|
+
return {
|
|
876
|
+
name: "background"
|
|
877
|
+
// TODO
|
|
878
|
+
};
|
|
879
|
+
}
|
|
880
|
+
|
|
874
881
|
function getHighlightStyle(style) {
|
|
875
882
|
const {
|
|
876
883
|
highlight: highlight2,
|
|
@@ -1242,6 +1249,13 @@ function listStyle() {
|
|
|
1242
1249
|
});
|
|
1243
1250
|
}
|
|
1244
1251
|
|
|
1252
|
+
function outline() {
|
|
1253
|
+
return {
|
|
1254
|
+
name: "outline"
|
|
1255
|
+
// TODO
|
|
1256
|
+
};
|
|
1257
|
+
}
|
|
1258
|
+
|
|
1245
1259
|
const tempV1 = new Vector2();
|
|
1246
1260
|
const tempM1 = new Matrix3();
|
|
1247
1261
|
const tempM2 = new Matrix3();
|
|
@@ -1276,7 +1290,7 @@ function render() {
|
|
|
1276
1290
|
boxes.push(aabb);
|
|
1277
1291
|
});
|
|
1278
1292
|
});
|
|
1279
|
-
return boxes.length ? BoundingBox.from(...boxes) :
|
|
1293
|
+
return boxes.length ? BoundingBox.from(...boxes) : void 0;
|
|
1280
1294
|
},
|
|
1281
1295
|
render: (ctx, text) => {
|
|
1282
1296
|
const { paragraphs, glyphBox, effects, style } = text;
|
|
@@ -1398,7 +1412,7 @@ function textDecoration() {
|
|
|
1398
1412
|
}
|
|
1399
1413
|
prevStyle = style;
|
|
1400
1414
|
} else {
|
|
1401
|
-
prevStyle =
|
|
1415
|
+
prevStyle = void 0;
|
|
1402
1416
|
}
|
|
1403
1417
|
});
|
|
1404
1418
|
groups.forEach((group2) => {
|
|
@@ -1522,7 +1536,7 @@ class Text extends EventEmitter {
|
|
|
1522
1536
|
this.measureDom = options.measureDom;
|
|
1523
1537
|
this.effects = options.effects;
|
|
1524
1538
|
this.fonts = options.fonts;
|
|
1525
|
-
this.use(listStyle()).use(textDecoration()).use(highlight()).use(render());
|
|
1539
|
+
this.use(background()).use(outline()).use(listStyle()).use(textDecoration()).use(highlight()).use(render());
|
|
1526
1540
|
this.updateParagraphs();
|
|
1527
1541
|
}
|
|
1528
1542
|
use(plugin) {
|
|
@@ -1564,7 +1578,7 @@ class Text extends EventEmitter {
|
|
|
1564
1578
|
paragraph.addFragment(f);
|
|
1565
1579
|
} else {
|
|
1566
1580
|
const { content: content2, ...fStyle } = f;
|
|
1567
|
-
if (content2 !==
|
|
1581
|
+
if (content2 !== void 0) {
|
|
1568
1582
|
paragraph.addFragment(content2, fStyle);
|
|
1569
1583
|
}
|
|
1570
1584
|
}
|
|
@@ -1575,14 +1589,14 @@ class Text extends EventEmitter {
|
|
|
1575
1589
|
const paragraph = new Paragraph(pStyle, style);
|
|
1576
1590
|
fragments.forEach((f) => {
|
|
1577
1591
|
const { content: content2, ...fStyle } = f;
|
|
1578
|
-
if (content2 !==
|
|
1592
|
+
if (content2 !== void 0) {
|
|
1579
1593
|
paragraph.addFragment(content2, fStyle);
|
|
1580
1594
|
}
|
|
1581
1595
|
});
|
|
1582
1596
|
paragraphs.push(paragraph);
|
|
1583
1597
|
} else if ("content" in p) {
|
|
1584
1598
|
const { content: pData, ...pStyle } = p;
|
|
1585
|
-
if (pData !==
|
|
1599
|
+
if (pData !== void 0) {
|
|
1586
1600
|
const paragraph = new Paragraph(pStyle, style);
|
|
1587
1601
|
paragraph.addFragment(pData);
|
|
1588
1602
|
paragraphs.push(paragraph);
|
|
@@ -1726,4 +1740,4 @@ function renderText(options, load) {
|
|
|
1726
1740
|
return text.render(options);
|
|
1727
1741
|
}
|
|
1728
1742
|
|
|
1729
|
-
export { Character, Fragment, Measurer, Paragraph, Text, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, textDefaultStyle, uploadColor, uploadColors };
|
|
1743
|
+
export { Character, Fragment, Measurer, Paragraph, Text, background, definePlugin, drawPath, filterEmpty, getHighlightStyle, getTransform2D, hexToRgb, highlight, isEqualObject, isEqualValue, isNone, listStyle, measureText, needsFetch, outline, parseColor, parseColormap, parseValueNumber, render, renderText, setupView, textDecoration, textDefaultStyle, uploadColor, uploadColors };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modern-text",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.3.0",
|
|
5
5
|
"packageManager": "pnpm@9.15.1",
|
|
6
6
|
"description": "Measure and render text in a way that describes the DOM.",
|
|
7
7
|
"author": "wxm",
|
|
@@ -58,21 +58,21 @@
|
|
|
58
58
|
},
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"modern-font": "^0.4.0",
|
|
61
|
-
"modern-idoc": "^0.
|
|
62
|
-
"modern-path2d": "^1.2.
|
|
61
|
+
"modern-idoc": "^0.2.10",
|
|
62
|
+
"modern-path2d": "^1.2.10"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
|
-
"@antfu/eslint-config": "^
|
|
66
|
-
"@types/node": "^22.10
|
|
67
|
-
"bumpp": "^
|
|
65
|
+
"@antfu/eslint-config": "^4.8.1",
|
|
66
|
+
"@types/node": "^22.13.10",
|
|
67
|
+
"bumpp": "^10.0.3",
|
|
68
68
|
"conventional-changelog-cli": "^5.0.0",
|
|
69
|
-
"eslint": "^9.
|
|
70
|
-
"lint-staged": "^15.3
|
|
69
|
+
"eslint": "^9.22.0",
|
|
70
|
+
"lint-staged": "^15.4.3",
|
|
71
71
|
"simple-git-hooks": "^2.11.1",
|
|
72
|
-
"typescript": "^5.
|
|
73
|
-
"unbuild": "^3.
|
|
74
|
-
"vite": "^6.
|
|
75
|
-
"vitest": "^
|
|
72
|
+
"typescript": "^5.8.2",
|
|
73
|
+
"unbuild": "^3.5.0",
|
|
74
|
+
"vite": "^6.2.1",
|
|
75
|
+
"vitest": "^3.0.8"
|
|
76
76
|
},
|
|
77
77
|
"simple-git-hooks": {
|
|
78
78
|
"pre-commit": "pnpm lint-staged"
|