UnityMirror/spine-runtimes
1
0
Fork 0
mirror of https://github.com/EsotericSoftware/spine-runtimes.git synced 2026-03-05 18:26:52 +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; 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;
@ -1859,7 +1860,7 @@ declare module spine {
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
private selectedBones; private selectedBones;
constructor(parent: HTMLElement, config: SpinePlayerConfig); constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void; showError(error: string): void;
render(): HTMLElement; render(): HTMLElement;

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

@ -10225,6 +10225,7 @@ 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;
@ -10234,6 +10235,8 @@ var spine;
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
if (typeof parent === "string")
parent = document.getElementById(parent);
parent.appendChild(this.render()); parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
@ -10791,11 +10794,9 @@ var spine;
target = bone; target = bone;
} }
} }
handleHover();
}, },
up: function (x, y) { up: function (x, y) {
target = null; target = null;
handleHover();
}, },
dragged: function (x, y) { dragged: function (x, y) {
if (target != null) { if (target != null) {
@ -10810,7 +10811,6 @@ var spine;
target.y = coords.y - skeleton.y; target.y = coords.y - skeleton.y;
} }
} }
handleHover();
}, },
moved: function (x, y) { moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
@ -10825,34 +10825,41 @@ var spine;
selectedBones[i] = null; 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 cancelId = 0;
var handleHover = function () { parent.addEventListener("mousemove", function (ev) {
if (!_this.config.showControls) if (ev instanceof MouseEvent) {
return; if (!_this.config.showControls)
clearTimeout(cancelId); return;
_this.playerControls.classList.remove("spine-player-controls-hidden");
var remove = function () {
var popup = findWithClass(_this.dom, "spine-player-popup"); 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"); _this.playerControls.classList.add("spine-player-controls-hidden");
} }
else { else {
cancelId = setTimeout(remove, 100); console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden");
} }
}; if (!mouseOverControls && popup.length == 0 && !_this.paused) {
cancelId = setTimeout(remove, 100); 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 () { 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; 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;
@ -1769,7 +1770,7 @@ declare module spine {
private previousViewport; private previousViewport;
private viewportTransitionStart; private viewportTransitionStart;
private selectedBones; private selectedBones;
constructor(parent: HTMLElement, config: SpinePlayerConfig); constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
validateConfig(config: SpinePlayerConfig): SpinePlayerConfig; validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
showError(error: string): void; showError(error: string): void;
render(): HTMLElement; render(): HTMLElement;

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

@ -9562,6 +9562,7 @@ 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;
@ -9571,6 +9572,8 @@ var spine;
this.currentViewport = null; this.currentViewport = null;
this.previousViewport = null; this.previousViewport = null;
this.viewportTransitionStart = 0; this.viewportTransitionStart = 0;
if (typeof parent === "string")
parent = document.getElementById(parent);
parent.appendChild(this.render()); parent.appendChild(this.render());
} }
SpinePlayer.prototype.validateConfig = function (config) { SpinePlayer.prototype.validateConfig = function (config) {
@ -10128,11 +10131,9 @@ var spine;
target = bone; target = bone;
} }
} }
handleHover();
}, },
up: function (x, y) { up: function (x, y) {
target = null; target = null;
handleHover();
}, },
dragged: function (x, y) { dragged: function (x, y) {
if (target != null) { if (target != null) {
@ -10147,7 +10148,6 @@ var spine;
target.y = coords.y - skeleton.y; target.y = coords.y - skeleton.y;
} }
} }
handleHover();
}, },
moved: function (x, y) { moved: function (x, y) {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
@ -10162,34 +10162,41 @@ var spine;
selectedBones[i] = null; 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 cancelId = 0;
var handleHover = function () { parent.addEventListener("mousemove", function (ev) {
if (!_this.config.showControls) if (ev instanceof MouseEvent) {
return; if (!_this.config.showControls)
clearTimeout(cancelId); return;
_this.playerControls.classList.remove("spine-player-controls-hidden");
var remove = function () {
var popup = findWithClass(_this.dom, "spine-player-popup"); 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"); _this.playerControls.classList.add("spine-player-controls-hidden");
} }
else { else {
cancelId = setTimeout(remove, 100); console.log("showing");
_this.playerControls.classList.remove("spine-player-controls-hidden");
} }
}; if (!mouseOverControls && popup.length == 0 && !_this.paused) {
cancelId = setTimeout(remove, 100); 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 () { 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> <script>
// Creates a new spine player. The debugRender option enables // Creates a new spine player. The debugRender option enables
// rendering of viewports and padding for debugging purposes. // rendering of viewports and padding for debugging purposes.
new spine.SpinePlayer(document.getElementById("container"), { new spine.SpinePlayer("container", {
jsonUrl: "assets/spineboy-pro.json", jsonUrl: "assets/spineboy-pro.json",
atlasUrl: "assets/spineboy-pma.atlas", atlasUrl: "assets/spineboy-pma.atlas",
animation: "run", 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. // 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", jsonUrl: "assets/raptor-pro.json",
atlasUrl: "assets/raptor-pma.atlas", atlasUrl: "assets/raptor-pma.atlas",
animation: "walk", animation: "walk",
@ -42,7 +42,7 @@ body {
premultipliedAlpha: true, premultipliedAlpha: true,
backgroundColor: "#00000000", backgroundColor: "#00000000",
alpha: true alpha: true
}); });*/
</script> </script>
</body> </body>
</html> </html>

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

@ -311,7 +311,8 @@
private selectedBones: Bone[]; 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()); parent.appendChild(this.render());
} }
@ -972,11 +973,9 @@
target = bone; target = bone;
} }
} }
handleHover();
}, },
up: (x, y) => { up: (x, y) => {
target = null; target = null;
handleHover();
}, },
dragged: (x, y) => { dragged: (x, y) => {
if (target != null) { if (target != null) {
@ -990,7 +989,6 @@
target.y = coords.y - skeleton.y; target.y = coords.y - skeleton.y;
} }
} }
handleHover();
}, },
moved: (x, y) => { moved: (x, y) => {
for (var i = 0; i < controlBones.length; i++) { for (var i = 0; i < controlBones.length; i++) {
@ -1003,7 +1001,6 @@
selectedBones[i] = null; selectedBones[i] = null;
} }
} }
handleHover();
} }
}); });
@ -1013,30 +1010,39 @@
// For this we need to register a mouse handler on // For this we need to register a mouse handler on
// the document and see if we are within the canvas // the document and see if we are within the canvas
// area :/ // area :/
var mouseOverChildren = true; var mouseOverControls = true;
document.addEventListener("mousemove", (ev: UIEvent) => { var mouseOverCanvas = false;
let cancelId = 0;
parent.addEventListener("mousemove", (ev: UIEvent) => {
if (ev instanceof MouseEvent) { if (ev instanceof MouseEvent) {
let rect = this.playerControls.getBoundingClientRect(); if (!this.config.showControls) return;
let x = ev.clientX - rect.left;
let y = ev.clientY - rect.top; let popup = findWithClass(this.dom, "spine-player-popup");
mouseOverChildren = x >= 0 && x <= this.playerControls.clientWidth && y >= 0 && y <= this.playerControls.clientHeight; 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 overlap = (ev: MouseEvent, rect: DOMRect | ClientRect): boolean => {
let handleHover = () => { let x = ev.clientX - rect.left;
if (!this.config.showControls) return; let y = ev.clientY - rect.top;
clearTimeout(cancelId); return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
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);
} }
} }