From c21b366d038b1e4833ab6886901c04e89395eae5 Mon Sep 17 00:00:00 2001 From: badlogic Date: Mon, 17 Dec 2018 15:44:24 +0100 Subject: [PATCH] [ts][player] Renamed build output. --- spine-ts/build/spine-all.d.ts | 165 --- spine-ts/build/spine-all.js | 1278 ----------------- spine-ts/build/spine-all.js.map | 2 +- .../{spine-widget.d.ts => spine-player.d.ts} | 58 - .../{spine-widget.js => spine-player.js} | 334 +---- spine-ts/build/spine-player.js.map | 1 + spine-ts/build/spine-widget.js.map | 1 - 7 files changed, 3 insertions(+), 1836 deletions(-) rename spine-ts/build/{spine-widget.d.ts => spine-player.d.ts} (97%) rename spine-ts/build/{spine-widget.js => spine-player.js} (97%) create mode 100644 spine-ts/build/spine-player.js.map delete mode 100644 spine-ts/build/spine-widget.js.map diff --git a/spine-ts/build/spine-all.d.ts b/spine-ts/build/spine-all.d.ts index 358b63caf..c2dafbe47 100644 --- a/spine-ts/build/spine-all.d.ts +++ b/spine-ts/build/spine-all.d.ts @@ -1772,168 +1772,3 @@ declare module spine.threejs { static toThreeJsTextureWrap(wrap: TextureWrap): THREE.Wrapping; } } -declare module spine { - interface Viewport { - x: number; - y: number; - width: number; - height: number; - padLeft: string | number; - padRight: string | number; - padTop: string | number; - padBottom: string | number; - } - interface SpinePlayerConfig { - jsonUrl: string; - atlasUrl: string; - animation: string; - animations: string[]; - defaultMix: number; - skin: string; - skins: string[]; - controlBones: string[]; - premultipliedAlpha: boolean; - showControls: boolean; - debug: { - bones: boolean; - regions: boolean; - meshes: boolean; - bounds: boolean; - paths: boolean; - clipping: boolean; - points: boolean; - hulls: boolean; - }; - viewport: { - x: number; - y: number; - width: number; - height: number; - padLeft: string | number; - padRight: string | number; - padTop: string | number; - padBottom: string | number; - animations: Map; - debugRender: boolean; - transitionTime: number; - }; - alpha: boolean; - backgroundColor: string; - backgroundImage: { - url: string; - x: number; - y: number; - width: number; - height: number; - }; - fullScreenBackgroundColor: string; - success: (widget: SpinePlayer) => void; - error: (widget: SpinePlayer, msg: string) => void; - } - class SpinePlayer { - private config; - static HOVER_COLOR_INNER: Color; - static HOVER_COLOR_OUTER: Color; - static NON_HOVER_COLOR_INNER: Color; - static NON_HOVER_COLOR_OUTER: Color; - private sceneRenderer; - private dom; - private playerControls; - private canvas; - private timelineSlider; - private playButton; - private skinButton; - private animationButton; - private context; - private loadingScreen; - private assetManager; - private loaded; - private skeleton; - private animationState; - private time; - private paused; - private playTime; - private speed; - private animationViewports; - private currentViewport; - private previousViewport; - private viewportTransitionStart; - private selectedBones; - constructor(parent: HTMLElement, config: SpinePlayerConfig); - validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; - showError(error: string): void; - render(): HTMLElement; - private lastPopup; - showSpeedDialog(speedButton: HTMLElement): void; - showAnimationsDialog(animationsButton: HTMLElement): void; - showSkinsDialog(skinButton: HTMLElement): void; - showSettingsDialog(settingsButton: HTMLElement): void; - drawFrame(requestNextFrame?: boolean): void; - scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2; - loadSkeleton(): void; - setupInput(): void; - private play(); - private pause(); - private setAnimation(animation); - private percentageToWorldUnit(size, percentageOrAbsolute); - private calculateAnimationViewport(animationName); - } -} -declare module spine { - class SpineWidget { - skeleton: Skeleton; - state: AnimationState; - context: spine.webgl.ManagedWebGLRenderingContext; - canvas: HTMLCanvasElement; - debugRenderer: spine.webgl.SkeletonDebugRenderer; - private config; - private assetManager; - private shader; - private batcher; - private shapes; - private debugShader; - private mvp; - private skeletonRenderer; - private paused; - private lastFrameTime; - private backgroundColor; - private loaded; - private bounds; - constructor(element: HTMLElement | string, config: SpineWidgetConfig); - private validateConfig(config); - private load(); - private render(); - private resize(); - pause(): void; - play(): void; - isPlaying(): boolean; - setAnimation(animationName: string, animationStateListener?: AnimationStateListener2): void; - static loadWidgets(): void; - static loadWidget(widget: HTMLElement): void; - static pageLoaded: boolean; - private static ready(); - static setupDOMListener(): void; - } - class SpineWidgetConfig { - json: string; - jsonContent: any; - atlas: string; - atlasContent: string; - animation: string; - imagesPath: string; - atlasPages: string[]; - atlasPagesContent: string[]; - skin: string; - loop: boolean; - scale: number; - x: number; - y: number; - alpha: boolean; - fitToCanvas: boolean; - backgroundColor: string; - premultipliedAlpha: boolean; - debug: boolean; - success: (widget: SpineWidget) => void; - error: (widget: SpineWidget, msg: string) => void; - } -} diff --git a/spine-ts/build/spine-all.js b/spine-ts/build/spine-all.js index 744a071b4..b2144c4cd 100644 --- a/spine-ts/build/spine-all.js +++ b/spine-ts/build/spine-all.js @@ -10090,1282 +10090,4 @@ var spine; threejs.ThreeJsTexture = ThreeJsTexture; })(threejs = spine.threejs || (spine.threejs = {})); })(spine || (spine = {})); -var spine; -(function (spine) { - var Popup = (function () { - function Popup(player, parent, htmlContent) { - this.player = player; - this.dom = createElement("\n\t\t\t\t
\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; - if (dismissedListener === void 0) { dismissedListener = function () { }; } - 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\t\t\t
\n\t\t\t\t\t
\n\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\t\t
\n\t\t\t\t\t\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.time = new spine.TimeKeeper(); - this.paused = true; - this.playTime = 0; - this.speed = 1; - this.animationViewports = {}; - this.currentViewport = null; - this.previousViewport = null; - this.viewportTransitionStart = 0; - 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) - throw new Error("Please specify the URL of the skeleton JSON 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.premultipliedAlpha) - config.premultipliedAlpha = 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 (!config.debug.bones) - config.debug.bones = false; - if (!config.debug.bounds) - config.debug.bounds = false; - if (!config.debug.clipping) - config.debug.clipping = false; - if (!config.debug.hulls) - config.debug.hulls = false; - if (!config.debug.paths) - config.debug.paths = false; - if (!config.debug.points) - config.debug.points = false; - if (!config.debug.regions) - config.debug.regions = false; - if (!config.debug.meshes) - 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 = "

" + 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\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\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\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); - } - catch (e) { - this.showError("Sorry, your browser does not support WebGL.

Please use the latest version of Firefox, Chrome, Edge, or Safari."); - return dom; - } - this.assetManager = new spine.webgl.AssetManager(this.context); - this.assetManager.loadText(config.jsonUrl); - 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\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
0.1x
\n\t\t\t\t\t\t\t
1x
\n\t\t\t\t\t\t\t
2x
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\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"); - }); - 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
Animations
\n\t\t\t\t
\n\t\t\t\t\n\t\t\t"); - var rows = findWithClass(popup.dom, "spine-player-list")[0]; - this.skeleton.data.animations.forEach(function (animation) { - if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) { - return; - } - var row = createElement("\n\t\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\t\t
    \n\t\t\t\t\t
    • \n\t\t\t\t"); - if (animation.name == _this.config.animation) - row.classList.add("selected"); - findWithClass(row, "selectable-text")[0].innerText = animation.name; - rows.appendChild(row); - row.onclick = function () { - removeClass(rows.children, "selected"); - row.classList.add("selected"); - _this.config.animation = animation.name; - _this.playTime = 0; - _this.setAnimation(animation.name); - }; - }); - animationsButton.classList.add("spine-player-button-icon-animations-selected"); - popup.show(function () { - animationsButton.classList.remove("spine-player-button-icon-animations-selected"); - }); - this.lastPopup = popup; - }; - SpinePlayer.prototype.showSkinsDialog = function (skinButton) { - var _this = this; - if (this.lastPopup) - this.lastPopup.dom.remove(); - if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Skins") { - this.lastPopup = null; - skinButton.classList.remove("spine-player-button-icon-skins-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
    Skins
    \n\t\t\t\t
    \n\t\t\t\t\n\t\t\t"); - var rows = findWithClass(popup.dom, "spine-player-list")[0]; - this.skeleton.data.skins.forEach(function (skin) { - if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0) { - return; - } - var row = createElement("\n\t\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\t\t
    \n\t\t\t\t\t
    • \n\t\t\t\t"); - if (skin.name == _this.config.skin) - row.classList.add("selected"); - findWithClass(row, "selectable-text")[0].innerText = skin.name; - rows.appendChild(row); - row.onclick = function () { - removeClass(rows.children, "selected"); - row.classList.add("selected"); - _this.config.skin = skin.name; - _this.skeleton.setSkinByName(_this.config.skin); - _this.skeleton.setSlotsToSetupPose(); - }; - }); - skinButton.classList.add("spine-player-button-icon-skins-selected"); - popup.show(function () { - skinButton.classList.remove("spine-player-button-icon-skins-selected"); - }); - this.lastPopup = popup; - }; - SpinePlayer.prototype.showSettingsDialog = function (settingsButton) { - var _this = this; - if (this.lastPopup) - this.lastPopup.dom.remove(); - if (this.lastPopup && findWithClass(this.lastPopup.dom, "spine-player-popup-title")[0].textContent == "Debug") { - this.lastPopup = null; - settingsButton.classList.remove("spine-player-button-icon-settings-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
    Debug
    \n\t\t\t\t
    \n\t\t\t\t