Source: map/tools/DrawTools.js

import { UiElement } from '../../ui/UiElement.js';

export { DrawTools };

/**
 * Dropdown button to draw on the map
 *
 * @author rhess <robin.hess@awi.de>
 * 
 * @memberof vef.map.tools
 */
class DrawTools extends UiElement {

    constructor(map, position) {
        super();

        this.map = map;
        this.position = position || "top-left";

        // initialize element
        const element = this.getElement();
        element.classList.add("vef-tool", "tool-dropdown");
        element.innerHTML = `
            <i class="fas fa-pencil-alt"></i>
            <div class="tool-dropdown-content">
                <button data-type="line" title="Draw Line">
                    <i class="fas fa-slash"></i>Draw Line
                </button>
                <button data-type="point" title="Draw Point">
                    <i class="fas fa-circle"></i>Draw Point
                </button>
                <button data-type="polygon" title="Draw Polygon">
                    <i class="fas fa-draw-polygon"></i>Draw Polygon
                </button>
                <button data-type="rectangle" title="Draw Rectangle">
                    <i class="fas fa-vector-square"></i>Draw Rectangle
                </button>
            </div>
        `;
        element.title = "Drawing tools";

        const buttons = element.querySelectorAll(".tool-dropdown-content button");
        for (let i = 0; i < buttons.length; ++i) {
            buttons[i].addEventListener("click", e => {
                const type = e.currentTarget.dataset.type;
                this.map.startDrawing(type);
            });
        }

        this.map.addTool(this, this.position);
    }

}