mirror of
https://github.com/tobspr/shapez.io.git
synced 2025-06-13 13:04:03 +00:00
align checkboxes, add transparent background
This commit is contained in:
parent
1dae08552b
commit
50f22ab5de
@ -226,6 +226,18 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.checkBoxGridFormElem {
|
||||||
|
display: inline-grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
@include S(margin, 10px, 0);
|
||||||
|
@include S(grid-row-gap, 10px);
|
||||||
|
|
||||||
|
> .checkBoxFormElem {
|
||||||
|
margin: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.enum {
|
.enum {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: auto 1fr auto;
|
grid-template-columns: auto 1fr auto;
|
||||||
|
@ -140,7 +140,7 @@ export class FormElementCheckbox extends FormElement {
|
|||||||
getHtml() {
|
getHtml() {
|
||||||
return `
|
return `
|
||||||
<div class="formElement checkBoxFormElem">
|
<div class="formElement checkBoxFormElem">
|
||||||
${this.label ? `<label>${this.label}</label>` : ""}
|
${this.label ? `<label>${this.label}</label>` : ""}
|
||||||
<div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
|
<div class="checkbox ${this.defaultValue ? "checked" : ""}" data-formId='${this.id}'>
|
||||||
<span class="knob"></span >
|
<span class="knob"></span >
|
||||||
</div >
|
</div >
|
||||||
@ -170,6 +170,31 @@ export class FormElementCheckbox extends FormElement {
|
|||||||
focus(parent) {}
|
focus(parent) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export class FormElementCheckboxList extends FormElement {
|
||||||
|
constructor({ id, label = null, checkboxes = [] }) {
|
||||||
|
super(id, label);
|
||||||
|
this.checkboxes = checkboxes;
|
||||||
|
}
|
||||||
|
|
||||||
|
getHtml() {
|
||||||
|
return `
|
||||||
|
<div class="formElement checkBoxGridFormElem">
|
||||||
|
${this.checkboxes.map(checkbox => checkbox.getHtml()).join("\n")}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
bindEvents(parent, clickTrackers) {
|
||||||
|
this.checkboxes.forEach(checkbox => checkbox.bindEvents(parent, clickTrackers));
|
||||||
|
}
|
||||||
|
|
||||||
|
getValue() {
|
||||||
|
return this.checkboxes.map(checkbox => checkbox.getValue());
|
||||||
|
}
|
||||||
|
|
||||||
|
focus(parent) {}
|
||||||
|
}
|
||||||
|
|
||||||
export class FormElementItemChooser extends FormElement {
|
export class FormElementItemChooser extends FormElement {
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
|
@ -9,12 +9,16 @@ import { StaticMapEntityComponent } from "../../components/static_map_entity";
|
|||||||
import { KEYMAPPINGS } from "../../key_action_mapper";
|
import { KEYMAPPINGS } from "../../key_action_mapper";
|
||||||
import { BaseHUDPart } from "../base_hud_part";
|
import { BaseHUDPart } from "../base_hud_part";
|
||||||
import { DialogWithForm } from "../../../core/modal_dialog_elements";
|
import { DialogWithForm } from "../../../core/modal_dialog_elements";
|
||||||
import { FormElementCheckbox, FormElementEnum } from "../../../core/modal_dialog_forms";
|
import {
|
||||||
|
FormElementCheckbox,
|
||||||
|
FormElementCheckboxList,
|
||||||
|
FormElementEnum,
|
||||||
|
} from "../../../core/modal_dialog_forms";
|
||||||
import { ORIGINAL_SPRITE_SCALE } from "../../../core/sprites";
|
import { ORIGINAL_SPRITE_SCALE } from "../../../core/sprites";
|
||||||
import { getDeviceDPI } from "../../../core/dpi_manager";
|
import { getDeviceDPI } from "../../../core/dpi_manager";
|
||||||
import { HUDMassSelector } from "./mass_selector";
|
import { HUDMassSelector } from "./mass_selector";
|
||||||
import { clamp } from "../../../core/utils";
|
import { clamp } from "../../../core/utils";
|
||||||
import { CHUNK_OVERLAY_RES } from "../../map_chunk_view";
|
import { CHUNK_OVERLAY_RES, MapChunkView } from "../../map_chunk_view";
|
||||||
|
|
||||||
const logger = createLogger("screenshot_exporter");
|
const logger = createLogger("screenshot_exporter");
|
||||||
|
|
||||||
@ -113,6 +117,16 @@ export class HUDScreenshotExporter extends BaseHUDPart {
|
|||||||
label: "Wires layer",
|
label: "Wires layer",
|
||||||
defaultValue: this.root.currentLayer === "wires" ? true : false,
|
defaultValue: this.root.currentLayer === "wires" ? true : false,
|
||||||
});
|
});
|
||||||
|
const backgroundInput = new FormElementCheckbox({
|
||||||
|
id: "screenshotBackground",
|
||||||
|
// @TODO: translation (T.dialogs.exportScreenshotWarning.descBackground)
|
||||||
|
label: "Transparent background",
|
||||||
|
defaultValue: false,
|
||||||
|
});
|
||||||
|
const checkboxInputs = new FormElementCheckboxList({
|
||||||
|
id: "screenshotCheckboxes",
|
||||||
|
checkboxes: [overlayInput, layerInput, backgroundInput],
|
||||||
|
});
|
||||||
const dialog = new DialogWithForm({
|
const dialog = new DialogWithForm({
|
||||||
app: this.root.app,
|
app: this.root.app,
|
||||||
title: T.dialogs.exportScreenshotWarning.title,
|
title: T.dialogs.exportScreenshotWarning.title,
|
||||||
@ -128,7 +142,7 @@ export class HUDScreenshotExporter extends BaseHUDPart {
|
|||||||
.getKeyCodeString() +
|
.getKeyCodeString() +
|
||||||
"</code>"
|
"</code>"
|
||||||
),
|
),
|
||||||
formElements: [qualityInput, overlayInput, layerInput],
|
formElements: [qualityInput, checkboxInputs],
|
||||||
buttons: ["cancel:good", "ok:bad"],
|
buttons: ["cancel:good", "ok:bad"],
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -145,6 +159,7 @@ export class HUDScreenshotExporter extends BaseHUDPart {
|
|||||||
qualityInput.getValue(),
|
qualityInput.getValue(),
|
||||||
overlayInput.getValue(),
|
overlayInput.getValue(),
|
||||||
layerInput.getValue(),
|
layerInput.getValue(),
|
||||||
|
backgroundInput.getValue(),
|
||||||
!!bounds,
|
!!bounds,
|
||||||
bounds
|
bounds
|
||||||
),
|
),
|
||||||
@ -157,10 +172,11 @@ export class HUDScreenshotExporter extends BaseHUDPart {
|
|||||||
* @param {number} targetResolution
|
* @param {number} targetResolution
|
||||||
* @param {boolean} overlay
|
* @param {boolean} overlay
|
||||||
* @param {boolean} wiresLayer
|
* @param {boolean} wiresLayer
|
||||||
|
* @param {boolean} hideBackground
|
||||||
* @param {boolean} allowBorder
|
* @param {boolean} allowBorder
|
||||||
* @param {Rectangle?} tileBounds
|
* @param {Rectangle?} tileBounds
|
||||||
*/
|
*/
|
||||||
doExport(targetResolution, overlay, wiresLayer, allowBorder, tileBounds) {
|
doExport(targetResolution, overlay, wiresLayer, hideBackground, allowBorder, tileBounds) {
|
||||||
logger.log("Starting export ...");
|
logger.log("Starting export ...");
|
||||||
|
|
||||||
const boundsSelected = !!tileBounds;
|
const boundsSelected = !!tileBounds;
|
||||||
@ -296,9 +312,23 @@ export class HUDScreenshotExporter extends BaseHUDPart {
|
|||||||
this.root.signals.gameFrameStarted.dispatch();
|
this.root.signals.gameFrameStarted.dispatch();
|
||||||
if (overlay) {
|
if (overlay) {
|
||||||
this.root;
|
this.root;
|
||||||
this.root.map.drawOverlay(parameters);
|
if (hideBackground) {
|
||||||
|
this.root.map.drawVisibleChunks(parameters, MapChunkView.prototype.drawOverlayNoBackground);
|
||||||
|
} else {
|
||||||
|
this.root.map.drawOverlay(parameters);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.root.map.drawBackground(parameters);
|
if (hideBackground) {
|
||||||
|
this.root.map.drawVisibleChunks(
|
||||||
|
parameters,
|
||||||
|
/** @this {MapChunkView} */ function (parameters) {
|
||||||
|
this.root.systemMgr.systems.beltUnderlays.drawChunk(parameters, this);
|
||||||
|
this.root.systemMgr.systems.belt.drawChunk(parameters, this);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.root.map.drawBackground(parameters);
|
||||||
|
}
|
||||||
this.root.systemMgr.systems.belt.drawBeltItems(parameters);
|
this.root.systemMgr.systems.belt.drawBeltItems(parameters);
|
||||||
this.root.map.drawForeground(parameters);
|
this.root.map.drawForeground(parameters);
|
||||||
this.root.systemMgr.systems.hub.draw(parameters);
|
this.root.systemMgr.systems.hub.draw(parameters);
|
||||||
|
@ -130,6 +130,40 @@ export class MapChunkView extends MapChunk {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Overlay with transparent background
|
||||||
|
* @param {DrawParameters} parameters
|
||||||
|
*/
|
||||||
|
drawOverlayNoBackground(parameters) {
|
||||||
|
const overlaySize = globalConfig.mapChunkSize * CHUNK_OVERLAY_RES;
|
||||||
|
const sprite = this.root.buffers.getForKey({
|
||||||
|
key: "chunknobg@" + this.root.currentLayer,
|
||||||
|
subKey: this.renderKey,
|
||||||
|
w: overlaySize,
|
||||||
|
h: overlaySize,
|
||||||
|
dpi: 1,
|
||||||
|
redrawMethod: this.generateOverlayBufferNoBackground.bind(this),
|
||||||
|
});
|
||||||
|
|
||||||
|
const dims = globalConfig.mapChunkWorldSize;
|
||||||
|
const extrude = 0.05;
|
||||||
|
|
||||||
|
// Draw chunk "pixel" art
|
||||||
|
parameters.context.imageSmoothingEnabled = false;
|
||||||
|
drawSpriteClipped({
|
||||||
|
parameters,
|
||||||
|
sprite,
|
||||||
|
x: this.x * dims - extrude,
|
||||||
|
y: this.y * dims - extrude,
|
||||||
|
w: dims + 2 * extrude,
|
||||||
|
h: dims + 2 * extrude,
|
||||||
|
originalW: overlaySize,
|
||||||
|
originalH: overlaySize,
|
||||||
|
});
|
||||||
|
|
||||||
|
parameters.context.imageSmoothingEnabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param {HTMLCanvasElement} canvas
|
* @param {HTMLCanvasElement} canvas
|
||||||
@ -254,6 +288,94 @@ export class MapChunkView extends MapChunk {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {HTMLCanvasElement} canvas
|
||||||
|
* @param {CanvasRenderingContext2D} context
|
||||||
|
* @param {number} w
|
||||||
|
* @param {number} h
|
||||||
|
* @param {number} dpi
|
||||||
|
*/
|
||||||
|
generateOverlayBufferNoBackground(canvas, context, w, h, dpi) {
|
||||||
|
for (let x = 0; x < globalConfig.mapChunkSize; ++x) {
|
||||||
|
const upperArray = this.contents[x];
|
||||||
|
for (let y = 0; y < globalConfig.mapChunkSize; ++y) {
|
||||||
|
const upperContent = upperArray[y];
|
||||||
|
if (upperContent) {
|
||||||
|
const staticComp = upperContent.components.StaticMapEntity;
|
||||||
|
const data = getBuildingDataFromCode(staticComp.code);
|
||||||
|
const metaBuilding = data.metaInstance;
|
||||||
|
|
||||||
|
const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix(
|
||||||
|
staticComp.rotation,
|
||||||
|
data.rotationVariant,
|
||||||
|
data.variant,
|
||||||
|
upperContent
|
||||||
|
);
|
||||||
|
|
||||||
|
if (overlayMatrix) {
|
||||||
|
context.fillStyle = metaBuilding.getSilhouetteColor(
|
||||||
|
data.variant,
|
||||||
|
data.rotationVariant
|
||||||
|
);
|
||||||
|
for (let dx = 0; dx < 3; ++dx) {
|
||||||
|
for (let dy = 0; dy < 3; ++dy) {
|
||||||
|
const isFilled = overlayMatrix[dx + dy * 3];
|
||||||
|
if (isFilled) {
|
||||||
|
context.fillRect(
|
||||||
|
x * CHUNK_OVERLAY_RES + dx,
|
||||||
|
y * CHUNK_OVERLAY_RES + dy,
|
||||||
|
1,
|
||||||
|
1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
continue;
|
||||||
|
} else {
|
||||||
|
context.fillStyle = metaBuilding.getSilhouetteColor(
|
||||||
|
data.variant,
|
||||||
|
data.rotationVariant
|
||||||
|
);
|
||||||
|
context.fillRect(
|
||||||
|
x * CHUNK_OVERLAY_RES,
|
||||||
|
y * CHUNK_OVERLAY_RES,
|
||||||
|
CHUNK_OVERLAY_RES,
|
||||||
|
CHUNK_OVERLAY_RES
|
||||||
|
);
|
||||||
|
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.root.currentLayer === "wires") {
|
||||||
|
// Draw wires overlay
|
||||||
|
|
||||||
|
context.fillStyle = THEME.map.wires.overlayColor;
|
||||||
|
context.fillRect(0, 0, w, h);
|
||||||
|
|
||||||
|
for (let x = 0; x < globalConfig.mapChunkSize; ++x) {
|
||||||
|
const wiresArray = this.wireContents[x];
|
||||||
|
for (let y = 0; y < globalConfig.mapChunkSize; ++y) {
|
||||||
|
const content = wiresArray[y];
|
||||||
|
if (!content) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
MapChunkView.drawSingleWiresOverviewTile({
|
||||||
|
context,
|
||||||
|
x: x * CHUNK_OVERLAY_RES,
|
||||||
|
y: y * CHUNK_OVERLAY_RES,
|
||||||
|
entity: content,
|
||||||
|
tileSizePixels: CHUNK_OVERLAY_RES,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param {object} param0
|
* @param {object} param0
|
||||||
* @param {CanvasRenderingContext2D} param0.context
|
* @param {CanvasRenderingContext2D} param0.context
|
||||||
|
Loading…
Reference in New Issue
Block a user