[ts] Fixed popup not being hidden, clean up.

This commit is contained in:
Nathan Sweet 2021-06-30 20:16:15 -04:00
parent 87b9821e00
commit 97bc10ba28
4 changed files with 14171 additions and 14218 deletions

View File

@ -1680,7 +1680,7 @@ declare module spine.webgl {
}
}
declare module spine {
interface SpinePlayerConfig {
export interface SpinePlayerConfig {
jsonUrl: string;
jsonField: string;
binaryUrl: string;
@ -1737,7 +1737,7 @@ declare module spine {
loading: (player: SpinePlayer, delta: number) => void;
downloader: spine.Downloader;
}
interface Viewport {
export interface Viewport {
x: number;
y: number;
width: number;
@ -1747,7 +1747,7 @@ declare module spine {
padTop: string | number;
padBottom: string | number;
}
class SpinePlayer {
export class SpinePlayer {
private config;
parent: HTMLElement;
dom: HTMLElement;
@ -1766,7 +1766,7 @@ declare module spine {
private playTime;
private selectedBones;
private cancelId;
private lastPopup;
popup: Popup;
error: boolean;
skeleton: Skeleton;
animationState: AnimationState;
@ -1792,12 +1792,24 @@ declare module spine {
private calculateAnimationViewport;
private drawFrame;
stopRendering(): void;
private hidePopup;
private showSpeedDialog;
private showAnimationsDialog;
private showSkinsDialog;
private showSettingsDialog;
private showError;
}
class Popup {
private id;
private button;
private player;
dom: HTMLElement;
private className;
constructor(id: string, button: HTMLElement, player: SpinePlayer, parent: HTMLElement, htmlContent: string);
hide(id: string): boolean;
show(): void;
}
export {};
}
declare function CodeMirror(el: Element, config: any): void;
declare module spine {

View File

@ -3702,7 +3702,7 @@ var spine;
break;
case spine.SpacingMode.Proportional:
var sum = 0;
for (var i = 0; i < boneCount;) {
for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i];
var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) {
@ -12252,42 +12252,29 @@ var spine;
SpinePlayer.prototype.stopRendering = function () {
this.stopRequestAnimationFrame = true;
};
SpinePlayer.prototype.hidePopup = function (id) {
return this.popup && this.popup.hide(id);
};
SpinePlayer.prototype.showSpeedDialog = function (speedButton) {
var _this = this;
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Speed") {
this.lastPopup = null;
speedButton.classList.remove("spine-player-button-icon-speed-selected");
var id = "speed";
if (this.hidePopup(id))
return;
}
}
var popup = new Popup(this.dom, this.playerControls, "\n<div class=\"spine-player-popup-title\">Speed</div>\n<hr>\n<div class=\"spine-player-row\" style=\"align-items:center;padding:8px\">\n<div class=\"spine-player-column\">\n\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom:4px\"></div>\n\t<div class=\"spine-player-row\" style=\"justify-content:space-between\"><div>0.1x</div><div>1x</div><div>2x</div></div>\n</div>\n</div>");
var popup = new Popup(id, speedButton, this, this.playerControls, "\n<div class=\"spine-player-popup-title\">Speed</div>\n<hr>\n<div class=\"spine-player-row\" style=\"align-items:center;padding:8px\">\n<div class=\"spine-player-column\">\n\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom:4px\"></div>\n\t<div class=\"spine-player-row\" style=\"justify-content:space-between\"><div>0.1x</div><div>1x</div><div>2x</div></div>\n</div>\n</div>");
var slider = new Slider(2, 0.1, true);
findWithClass(popup.dom, "spine-player-speed-slider").appendChild(slider.create());
slider.setValue(this.speed / 2);
slider.change = function (percentage) { return _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;
popup.show();
};
SpinePlayer.prototype.showAnimationsDialog = function (animationsButton) {
var _this = this;
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Animations") {
this.lastPopup = null;
animationsButton.classList.remove("spine-player-button-icon-animations-selected");
var id = "animations";
if (this.hidePopup(id))
return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length)
return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Animations</div><hr><ul class=\"spine-player-list\"></ul>");
var popup = new Popup(id, animationsButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Animations</div><hr><ul class=\"spine-player-list\"></ul>");
var rows = findWithClass(popup.dom, "spine-player-list");
this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0)
@ -12306,27 +12293,16 @@ var spine;
_this.play();
};
});
animationsButton.classList.add("spine-player-button-icon-animations-selected");
popup.show(function () {
animationsButton.classList.remove("spine-player-button-icon-animations-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
};
SpinePlayer.prototype.showSkinsDialog = function (skinButton) {
var _this = this;
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Skins") {
this.lastPopup = null;
skinButton.classList.remove("spine-player-button-icon-skins-selected");
var id = "skins";
if (this.hidePopup(id))
return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length)
return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Skins</div><hr><ul class=\"spine-player-list\"></ul>");
var popup = new Popup(id, skinButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Skins</div><hr><ul class=\"spine-player-list\"></ul>");
var rows = findWithClass(popup.dom, "spine-player-list");
this.skeleton.data.skins.forEach(function (skin) {
if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0)
@ -12344,27 +12320,16 @@ var spine;
_this.skeleton.setSlotsToSetupPose();
};
});
skinButton.classList.add("spine-player-button-icon-skins-selected");
popup.show(function () {
skinButton.classList.remove("spine-player-button-icon-skins-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
};
SpinePlayer.prototype.showSettingsDialog = function (settingsButton) {
var _this = this;
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Debug") {
this.lastPopup = null;
settingsButton.classList.remove("spine-player-button-icon-settings-selected");
var id = "settings";
if (this.hidePopup(id))
return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length)
return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Debug</div><hr><ul class=\"spine-player-list\"></li>");
var popup = new Popup(id, settingsButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Debug</div><hr><ul class=\"spine-player-list\"></li>");
var rows = findWithClass(popup.dom, "spine-player-list");
var makeItem = function (label, name) {
var row = createElement("<li class=\"spine-player-list-item\"></li>");
@ -12383,13 +12348,7 @@ var spine;
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;
popup.show();
};
SpinePlayer.prototype.showError = function (message, error) {
if (error === void 0) { error = null; }
@ -12410,35 +12369,49 @@ var spine;
}());
spine.SpinePlayer = SpinePlayer;
var Popup = (function () {
function Popup(player, parent, htmlContent) {
function Popup(id, button, player, parent, htmlContent) {
this.id = id;
this.button = button;
this.player = player;
this.dom = createElement("<div class=\"spine-player-popup spine-player-hidden\"></div>");
this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom);
this.className = "spine-player-button-icon-" + id + "-selected";
}
Popup.prototype.show = function (dismissedListener) {
Popup.prototype.hide = function (id) {
this.dom.remove();
this.button.classList.remove(this.className);
if (this.id == id) {
this.player.popup = null;
return true;
}
};
Popup.prototype.show = function () {
var _this = this;
this.player.popup = this;
this.button.classList.add(this.className);
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";
var playerDom = _this.player.dom;
var bottomOffset = Math.abs(playerDom.getBoundingClientRect().bottom - playerDom.getBoundingClientRect().bottom);
var rightOffset = Math.abs(playerDom.getBoundingClientRect().right - playerDom.getBoundingClientRect().right);
_this.dom.style.maxHeight = (playerDom.clientHeight - bottomOffset - rightOffset) + "px";
};
requestAnimationFrame(resize);
var justClicked = true;
var windowClickListener = function (event) {
if (justClicked) {
if (justClicked || _this.player.popup != _this) {
justClicked = false;
return;
}
if (!_this.dom.contains(event.target)) {
_this.dom.remove();
window.removeEventListener("click", windowClickListener);
dismissedListener();
_this.button.classList.remove(_this.className);
_this.player.popup = null;
dismissed = true;
}
};

File diff suppressed because one or more lines are too long

View File

@ -196,7 +196,7 @@ module spine {
private playTime = 0;
private selectedBones: Bone[];
private cancelId = 0;
private lastPopup: Popup;
popup: Popup;
/* True if the player is unable to load or render the skeleton. */
public error: boolean;
@ -749,7 +749,7 @@ module spine {
let delta = this.time.delta;
// Load the skeleton if the assets are ready.
var loading = this.assetManager.isLoadingComplete();
let loading = this.assetManager.isLoadingComplete();
if (!this.skeleton && loading) this.loadSkeleton();
let skeleton = this.skeleton;
let config = this.config;
@ -781,7 +781,7 @@ module spine {
}
// Determine the viewport.
var viewport = this.viewport;
let viewport = this.viewport;
viewport.x = this.currentViewport.x - (this.currentViewport.padLeft as number),
viewport.y = this.currentViewport.y - (this.currentViewport.padBottom as number),
viewport.width = this.currentViewport.width + (this.currentViewport.padLeft as number) + (this.currentViewport.padRight as number),
@ -880,16 +880,15 @@ module spine {
this.stopRequestAnimationFrame = true;
}
private hidePopup (id: string): boolean {
return this.popup && this.popup.hide(id);
}
private showSpeedDialog (speedButton: HTMLElement) {
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Speed") {
this.lastPopup = null;
speedButton.classList.remove("spine-player-button-icon-speed-selected")
return;
}
}
let popup = new Popup(this.dom, this.playerControls, /*html*/`
let id = "speed";
if (this.hidePopup(id)) return;
let popup = new Popup(id, speedButton, this, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Speed</div>
<hr>
<div class="spine-player-row" style="align-items:center;padding:8px">
@ -902,27 +901,15 @@ module spine {
findWithClass(popup.dom, "spine-player-speed-slider").appendChild(slider.create());
slider.setValue(this.speed / 2);
slider.change = (percentage) => this.speed = percentage * 2;
speedButton.classList.add("spine-player-button-icon-speed-selected")
popup.show(() => {
speedButton.classList.remove("spine-player-button-icon-speed-selected")
popup.dom.remove();
this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
}
private showAnimationsDialog (animationsButton: HTMLElement) {
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Animations") {
this.lastPopup = null;
animationsButton.classList.remove("spine-player-button-icon-animations-selected")
return;
}
}
let id = "animations";
if (this.hidePopup(id)) return;
if (!this.skeleton || !this.skeleton.data.animations.length) return;
let popup = new Popup(this.dom, this.playerControls,
let popup = new Popup(id, animationsButton, this, this.playerControls,
/*html*/`<div class="spine-player-popup-title">Animations</div><hr><ul class="spine-player-list"></ul>`);
let rows = findWithClass(popup.dom, "spine-player-list");
@ -944,27 +931,15 @@ module spine {
this.play();
}
});
animationsButton.classList.add("spine-player-button-icon-animations-selected")
popup.show(() => {
animationsButton.classList.remove("spine-player-button-icon-animations-selected")
popup.dom.remove();
this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
}
private showSkinsDialog (skinButton: HTMLElement) {
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Skins") {
this.lastPopup = null;
skinButton.classList.remove("spine-player-button-icon-skins-selected")
return;
}
}
let id = "skins";
if (this.hidePopup(id)) return;
if (!this.skeleton || !this.skeleton.data.animations.length) return;
let popup = new Popup(this.dom, this.playerControls,
let popup = new Popup(id, skinButton, this, this.playerControls,
/*html*/`<div class="spine-player-popup-title">Skins</div><hr><ul class="spine-player-list"></ul>`);
let rows = findWithClass(popup.dom, "spine-player-list");
@ -984,28 +959,15 @@ module spine {
this.skeleton.setSlotsToSetupPose();
}
});
skinButton.classList.add("spine-player-button-icon-skins-selected")
popup.show(() => {
skinButton.classList.remove("spine-player-button-icon-skins-selected")
popup.dom.remove();
this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
}
private showSettingsDialog (settingsButton: HTMLElement) {
if (this.lastPopup) {
this.lastPopup.dom.remove();
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Debug") {
this.lastPopup = null;
settingsButton.classList.remove("spine-player-button-icon-settings-selected")
return;
}
}
let id = "settings";
if (this.hidePopup(id)) return;
if (!this.skeleton || !this.skeleton.data.animations.length) return;
let popup = new Popup(this.dom, this.playerControls, /*html*/`<div class="spine-player-popup-title">Debug</div><hr><ul class="spine-player-list"></li>`);
let popup = new Popup(id, settingsButton, this, this.playerControls, /*html*/`<div class="spine-player-popup-title">Debug</div><hr><ul class="spine-player-list"></li>`);
let rows = findWithClass(popup.dom, "spine-player-list");
let makeItem = (label: string, name: string) => {
@ -1017,7 +979,6 @@ module spine {
s.change = (value) => debug[name] = value;
rows.appendChild(row);
};
makeItem("Bones", "bones");
makeItem("Regions", "regions");
makeItem("Meshes", "meshes");
@ -1026,14 +987,7 @@ module spine {
makeItem("Clipping", "clipping");
makeItem("Points", "points");
makeItem("Hulls", "hulls");
settingsButton.classList.add("spine-player-button-icon-settings-selected")
popup.show(() => {
settingsButton.classList.remove("spine-player-button-icon-settings-selected")
popup.dom.remove();
this.lastPopup = null;
});
this.lastPopup = popup;
popup.show();
}
private showError (message: string, error: Error = null) {
@ -1052,41 +1006,55 @@ module spine {
class Popup {
public dom: HTMLElement;
private className: string;
constructor (private player: HTMLElement, parent: HTMLElement, htmlContent: string) {
constructor (private id: string, private button: HTMLElement, private player: SpinePlayer, parent: HTMLElement, htmlContent: string) {
this.dom = createElement(/*html*/`<div class="spine-player-popup spine-player-hidden"></div>`);
this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom);
this.className = "spine-player-button-icon-" + id + "-selected";
}
show (dismissedListener: () => void) {
hide (id: string): boolean {
this.dom.remove();
this.button.classList.remove(this.className);
if (this.id == id) {
this.player.popup = null;
return true;
}
}
show () {
this.player.popup = this;
this.button.classList.add(this.className);
this.dom.classList.remove("spine-player-hidden");
// Make sure the popup isn't bigger than the player.
let dismissed = false;
let resize = () => {
if (!dismissed) requestAnimationFrame(resize);
let bottomOffset = Math.abs(this.dom.getBoundingClientRect().bottom - this.player.getBoundingClientRect().bottom);
let rightOffset = Math.abs(this.dom.getBoundingClientRect().right - this.player.getBoundingClientRect().right);
let maxHeight = this.player.clientHeight - bottomOffset - rightOffset;
this.dom.style.maxHeight = maxHeight + "px";
let playerDom = this.player.dom;
let bottomOffset = Math.abs(playerDom.getBoundingClientRect().bottom - playerDom.getBoundingClientRect().bottom);
let rightOffset = Math.abs(playerDom.getBoundingClientRect().right - playerDom.getBoundingClientRect().right);
this.dom.style.maxHeight = (playerDom.clientHeight - bottomOffset - rightOffset) + "px";
}
requestAnimationFrame(resize);
// Dismiss when clicking somewhere outside the popup.
let justClicked = true;
let windowClickListener = (event: any) => {
if (justClicked) {
if (justClicked || this.player.popup != this) {
justClicked = false;
return;
}
if (!this.dom.contains(event.target)) {
this.dom.remove();
window.removeEventListener("click", windowClickListener);
dismissedListener();
this.button.classList.remove(this.className);
this.player.popup = null;
dismissed = true;
}
}
};
window.addEventListener("click", windowClickListener);
}
}