UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2025-12-20 09:16:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3408
spine-ts/build/spine-player.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

24853
spine-ts/build/spine-player.js
View File

File diff suppressed because one or more lines are too long

2
spine-ts/build/spine-player.js.map
View File

File diff suppressed because one or more lines are too long

126
spine-ts/player/src/Player.ts
View File

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