Marmelator/pdf.js.mirror
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2026-04-09 23:04:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

(Debugger) Don't draw the checkerboard on the canvas but add it behind

Browse Source
This commit is contained in:
calixteman 2026-03-15 23:20:02 +01:00
parent 1192e5e921
commit fc286aac4e
No known key found for this signature in database
GPG Key ID: 0C5442631EE0691F
4 changed files with 19 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
web/internal/canvas_context_details_view.js
View File

@ -62,56 +62,6 @@ const COLOR_CTX_PROPS = new Set(["fillStyle", "shadowColor", "strokeStyle"]);
const MATHML_NS = "http://www.w3.org/1998/Math/MathML";
// Cached media queries used by drawCheckerboard.
const _prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
const _prefersHCM = window.matchMedia("(forced-colors: active)");
/**
* Draw a checkerboard pattern filling the canvas, to reveal transparency.
* Mirrors the pattern used in src/display/editor/stamp.js.
*/
function drawCheckerboard(ctx, width, height) {
const isHCM = _prefersHCM.matches;
const isDark = _prefersDark.matches;
let light, dark;
if (isHCM) {
light = "white";
dark = "black";
} else if (isDark) {
light = "#8f8f9d";
dark = "#42414d";
} else {
light = "white";
dark = "#cfcfd8";
}
const boxDim = 15;
const pattern =
typeof OffscreenCanvas !== "undefined"
? new OffscreenCanvas(boxDim * 2, boxDim * 2)
: Object.assign(document.createElement("canvas"), {
width: boxDim * 2,
height: boxDim * 2,
});
const patternCtx = pattern.getContext("2d");
if (!patternCtx) {
return;
}
patternCtx.fillStyle = light;
patternCtx.fillRect(0, 0, boxDim * 2, boxDim * 2);
patternCtx.fillStyle = dark;
patternCtx.fillRect(0, 0, boxDim, boxDim);
patternCtx.fillRect(boxDim, boxDim, boxDim, boxDim);
ctx.save();
const fillPattern = ctx.createPattern(pattern, "repeat");
if (!fillPattern) {
ctx.restore();
return;
}
ctx.fillStyle = fillPattern;
ctx.fillRect(0, 0, width, height);
ctx.restore();
}
/**
* Tracks and displays the CanvasRenderingContext2D graphics state for all
* contexts created during a stepped render.
@ -240,12 +190,6 @@ class CanvasContextDetailsView {
return ctx;
}
if (!wrappedCtx) {
if (
globalThis.StepperManager._active !== null &&
args[0]?.alpha !== false
) {
drawCheckerboard(ctx, canvas.width, canvas.height);
}
wrappedCtx = this.wrapContext(ctx, label);
}
return wrappedCtx;

4
web/internal/debugger.html
View File

@ -66,7 +66,9 @@ limitations under the License.
</div>
<div id="canvas-scroll">
<div id="canvas-wrapper">
<canvas id="render-canvas"></canvas>
<div class="canvas-checker">
<canvas id="render-canvas"></canvas>
</div>
<canvas id="highlight-canvas" aria-hidden="true"></canvas>
</div>
</div>

13
web/internal/page_view.css
View File

@ -124,7 +124,18 @@
color: var(--muted-color);
font-style: italic;
}
.temp-canvas-wrapper canvas {
.canvas-checker {
display: inline-block;
line-height: 0;
background-image: conic-gradient(
light-dark(#cfcfd8, #42414d) 25%,
light-dark(white, #8f8f9d) 25% 50%,
light-dark(#cfcfd8, #42414d) 50% 75%,
light-dark(white, #8f8f9d) 75%
);
background-size: 30px 30px;
}
.temp-canvas-wrapper .canvas-checker {
border: 1px solid var(--border-subtle-color);
zoom: calc(1 / var(--dpr, 1));
}

5
web/internal/page_view.js
View File

@ -297,7 +297,10 @@ class PageView {
const labelEl = document.createElement("div");
labelEl.className = "temp-canvas-label";
labelEl.textContent = `${ctxLabel} — ${width}×${height}`;
wrapper.append(labelEl, canvasAndCtx.canvas);
const checker = document.createElement("div");
checker.className = "canvas-checker";
checker.append(canvasAndCtx.canvas);
wrapper.append(labelEl, checker);
const entry = { canvasAndCtx, wrapper, labelEl };
this.#alive.push(entry);
this.#attachWrapper(entry);