@wiredsnippets/wsproom 0.0.0-stage → 2.0.0

package/dist-esm/objects/avatar/AvatarLoader.js

@@ -0,0 +1,211 @@
+import { createLookServer } from "./util";
+import Bluebird from "bluebird";
+import { AvatarAnimationData } from "./data/AvatarAnimationData";
+import { FigureMapData } from "./data/FigureMapData";
+import { AvatarPartSetsData } from "./data/AvatarPartSetsData";
+import { FigureData } from "./data/FigureData";
+import { AvatarActionsData } from "./data/AvatarActionsData";
+import { AvatarGeometryData } from "./data/AvatarGeometryData";
+import { LegacyAssetBundle } from "../../assets/LegacyAssetBundle";
+import { WsproomAssetBundle } from "../../assets/WsproomAssetBundle";
+import { AvatarEffectMap } from "./data/AvatarEffectMap";
+import { AvatarEffectBundle } from "./AvatarEffectBundle";
+import { getLibrariesForLook } from "./util/getLibrariesForLook";
+import { parseLookString } from "./util/parseLookString";
+import { AvatarAssetLibraryCollection } from "./AvatarAssetLibraryCollection";
+import { ManifestLibrary } from "./data/ManifestLibrary";
+function _getLookOptionsString(lookOptions) {
+    const parts = [];
+    if (lookOptions.actions.size > 0) {
+        const actionString = Array.from(lookOptions.actions)
+            .map((action) => action)
+            .join(",");
+        parts.push(`actions(${actionString})`);
+    }
+    parts.push(`direction(${lookOptions.direction})`);
+    parts.push(`headdirection(${lookOptions.headDirection})`);
+    if (lookOptions.item != null) {
+        parts.push(`item(${lookOptions.item})`);
+    }
+    if (lookOptions.look != null) {
+        parts.push(`look(${lookOptions.look})`);
+    }
+    if (lookOptions.effect != null) {
+        parts.push(`effect(${lookOptions.effect})`);
+    }
+    return parts.join(",");
+}
+export class AvatarLoader {
+    constructor(_options) {
+        this._options = _options;
+        this._effectCache = new Map();
+        this._lookOptionsCache = new Map();
+        this._assetBundles = new Map();
+        this._offsets = new AvatarAssetLibraryCollection();
+        this._dependencies = this._options.createDependencies();
+        this._lookServer = this._dependencies
+            .then(async (dependencies) => {
+            return createLookServer({
+                ...dependencies,
+                offsetsData: this._offsets,
+            });
+        })
+            .then(async (server) => {
+            // Wait for the placeholder model to load
+            await this._getAvatarDrawDefinition(server, {
+                direction: 0,
+                headDirection: 0,
+                actions: new Set(),
+                look: "hd-99999-99999",
+            });
+            return server;
+        });
+        this._effectMap = this._options.getEffectMap();
+    }
+    static create(resourcePath = "") {
+        return new AvatarLoader({
+            createDependencies: () => initializeDefaultAvatarDependencies(resourcePath),
+            getAssetBundle: async (library) => {
+                return new LegacyAssetBundle(`${resourcePath}/figure/${library}`);
+            },
+            getEffectMap: async () => {
+                const response = await fetch(`${resourcePath}/effectmap.xml`);
+                const text = await response.text();
+                return new AvatarEffectMap(text);
+            },
+            getEffectBundle: async (effect) => {
+                const data = await WsproomAssetBundle.fromUrl(`${resourcePath}/effects/${effect.lib}.wsproom`);
+                return new AvatarEffectBundle(data);
+            },
+        });
+    }
+    static createForAssetBundle(resourcePath = "") {
+        return new AvatarLoader({
+            createDependencies: () => initializeDefaultAvatarDependencies(resourcePath),
+            getAssetBundle: async (library) => {
+                return WsproomAssetBundle.fromUrl(`${resourcePath}/figure/${library}.wsproom`);
+            },
+            getEffectMap: async () => {
+                const response = await fetch(`${resourcePath}/effectmap.xml`);
+                const text = await response.text();
+                return new AvatarEffectMap(text);
+            },
+            getEffectBundle: async (effect) => {
+                const data = await WsproomAssetBundle.fromUrl(`${resourcePath}/effects/${effect.lib}.wsproom`);
+                return new AvatarEffectBundle(data);
+            },
+        });
+    }
+    async getAvatarDrawDefinition(options) {
+        const getDrawDefinition = await this._lookServer;
+        return this._getAvatarDrawDefinition(getDrawDefinition, options);
+    }
+    async _getAvatarDrawDefinition(getDrawDefinition, options) {
+        var _a;
+        const { effect } = options;
+        let effectData;
+        let effectBundle;
+        // If an effect is set, try to load it
+        if (effect != null) {
+            const effectCache = await this._loadEffectCached(effect);
+            if (effectCache != null) {
+                effectData = effectCache.effectData;
+                effectBundle = effectCache.effectBundle;
+            }
+        }
+        const { figureData, figureMap } = await this._dependencies;
+        // Open the effect library
+        if (effectBundle != null) {
+            await this._offsets.open(effectBundle);
+        }
+        // Get the required libraries for the look
+        const libs = getLibrariesForLook(parseLookString(options.look), {
+            figureData: figureData,
+            figureMap: figureMap,
+        });
+        // Open the required libraries for the look
+        await Promise.all(Array.from(libs).map((lib) => this._getAssetBundle(lib).then((bundle) => this._offsets.open(bundle))));
+        // Get asset ids for the look
+        const fileIds = (_a = getDrawDefinition(options, effectData)) === null || _a === void 0 ? void 0 : _a.getDrawDefinition().flatMap((part) => part.assets).map((asset) => asset.fileId);
+        // Load the required textures for the look
+        if (fileIds != null) {
+            await this._offsets.loadTextures(fileIds);
+        }
+        return {
+            getDrawDefinition: (options) => {
+                const result = this._getDrawDefinitionCached(getDrawDefinition, options, effectData);
+                if (result == null)
+                    throw new Error("Invalid look");
+                return result;
+            },
+            getTexture: (id) => {
+                const texture = this._offsets.getTexture(id);
+                if (texture == null) {
+                    console.error("Texture not found in", this._offsets);
+                    throw new Error(`Invalid texture: ${id}`);
+                }
+                return texture;
+            },
+        };
+    }
+    async _loadEffectCached(effect) {
+        const current = this._effectCache.get(effect);
+        if (current != null)
+            return current;
+        const promise = this._loadEffect(effect);
+        this._effectCache.set(effect, promise);
+        return promise;
+    }
+    async _loadEffect(effect) {
+        const effectMap = await this._effectMap;
+        const effectInfo = effectMap.getEffectInfo(effect);
+        if (effectInfo != null) {
+            const effectBundle = await this._options.getEffectBundle(effectInfo);
+            const effectData = await effectBundle.getData();
+            return {
+                effectBundle,
+                effectData,
+            };
+        }
+    }
+    async _getAssetBundle(library) {
+        const current = this._assetBundles.get(library);
+        if (current != null)
+            return current;
+        const bundle = this._options
+            .getAssetBundle(library)
+            .then((bundle) => new ManifestLibrary(bundle));
+        this._assetBundles.set(library, bundle);
+        return bundle;
+    }
+    _getDrawDefinitionCached(getAvatarDrawDefinition, lookOptions, effect) {
+        const key = _getLookOptionsString(lookOptions);
+        const existing = this._lookOptionsCache.get(key);
+        if (existing != null) {
+            return existing;
+        }
+        const drawDefinition = getAvatarDrawDefinition(lookOptions, effect);
+        if (drawDefinition == null)
+            return;
+        this._lookOptionsCache.set(key, drawDefinition);
+        return drawDefinition;
+    }
+}
+async function initializeDefaultAvatarDependencies(resourcePath) {
+    const { animationData, figureMap, figureData, partSetsData, actionsData, geometry, } = await Bluebird.props({
+        animationData: AvatarAnimationData.default(),
+        figureData: FigureData.fromUrl(`${resourcePath}/figuredata.xml`),
+        figureMap: FigureMapData.fromUrl(`${resourcePath}/figuremap.xml`),
+        partSetsData: AvatarPartSetsData.default(),
+        actionsData: AvatarActionsData.default(),
+        geometry: AvatarGeometryData.default(),
+    });
+    return {
+        animationData,
+        figureData,
+        figureMap,
+        partSetsData,
+        actionsData,
+        geometry,
+    };
+}

