class ZoomIndicator extends HTMLElement {
    connectedCallback() {
        this.zoomOutButton = this.appendChild(document.createElement("button"));
        this.zoomOutButton.classList.add("icon", "icon-minus");

        this.zoomLevelText = this.appendChild(document.createElement("p"));
        this.zoomLevelText.innerText = "100%";

        this.zoomInButton = this.appendChild(document.createElement("button"));
        this.zoomInButton.classList.add("icon", "icon-plus");

        this.zoomInButton.addEventListener("click", () => {
            this.dispatchEvent(Object.assign(new Event(".zoomUpdate"), { delta: +1 }));
        });
        this.zoomOutButton.addEventListener("click", () => {
            this.dispatchEvent(Object.assign(new Event(".zoomUpdate"), { delta: -1 }));
        });
    }

    setZoom(value) {
        this.zoomLevelText.innerText = `${Math.round(value * 100)}%`;
    }
}

customElements.define("rkgk-zoom-indicator", ZoomIndicator);