!1687 优化:右侧材质栏封面图片跟随旋转

src/UI/Components/Asset.tsx

@@ -1,5 +1,4 @@
 import { ContextMenu, Menu, MenuItem } from '@blueprintjs/core';
-import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import React, { CSSProperties, DragEvent } from 'react';
 import * as xaop from 'xaop';
@@ -65,8 +64,7 @@ const TextStyle: CSSProperties = {
 @observer
 export class Asset extends React.Component<{ material: PhysicalMaterialRecord; }, {}>{
 
-    image: HTMLImageElement;
-    @observable imgUrl: string;
+    image = React.createRef<HTMLImageElement>();
     divColorRef = React.createRef<HTMLDivElement>();
     nameEl: HTMLDivElement;
     removeCall: Function[] = [];
@@ -81,15 +79,19 @@ export class Asset extends React.Component<{ material: PhysicalMaterialRecord; }
         this.renderIng = true;
 
         let material = this.props.material;
-        let imgUrl: string;
         if (material.useMap && material.map && material.map.Object)
-            imgUrl = await (material.map.Object as TextureTableRecord).Update();
+            await (material.map.Object as TextureTableRecord).Update();
         await material.Update();
+        MaterialRendererSingle().render(material.Material, (url: string) =>
+        {
+            if (this.image)
+                this.image.current.src = url;
+        });
 
-        this.imgUrl = imgUrl ?? "";
-
-        if (!this.imgUrl && this.divColorRef.current)
-            this.divColorRef.current.style.background = material.color;
+        if (!material.map)
+            this.divColorRef.current.style.border = "1px solid black";
+        else
+            this.divColorRef.current.style.border = "none";
 
         if (this.nameEl)
             this.nameEl.innerText = material.Name;
@@ -229,16 +231,13 @@ export class Asset extends React.Component<{ material: PhysicalMaterialRecord; }
                 }}
             >
                 <div
-                    style={{
-                        ...ImgStyle,
-                        border: this.imgUrl ? "none" : "1px solid black",
-                    }}
-                    onDragStart={this.handleStart}
-                    draggable={true}
+                    style={ImgStyle}
                     ref={this.divColorRef}
                 >
-                    {/* 因为空白的图片会导致拽拖失效,所以如果没有图片时,我们不绘制图片元素 */}
-                    {this.imgUrl && <img src={this.imgUrl} />}
+                    <img
+                        ref={this.image}
+                        onDragStart={this.handleStart}
+                    />
                 </div>
                 <div
                     style={TextStyle}