public/scripts/ui.js
function createSettingToggle(divButton, getter, setter) {
"use strict";
var currentSetting;
function update() {
currentSetting = getter();
if (currentSetting === true) {
divButton.classList.add("enabled");
} else {
divButton.classList.remove("enabled");
}
}
function changeSetting(evt) {
evt.preventDefault();
currentSetting = !currentSetting;
setter(currentSetting);
update();
}
divButton.addEventListener("click", changeSetting);
update();
return {
"update": update
};
}
var Toolbar = (function () {
"use strict";
var currentButton;
var currentOnBlur;
function add(divButton, onFocus, onBlur) {
function enable() {
if (currentButton !== divButton) {
if (currentButton !== undefined) {
currentButton.classList.remove("toolbar-displayed");
}
if (currentOnBlur !== undefined) {
currentOnBlur();
}
divButton.classList.add("toolbar-displayed");
currentButton = divButton;
currentOnBlur = onBlur;
if (onFocus !== undefined) {
onFocus();
}
}
}
divButton.addEventListener("click", (evt) => {
evt.preventDefault();
enable();
});
return {
"enable": enable
};
}
return {
"add": add
};
}());
function onReturn(divElement, divTarget) {
"use strict";
divElement.addEventListener("keypress", (evt) => {
var keyCode = (evt.keyCode || evt.which);
if (evt.altKey === false && evt.ctrlKey === false && evt.metaKey === false && keyCode === 13) {
evt.preventDefault();
evt.stopPropagation();
divTarget.click();
}
});
}
function onClick(divElement, func) {
"use strict";
divElement.addEventListener("click", (evt) => {
evt.preventDefault();
func();
});
}
function onFileChange(divElement, func) {
"use strict";
divElement.addEventListener("change", (evt) => {
if (evt.target.files.length > 0) {
func(evt.target.files[0]);
}
});
}
function onSelectChange(divElement, func) {
"use strict";
divElement.addEventListener("change", (evt) => {
func(divElement.value);
});
}
function createPositionInfo(divElement) {
"use strict";
function update(x, y) {
divElement.textContent = (x + 1) + ", " + (y + 1);
}
return {
"update": update
};
}
function showOverlay(divElement) {
"use strict";
divElement.classList.add("enabled");
}
function hideOverlay(divElement) {
"use strict";
divElement.classList.remove("enabled");
}
function undoAndRedo(evt) {
"use strict";
var keyCode = (evt.keyCode || evt.which);
if ((evt.ctrlKey === true || (evt.metaKey === true && evt.shiftKey === false)) && keyCode === 90) {
evt.preventDefault();
textArtCanvas.undo();
} else if ((evt.ctrlKey === true && evt.keyCode === 89) || (evt.metaKey ===true && evt.shiftKey === true && keyCode === 90)) {
evt.preventDefault();
textArtCanvas.redo();
}
}
function createTitleHandler(inputElement, onFocusCallback, onBlurCallback) {
"use strict";
function updateTitle() {
document.title = inputElement.value + " - moebius";
}
function onFocus() {
onFocusCallback();
}
function onBlur() {
onBlurCallback();
updateTitle();
}
function keyPress(evt) {
var keyCode = (evt.keyCode || evt.which);
if (keyCode === 13) {
evt.preventDefault();
evt.stopPropagation();
if (inputElement.value === "") {
inputElement.value = "untitled";
}
inputElement.blur();
}
}
function setName(newName) {
inputElement.value = newName;
updateTitle();
}
function getName() {
return inputElement.value;
}
function reset() {
setName("untitled");
}
inputElement.addEventListener("focus", onFocus);
inputElement.addEventListener("blur", onBlur);
inputElement.addEventListener("keypress", keyPress);
reset();
return {
"getName": getName,
"setName": setName,
"reset": reset
};
}
function createPaintShortcuts(keyPair) {
"use strict";
var ignored = false;
function keyDown(evt) {
if (ignored === false) {
var keyCode = (evt.keyCode || evt.which);
if (evt.ctrlKey === false && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
if (keyCode >= 48 && keyCode <= 55) {
var colour = keyCode - 48;
var currentColour = palette.getForegroundColour();
if (currentColour === colour) {
palette.setForegroundColour(colour + 8);
} else {
palette.setForegroundColour(colour);
}
} else {
var charCode = String.fromCharCode(keyCode);
if (keyPair[charCode] !== undefined) {
if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
evt.preventDefault();
keyPair[charCode].click();
}
}
}
}
}
}
function keyDownWithCtrl(evt) {
if (ignored === false) {
var keyCode = (evt.keyCode || evt.which);
if (evt.ctrlKey === true && evt.altKey === false && evt.shiftKey === false && evt.metaKey === false) {
var charCode = String.fromCharCode(keyCode);
if (keyPair[charCode] !== undefined) {
if (worker.isConnected() === false || keyPair[charCode].classList.contains("excluded-for-websocket") === false) {
evt.preventDefault();
keyPair[charCode].click();
}
}
}
}
}
document.addEventListener("keydown", keyDownWithCtrl);
function enable() {
document.addEventListener("keydown", keyDown);
}
function disable() {
document.removeEventListener("keydown", keyDown);
}
function ignore() {
ignored = true;
}
function unignore() {
ignored = false;
}
enable();
return {
"enable": enable,
"disable": disable,
"ignore": ignore,
"unignore": unignore
};
}
function createToggleButton(stateOneName, stateTwoName, stateOneClick, stateTwoClick) {
"use strict";
var divContainer = document.createElement("DIV");
divContainer.classList.add("toggle-button-container");
var stateOne = document.createElement("DIV");
stateOne.classList.add("toggle-button");
stateOne.classList.add("left");
stateOne.textContent = stateOneName;
var stateTwo = document.createElement("DIV");
stateTwo.classList.add("toggle-button");
stateTwo.classList.add("right");
stateTwo.textContent = stateTwoName;
divContainer.appendChild(stateOne);
divContainer.appendChild(stateTwo);
function getElement() {
return divContainer;
}
function setStateOne() {
stateOne.classList.add("enabled");
stateTwo.classList.remove("enabled");
}
function setStateTwo() {
stateTwo.classList.add("enabled");
stateOne.classList.remove("enabled");
}
stateOne.addEventListener("click", (evt) => {
setStateOne();
stateOneClick();
});
stateTwo.addEventListener("click", (evt) => {
setStateTwo();
stateTwoClick();
});
return {
"getElement": getElement,
"setStateOne": setStateOne,
"setStateTwo": setStateTwo
};
}
function createGrid(divElement) {
"use strict";
var canvases = [];
var enabled = false;
function createCanvases() {
var fontWidth = font.getWidth();
var fontHeight = font.getHeight();
var columns = textArtCanvas.getColumns();
var rows = textArtCanvas.getRows();
var canvasWidth = fontWidth * columns;
var canvasHeight = fontHeight * 25;
canvases = [];
for (var i = 0; i < Math.floor(rows / 25); i++) {
var canvas = createCanvas(canvasWidth, canvasHeight);
canvases.push(canvas);
}
if (rows % 25 !== 0) {
var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
canvases.push(canvas);
}
}
function renderGrid(canvas) {
var columns = textArtCanvas.getColumns();
var rows = Math.min(textArtCanvas.getRows(), 25);
var fontWidth = canvas.width / columns;
var fontHeight = font.getHeight();
var ctx = canvas.getContext("2d");
var imageData = ctx.createImageData(canvas.width, canvas.height);
var byteWidth = canvas.width * 4;
var darkGray = new Uint8Array([63, 63, 63, 255]);
for (var y = 0; y < rows; y += 1) {
for (var x = 0, i = y * fontHeight * byteWidth; x < canvas.width; x += 1, i += 4) {
imageData.data.set(darkGray, i);
}
}
for (var x = 0; x < columns; x += 1) {
for (var y = 0, i = x * fontWidth * 4; y < canvas.height; y += 1, i += byteWidth) {
imageData.data.set(darkGray, i);
}
}
ctx.putImageData(imageData, 0, 0);
}
function createGrid() {
createCanvases();
renderGrid(canvases[0]);
divElement.appendChild(canvases[0]);
for (var i = 1; i < canvases.length; i++) {
canvases[i].getContext("2d").drawImage(canvases[0], 0, 0);
divElement.appendChild(canvases[i]);
}
}
function resize() {
canvases.forEach((canvas) => {
divElement.removeChild(canvas);
});
createGrid();
}
createGrid();
document.addEventListener("onTextCanvasSizeChange", resize);
document.addEventListener("onLetterSpacingChange", resize);
document.addEventListener("onFontChange", resize);
document.addEventListener("onOpenedFile", resize);
function isShown() {
return enabled;
}
function show(turnOn) {
if (enabled === true && turnOn === false) {
divElement.classList.remove("enabled");
enabled = false;
} else if (enabled === false && turnOn === true) {
divElement.classList.add("enabled");
enabled = true;
}
}
return {
"isShown": isShown,
"show": show
};
}
function createToolPreview(divElement) {
"use strict";
var canvases = [];
var ctxs = [];
function createCanvases() {
var fontWidth = font.getWidth();
var fontHeight = font.getHeight();
var columns = textArtCanvas.getColumns();
var rows = textArtCanvas.getRows();
var canvasWidth = fontWidth * columns;
var canvasHeight = fontHeight * 25;
canvases = new Array();
ctxs = new Array();
for (var i = 0; i < Math.floor(rows / 25); i++) {
var canvas = createCanvas(canvasWidth, canvasHeight);
canvases.push(canvas);
ctxs.push(canvas.getContext("2d"));
}
if (rows % 25 !== 0) {
var canvas = createCanvas(canvasWidth, fontHeight * (rows % 25));
canvases.push(canvas);
ctxs.push(canvas.getContext("2d"));
}
canvases.forEach((canvas) => {
divElement.appendChild(canvas);
});
}
function resize() {
canvases.forEach((canvas) => {
divElement.removeChild(canvas);
});
createCanvases();
}
function drawHalfBlock(foreground, x, y) {
var halfBlockY = y % 2;
var textY = Math.floor(y / 2);
var ctxIndex = Math.floor(textY / 25);
if (ctxIndex >= 0 && ctxIndex < ctxs.length) {
font.drawWithAlpha((halfBlockY === 0) ? 223 : 220, foreground, ctxs[ctxIndex], x, textY % 25);
}
}
function clear() {
for (var i = 0; i < ctxs.length; i++) {
ctxs[i].clearRect(0, 0, canvases[i].width, canvases[i].height);
}
}
createCanvases();
divElement.classList.add("enabled");
document.addEventListener("onTextCanvasSizeChange", resize);
document.addEventListener("onLetterSpacingChange", resize);
document.addEventListener("onFontChange", resize);
document.addEventListener("onOpenedFile", resize);
return {
"clear": clear,
"drawHalfBlock": drawHalfBlock,
};
}