package/dist-esm/objects/avatar/BaseAvatar.js

@@ -0,0 +1,349 @@
+import * as PIXI from "pixi.js";
+import { ClickHandler } from "../hitdetection/ClickHandler";
+import { HitSprite } from "../hitdetection/HitSprite";
+import { isSetEqual } from "../../util/isSetEqual";
+import { AvatarFigurePartType } from "./enum/AvatarFigurePartType";
+import { NOOP_EVENT_MANAGER } from "../events/EventManager";
+import { AVATAR, } from "../events/interfaces/IEventGroup";
+import { EventOverOutHandler } from "../events/EventOverOutHandler";
+const bodyPartTypes = new Set([
+    AvatarFigurePartType.Head,
+    AvatarFigurePartType.Body,
+    AvatarFigurePartType.LeftHand,
+    AvatarFigurePartType.RightHand,
+]);
+const headPartTypes = new Set([
+    AvatarFigurePartType.Head,
+    AvatarFigurePartType.Face,
+    AvatarFigurePartType.Eyes,
+    AvatarFigurePartType.EyeAccessory,
+    AvatarFigurePartType.Hair,
+    AvatarFigurePartType.HairBig,
+    AvatarFigurePartType.FaceAccessory,
+    AvatarFigurePartType.HeadAccessory,
+    AvatarFigurePartType.HeadAccessoryExtra,
+]);
+export class BaseAvatar extends PIXI.Container {
+    /**
+     * Sprite Z-Index for hit detection
+     */
+    get spritesZIndex() {
+        return this._spritesZIndex;
+    }
+    set spritesZIndex(value) {
+        this._spritesZIndex = value;
+        this._updateSpritesZIndex();
+    }
+    get dependencies() {
+        if (this._dependencies == null)
+            throw new Error("Invalid dependencies in BaseAvatar");
+        return this._dependencies;
+    }
+    set dependencies(value) {
+        this._dependencies = value;
+        this._handleDependenciesSet();
+    }
+    get mounted() {
+        return this._dependencies != null;
+    }
+    get onClick() {
+        return this._clickHandler.onClick;
+    }
+    set onClick(value) {
+        this._clickHandler.onClick = value;
+    }
+    get onDoubleClick() {
+        return this._clickHandler.onDoubleClick;
+    }
+    set onDoubleClick(value) {
+        this._clickHandler.onDoubleClick = value;
+    }
+    get onPointerDown() {
+        return this._clickHandler.onPointerDown;
+    }
+    set onPointerDown(value) {
+        this._clickHandler.onPointerDown = value;
+    }
+    get onPointerUp() {
+        return this._clickHandler.onPointerUp;
+    }
+    set onPointerUp(value) {
+        this._clickHandler.onPointerUp = value;
+    }
+    get onPointerOut() {
+        return this._overOutHandler.onOut;
+    }
+    set onPointerOut(value) {
+        this._overOutHandler.onOut = value;
+    }
+    get onPointerOver() {
+        return this._overOutHandler.onOver;
+    }
+    set onPointerOver(value) {
+        this._overOutHandler.onOver = value;
+    }
+    get lookOptions() {
+        if (this._nextLookOptions != null) {
+            return this._nextLookOptions;
+        }
+        if (this._lookOptions == null)
+            throw new Error("Invalid look options");
+        return this._lookOptions;
+    }
+    set lookOptions(lookOptions) {
+        this._updateLookOptions(this._lookOptions, lookOptions);
+    }
+    get currentFrame() {
+        return this._currentFrame;
+    }
+    set currentFrame(value) {
+        if (value === this._currentFrame) {
+            return;
+        }
+        this._currentFrame = value;
+        this._refreshFrame = true;
+    }
+    constructor(options) {
+        var _a, _b, _c;
+        super();
+        this._avatarDestroyed = false;
+        this._currentFrame = 0;
+        this._clickHandler = new ClickHandler();
+        this._overOutHandler = new EventOverOutHandler();
+        this._refreshFrame = false;
+        this._refreshLook = false;
+        this._sprites = new Map();
+        this._updateId = 0;
+        this._spritesZIndex = 0;
+        this.x = options.position.x;
+        this.y = options.position.y;
+        this.zIndex = options.zIndex;
+        this.spritesZIndex = options.zIndex;
+        this._nextLookOptions = options.look;
+        this._onLoad = options.onLoad;
+        this._skipBodyParts = (_a = options.skipBodyParts) !== null && _a !== void 0 ? _a : false;
+        this._headOnly = (_b = options.headOnly) !== null && _b !== void 0 ? _b : false;
+        this._skipCaching = (_c = options.skipCaching) !== null && _c !== void 0 ? _c : false;
+    }
+    static fromWsproom(wsproom, options) {
+        const avatar = new BaseAvatar({ ...options });
+        avatar.dependencies = {
+            ...wsproom.dependencies,
+            eventManager: NOOP_EVENT_MANAGER,
+        };
+        return avatar;
+    }
+    getEventGroupIdentifier() {
+        return AVATAR;
+    }
+    destroy() {
+        super.destroy();
+        this._destroyAssets();
+        if (this._cancelTicker != null) {
+            this._cancelTicker();
+        }
+    }
+    _destroyAssets() {
+        var _a;
+        this._sprites.forEach((sprite) => {
+            this._overOutHandler.remove(sprite.events);
+            sprite.destroy();
+        });
+        this._sprites = new Map();
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    _updateSpritesZIndex() {
+        this._sprites.forEach((sprite) => {
+            sprite.zIndex = this.spritesZIndex;
+        });
+    }
+    _updateLookOptions(oldLookOptions, newLookOptions) {
+        if (oldLookOptions == null ||
+            !isSetEqual(oldLookOptions.actions, newLookOptions.actions) ||
+            oldLookOptions.look != newLookOptions.look ||
+            oldLookOptions.item != newLookOptions.item ||
+            oldLookOptions.effect != newLookOptions.effect ||
+            oldLookOptions.direction != newLookOptions.direction ||
+            oldLookOptions.headDirection != newLookOptions.headDirection) {
+            this._nextLookOptions = newLookOptions;
+            this._refreshLook = true;
+        }
+    }
+    _updatePosition(definition) {
+        if (this._container == null)
+            return;
+        this._container.x = 0;
+        this._container.y = 0;
+    }
+    _updateSprites() {
+        if (this._avatarLoaderResult == null)
+            return;
+        if (this._lookOptions == null)
+            return;
+        const definition = this._avatarLoaderResult.getDrawDefinition(this._lookOptions);
+        this._avatarDrawDefinition = definition;
+        this._updateSpritesWithAvatarDrawDefinition(definition, this.currentFrame);
+        this._updatePosition(definition);
+    }
+    _updateSpritesWithAvatarDrawDefinition(drawDefinition, currentFrame) {
+        var _a;
+        if (this._avatarDestroyed)
+            throw new Error("BaseAvatar was destroyed already");
+        if (!this.mounted)
+            return;
+        this._sprites.forEach((value) => {
+            value.visible = false;
+            value.ignore = true;
+        });
+        (_a = this._container) === null || _a === void 0 ? void 0 : _a.destroy();
+        this._container = new PIXI.Container();
+        this._container.sortableChildren = true;
+        drawDefinition.getDrawDefinition().forEach((part) => {
+            var _a, _b;
+            if (part.kind === "AVATAR_DRAW_PART") {
+                const figurePart = part.type;
+                if (this._skipBodyParts && bodyPartTypes.has(figurePart)) {
+                    return;
+                }
+                if (this._headOnly && !headPartTypes.has(figurePart)) {
+                    return;
+                }
+                const frame = currentFrame % part.assets.length;
+                const asset = part.assets[frame];
+                let sprite = this._sprites.get(asset.fileId);
+                if (sprite == null) {
+                    sprite = this._createAsset(part, asset);
+                    if (sprite != null) {
+                        this._overOutHandler.register(sprite.events);
+                    }
+                }
+                if (sprite == null)
+                    return;
+                sprite.x = asset.x;
+                sprite.y = asset.y;
+                sprite.visible = true;
+                sprite.mirrored = asset.mirror;
+                sprite.ignore = false;
+                sprite.zIndex = this.spritesZIndex + part.z;
+                this._sprites.set(asset.fileId, sprite);
+                (_a = this._container) === null || _a === void 0 ? void 0 : _a.addChild(sprite);
+            }
+            else if (part.kind === "EFFECT_DRAW_PART") {
+                const frame = currentFrame % part.assets.length;
+                const asset = part.assets[frame];
+                let sprite = this._sprites.get(asset.fileId);
+                if (sprite == null) {
+                    sprite = this._createAsset(part, asset);
+                    if (sprite != null) {
+                        this._overOutHandler.register(sprite.events);
+                    }
+                }
+                if (sprite == null)
+                    return;
+                switch (part.ink) {
+                    case 33:
+                        sprite.blendMode = "add";
+                        break;
+                }
+                sprite.x =
+                    asset.x +
+                        (asset.substractWidth != null && asset.substractWidth
+                            ? sprite.texture.width
+                            : 0);
+                sprite.y = asset.y;
+                sprite.visible = true;
+                sprite.mirrored = asset.mirror;
+                sprite.ignore = false;
+                sprite.zIndex = this.spritesZIndex + part.z;
+                this._sprites.set(asset.fileId, sprite);
+                (_b = this._container) === null || _b === void 0 ? void 0 : _b.addChild(sprite);
+            }
+        });
+        this.addChild(this._container);
+    }
+    _createAsset(part, asset) {
+        if (this._avatarLoaderResult == null)
+            throw new Error("Cant create asset when avatar loader result not present");
+        const texture = this._avatarLoaderResult.getTexture(asset.fileId);
+        if (texture == null)
+            return;
+        const sprite = new HitSprite({
+            eventManager: this.dependencies.eventManager,
+            mirrored: asset.mirror,
+            group: this,
+        });
+        sprite.hitTexture = texture;
+        sprite.x = asset.x;
+        sprite.y = asset.y;
+        sprite.events.addEventListener("click", (event) => {
+            this._clickHandler.handleClick(event);
+        });
+        sprite.events.addEventListener("pointerdown", (event) => {
+            this._clickHandler.handlePointerDown(event);
+        });
+        sprite.events.addEventListener("pointerup", (event) => {
+            this._clickHandler.handlePointerUp(event);
+        });
+        if (part.kind === "AVATAR_DRAW_PART" &&
+            part.color != null &&
+            part.mode === "colored") {
+            sprite.tint = parseInt(part.color.slice(1), 16);
+        }
+        else {
+            sprite.tint = 0xffffff;
+        }
+        return sprite;
+    }
+    _reloadLook() {
+        if (!this.mounted)
+            return;
+        const lookOptions = this._nextLookOptions;
+        if (lookOptions != null) {
+            const requestId = ++this._updateId;
+            this.dependencies.avatarLoader
+                .getAvatarDrawDefinition({
+                ...lookOptions,
+                initial: true,
+                skipCaching: this._skipCaching,
+            })
+                .then((result) => {
+                if (this._avatarDestroyed)
+                    return;
+                if (requestId !== this._updateId)
+                    return;
+                this._avatarLoaderResult = result;
+                this._lookOptions = lookOptions;
+                this._nextLookOptions = undefined;
+                // Clear sprite cache, since colors could have changed
+                this._destroyAssets();
+                this._updateSprites();
+                this._onLoad && this._onLoad();
+            });
+        }
+    }
+    _updateFrame() {
+        if (this._avatarDrawDefinition == null)
+            return;
+        this._updateSpritesWithAvatarDrawDefinition(this._avatarDrawDefinition, this.currentFrame);
+        this._updatePosition(this._avatarDrawDefinition);
+    }
+    _handleDependenciesSet() {
+        this._reloadLook();
+        if (this._cancelTicker != null) {
+            this._cancelTicker();
+        }
+        if (this._cancelTicker != null) {
+            this._cancelTicker();
+        }
+        this._cancelTicker = this.dependencies.animationTicker.subscribe(() => {
+            if (this._refreshLook) {
+                this._refreshLook = false;
+                this._reloadLook();
+            }
+            if (this._refreshFrame) {
+                this._refreshFrame = false;
+                this._updateFrame();
+            }
+        });
+    }
+}

package/dist-esm/objects/avatar/data/AvatarActionsData.js

@@ -0,0 +1,80 @@
+import { actionsXml } from "./static/actions.xml";
+export class AvatarActionsData {
+    constructor(xml) {
+        this._map = new Map();
+        this._handItems = new Map();
+        const document = new DOMParser().parseFromString(xml, "text/xml");
+        document.querySelectorAll(`action`).forEach((action) => {
+            const actionId = action.getAttribute("id");
+            if (actionId == null)
+                return;
+            const info = getAvatarActionInfoFromElement(action);
+            this._map.set(actionId, info);
+            action.querySelectorAll(`param`).forEach((param) => {
+                const paramId = param.getAttribute("id");
+                if (paramId == null)
+                    return;
+                const value = Number(param === null || param === void 0 ? void 0 : param.getAttribute("value"));
+                if (isNaN(value))
+                    return;
+                this._handItems.set(`${actionId}_${paramId}`, value);
+            });
+        });
+    }
+    static async fromUrl(url) {
+        const response = await fetch(url);
+        const text = await response.text();
+        return new AvatarActionsData(text);
+    }
+    static default() {
+        return new AvatarActionsData(atob(actionsXml));
+    }
+    getHandItemId(actionId, id) {
+        return this._handItems.get(`${actionId}_${id}`);
+    }
+    getActions() {
+        return Array.from(this._map.values());
+    }
+    getAction(id) {
+        return this._map.get(id);
+    }
+}
+function getAvatarActionInfoFromElement(action) {
+    var _a;
+    const id = action.getAttribute("id");
+    const state = action.getAttribute("state");
+    const precedenceString = action.getAttribute("precedence");
+    const geometrytype = action.getAttribute("geometrytype");
+    const activepartset = action.getAttribute("activepartset");
+    const assetpartdefinition = action.getAttribute("assetpartdefinition");
+    const preventsString = action.getAttribute("prevents");
+    const animation = action.getAttribute("animation");
+    const main = action.getAttribute("main");
+    const isdefault = action.getAttribute("isdefault");
+    if (id == null)
+        throw new Error("Invalid id");
+    if (state == null)
+        throw new Error("Invalid state");
+    if (precedenceString == null)
+        throw new Error("Invalid precedence");
+    if (geometrytype == null)
+        throw new Error("Invalid geometry type");
+    if (assetpartdefinition == null)
+        throw new Error("Invalid asset part definition");
+    const prevents = (_a = preventsString === null || preventsString === void 0 ? void 0 : preventsString.split(",")) !== null && _a !== void 0 ? _a : [];
+    const precedence = Number(precedenceString);
+    if (isNaN(precedence))
+        throw new Error("Invalid precedence");
+    return {
+        id,
+        state,
+        precedence,
+        geometrytype,
+        activepartset,
+        assetpartdefinition,
+        prevents,
+        animation: animation === "1",
+        main: main === "1",
+        isdefault: isdefault === "1",
+    };
+}