private void TriggerResize() { // if the element is visible, perfect, we do the update if (IsElementVisible) { if (_visibilityCheckerIntervalId != 0) { Logger.Info("Rendering", "AlphaTab container became visible again, doing autosizing"); clearInterval(_visibilityCheckerIntervalId); _visibilityCheckerIntervalId = 0; } var resizeEventInfo = new ResizeEventArgs(); resizeEventInfo.OldWidth = Settings.Width; resizeEventInfo.NewWidth = Element.offsetWidth; resizeEventInfo.Settings = Settings; TriggerEvent("resize", resizeEventInfo); Settings.Width = resizeEventInfo.NewWidth; Renderer.UpdateSettings(Settings); Renderer.Resize(Element.offsetWidth); } // if there is no "invisibility timer" we set up one, if there is already a timer scheduled, it will trigger the proper rendering. else if (_visibilityCheckerIntervalId == 0) { Logger.Warning("Rendering", "AlphaTab container was invisible while autosizing, checking for element visibility in " + _visibilityCheckerInterval + "ms intervals"); _visibilityCheckerIntervalId = setInterval(TriggerResize, _visibilityCheckerInterval); } }
protected JsApi(HtmlElement element, dynamic options) { Element = element; Element.classList.add("alphaTab"); // load settings var dataAttributes = GetDataAttributes(); var settings = Settings = AlphaTab.Settings.FromJson(options, dataAttributes); var autoSize = settings.Width < 0; #region build tracks array // get track data to parse dynamic tracksData; if (options != null && options.tracks) { tracksData = options.tracks; } else { if (dataAttributes.ContainsKey("tracks")) { tracksData = dataAttributes["tracks"]; } else { tracksData = 0; } } SetTracks(tracksData, false); #endregion string contents = ""; if (element != null) { // get load contents if (dataAttributes.ContainsKey("tex") && element.innerText.As <JsBoolean>()) { contents = (element.innerHTML.As <string>()).Trim(); element.innerHTML = ""; } #region Create context elements (wrapper, canvas etc) CanvasElement = (HtmlElement)document.createElement("div"); CanvasElement.className = "alphaTabSurface"; CanvasElement.style.fontSize = "0"; CanvasElement.style.overflow = "hidden"; CanvasElement.style.lineHeight = "0"; element.appendChild(CanvasElement); #endregion #region Setup scroll and resize handlers for lazy-loading if (settings.Engine == "default" || settings.Engine == "svg") { window.addEventListener("scroll", e => { ShowSvgsInViewPort(); }, true); window.addEventListener("resize", e => { ShowSvgsInViewPort(); }, true); } #endregion #region Auto Sizing if (autoSize) { settings.Width = element.offsetWidth; int timeoutId = 0; window.addEventListener("resize", e => { clearTimeout(timeoutId); timeoutId = setTimeout(() => { if (element.offsetWidth != settings.Width) { TriggerResize(); } }, 1); }); } #endregion } #region Renderer Setup CreateStyleElement(settings); if (element != null && autoSize) { var initialResizeEventInfo = new ResizeEventArgs(); initialResizeEventInfo.OldWidth = 0; initialResizeEventInfo.NewWidth = element.offsetWidth; initialResizeEventInfo.Settings = settings; TriggerEvent("resize", initialResizeEventInfo); settings.Width = initialResizeEventInfo.NewWidth; } var workersUnsupported = !window.Worker.As <bool>(); if (settings.UseWebWorker && !workersUnsupported && settings.Engine != "html5") { Renderer = new WorkerScoreRenderer(this, settings); } else { Renderer = new ScoreRenderer(settings); } Renderer.RenderFinished += o => TriggerEvent("rendered"); Renderer.PostRenderFinished += () => { Element.classList.remove("loading"); Element.classList.remove("rendering"); TriggerEvent("postRendered"); }; Renderer.PreRender += result => { _renderResults = new FastList <RenderFinishedEventArgs>(); _totalResultCount = 0; AppendRenderResult(result); }; Renderer.PartialRenderFinished += AppendRenderResult; Renderer.RenderFinished += r => { AppendRenderResult(r); AppendRenderResult(null); // marks last element }; Renderer.Error += Error; #endregion #region Load Default Data Action initialRender = () => { // rendering was possibly delayed due to invisible element // in this case we need the correct width for autosize if (autoSize) { Settings.Width = Element.offsetWidth; Renderer.UpdateSettings(settings); } if (!string.IsNullOrEmpty(contents)) { Tex(contents); } else if (options && options.file) { Load(options.file); } else if (dataAttributes.ContainsKey("file")) { Load(dataAttributes["file"]); } }; _visibilityCheckerInterval = options && options.visibilityCheckInterval || 500; if (IsElementVisible) { // element is visible, so we start rendering initialRender(); } else { // if the alphaTab element is not visible, we postpone the rendering // we check in a regular interval whether it became available. Logger.Warning("Rendering", "AlphaTab container is invisible, checking for element visibility in " + _visibilityCheckerInterval + "ms intervals"); _visibilityCheckerIntervalId = setInterval(() => { if (IsElementVisible) { Logger.Info("Rendering", "AlphaTab container became visible, triggering initial rendering"); initialRender(); clearInterval(_visibilityCheckerIntervalId); _visibilityCheckerIntervalId = 0; } }, _visibilityCheckerInterval); } #endregion }
protected JsApiBase(HtmlElement element, dynamic options) { Element = element; dynamic dataset = Element.dataset; // load settings Settings settings = Settings.FromJson(options); #region build tracks array // get track data to parse dynamic tracksData; if (options != null && options.tracks) { tracksData = options.tracks; } else if (element != null && element.dataset != null && dataset["tracks"] != null) { tracksData = dataset["tracks"]; } else { tracksData = 0; } SetTracks(tracksData, false); #endregion string contents = ""; if (element != null) { // get load contents if (element.dataset != null && dataset["tex"] != null && element.innerText.As <JsBoolean>()) { contents = (element.innerHTML.As <string>()).Trim(); element.innerHTML = ""; } #region Create context elements (wrapper, canvas etc) CanvasElement = (HtmlElement)document.createElement("div"); CanvasElement.className = "alphaTabSurface"; CanvasElement.style.fontSize = "0"; element.appendChild(CanvasElement); #endregion #region Auto Sizing AutoSize = settings.Width < 0; if (AutoSize) { settings.Width = element.offsetWidth; if (options) { options.width = element.offsetWidth; } int timeoutId = 0; window.addEventListener("resize", e => { window.clearTimeout(timeoutId); timeoutId = window.setTimeout(() => { if (element.offsetWidth != settings.Width) { var resizeEventInfo = new ResizeEventArgs(); resizeEventInfo.OldWidth = settings.Width; resizeEventInfo.NewWidth = element.offsetWidth; resizeEventInfo.Settings = settings; TriggerEvent("resize", resizeEventInfo); settings.Width = resizeEventInfo.NewWidth; Renderer.UpdateSettings(settings); Renderer.Resize(element.offsetWidth); } }, 100); }); } #endregion } #region Renderer Setup if (element != null && AutoSize) { var initialResizeEventInfo = new ResizeEventArgs(); initialResizeEventInfo.OldWidth = 0; initialResizeEventInfo.NewWidth = element.offsetWidth; initialResizeEventInfo.Settings = settings; TriggerEvent("resize", initialResizeEventInfo); settings.Width = initialResizeEventInfo.NewWidth; } Renderer = CreateScoreRenderer(settings, options, CanvasElement); Renderer.RenderFinished += o => TriggerEvent("rendered"); Renderer.PostRenderFinished += () => TriggerEvent("post-rendered"); Renderer.PreRender += () => { CanvasElement.innerHTML = ""; }; Renderer.PartialRenderFinished += result => { Node itemToAppend; if (@typeof(result.RenderResult) == "string") { var partialResult = (HtmlDivElement)document.createElement("div"); partialResult.innerHTML = result.RenderResult.As <string>(); itemToAppend = partialResult.firstChild; } else { itemToAppend = (Node)result.RenderResult; } CanvasElement.style.width = result.TotalWidth + "px"; CanvasElement.style.height = result.TotalHeight + "px"; CanvasElement.appendChild(itemToAppend); }; Renderer.RenderFinished += result => { CanvasElement.style.width = result.TotalWidth + "px"; CanvasElement.style.height = result.TotalHeight + "px"; }; #endregion #region Load Default Data if (!string.IsNullOrEmpty(contents)) { Tex(contents); } else if (options && options.file) { Load(options.file); } else if (Element != null && Element.dataset != null && !string.IsNullOrEmpty(dataset["file"])) { Load(dataset["file"]); } #endregion }
protected JsApiBase(HtmlElement element, dynamic options) { Element = element; dynamic dataset = Element.dataset; // load settings Settings settings = Settings.FromJson(options); #region build tracks array // get track data to parse dynamic tracksData; if (options != null && options.tracks) { tracksData = options.tracks; } else if (element != null && element.dataset != null && dataset["tracks"] != null) { tracksData = dataset["tracks"]; } else { tracksData = 0; } SetTracks(tracksData, false); #endregion string contents = ""; if (element != null) { // get load contents if (element.dataset != null && dataset["tex"] != null && element.innerText.As<JsBoolean>()) { contents = (element.innerHTML.As<string>()).Trim(); element.innerHTML = ""; } #region Create context elements (wrapper, canvas etc) CanvasElement = (HtmlElement)document.createElement("div"); CanvasElement.className = "alphaTabSurface"; CanvasElement.style.fontSize = "0"; element.appendChild(CanvasElement); #endregion #region Auto Sizing AutoSize = settings.Width < 0; if (AutoSize) { settings.Width = element.offsetWidth; if (options) { options.width = element.offsetWidth; } int timeoutId = 0; window.addEventListener("resize", e => { window.clearTimeout(timeoutId); timeoutId = window.setTimeout(() => { if (element.offsetWidth != settings.Width) { var resizeEventInfo = new ResizeEventArgs(); resizeEventInfo.OldWidth = settings.Width; resizeEventInfo.NewWidth = element.offsetWidth; resizeEventInfo.Settings = settings; TriggerEvent("resize", resizeEventInfo); settings.Width = resizeEventInfo.NewWidth; Renderer.UpdateSettings(settings); Renderer.Resize(element.offsetWidth); } }, 100); }); } #endregion } #region Renderer Setup CreateStyleElement(settings); if (element != null && AutoSize) { var initialResizeEventInfo = new ResizeEventArgs(); initialResizeEventInfo.OldWidth = 0; initialResizeEventInfo.NewWidth = element.offsetWidth; initialResizeEventInfo.Settings = settings; TriggerEvent("resize", initialResizeEventInfo); settings.Width = initialResizeEventInfo.NewWidth; } Renderer = CreateScoreRenderer(settings); Renderer.RenderFinished += o => TriggerEvent("rendered"); Renderer.PostRenderFinished += () => TriggerEvent("post-rendered"); Renderer.PreRender += result => { CanvasElement.innerHTML = ""; AppendRenderResult(result); }; Renderer.PartialRenderFinished += AppendRenderResult; Renderer.RenderFinished += AppendRenderResult; #endregion #region Load Default Data if (!string.IsNullOrEmpty(contents)) { Tex(contents); } else if (options && options.file) { Load(options.file); } else if (Element != null && Element.dataset != null && !string.IsNullOrEmpty(dataset["file"])) { Load(dataset["file"]); } else if (Element != null && !string.IsNullOrEmpty(Element.getAttribute("data-file"))) { Load(Element.getAttribute("data-file")); } #endregion }