Public
/
WebCAD
mirror of https://gitee.com/cf-fz/WebCAD.git
7
1
Fork 0
Code Issues Projects Releases Wiki Activity

!1987 优化:酷家乐材质加载

Browse Source
pull/1994/MERGE
黄诗津 2 years ago committed by ChenX
parent 006a8fa39f
commit 99d36426d3
3 changed files with 103 additions and 76 deletions
Show Stats Download Patch File Download Diff File

69
src/Add-on/KJL/KJLImportConfig/KJLImportConfigStore.ts
Unescape View File

@ -1,5 +1,6 @@
import { Intent } from "@blueprintjs/core";
import { observable, toJS } from "mobx";
import PQueue from "p-queue";
import { MaterialUrls } from "../../../Common/HostUrl";
import { PostJson, RequestStatus } from "../../../Common/Request";
import { Singleton } from "../../../Common/Singleton";
@ -16,6 +17,7 @@ export interface MaterialOption
materialName: string;
url: string;
isSelect: boolean;
isRender: boolean;
}
export class KJLImportConfigStore extends Singleton implements IConfigStore
{
@ -23,10 +25,9 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
@observable configsNames: string[] = [];
@observable m_Option: KJLImportConfigOption = { ...DefaultKJImportOption };
@observable materialList: MaterialOption[] = [];
@observable isloading = false;
KeyIndex: number = 0;
@observable selectAll = false;
private queue = new PQueue({ concurrency: 100 });
materialMap = new Map<string, Promise<{ materialName: string, url: string; }>>();
InitOption()
{
Object.assign(this.m_Option, DefaultKJImportOption);
@ -70,35 +71,57 @@ export class KJLImportConfigStore extends Singleton implements IConfigStore
LoadMaterials = async () =>
{
this.isloading = false;
this.materialList = [];
this.KeyIndex = 0;
this.selectAll = false;
let materialMap = new Map<string, { name: string, logo: string; }>();
for (let mtl of this.m_Option.materials)
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.AsyncLoadMaterials();
};
AsyncLoadMaterials = async () =>
{
this.queue.clear();
for (let i = 0, length = this.m_Option.materials.length; i < length; i++)
{
if (!materialMap.has(mtl.id))
let mtl = this.m_Option.materials[i];
this.queue.add(async () =>
{
let material_id = mtl.id;
let data = await PostJson(MaterialUrls.detail, { material_id });
if (data.err_code === RequestStatus.Ok)
let promise: Promise<{ materialName: string, url: string; }>;
if (this.materialMap.has(mtl.id))
{
materialMap.set(mtl.id, data.materials);
promise = this.materialMap.get(mtl.id);
}
else
{
promise = this.GetMaterialInfo(mtl.id);
this.materialMap.set(mtl.id, promise);
}
}
if (materialMap.has(mtl.id))
{
let material = materialMap.get(mtl.id);
this.materialList.push({ keyIndex: this.KeyIndex, kjlName: mtl.kjlName, materialName: material.name, url: material.logo, isSelect: false });
}
else
let { materialName, url } = await promise;
this.materialList[i] = { keyIndex: i, kjlName: mtl.kjlName, materialName, url, isSelect: false, isRender: true };
});
}
};
GetMaterialInfo = (material_id: string): Promise<{ materialName: string, url: string; }> =>
{
return new Promise(async (res) =>
{
let data = await PostJson(MaterialUrls.detail, { material_id });
let materialName = "";
let url = "";
if (data.err_code === RequestStatus.Ok)
{
this.materialList.push({ keyIndex: this.KeyIndex, kjlName: mtl.kjlName, materialName: "", url: "", isSelect: false });
let material = data.materials;
materialName = material.name;
url = material.logo;
}
this.KeyIndex++;
}
this.isloading = true;
res({ materialName, url });
});
};
}

