Improve screenshots

Now renders shapes and optionally wires layer.
The screenshot dialog box gets two options:
Whether or not to show the wires layer,
and the pixel width of each tile.
The bug where onscreen buildings are not rendered is fixed.

src/js/game/hud/parts/screenshot_exporter.js

@@ -8,6 +8,8 @@ import { T } from "../../../translations";
 import { StaticMapEntityComponent } from "../../components/static_map_entity";
 import { KEYMAPPINGS } from "../../key_action_mapper";
 import { BaseHUDPart } from "../base_hud_part";
+import { DialogWithForm } from "../../../core/modal_dialog_elements";
+import { FormElementInput, FormElementCheckbox } from "../../../core/modal_dialog_forms";
 
 const logger = createLogger("screenshot_exporter");
 
@@ -24,15 +26,34 @@ export class HUDScreenshotExporter extends BaseHUDPart {
             return;
         }
 
-        const { ok } = this.root.hud.parts.dialogs.showInfo(
+        const layerInput = new FormElementCheckbox({
-            T.dialogs.exportScreenshotWarning.title,
+            id: "screenshotLayer",
-            T.dialogs.exportScreenshotWarning.desc,
+            label: "Include wires layer",
-            ["cancel:good", "ok:bad"]
+            defaultValue: this.root.currentLayer === "wires" ? true : false,
+        });
+        const qualityInput = new FormElementInput({
+            id: "screenshotQuality",
+            label: "Pixel width per tile",
+            placeholder: "",
+            defaultValue: "",
+            validator: val => !isNaN(val) && parseInt(val) === parseFloat(val) && !isNaN(parseInt(val, 10)),
+        });
+        const dialog = new DialogWithForm({
+            app: this.root.app,
+            title: T.dialogs.exportScreenshotWarning.title,
+            desc: T.dialogs.exportScreenshotWarning.desc,
+            formElements: [layerInput, qualityInput],
+            buttons: ["cancel:good", "ok:bad"],
+        });
+
+        this.root.hud.parts.dialogs.internalShowDialog(dialog);
+        dialog.buttonSignals.ok.add(
+            () => this.doExport(layerInput.getValue(), qualityInput.getValue()),
+            this
         );
-        ok.add(this.doExport, this);
     }
 
-    doExport() {
+    doExport(wiresLayer, quality) {
         logger.log("Starting export ...");
 
         // Find extends
@@ -55,11 +76,11 @@ export class HUDScreenshotExporter extends BaseHUDPart {
         const dimensions = maxChunk.sub(minChunk);
         logger.log("Dimensions:", dimensions);
 
-        let chunkSizePixels = 128;
+        let chunkSizePixels = quality * globalConfig.mapChunkSize;
         const maxDimensions = Math.max(dimensions.x, dimensions.y);
 
         if (maxDimensions > 128) {
-            chunkSizePixels = Math.max(1, Math.floor(128 * (128 / maxDimensions)));
+            chunkSizePixels = Math.max(1, Math.floor(chunkSizePixels * (128 / maxDimensions)));
         }
         logger.log("ChunkSizePixels:", chunkSizePixels);
 
@@ -96,8 +117,15 @@ export class HUDScreenshotExporter extends BaseHUDPart {
         context.translate(-visibleRect.x, -visibleRect.y);
 
         // Render all relevant chunks
+        this.root.signals.gameFrameStarted.dispatch();
         this.root.map.drawBackground(parameters);
+        this.root.systemMgr.systems.belt.drawBeltItems(parameters);
         this.root.map.drawForeground(parameters);
+        this.root.systemMgr.systems.hub.draw(parameters);
+        if (wiresLayer) {
+            this.root.hud.parts.wiresOverlay.draw(parameters, true);
+            this.root.map.drawWiresForegroundLayer(parameters);
+        }
 
         // Offer export
         logger.log("Rendered buffer, exporting ...");

src/js/game/hud/parts/wires_overlay.js

@@ -114,9 +114,10 @@ export class HUDWiresOverlay extends BaseHUDPart {
     /**
      *
      * @param {DrawParameters} parameters
+     * @param {boolean=} forced
      */
-    draw(parameters) {
+    draw(parameters, forced = false) {
-        if (this.currentAlpha < 0.02) {
+        if (!forced && this.currentAlpha < 0.02) {
             return;
         }
 
@@ -127,7 +128,7 @@ export class HUDWiresOverlay extends BaseHUDPart {
 
         const bounds = parameters.visibleRect;
 
-        parameters.context.globalAlpha = this.currentAlpha;
+        parameters.context.globalAlpha = forced ? 1 : this.currentAlpha;
 
         const scaleFactor = 1 / wiresBackgroundDpi;
         parameters.context.globalCompositeOperation = "overlay";