UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-26 22:49:01 +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; error: (widget: SpinePlayer, msg: string) => void;
} }
class SpinePlayer { class SpinePlayer {
parent: HTMLElement | string;
private config; private config;
static HOVER_COLOR_INNER: Color; static HOVER_COLOR_INNER: Color;
static HOVER_COLOR_OUTER: Color; static HOVER_COLOR_OUTER: Color;
@ -1770,6 +1769,7 @@ declare module spine {
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
private selectedBones; private selectedBones;
private parent;
constructor(parent: HTMLElement | string, config: SpinePlayerConfig); constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void; showError(error: string): void;

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

@ -9562,7 +9562,6 @@ var spine;
}()); }());
var SpinePlayer = (function () { var SpinePlayer = (function () {
function SpinePlayer(parent, config) { function SpinePlayer(parent, config) {
this.parent = parent;
this.config = config; this.config = config;
this.time = new spine.TimeKeeper(); this.time = new spine.TimeKeeper();
this.paused = true; this.paused = true;
@ -9574,8 +9573,8 @@ var spine;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
this.cancelId = 0; this.cancelId = 0;
if (typeof parent === "string") if (typeof parent === "string")
parent = document.getElementById(parent); this.parent = document.getElementById(parent);
parent.appendChild(this.render()); this.parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
if (!config) if (!config)
@ -10175,33 +10174,45 @@ var spine;
}); });
var mouseOverControls = true; var mouseOverControls = true;
var mouseOverCanvas = false; var mouseOverCanvas = false;
parent.addEventListener("mousemove", function (ev) { document.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
if (!_this.config.showControls) handleHover(ev.clientX, ev.clientY);
return; }
var popup = findWithClass(_this.dom, "spine-player-popup"); });
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect()); document.addEventListener("touchmove", function (ev) {
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect()); if (ev instanceof TouchEvent) {
clearTimeout(_this.cancelId); var touches = ev.changedTouches;
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused; if (touches.length > 0) {
if (hide) { var touch = touches[0];
_this.playerControls.classList.add("spine-player-controls-hidden"); handleHover(touch.clientX, touch.clientY);
}
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 (ev, rect) { var handleHover = function (mouseX, mouseY) {
var x = ev.clientX - rect.left; if (!_this.config.showControls)
var y = ev.clientY - rect.top; 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; 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 viewportTransitionStart = 0;
private selectedBones: Bone[]; private selectedBones: Bone[];
private parent: HTMLElement;
constructor(public parent: HTMLElement | string, private config: SpinePlayerConfig) { constructor(parent: HTMLElement | string, private config: SpinePlayerConfig) {
if (typeof parent === "string") parent = document.getElementById(parent); if (typeof parent === "string") this.parent = document.getElementById(parent);
parent.appendChild(this.render()); this.parent.appendChild(this.render());
} }
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig { validateConfig(config: SpinePlayerConfig): SpinePlayerConfig {
@ -1020,13 +1021,27 @@
// area :/ // area :/
var mouseOverControls = true; var mouseOverControls = true;
var mouseOverCanvas = false; var mouseOverCanvas = false;
parent.addEventListener("mousemove", (ev: UIEvent) => { document.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) { 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"); let popup = findWithClass(this.dom, "spine-player-popup");
mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect()); mouseOverControls = overlap(mouseX, mouseY, this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect()); mouseOverCanvas = overlap(mouseX, mouseY, this.canvas.getBoundingClientRect());
clearTimeout(this.cancelId); clearTimeout(this.cancelId);
let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused; let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide) { if (hide) {
@ -1040,12 +1055,11 @@
}; };
this.cancelId = setTimeout(remove, 1000); this.cancelId = setTimeout(remove, 1000);
} }
} }
});
let overlap = (ev: MouseEvent, rect: DOMRect | ClientRect): boolean => { let overlap = (mouseX: number, mouseY: number, rect: DOMRect | ClientRect): boolean => {
let x = ev.clientX - rect.left; let x = mouseX - rect.left;
let y = ev.clientY - rect.top; let y = mouseY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height; return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
} }
} }