mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 09:46:02 +08:00
[ts][player] popup is dismissed if button is pressed a second time.
This commit is contained in:
parent
c09b0673ac
commit
6596319c36
2
spine-ts/build/spine-widget.d.ts
vendored
2
spine-ts/build/spine-widget.d.ts
vendored
@ -1698,6 +1698,7 @@ declare module spine {
|
||||
atlasUrl: string;
|
||||
animation: string;
|
||||
animations: string[];
|
||||
defaultMix: number;
|
||||
skin: string;
|
||||
skins: string[];
|
||||
controlBones: string[];
|
||||
@ -1772,6 +1773,7 @@ declare module spine {
|
||||
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
|
||||
showError(error: string): void;
|
||||
render(): HTMLElement;
|
||||
private lastPopup;
|
||||
showSpeedDialog(speedButton: HTMLElement): void;
|
||||
showAnimationsDialog(animationsButton: HTMLElement): void;
|
||||
showSkinsDialog(skinButton: HTMLElement): void;
|
||||
|
||||
@ -9457,7 +9457,7 @@ var spine;
|
||||
return;
|
||||
}
|
||||
if (!isContained(_this.dom, event.target)) {
|
||||
_this.dom.parentNode.removeChild(_this.dom);
|
||||
_this.dom.remove();
|
||||
window.removeEventListener("click", windowClickListener);
|
||||
dismissedListener();
|
||||
dismissed = true;
|
||||
@ -9631,6 +9631,8 @@ var spine;
|
||||
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) {
|
||||
@ -9753,6 +9755,13 @@ var spine;
|
||||
};
|
||||
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<div class=\"spine-player-popup-title\">Speed</div>\n\t\t\t\t<hr>\n\t\t\t\t<div class=\"spine-player-row\" style=\"user-select: none; align-items: center; padding: 8px;\">\n\t\t\t\t\t<div class=\"spine-player-column\">\n\t\t\t\t\t\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom: 4px;\"></div>\n\t\t\t\t\t\t<div class=\"spine-player-row\" style=\"justify-content: space-between;\">\n\t\t\t\t\t\t\t<div>0.1x</div>\n\t\t\t\t\t\t\t<div>1x</div>\n\t\t\t\t\t\t\t<div>2x</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
|
||||
var sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
|
||||
var slider = new Slider(2, 0.1, true);
|
||||
@ -9765,9 +9774,17 @@ var spine;
|
||||
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<div class=\"spine-player-popup-title\">Animations</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
|
||||
@ -9793,9 +9810,17 @@ var spine;
|
||||
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<div class=\"spine-player-popup-title\">Skins</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\"></ul>\n\t\t\t");
|
||||
@ -9821,9 +9846,17 @@ var spine;
|
||||
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<div class=\"spine-player-popup-title\">Debug</div>\n\t\t\t\t<hr>\n\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t</li>\n\t\t\t");
|
||||
@ -9850,6 +9883,7 @@ var spine;
|
||||
popup.show(function () {
|
||||
settingsButton.classList.remove("spine-player-button-icon-settings-selected");
|
||||
});
|
||||
this.lastPopup = popup;
|
||||
};
|
||||
SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
|
||||
var _this = this;
|
||||
@ -9979,7 +10013,7 @@ var spine;
|
||||
}
|
||||
this.skeleton = new spine.Skeleton(skeletonData);
|
||||
var stateData = new spine.AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
stateData.defaultMix = this.config.defaultMix;
|
||||
this.animationState = new spine.AnimationState(stateData);
|
||||
if (this.config.controlBones) {
|
||||
this.config.controlBones.forEach(function (bone) {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -53,6 +53,9 @@
|
||||
/* Optional: list of animation names from which the user can choose. */
|
||||
animations: string[]
|
||||
|
||||
/* Optional: the default mix time used to switch between two animations. */
|
||||
defaultMix: number
|
||||
|
||||
/* Optional: the name of the skin to be set. Default: the default skin. */
|
||||
skin: string
|
||||
|
||||
@ -158,7 +161,7 @@
|
||||
return;
|
||||
}
|
||||
if (!isContained(this.dom, event.target)) {
|
||||
this.dom.parentNode.removeChild(this.dom);
|
||||
this.dom.remove();
|
||||
window.removeEventListener("click", windowClickListener);
|
||||
dismissedListener();
|
||||
dismissed = true;
|
||||
@ -354,6 +357,9 @@
|
||||
if (typeof config.showControls === "undefined")
|
||||
config.showControls = true;
|
||||
|
||||
if (typeof config.defaultMix === "undefined")
|
||||
config.defaultMix = 0.25;
|
||||
|
||||
return config;
|
||||
}
|
||||
|
||||
@ -507,7 +513,14 @@
|
||||
return dom;
|
||||
}
|
||||
|
||||
private lastPopup: Popup;
|
||||
showSpeedDialog (speedButton: HTMLElement) {
|
||||
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;
|
||||
}
|
||||
let popup = new Popup(this.dom, this.playerControls, /*html*/`
|
||||
<div class="spine-player-popup-title">Speed</div>
|
||||
<hr>
|
||||
@ -533,9 +546,16 @@
|
||||
popup.show(() => {
|
||||
speedButton.classList.remove("spine-player-button-icon-speed-selected")
|
||||
});
|
||||
this.lastPopup = popup;
|
||||
}
|
||||
|
||||
showAnimationsDialog (animationsButton: HTMLElement) {
|
||||
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;
|
||||
|
||||
let popup = new Popup(this.dom, this.playerControls, /*html*/`
|
||||
@ -574,9 +594,16 @@
|
||||
popup.show(() => {
|
||||
animationsButton.classList.remove("spine-player-button-icon-animations-selected")
|
||||
});
|
||||
this.lastPopup = popup;
|
||||
}
|
||||
|
||||
showSkinsDialog (skinButton: HTMLElement) {
|
||||
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;
|
||||
|
||||
let popup = new Popup(this.dom, this.playerControls, /*html*/`
|
||||
@ -616,9 +643,16 @@
|
||||
popup.show(() => {
|
||||
skinButton.classList.remove("spine-player-button-icon-skins-selected")
|
||||
});
|
||||
this.lastPopup = popup;
|
||||
}
|
||||
|
||||
showSettingsDialog (settingsButton: HTMLElement) {
|
||||
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;
|
||||
|
||||
let popup = new Popup(this.dom, this.playerControls, /*html*/`
|
||||
@ -653,6 +687,7 @@
|
||||
popup.show(() => {
|
||||
settingsButton.classList.remove("spine-player-button-icon-settings-selected")
|
||||
});
|
||||
this.lastPopup = popup;
|
||||
}
|
||||
|
||||
drawFrame (requestNextFrame = true) {
|
||||
@ -808,7 +843,7 @@
|
||||
}
|
||||
this.skeleton = new Skeleton(skeletonData);
|
||||
let stateData = new AnimationStateData(skeletonData);
|
||||
stateData.defaultMix = 0.2;
|
||||
stateData.defaultMix = this.config.defaultMix;
|
||||
this.animationState = new AnimationState(stateData);
|
||||
|
||||
// Check if all controllable bones are in the skeleton
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user