105 lines
3.5 KiB
JavaScript
105 lines
3.5 KiB
JavaScript
import Widget from "./Widget.js";
|
|
import BrushMode from "../BrushMode.js";
|
|
import TilorswiftEvent from "../events/TilorswiftEvent.js";
|
|
import ButtonBackgroundTile from "../ButtonBackgroundTile.js";
|
|
import Tileset from "../Tileset.js";
|
|
|
|
export default class BackgroundPickerWidget extends Widget
|
|
{
|
|
constructor(tileset, brush)
|
|
{
|
|
super('Hintergrund');
|
|
this.tileset = tileset;
|
|
this.brush = brush;
|
|
this.htmlElement = this.createElementPicker();
|
|
this.htmlElementSelector = this.createElementSelector();
|
|
this.htmlElement.appendChild(this.htmlElementSelector);
|
|
|
|
this.loadTileset();
|
|
|
|
window.addEventListener(
|
|
TilorswiftEvent.BACKGROUND_BUTTON_TILE_CLICKED,
|
|
(event) => {
|
|
if (this.isActive) {
|
|
this.setTile(event.button.index);
|
|
this.brush.mode = BrushMode.BACKGROUND;
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
loadTileset()
|
|
{
|
|
if (this.tileset.background === null) {
|
|
this.disable();
|
|
this.htmlElement.style.backgroundImage = 'none';
|
|
return;
|
|
}
|
|
|
|
this.enable();
|
|
|
|
for (let t = -2; t >= -this.tileset.background.tiles - 1; t--) {
|
|
console.log(t);
|
|
const button = new ButtonBackgroundTile(this.tileset, t);
|
|
this.htmlElementSelector.appendChild(button.getElement());
|
|
}
|
|
|
|
this.htmlElement.style.backgroundImage = 'url("' + this.tileset.background.image.src + '")';
|
|
this.htmlElement.style.backgroundSize = 'auto ' + this.tileset.getTileWidth() + 'px';
|
|
}
|
|
|
|
/**
|
|
* @param {Tileset} tileset
|
|
*/
|
|
reloadTileset(tileset)
|
|
{
|
|
this.tileset = tileset;
|
|
this.htmlElementSelector.innerHTML = '';
|
|
this.htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
|
|
this.loadTileset();
|
|
}
|
|
|
|
createElementPicker()
|
|
{
|
|
const htmlElement = document.createElement('div');
|
|
htmlElement.id = 'tileset-picker';
|
|
htmlElement.style.width = this.tileset.getTileWidth() + 'px';
|
|
htmlElement.style.height = this.tileset.getTileHeight() + 'px';
|
|
htmlElement.style.backgroundSize = this.tileset.getTileWidth() + 'px ' + this.tileset.getTileHeight() + 'px';
|
|
|
|
return htmlElement;
|
|
}
|
|
|
|
createElementSelector()
|
|
{
|
|
const htmlElementSelector = document.createElement('div');
|
|
htmlElementSelector.id = 'tileset-selector-widget';
|
|
htmlElementSelector.style.width = Math.ceil(Math.sqrt(this.tileset.tiles)) * this.tileset.getTileWidth() + 'px';
|
|
htmlElementSelector.style.left = String(this.tileset.getTileWidth() + 1) + 'px';
|
|
|
|
return htmlElementSelector;
|
|
}
|
|
|
|
setTile(index)
|
|
{
|
|
this.htmlElement.style.backgroundPosition = String(((index + 2) % this.tileset.background.tiles) * this.tileset.getTileWidth()) + 'px ' + String(this.tileset.getTileHeight()) + 'px';
|
|
}
|
|
|
|
getElement()
|
|
{
|
|
return this.htmlElement;
|
|
}
|
|
|
|
updateExtendedTileVisibility()
|
|
{
|
|
const firstExtendedTileIndex = this.tileset.tiles - (this.tileset.tiles - this.tileset.primaryTiles);
|
|
|
|
for (const index of this.htmlElementSelector.childNodes.keys()) {
|
|
if (index >= firstExtendedTileIndex) {
|
|
this.htmlElementSelector.childNodes.item(index).style.display = this.brush.isIntelligent
|
|
? 'none'
|
|
: 'inline-flex';
|
|
}
|
|
}
|
|
}
|
|
} |