display mip sizes

inspector/src/components/actionTabs/tabs/propertyGrids/materials/textures/bottomBar.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
+import { BaseTexture } from 'babylonjs';
 
 interface IBottomBarProps {
-    name: string;
+    texture: BaseTexture;
     mipLevel: number;
-    hasMips: boolean;
 }
 
 export class BottomBar extends React.PureComponent<IBottomBarProps> {
     render() {
+        const factor = Math.pow(2, this.props.mipLevel);
+        const width = Math.ceil(this.props.texture.getSize().width / factor);
+        const height = Math.ceil(this.props.texture.getSize().height / factor);
         return <div id='bottom-bar'>
-            <span id='file-url'>{this.props.name}</span>
-            {this.props.hasMips && <span id='mip-level'>MIP Preview: {this.props.mipLevel}</span>}
+            <span id='file-url'>{this.props.texture.name}</span>
+            {!this.props.texture.noMipmap && <span id='mip-level'>MIP Preview: {this.props.mipLevel} {width}x{height}</span>}
         </div>;
     }
 }

inspector/src/components/actionTabs/tabs/propertyGrids/materials/textures/propertiesBar.tsx

@@ -82,7 +82,7 @@ export class PropertiesBar extends React.PureComponent<IPropertiesBarProps,IProp
 
     render() {
         const {mipLevel, setMipLevel, pixelData, resizeTexture, texture, face, setFace, saveTexture, resetTexture, uploadTexture} = this.props;
-        const maxLevels = 1 + Math.floor(Math.log2(Math.max(texture.getSize().width, texture.getSize().height)));
+        const maxLevels = Math.floor(Math.log2(Math.max(texture.getSize().width, texture.getSize().height)));
         return <div id='properties'>
                 <div className='tab' id='logo-tab'>
                     <img className='icon' src={this._babylonLogo}/>

inspector/src/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditor.scss

@@ -91,6 +91,7 @@
                         text-align: 'left';
                         font-family: 'acumin-pro-condensed';
                         font-size: 15px;
+                        padding-left: 8px;
                     }
         
                     &:last-of-type {

inspector/src/components/actionTabs/tabs/propertyGrids/materials/textures/textureEditorComponent.tsx

@@ -314,7 +314,7 @@ export class TextureEditorComponent extends React.Component<ITextureEditorCompon
             <ChannelsBar channels={this.state.channels} setChannels={(channels) => {this.setState({channels})}}/>
             <TextureCanvasComponent canvas2D={this._2DCanvas} canvas3D={this._3DCanvas} canvasUI={this._UICanvas} texture={this.props.texture}/>
             <ToolSettings tool={currentTool} />
-            <BottomBar name={this.props.url} mipLevel={this.state.mipLevel} hasMips={!this.props.texture.noMipmap}/>
+            <BottomBar texture={this.props.texture} mipLevel={this.state.mipLevel}/>
         </div>
     }
 }