[ts][webgl] Fix WebGL2 check for old Safari versions.

This commit is contained in:
badlogic 2021-07-09 17:53:36 +02:00
parent 679b1d9c6c
commit ade13216b3
16 changed files with 14201 additions and 14216 deletions

View File

@ -1699,7 +1699,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement | OffscreenCanvas; canvas: HTMLCanvasElement | OffscreenCanvas;
gl: WebGLRenderingContext; gl: WebGLRenderingContext;
private restorables; private restorables;
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig?: any); constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig?: any);
private setupCanvas; private setupCanvas;
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;
@ -1776,7 +1776,7 @@ declare module spine.threejs {
} }
} }
declare module spine { declare module spine {
interface SpinePlayerConfig { export interface SpinePlayerConfig {
jsonUrl: string; jsonUrl: string;
jsonField: string; jsonField: string;
binaryUrl: string; binaryUrl: string;
@ -1833,7 +1833,7 @@ declare module spine {
loading: (player: SpinePlayer, delta: number) => void; loading: (player: SpinePlayer, delta: number) => void;
downloader: spine.Downloader; downloader: spine.Downloader;
} }
interface Viewport { export interface Viewport {
x: number; x: number;
y: number; y: number;
width: number; width: number;
@ -1843,7 +1843,7 @@ declare module spine {
padTop: string | number; padTop: string | number;
padBottom: string | number; padBottom: string | number;
} }
class SpinePlayer { export class SpinePlayer {
private config; private config;
parent: HTMLElement; parent: HTMLElement;
dom: HTMLElement; dom: HTMLElement;
@ -1862,7 +1862,7 @@ declare module spine {
private playTime; private playTime;
private selectedBones; private selectedBones;
private cancelId; private cancelId;
private lastPopup; popup: Popup;
error: boolean; error: boolean;
skeleton: Skeleton; skeleton: Skeleton;
animationState: AnimationState; animationState: AnimationState;
@ -1888,12 +1888,24 @@ declare module spine {
private calculateAnimationViewport; private calculateAnimationViewport;
private drawFrame; private drawFrame;
stopRendering(): void; stopRendering(): void;
private hidePopup;
private showSpeedDialog; private showSpeedDialog;
private showAnimationsDialog; private showAnimationsDialog;
private showSkinsDialog; private showSkinsDialog;
private showSettingsDialog; private showSettingsDialog;
private showError; private showError;
} }
class Popup {
private id;
private button;
private player;
dom: HTMLElement;
private className;
constructor(id: string, button: HTMLElement, player: SpinePlayer, parent: HTMLElement, htmlContent: string);
hide(id: string): boolean;
show(): void;
}
export {};
} }
declare function CodeMirror(el: Element, config: any): void; declare function CodeMirror(el: Element, config: any): void;
declare module spine { declare module spine {

View File

@ -3702,7 +3702,7 @@ var spine;
break; break;
case spine.SpacingMode.Proportional: case spine.SpacingMode.Proportional:
var sum = 0; var sum = 0;
for (var i = 0; i < boneCount;) { for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i]; var bone = bones[i];
var setupLength = bone.data.length; var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) { if (setupLength < PathConstraint.epsilon) {
@ -11796,7 +11796,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
this.gl = canvasOrContext; this.gl = canvasOrContext;
@ -12928,42 +12928,29 @@ var spine;
SpinePlayer.prototype.stopRendering = function () { SpinePlayer.prototype.stopRendering = function () {
this.stopRequestAnimationFrame = true; this.stopRequestAnimationFrame = true;
}; };
SpinePlayer.prototype.hidePopup = function (id) {
return this.popup && this.popup.hide(id);
};
SpinePlayer.prototype.showSpeedDialog = function (speedButton) { SpinePlayer.prototype.showSpeedDialog = function (speedButton) {
var _this = this; var _this = this;
if (this.lastPopup) { var id = "speed";
this.lastPopup.dom.remove(); if (this.hidePopup(id))
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Speed") {
this.lastPopup = null;
speedButton.classList.remove("spine-player-button-icon-speed-selected");
return; return;
} var popup = new Popup(id, speedButton, this, this.playerControls, "\n<div class=\"spine-player-popup-title\">Speed</div>\n<hr>\n<div class=\"spine-player-row\" style=\"align-items:center;padding:8px\">\n<div class=\"spine-player-column\">\n\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom:4px\"></div>\n\t<div class=\"spine-player-row\" style=\"justify-content:space-between\"><div>0.1x</div><div>1x</div><div>2x</div></div>\n</div>\n</div>");
}
var popup = new Popup(this.dom, this.playerControls, "\n<div class=\"spine-player-popup-title\">Speed</div>\n<hr>\n<div class=\"spine-player-row\" style=\"align-items:center;padding:8px\">\n<div class=\"spine-player-column\">\n\t<div class=\"spine-player-speed-slider\" style=\"margin-bottom:4px\"></div>\n\t<div class=\"spine-player-row\" style=\"justify-content:space-between\"><div>0.1x</div><div>1x</div><div>2x</div></div>\n</div>\n</div>");
var slider = new Slider(2, 0.1, true); var slider = new Slider(2, 0.1, true);
findWithClass(popup.dom, "spine-player-speed-slider").appendChild(slider.create()); findWithClass(popup.dom, "spine-player-speed-slider").appendChild(slider.create());
slider.setValue(this.speed / 2); slider.setValue(this.speed / 2);
slider.change = function (percentage) { return _this.speed = percentage * 2; }; slider.change = function (percentage) { return _this.speed = percentage * 2; };
speedButton.classList.add("spine-player-button-icon-speed-selected"); popup.show();
popup.show(function () {
speedButton.classList.remove("spine-player-button-icon-speed-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
}; };
SpinePlayer.prototype.showAnimationsDialog = function (animationsButton) { SpinePlayer.prototype.showAnimationsDialog = function (animationsButton) {
var _this = this; var _this = this;
if (this.lastPopup) { var id = "animations";
this.lastPopup.dom.remove(); if (this.hidePopup(id))
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Animations") {
this.lastPopup = null;
animationsButton.classList.remove("spine-player-button-icon-animations-selected");
return; return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length) if (!this.skeleton || !this.skeleton.data.animations.length)
return; return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Animations</div><hr><ul class=\"spine-player-list\"></ul>"); var popup = new Popup(id, animationsButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Animations</div><hr><ul class=\"spine-player-list\"></ul>");
var rows = findWithClass(popup.dom, "spine-player-list"); var rows = findWithClass(popup.dom, "spine-player-list");
this.skeleton.data.animations.forEach(function (animation) { this.skeleton.data.animations.forEach(function (animation) {
if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0) if (_this.config.animations && _this.config.animations.indexOf(animation.name) < 0)
@ -12982,27 +12969,16 @@ var spine;
_this.play(); _this.play();
}; };
}); });
animationsButton.classList.add("spine-player-button-icon-animations-selected"); popup.show();
popup.show(function () {
animationsButton.classList.remove("spine-player-button-icon-animations-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
}; };
SpinePlayer.prototype.showSkinsDialog = function (skinButton) { SpinePlayer.prototype.showSkinsDialog = function (skinButton) {
var _this = this; var _this = this;
if (this.lastPopup) { var id = "skins";
this.lastPopup.dom.remove(); if (this.hidePopup(id))
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Skins") {
this.lastPopup = null;
skinButton.classList.remove("spine-player-button-icon-skins-selected");
return; return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length) if (!this.skeleton || !this.skeleton.data.animations.length)
return; return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Skins</div><hr><ul class=\"spine-player-list\"></ul>"); var popup = new Popup(id, skinButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Skins</div><hr><ul class=\"spine-player-list\"></ul>");
var rows = findWithClass(popup.dom, "spine-player-list"); var rows = findWithClass(popup.dom, "spine-player-list");
this.skeleton.data.skins.forEach(function (skin) { this.skeleton.data.skins.forEach(function (skin) {
if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0) if (_this.config.skins && _this.config.skins.indexOf(skin.name) < 0)
@ -13020,27 +12996,16 @@ var spine;
_this.skeleton.setSlotsToSetupPose(); _this.skeleton.setSlotsToSetupPose();
}; };
}); });
skinButton.classList.add("spine-player-button-icon-skins-selected"); popup.show();
popup.show(function () {
skinButton.classList.remove("spine-player-button-icon-skins-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
}; };
SpinePlayer.prototype.showSettingsDialog = function (settingsButton) { SpinePlayer.prototype.showSettingsDialog = function (settingsButton) {
var _this = this; var _this = this;
if (this.lastPopup) { var id = "settings";
this.lastPopup.dom.remove(); if (this.hidePopup(id))
if (findWithClass(this.lastPopup.dom, "spine-player-popup-title").textContent == "Debug") {
this.lastPopup = null;
settingsButton.classList.remove("spine-player-button-icon-settings-selected");
return; return;
}
}
if (!this.skeleton || !this.skeleton.data.animations.length) if (!this.skeleton || !this.skeleton.data.animations.length)
return; return;
var popup = new Popup(this.dom, this.playerControls, "<div class=\"spine-player-popup-title\">Debug</div><hr><ul class=\"spine-player-list\"></li>"); var popup = new Popup(id, settingsButton, this, this.playerControls, "<div class=\"spine-player-popup-title\">Debug</div><hr><ul class=\"spine-player-list\"></li>");
var rows = findWithClass(popup.dom, "spine-player-list"); var rows = findWithClass(popup.dom, "spine-player-list");
var makeItem = function (label, name) { var makeItem = function (label, name) {
var row = createElement("<li class=\"spine-player-list-item\"></li>"); var row = createElement("<li class=\"spine-player-list-item\"></li>");
@ -13059,13 +13024,7 @@ var spine;
makeItem("Clipping", "clipping"); makeItem("Clipping", "clipping");
makeItem("Points", "points"); makeItem("Points", "points");
makeItem("Hulls", "hulls"); makeItem("Hulls", "hulls");
settingsButton.classList.add("spine-player-button-icon-settings-selected"); popup.show();
popup.show(function () {
settingsButton.classList.remove("spine-player-button-icon-settings-selected");
popup.dom.remove();
_this.lastPopup = null;
});
this.lastPopup = popup;
}; };
SpinePlayer.prototype.showError = function (message, error) { SpinePlayer.prototype.showError = function (message, error) {
if (error === void 0) { error = null; } if (error === void 0) { error = null; }
@ -13086,35 +13045,49 @@ var spine;
}()); }());
spine.SpinePlayer = SpinePlayer; spine.SpinePlayer = SpinePlayer;
var Popup = (function () { var Popup = (function () {
function Popup(player, parent, htmlContent) { function Popup(id, button, player, parent, htmlContent) {
this.id = id;
this.button = button;
this.player = player; this.player = player;
this.dom = createElement("<div class=\"spine-player-popup spine-player-hidden\"></div>"); this.dom = createElement("<div class=\"spine-player-popup spine-player-hidden\"></div>");
this.dom.innerHTML = htmlContent; this.dom.innerHTML = htmlContent;
parent.appendChild(this.dom); parent.appendChild(this.dom);
this.className = "spine-player-button-icon-" + id + "-selected";
} }
Popup.prototype.show = function (dismissedListener) { Popup.prototype.hide = function (id) {
this.dom.remove();
this.button.classList.remove(this.className);
if (this.id == id) {
this.player.popup = null;
return true;
}
};
Popup.prototype.show = function () {
var _this = this; var _this = this;
this.player.popup = this;
this.button.classList.add(this.className);
this.dom.classList.remove("spine-player-hidden"); this.dom.classList.remove("spine-player-hidden");
var dismissed = false; var dismissed = false;
var resize = function () { var resize = function () {
if (!dismissed) if (!dismissed)
requestAnimationFrame(resize); requestAnimationFrame(resize);
var bottomOffset = Math.abs(_this.dom.getBoundingClientRect().bottom - _this.player.getBoundingClientRect().bottom); var playerDom = _this.player.dom;
var rightOffset = Math.abs(_this.dom.getBoundingClientRect().right - _this.player.getBoundingClientRect().right); var bottomOffset = Math.abs(playerDom.getBoundingClientRect().bottom - playerDom.getBoundingClientRect().bottom);
var maxHeight = _this.player.clientHeight - bottomOffset - rightOffset; var rightOffset = Math.abs(playerDom.getBoundingClientRect().right - playerDom.getBoundingClientRect().right);
_this.dom.style.maxHeight = maxHeight + "px"; _this.dom.style.maxHeight = (playerDom.clientHeight - bottomOffset - rightOffset) + "px";
}; };
requestAnimationFrame(resize); requestAnimationFrame(resize);
var justClicked = true; var justClicked = true;
var windowClickListener = function (event) { var windowClickListener = function (event) {
if (justClicked) { if (justClicked || _this.player.popup != _this) {
justClicked = false; justClicked = false;
return; return;
} }
if (!_this.dom.contains(event.target)) { if (!_this.dom.contains(event.target)) {
_this.dom.remove(); _this.dom.remove();
window.removeEventListener("click", windowClickListener); window.removeEventListener("click", windowClickListener);
dismissedListener(); _this.button.classList.remove(_this.className);
_this.player.popup = null;
dismissed = true; dismissed = true;
} }
}; };

File diff suppressed because one or more lines are too long

View File

@ -3702,7 +3702,7 @@ var spine;
break; break;
case spine.SpacingMode.Proportional: case spine.SpacingMode.Proportional:
var sum = 0; var sum = 0;
for (var i = 0; i < boneCount;) { for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i]; var bone = bones[i];
var setupLength = bone.data.length; var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) { if (setupLength < PathConstraint.epsilon) {

File diff suppressed because one or more lines are too long

View File

@ -3702,7 +3702,7 @@ var spine;
break; break;
case spine.SpacingMode.Proportional: case spine.SpacingMode.Proportional:
var sum = 0; var sum = 0;
for (var i = 0; i < boneCount;) { for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i]; var bone = bones[i];
var setupLength = bone.data.length; var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) { if (setupLength < PathConstraint.epsilon) {

File diff suppressed because one or more lines are too long

View File

@ -1668,7 +1668,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement | OffscreenCanvas; canvas: HTMLCanvasElement | OffscreenCanvas;
gl: WebGLRenderingContext; gl: WebGLRenderingContext;
private restorables; private restorables;
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig?: any); constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig?: any);
private setupCanvas; private setupCanvas;
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;

View File

@ -11546,7 +11546,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
this.gl = canvasOrContext; this.gl = canvasOrContext;

File diff suppressed because one or more lines are too long

View File

@ -3702,7 +3702,7 @@ var spine;
break; break;
case spine.SpacingMode.Proportional: case spine.SpacingMode.Proportional:
var sum = 0; var sum = 0;
for (var i = 0; i < boneCount;) { for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i]; var bone = bones[i];
var setupLength = bone.data.length; var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) { if (setupLength < PathConstraint.epsilon) {

File diff suppressed because one or more lines are too long

View File

@ -1668,7 +1668,7 @@ declare module spine.webgl {
canvas: HTMLCanvasElement | OffscreenCanvas; canvas: HTMLCanvasElement | OffscreenCanvas;
gl: WebGLRenderingContext; gl: WebGLRenderingContext;
private restorables; private restorables;
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig?: any); constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig?: any);
private setupCanvas; private setupCanvas;
addRestorable(restorable: Restorable): void; addRestorable(restorable: Restorable): void;
removeRestorable(restorable: Restorable): void; removeRestorable(restorable: Restorable): void;

View File

@ -3702,7 +3702,7 @@ var spine;
break; break;
case spine.SpacingMode.Proportional: case spine.SpacingMode.Proportional:
var sum = 0; var sum = 0;
for (var i = 0; i < boneCount;) { for (var i = 0, n = spacesCount - 1; i < n;) {
var bone = bones[i]; var bone = bones[i];
var setupLength = bone.data.length; var setupLength = bone.data.length;
if (setupLength < PathConstraint.epsilon) { if (setupLength < PathConstraint.epsilon) {
@ -11546,7 +11546,7 @@ var spine;
function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) { function ManagedWebGLRenderingContext(canvasOrContext, contextConfig) {
if (contextConfig === void 0) { contextConfig = { alpha: "true" }; } if (contextConfig === void 0) { contextConfig = { alpha: "true" }; }
this.restorables = new Array(); this.restorables = new Array();
if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
this.gl = canvasOrContext; this.gl = canvasOrContext;

File diff suppressed because one or more lines are too long

View File

@ -33,8 +33,8 @@ module spine.webgl {
public gl: WebGLRenderingContext; public gl: WebGLRenderingContext;
private restorables = new Array<Restorable>(); private restorables = new Array<Restorable>();
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget | WebGL2RenderingContext, contextConfig: any = { alpha: "true" }) { constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) {
if (!((canvasOrContext instanceof WebGLRenderingContext) || (canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
this.gl = canvasOrContext; this.gl = canvasOrContext;