TextureElement.ts 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. module INSPECTOR {
  2. /**
  3. * Display a very small div corresponding to the given texture. On mouse over, display the full image
  4. */
  5. export class TextureElement extends BasicElement{
  6. /** The big div displaying the full image */
  7. private _textureDiv : HTMLElement;
  8. constructor(tex : BABYLON.Texture) {
  9. super();
  10. this._div.className = 'fa fa-search texture-element';
  11. // Create the texture viewer
  12. this._textureDiv = Helpers.CreateDiv('texture-viewer', this._div);
  13. // Img
  14. let imgDiv = Helpers.CreateDiv('texture-viewer-img', this._textureDiv);
  15. // Texture size
  16. let sizeDiv = Helpers.CreateDiv(null, this._textureDiv);
  17. if (tex) {
  18. sizeDiv.textContent = `${tex.getBaseSize().width}px x ${tex.getBaseSize().height}px`;
  19. imgDiv.style.backgroundImage = `url('${tex.url}')`;
  20. imgDiv.style.width = `${tex.getBaseSize().width}px`;
  21. imgDiv.style.height = `${tex.getBaseSize().height}px`;
  22. }
  23. this._div.addEventListener('mouseover', this._showViewer.bind(this, 'flex'));
  24. this._div.addEventListener('mouseout', this._showViewer.bind(this, 'none'));
  25. }
  26. public update(tex?:BABYLON.Texture) {
  27. }
  28. private _showViewer(mode:string) {
  29. this._textureDiv.style.display = mode;
  30. }
  31. }
  32. }