public getDOMSprite()

in src/viewer/SpriteService.ts [68:159]


    public getDOMSprite(
        name: string,
        float?: Alignment): vd.VNode {

        if (!this.loaded) {
            throw new Error("Sprites cannot be retrieved before the atlas is loaded.");
        }

        if (float == null) {
            float = Alignment.Center;
        }

        let definition: Sprite = this._json[name];

        if (!definition) {
            console.warn("Sprite with key" + name + "does not exist in sprite definition.");

            return vd.h("div", {}, []);
        }

        let clipTop: number = definition.y;
        let clipRigth: number = definition.x + definition.width;
        let clipBottom: number = definition.y + definition.height;
        let clipLeft: number = definition.x;

        let left: number = -definition.x;
        let top: number = -definition.y;

        let height: number = this._image.height;
        let width: number = this._image.width;

        switch (float) {
            case Alignment.Bottom:
            case Alignment.Center:
            case Alignment.Top:
                left -= definition.width / 2;
                break;
            case Alignment.BottomLeft:
            case Alignment.Left:
            case Alignment.TopLeft:
                left -= definition.width;
                break;
            case Alignment.BottomRight:
            case Alignment.Right:
            case Alignment.TopRight:
            default:
                break;
        }

        switch (float) {
            case Alignment.Center:
            case Alignment.Left:
            case Alignment.Right:
                top -= definition.height / 2;
                break;
            case Alignment.Top:
            case Alignment.TopLeft:
            case Alignment.TopRight:
                top -= definition.height;
                break;
            case Alignment.Bottom:
            case Alignment.BottomLeft:
            case Alignment.BottomRight:
            default:
                break;
        }

        let pixelRatioInverse: number = 1 / definition.pixelRatio;

        clipTop *= pixelRatioInverse;
        clipRigth *= pixelRatioInverse;
        clipBottom *= pixelRatioInverse;
        clipLeft *= pixelRatioInverse;
        left *= pixelRatioInverse;
        top *= pixelRatioInverse;
        height *= pixelRatioInverse;
        width *= pixelRatioInverse;

        let properties: vd.createProperties = {
            src: this._image.src,
            style: {
                clip: `rect(${clipTop}px, ${clipRigth}px, ${clipBottom}px, ${clipLeft}px)`,
                height: `${height}px`,
                left: `${left}px`,
                position: "absolute",
                top: `${top}px`,
                width: `${width}px`,
            },
        };

        return vd.h("img", properties, []);
    }