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] constructor now takes string in addition to HTMLElement, hover behaviour now similar to YouTube.

Browse Source
This commit is contained in:
badlogic 2018-12-17 18:00:44 +01:00
parent 7a3ec78638
commit d5ee59558a
8 changed files with 101 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
spine-ts/build/spine-all.d.ts vendored
View File

@ -1831,6 +1831,7 @@ 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;
@ -1859,7 +1860,7 @@ declare module spine {
private previousViewport;
private viewportTransitionStart;
private selectedBones;
constructor(parent: HTMLElement, config: SpinePlayerConfig);
constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void;
render(): HTMLElement;

53
spine-ts/build/spine-all.js
View File

@ -10225,6 +10225,7 @@ var spine;
}());
var SpinePlayer = (function () {
function SpinePlayer(parent, config) {
this.parent = parent;
this.config = config;
this.time = new spine.TimeKeeper();
this.paused = true;
@ -10234,6 +10235,8 @@ var spine;
this.currentViewport = null;
this.previousViewport = null;
this.viewportTransitionStart = 0;
if (typeof parent === "string")
parent = document.getElementById(parent);
parent.appendChild(this.render());
}
SpinePlayer.prototype.validateConfig = function (config) {
@ -10791,11 +10794,9 @@ var spine;
target = bone;
}
}
handleHover();
},
up: function (x, y) {
target = null;
handleHover();
},
dragged: function (x, y) {
if (target != null) {
@ -10810,7 +10811,6 @@ var spine;
target.y = coords.y - skeleton.y;
}
}
handleHover();
},
moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) {
@ -10825,34 +10825,41 @@ var spine;
selectedBones[i] = null;
}
}
handleHover();
}
});
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;
}
});
var mouseOverControls = true;
var mouseOverCanvas = false;
var cancelId = 0;
var handleHover = function () {
if (!_this.config.showControls)
return;
clearTimeout(cancelId);
_this.playerControls.classList.remove("spine-player-controls-hidden");
var remove = function () {
parent.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
if (!_this.config.showControls)
return;
var popup = findWithClass(_this.dom, "spine-player-popup");
if (popup.length == 0 && !mouseOverChildren && !_this.paused) {
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
clearTimeout(cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) {
console.log("hidding");
_this.playerControls.classList.add("spine-player-controls-hidden");
}
else {
cancelId = setTimeout(remove, 100);
console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden");
}
};
cancelId = setTimeout(remove, 100);
if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () {
console.log("hidding timeout");
_this.playerControls.classList.add("spine-player-controls-hidden");
};
cancelId = setTimeout(remove, 500);
}
}
});
var overlap = function (ev, rect) {
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
};
};
SpinePlayer.prototype.play = function () {

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

File diff suppressed because one or more lines are too long

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

@ -1741,6 +1741,7 @@ 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;
@ -1769,7 +1770,7 @@ declare module spine {
private previousViewport;
private viewportTransitionStart;
private selectedBones;
constructor(parent: HTMLElement, config: SpinePlayerConfig);
constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void;
render(): HTMLElement;

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

@ -9562,6 +9562,7 @@ var spine;
}());
var SpinePlayer = (function () {
function SpinePlayer(parent, config) {
this.parent = parent;
this.config = config;
this.time = new spine.TimeKeeper();
this.paused = true;
@ -9571,6 +9572,8 @@ var spine;
this.currentViewport = null;
this.previousViewport = null;
this.viewportTransitionStart = 0;
if (typeof parent === "string")
parent = document.getElementById(parent);
parent.appendChild(this.render());
}
SpinePlayer.prototype.validateConfig = function (config) {
@ -10128,11 +10131,9 @@ var spine;
target = bone;
}
}
handleHover();
},
up: function (x, y) {
target = null;
handleHover();
},
dragged: function (x, y) {
if (target != null) {
@ -10147,7 +10148,6 @@ var spine;
target.y = coords.y - skeleton.y;
}
}
handleHover();
},
moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) {
@ -10162,34 +10162,41 @@ var spine;
selectedBones[i] = null;
}
}
handleHover();
}
});
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;
}
});
var mouseOverControls = true;
var mouseOverCanvas = false;
var cancelId = 0;
var handleHover = function () {
if (!_this.config.showControls)
return;
clearTimeout(cancelId);
_this.playerControls.classList.remove("spine-player-controls-hidden");
var remove = function () {
parent.addEventListener("mousemove", function (ev) {
if (ev instanceof MouseEvent) {
if (!_this.config.showControls)
return;
var popup = findWithClass(_this.dom, "spine-player-popup");
if (popup.length == 0 && !mouseOverChildren && !_this.paused) {
mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
clearTimeout(cancelId);
var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
if (hide) {
console.log("hidding");
_this.playerControls.classList.add("spine-player-controls-hidden");
}
else {
cancelId = setTimeout(remove, 100);
console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden");
}
};
cancelId = setTimeout(remove, 100);
if (!mouseOverControls && popup.length == 0 && !_this.paused) {
var remove = function () {
console.log("hidding timeout");
_this.playerControls.classList.add("spine-player-controls-hidden");
};
cancelId = setTimeout(remove, 500);
}
}
});
var overlap = function (ev, rect) {
var x = ev.clientX - rect.left;
var y = ev.clientY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
};
};
SpinePlayer.prototype.play = function () {

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

File diff suppressed because one or more lines are too long

8
spine-ts/player/example/index.html
View File

@ -21,7 +21,7 @@ body {
<script>
// Creates a new spine player. The debugRender option enables
// rendering of viewports and padding for debugging purposes.
new spine.SpinePlayer(document.getElementById("container"), {
new spine.SpinePlayer("container", {
jsonUrl: "assets/spineboy-pro.json",
atlasUrl: "assets/spineboy-pma.atlas",
animation: "run",
@ -32,9 +32,9 @@ body {
}
});
// Creates a new spine player with a transparent background,
/*// Creates a new spine player with a transparent background,
// so content from the website shines through. Hides the controls.
new spine.SpinePlayer(document.getElementById("container-raptor"), {
new spine.SpinePlayer("container-raptor", {
jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor-pma.atlas",
animation: "walk",
@ -42,7 +42,7 @@ body {
premultipliedAlpha: true,
backgroundColor: "#00000000",
alpha: true
});
});*/
</script>
</body>
</html>

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

@ -311,7 +311,8 @@
private selectedBones: Bone[];
constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
constructor(public parent: HTMLElement | string, private config: SpinePlayerConfig) {
if (typeof parent === "string") parent = document.getElementById(parent);
parent.appendChild(this.render());
}
@ -972,11 +973,9 @@
target = bone;
}
}
handleHover();
},
up: (x, y) => {
target = null;
handleHover();
},
dragged: (x, y) => {
if (target != null) {
@ -990,7 +989,6 @@
target.y = coords.y - skeleton.y;
}
}
handleHover();
},
moved: (x, y) => {
for (var i = 0; i < controlBones.length; i++) {
@ -1003,7 +1001,6 @@
selectedBones[i] = null;
}
}
handleHover();
}
});
@ -1013,30 +1010,39 @@
// 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) => {
var mouseOverControls = true;
var mouseOverCanvas = false;
let cancelId = 0;
parent.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;
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());
clearTimeout(cancelId);
let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
if (hide) {
console.log("hidding");
this.playerControls.classList.add("spine-player-controls-hidden");
} else {
console.log("showing");
this.playerControls.classList.remove("spine-player-controls-hidden");
}
if (!mouseOverControls && popup.length == 0 && !this.paused) {
let remove = () => {
console.log("hidding timeout");
this.playerControls.classList.add("spine-player-controls-hidden");
};
cancelId = setTimeout(remove, 500);
}
}
});
let cancelId = 0;
let handleHover = () => {
if (!this.config.showControls) return;
clearTimeout(cancelId);
this.playerControls.classList.remove("spine-player-controls-hidden");
let remove = () => {
let popup = findWithClass(this.dom, "spine-player-popup");
if (popup.length == 0 && !mouseOverChildren && !this.paused) {
this.playerControls.classList.add("spine-player-controls-hidden");
} else {
cancelId = setTimeout(remove, 100);
}
};
cancelId = setTimeout(remove, 100);
let overlap = (ev: MouseEvent, rect: DOMRect | ClientRect): boolean => {
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top;
return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
}
}