@pixldocs/canvas-renderer 0.5.62 → 0.5.64
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 +8 -61
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -2
- package/dist/index.js +8 -61
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -12561,7 +12561,7 @@ function PixldocsPreview(props) {
|
|
|
12561
12561
|
!canvasSettled && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
|
|
12562
12562
|
] });
|
|
12563
12563
|
}
|
|
12564
|
-
const PACKAGE_VERSION = "0.5.
|
|
12564
|
+
const PACKAGE_VERSION = "0.5.64";
|
|
12565
12565
|
let __underlineFixInstalled = false;
|
|
12566
12566
|
function installUnderlineFix(fab) {
|
|
12567
12567
|
var _a;
|
|
@@ -13288,10 +13288,11 @@ class PixldocsRenderer {
|
|
|
13288
13288
|
cleanup();
|
|
13289
13289
|
reject(new Error("SVG render timeout (30s)"));
|
|
13290
13290
|
}, 3e4);
|
|
13291
|
+
let root = null;
|
|
13291
13292
|
const cleanup = () => {
|
|
13292
13293
|
clearTimeout(timeout);
|
|
13293
13294
|
try {
|
|
13294
|
-
root.unmount();
|
|
13295
|
+
root == null ? void 0 : root.unmount();
|
|
13295
13296
|
} catch {
|
|
13296
13297
|
}
|
|
13297
13298
|
container.remove();
|
|
@@ -13300,16 +13301,16 @@ class PixldocsRenderer {
|
|
|
13300
13301
|
this.waitForCanvasScene(container, config, pageIndex).then(async () => {
|
|
13301
13302
|
var _a, _b;
|
|
13302
13303
|
try {
|
|
13304
|
+
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
13305
|
+
await this.waitForCanvasImages(container, expectedImageCount);
|
|
13306
|
+
await this.waitForStableTextMetrics(container, config);
|
|
13307
|
+
await this.waitForCanvasScene(container, config, pageIndex);
|
|
13303
13308
|
const fabricInstance = this.getFabricCanvasFromContainer(container);
|
|
13304
13309
|
if (!fabricInstance) {
|
|
13305
13310
|
cleanup();
|
|
13306
13311
|
reject(new Error("No Fabric canvas instance found for SVG capture"));
|
|
13307
13312
|
return;
|
|
13308
13313
|
}
|
|
13309
|
-
const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
|
|
13310
|
-
await this.waitForCanvasImages(container, expectedImageCount);
|
|
13311
|
-
await this.waitForStableTextMetrics(container, config);
|
|
13312
|
-
await this.waitForCanvasScene(container, config, pageIndex);
|
|
13313
13314
|
const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
|
|
13314
13315
|
const prevSvgVPT = fabricInstance.svgViewportTransformation;
|
|
13315
13316
|
const prevRetina = fabricInstance.enableRetinaScaling;
|
|
@@ -13322,7 +13323,6 @@ class PixldocsRenderer {
|
|
|
13322
13323
|
{ width: canvasWidth, height: canvasHeight },
|
|
13323
13324
|
{ cssOnly: false, backstoreOnly: false }
|
|
13324
13325
|
);
|
|
13325
|
-
this.resyncTextMetricsForSvgExport(fabricInstance);
|
|
13326
13326
|
const rawSvgString = fabricInstance.toSVG();
|
|
13327
13327
|
const svgString = this.normalizeSvgDimensions(
|
|
13328
13328
|
rawSvgString,
|
|
@@ -13353,7 +13353,7 @@ class PixldocsRenderer {
|
|
|
13353
13353
|
}
|
|
13354
13354
|
});
|
|
13355
13355
|
};
|
|
13356
|
-
|
|
13356
|
+
root = client.createRoot(container);
|
|
13357
13357
|
root.render(
|
|
13358
13358
|
react.createElement(PreviewCanvas2, {
|
|
13359
13359
|
config,
|
|
@@ -13433,59 +13433,6 @@ class PixldocsRenderer {
|
|
|
13433
13433
|
}
|
|
13434
13434
|
return null;
|
|
13435
13435
|
}
|
|
13436
|
-
resyncTextMetricsForSvgExport(fabricInstance) {
|
|
13437
|
-
if (typeof document === "undefined" || !(fabricInstance == null ? void 0 : fabricInstance.getObjects)) return;
|
|
13438
|
-
const ctx = document.createElement("canvas").getContext("2d");
|
|
13439
|
-
if (!ctx) return;
|
|
13440
|
-
const syncTextbox = (textbox) => {
|
|
13441
|
-
const tb = textbox;
|
|
13442
|
-
const rawLines = tb._textLines ?? textbox.textLines ?? [];
|
|
13443
|
-
if (!Array.isArray(rawLines) || rawLines.length === 0) return;
|
|
13444
|
-
const nextCharBounds = [];
|
|
13445
|
-
const nextLineWidths = [];
|
|
13446
|
-
rawLines.forEach((rawLine, lineIndex) => {
|
|
13447
|
-
const graphemes = Array.isArray(rawLine) ? rawLine.map((part) => String(part ?? "")) : Array.from(String(rawLine ?? ""));
|
|
13448
|
-
const bounds = [];
|
|
13449
|
-
let left = 0;
|
|
13450
|
-
graphemes.forEach((grapheme, charIndex) => {
|
|
13451
|
-
var _a, _b, _c, _d, _e, _f;
|
|
13452
|
-
const fontSize = Number(((_a = tb.getValueOfPropertyAt) == null ? void 0 : _a.call(tb, lineIndex, charIndex, "fontSize")) ?? textbox.fontSize ?? 16);
|
|
13453
|
-
const fontStyle = String(((_b = tb.getValueOfPropertyAt) == null ? void 0 : _b.call(tb, lineIndex, charIndex, "fontStyle")) ?? textbox.fontStyle ?? "normal");
|
|
13454
|
-
const fontWeight = String(((_c = tb.getValueOfPropertyAt) == null ? void 0 : _c.call(tb, lineIndex, charIndex, "fontWeight")) ?? textbox.fontWeight ?? "400");
|
|
13455
|
-
const fontFamily = String(((_d = tb.getValueOfPropertyAt) == null ? void 0 : _d.call(tb, lineIndex, charIndex, "fontFamily")) ?? textbox.fontFamily ?? "sans-serif");
|
|
13456
|
-
const charSpacing = Number(((_e = tb.getValueOfPropertyAt) == null ? void 0 : _e.call(tb, lineIndex, charIndex, "charSpacing")) ?? textbox.charSpacing ?? 0);
|
|
13457
|
-
const deltaY = Number(((_f = tb.getValueOfPropertyAt) == null ? void 0 : _f.call(tb, lineIndex, charIndex, "deltaY")) ?? 0);
|
|
13458
|
-
ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px ${fontFamily}`;
|
|
13459
|
-
const charWidth = Math.max(0, ctx.measureText(grapheme).width);
|
|
13460
|
-
let kernedWidth = charWidth;
|
|
13461
|
-
const previous = charIndex > 0 ? graphemes[charIndex - 1] : "";
|
|
13462
|
-
if (previous) {
|
|
13463
|
-
const pairWidth = ctx.measureText(previous + grapheme).width;
|
|
13464
|
-
const previousWidth = ctx.measureText(previous).width;
|
|
13465
|
-
if (Number.isFinite(pairWidth) && Number.isFinite(previousWidth)) {
|
|
13466
|
-
kernedWidth = Math.max(0, pairWidth - previousWidth);
|
|
13467
|
-
}
|
|
13468
|
-
}
|
|
13469
|
-
if (charIndex < graphemes.length - 1 && charSpacing) {
|
|
13470
|
-
kernedWidth += charSpacing / 1e3 * fontSize;
|
|
13471
|
-
}
|
|
13472
|
-
bounds[charIndex] = { left, width: charWidth, kernedWidth, height: fontSize, deltaY };
|
|
13473
|
-
left += kernedWidth;
|
|
13474
|
-
});
|
|
13475
|
-
bounds[graphemes.length] = { left, width: 0, kernedWidth: 0, height: Number(textbox.fontSize ?? 16), deltaY: 0 };
|
|
13476
|
-
nextCharBounds[lineIndex] = bounds;
|
|
13477
|
-
nextLineWidths[lineIndex] = Math.max(0, left);
|
|
13478
|
-
});
|
|
13479
|
-
tb.__charBounds = nextCharBounds;
|
|
13480
|
-
tb.__lineWidths = nextLineWidths;
|
|
13481
|
-
textbox.dirty = true;
|
|
13482
|
-
};
|
|
13483
|
-
const visit = (obj) => {
|
|
13484
|
-
if (obj instanceof fabric__namespace.Textbox) syncTextbox(obj);
|
|
13485
|
-
else if (obj instanceof fabric__namespace.Group) obj.getObjects().forEach(visit);
|
|
13486
|
-
};
|
|
13487
|
-
fabricInstance.getObjects().forEach(visit);
|
|
13488
|
-
}
|
|
13489
13436
|
async waitForStableTextMetrics(container, config) {
|
|
13490
13437
|
var _a, _b, _c;
|
|
13491
13438
|
if (typeof document !== "undefined") {
|