mixx/scripts/tool.js

class Tool {
	constructor({name, key, iconPath, mouseDown, mouseMove, mouseDrag, mouseUp, mouseLeave}) {
		this.name = name;
		this.key = key;
		this.iconPath = iconPath;
		this.mouseDown = mouseDown;
		this.mouseMove = mouseMove;
		this.mouseDrag = mouseDrag;
		this.mouseUp = mouseUp;
		this.mouseLeave = mouseLeave;
	}
}

class Tools {
	constructor({controllersElement}) {
		this.tools = [];
		this.activeTool = null;
		this.controllersElement = controllersElement;
	}

	addTool({name, key, iconPath, mouseDown, mouseMove, mouseDrag, mouseUp, mouseLeave}) {
		this.tools.push(new Tool({name, key, iconPath, mouseDown, mouseMove, mouseDrag, mouseUp, mouseLeave}));
		this.refreshControllers();
		return this;
	}

	setActiveTool({tool}) {
		this.activeTool = tool;
		return this;
	}

	getActiveTool() {
		return this.activeTool;
	}

	getTool({key}) {
		return this.tools.find(tool => tool.key === key);
	}

	refreshControllers() {
		this.controllersElement.innerHTML = '';
		this.tools.forEach(tool => {
			const button = document.createElement('div');
			button.classList.add('button');
			button.classList.add('tool-button');
			button.innerHTML = `<img src="${tool.iconPath}" alt="${tool.name}">`;
			button.addEventListener('click', () => {
				this.setActiveTool({tool});
			});
			this.controllersElement.appendChild(button);
		});
		return this;
	}

}

export { Tools };