!2865 优化:酷家乐材质映射图片滚动时加载

src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts

@@ -1,6 +1,5 @@
 import { Intent } from "@blueprintjs/core";
 import { observable, runInAction, toJS } from "mobx";
-import PQueue from "p-queue";
 import { MaterialUrls } from "../../../Common/HostUrl";
 import { PostJson, RequestStatus } from "../../../Common/Request";
 import { Singleton } from "../../../Common/Singleton";
@@ -17,6 +16,7 @@ export interface MaterialOption
 {
     keyIndex: number;
     kjlName: string;
+    id: string;
     materialName: string;
     url: string;
     isSelect: boolean;
@@ -38,8 +38,7 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
     @observable uiOption: IUiOption<ValueMapUiOption>;
     @observable materialList: MaterialOption[] = [];
     @observable selectAll = false;
-    private queue = new PQueue({ concurrency: 100 });
-    materialMap = new Map<string, Promise<{ materialName: string, url: string; }>>();
+    materialMap = new Map<string, { materialName: string, url: string; isLoading: boolean; }>();
     ImpExpSuffix = ".kjlm";
 
     get UIOption()
@@ -157,40 +156,27 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
             for (let i = 0, length = this.m_Option.materials.length; i < length; i++)
             {
                 let mtl = this.m_Option.materials[i];
-                this.materialList.push({ keyIndex: i, kjlName: mtl.kjlName, materialName: "", url: "", isSelect: false, isRender: false });
+                this.materialList.push({ keyIndex: i, kjlName: mtl.kjlName, id: mtl.id, materialName: "", url: "", isSelect: false, isRender: false });
             }
-
-            await this.AsyncLoadMaterials(0);
         });
     };
 
-    AsyncLoadMaterials = async (startIndex: number) =>
+    materialLoadList: Set<MaterialOption> = new Set();
+
+    async updataMaterialList(id: string)
     {
-        this.queue.clear();
-        for (let i = startIndex; i < startIndex + 11; i++)
+        for (const mtl of this.materialLoadList)
         {
-            if (i >= this.m_Option.materials.length) continue;
-            let mtl = this.m_Option.materials[i];
-            if (!mtl || !mtl.id) continue;
-            let mtlInfo = this.materialList[i];
-            this.queue.add(async () =>
+            if (mtl.id === id)
             {
-                let promise: Promise<{ materialName: string, url: string; }>;
-                if (this.materialMap.has(mtl.id))
-                {
-                    promise = this.materialMap.get(mtl.id);
-                }
-                else
-                {
-                    promise = this.GetMaterialInfo(mtl.id);
-                    this.materialMap.set(mtl.id, promise);
-                }
-
-                let { materialName, url } = await promise;
-                Object.assign(mtlInfo, { keyIndex: i, kjlName: mtl.kjlName, materialName, url, isSelect: false, isRender: true });
-            });
+                let materialInfo = this.materialMap.get(id);
+                mtl.materialName = materialInfo.materialName;
+                mtl.url = materialInfo.url;
+                mtl.isRender = true;
+                this.materialLoadList.delete(mtl);
+            }
         }
-    };
+    }
 
     GetMaterialInfo = (material_id: string): Promise<{ materialName: string, url: string; }> =>
     {

src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx

@@ -1,4 +1,5 @@
 import { Button, Checkbox, Intent } from "@blueprintjs/core";
+import { action } from "mobx";
 import { observer } from "mobx-react";
 import React from "react";
 import { AppConfirm } from "../../../UI/Components/Common/Confirm";
@@ -9,12 +10,80 @@ import { KJLMaterialMapData } from "./KJLMaterialMapData";
 export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStore; }>
 {
     private scrollEl = React.createRef<HTMLDivElement>();
-    private timer = null;
+    materialListRef = React.createRef<HTMLDivElement>();
+    timer = null;
     componentWillUnmount(): void
     {
         this.props.store.materialMap.clear();
     }
 
+    componentDidMount(): void
+    {
+        this.LoadMaterialInfo();
+    }
+
+    componentDidUpdate(prevProps: Readonly<{ store: KJLImportConfigStore; }>, prevState: Readonly<{}>, snapshot?: any): void
+    {
+        this.LoadMaterialInfo();
+    }
+
+    async loadPromise(material)
+    {
+        const { store } = this.props;
+
+        if (material.materialName != "" || !material.id) return;
+
+        if (store.materialMap.has(material.id))
+        {
+            let materialInfo = store.materialMap.get(material.id);
+            if (materialInfo.isLoading)
+            {
+                store.materialLoadList.add(material);
+            }
+            else
+            {
+                material.materialName = materialInfo.materialName;
+                material.url = materialInfo.url;
+                material.isRender = true;
+            }
+        }
+        else
+        {
+            let materialInfo = { materialName: "", url: "", isLoading: true };
+            store.materialMap.set(material.id, materialInfo);
+
+            let info = await store.GetMaterialInfo(material.id);
+
+            materialInfo.materialName = info.materialName;
+            materialInfo.url = info.url;
+
+            material.materialName = materialInfo.materialName;
+            material.url = materialInfo.url;
+            material.isRender = true;
+
+            materialInfo.isLoading = false;
+            store.updataMaterialList(material.id);
+        }
+    }
+
+    @action
+    LoadMaterialInfo = async () =>
+    {
+        let store = this.props.store;
+        let scrollElement = this.scrollEl.current;
+        let mtls = scrollElement.getElementsByClassName("mtl-list-info");
+        for (let i = 0; i < mtls.length; i++)
+        {
+            const el = mtls[i] as HTMLDivElement;
+            if (el.offsetTop <= scrollElement.scrollTop + scrollElement.offsetTop + scrollElement.offsetHeight
+                && el.offsetTop >= scrollElement.scrollTop + scrollElement.offsetTop - el.offsetHeight
+            )
+            {
+                this.loadPromise(store.materialList[i]);
+            }
+        }
+    };
+
     render()
     {
         let store = this.props.store;
@@ -22,6 +91,7 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
             <div className="KJLMaterialMap frame">
                 <div>酷家乐材质映射</div>
                 <div
+                    className="material-scroll"
                     ref={this.scrollEl}
                     onScroll={(e) =>
                     {
@@ -31,14 +101,9 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
                         }
                         this.timer = setTimeout(() =>
                         {
-                            if (this.scrollEl.current)
-                            {
-                                let scrollTop = this.scrollEl.current.scrollTop;
-                                let index = Math.max(Math.floor((scrollTop - 30) / 52) - 1, 0);
-                                this.props.store.AsyncLoadMaterials(index);
-                            }
+                            this.LoadMaterialInfo();
                             this.timer = null;
-                        }, 100);
+                        }, 200);
                     }}
                 >
                     <div className="info-header">
@@ -55,7 +120,7 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
                         <div>引用材质</div>
                         <div>操作</div>
                     </div>
-                    <div>
+                    <div ref={this.materialListRef}>
                         {
                             store.materialList.map((material, i) =>
                                 <KJLMaterialMapData
@@ -73,7 +138,7 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
                                 {
                                     store.m_Option.materials.push({ kjlName: "", id: "" });
                                     let index = store.materialList.length;
-                                    store.materialList.push({ keyIndex: index, kjlName: "", materialName: "", url: "", isSelect: store.selectAll ? true : false, isRender: true });
+                                    store.materialList.push({ keyIndex: index, kjlName: "", id: "", materialName: "", url: "", isSelect: store.selectAll ? true : false, isRender: true });
                                 }}
                             >
                             </Button>