80
src/Add-on/KJL/KJLImportConfig/KJLMaterialMap.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Checkbox, Intent, Spinner } from "@blueprintjs/core";
import { Button, Checkbox, Intent } from "@blueprintjs/core";
import { observer } from "mobx-react";
import React from "react";
import { AppConfirm } from "../../../UI/Components/Common/Confirm";
@ -8,6 +8,10 @@ import { KJLMaterialMapData } from "./KJLMaterialMapData";
@observer
export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStore; }>
{
componentWillUnmount(): void
{
this.props.store.materialMap.clear();
}
render()
{
let store = this.props.store;
@ -15,55 +19,49 @@ export class KJLMaterialMap extends React.Component<{ store: KJLImportConfigStor
<div className="KJLMaterialMap frame">
<div>酷家乐材质映射</div>
<div>
<div className="info-header">
<Checkbox
label="全选"
checked={store.selectAll}
onChange={() =>
{
store.selectAll = !store.selectAll;
this.handleSelectAll();
}}
/>
<div>酷家乐材质名称</div>
<div>引用材质</div>
<div>操作</div>
</div>
<div>
<div className="info-header">
<Checkbox
label="全选"
checked={store.selectAll}
onChange={() =>
{
store.materialList.map((material, i) =>
<KJLMaterialMapData
key={material.keyIndex}
store={store}
material={material}
index={i}
/>)
}
<div style={{ height: 52, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Button
icon="plus"
style={{ width: 42, height: 42 }}
onClick={() =>
{
store.selectAll = !store.selectAll;
this.handleSelectAll();
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 });
}}
/>
<div>酷家乐材质名称</div>
<div>引用材质</div>
<div>操作</div>
>
</Button>
</div>
{
store.isloading ?
<div>
{
store.materialList.map((material, i) =>
<KJLMaterialMapData
key={material.keyIndex}
store={store}
material={material}
index={i}
/>)
}
<div style={{ height: 52, display: "flex", justifyContent: "center", alignItems: "center" }}>
<Button
icon="plus"
style={{ width: 42, height: 42 }}
onClick={() =>
{
store.m_Option.materials.push({ kjlName: "", id: "" });
store.materialList.push({ keyIndex: store.KeyIndex, kjlName: "", materialName: "", url: "", isSelect: store.selectAll ? true : false });
store.KeyIndex += 1;
}}
>
</Button>
</div>
</div>
: <Spinner />
}
</div>
<Button
text="一键删除"
intent={Intent.DANGER}
style={{ position: "absolute", bottom: 11, right: 75 }}
disabled={store.materialList.some(mtl => mtl.isSelect === true) ? false : true}
disabled={!store.materialList.some(mtl => mtl.isRender === false) && store.materialList.some(mtl => mtl.isSelect === true) ? false : true}
onClick={() => { this.handleOnekeyDelete(); }}
/>
</div>

30
src/Add-on/KJL/KJLImportConfig/KJLMaterialMapData.tsx
Unescape View File

@ -1,4 +1,4 @@
import { Button, Card, Checkbox, Classes, Dialog, InputGroup, Intent } from "@blueprintjs/core";
import { Button, Card, Checkbox, Classes, Dialog, InputGroup, Intent, Spinner } from "@blueprintjs/core";
import { observable } from "mobx";
import { observer } from "mobx-react";
import React from "react";
@ -120,17 +120,22 @@ export class KJLMaterialMapData extends React.Component<MaterialDataProps>
/>
</div>
<div>
<div
className="mtl-select-hint"
onDoubleClick={() => { this.isOpenImgList.set(true); }}
style={{ border: material.url ? "none" : "1px solid #ccc" }}
>
{
material.url ?
<img src={`${CURRENT_HOST}/${material.url}`} />
: "双击选择材质"
}
</div>
{
material.isRender ?
<div
className="mtl-select-hint"
onDoubleClick={() => { this.isOpenImgList.set(true); }}
style={{ border: material.url ? "none" : "1px solid #ccc" }}
>
{
material.url ?
<img src={`${CURRENT_HOST}/${material.url}`} />
: "双击修改材质"
}
</div>
:
<div><Spinner /></div>
}
<div style={{ width: "100%", alignSelf: "center" }}>
{
material.materialName &&
@ -142,6 +147,7 @@ export class KJLMaterialMapData extends React.Component<MaterialDataProps>
<Button
icon="trash"
intent={Intent.DANGER}
disabled={material.isRender ? false : true}
onClick={() => { this.handleDeleteMaterial(this.props.index); }}
/>
</div>

Write Preview
Loading…
Cancel
Save