diff --git a/js/widgets/meterwidget.js b/js/widgets/meterwidget.js index 8f2f3cf5c8..2ae94e2936 100644 --- a/js/widgets/meterwidget.js +++ b/js/widgets/meterwidget.js @@ -29,7 +29,7 @@ PREVIEWVOLUME, TONEBPM */ -// eslint-disable-next-line no-unused-vars +/*exported MeterWidget*/ class MeterWidget { // A pie menu is used to show the meter and strong beats static BUTTONDIVWIDTH = 535; @@ -69,6 +69,8 @@ class MeterWidget { widgetWindow.destroy(); }; + widgetWindow.onmaximize = this._scale; + this._click_lock = false; const playBtn = widgetWindow.addButton("play-button.svg", MeterWidget.ICONSIZE, _("Play")); playBtn.onclick = () => { @@ -188,6 +190,20 @@ class MeterWidget { logo.textMsg(_("Click in the circle to select strong beats for the meter.")); widgetWindow.sendToCenter(); + this._scale.call(this.widgetWindow); + } + + _scale() { + const windowHeight = + this.getWidgetFrame().offsetHeight - this.getDragElement().offsetHeight; + const svg = this.getWidgetBody().getElementsByTagName("svg")[0]; + const scale = this.isMaximized() ? windowHeight / 400 : 1; + svg.style.pointerEvents = "none"; + svg.setAttribute("height", `${400 * scale}px`); + svg.setAttribute("width", `${400 * scale}px`); + setTimeout(() => { + svg.style.pointerEvents = "auto"; + }, 100); } /** @@ -363,7 +379,8 @@ class MeterWidget { _piemenuMeter(numberOfBeats, beatValue) { // pie menu for strong beat selection - docById("meterWheelDiv").style.display = ""; + docById("meterWheelDiv").style.display = "flex"; + docById("meterWheelDiv").style.justifyContent = "center"; // Use advanced constructor for multiple wheelnavs in the same div. // The meterWheel is used to hold the strong beats. diff --git a/js/widgets/widgetWindows.js b/js/widgets/widgetWindows.js index 3aef236e05..086a745470 100644 --- a/js/widgets/widgetWindows.js +++ b/js/widgets/widgetWindows.js @@ -62,7 +62,7 @@ class WidgetWindow { } }); - document.addEventListener("mouseup", (e) => { + document.addEventListener("mouseup", () => { this._dragging = false; }); @@ -173,7 +173,7 @@ class WidgetWindow { window.onscroll = () => { window.scrollTo(scrollLeft, scrollTop); }; - } + }; this._widget = this._create("div", "wfbWidget", this._body); this._widget.addEventListener("wheel", disableScroll, false); @@ -190,7 +190,7 @@ class WidgetWindow { language = navigator.language; } - console.debug("language setting is " + language); + // console.debug("language setting is " + language); // For Japanese, put the toolbar on the top. if (language === "ja") { this._body.style.flexDirection = "column"; @@ -413,6 +413,14 @@ class WidgetWindow { return this._widget; } + /** + * @public + * @returns {HTMLElement} + */ + getWidgetFrame() { + return this._frame; + } + /** * @deprecated */ @@ -445,6 +453,14 @@ class WidgetWindow { return this; } + /** + * @public + * @returns {boolean} + */ + isMaximized() { + return this._maximized; + } + /** * @returns {void} */