\n\t\t\t\t
\n\t\t\t");
+ this.dom.innerHTML = htmlContent;
+ parent.appendChild(this.dom);
+ }
+ Popup.prototype.show = function (dismissedListener) {
+ var _this = this;
+ this.dom.classList.remove("spine-player-hidden");
+ var dismissed = false;
+ var resize = function () {
+ if (!dismissed)
+ requestAnimationFrame(resize);
+ var bottomOffset = Math.abs(_this.dom.getBoundingClientRect().bottom - _this.player.getBoundingClientRect().bottom);
+ var rightOffset = Math.abs(_this.dom.getBoundingClientRect().right - _this.player.getBoundingClientRect().right);
+ var maxHeight = _this.player.clientHeight - bottomOffset - rightOffset;
+ _this.dom.style.maxHeight = maxHeight + "px";
+ };
+ requestAnimationFrame(resize);
+ var justClicked = true;
+ var windowClickListener = function (event) {
+ if (justClicked) {
+ justClicked = false;
+ return;
+ }
+ if (!isContained(_this.dom, event.target)) {
+ _this.dom.remove();
+ window.removeEventListener("click", windowClickListener);
+ dismissedListener();
+ dismissed = true;
+ }
+ };
+ window.addEventListener("click", windowClickListener);
+ };
+ return Popup;
+ }());
+ var Switch = (function () {
+ function Switch(text) {
+ this.text = text;
+ this.enabled = false;
+ }
+ Switch.prototype.render = function () {
+ var _this = this;
+ this["switch"] = createElement("\n\t\t\t\t\n\t\t\t\t\t" + this.text + "\n\t\t\t\t\t
\n\t\t\t");
+ this["switch"].addEventListener("click", function () {
+ _this.setEnabled(!_this.enabled);
+ if (_this.change)
+ _this.change(_this.enabled);
+ });
+ return this["switch"];
+ };
+ Switch.prototype.setEnabled = function (enabled) {
+ if (enabled)
+ this["switch"].classList.add("active");
+ else
+ this["switch"].classList.remove("active");
+ this.enabled = enabled;
+ };
+ Switch.prototype.isEnabled = function () {
+ return this.enabled;
+ };
+ return Switch;
+ }());
+ var Slider = (function () {
+ function Slider(snaps, snapPercentage, big) {
+ if (snaps === void 0) { snaps = 0; }
+ if (snapPercentage === void 0) { snapPercentage = 0.1; }
+ if (big === void 0) { big = false; }
+ this.snaps = snaps;
+ this.snapPercentage = snapPercentage;
+ this.big = big;
+ }
+ Slider.prototype.render = function () {
+ var _this = this;
+ this.slider = createElement("\n\t\t\t\t\n\t\t\t");
+ this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
+ this.setValue(0);
+ var input = new spine.webgl.Input(this.slider);
+ var dragging = false;
+ input.addListener({
+ down: function (x, y) {
+ dragging = true;
+ _this.value.classList.add("hovering");
+ },
+ up: function (x, y) {
+ dragging = false;
+ var percentage = x / _this.slider.clientWidth;
+ percentage = percentage = Math.max(0, Math.min(percentage, 1));
+ _this.setValue(x / _this.slider.clientWidth);
+ if (_this.change)
+ _this.change(percentage);
+ _this.value.classList.remove("hovering");
+ },
+ moved: function (x, y) {
+ if (dragging) {
+ var percentage = x / _this.slider.clientWidth;
+ percentage = Math.max(0, Math.min(percentage, 1));
+ percentage = _this.setValue(x / _this.slider.clientWidth);
+ if (_this.change)
+ _this.change(percentage);
+ }
+ },
+ dragged: function (x, y) {
+ var percentage = x / _this.slider.clientWidth;
+ percentage = Math.max(0, Math.min(percentage, 1));
+ percentage = _this.setValue(x / _this.slider.clientWidth);
+ if (_this.change)
+ _this.change(percentage);
+ }
+ });
+ return this.slider;
+ };
+ Slider.prototype.setValue = function (percentage) {
+ percentage = Math.max(0, Math.min(1, percentage));
+ if (this.snaps > 0) {
+ var modulo = percentage % (1 / this.snaps);
+ if (modulo < (1 / this.snaps) * this.snapPercentage) {
+ percentage = percentage - modulo;
+ }
+ else if (modulo > (1 / this.snaps) - (1 / this.snaps) * this.snapPercentage) {
+ percentage = percentage - modulo + (1 / this.snaps);
+ }
+ percentage = Math.max(0, Math.min(1, percentage));
+ }
+ this.value.style.width = "" + (percentage * 100) + "%";
+ return percentage;
+ };
+ return Slider;
+ }());
+ var SpinePlayer = (function () {
+ function SpinePlayer(parent, config) {
+ this.config = config;
+ this.paused = true;
+ this.playTime = 0;
+ this.speed = 1;
+ this.time = new spine.TimeKeeper(config);
+ this.animationViewports = {};
+ this.currentViewport = null;
+ this.previousViewport = null;
+ this.viewportTransitionStart = 0;
+ this.stopRequestAnimationFrame = false;
+ this.cancelId = 0;
+ if (typeof parent === "string")
+ this.parent = document.getElementById(parent);
+ else
+ this.parent = parent;
+ this.parent.appendChild(this.render());
+ }
+ SpinePlayer.prototype.validateConfig = function (config) {
+ if (!config)
+ throw new Error("Please pass a configuration to new.spine.SpinePlayer().");
+ if (!config.jsonUrl && !config.skelUrl)
+ throw new Error("Please specify the URL of the skeleton JSON or .skel file.");
+ if (!config.atlasUrl)
+ throw new Error("Please specify the URL of the atlas file.");
+ if (!config.alpha)
+ config.alpha = false;
+ if (!config.backgroundColor)
+ config.backgroundColor = "#000000";
+ if (!config.fullScreenBackgroundColor)
+ config.fullScreenBackgroundColor = config.backgroundColor;
+ if (!config.fps)
+ config.fps = 60;
+ if (typeof config.premultipliedAlpha === "undefined")
+ config.premultipliedAlpha = true;
+ if (typeof config.touch === "undefined")
+ config.touch = false;
+ if (!config.success)
+ config.success = function (widget) { };
+ if (!config.error)
+ config.error = function (widget, msg) { };
+ if (!config.debug)
+ config.debug = {
+ bones: false,
+ regions: false,
+ meshes: false,
+ bounds: false,
+ clipping: false,
+ paths: false,
+ points: false,
+ hulls: false
+ };
+ if (typeof config.debug.bones === "undefined")
+ config.debug.bones = false;
+ if (typeof config.debug.bounds === "undefined")
+ config.debug.bounds = false;
+ if (typeof config.debug.clipping === "undefined")
+ config.debug.clipping = false;
+ if (typeof config.debug.hulls === "undefined")
+ config.debug.hulls = false;
+ if (typeof config.debug.paths === "undefined")
+ config.debug.paths = false;
+ if (typeof config.debug.points === "undefined")
+ config.debug.points = false;
+ if (typeof config.debug.regions === "undefined")
+ config.debug.regions = false;
+ if (typeof config.debug.meshes === "undefined")
+ config.debug.meshes = false;
+ if (config.animations && config.animation) {
+ if (config.animations.indexOf(config.animation) < 0)
+ throw new Error("Default animation '" + config.animation + "' is not contained in the list of selectable animations " + escapeHtml(JSON.stringify(this.config.animations)) + ".");
+ }
+ if (config.skins && config.skin) {
+ if (config.skins.indexOf(config.skin) < 0)
+ throw new Error("Default skin '" + config.skin + "' is not contained in the list of selectable skins " + escapeHtml(JSON.stringify(this.config.skins)) + ".");
+ }
+ if (!config.controlBones)
+ config.controlBones = [];
+ if (typeof config.showControls === "undefined")
+ config.showControls = true;
+ if (typeof config.defaultMix === "undefined")
+ config.defaultMix = 0.25;
+ return config;
+ };
+ SpinePlayer.prototype.showError = function (error) {
+ var errorDom = findWithClass(this.dom, "spine-player-error")[0];
+ errorDom.classList.remove("spine-player-hidden");
+ errorDom.innerHTML = "\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t" + error + "
"; + this.config.error(this, error); + }; + SpinePlayer.prototype.render = function () { + var _this = this; + var config = this.config; + var dom = this.dom = createElement("\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t");
+ try {
+ this.config = this.validateConfig(config);
+ }
+ catch (e) {
+ this.showError(e);
+ return dom;
+ }
+ try {
+ this.canvas = findWithClass(dom, "spine-player-canvas")[0];
+ var webglConfig = { alpha: config.alpha };
+ this.context = new spine.webgl.ManagedWebGLRenderingContext(this.canvas, webglConfig);
+ this.sceneRenderer = new spine.webgl.SceneRenderer(this.canvas, this.context, true);
+ this.loadingScreen = new spine.webgl.LoadingScreen(this.sceneRenderer, config);
+ }
+ catch (e) {
+ this.showError("Sorry, your browser does not support WebGL.\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t![](\"data:image/svg+xml,%3Csvg%20id%3D%22Spine_Logo%22%20data-name%3D%22Spine%20Logo%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20104%2031.16%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D.cls-2%7Bfill%3A%23ff4000%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Ctitle%3Espine-logo-white%3C%2Ftitle%3E%3Cpath%20id%3D%22e%22%20class%3D%22cls-1%22%20d%3D%22M104%2C12.68a1.31%2C1.31%2C0%2C0%2C1-.37%2C1%2C1.28%2C1.28%2C0%2C0%2C1-.85.31H91.57a10.51%2C10.51%2C0%2C0%2C0%2C.29%2C2.55%2C4.92%2C4.92%2C0%2C0%2C0%2C1%2C2A4.27%2C4.27%2C0%2C0%2C0%2C94.5%2C19.8a6.89%2C6.89%2C0%2C0%2C0%2C2.6.44%2C10.66%2C10.66%2C0%2C0%2C0%2C2.17-.2%2C12.81%2C12.81%2C0%2C0%2C0%2C1.64-.44q.69-.25%2C1.14-.44a1.87%2C1.87%2C0%2C0%2C1%2C.68-.2A.44.44%2C0%2C0%2C1%2C103%2C19a.43.43%2C0%2C0%2C1%2C.16.2%2C1.38%2C1.38%2C0%2C0%2C1%2C.09.37%2C4.89%2C4.89%2C0%2C0%2C1%2C0%2C.58%2C4.14%2C4.14%2C0%2C0%2C1%2C0%2C.43v.32a.83.83%2C0%2C0%2C1-.09.26%2C1.1%2C1.1%2C0%2C0%2C1-.17.22%2C2.77%2C2.77%2C0%2C0%2C1-.61.34%2C8.94%2C8.94%2C0%2C0%2C1-1.32.46%2C18.54%2C18.54%2C0%2C0%2C1-1.88.41%2C13.78%2C13.78%2C0%2C0%2C1-2.28.18%2C10.55%2C10.55%2C0%2C0%2C1-3.68-.59%2C6.82%2C6.82%2C0%2C0%2C1-2.66-1.74%2C7.44%2C7.44%2C0%2C0%2C1-1.63-2.89%2C13.48%2C13.48%2C0%2C0%2C1-.55-4%2C12.76%2C12.76%2C0%2C0%2C1%2C.57-3.94%2C8.35%2C8.35%2C0%2C0%2C1%2C1.64-3%2C7.15%2C7.15%2C0%2C0%2C1%2C2.58-1.87%2C8.47%2C8.47%2C0%2C0%2C1%2C3.39-.65%2C8.19%2C8.19%2C0%2C0%2C1%2C3.41.64%2C6.46%2C6.46%2C0%2C0%2C1%2C2.32%2C1.73A7%2C7%2C0%2C0%2C1%2C103.59%2C9a11.17%2C11.17%2C0%2C0%2C1%2C.43%2C3.13Zm-3.14-.93a5.69%2C5.69%2C0%2C0%2C0-1.09-3.86%2C4.17%2C4.17%2C0%2C0%2C0-3.42-1.4%2C4.52%2C4.52%2C0%2C0%2C0-2%2C.44%2C4.41%2C4.41%2C0%2C0%2C0-1.47%2C1.15A5.29%2C5.29%2C0%2C0%2C0%2C92%2C9.75a7%2C7%2C0%2C0%2C0-.36%2C2Z%22%2F%3E%3Cpath%20id%3D%22n%22%20class%3D%22cls-1%22%20d%3D%22M80.68%2C21.94a.42.42%2C0%2C0%2C1-.08.26.59.59%2C0%2C0%2C1-.25.18%2C1.74%2C1.74%2C0%2C0%2C1-.47.11%2C6.31%2C6.31%2C0%2C0%2C1-.76%2C0%2C6.5%2C6.5%2C0%2C0%2C1-.78%2C0%2C1.74%2C1.74%2C0%2C0%2C1-.47-.11.59.59%2C0%2C0%2C1-.25-.18.42.42%2C0%2C0%2C1-.08-.26V12a9.8%2C9.8%2C0%2C0%2C0-.23-2.35%2C4.86%2C4.86%2C0%2C0%2C0-.66-1.53%2C2.88%2C2.88%2C0%2C0%2C0-1.13-1%2C3.57%2C3.57%2C0%2C0%2C0-1.6-.34%2C4%2C4%2C0%2C0%2C0-2.35.83A12.71%2C12.71%2C0%2C0%2C0%2C69.11%2C10v11.9a.42.42%2C0%2C0%2C1-.08.26.59.59%2C0%2C0%2C1-.25.18%2C1.74%2C1.74%2C0%2C0%2C1-.47.11%2C6.51%2C6.51%2C0%2C0%2C1-.78%2C0%2C6.31%2C6.31%2C0%2C0%2C1-.76%2C0%2C1.88%2C1.88%2C0%2C0%2C1-.48-.11.52.52%2C0%2C0%2C1-.25-.18.46.46%2C0%2C0%2C1-.07-.26v-17A.53.53%2C0%2C0%2C1%2C66%2C4.69a.5.5%2C0%2C0%2C1%2C.23-.19%2C1.28%2C1.28%2C0%2C0%2C1%2C.44-.11%2C8.53%2C8.53%2C0%2C0%2C1%2C1.39%2C0%2C1.12%2C1.12%2C0%2C0%2C1%2C.43.11.6.6%2C0%2C0%2C1%2C.22.19.47.47%2C0%2C0%2C1%2C.07.26V7.2a10.46%2C10.46%2C0%2C0%2C1%2C2.87-2.36%2C6.17%2C6.17%2C0%2C0%2C1%2C2.88-.75%2C6.41%2C6.41%2C0%2C0%2C1%2C2.87.58%2C5.16%2C5.16%2C0%2C0%2C1%2C1.88%2C1.54%2C6.15%2C6.15%2C0%2C0%2C1%2C1%2C2.26%2C13.46%2C13.46%2C0%2C0%2C1%2C.31%2C3.11Z%22%2F%3E%3Cg%20id%3D%22i%22%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M43.35%2C2.86c.09%2C2.6%2C1.89%2C4%2C5.48%2C4.61%2C3%2C.48%2C5.79.24%2C6.69-2.37%2C1.75-5.09-2.4-3.82-6-4.39S43.21-1.32%2C43.35%2C2.86Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M44.43%2C13.55c.33%2C1.94%2C2.14%2C3.06%2C4.91%2C3s4.84-1.16%2C5.13-3.25c.53-3.88-2.53-2.38-5.3-2.3S43.77%2C9.74%2C44.43%2C13.55Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M48%2C22.44c.55%2C1.45%2C2.06%2C2.06%2C4.1%2C1.63s3.45-1.11%2C3.33-2.76c-.21-3.06-2.22-2.1-4.26-1.66S47%2C19.6%2C48%2C22.44Z%22%2F%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22M49.78%2C29.22c.16%2C1.22%2C1.22%2C2%2C2.88%2C1.93s2.92-.67%2C3.13-2c.4-2.43-1.46-1.53-3.12-1.51S49.5%2C26.82%2C49.78%2C29.22Z%22%2F%3E%3C%2Fg%3E%3Cpath%20id%3D%22p%22%20class%3D%22cls-1%22%20d%3D%22M35.28%2C13.16a15.33%2C15.33%2C0%2C0%2C1-.48%2C4%2C8.75%2C8.75%2C0%2C0%2C1-1.42%2C3%2C6.35%2C6.35%2C0%2C0%2C1-2.32%2C1.91%2C7.14%2C7.14%2C0%2C0%2C1-3.16.67%2C6.1%2C6.1%2C0%2C0%2C1-1.4-.15%2C5.34%2C5.34%2C0%2C0%2C1-1.26-.47A7.29%2C7.29%2C0%2C0%2C1%2C24%2C21.31q-.61-.49-1.29-1.15v8.51a.47.47%2C0%2C0%2C1-.08.26.56.56%2C0%2C0%2C1-.25.19%2C1.74%2C1.74%2C0%2C0%2C1-.47.11%2C6.47%2C6.47%2C0%2C0%2C1-.78%2C0%2C6.26%2C6.26%2C0%2C0%2C1-.76%2C0%2C1.89%2C1.89%2C0%2C0%2C1-.48-.11.49.49%2C0%2C0%2C1-.25-.19.51.51%2C0%2C0%2C1-.07-.26V4.91a.57.57%2C0%2C0%2C1%2C.06-.27.46.46%2C0%2C0%2C1%2C.23-.18%2C1.47%2C1.47%2C0%2C0%2C1%2C.44-.1%2C7.41%2C7.41%2C0%2C0%2C1%2C1.3%2C0%2C1.45%2C1.45%2C0%2C0%2C1%2C.43.1.52.52%2C0%2C0%2C1%2C.24.18.51.51%2C0%2C0%2C1%2C.07.27V7.2a18.06%2C18.06%2C0%2C0%2C1%2C1.49-1.38%2C9%2C9%2C0%2C0%2C1%2C1.45-1%2C6.82%2C6.82%2C0%2C0%2C1%2C1.49-.59%2C7.09%2C7.09%2C0%2C0%2C1%2C4.78.52%2C6%2C6%2C0%2C0%2C1%2C2.13%2C2%2C8.79%2C8.79%2C0%2C0%2C1%2C1.2%2C2.9A15.72%2C15.72%2C0%2C0%2C1%2C35.28%2C13.16ZM32%2C13.52a15.64%2C15.64%2C0%2C0%2C0-.2-2.53%2C7.32%2C7.32%2C0%2C0%2C0-.69-2.17%2C4.06%2C4.06%2C0%2C0%2C0-1.3-1.51%2C3.49%2C3.49%2C0%2C0%2C0-2-.57%2C4.1%2C4.1%2C0%2C0%2C0-1.2.18%2C4.92%2C4.92%2C0%2C0%2C0-1.2.57%2C8.54%2C8.54%2C0%2C0%2C0-1.28%2C1A15.77%2C15.77%2C0%2C0%2C0%2C22.76%2C10v6.77a13.53%2C13.53%2C0%2C0%2C0%2C2.46%2C2.4%2C4.12%2C4.12%2C0%2C0%2C0%2C2.44.83%2C3.56%2C3.56%2C0%2C0%2C0%2C2-.57A4.28%2C4.28%2C0%2C0%2C0%2C31%2C18a7.58%2C7.58%2C0%2C0%2C0%2C.77-2.12A11.43%2C11.43%2C0%2C0%2C0%2C32%2C13.52Z%22%2F%3E%3Cpath%20id%3D%22s%22%20class%3D%22cls-1%22%20d%3D%22M12%2C17.3a5.39%2C5.39%2C0%2C0%2C1-.48%2C2.33%2C4.73%2C4.73%2C0%2C0%2C1-1.37%2C1.72%2C6.19%2C6.19%2C0%2C0%2C1-2.12%2C1.06%2C9.62%2C9.62%2C0%2C0%2C1-2.71.36%2C10.38%2C10.38%2C0%2C0%2C1-3.21-.5%2C7.63%2C7.63%2C0%2C0%2C1-1.11-.45%2C3.25%2C3.25%2C0%2C0%2C1-.66-.43%2C1.09%2C1.09%2C0%2C0%2C1-.3-.53A3.59%2C3.59%2C0%2C0%2C1%2C0%2C19.93a4.06%2C4.06%2C0%2C0%2C1%2C0-.61%2C2%2C2%2C0%2C0%2C1%2C.09-.4.42.42%2C0%2C0%2C1%2C.16-.22.43.43%2C0%2C0%2C1%2C.24-.07%2C1.35%2C1.35%2C0%2C0%2C1%2C.61.26q.41.26%2C1%2C.56A9.22%2C9.22%2C0%2C0%2C0%2C3.51%2C20a6.25%2C6.25%2C0%2C0%2C0%2C1.87.26%2C5.62%2C5.62%2C0%2C0%2C0%2C1.44-.17%2C3.48%2C3.48%2C0%2C0%2C0%2C1.12-.5%2C2.23%2C2.23%2C0%2C0%2C0%2C.73-.84%2C2.68%2C2.68%2C0%2C0%2C0%2C.26-1.21%2C2%2C2%2C0%2C0%2C0-.37-1.21%2C3.55%2C3.55%2C0%2C0%2C0-1-.87A8.09%2C8.09%2C0%2C0%2C0%2C6.2%2C14.8l-1.56-.61a16%2C16%2C0%2C0%2C1-1.57-.73%2C6%2C6%2C0%2C0%2C1-1.37-1%2C4.52%2C4.52%2C0%2C0%2C1-1-1.4%2C4.69%2C4.69%2C0%2C0%2C1-.37-2A4.88%2C4.88%2C0%2C0%2C1%2C.72%2C7.19%2C4.46%2C4.46%2C0%2C0%2C1%2C1.88%2C5.58%2C5.83%2C5.83%2C0%2C0%2C1%2C3.82%2C4.47%2C8.06%2C8.06%2C0%2C0%2C1%2C6.53%2C4a8.28%2C8.28%2C0%2C0%2C1%2C1.36.11%2C9.36%2C9.36%2C0%2C0%2C1%2C1.23.28%2C5.92%2C5.92%2C0%2C0%2C1%2C.94.37%2C4.09%2C4.09%2C0%2C0%2C1%2C.59.35%2C1%2C1%2C0%2C0%2C1%2C.26.26.83.83%2C0%2C0%2C1%2C.09.26%2C1.32%2C1.32%2C0%2C0%2C0%2C.06.35%2C3.87%2C3.87%2C0%2C0%2C1%2C0%2C.51%2C4.76%2C4.76%2C0%2C0%2C1%2C0%2C.56%2C1.39%2C1.39%2C0%2C0%2C1-.09.39.5.5%2C0%2C0%2C1-.16.22.35.35%2C0%2C0%2C1-.21.07%2C1%2C1%2C0%2C0%2C1-.49-.21%2C7%2C7%2C0%2C0%2C0-.83-.44%2C9.26%2C9.26%2C0%2C0%2C0-1.2-.44A5.49%2C5.49%2C0%2C0%2C0%2C6.5%2C6.48a4.93%2C4.93%2C0%2C0%2C0-1.4.18%2C2.69%2C2.69%2C0%2C0%2C0-1%2C.51A2.16%2C2.16%2C0%2C0%2C0%2C3.51%2C8a2.43%2C2.43%2C0%2C0%2C0-.2%2C1%2C2%2C2%2C0%2C0%2C0%2C.38%2C1.24%2C3.6%2C3.6%2C0%2C0%2C0%2C1%2C.88%2C8.25%2C8.25%2C0%2C0%2C0%2C1.38.68l1.58.62q.8.32%2C1.59.72a6%2C6%2C0%2C0%2C1%2C1.39%2C1%2C4.37%2C4.37%2C0%2C0%2C1%2C1%2C1.36A4.46%2C4.46%2C0%2C0%2C1%2C12%2C17.3Z%22%2F%3E%3C%2Fsvg%3E\"/)
\n\t\t\t\t\t\t
\n\t\t\t\t\tPlease use the latest version of Firefox, Chrome, Edge, or Safari."); + return dom; + } + this.assetManager = new spine.webgl.AssetManager(this.context); + if (config.rawDataURIs) { + for (var path in config.rawDataURIs) { + var data = config.rawDataURIs[path]; + this.assetManager.setRawDataURI(path, data); + } + } + if (config.jsonUrl) + this.assetManager.loadText(config.jsonUrl); + else + this.assetManager.loadBinary(config.skelUrl); + this.assetManager.loadTextureAtlas(config.atlasUrl); + if (config.backgroundImage && config.backgroundImage.url) + this.assetManager.loadTexture(config.backgroundImage.url); + requestAnimationFrame(function () { return _this.drawFrame(); }); + this.playerControls = findWithClass(dom, "spine-player-controls")[0]; + var timeline = findWithClass(dom, "spine-player-timeline")[0]; + this.timelineSlider = new Slider(); + timeline.appendChild(this.timelineSlider.render()); + this.playButton = findWithId(dom, "spine-player-button-play-pause")[0]; + var speedButton = findWithId(dom, "spine-player-button-speed")[0]; + this.animationButton = findWithId(dom, "spine-player-button-animation")[0]; + this.skinButton = findWithId(dom, "spine-player-button-skin")[0]; + var settingsButton = findWithId(dom, "spine-player-button-settings")[0]; + var fullscreenButton = findWithId(dom, "spine-player-button-fullscreen")[0]; + var logoButton = findWithId(dom, "spine-player-button-logo")[0]; + this.playButton.onclick = function () { + if (_this.paused) + _this.play(); + else + _this.pause(); + }; + speedButton.onclick = function () { + _this.showSpeedDialog(speedButton); + }; + this.animationButton.onclick = function () { + _this.showAnimationsDialog(_this.animationButton); + }; + this.skinButton.onclick = function () { + _this.showSkinsDialog(_this.skinButton); + }; + settingsButton.onclick = function () { + _this.showSettingsDialog(settingsButton); + }; + var oldWidth = this.canvas.clientWidth; + var oldHeight = this.canvas.clientHeight; + var oldStyleWidth = this.canvas.style.width; + var oldStyleHeight = this.canvas.style.height; + var isFullscreen = false; + fullscreenButton.onclick = function () { + var fullscreenChanged = function () { + isFullscreen = !isFullscreen; + if (!isFullscreen) { + _this.canvas.style.width = "" + oldWidth + "px"; + _this.canvas.style.height = "" + oldHeight + "px"; + _this.drawFrame(false); + requestAnimationFrame(function () { + _this.canvas.style.width = oldStyleWidth; + _this.canvas.style.height = oldStyleHeight; + }); + } + }; + var doc = document; + dom.onfullscreenchange = fullscreenChanged; + dom.onwebkitfullscreenchange = fullscreenChanged; + if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) { + if (doc.exitFullscreen) + doc.exitFullscreen(); + else if (doc.mozCancelFullScreen) + doc.mozCancelFullScreen(); + else if (doc.webkitExitFullscreen) + doc.webkitExitFullscreen(); + else if (doc.msExitFullscreen) + doc.msExitFullscreen(); + } + else { + oldWidth = _this.canvas.clientWidth; + oldHeight = _this.canvas.clientHeight; + oldStyleWidth = _this.canvas.style.width; + oldStyleHeight = _this.canvas.style.height; + var player = dom; + if (player.requestFullscreen) + player.requestFullscreen(); + else if (player.webkitRequestFullScreen) + player.webkitRequestFullScreen(); + else if (player.mozRequestFullScreen) + player.mozRequestFullScreen(); + else if (player.msRequestFullscreen) + player.msRequestFullscreen(); + } + }; + logoButton.onclick = function () { + window.open("http://esotericsoftware.com"); + }; + window.onresize = function () { + _this.drawFrame(false); + }; + return dom; + }; + SpinePlayer.prototype.showSpeedDialog = function (speedButton) { + var _this = this; + if (this.lastPopup) + this.lastPopup.dom.remove(); + if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Speed") { + this.lastPopup = null; + speedButton.classList.remove("spine-player-button-icon-speed-selected"); + return; + } + var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t
Speed
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t");
+ var sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
+ var slider = new Slider(2, 0.1, true);
+ sliderParent.appendChild(slider.render());
+ slider.setValue(this.speed / 2);
+ slider.change = function (percentage) {
+ _this.speed = percentage * 2;
+ };
+ speedButton.classList.add("spine-player-button-icon-speed-selected");
+ popup.show(function () {
+ speedButton.classList.remove("spine-player-button-icon-speed-selected");
+ popup.dom.remove();
+ _this.lastPopup = null;
+ });
+ this.lastPopup = popup;
+ };
+ SpinePlayer.prototype.showAnimationsDialog = function (animationsButton) {
+ var _this = this;
+ if (this.lastPopup)
+ this.lastPopup.dom.remove();
+ if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Animations") {
+ this.lastPopup = null;
+ animationsButton.classList.remove("spine-player-button-icon-animations-selected");
+ return;
+ }
+ if (!this.skeleton || this.skeleton.data.animations.length == 0)
+ return;
+ var popup = new Popup(this.dom, this.playerControls, "\n\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t\t\t
\n\t\t\t\t\t0.1x
\n\t\t\t\t\t\t\t1x
\n\t\t\t\t\t\t\t2x
\n\t\t\t\t\t\tAnimations
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\tSkins
\n\t\t\t\t\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\tDebug
\n\t\t\t\t\n\t\t\t\t
- \n\t\t\t\t\n\t\t\t");
+ var rows = findWithClass(popup.dom, "spine-player-list")[0];
+ var makeItem = function (label, name) {
+ var row = createElement("");
+ var s = new Switch(label);
+ row.appendChild(s.render());
+ s.setEnabled(_this.config.debug[name]);
+ s.change = function (value) {
+ _this.config.debug[name] = value;
+ };
+ rows.appendChild(row);
+ };
+ makeItem("Bones", "bones");
+ makeItem("Regions", "regions");
+ makeItem("Meshes", "meshes");
+ makeItem("Bounds", "bounds");
+ makeItem("Paths", "paths");
+ makeItem("Clipping", "clipping");
+ makeItem("Points", "points");
+ makeItem("Hulls", "hulls");
+ settingsButton.classList.add("spine-player-button-icon-settings-selected");
+ popup.show(function () {
+ settingsButton.classList.remove("spine-player-button-icon-settings-selected");
+ popup.dom.remove();
+ _this.lastPopup = null;
+ });
+ this.lastPopup = popup;
+ };
+ SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
+ var _this = this;
+ if (requestNextFrame === void 0) { requestNextFrame = true; }
+ if (requestNextFrame && !this.stopRequestAnimationFrame)
+ requestAnimationFrame(function () { return _this.drawFrame(); });
+ this.time.update();
+ var delta = this.time.delta;
+ if (delta !== -1) {
+ var ctx = this.context;
+ var gl = ctx.gl;
+ var doc = document;
+ var isFullscreen = doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement;
+ var bg = new spine.Color().setFromString(isFullscreen ? this.config.fullScreenBackgroundColor : this.config.backgroundColor);
+ gl.clearColor(bg.r, bg.g, bg.b, bg.a);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+ this.loadingScreen.backgroundColor.setFromColor(bg);
+ this.loadingScreen.draw(this.assetManager.isLoadingComplete());
+ if (this.assetManager.isLoadingComplete() && this.skeleton == null)
+ this.loadSkeleton();
+ this.sceneRenderer.resize(spine.webgl.ResizeMode.Expand);
+ if (this.loaded) {
+ if (!this.paused && this.config.animation) {
+ delta *= this.speed;
+ var animationDuration = this.animationState.getCurrent(0).animation.duration;
+ this.playTime += delta;
+ while (this.playTime >= animationDuration && animationDuration != 0) {
+ this.playTime -= animationDuration;
+ }
+ this.playTime = Math.max(0, Math.min(this.playTime, animationDuration));
+ this.timelineSlider.setValue(this.playTime / animationDuration);
+ this.animationState.update(delta);
+ this.animationState.apply(this.skeleton);
+ }
+ this.skeleton.updateWorldTransform();
+ var viewport = {
+ x: this.currentViewport.x - this.currentViewport.padLeft,
+ y: this.currentViewport.y - this.currentViewport.padBottom,
+ width: this.currentViewport.width + this.currentViewport.padLeft + this.currentViewport.padRight,
+ height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
+ };
+ var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / this.config.viewport.transitionTime;
+ if (this.previousViewport && transitionAlpha < 1) {
+ var oldViewport = {
+ x: this.previousViewport.x - this.previousViewport.padLeft,
+ y: this.previousViewport.y - this.previousViewport.padBottom,
+ width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
+ height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
+ };
+ viewport = {
+ x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+ y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+ width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+ height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+ };
+ }
+ var devicePixelRatio = window.devicePixelRatio || 1;
+ var viewportSize = this.scale(viewport.width, viewport.height, this.canvas.width, this.canvas.height);
+ this.sceneRenderer.camera.zoom = viewport.width * devicePixelRatio / viewportSize.x;
+ this.sceneRenderer.camera.position.x = viewport.x + viewport.width / 2;
+ this.sceneRenderer.camera.position.y = viewport.y + viewport.height / 2;
+ this.sceneRenderer.begin();
+ if (this.config.backgroundImage && this.config.backgroundImage.url) {
+ var bgImage = this.assetManager.get(this.config.backgroundImage.url);
+ if (!(this.config.backgroundImage.hasOwnProperty("x") && this.config.backgroundImage.hasOwnProperty("y") && this.config.backgroundImage.hasOwnProperty("width") && this.config.backgroundImage.hasOwnProperty("height"))) {
+ this.sceneRenderer.drawTexture(bgImage, viewport.x, viewport.y, viewport.width, viewport.height);
+ }
+ else {
+ this.sceneRenderer.drawTexture(bgImage, this.config.backgroundImage.x, this.config.backgroundImage.y, this.config.backgroundImage.width, this.config.backgroundImage.height);
+ }
+ }
+ this.sceneRenderer.drawSkeleton(this.skeleton, this.config.premultipliedAlpha);
+ this.sceneRenderer.skeletonDebugRenderer.drawBones = this.config.debug.bones;
+ this.sceneRenderer.skeletonDebugRenderer.drawBoundingBoxes = this.config.debug.bounds;
+ this.sceneRenderer.skeletonDebugRenderer.drawClipping = this.config.debug.clipping;
+ this.sceneRenderer.skeletonDebugRenderer.drawMeshHull = this.config.debug.hulls;
+ this.sceneRenderer.skeletonDebugRenderer.drawPaths = this.config.debug.paths;
+ this.sceneRenderer.skeletonDebugRenderer.drawRegionAttachments = this.config.debug.regions;
+ this.sceneRenderer.skeletonDebugRenderer.drawMeshTriangles = this.config.debug.meshes;
+ this.sceneRenderer.drawSkeletonDebug(this.skeleton, this.config.premultipliedAlpha);
+ var controlBones = this.config.controlBones;
+ var selectedBones = this.selectedBones;
+ var skeleton = this.skeleton;
+ gl.lineWidth(2);
+ for (var i = 0; i < controlBones.length; i++) {
+ var bone = skeleton.findBone(controlBones[i]);
+ if (!bone)
+ continue;
+ var colorInner = selectedBones[i] !== null ? SpinePlayer.HOVER_COLOR_INNER : SpinePlayer.NON_HOVER_COLOR_INNER;
+ var colorOuter = selectedBones[i] !== null ? SpinePlayer.HOVER_COLOR_OUTER : SpinePlayer.NON_HOVER_COLOR_OUTER;
+ this.sceneRenderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
+ this.sceneRenderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
+ }
+ gl.lineWidth(1);
+ if (this.config.viewport.debugRender) {
+ this.sceneRenderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, spine.Color.GREEN);
+ this.sceneRenderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, spine.Color.RED);
+ }
+ this.sceneRenderer.end();
+ this.sceneRenderer.camera.zoom = 0;
+ }
+ }
+ };
+ SpinePlayer.prototype.scale = function (sourceWidth, sourceHeight, targetWidth, targetHeight) {
+ var targetRatio = targetHeight / targetWidth;
+ var sourceRatio = sourceHeight / sourceWidth;
+ var scale = targetRatio > sourceRatio ? targetWidth / sourceWidth : targetHeight / sourceHeight;
+ var temp = new spine.Vector2();
+ temp.x = sourceWidth * scale;
+ temp.y = sourceHeight * scale;
+ return temp;
+ };
+ SpinePlayer.prototype.loadSkeleton = function () {
+ var _this = this;
+ if (this.loaded)
+ return;
+ if (this.assetManager.hasErrors()) {
+ this.showError("Error: assets could not be loaded.
" + escapeHtml(JSON.stringify(this.assetManager.getErrors()))); + return; + } + var atlas = this.assetManager.get(this.config.atlasUrl); + var skeletonData; + if (this.config.jsonUrl) { + var jsonText = this.assetManager.get(this.config.jsonUrl); + var json = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas)); + try { + skeletonData = json.readSkeletonData(jsonText); + } + catch (e) { + this.showError("Error: could not load skeleton .json.
" + e.toString()); + return; + } + } + else { + var binaryData = this.assetManager.get(this.config.skelUrl); + var binary = new spine.SkeletonBinary(new spine.AtlasAttachmentLoader(atlas)); + try { + skeletonData = binary.readSkeletonData(binaryData); + } + catch (e) { + this.showError("Error: could not load skeleton .skel.
" + e.toString()); + return; + } + } + this.skeleton = new spine.Skeleton(skeletonData); + var stateData = new spine.AnimationStateData(skeletonData); + stateData.defaultMix = this.config.defaultMix; + this.animationState = new spine.AnimationState(stateData); + if (this.config.controlBones) { + this.config.controlBones.forEach(function (bone) { + if (!skeletonData.findBone(bone)) { + _this.showError("Error: control bone '" + bone + "' does not exist in skeleton."); + } + }); + } + if (!this.config.skin) { + if (skeletonData.skins.length > 0) { + this.config.skin = skeletonData.skins[0].name; + } + } + if (this.config.skins && this.config.skin.length > 0) { + this.config.skins.forEach(function (skin) { + if (!_this.skeleton.data.findSkin(skin)) { + _this.showError("Error: skin '" + skin + "' in selectable skin list does not exist in skeleton."); + return; + } + }); + } + if (this.config.skin) { + if (!this.skeleton.data.findSkin(this.config.skin)) { + this.showError("Error: skin '" + this.config.skin + "' does not exist in skeleton."); + return; + } + this.skeleton.setSkinByName(this.config.skin); + this.skeleton.setSlotsToSetupPose(); + } + if (!this.config.viewport) { + this.config.viewport = { + animations: {}, + debugRender: false, + transitionTime: 0.2 + }; + } + if (typeof this.config.viewport.debugRender === "undefined") + this.config.viewport.debugRender = false; + if (typeof this.config.viewport.transitionTime === "undefined") + this.config.viewport.transitionTime = 0.2; + if (!this.config.viewport.animations) { + this.config.viewport.animations = {}; + } + else { + Object.getOwnPropertyNames(this.config.viewport.animations).forEach(function (animation) { + if (!skeletonData.findAnimation(animation)) { + _this.showError("Error: animation '" + animation + "' for which a viewport was specified does not exist in skeleton."); + return; + } + }); + } + if (this.config.animations && this.config.animations.length > 0) { + this.config.animations.forEach(function (animation) { + if (!_this.skeleton.data.findAnimation(animation)) { + _this.showError("Error: animation '" + animation + "' in selectable animation list does not exist in skeleton."); + return; + } + }); + if (!this.config.animation) { + this.config.animation = this.config.animations[0]; + } + } + if (!this.config.animation) { + if (skeletonData.animations.length > 0) { + this.config.animation = skeletonData.animations[0].name; + } + } + if (this.config.animation) { + if (!skeletonData.findAnimation(this.config.animation)) { + this.showError("Error: animation '" + this.config.animation + "' does not exist in skeleton."); + return; + } + this.play(); + this.timelineSlider.change = function (percentage) { + _this.pause(); + var animationDuration = _this.animationState.getCurrent(0).animation.duration; + var time = animationDuration * percentage; + _this.animationState.update(time - _this.playTime); + _this.animationState.apply(_this.skeleton); + _this.skeleton.updateWorldTransform(); + _this.playTime = time; + }; + } + if (this.config.touch) this.setupInput(); + if (skeletonData.skins.length == 1 || (this.config.skins && this.config.skins.length == 1)) + this.skinButton.classList.add("spine-player-hidden"); + if (skeletonData.animations.length == 1 || (this.config.animations && this.config.animations.length == 1)) + this.animationButton.classList.add("spine-player-hidden"); + this.config.success(this); + this.loaded = true; + }; + SpinePlayer.prototype.setupInput = function () { + var _this = this; + var controlBones = this.config.controlBones; + var selectedBones = this.selectedBones = new Array(this.config.controlBones.length); + var canvas = this.canvas; + var input = new spine.webgl.Input(canvas); + var target = null; + var coords = new spine.webgl.Vector3(); + var temp = new spine.webgl.Vector3(); + var temp2 = new spine.Vector2(); + var skeleton = this.skeleton; + var renderer = this.sceneRenderer; + input.addListener({ + down: function (x, y) { + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + if (!bone) + continue; + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { + target = bone; + } + } + }, + up: function (x, y) { + if (target) { + target = null; + } + else { + if (!_this.config.showControls) + return; + if (_this.paused) + _this.play(); + else + _this.pause(); + } + }, + dragged: function (x, y) { + if (target != null) { + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + if (target.parent !== null) { + target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y)); + target.x = temp2.x; + target.y = temp2.y; + } + else { + target.x = coords.x - skeleton.x; + target.y = coords.y - skeleton.y; + } + } + }, + moved: function (x, y) { + for (var i = 0; i < controlBones.length; i++) { + var bone = skeleton.findBone(controlBones[i]); + if (!bone) + continue; + renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height); + if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) { + selectedBones[i] = bone; + } + else { + selectedBones[i] = null; + } + } + } + }); + var mouseOverControls = true; + var mouseOverCanvas = false; + document.addEventListener("mousemove", function (ev) { + if (ev instanceof MouseEvent) { + handleHover(ev.clientX, ev.clientY); + } + }); + document.addEventListener("touchmove", function (ev) { + if (ev instanceof TouchEvent) { + var touches = ev.changedTouches; + if (touches.length > 0) { + var touch = touches[0]; + handleHover(touch.clientX, touch.clientY); + } + } + }); + var handleHover = function (mouseX, mouseY) { + if (!_this.config.showControls) + return; + var popup = findWithClass(_this.dom, "spine-player-popup"); + mouseOverControls = overlap(mouseX, mouseY, _this.playerControls.getBoundingClientRect()); + mouseOverCanvas = overlap(mouseX, mouseY, _this.canvas.getBoundingClientRect()); + clearTimeout(_this.cancelId); + var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused; + if (hide) { + _this.playerControls.classList.add("spine-player-controls-hidden"); + } + else { + _this.playerControls.classList.remove("spine-player-controls-hidden"); + } + if (!mouseOverControls && popup.length == 0 && !_this.paused) { + var remove = function () { + if (!_this.paused) + _this.playerControls.classList.add("spine-player-controls-hidden"); + }; + _this.cancelId = setTimeout(remove, 1000); + } + }; + var overlap = function (mouseX, mouseY, rect) { + var x = mouseX - rect.left; + var y = mouseY - rect.top; + return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height; + }; + }; + SpinePlayer.prototype.play = function () { + var _this = this; + this.paused = false; + // var remove = function () { + // if (!_this.paused) + // _this.playerControls.classList.add("spine-player-controls-hidden"); + // }; + // this.cancelId = setTimeout(remove, 1000); + // this.playButton.classList.remove("spine-player-button-icon-play"); + // this.playButton.classList.add("spine-player-button-icon-pause"); + if (this.config.animation) { + if (!this.animationState.getCurrent(0)) { + this.setAnimation(this.config.animation); + } + } + }; + SpinePlayer.prototype.pause = function () { + this.paused = true; + // this.playerControls.classList.remove("spine-player-controls-hidden"); + clearTimeout(this.cancelId); + // this.playButton.classList.remove("spine-player-button-icon-pause"); + // this.playButton.classList.add("spine-player-button-icon-play"); + }; + SpinePlayer.prototype.setAnimation = function (animation, loop) { + if (loop === void 0) { loop = true; } + this.previousViewport = this.currentViewport; + var animViewport = this.calculateAnimationViewport(animation); + var viewport = { + x: animViewport.x, + y: animViewport.y, + width: animViewport.width, + height: animViewport.height, + padLeft: "10%", + padRight: "10%", + padTop: "10%", + padBottom: "10%" + }; + var globalViewport = this.config.viewport; + if (typeof globalViewport.x !== "undefined" && typeof globalViewport.y !== "undefined" && typeof globalViewport.width !== "undefined" && typeof globalViewport.height !== "undefined") { + viewport.x = globalViewport.x; + viewport.y = globalViewport.y; + viewport.width = globalViewport.width; + viewport.height = globalViewport.height; + } + if (typeof globalViewport.padLeft !== "undefined") + viewport.padLeft = globalViewport.padLeft; + if (typeof globalViewport.padRight !== "undefined") + viewport.padRight = globalViewport.padRight; + if (typeof globalViewport.padTop !== "undefined") + viewport.padTop = globalViewport.padTop; + if (typeof globalViewport.padBottom !== "undefined") + viewport.padBottom = globalViewport.padBottom; + var userAnimViewport = this.config.viewport.animations[animation]; + if (userAnimViewport) { + if (typeof userAnimViewport.x !== "undefined" && typeof userAnimViewport.y !== "undefined" && typeof userAnimViewport.width !== "undefined" && typeof userAnimViewport.height !== "undefined") { + viewport.x = userAnimViewport.x; + viewport.y = userAnimViewport.y; + viewport.width = userAnimViewport.width; + viewport.height = userAnimViewport.height; + } + if (typeof userAnimViewport.padLeft !== "undefined") + viewport.padLeft = userAnimViewport.padLeft; + if (typeof userAnimViewport.padRight !== "undefined") + viewport.padRight = userAnimViewport.padRight; + if (typeof userAnimViewport.padTop !== "undefined") + viewport.padTop = userAnimViewport.padTop; + if (typeof userAnimViewport.padBottom !== "undefined") + viewport.padBottom = userAnimViewport.padBottom; + } + viewport.padLeft = this.percentageToWorldUnit(viewport.width, viewport.padLeft); + viewport.padRight = this.percentageToWorldUnit(viewport.width, viewport.padRight); + viewport.padBottom = this.percentageToWorldUnit(viewport.height, viewport.padBottom); + viewport.padTop = this.percentageToWorldUnit(viewport.height, viewport.padTop); + this.currentViewport = viewport; + this.viewportTransitionStart = performance.now(); + this.animationState.clearTracks(); + this.skeleton.setToSetupPose(); + this.animationState.setAnimation(0, animation, loop); + }; + SpinePlayer.prototype.percentageToWorldUnit = function (size, percentageOrAbsolute) { + if (typeof percentageOrAbsolute === "string") { + return size * parseFloat(percentageOrAbsolute.substr(0, percentageOrAbsolute.length - 1)) / 100; + } + else { + return percentageOrAbsolute; + } + }; + SpinePlayer.prototype.calculateAnimationViewport = function (animationName) { + var animation = this.skeleton.data.findAnimation(animationName); + this.animationState.clearTracks(); + this.skeleton.setToSetupPose(); + this.animationState.setAnimationWith(0, animation, true); + var steps = 100; + var stepTime = animation.duration > 0 ? animation.duration / steps : 0; + var minX = 100000000; + var maxX = -100000000; + var minY = 100000000; + var maxY = -100000000; + var offset = new spine.Vector2(); + var size = new spine.Vector2(); + for (var i = 0; i < steps; i++) { + this.animationState.update(stepTime); + this.animationState.apply(this.skeleton); + this.skeleton.updateWorldTransform(); + this.skeleton.getBounds(offset, size); + if (!isNaN(offset.x) && !isNaN(offset.y) && !isNaN(size.x) && !isNaN(size.y)) { + minX = Math.min(offset.x, minX); + maxX = Math.max(offset.x + size.x, maxX); + minY = Math.min(offset.y, minY); + maxY = Math.max(offset.y + size.y, maxY); + } + else { + console.log("Bounds of animation " + animationName + " are NaN"); + } + } + offset.x = minX; + offset.y = minY; + size.x = maxX - minX; + size.y = maxY - minY; + return { + x: offset.x, + y: offset.y, + width: size.x, + height: size.y + }; + }; + SpinePlayer.prototype.stopRendering = function () { + this.stopRequestAnimationFrame = true; + }; + SpinePlayer.prototype.setFps = function (value) { + this.config.fps = value; + this.time.setFps(value); + }; + SpinePlayer.prototype.updateViewport = function (viewport) { + var _currentViewport = this.currentViewport; + _currentViewport.padLeft = this.percentageToWorldUnit(_currentViewport.width, viewport.padLeft); + _currentViewport.padRight = this.percentageToWorldUnit(_currentViewport.width, viewport.padRight); + _currentViewport.padBottom = this.percentageToWorldUnit(_currentViewport.height, viewport.padBottom); + _currentViewport.padTop = this.percentageToWorldUnit(_currentViewport.height, viewport.padTop); + this.currentViewport = _currentViewport; + }; + SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25); + SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1); + SpinePlayer.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5); + SpinePlayer.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8); + return SpinePlayer; + }()); + spine.SpinePlayer = SpinePlayer; + function isContained(dom, needle) { + if (dom === needle) + return true; + var findRecursive = function (dom, needle) { + for (var i = 0; i < dom.children.length; i++) { + var child = dom.children[i]; + if (child === needle) + return true; + if (findRecursive(child, needle)) + return true; + } + return false; + }; + return findRecursive(dom, needle); + } + function findWithId(dom, id) { + var found = new Array(); + var findRecursive = function (dom, id, found) { + for (var i = 0; i < dom.children.length; i++) { + var child = dom.children[i]; + if (child.id === id) + found.push(child); + findRecursive(child, id, found); + } + }; + findRecursive(dom, id, found); + return found; + } + function findWithClass(dom, className) { + var found = new Array(); + var findRecursive = function (dom, className, found) { + for (var i = 0; i < dom.children.length; i++) { + var child = dom.children[i]; + if (child.classList.contains(className)) + found.push(child); + findRecursive(child, className, found); + } + }; + findRecursive(dom, className, found); + return found; + } + function createElement(html) { + var dom = document.createElement("div"); + dom.innerHTML = html; + return dom.children[0]; + } + function removeClass(elements, clazz) { + for (var i = 0; i < elements.length; i++) { + elements[i].classList.remove(clazz); + } + } + function escapeHtml(str) { + if (!str) + return ""; + return str + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/"/g, """) + .replace(/'/g, "'"); + } +})(spine || (spine = {})); +var spine; +(function (spine) { + var SpinePlayerEditor = (function () { + function SpinePlayerEditor(parent) { + this.prefix = "\n\n\n\n".trim(); + this.postfix = ""; + this.timerId = 0; + this.render(parent); + } + SpinePlayerEditor.prototype.render = function (parent) { + var _this = this; + var dom = "\n\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t";
+ parent.innerHTML = dom;
+ var codeElement = parent.getElementsByClassName("spine-player-editor-code")[0];
+ this.player = parent.getElementsByClassName("spine-player-editor-player")[0];
+ requestAnimationFrame(function () {
+ _this.code = CodeMirror(codeElement, {
+ lineNumbers: true,
+ tabSize: 3,
+ indentUnit: 3,
+ indentWithTabs: true,
+ scrollBarStyle: "native",
+ mode: "htmlmixed",
+ theme: "monokai"
+ });
+ _this.code.on("change", function () {
+ _this.startPlayer();
+ });
+ _this.setCode(SpinePlayerEditor.DEFAULT_CODE);
+ });
+ };
+ SpinePlayerEditor.prototype.setPreAndPostfix = function (prefix, postfix) {
+ this.prefix = prefix;
+ this.postfix = postfix;
+ this.startPlayer();
+ };
+ SpinePlayerEditor.prototype.setCode = function (code) {
+ this.code.setValue(code);
+ this.startPlayer();
+ };
+ SpinePlayerEditor.prototype.startPlayer = function () {
+ var _this = this;
+ clearTimeout(this.timerId);
+ this.timerId = setTimeout(function () {
+ var code = _this.code.getDoc().getValue();
+ code = _this.prefix + code + _this.postfix;
+ code = window.btoa(code);
+ _this.player.src = "";
+ _this.player.src = "data:text/html;base64," + code;
+ }, 500);
+ };
+ SpinePlayerEditor.DEFAULT_CODE = "\n\n\n\n\n\n\n\t\t".trim();
+ return SpinePlayerEditor;
+ }());
+ spine.SpinePlayerEditor = SpinePlayerEditor;
+})(spine || (spine = {}));
+export default spine;
\ No newline at end of file
diff --git a/template/showcase/src/libs/wallpaper_engine.js b/template/showcase/src/libs/wallpaper_engine.js
new file mode 100644
index 0000000..0f39ac1
--- /dev/null
+++ b/template/showcase/src/libs/wallpaper_engine.js
@@ -0,0 +1,67 @@
+import { publish } from '@/libs/events'
+
+window.wallpaperPropertyListener = {
+ applyGeneralProperties: function (properties) {
+ if (properties.fps) {
+ // use custom event
+ publish('fps', properties.fps.value)
+ }
+ },
+ applyUserProperties: function (properties) {
+ if (properties.logo) {
+ publish('logo', properties.logo.value)
+ }
+ if (properties.logoratio) {
+ if (properties.logoratio.value) {
+ publish('logoratio', properties.logoratio.value)
+ }
+ }
+ if (properties.logoopacity) {
+ if (properties.logoopacity.value) {
+ publish('logoopacity', properties.logoopacity.value)
+ }
+ }
+ if (properties.logoimage) {
+ if (properties.logoimage.value) {
+ publish('logoimage', properties.logoimage.value)
+ // var logoImage = 'file:///' + properties.logoimage.value;
+ // settings.setLogo(logoImage, true);
+ } else {
+ publish('logoimage', null)
+ // settings.resetLogo();
+ }
+ }
+ if (properties.background) {
+ if (properties.background.value) {
+ publish('background', properties.background.value)
+ // var background = 'file:///' + properties.background.value;
+ // settings.setBackground(background);
+ } else {
+ publish('background', null)
+ // settings.resetBackground();
+ }
+ }
+ if (properties.position) {
+ if (!properties.position.value) {
+ publish('position', null)
+ // settings.positionReset();
+ }
+ }
+ if (properties.paddingleft) {
+ publish('paddingleft', properties.paddingleft.value)
+ // settings.positionPadding("padLeft", properties.paddingleft.value)
+ }
+ if (properties.paddingright) {
+ publish('paddingright', properties.paddingright.value)
+ // settings.positionPadding("padRight", properties.paddingright.value)
+ }
+ if (properties.paddingtop) {
+ publish('paddingtop', properties.paddingtop.value)
+ // settings.positionPadding("padTop", properties.paddingtop.value)
+ }
+ if (properties.paddingbottom) {
+ publish('paddingbottom', properties.paddingbottom.value)
+ // settings.positionPadding("padBottom", properties.paddingbottom.value)
+ }
+ },
+};
\ No newline at end of file
diff --git a/template/showcase/src/main.jsx b/template/showcase/src/main.jsx
new file mode 100644
index 0000000..be3fbce
--- /dev/null
+++ b/template/showcase/src/main.jsx
@@ -0,0 +1,5 @@
+import { render } from 'preact'
+import { App } from './app'
+import './index.css'
+
+render(