93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
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));
|
|
|
|
window.addEventListener("resize", onWindowResize, false);
|
|
|
|
let form = new Form(panelWidth, panelHeight - panelPaddingTop);
|
|
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);
|
|
|
|
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);
|
|
|
|
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);
|
|
|
|
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() {
|
|
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);
|
|
}
|
|
}
|
|
|
|
function adjustButtons(width) {
|
|
paintButton.setPosition(width / 4 - Button.width + 10, 25);
|
|
settings.setPosition(width / 2 - Button.width / 2 + 10, 25);
|
|
clear.setPosition(width * 0.75 + 10, 25);
|
|
} |