fantasy/main.js

import factory from "./painting/factory.js";
import Shape from "./painting/shape.js";

import Canvas from "./ui/canvas.js";
import Button from "./ui/button.js";
import Panel from "./ui/panel.js";

import Form from "./ui/editors/form.js";
import NumericBox from "./ui/editors/numericBox.js";
import SwitchBox from "./ui/editors/switchBox.js";

document.body.innerHTML = "";
const maxPanelWidth = 300;
const panelPaddingTop = 90;

Shape.setBounding(window.innerWidth, window.innerHeight);
let canvas = new Canvas(window.innerWidth, window.innerHeight);

let paintButton = new Button("paint");
paintButton.addHandler(paint);

let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
let panelHeight = window.innerHeight - 20;
let panel = new Panel(panelWidth, panelHeight);
panel.element.style.paddingTop = panelPaddingTop + "px";
panel.setPosition(10, 10);

let settings = new Button("gear");
settings.addHandler(panel.toggle.bind(panel));

let clear = new Button("blank");
clear.addHandler(canvas.clear.bind(canvas));

let downloadButton = new Button("download", true);
downloadButton.element.download = "fantasy.png";

window.addEventListener("resize", onWindowResize, false);

let form = new Form(panelWidth, panelHeight - panelPaddingTop);
let coloringBox = new SwitchBox(true, 40, 20);
let randomBox = new SwitchBox(true, 40, 20);
let amountBox = new NumericBox(100, 30);
amountBox.setValue(100);
let circlesBox = new SwitchBox(true, 40, 20);
let rectanglesBox = new SwitchBox(true, 40, 20);
let trianglesBox = new SwitchBox(true, 40, 20);
let blurBox = new NumericBox(100, 30);
blurBox.setValue(0);

form.addLine("coloring", "Colored shapes", coloringBox);
form.addLine("random", "Random amount of shapes", randomBox);
form.addLine("amount", "Amount of shapes", amountBox);
form.addLine("circles", "Probability of circles", circlesBox);
form.addLine("rectangles", "Probability of rectangles", rectanglesBox);
form.addLine("triangles", "Probability of triangles", trianglesBox);
form.addLine("blur", "Blur strength", blurBox);

panel.add(form);

document.body.appendChild(canvas.element);
document.body.appendChild(panel.element);
document.body.appendChild(paintButton.element);
document.body.appendChild(settings.element);
document.body.appendChild(clear.element);
document.body.appendChild(downloadButton.element);

adjustButtons(panelWidth);
paint();

function onWindowResize(e) {
    Shape.setBounding(window.innerWidth, window.innerHeight);
    canvas.setSize(window.innerWidth, window.innerHeight);

    let panelWidth = Math.min(maxPanelWidth ,window.innerWidth - 20);
    panel.setSize(panelWidth, window.innerHeight - 20);
    adjustButtons(panelWidth);
}

function paint() {
    canvas.setBlurStrength(blurBox.value);
    Shape.setColoring(coloringBox.value);
    factory.setCollection({
        rectangle: rectanglesBox.value,
        circle: circlesBox.value,
        triangle: trianglesBox.value
    });
    let amount;
    if (randomBox.value) {
        amount = Math.floor(Math.random() * amountBox.value);
    } else {
        amount = amountBox.value;
    }

    for (let i = 0; i < amount; ++i) {
        let shape = factory.createRandomShape();
        canvas.draw(shape);
    }

    downloadButton.element.href = canvas.getData();
}

function adjustButtons(width) {
    let hc = width / 8;
    let c = width / 4;
    let ws = -Button.width / 2 + 10;

    paintButton.setPosition(hc + ws, 25);
    settings.setPosition(c + hc + ws, 25);
    clear.setPosition(2 * c + hc + ws, 25);
    downloadButton.setPosition(3 * c + hc + ws, 25);
}