[ts][player] Fixed hover detection.

This commit is contained in:
badlogic 2018-11-15 14:39:28 +01:00
parent bf00309ad1
commit bd56277432
5 changed files with 12005 additions and 11996 deletions

View File

@ -9643,6 +9643,8 @@ var spine;
settingsButton.onclick = function () {
_this.showSettingsDialog();
};
var oldCanvasWidth = 0;
var oldCanvasHeight = 0;
fullscreenButton.onclick = function () {
var doc = document;
if (doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
@ -9665,6 +9667,8 @@ var spine;
player.mozRequestFullScreen();
else if (player.msRequestFullscreen)
player.msRequestFullscreen();
oldCanvasWidth = _this.canvas.width;
oldCanvasHeight = _this.canvas.height;
}
};
window.onresize = function () {
@ -9770,6 +9774,7 @@ var spine;
var bg = new spine.Color().setFromString(this.config.backgroundColor);
gl.clearColor(bg.r, bg.g, bg.b, bg.a);
gl.clear(gl.COLOR_BUFFER_BIT);
this.loadingScreen.backgroundColor.setFromColor(bg);
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
if (this.assetManager.isLoadingComplete() && this.skeleton == null)
this.loadSkeleton();
@ -10006,18 +10011,15 @@ var spine;
handleHover();
}
});
var mouseOverChildren = false;
canvas.onmouseover = function (ev) {
mouseOverChildren = false;
};
canvas.onmouseout = function (ev) {
if (ev.relatedTarget == null) {
mouseOverChildren = false;
var mouseOverChildren = true;
document.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
var rect = _this.playerControls.getBoundingClientRect();
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
mouseOverChildren = x >= 0 && x <= _this.playerControls.clientWidth && y >= 0 && y <= _this.playerControls.clientHeight;
}
else {
mouseOverChildren = isContained(_this.dom, ev.relatedTarget);
}
};
});
var cancelId = 0;
var handleHover = function () {
if (!_this.config.showControls)

File diff suppressed because one or more lines are too long

View File

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

View File

@ -398,6 +398,8 @@
this.showSettingsDialog();
}
let oldCanvasWidth = 0;
let oldCanvasHeight = 0;
fullscreenButton.onclick = () => {
let doc = document as any;
if(doc.fullscreenElement || doc.webkitFullscreenElement || doc.mozFullScreenElement || doc.msFullscreenElement) {
@ -405,12 +407,15 @@
else if (doc.mozCancelFullScreen) doc.mozCancelFullScreen();
else if (doc.webkitExitFullscreen) doc.webkitExitFullscreen()
else if (doc.msExitFullscreen) doc.msExitFullscreen();
} else {
let player = dom as any;
if (player.requestFullscreen) player.requestFullscreen();
else if (player.webkitRequestFullScreen) player.webkitRequestFullScreen();
else if (player.mozRequestFullScreen) player.mozRequestFullScreen();
else if (player.msRequestFullscreen) player.msRequestFullscreen();
oldCanvasWidth = this.canvas.width;
oldCanvasHeight = this.canvas.height;
}
};
@ -568,6 +573,7 @@
gl.clear(gl.COLOR_BUFFER_BIT);
// Display loading screen
this.loadingScreen.backgroundColor.setFromColor(bg);
this.loadingScreen.draw(this.assetManager.isLoadingComplete());
// Have we finished loading the asset? Then set things up
@ -839,18 +845,19 @@
// For the manual hover to work, we need to disable
// hidding the controls if the mouse/touch entered
// the clickable area of a child of the controls
let mouseOverChildren = false;
canvas.onmouseover = (ev) => {
mouseOverChildren = false;
}
canvas.onmouseout = (ev) => {
if (ev.relatedTarget == null) {
mouseOverChildren = false;
} else {
mouseOverChildren = isContained(this.dom, (ev.relatedTarget as any));
}
// the clickable area of a child of the controls.
// For this we need to register a mouse handler on
// the document and see if we are within the canvas
// area :/
var mouseOverChildren = true;
document.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) {
let rect = this.playerControls.getBoundingClientRect();
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
mouseOverChildren = x >= 0 && x <= this.playerControls.clientWidth && y >= 0 && y <= this.playerControls.clientHeight;
}
});
let cancelId = 0;
let handleHover = () => {