import { Layers } from './layer.js';
import { Tools } from './tool.js';

const commandBarElement = document.getElementById('menu-bar');
const toolBarElement = document.getElementById('tool-bar');
const layerControllersElement = document.getElementById('layer-controllers');
const studioElement = document.getElementById('studio');
const colorBarElement = document.getElementById('color-bar');
const easelElement = document.getElementById('easel');

const dZoom = 0.001;
const dBrushSize = 0.5;
const dOpacity = 0.001;
const initialWidth = 800;
const initialHeight = 600;
const maxBrushSize = 500;
const tolerance = 1;

let brushShape = 'circle'
let brushSize = 10;
let zoom = 1;

let startX = 0;
let startY = 0;
let endX = 0;
let endY = 0;
let dX = 0;
let dY = 0;
let canvasStartX = 0;
let canvasStartY = 0;
let canvasEndX = 0;
let canvasEndY = 0;
let canvasDX = 0;
let canvasDY = 0;

let isKeyDown = false;
let isMouseDown = false;

let interval;
var startTime;

document.on

const layers = new Layers({
	easelElement: easelElement,
	controllersElement: layerControllersElement,
	height: initialHeight,
	width: initialWidth
});

const tools = new Tools({
	controllersElement: toolBarElement
});

tools.addTool({ // brush {{{
	name: 'Brush',
	key: 'b',
	iconPath: 'icons/brush.svg',
	mouseMove: () => {
		const canvas = layers.getActive().selectCanvas;
		canvas
	},
	mouseDown: () => {
		isMouseDown = true;
	},
	mouseUp: () => {
		isMouseDown = false;
	}
});

// }}}