Fix large preview screenshots being half missing

Author: SuperLlama88888

src/HoloPrint.js

@@ -52,9 +52,10 @@ const HOLOGRAM_LAYER_MODES = createNumericEnum(["SINGLE", "ALL_BELOW"]);
  * @param {HoloPrintConfig} [config]
  * @param {ResourcePackStack} [resourcePackStack]
  * @param {HTMLElement} [previewCont]
+ * @param {Function} [previewLoadedCallback] A function that will be called once the preview has finished loading
  * @returns {Promise<File>} Resource pack (`*.mcpack`)
  */
-export async function makePack(structureFiles, config = {}, resourcePackStack, previewCont) {
+export async function makePack(structureFiles, config = {}, resourcePackStack, previewCont, previewLoadedCallback) {
 	console.info(`Running HoloPrint ${VERSION}`);
 	if(!resourcePackStack) {
 		console.debug("Waiting for resource pack stack initialisation...");
@@ -491,14 +492,15 @@ export async function makePack(structureFiles, config = {}, resourcePackStack, p
 	console.info(`Finished creating pack in ${(performance.now() - startTime).toFixed(0) / 1000}s!`);
 
 	if(previewCont) {
-		let showPreview = () => {
-			hologramGeo["minecraft:geometry"].filter(geo => geo["description"]["identifier"].startsWith("geometry.armor_stand.hologram_")).map((geo, structureI) => {
-				PreviewRenderer.new(previewCont, packName, textureAtlas, structureSizes[structureI], blockPalette, boneTemplatePalette, allStructureIndicesByLayer[structureI], {
+		let showPreview = async () => {
+			await Promise.all(structureSizes.map(async (structureSize, structureI) => {
+				await PreviewRenderer.new(previewCont, packName, textureAtlas, structureSize, blockPalette, boneTemplatePalette, allStructureIndicesByLayer[structureI], {
 					showSkybox: config.SHOW_PREVIEW_SKYBOX,
 					showFps: config.SHOW_PREVIEW_WIDGETS,
 					showOptions: config.SHOW_PREVIEW_WIDGETS
 				});
-			});
+			}));
+			previewLoadedCallback?.();
 		};
 		if(totalBlockCount < config.PREVIEW_BLOCK_LIMIT) {
 			showPreview();

src/PreviewRenderer.js

@@ -187,7 +187,6 @@ export default class PreviewRenderer extends AsyncFactory {
 		});
 
 		this.#addLighting();
-		this.#initBackground();
 		await this.#initBackground();
 		this.#loop();
 		loadingMessage.replaceWith(can);

src/index.css

@@ -427,6 +427,7 @@ img:not(#languageSelectorButton), canvas {
 	padding: 0;
 	contain: layout;
 	text-align: center;
+	width: min(80vmin, 100%);
 
 	& > .previewMessage, & > canvas {
 		width: min(80vmin, 100%);

tests/testSampleStructures.js

@@ -41,13 +41,17 @@ test(async page => {
 				let structureFile = new File([bytes], structureFileName);
 				let previewCont = document.querySelector("#previewCont");
 				let startTime = performance.now();
+				let { promise: previewLoadedPromise, resolve: previewLoadedTrigger } = Promise.withResolvers();
 				let pack = await HoloPrint.makePack(structureFile, {
 					SPAWN_ANIMATION_ENABLED: false,
 					PREVIEW_BLOCK_LIMIT: browserEngine == "chrome"? Infinity : 0, // preview renderer doesn't work on headless Firefox
 					SHOW_PREVIEW_SKYBOX: false,
 					SHOW_PREVIEW_WIDGETS: false
-				}, undefined, previewCont);
+				}, undefined, previewCont, previewLoadedTrigger);
 				let elapsedTime = performance.now() - startTime;
+				if(browserEngine == "chrome") {
+					await previewLoadedPromise;
+				}
 
 				await fetch("/", {
 					method: "POST",