@vectojs/core 1.35.0 → 1.35.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/dist/index.js +37 -20
- package/dist/index.mjs +37 -20
- package/dist/tree/Entity.d.ts +15 -0
- package/dist/wasm/vectojs_core.wasm +0 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6330,26 +6330,43 @@ var Scene = (_class15 = class _Scene {
|
|
|
6330
6330
|
if (mctx) {
|
|
6331
6331
|
mctx.font = lineFont;
|
|
6332
6332
|
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
6336
|
-
|
|
6337
|
-
|
|
6338
|
-
|
|
6339
|
-
|
|
6340
|
-
|
|
6341
|
-
|
|
6342
|
-
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
6348
|
-
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6352
|
-
|
|
6333
|
+
if (line.shapedPaint) {
|
|
6334
|
+
const segments = [...segmenter.segment(line.text)];
|
|
6335
|
+
let runningX = 0;
|
|
6336
|
+
for (let segIdx = 0; segIdx < segments.length; segIdx++) {
|
|
6337
|
+
const { segment, index: index2 } = segments[segIdx];
|
|
6338
|
+
const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
|
|
6339
|
+
const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
|
|
6340
|
+
const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
|
|
6341
|
+
const carrierEl = document.createElement("span");
|
|
6342
|
+
carrierEl.textContent = segment;
|
|
6343
|
+
carrierEl.style.position = "relative";
|
|
6344
|
+
carrierEl.style.display = "inline-block";
|
|
6345
|
+
carrierEl.style.left = `${canvasX - runningX}px`;
|
|
6346
|
+
carrierEl.style.width = `${canvasWidth}px`;
|
|
6347
|
+
carrierEl.style.boxSizing = "border-box";
|
|
6348
|
+
carrierEl.style.lineHeight = `${lineHeight2}px`;
|
|
6349
|
+
carrierEl.style.whiteSpace = "pre";
|
|
6350
|
+
carrierEl.style.verticalAlign = "top";
|
|
6351
|
+
carrierEl.style.unicodeBidi = "isolate";
|
|
6352
|
+
lineElement.appendChild(carrierEl);
|
|
6353
|
+
runningX += canvasWidth;
|
|
6354
|
+
}
|
|
6355
|
+
} else {
|
|
6356
|
+
for (const { segment } of segmenter.segment(line.text)) {
|
|
6357
|
+
const canvasWidth = mctx.measureText(segment).width;
|
|
6358
|
+
const carrierEl = document.createElement("span");
|
|
6359
|
+
carrierEl.textContent = segment;
|
|
6360
|
+
carrierEl.style.position = "relative";
|
|
6361
|
+
carrierEl.style.display = "inline-block";
|
|
6362
|
+
carrierEl.style.width = `${canvasWidth}px`;
|
|
6363
|
+
carrierEl.style.boxSizing = "border-box";
|
|
6364
|
+
carrierEl.style.lineHeight = `${lineHeight2}px`;
|
|
6365
|
+
carrierEl.style.whiteSpace = "pre";
|
|
6366
|
+
carrierEl.style.verticalAlign = "top";
|
|
6367
|
+
carrierEl.style.unicodeBidi = "isolate";
|
|
6368
|
+
lineElement.appendChild(carrierEl);
|
|
6369
|
+
}
|
|
6353
6370
|
}
|
|
6354
6371
|
} else {
|
|
6355
6372
|
lineElement.textContent = line.text;
|
package/dist/index.mjs
CHANGED
|
@@ -6329,26 +6329,43 @@ var Scene = class _Scene {
|
|
|
6329
6329
|
if (mctx) {
|
|
6330
6330
|
mctx.font = lineFont;
|
|
6331
6331
|
const segmenter = new Intl.Segmenter("en", { granularity: "grapheme" });
|
|
6332
|
-
|
|
6333
|
-
|
|
6334
|
-
|
|
6335
|
-
|
|
6336
|
-
|
|
6337
|
-
|
|
6338
|
-
|
|
6339
|
-
|
|
6340
|
-
|
|
6341
|
-
|
|
6342
|
-
|
|
6343
|
-
|
|
6344
|
-
|
|
6345
|
-
|
|
6346
|
-
|
|
6347
|
-
|
|
6348
|
-
|
|
6349
|
-
|
|
6350
|
-
|
|
6351
|
-
|
|
6332
|
+
if (line.shapedPaint) {
|
|
6333
|
+
const segments = [...segmenter.segment(line.text)];
|
|
6334
|
+
let runningX = 0;
|
|
6335
|
+
for (let segIdx = 0; segIdx < segments.length; segIdx++) {
|
|
6336
|
+
const { segment, index: index2 } = segments[segIdx];
|
|
6337
|
+
const nextIndex = segIdx + 1 < segments.length ? segments[segIdx + 1].index : line.text.length;
|
|
6338
|
+
const canvasX = mctx.measureText(line.text.slice(0, index2)).width;
|
|
6339
|
+
const canvasWidth = mctx.measureText(line.text.slice(0, nextIndex)).width - canvasX;
|
|
6340
|
+
const carrierEl = document.createElement("span");
|
|
6341
|
+
carrierEl.textContent = segment;
|
|
6342
|
+
carrierEl.style.position = "relative";
|
|
6343
|
+
carrierEl.style.display = "inline-block";
|
|
6344
|
+
carrierEl.style.left = `${canvasX - runningX}px`;
|
|
6345
|
+
carrierEl.style.width = `${canvasWidth}px`;
|
|
6346
|
+
carrierEl.style.boxSizing = "border-box";
|
|
6347
|
+
carrierEl.style.lineHeight = `${lineHeight2}px`;
|
|
6348
|
+
carrierEl.style.whiteSpace = "pre";
|
|
6349
|
+
carrierEl.style.verticalAlign = "top";
|
|
6350
|
+
carrierEl.style.unicodeBidi = "isolate";
|
|
6351
|
+
lineElement.appendChild(carrierEl);
|
|
6352
|
+
runningX += canvasWidth;
|
|
6353
|
+
}
|
|
6354
|
+
} else {
|
|
6355
|
+
for (const { segment } of segmenter.segment(line.text)) {
|
|
6356
|
+
const canvasWidth = mctx.measureText(segment).width;
|
|
6357
|
+
const carrierEl = document.createElement("span");
|
|
6358
|
+
carrierEl.textContent = segment;
|
|
6359
|
+
carrierEl.style.position = "relative";
|
|
6360
|
+
carrierEl.style.display = "inline-block";
|
|
6361
|
+
carrierEl.style.width = `${canvasWidth}px`;
|
|
6362
|
+
carrierEl.style.boxSizing = "border-box";
|
|
6363
|
+
carrierEl.style.lineHeight = `${lineHeight2}px`;
|
|
6364
|
+
carrierEl.style.whiteSpace = "pre";
|
|
6365
|
+
carrierEl.style.verticalAlign = "top";
|
|
6366
|
+
carrierEl.style.unicodeBidi = "isolate";
|
|
6367
|
+
lineElement.appendChild(carrierEl);
|
|
6368
|
+
}
|
|
6352
6369
|
}
|
|
6353
6370
|
} else {
|
|
6354
6371
|
lineElement.textContent = line.text;
|
package/dist/tree/Entity.d.ts
CHANGED
|
@@ -116,6 +116,21 @@ export interface ContentProjectionLine {
|
|
|
116
116
|
* hit-mapping when DOM order != visual order (PR #146 revert).
|
|
117
117
|
*/
|
|
118
118
|
perGraphemeCarriers?: boolean;
|
|
119
|
+
/**
|
|
120
|
+
* The canvas painted this line's ink as ONE shaped `fillText(line.text)`, so
|
|
121
|
+
* the ink includes the browser's kerning and ligatures. Per-grapheme
|
|
122
|
+
* carriers must then be measured as shaped PREFIX DIFFERENCES of the whole
|
|
123
|
+
* line — isolated grapheme advances would omit exactly the kerning/ligature
|
|
124
|
+
* contraction the paint applied, widening the DOM line past the ink.
|
|
125
|
+
*
|
|
126
|
+
* Leave unset for per-glyph painters (glyphs placed at summed isolated
|
|
127
|
+
* advances, e.g. RichText and TextEntity): there the ink is unkerned, and
|
|
128
|
+
* shaped prefixes would drift the carriers ahead of it by the accumulated
|
|
129
|
+
* kerning delta instead.
|
|
130
|
+
*
|
|
131
|
+
* Only meaningful alongside {@link perGraphemeCarriers}.
|
|
132
|
+
*/
|
|
133
|
+
shapedPaint?: boolean;
|
|
119
134
|
}
|
|
120
135
|
/**
|
|
121
136
|
* Advice from the {@link Scene} about which part of an entity is worth
|
|
Binary file
|