Style changes for new player.

spine-ts/build/spine-widget.d.ts

@@ -16,11 +16,11 @@ declare module spine {
         setup = 0,
         first = 1,
         replace = 2,
-        add = 3,
+        add = 3
     }
     enum MixDirection {
         in = 0,
-        out = 1,
+        out = 1
     }
     enum TimelineType {
         rotate = 0,
@@ -37,7 +37,7 @@ declare module spine {
         pathConstraintPosition = 11,
         pathConstraintSpacing = 12,
         pathConstraintMix = 13,
-        twoColor = 14,
+        twoColor = 14
     }
     abstract class CurveTimeline implements Timeline {
         static LINEAR: number;
@@ -341,7 +341,7 @@ declare module spine {
         end = 2,
         dispose = 3,
         complete = 4,
-        event = 5,
+        event = 5
     }
     interface AnimationStateListener2 {
         start(entry: TrackEntry): void;
@@ -380,8 +380,8 @@ declare module spine {
         private toLoad;
         private loaded;
         constructor(textureLoader: (image: HTMLImageElement) => any, pathPrefix?: string);
-        private static downloadText(url, success, error);
-        private static downloadBinary(url, success, error);
+        private static downloadText;
+        private static downloadBinary;
         loadText(path: string, success?: (path: string, text: string) => void, error?: (path: string, error: string) => void): void;
         loadTexture(path: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
         loadTextureData(path: string, data: string, success?: (path: string, image: HTMLImageElement) => void, error?: (path: string, error: string) => void): void;
@@ -414,7 +414,7 @@ declare module spine {
         Normal = 0,
         Additive = 1,
         Multiply = 2,
-        Screen = 3,
+        Screen = 3
     }
 }
 declare module spine {
@@ -483,7 +483,7 @@ declare module spine {
         OnlyTranslation = 1,
         NoRotationOrReflection = 2,
         NoScale = 3,
-        NoScaleOrReflection = 4,
+        NoScaleOrReflection = 4
     }
 }
 declare module spine {
@@ -593,17 +593,17 @@ declare module spine {
     }
     enum PositionMode {
         Fixed = 0,
-        Percent = 1,
+        Percent = 1
     }
     enum SpacingMode {
         Length = 0,
         Fixed = 1,
-        Percent = 2,
+        Percent = 2
     }
     enum RotateMode {
         Tangent = 0,
         Chain = 1,
-        ChainScale = 2,
+        ChainScale = 2
     }
 }
 declare module spine {
@@ -614,12 +614,12 @@ declare module spine {
         private rawAssets;
         private errors;
         constructor(pathPrefix?: string);
-        private queueAsset(clientId, textureLoader, path);
+        private queueAsset;
         loadText(clientId: string, path: string): void;
         loadJson(clientId: string, path: string): void;
         loadTexture(clientId: string, textureLoader: (image: HTMLImageElement) => any, path: string): void;
         get(clientId: string, path: string): any;
-        private updateClientAssets(clientAssets);
+        private updateClientAssets;
         isLoadingComplete(clientId: string): boolean;
         dispose(): void;
         hasErrors(): boolean;
@@ -823,12 +823,12 @@ declare module spine {
         MipMapNearestNearest = 9984,
         MipMapLinearNearest = 9985,
         MipMapNearestLinear = 9986,
-        MipMapLinearLinear = 9987,
+        MipMapLinearLinear = 9987
     }
     enum TextureWrap {
         MirroredRepeat = 33648,
         ClampToEdge = 33071,
-        Repeat = 10497,
+        Repeat = 10497
     }
     class TextureRegion {
         renderObject: any;
@@ -855,7 +855,7 @@ declare module spine {
         pages: TextureAtlasPage[];
         regions: TextureAtlasRegion[];
         constructor(atlasText: string, textureLoader: (path: string) => any);
-        private load(atlasText, textureLoader);
+        private load;
         findRegion(name: string): TextureAtlasRegion;
         dispose(): void;
     }
@@ -931,9 +931,9 @@ declare module spine {
         private polygonIndicesPool;
         triangulate(verticesArray: ArrayLike<number>): Array<number>;
         decompose(verticesArray: Array<number>, triangles: Array<number>): Array<Array<number>>;
-        private static isConcave(index, vertexCount, vertices, indices);
-        private static positiveArea(p1x, p1y, p2x, p2y, p3x, p3y);
-        private static winding(p1x, p1y, p2x, p2y, p3x, p3y);
+        private static isConcave;
+        private static positiveArea;
+        private static winding;
     }
 }
 declare module spine {
@@ -1105,7 +1105,7 @@ declare module spine {
         Mesh = 2,
         LinkedMesh = 3,
         Path = 4,
-        Point = 5,
+        Point = 5
     }
 }
 declare module spine {
@@ -1299,7 +1299,7 @@ declare module spine.webgl {
         touchesPool: Pool<Touch>;
         private listeners;
         constructor(element: HTMLElement);
-        private setupCallbacks(element);
+        private setupCallbacks;
         addListener(listener: InputListener): void;
         removeListener(listener: InputListener): void;
     }
@@ -1408,7 +1408,7 @@ declare module spine.webgl {
         drawWithOffset(shader: Shader, primitiveType: number, offset: number, count: number): void;
         bind(shader: Shader): void;
         unbind(shader: Shader): void;
-        private update();
+        private update;
         restore(): void;
         dispose(): void;
     }
@@ -1434,7 +1434,7 @@ declare module spine.webgl {
         constructor();
     }
     enum VertexAttributeType {
-        Float = 0,
+        Float = 0
     }
 }
 declare module spine.webgl {
@@ -1453,7 +1453,7 @@ declare module spine.webgl {
         begin(shader: Shader): void;
         setBlendMode(srcBlend: number, dstBlend: number): void;
         draw(texture: GLTexture, vertices: ArrayLike<number>, indices: Array<number>): void;
-        private flush();
+        private flush;
         end(): void;
         getDrawCalls(): number;
         dispose(): void;
@@ -1493,13 +1493,13 @@ declare module spine.webgl {
         curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
         end(): void;
         resize(resizeMode: ResizeMode): void;
-        private enableRenderer(renderer);
+        private enableRenderer;
         dispose(): void;
     }
     enum ResizeMode {
         Stretch = 0,
         Expand = 1,
-        Fit = 2,
+        Fit = 2
     }
 }
 declare module spine.webgl {
@@ -1527,9 +1527,9 @@ declare module spine.webgl {
         getVertexShaderSource(): string;
         getFragmentSource(): string;
         constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, vertexShader: string, fragmentShader: string);
-        private compile();
-        private compileShader(type, source);
-        private compileProgram(vs, fs);
+        private compile;
+        private compileShader;
+        private compileProgram;
         restore(): void;
         bind(): void;
         unbind(): void;
@@ -1576,16 +1576,16 @@ declare module spine.webgl {
         polygon(polygonVertices: ArrayLike<number>, offset: number, count: number, color?: Color): void;
         circle(filled: boolean, x: number, y: number, radius: number, color?: Color, segments?: number): void;
         curve(x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, segments: number, color?: Color): void;
-        private vertex(x, y, color);
+        private vertex;
         end(): void;
-        private flush();
-        private check(shapeType, numVertices);
+        private flush;
+        private check;
         dispose(): void;
     }
     enum ShapeType {
         Point = 0,
         Line = 1,
-        Filled = 4,
+        Filled = 4
     }
 }
 declare module spine.webgl {
@@ -1732,9 +1732,9 @@ declare module spine {
         drawFrame(requestNextFrame?: boolean): void;
         scale(sourceWidth: number, sourceHeight: number, targetWidth: number, targetHeight: number): Vector2;
         loadSkeleton(): void;
-        private play();
-        private pause();
-        private resize();
+        private play;
+        private pause;
+        private resize;
     }
 }
 declare module spine {
@@ -1758,10 +1758,10 @@ declare module spine {
         private loaded;
         private bounds;
         constructor(element: HTMLElement | string, config: SpineWidgetConfig);
-        private validateConfig(config);
-        private load();
-        private render();
-        private resize();
+        private validateConfig;
+        private load;
+        private render;
+        private resize;
         pause(): void;
         play(): void;
         isPlaying(): boolean;
@@ -1769,7 +1769,7 @@ declare module spine {
         static loadWidgets(): void;
         static loadWidget(widget: HTMLElement): void;
         static pageLoaded: boolean;
-        private static ready();
+        private static ready;
         static setupDOMListener(): void;
     }
     class SpineWidgetConfig {

spine-ts/build/spine-widget.js

@@ -1,7 +1,10 @@
 var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    }
     return function (d, b) {
         extendStatics(d, b);
         function __() { this.constructor = d; }
@@ -9556,10 +9559,10 @@ var spine;
                 if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
                     return;
                 dropdown.classList.remove("spine-player-hidden");
-                dropdown.innerHTML = "\n\t\t\t\t\t<div>Animations</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
+                dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Animations</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t\t</ul>\n\t\t\t\t";
                 var rows = findWithClass(dropdown, "spine-player-list")[0];
                 _this.skeleton.data.animations.forEach(function (animation) {
-                    var row = document.createElement("div");
+                    var row = document.createElement("li");
                     row.classList.add("spine-player-list-item");
                     if (animation.name == _this.config.animation)
                         row.classList.add("spine-player-list-item-selected");
@@ -9580,10 +9583,10 @@ var spine;
                 if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
                     return;
                 dropdown.classList.remove("spine-player-hidden");
-                dropdown.innerHTML = "\n\t\t\t\t\t<div>Skins</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
+                dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Skins</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<ul class=\"spine-player-list\">\n\t\t\t\t\t</ul>\n\t\t\t\t";
                 var rows = findWithClass(dropdown, "spine-player-list")[0];
                 _this.skeleton.data.skins.forEach(function (skin) {
-                    var row = document.createElement("div");
+                    var row = document.createElement("li");
                     row.classList.add("spine-player-list-item");
                     if (skin.name == _this.config.skin)
                         row.classList.add("spine-player-list-item-selected");
@@ -9604,7 +9607,7 @@ var spine;
                 if (!_this.skeleton || _this.skeleton.data.animations.length == 0)
                     return;
                 dropdown.classList.remove("spine-player-hidden");
-                dropdown.innerHTML = "\n\t\t\t\t\t<div>Debug</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
+                dropdown.innerHTML = "\n\t\t\t\t\t<div class=\"spine-player-dropdown-title\">Debug</div>\n\t\t\t\t\t<hr>\n\t\t\t\t\t<div class=\"spine-player-list\" style=\"user-select: none; align-items: center; max-height: 90px; overflow: auto;\">\n\t\t\t\t\t</div>\n\t\t\t\t";
                 var rows = findWithClass(dropdown, "spine-player-list")[0];
                 var makeItem = function (name) {
                     var row = document.createElement("div");

spine-ts/widget/example/player-test.html

@@ -30,14 +30,18 @@ body {
 	display: inline-block;
 }
 
+.spine-player .spine-player-dropdown-title {
+	text-align: center;
+}
+
 .spine-player .spine-player-dropdown-content {
     position: absolute;
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.75);
     z-index: 1;
 	right: 2px;
     bottom: 42px;
-	padding: 16px;
-	border-radius: 8px;
+	padding: 4px 0px;
+	border-radius: 4px;
 }
 
 .spine-player canvas {
@@ -64,7 +68,7 @@ body {
 	width: 100%;
 	background: green;
 	position: relative;
-	background: rgba(0, 0, 0, 0.7);
+	background: rgba(0, 0, 0, 0.75);
 	cursor: pointer;
 }
 
@@ -78,7 +82,7 @@ body {
 	display: flex;
 	flex-direction: row;
 	width: 100%;
-	background: rgba(0, 0, 0, 0.6);
+	background: rgba(0, 0, 0, 0.75);
 	border-bottom-left-radius: 8px;
 	border-bottom-right-radius: 8px;
 	padding: 0 8px;
@@ -166,17 +170,31 @@ body {
 	flex-direction: row;
 }
 
+.spine-player-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+}
+
 .spine-player-list-item {
 	padding: 0 4px;
 	cursor: pointer;
 }
 
-.spine-player-list-item-selected {
-	background: rgba(101, 176, 238, 0.605);
+.spine-player-list-item-selected:before {
+	content: "";
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background: #fff;
+	display: inline-block;
+	position: relative;
+	top: -1px; /* vertical position of dot*/
+	margin-right: 5px;
 }
 
 .spine-player-list-item:hover {
-	background: #62B0EE;
+	background: #979696b9;
 }
 
 .spine-player-speed-slider {

spine-ts/widget/src/Player.ts

@@ -258,15 +258,15 @@
 				if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 				dropdown.classList.remove("spine-player-hidden");
 				dropdown.innerHTML = /*html*/`
-					<div>Animations</div>
+					<div class="spine-player-dropdown-title">Animations</div>
 					<hr>
-					<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
-					</div>
+					<ul class="spine-player-list">
+					</ul>
 				`;
 
 				let rows = findWithClass(dropdown, "spine-player-list")[0];
 				this.skeleton.data.animations.forEach((animation) => {
-					let row = document.createElement("div");
+					let row = document.createElement("li");
 					row.classList.add("spine-player-list-item");
 					if (animation.name == this.config.animation) row.classList.add("spine-player-list-item-selected");
 					row.innerText = animation.name;
@@ -288,15 +288,15 @@
 				if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 				dropdown.classList.remove("spine-player-hidden");
 				dropdown.innerHTML = /*html*/`
-					<div>Skins</div>
+					<div class="spine-player-dropdown-title">Skins</div>
 					<hr>
-					<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
-					</div>
+					<ul class="spine-player-list">
+					</ul>
 				`;
 
 				let rows = findWithClass(dropdown, "spine-player-list")[0];
 				this.skeleton.data.skins.forEach((skin) => {
-					let row = document.createElement("div");
+					let row = document.createElement("li");
 					row.classList.add("spine-player-list-item");
 					if (skin.name == this.config.skin) row.classList.add("spine-player-list-item-selected");
 					row.innerText = skin.name;
@@ -318,7 +318,7 @@
 				if (!this.skeleton || this.skeleton.data.animations.length == 0) return;
 				dropdown.classList.remove("spine-player-hidden");
 				dropdown.innerHTML = /*html*/`
-					<div>Debug</div>
+					<div class="spine-player-dropdown-title">Debug</div>
 					<hr>
 					<div class="spine-player-list" style="user-select: none; align-items: center; max-height: 90px; overflow: auto;">
 					</div>