TeaSpeak-Client/modules/renderer/icon-helper.ts
2019-08-21 10:00:27 +02:00

63 lines
1.9 KiB
TypeScript

import * as electron from "electron";
import NativeImage = electron.NativeImage;
let _div: JQuery;
let _icon_mash_url: string;
let _icon_mask_img: NativeImage;
let _cache_klass_map: {[key: string]: NativeImage};
export function class_to_image(klass: string) : NativeImage {
if(!klass || !_icon_mask_img || !_cache_klass_map)
return undefined;
if(_cache_klass_map[klass])
return _cache_klass_map[klass];
_div[0].classList.value = 'icon ' + klass;
const data = window.getComputedStyle(_div[0]);
const offset_x = parseInt(data.backgroundPositionX.split(",")[0]);
const offset_y = parseInt(data.backgroundPositionY.split(",")[0]);
//http://localhost/home/TeaSpeak/Web-Client/web/environment/development/img/client_icon_sprite.svg
//const hight = element.css('height');
//const width = element.css('width');
console.log("Offset: x: %o y: %o;", offset_x, offset_y);
return _cache_klass_map[klass] = _icon_mask_img.crop({
height: 16,
width: 16,
x: offset_x == 0 ? 0 : -offset_x,
y: offset_y == 0 ? 0 : -offset_y
});
}
export async function initialize() {
if(!_div) {
_div = $.spawn("div");
_div.css('display', 'none');
_div.appendTo(document.body);
}
const image = new Image();
image.src = 'img/client_icon_sprite.svg';
await new Promise((resolve, reject) => {
image.onload = resolve;
image.onerror = reject;
});
/* TODO: Get a size! */
const canvas = document.createElement("canvas");
canvas.width = 1024;
canvas.height = 1024;
canvas.getContext("2d").drawImage(image, 0, 0);
_cache_klass_map = {};
_icon_mash_url = canvas.toDataURL();
_icon_mask_img = electron.remote.nativeImage.createFromDataURL(_icon_mash_url);
}
export function finalize() {
_icon_mask_img = undefined;
_icon_mash_url = undefined;
_cache_klass_map = undefined;
}