mirror of
https://github.com/EsotericSoftware/spine-runtimes.git
synced 2025-12-21 09:46:02 +08:00
[ts] Player, sorted exported classes near the top of the file.
This commit is contained in:
Nathan Sweet
parent
7b0d71568b
commit
1818446ead
@ -28,17 +28,6 @@
|
|||||||
*****************************************************************************/
|
*****************************************************************************/
|
||||||
|
|
||||||
module spine {
|
module spine {
|
||||||
export interface Viewport {
|
|
||||||
x: number,
|
|
||||||
y: number,
|
|
||||||
width: number,
|
|
||||||
height: number,
|
|
||||||
padLeft: string | number
|
|
||||||
padRight: string | number
|
|
||||||
padTop: string | number
|
|
||||||
padBottom: string | number
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SpinePlayerConfig {
|
export interface SpinePlayerConfig {
|
||||||
/* The URL of the skeleton JSON file (.json). */
|
/* The URL of the skeleton JSON file (.json). */
|
||||||
jsonUrl: string
|
jsonUrl: string
|
||||||
@ -140,155 +129,15 @@ module spine {
|
|||||||
downloader: spine.Downloader
|
downloader: spine.Downloader
|
||||||
}
|
}
|
||||||
|
|
||||||
class Popup {
|
export interface Viewport {
|
||||||
public dom: HTMLElement;
|
x: number,
|
||||||
|
y: number,
|
||||||
constructor(private player: HTMLElement, parent: HTMLElement, htmlContent: string) {
|
width: number,
|
||||||
this.dom = createElement(/*html*/`
|
height: number,
|
||||||
<div class="spine-player-popup spine-player-hidden">
|
padLeft: string | number
|
||||||
</div>
|
padRight: string | number
|
||||||
`);
|
padTop: string | number
|
||||||
this.dom.innerHTML = htmlContent;
|
padBottom: string | number
|
||||||
parent.appendChild(this.dom);
|
|
||||||
}
|
|
||||||
|
|
||||||
show (dismissedListener: () => void) {
|
|
||||||
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) {
|
|
||||||
justClicked = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!isContained(this.dom, event.target)) {
|
|
||||||
this.dom.remove();
|
|
||||||
window.removeEventListener("click", windowClickListener);
|
|
||||||
dismissedListener();
|
|
||||||
dismissed = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
window.addEventListener("click", windowClickListener);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Switch {
|
|
||||||
private switch: HTMLElement;
|
|
||||||
private enabled = false;
|
|
||||||
public change: (value: boolean) => void;
|
|
||||||
|
|
||||||
constructor(private text: string) {}
|
|
||||||
|
|
||||||
render(): HTMLElement {
|
|
||||||
this.switch = createElement(/*html*/`
|
|
||||||
<div class="spine-player-switch">
|
|
||||||
<span class="spine-player-switch-text">${this.text}</span>
|
|
||||||
<div class="spine-player-switch-knob-area">
|
|
||||||
<div class="spine-player-switch-knob"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
this.switch.addEventListener("click", () => {
|
|
||||||
this.setEnabled(!this.enabled);
|
|
||||||
if (this.change) this.change(this.enabled);
|
|
||||||
})
|
|
||||||
return this.switch;
|
|
||||||
}
|
|
||||||
|
|
||||||
setEnabled(enabled: boolean) {
|
|
||||||
if (enabled) this.switch.classList.add("active");
|
|
||||||
else this.switch.classList.remove("active");
|
|
||||||
this.enabled = enabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
isEnabled(): boolean {
|
|
||||||
return this.enabled;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class Slider {
|
|
||||||
private slider: HTMLElement;
|
|
||||||
private value: HTMLElement;
|
|
||||||
private knob: HTMLElement;
|
|
||||||
public change: (percentage: number) => void;
|
|
||||||
|
|
||||||
constructor(public snaps = 0, public snapPercentage = 0.1, public big = false) { }
|
|
||||||
|
|
||||||
render(): HTMLElement {
|
|
||||||
this.slider = createElement(/*html*/`
|
|
||||||
<div class="spine-player-slider ${this.big ? "big": ""}">
|
|
||||||
<div class="spine-player-slider-value"></div>
|
|
||||||
<!--<div class="spine-player-slider-knob"></div>-->
|
|
||||||
</div>
|
|
||||||
`);
|
|
||||||
this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
|
|
||||||
// this.knob = findWithClass(this.slider, "spine-player-slider-knob")[0];
|
|
||||||
this.setValue(0);
|
|
||||||
|
|
||||||
let input = new spine.webgl.Input(this.slider);
|
|
||||||
var dragging = false;
|
|
||||||
input.addListener({
|
|
||||||
down: (x, y) => {
|
|
||||||
dragging = true;
|
|
||||||
this.value.classList.add("hovering");
|
|
||||||
},
|
|
||||||
up: (x, y) => {
|
|
||||||
dragging = false;
|
|
||||||
let 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: (x, y) => {
|
|
||||||
if (dragging) {
|
|
||||||
let 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: (x, y) => {
|
|
||||||
let 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
setValue(percentage: number): number {
|
|
||||||
percentage = Math.max(0, Math.min(1, percentage));
|
|
||||||
if (this.snaps > 0) {
|
|
||||||
let modulo = percentage % (1 / this.snaps);
|
|
||||||
// floor
|
|
||||||
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) + "%";
|
|
||||||
// this.knob.style.left = "" + (-8 + percentage * this.slider.clientWidth) + "px";
|
|
||||||
return percentage;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export class SpinePlayer {
|
export class SpinePlayer {
|
||||||
@ -1259,6 +1108,157 @@ module spine {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
class Popup {
|
||||||
|
public dom: HTMLElement;
|
||||||
|
|
||||||
|
constructor(private player: HTMLElement, 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);
|
||||||
|
}
|
||||||
|
|
||||||
|
show (dismissedListener: () => void) {
|
||||||
|
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) {
|
||||||
|
justClicked = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!isContained(this.dom, event.target)) {
|
||||||
|
this.dom.remove();
|
||||||
|
window.removeEventListener("click", windowClickListener);
|
||||||
|
dismissedListener();
|
||||||
|
dismissed = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener("click", windowClickListener);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Switch {
|
||||||
|
private switch: HTMLElement;
|
||||||
|
private enabled = false;
|
||||||
|
public change: (value: boolean) => void;
|
||||||
|
|
||||||
|
constructor(private text: string) {}
|
||||||
|
|
||||||
|
render(): HTMLElement {
|
||||||
|
this.switch = createElement(/*html*/`
|
||||||
|
<div class="spine-player-switch">
|
||||||
|
<span class="spine-player-switch-text">${this.text}</span>
|
||||||
|
<div class="spine-player-switch-knob-area">
|
||||||
|
<div class="spine-player-switch-knob"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
this.switch.addEventListener("click", () => {
|
||||||
|
this.setEnabled(!this.enabled);
|
||||||
|
if (this.change) this.change(this.enabled);
|
||||||
|
})
|
||||||
|
return this.switch;
|
||||||
|
}
|
||||||
|
|
||||||
|
setEnabled(enabled: boolean) {
|
||||||
|
if (enabled) this.switch.classList.add("active");
|
||||||
|
else this.switch.classList.remove("active");
|
||||||
|
this.enabled = enabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
isEnabled(): boolean {
|
||||||
|
return this.enabled;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class Slider {
|
||||||
|
private slider: HTMLElement;
|
||||||
|
private value: HTMLElement;
|
||||||
|
private knob: HTMLElement;
|
||||||
|
public change: (percentage: number) => void;
|
||||||
|
|
||||||
|
constructor(public snaps = 0, public snapPercentage = 0.1, public big = false) { }
|
||||||
|
|
||||||
|
render(): HTMLElement {
|
||||||
|
this.slider = createElement(/*html*/`
|
||||||
|
<div class="spine-player-slider ${this.big ? "big": ""}">
|
||||||
|
<div class="spine-player-slider-value"></div>
|
||||||
|
<!--<div class="spine-player-slider-knob"></div>-->
|
||||||
|
</div>
|
||||||
|
`);
|
||||||
|
this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
|
||||||
|
// this.knob = findWithClass(this.slider, "spine-player-slider-knob")[0];
|
||||||
|
this.setValue(0);
|
||||||
|
|
||||||
|
let input = new spine.webgl.Input(this.slider);
|
||||||
|
var dragging = false;
|
||||||
|
input.addListener({
|
||||||
|
down: (x, y) => {
|
||||||
|
dragging = true;
|
||||||
|
this.value.classList.add("hovering");
|
||||||
|
},
|
||||||
|
up: (x, y) => {
|
||||||
|
dragging = false;
|
||||||
|
let 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: (x, y) => {
|
||||||
|
if (dragging) {
|
||||||
|
let 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: (x, y) => {
|
||||||
|
let 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
setValue(percentage: number): number {
|
||||||
|
percentage = Math.max(0, Math.min(1, percentage));
|
||||||
|
if (this.snaps > 0) {
|
||||||
|
let modulo = percentage % (1 / this.snaps);
|
||||||
|
// floor
|
||||||
|
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) + "%";
|
||||||
|
// this.knob.style.left = "" + (-8 + percentage * this.slider.clientWidth) + "px";
|
||||||
|
return percentage;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function isContained(dom: HTMLElement, needle: HTMLElement): boolean {
|
function isContained(dom: HTMLElement, needle: HTMLElement): boolean {
|
||||||
if (dom === needle) return true;
|
if (dom === needle) return true;
|
||||||
let findRecursive = (dom: HTMLElement, needle: HTMLElement) => {
|
let findRecursive = (dom: HTMLElement, needle: HTMLElement) => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user