@pixldocs/canvas-renderer 0.3.22 → 0.3.24
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 +23 -3
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +23 -3
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -11057,6 +11057,14 @@ class PixldocsRenderer {
|
|
|
11057
11057
|
});
|
|
11058
11058
|
}
|
|
11059
11059
|
// ─── Internal: capture SVG from a rendered Fabric canvas ───
|
|
11060
|
+
//
|
|
11061
|
+
// APPROACH: Use the SAME PreviewCanvas that renders perfect PNGs, then call
|
|
11062
|
+
// Fabric's toSVG() on that canvas. This guarantees 100% layout parity —
|
|
11063
|
+
// the SVG is a vector snapshot of exactly what's on screen.
|
|
11064
|
+
//
|
|
11065
|
+
// The trick: before calling toSVG(), we temporarily neutralize the viewport
|
|
11066
|
+
// transform and retina scaling so Fabric emits coordinates in logical
|
|
11067
|
+
// document space (e.g. 612x792) instead of inflated pixel space.
|
|
11060
11068
|
captureSvgViaPreviewCanvas(config, pageIndex, canvasWidth, canvasHeight) {
|
|
11061
11069
|
return new Promise(async (resolve, reject) => {
|
|
11062
11070
|
const { PreviewCanvas: PreviewCanvas2 } = await Promise.resolve().then(() => PreviewCanvas$1);
|
|
@@ -11092,10 +11100,22 @@ class PixldocsRenderer {
|
|
|
11092
11100
|
}
|
|
11093
11101
|
const prevVPT = fabricInstance.viewportTransform ? [...fabricInstance.viewportTransform] : void 0;
|
|
11094
11102
|
const prevSvgVPT = fabricInstance.svgViewportTransformation;
|
|
11103
|
+
const prevRetina = fabricInstance.enableRetinaScaling;
|
|
11104
|
+
const prevWidth = fabricInstance.width;
|
|
11105
|
+
const prevHeight = fabricInstance.height;
|
|
11095
11106
|
fabricInstance.viewportTransform = [1, 0, 0, 1, 0, 0];
|
|
11096
11107
|
fabricInstance.svgViewportTransformation = false;
|
|
11097
|
-
|
|
11098
|
-
|
|
11108
|
+
fabricInstance.enableRetinaScaling = false;
|
|
11109
|
+
fabricInstance.setDimensions(
|
|
11110
|
+
{ width: canvasWidth, height: canvasHeight },
|
|
11111
|
+
{ cssOnly: false, backstoreOnly: false }
|
|
11112
|
+
);
|
|
11113
|
+
const svgString = fabricInstance.toSVG();
|
|
11114
|
+
fabricInstance.enableRetinaScaling = prevRetina;
|
|
11115
|
+
fabricInstance.setDimensions(
|
|
11116
|
+
{ width: prevWidth, height: prevHeight },
|
|
11117
|
+
{ cssOnly: false, backstoreOnly: false }
|
|
11118
|
+
);
|
|
11099
11119
|
if (prevVPT) fabricInstance.viewportTransform = prevVPT;
|
|
11100
11120
|
fabricInstance.svgViewportTransformation = prevSvgVPT;
|
|
11101
11121
|
const page = config.pages[pageIndex];
|
|
@@ -11121,7 +11141,7 @@ class PixldocsRenderer {
|
|
|
11121
11141
|
config,
|
|
11122
11142
|
pageIndex,
|
|
11123
11143
|
zoom: 1,
|
|
11124
|
-
// 1:1 — no scaling for SVG capture
|
|
11144
|
+
// 1:1 — no UI scaling for SVG capture
|
|
11125
11145
|
absoluteZoom: true,
|
|
11126
11146
|
onReady
|
|
11127
11147
|
})
|