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
}
