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

[ts][player] Handle touch events for hover.

Browse Source
This commit is contained in:
badlogic 2018-12-17 18:35:29 +01:00
parent 65511c6581
commit d1172cc785
4 changed files with 65 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1741,7 +1741,6 @@ declare module spine {
error: (widget: SpinePlayer, msg: string) => void;
}
class SpinePlayer {
parent: HTMLElement | string;
private config;
static HOVER_COLOR_INNER: Color;
static HOVER_COLOR_OUTER: Color;
@ -1770,6 +1769,7 @@ declare module spine {
private previousViewport;
private viewportTransitionStart;
private selectedBones;
private parent;
constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void;

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

@ -9562,7 +9562,6 @@ var spine;
}());
var SpinePlayer = (function () {
function SpinePlayer(parent, config) {
this.parent = parent;
this.config = config;
this.time = new spine.TimeKeeper();
this.paused = true;
@ -9574,8 +9573,8 @@ var spine;
this.viewportTransitionStart = 0;
this.cancelId = 0;
if (typeof parent === "string")
parent = document.getElementById(parent);
parent.appendChild(this.render());
this.parent = document.getElementById(parent);
this.parent.appendChild(this.render());
}
SpinePlayer.prototype.validateConfig = function (config) {
if (!config)
@ -10175,33 +10174,45 @@ var spine;
});
var mouseOverControls = true;
var mouseOverCanvas = false;
parent.addEventListener("mousemove", function (ev) {
document.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
if (!_this.config.showControls)
return;
var popup = findWithClass(_this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
clearTimeout(_this.cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) {
_this.playerControls.classList.add("spine-player-controls-hidden");
}
else {
_this.playerControls.classList.remove("spine-player-controls-hidden");
}
if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () {
if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden");
};
_this.cancelId = setTimeout(remove, 1000);
handleHover(ev.clientX, ev.clientY);
}
});
document.addEventListener("touchmove", function (ev) {
if (ev instanceof TouchEvent) {
var touches = ev.changedTouches;
if (touches.length > 0) {
var touch = touches[0];
handleHover(touch.clientX, touch.clientY);
}
}
});
var overlap = function (ev, rect) {
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
var handleHover = function (mouseX, mouseY) {
if (!_this.config.showControls)
return;
var popup = findWithClass(_this.dom, "spine-player-popup");
mouseOverControls = overlap(mouseX, mouseY, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(mouseX, mouseY, _this.canvas.getBoundingClientRect());
clearTimeout(_this.cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) {
_this.playerControls.classList.add("spine-player-controls-hidden");
}
else {
_this.playerControls.classList.remove("spine-player-controls-hidden");
}
if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () {
if (!_this.paused)
_this.playerControls.classList.add("spine-player-controls-hidden");
};
_this.cancelId = setTimeout(remove, 1000);
}
};
var overlap = function (mouseX, mouseY, rect) {
var x = mouseX - rect.left;
var y = mouseY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
};
};

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

File diff suppressed because one or more lines are too long

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

@ -310,10 +310,11 @@
private viewportTransitionStart = 0;
private selectedBones: Bone[];
private parent: HTMLElement;
constructor(public parent: HTMLElement | string, private config: SpinePlayerConfig) {
if (typeof parent === "string") parent = document.getElementById(parent);
parent.appendChild(this.render());
constructor(parent: HTMLElement | string, private config: SpinePlayerConfig) {
if (typeof parent === "string") this.parent = document.getElementById(parent);
this.parent.appendChild(this.render());
}
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
@ -1020,13 +1021,27 @@
// area :/
var mouseOverControls = true;
var mouseOverCanvas = false;
parent.addEventListener("mousemove", (ev: UIEvent) => {
document.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) {
if (!this.config.showControls) return;
handleHover(ev.clientX, ev.clientY);
}
});
document.addEventListener("touchmove", (ev: UIEvent) => {
if (ev instanceof TouchEvent) {
var touches = ev.changedTouches;
if (touches.length > 0) {
var touch = touches[0];
handleHover(touch.clientX, touch.clientY);
}
}
});
let handleHover = (mouseX: number, mouseY: number) => {
if (!this.config.showControls) return;
let popup = findWithClass(this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect());
mouseOverControls = overlap(mouseX, mouseY, this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(mouseX, mouseY, this.canvas.getBoundingClientRect());
clearTimeout(this.cancelId);
let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide) {
@ -1040,12 +1055,11 @@
};
this.cancelId = setTimeout(remove, 1000);
}
}
});
}
let overlap = (ev: MouseEvent, rect: DOMRect | ClientRect): boolean => {
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
let overlap = (mouseX: number, mouseY: number, rect: DOMRect | ClientRect): boolean => {
let x = mouseX - rect.left;
let y = mouseY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
}
}