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] Fixed timeline slider and speed slider.

Browse Source
This commit is contained in:
badlogic 2018-11-19 16:03:39 +01:00
parent 30bd8ac751
commit 30afc61b8f
4 changed files with 342 additions and 314 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
spine-ts/build/spine-widget.js
View File

@ -9453,15 +9453,17 @@ var spine;
return Switch;
}());
var Slider = (function () {
function Slider(snaps, snapPercentage) {
function Slider(snaps, snapPercentage, big) {
if (snaps === void 0) { snaps = 0; }
if (snapPercentage === void 0) { snapPercentage = 0.1; }
if (big === void 0) { big = false; }
this.snaps = snaps;
this.snapPercentage = snapPercentage;
this.big = big;
}
Slider.prototype.render = function () {
var _this = this;
this.slider = createElement("\n\t\t\t\t<div class=\"spine-player-slider\">\n\t\t\t\t\t<div class=\"spine-player-slider-value\"></div>\n\t\t\t\t</div>\n\t\t\t");
this.slider = createElement("\n\t\t\t\t<div class=\"spine-player-slider " + (this.big ? "big" : "") + "\">\n\t\t\t\t\t<div class=\"spine-player-slider-value\"></div>\n\t\t\t\t\t<!--<div class=\"spine-player-slider-knob\"></div>-->\n\t\t\t\t</div>\n\t\t\t");
this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
this.setValue(0);
var input = new spine.webgl.Input(this.slider);
@ -9678,7 +9680,7 @@ var spine;
var _this = this;
var popup = new Popup(this.playerControls, "\n\t\t\t\t<div class=\"spine-player-row\" style=\"user-select: none; align-items: center; padding: 8px;\">\n\t\t\t\t\t<div style=\"margin-right: 16px;\">Speed</div>\n\t\t\t\t\t<div class=\"spine-player-column\">\n\t\t\t\t\t\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom: 4px;\"></div>\n\t\t\t\t\t\t<div class=\"spine-player-row\" style=\"justify-content: space-between;\">\n\t\t\t\t\t\t\t<div>0.1x</div>\n\t\t\t\t\t\t\t<div>1x</div>\n\t\t\t\t\t\t\t<div>2x</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t");
var sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
var slider = new Slider(2);
var slider = new Slider(2, 0.1, true);
sliderParent.appendChild(slider.render());
slider.setValue(this.speed / 2);
slider.change = function (percentage) {

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

File diff suppressed because one or more lines are too long

34
spine-ts/widget/css/spine-player.css
View File

@ -11,6 +11,12 @@
box-sizing: border-box;
font-family: "PT Sans",Arial,"Helvetica Neue",Helvetica,Tahoma,sans-serif;
color: #dddddd;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.spine-player-error {
@ -35,18 +41,33 @@
/** Slider **/
.spine-player-slider {
width: 100%;
background: green;
height: 16px;
position: relative;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
}
.spine-player-slider-value {
height: 8px;
background: #62B0EE;
position: absolute;
bottom: 0;
height: 2px;
background: rgb(98, 176, 238, 0.6);
cursor: pointer;
}
.spine-player-slider:hover .spine-player-slider-value {
height: 4px;
background: rgb(98, 176, 238, 1);
}
.spine-player-slider.big {
height: 12px;
}
.spine-player-slider.big .spine-player-slider-value {
height: 12px;
background: rgb(98, 176, 238, 1);
}
/** Column and row layout elements **/
.spine-player-column {
display: flex;
@ -187,10 +208,10 @@
/** Canvas **/
.spine-player canvas {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
display: block;
}
/** Player controls **/
@ -219,7 +240,7 @@
display: flex;
flex-direction: row;
width: 100%;
background: rgba(0, 0, 0, 0.75);
background: rgba(0, 0, 0, 0.5);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding: 2px 8px 3px;
@ -236,6 +257,7 @@
background-position: center;
cursor: pointer;
margin-right: 3px;
filter: drop-shadow(0 0 1px #333);
}
.spine-player-button-spacer {

10
spine-ts/widget/src/Player.ts
View File

@ -171,17 +171,20 @@
class Slider {
private slider: HTMLElement;
private value: HTMLElement;
private knob: HTMLElement;
public change: (percentage: number) => void;
constructor(public snaps = 0, public snapPercentage = 0.1) { }
constructor(public snaps = 0, public snapPercentage = 0.1, public big = false) { }
render(): HTMLElement {
this.slider = createElement(/*html*/`
<div class="spine-player-slider">
<div class="spine-player-slider ${this.big ? "big": ""}">
<div class="spine-player-slider-value"></div>
<!--<div class="spine-player-slider-knob"></div>-->
</div>
`);
this.value = findWithClass(this.slider, "spine-player-slider-value")[0];
// this.knob = findWithClass(this.slider, "spine-player-slider-knob")[0];
this.setValue(0);
let input = new spine.webgl.Input(this.slider);
@ -228,6 +231,7 @@
percentage = Math.max(0, Math.min(1, percentage));
}
this.value.style.width = "" + (percentage * 100) + "%";
// this.knob.style.left = "" + (-8 + percentage * this.slider.clientWidth) + "px";
return percentage;
}
}
@ -442,7 +446,7 @@
</div>
`);
let sliderParent = findWithClass(popup.dom, "spine-player-speed-slider")[0];
let slider = new Slider(2);
let slider = new Slider(2, 0.1, true);
sliderParent.appendChild(slider.render());
slider.setValue(this.speed / 2);
slider.change = (percentage) => {