UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-02-06 07:14:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ts][player] Popup stays within bounds of player.

Browse Source
This commit is contained in:
badlogic 2018-11-22 15:53:44 +01:00
parent 7910e7cc3e
commit 980ae773d3
5 changed files with 12055 additions and 12026 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3402
spine-ts/build/spine-widget.d.ts vendored
View File

File diff suppressed because it is too large Load Diff

20648
spine-ts/build/spine-widget.js
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

2
spine-ts/widget/example/player-test.html
View File

@ -15,7 +15,7 @@ body {
</style>
<body>
<div id="container" style="width: 480px; height: 320px;"></div>
<div id="container" style="width: 480px; height: 200px;"></div>
</body>
<script>
new spine.SpinePlayer(document.getElementById("container"), {

27
spine-ts/widget/src/Player.ts
View File

@ -108,7 +108,7 @@
class Popup {
public dom: HTMLElement;
constructor(parent: HTMLElement, htmlContent: string) {
constructor(private player: HTMLElement, parent: HTMLElement, htmlContent: string) {
this.dom = createElement(/*html*/`
<div class="spine-player-popup spine-player-hidden">
</div>
@ -119,6 +119,20 @@
show (dismissedListener = () => {}) {
this.dom.classList.remove("spine-player-hidden");
// Make sure the popup isn't bigger than the player.
var 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";
}
requestAnimationFrame(resize);
// Dismiss when clicking somewhere else outside
// the popup
var justClicked = true;
let windowClickListener = (event: any) => {
if (justClicked) {
@ -129,6 +143,7 @@
this.dom.parentNode.removeChild(this.dom);
window.removeEventListener("click", windowClickListener);
dismissedListener();
dismissed = true;
}
}
window.addEventListener("click", windowClickListener);
@ -218,6 +233,8 @@
if (this.change) this.change(percentage);
}
});
return this.slider;
}
@ -454,7 +471,7 @@
}
showSpeedDialog (speedButton: HTMLElement) {
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Speed</div>
<hr>
<div class="spine-player-row" style="user-select: none; align-items: center; padding: 8px;">
@ -484,7 +501,7 @@
showAnimationsDialog (animationsButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Animations</div>
<hr>
<ul class="spine-player-list"></ul>
@ -525,7 +542,7 @@
showSkinsDialog (skinButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Skins</div>
<hr>
<ul class="spine-player-list"></ul>
@ -567,7 +584,7 @@
showSettingsDialog (settingsButton: HTMLElement) {
if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
let popup = new Popup(this.playerControls, /*html*/`
let popup = new Popup(this.dom, this.playerControls, /*html*/`
<div class="spine-player-popup-title">Debug</div>
<hr>
<ul class="spine-player-list">