Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 | 1x 1x 1x 69x 69x 69x 69x 69x 69x 69x 69x 68x 1x 69x 69x 69x 69x 69x 69x 1x 1x 68x 68x 69x 69x 12x 12x 12x 12x 69x 63x 62x 62x 13x 13x 13x 13x 13x 13x 13x 40x 10x 33x 13x 13x 13x 1x 13x 13x 1x 13x 13x 2x 2x 2x 2x 1x 11x 20x 20x 59x 59x 59x 59x 59x 59x 59x 5x 5x 5x 59x 59x 59x 59x 39x 39x 39x 39x 2x 2x 2x 2x | import { toast } from "./toast.js";
import { errorText } from "./reporting.js";
/** Steps the drawing buffer grows in, as a multiple of the base canvas size. */
const CanvasScaleStep = 0.25;
/** Below this width the side pictures are not worth a border; the monitor takes the whole width. */
const NarrowWindow = 700;
/** Clearance between the monitor and the LED panel below it. */
const LedPanelGap = 10;
/**
* Where everything goes for a given window: the monitor picture, the canvas
* within it, and (for a mode with maxCanvasScale) how large a drawing buffer
* to ask for. Pure, so the geometry is testable on its own.
*/
export function fitMonitor(displayConfig, viewport, canvasNative) {
const imageOrigHeight = displayConfig.imageHeight;
const imageOrigWidth = displayConfig.imageWidth;
const desiredAspectRatio = imageOrigWidth / imageOrigHeight;
const minWidth = imageOrigWidth / 4;
const minHeight = imageOrigHeight / 4;
let width = Math.max(minWidth, viewport.innerWidth - viewport.borderReservedSize * 2);
let height = Math.max(minHeight, viewport.innerHeight - viewport.navbarHeight - viewport.bottomReservedSize);
if (width / height <= desiredAspectRatio) {
height = width / desiredAspectRatio;
} else {
width = height * desiredAspectRatio;
}
const containerScale = width / imageOrigWidth;
const scaledVisibleWidth = displayConfig.visibleWidth * containerScale;
const scaledVisibleHeight = displayConfig.visibleHeight * containerScale;
const canvasAspect = canvasNative.width / canvasNative.height;
const visibleAspect = scaledVisibleWidth / scaledVisibleHeight;
let finalCanvasWidth, finalCanvasHeight;
if (canvasAspect > visibleAspect) {
finalCanvasWidth = scaledVisibleWidth;
finalCanvasHeight = scaledVisibleWidth / canvasAspect;
} else {
finalCanvasHeight = scaledVisibleHeight;
finalCanvasWidth = scaledVisibleHeight * canvasAspect;
}
// A mode that reconstructs detail wants to draw at the size it will be
// seen at, up to the limit it asks for. Drawing more than the display
// can show costs fragments and buys nothing, and for an expensive
// shader that is the difference between comfortable and not.
let backing = null;
if (displayConfig.maxCanvasScale) {
const wanted = (finalCanvasWidth * viewport.devicePixelRatio) / displayConfig.canvasWidth;
// Quantised, because resize fires continuously while a window is
// dragged and every distinct value reallocates the drawing buffer.
const quantised = Math.round(wanted / CanvasScaleStep) * CanvasScaleStep;
const scale = Math.min(displayConfig.maxCanvasScale, Math.max(1, quantised));
backing = {
width: Math.round(displayConfig.canvasWidth * scale),
height: Math.round(displayConfig.canvasHeight * scale),
};
}
return {
monitor: { width, height },
canvas: {
width: finalCanvasWidth,
height: finalCanvasHeight,
left: displayConfig.canvasLeft * containerScale,
top: displayConfig.canvasTop * containerScale,
},
backing,
};
}
/**
* The height the bar takes from the screen: on a narrow window its menu drops open over the
* screen rather than above it, so an open menu does not count.
*/
export function navbarHeightOf(header) {
if (!header) return 0;
const openMenu = header.querySelector(".navbar-collapse.show");
return Math.max(0, header.offsetHeight - (openMenu?.offsetHeight ?? 0));
}
/** Keeps the monitor and canvas fitted to the window, and wires the page furniture around them. */
export class Layout {
constructor({ screenCanvas, display, embed, sidebars = {} }) {
this.screenCanvas = screenCanvas;
this.display = display;
this.cubMonitor = document.getElementById("cub-monitor");
this.cubMonitorPic = document.getElementById("cub-monitor-pic");
this.borderReservedSize = embed ? 0 : 100;
this.bottomReservedSize = embed ? 0 : 68;
if (embed) {
for (const el of document.querySelectorAll(".embed-hide")) el.style.display = "none";
document.body.style.backgroundColor = "transparent";
}
window.addEventListener("resize", () => this.resize());
window.setTimeout(() => this.resize(), 1);
window.setTimeout(() => this.resize(), 500);
this.bindSidebar(".sidebar.left", sidebars.left, (div, img) => {
div.style.left = -img.naturalWidth - 5 + "px";
});
this.bindSidebar(".sidebar.right", sidebars.right, (div, img) => {
div.style.right = -img.naturalWidth - 5 + "px";
});
this.bindSidebar(".sidebar.bottom", sidebars.bottom, (div, img) => {
div.style.bottom = -img.naturalHeight + "px";
});
const fullscreenItem = document.getElementById("fs");
if (document.fullscreenEnabled) {
fullscreenItem.addEventListener("click", async (event) => {
event.preventDefault();
try {
await screenCanvas.requestFullscreen();
} catch (error) {
toast(`Could not go fullscreen: ${errorText(error)}`, { title: "Fullscreen" });
}
});
} else {
fullscreenItem.closest("li").hidden = true;
}
}
/** What the LED panel needs below the monitor: its own height, which its layout decides. */
ledPanelRoom() {
const panel = document.getElementById("leds");
return Math.max(this.bottomReservedSize, (panel?.offsetHeight ?? 0) + LedPanelGap);
}
resize() {
// The display config can change when the display mode switches.
const displayConfig = this.display.filterClass.getDisplayConfig();
const fitted = fitMonitor(
displayConfig,
{
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
navbarHeight: navbarHeightOf(document.getElementById("header-bar")),
borderReservedSize: window.innerWidth <= NarrowWindow ? 0 : this.borderReservedSize,
bottomReservedSize: this.bottomReservedSize && this.ledPanelRoom(),
devicePixelRatio: window.devicePixelRatio || 1,
},
{ width: this.screenCanvas.getAttribute("width"), height: this.screenCanvas.getAttribute("height") },
);
this.cubMonitor.style.height = fitted.monitor.height + "px";
this.cubMonitor.style.width = fitted.monitor.width + "px";
this.cubMonitorPic.style.height = fitted.monitor.height + "px";
this.cubMonitorPic.style.width = fitted.monitor.width + "px";
if (fitted.backing && this.screenCanvas.width !== fitted.backing.width) {
this.screenCanvas.width = fitted.backing.width;
this.screenCanvas.height = fitted.backing.height;
// Resizing threw the drawing buffer away.
this.display.video.paint();
}
this.screenCanvas.style.width = fitted.canvas.width + "px";
this.screenCanvas.style.height = fitted.canvas.height + "px";
this.screenCanvas.style.left = fitted.canvas.left + "px";
this.screenCanvas.style.top = fitted.canvas.top + "px";
}
bindSidebar(selector, url, onload) {
const div = document.querySelector(selector);
const img = div.querySelector("img");
img.style.display = "none";
if (!url) return;
img.addEventListener("load", () => {
onload(div, img);
img.style.display = "";
});
img.src = url;
}
}
|