@pixldocs/canvas-renderer 0.5.102 → 0.5.104
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 +7 -19
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +7 -19
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -6267,9 +6267,10 @@ function bakeEdgeFade(source, fade) {
|
|
|
6267
6267
|
mctx.fillRect(0, 0, mask.width, mask.height);
|
|
6268
6268
|
let g;
|
|
6269
6269
|
let x = 0, y = 0, rectW = mask.width, rectH = mask.height;
|
|
6270
|
-
const STOPS =
|
|
6270
|
+
const STOPS = 64;
|
|
6271
|
+
const gamma = 1 / hardness;
|
|
6271
6272
|
const innerAlpha = (t) => {
|
|
6272
|
-
const keepProgress = Math.pow(t,
|
|
6273
|
+
const keepProgress = Math.pow(t, gamma);
|
|
6273
6274
|
const erase = (1 - amount) * (1 - keepProgress);
|
|
6274
6275
|
return 1 - erase;
|
|
6275
6276
|
};
|
|
@@ -6305,16 +6306,6 @@ function bakeEdgeFade(source, fade) {
|
|
|
6305
6306
|
}
|
|
6306
6307
|
mctx.fillStyle = g;
|
|
6307
6308
|
mctx.fillRect(x, y, rectW, rectH);
|
|
6308
|
-
if (amount <= 1e-3) {
|
|
6309
|
-
const edgePx = Math.min(2, side === "top" || side === "bottom" ? rectH : rectW);
|
|
6310
|
-
mctx.fillStyle = "rgba(0,0,0,0)";
|
|
6311
|
-
mctx.globalCompositeOperation = "copy";
|
|
6312
|
-
if (side === "top") mctx.fillRect(0, 0, mask.width, edgePx);
|
|
6313
|
-
if (side === "bottom") mctx.fillRect(0, mask.height - edgePx, mask.width, edgePx);
|
|
6314
|
-
if (side === "left") mctx.fillRect(0, 0, edgePx, mask.height);
|
|
6315
|
-
if (side === "right") mctx.fillRect(mask.width - edgePx, 0, edgePx, mask.height);
|
|
6316
|
-
mctx.globalCompositeOperation = "source-over";
|
|
6317
|
-
}
|
|
6318
6309
|
ctx.globalCompositeOperation = "destination-in";
|
|
6319
6310
|
ctx.drawImage(mask, 0, 0);
|
|
6320
6311
|
ctx.globalCompositeOperation = "source-over";
|
|
@@ -9729,11 +9720,12 @@ const PageCanvas = react.forwardRef(
|
|
|
9729
9720
|
ctx.globalCompositeOperation = "destination-out";
|
|
9730
9721
|
let gradient;
|
|
9731
9722
|
const eraseAtEdge = 1 - amount;
|
|
9732
|
-
const STOPS =
|
|
9723
|
+
const STOPS = 64;
|
|
9724
|
+
const gamma = 1 / hardness;
|
|
9733
9725
|
const addStops = (g) => {
|
|
9734
9726
|
for (let i = 0; i <= STOPS; i++) {
|
|
9735
9727
|
const t = i / STOPS;
|
|
9736
|
-
const keepProgress = Math.pow(t,
|
|
9728
|
+
const keepProgress = Math.pow(t, gamma);
|
|
9737
9729
|
const a = eraseAtEdge * (1 - keepProgress);
|
|
9738
9730
|
g.addColorStop(t, `rgba(0,0,0,${a})`);
|
|
9739
9731
|
}
|
|
@@ -9744,28 +9736,24 @@ const PageCanvas = react.forwardRef(
|
|
|
9744
9736
|
addStops(gradient);
|
|
9745
9737
|
ctx.fillStyle = gradient;
|
|
9746
9738
|
ctx.fillRect(x, y, w, band);
|
|
9747
|
-
if (amount <= 1e-3) ctx.fillRect(x, y, w, Math.min(2, band));
|
|
9748
9739
|
} else if (side === "bottom") {
|
|
9749
9740
|
const band = Math.max(1, h * size);
|
|
9750
9741
|
gradient = ctx.createLinearGradient(0, y + h, 0, y + h - band);
|
|
9751
9742
|
addStops(gradient);
|
|
9752
9743
|
ctx.fillStyle = gradient;
|
|
9753
9744
|
ctx.fillRect(x, y + h - band, w, band);
|
|
9754
|
-
if (amount <= 1e-3) ctx.fillRect(x, y + h - Math.min(2, band), w, Math.min(2, band));
|
|
9755
9745
|
} else if (side === "left") {
|
|
9756
9746
|
const band = Math.max(1, w * size);
|
|
9757
9747
|
gradient = ctx.createLinearGradient(x, 0, x + band, 0);
|
|
9758
9748
|
addStops(gradient);
|
|
9759
9749
|
ctx.fillStyle = gradient;
|
|
9760
9750
|
ctx.fillRect(x, y, band, h);
|
|
9761
|
-
if (amount <= 1e-3) ctx.fillRect(x, y, Math.min(2, band), h);
|
|
9762
9751
|
} else {
|
|
9763
9752
|
const band = Math.max(1, w * size);
|
|
9764
9753
|
gradient = ctx.createLinearGradient(x + w, 0, x + w - band, 0);
|
|
9765
9754
|
addStops(gradient);
|
|
9766
9755
|
ctx.fillStyle = gradient;
|
|
9767
9756
|
ctx.fillRect(x + w - band, y, band, h);
|
|
9768
|
-
if (amount <= 1e-3) ctx.fillRect(x + w - Math.min(2, band), y, Math.min(2, band), h);
|
|
9769
9757
|
}
|
|
9770
9758
|
ctx.restore();
|
|
9771
9759
|
};
|
|
@@ -13435,7 +13423,7 @@ function PixldocsPreview(props) {
|
|
|
13435
13423
|
!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..." }) })
|
|
13436
13424
|
] });
|
|
13437
13425
|
}
|
|
13438
|
-
const PACKAGE_VERSION = "0.5.
|
|
13426
|
+
const PACKAGE_VERSION = "0.5.104";
|
|
13439
13427
|
const roundParityValue = (value) => {
|
|
13440
13428
|
if (typeof value !== "number") return value;
|
|
13441
13429
|
return Number.isFinite(value) ? Number(value.toFixed(3)) : value;
|