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, []);
}