@eva/spine-base 2.0.0-beta.1 → 2.0.0-beta.3

package/dist/spine-base.esm.js

@@ -1,5 +1,5 @@
 import { Component, OBSERVER_TYPE, decorators, resource } from '@eva/eva.js';
-import { RendererSystem, Renderer } from '@eva/plugin-renderer';
+import { Renderer, RendererSystem } from '@eva/plugin-renderer';
 import { type } from '@eva/inspector-decorator';
 import { Texture } from 'pixi.js';
 
@@ -17,20 +17,6 @@ MERCHANTABLITY OR NON-INFRINGEMENT.
 See the Apache Version 2.0 License for specific language governing permissions
 and limitations under the License.
 ***************************************************************************** */
-/* global Reflect, Promise */
-
-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);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
 
 function __decorate(decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -46,112 +32,56 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __values(o) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
-    if (m) return m.call(o);
-    return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
 }
 
-var Spine = (function (_super) {
-    __extends(Spine, _super);
-    function Spine() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.resource = '';
-        _this.scale = 1;
-        _this.animationName = '';
-        _this.autoPlay = true;
-        _this.waitExecuteInfos = [];
-        return _this;
+class Spine extends Component {
+    constructor() {
+        super(...arguments);
+        this.resource = '';
+        this.scale = 1;
+        this.animationName = '';
+        this.autoPlay = true;
+        this.waitExecuteInfos = [];
     }
-    Object.defineProperty(Spine.prototype, "armature", {
-        get: function () {
-            return this._armature;
-        },
-        set: function (val) {
-            var e_1, _a;
-            this._armature = val;
-            if (!val)
-                return;
-            if (this.autoPlay) {
-                this.play(this.animationName);
-            }
-            try {
-                for (var _b = __values(this.waitExecuteInfos), _c = _b.next(); !_c.done; _c = _b.next()) {
-                    var info = _c.value;
-                    if (info.playType) {
-                        var name_1 = info.name, loop = info.loop, track = info.track;
-                        this.play(name_1, loop, track);
-                    }
-                    else {
-                        this.stop(info.track);
-                    }
-                }
+    set armature(val) {
+        this._armature = val;
+        if (!val)
+            return;
+        if (this.autoPlay) {
+            this.play(this.animationName);
+        }
+        for (const info of this.waitExecuteInfos) {
+            if (info.playType) {
+                const { name, loop, track } = info;
+                this.play(name, loop, track);
             }
-            catch (e_1_1) { e_1 = { error: e_1_1 }; }
-            finally {
-                try {
-                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
-                }
-                finally { if (e_1) throw e_1.error; }
+            else {
+                this.stop(info.track);
             }
-            this.waitExecuteInfos = [];
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Spine.prototype.init = function (obj) {
+        }
+        this.waitExecuteInfos = [];
+    }
+    get armature() {
+        return this._armature;
+    }
+    init(obj) {
         if (!obj)
             return;
         Object.assign(this, obj);
-    };
-    Spine.prototype.onDestroy = function () {
+    }
+    onDestroy() {
         this.destroied = true;
-    };
-    Spine.prototype.play = function (name, loop, track) {
+    }
+    play(name, loop, track) {
         try {
             if (name)
                 this.animationName = name;
             if (!this.armature) {
                 this.waitExecuteInfos.push({
                     playType: true,
-                    name: name,
+                    name,
                     loop: loop !== null && loop !== void 0 ? loop : this.autoPlay,
-                    track: track,
+                    track,
                 });
             }
             else {
@@ -164,12 +94,12 @@ var Spine = (function (_super) {
         catch (e) {
             console.log(e);
         }
-    };
-    Spine.prototype.stop = function (track) {
+    }
+    stop(track) {
         if (!this.armature) {
             this.waitExecuteInfos.push({
                 playType: false,
-                track: track,
+                track,
             });
             return;
         }
@@ -177,8 +107,8 @@ var Spine = (function (_super) {
             track = 0;
         }
         this.armature.state.setEmptyAnimation(track, 0);
-    };
-    Spine.prototype.addAnimation = function (name, delay, loop, track) {
+    }
+    addAnimation(name, delay, loop, track) {
         try {
             if (!this.armature) {
             }
@@ -192,15 +122,14 @@ var Spine = (function (_super) {
         catch (e) {
             console.log(e);
         }
-    };
-    Spine.prototype.setMix = function (from, to, duration) {
+    }
+    setMix(from, to, duration) {
         if (!this.armature) ;
         else {
             this.armature.stateData.setMix(from, to, duration);
         }
-    };
-    Spine.prototype.getAnim = function (track) {
-        if (track === void 0) { track = 0; }
+    }
+    getAnim(track = 0) {
         try {
             if (!this.armature) {
             }
@@ -211,52 +140,50 @@ var Spine = (function (_super) {
         catch (e) {
             console.log(e);
         }
-    };
-    Spine.prototype.setDefaultMix = function (duration) {
+    }
+    setDefaultMix(duration) {
         if (!this.armature) ;
         else {
             this.armature.stateData.defaultMix = duration;
         }
-    };
-    Spine.prototype.setAttachment = function (slotName, attachmentName) {
+    }
+    setAttachment(slotName, attachmentName) {
         if (!this.armature) {
             return;
         }
         this.armature.skeleton.setAttachment(slotName, attachmentName);
-    };
-    Spine.prototype.getBone = function (boneName) {
+    }
+    getBone(boneName) {
         if (!this.armature) {
             return;
         }
         return this.armature.skeleton.findBone(boneName);
-    };
-    Spine.componentName = 'Spine';
-    __decorate([
-        type('string')
-    ], Spine.prototype, "resource", void 0);
-    __decorate([
-        type('number')
-    ], Spine.prototype, "scale", void 0);
-    __decorate([
-        type('string')
-    ], Spine.prototype, "animationName", void 0);
-    __decorate([
-        type('boolean')
-    ], Spine.prototype, "autoPlay", void 0);
-    return Spine;
-}(Component));
-var Spine$1 = Spine;
+    }
+}
+Spine.componentName = 'Spine';
+__decorate([
+    type('string')
+], Spine.prototype, "resource", void 0);
+__decorate([
+    type('number')
+], Spine.prototype, "scale", void 0);
+__decorate([
+    type('string')
+], Spine.prototype, "animationName", void 0);
+__decorate([
+    type('boolean')
+], Spine.prototype, "autoPlay", void 0);
 
-var texCache = {};
+let texCache = {};
 function cacheImage(data) {
-    var oldImg = data.image;
+    const oldImg = data.image;
     return {
         tex: oldImg instanceof Texture ? oldImg : Texture.from(oldImg),
         count: 0,
     };
 }
 function retainTexture(name, data) {
-    var cache = texCache[name];
+    let cache = texCache[name];
     if (!cache) {
         cache = cacheImage(data);
         texCache[name] = cache;
@@ -267,8 +194,8 @@ function retainTexture(name, data) {
 function releaseTexture(imageSrc) {
     if (!imageSrc)
         return;
-    setTimeout(function () {
-        var cache = texCache[imageSrc];
+    setTimeout(() => {
+        const cache = texCache[imageSrc];
         if (cache) {
             cache.count--;
             if (cache.count <= 0) {
@@ -282,41 +209,38 @@ function releaseTexture(imageSrc) {
     }, 100);
 }
 
-var dataMap = {};
+let dataMap = {};
 function createSpineData(name, data, scale, pixiSpine) {
-    var skeletonAsset = data.ske;
-    var atlasAsset = data.atlas;
-    var attachmentLoader = new pixiSpine.AtlasAttachmentLoader(atlasAsset);
-    var parser = skeletonAsset instanceof Uint8Array
+    const skeletonAsset = data.ske;
+    const atlasAsset = data.atlas;
+    const attachmentLoader = new pixiSpine.AtlasAttachmentLoader(atlasAsset);
+    const parser = skeletonAsset instanceof Uint8Array
         ? new pixiSpine.SkeletonBinary(attachmentLoader)
         : new pixiSpine.SkeletonJson(attachmentLoader);
     parser.scale = scale || 1;
-    var skeletonData = parser.readSkeletonData(skeletonAsset);
-    var obj = { spineData: skeletonData, ref: 0, imageSrc: data.image.label };
+    const skeletonData = parser.readSkeletonData(skeletonAsset);
+    const obj = { spineData: skeletonData, ref: 0, imageSrc: data.image.label };
     dataMap[name] = obj;
     return obj;
 }
 function getSpineData(res, scale, pixiSpine) {
-    return __awaiter(this, void 0, void 0, function () {
-        var data;
-        return __generator(this, function (_a) {
-            data = dataMap[res.name];
-            if (!data) {
-                if (res.complete) {
-                    data = createSpineData(res.name, res.data, scale, pixiSpine);
-                }
-                else if (!data) {
-                    return [2];
-                }
+    return __awaiter(this, void 0, void 0, function* () {
+        let data = dataMap[res.name];
+        if (!data) {
+            if (res.complete) {
+                data = createSpineData(res.name, res.data, scale, pixiSpine);
             }
-            retainTexture(res.data.image.label, res.data);
-            data.ref++;
-            return [2, data.spineData];
-        });
+            else if (!data) {
+                return;
+            }
+        }
+        retainTexture(res.data.image.label, res.data);
+        data.ref++;
+        return data.spineData;
     });
 }
 function releaseSpineData(resourceName, imageSrc) {
-    var data = dataMap[resourceName];
+    const data = dataMap[resourceName];
     if (!data) {
         return;
     }
@@ -327,208 +251,178 @@ function releaseSpineData(resourceName, imageSrc) {
     }
 }
 
-var MaxRetryCount = 20;
-var SpineSystem = (function (_super) {
-    __extends(SpineSystem, _super);
-    function SpineSystem() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.armatures = {};
-        return _this;
+const MaxRetryCount = 20;
+let SpineSystem = class SpineSystem extends Renderer {
+    constructor() {
+        super(...arguments);
+        this.armatures = {};
     }
-    SpineSystem.prototype.init = function (_a) {
-        var _this = this;
-        var pixiSpine = _a.pixiSpine;
+    init({ pixiSpine }) {
         this.renderSystem = this.game.getSystem(RendererSystem);
         this.renderSystem.rendererManager.register(this);
         this.pixiSpine = pixiSpine;
-        this.game.canvas.addEventListener('webglcontextrestored', function () {
-            var objs = _this.game.gameObjects;
-            var toAdd = [];
-            for (var k in _this.armatures) {
-                var id = +k;
-                for (var i = 0; i < objs.length; ++i) {
-                    var obj = objs[i];
+        this.game.canvas.addEventListener('webglcontextrestored', () => {
+            const objs = this.game.gameObjects;
+            let toAdd = [];
+            for (let k in this.armatures) {
+                const id = +k;
+                for (let i = 0; i < objs.length; ++i) {
+                    let obj = objs[i];
                     if (obj.id === id) {
-                        var sp = obj.getComponent(Spine$1);
+                        let sp = obj.getComponent(Spine);
                         if (sp) {
-                            _this.remove({
+                            this.remove({
                                 type: OBSERVER_TYPE.REMOVE,
                                 gameObject: obj,
                                 component: sp,
-                                componentName: Spine$1.componentName,
+                                componentName: Spine.componentName,
                             });
                             toAdd.push({
                                 type: OBSERVER_TYPE.ADD,
                                 gameObject: obj,
                                 component: sp,
-                                componentName: Spine$1.componentName,
+                                componentName: Spine.componentName,
                             });
                         }
                         break;
                     }
                 }
             }
-            setTimeout(function () {
-                toAdd.forEach(function (obj) {
-                    _this.add(obj);
+            setTimeout(() => {
+                toAdd.forEach(obj => {
+                    this.add(obj);
                 });
             }, 1000);
         }, false);
-    };
-    SpineSystem.prototype.update = function (e) {
-        for (var key in this.armatures) {
+    }
+    update(e) {
+        for (let key in this.armatures) {
             this.armatures[key].update(e.deltaTime * 0.001);
         }
-        _super.prototype.update.call(this);
-    };
-    SpineSystem.prototype.componentChanged = function (changed) {
-        return __awaiter(this, void 0, void 0, function () {
-            return __generator(this, function (_a) {
-                if (changed.componentName === 'Spine') {
-                    if (changed.type === OBSERVER_TYPE.ADD) {
-                        this.add(changed);
-                    }
-                    else if (changed.type === OBSERVER_TYPE.CHANGE) {
-                        switch (changed.prop.prop[0]) {
-                            case 'resource':
-                                this.change(changed);
-                                break;
-                        }
-                    }
-                    else if (changed.type === OBSERVER_TYPE.REMOVE) {
-                        this.remove(changed);
+        super.update();
+    }
+    componentChanged(changed) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (changed.componentName === 'Spine') {
+                if (changed.type === OBSERVER_TYPE.ADD) {
+                    this.add(changed);
+                }
+                else if (changed.type === OBSERVER_TYPE.CHANGE) {
+                    switch (changed.prop.prop[0]) {
+                        case 'resource':
+                            this.change(changed);
+                            break;
                     }
                 }
-                return [2];
-            });
+                else if (changed.type === OBSERVER_TYPE.REMOVE) {
+                    this.remove(changed);
+                }
+            }
         });
-    };
-    SpineSystem.prototype.add = function (changed, count) {
+    }
+    add(changed, count) {
         var _a, _b;
-        return __awaiter(this, void 0, void 0, function () {
-            var component, gameObjectId, asyncId, res, spineData, container, armature, tran;
-            var _this = this;
-            return __generator(this, function (_c) {
-                switch (_c.label) {
-                    case 0:
-                        component = changed.component;
-                        clearTimeout(component.addHandler);
-                        gameObjectId = changed.gameObject.id;
-                        asyncId = this.increaseAsyncId(gameObjectId);
-                        return [4, resource.getResource(component.resource)];
-                    case 1:
-                        res = _c.sent();
-                        if (!this.validateAsyncId(gameObjectId, asyncId))
-                            return [2];
-                        return [4, getSpineData(res, component.scale, this.pixiSpine)];
-                    case 2:
-                        spineData = _c.sent();
-                        if (!this.validateAsyncId(gameObjectId, asyncId))
-                            return [2];
-                        if (!spineData) {
-                            component.addHandler = setTimeout(function () {
-                                if (!component.destroied) {
-                                    if (count === undefined) {
-                                        count = MaxRetryCount;
-                                    }
-                                    count--;
-                                    if (count > 0) {
-                                        _this.add(changed, count);
-                                    }
-                                    else {
-                                        console.log('retry exceed max times', component.resource);
-                                    }
-                                }
-                            }, 1000);
-                            return [2];
+        return __awaiter(this, void 0, void 0, function* () {
+            const component = changed.component;
+            clearTimeout(component.addHandler);
+            const gameObjectId = changed.gameObject.id;
+            const asyncId = this.increaseAsyncId(gameObjectId);
+            const res = yield resource.getResource(component.resource);
+            if (!this.validateAsyncId(gameObjectId, asyncId))
+                return;
+            const spineData = yield getSpineData(res, component.scale, this.pixiSpine);
+            if (!this.validateAsyncId(gameObjectId, asyncId))
+                return;
+            if (!spineData) {
+                component.addHandler = setTimeout(() => {
+                    if (!component.destroied) {
+                        if (count === undefined) {
+                            count = MaxRetryCount;
                         }
-                        this.remove(changed);
-                        container = (_b = (_a = this.renderSystem) === null || _a === void 0 ? void 0 : _a.containerManager) === null || _b === void 0 ? void 0 : _b.getContainer(changed.gameObject.id);
-                        if (!container) {
-                            return [2];
+                        count--;
+                        if (count > 0) {
+                            this.add(changed, count);
                         }
-                        component.lastResource = component.resource;
-                        armature = new this.pixiSpine.Spine({
-                            skeletonData: spineData,
-                            autoUpdate: false,
-                        });
-                        this.armatures[changed.gameObject.id] = armature;
-                        if (changed.gameObject && changed.gameObject.transform) {
-                            tran = changed.gameObject.transform;
-                            armature.x = tran.size.width * tran.origin.x;
-                            armature.y = tran.size.height * tran.origin.y;
+                        else {
+                            console.log('retry exceed max times', component.resource);
                         }
-                        container.addChildAt(armature, 0);
-                        armature.update();
-                        component.armature = armature;
-                        component.emit('loaded', { resource: component.resource });
-                        armature.state.addListener({
-                            start: function (track, event) {
-                                component.emit('start', { track: track, name: track.animation.name });
-                            },
-                            complete: function (track, event) {
-                                component.emit('complete', { track: track, name: track.animation.name });
-                            },
-                            interrupt: function (track, event) {
-                                component.emit('interrupt', { track: track, name: track.animation.name });
-                            },
-                            end: function (track, event) {
-                                component.emit('end', { track: track, name: track.animation.name });
-                            },
-                            event: function (track, event) {
-                                component.emit('event', track, event);
-                            },
-                        });
-                        return [2];
-                }
+                    }
+                }, 1000);
+                return;
+            }
+            this.remove(changed);
+            const container = (_b = (_a = this.renderSystem) === null || _a === void 0 ? void 0 : _a.containerManager) === null || _b === void 0 ? void 0 : _b.getContainer(changed.gameObject.id);
+            if (!container) {
+                return;
+            }
+            component.lastResource = component.resource;
+            const armature = new this.pixiSpine.Spine({
+                skeletonData: spineData,
+                autoUpdate: false,
+            });
+            this.armatures[changed.gameObject.id] = armature;
+            if (changed.gameObject && changed.gameObject.transform) {
+                const tran = changed.gameObject.transform;
+                armature.x = tran.size.width * tran.origin.x;
+                armature.y = tran.size.height * tran.origin.y;
+            }
+            container.addChildAt(armature, 0);
+            armature.update();
+            component.armature = armature;
+            component.emit('loaded', { resource: component.resource });
+            armature.state.addListener({
+                start: (track, event) => {
+                    component.emit('start', { track, name: track.animation.name });
+                },
+                complete: (track, event) => {
+                    component.emit('complete', { track, name: track.animation.name });
+                },
+                interrupt: (track, event) => {
+                    component.emit('interrupt', { track, name: track.animation.name });
+                },
+                end: (track, event) => {
+                    component.emit('end', { track, name: track.animation.name });
+                },
+                event: (track, event) => {
+                    component.emit('event', track, event);
+                },
             });
         });
-    };
-    SpineSystem.prototype.change = function (changed) {
+    }
+    change(changed) {
         this.remove(changed);
         this.add(changed);
-    };
-    SpineSystem.prototype.remove = function (changed) {
+    }
+    remove(changed) {
         var _a, _b, _c, _d;
-        return __awaiter(this, void 0, void 0, function () {
-            var component, armature, container, res;
-            return __generator(this, function (_e) {
-                switch (_e.label) {
-                    case 0:
-                        this.increaseAsyncId(changed.gameObject.id);
-                        component = changed.component;
-                        clearTimeout(component.addHandler);
-                        armature = this.armatures[changed.gameObject.id];
-                        container = (_b = (_a = this.renderSystem) === null || _a === void 0 ? void 0 : _a.containerManager) === null || _b === void 0 ? void 0 : _b.getContainer(changed.gameObject.id);
-                        if (container && armature) {
-                            container.removeChild(armature);
-                        }
-                        if (!component.armature) return [3, 2];
-                        component.armature.destroy({ children: true });
-                        return [4, resource.getResource(component.lastResource)];
-                    case 1:
-                        res = _e.sent();
-                        releaseSpineData(res.name, (_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.image) === null || _d === void 0 ? void 0 : _d.src);
-                        _e.label = 2;
-                    case 2:
-                        component.armature = null;
-                        delete this.armatures[changed.gameObject.id];
-                        if (changed.type === OBSERVER_TYPE.CHANGE) ;
-                        return [2];
-                }
-            });
+        return __awaiter(this, void 0, void 0, function* () {
+            this.increaseAsyncId(changed.gameObject.id);
+            const component = changed.component;
+            clearTimeout(component.addHandler);
+            const armature = this.armatures[changed.gameObject.id];
+            const container = (_b = (_a = this.renderSystem) === null || _a === void 0 ? void 0 : _a.containerManager) === null || _b === void 0 ? void 0 : _b.getContainer(changed.gameObject.id);
+            if (container && armature) {
+                container.removeChild(armature);
+            }
+            if (component.armature) {
+                component.armature.destroy({ children: true });
+                const res = yield resource.getResource(component.lastResource);
+                releaseSpineData(res.name, (_d = (_c = res.data) === null || _c === void 0 ? void 0 : _c.image) === null || _d === void 0 ? void 0 : _d.src);
+            }
+            component.armature = null;
+            delete this.armatures[changed.gameObject.id];
+            if (changed.type === OBSERVER_TYPE.CHANGE) ;
         });
-    };
-    SpineSystem.systemName = 'SpineSystem';
-    SpineSystem = __decorate([
-        decorators.componentObserver({
-            Spine: ['resource'],
-        })
-    ], SpineSystem);
-    return SpineSystem;
-}(Renderer));
+    }
+};
+SpineSystem.systemName = 'SpineSystem';
+SpineSystem = __decorate([
+    decorators.componentObserver({
+        Spine: ['resource'],
+    })
+], SpineSystem);
 var SpineSystem$1 = SpineSystem;
 
 resource.registerResourceType('SPINE');
 
-export { Spine$1 as Spine, SpineSystem$1 as SpineSystem };
+export { Spine, SpineSystem$1 as SpineSystem };