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

!2199 新增:当前使用的默认材质增加小图标标识

Browse Source
pull/2213/MERGE
林三 1 year ago committed by ChenX
parent 1821c78b52
commit 9e80388dba
4 changed files with 143 additions and 71 deletions
Show Stats Download Patch File Download Diff File

7
src/DatabaseServices/MaterialTable.ts
Unescape View File

@ -1,3 +1,4 @@
import { observable } from "mobx";
import { HostApplicationServices } from "../ApplicationServices/HostApplicationServices";
import { CADFiler } from "./CADFiler";
import { ObjectId } from "./ObjectId";
@ -6,9 +7,9 @@ import { SymbolTable } from "./SymbolTable";
export class MaterialTable extends SymbolTable
{
protected _CurFloorMtl: ObjectId;//默认地板材质
protected _CurWallMtl: ObjectId;//默认墙体材质
protected _CurDrawMtl: ObjectId;//默认实体材质
@observable protected _CurFloorMtl: ObjectId;//默认地板材质
@observable protected _CurWallMtl: ObjectId;//默认墙体材质
@observable protected _CurDrawMtl: ObjectId;//默认实体材质
get CurFloorMtl() { return this._CurFloorMtl; }
get CurWallMtl() { return this._CurWallMtl; }

194
src/UI/Components/Asset.tsx
Unescape View File

@ -6,7 +6,7 @@ import { app } from '../../ApplicationServices/Application';
import { CommandNames } from '../../Common/CommandNames';
import { ImgsUrl, MaterialUrls } from '../../Common/HostUrl';
import { Post, PostJson, RequestStatus } from '../../Common/Request';
import { deflate, MaterialOut } from '../../Common/SerializeMaterial';
import { MaterialOut, deflate } from '../../Common/SerializeMaterial';
import { Intent } from '../../Common/Toaster';
import { Hole } from '../../DatabaseServices/3DSolid/Hole';
import { Board } from '../../DatabaseServices/Entity/Board';
@ -16,10 +16,11 @@ import { HardwareCompositeEntity } from '../../DatabaseServices/Hardware/Hardwar
import { PhysicalMaterialRecord } from '../../DatabaseServices/PhysicalMaterialRecord';
import { Text } from '../../DatabaseServices/Text/Text';
import { TextureTableRecord } from '../../DatabaseServices/Texture';
import { commandMachine, CommandWrap } from '../../Editor/CommandMachine';
import { CommandWrap, commandMachine } from '../../Editor/CommandMachine';
import { userConfig } from '../../Editor/UserConfig';
import { VisualSpaceBox } from '../../Editor/VisualSpaceBox';
import { MaterialRendererSingle } from '../Editor/Asset/MaterialRenderer';
import { ICON_CDN, IconEnum } from '../IconEnum';
import { appUi } from '../Layout/ApplicationLayout';
import { ApplyGoodInfo } from './ApplyGoodInfo';
import { AppConfirm } from './Common/Confirm';
@ -41,14 +42,12 @@ const RootStyle: CSSProperties = {
//材质球上方的图片预览
const ImgStyle: CSSProperties = {
overflow: "hidden",
// width: "80%",
height: "80%",
flexBasis: "0%",
flexGrow: 1,
boxSizing: "border-box",
borderStyle: "none"
borderStyle: "none",
position: "relative",
};
//名称显示
@ -62,7 +61,14 @@ const TextStyle: CSSProperties = {
width: "100%",
};
enum CurDefMtlType
interface AssetProps
{
material: PhysicalMaterialRecord;
hightLight?: boolean;
handleClick: (mat?: PhysicalMaterialRecord) => void;
}
export enum CurDefMtlType
{
Draw = 1,
Wall = 2,
@ -73,24 +79,34 @@ enum CurDefMtlType
* 材质球 纹理 预览
*/
@observer
export class Asset extends React.Component<{
material: PhysicalMaterialRecord;
hightLight?: boolean;
handleClick: (mat?: PhysicalMaterialRecord) => void;
}, {}>{
export class Asset extends React.Component<AssetProps, {}>
{
_Image = React.createRef<HTMLImageElement>();
_DivColorRef = React.createRef<HTMLDivElement>();
_CurWallMtlIconMarginBottom: number = 2;
_CurFloorMtlIconMarginBottom: number = 2;
_NameEl: HTMLDivElement;
_RemoveCall: Function[] = [];
_RenderIng = false;
componentDidMount()
{
this._RemoveCall.push(end(this.props.material, this.props.material.Update, () => { this._UpdateRenderPreview(); }));
this._UpdateRenderPreview();
}
componentWillUnmount()
{
this._Destroy();
}
image = React.createRef<HTMLImageElement>();
divColorRef = React.createRef<HTMLDivElement>();
nameEl: HTMLDivElement;
removeCall: Function[] = [];
private renderIng = false;
/**
* 更新渲染材质球预览图
*/
private UpdateRenderPreview = async () =>
_UpdateRenderPreview = async () =>
{
if (this.renderIng) return;
this.renderIng = true;
if (this._RenderIng) return;
this._RenderIng = true;
let material = this.props.material;
if (material.useMap && material.map && material.map.Object)
@ -99,46 +115,38 @@ export class Asset extends React.Component<{
let imgUrl = MaterialRendererSingle().render(material.Material);
if (this.image.current)
this.image.current.src = imgUrl;
if (this._Image.current)
this._Image.current.src = imgUrl;
else
{
setTimeout(() =>
{
if (this.image.current)
this.image.current.src = imgUrl;
if (this._Image.current)
this._Image.current.src = imgUrl;
}, 500);
}
if (this.divColorRef.current)
if (this._DivColorRef.current)
{
if (!material.map)
this.divColorRef.current.style.border = "1px solid black";
this._DivColorRef.current.style.border = "1px solid black";
else
this.divColorRef.current.style.border = "none";
this._DivColorRef.current.style.border = "none";
}
if (this.nameEl)
this.nameEl.innerText = material.Name;
if (this._NameEl)
this._NameEl.innerText = material.Name;
this.renderIng = false;
this._RenderIng = false;
};
private Destroy = () =>
_Destroy = () =>
{
this.removeCall.forEach(f => f());
this.removeCall.length = 0;
this._RemoveCall.forEach(f => f());
this._RemoveCall.length = 0;
};
componentDidMount()
{
this.removeCall.push(end(this.props.material, this.props.material.Update, () => { this.UpdateRenderPreview(); }));
this.UpdateRenderPreview();
}
componentWillUnmount()
{
this.Destroy();
}
handleDoubleClick = async () =>
_HandleDoubleClick = async () =>
{
await app.Editor.ModalManage.EndExecingCmd();
if (!commandMachine.CommandStart("编辑材质"))
@ -151,11 +159,11 @@ export class Asset extends React.Component<{
return;
}
this.UpdateRenderPreview();
this._UpdateRenderPreview();
appUi.showMaterialEditor({ material: this.props.material });
};
handleApply = () =>
_HandleApply = () =>
{
CommandWrap(() =>
{
@ -189,9 +197,9 @@ export class Asset extends React.Component<{
}, CommandNames.ApplyMtl);
};
highLightEntity = () =>
_HighLightEntity = () =>
{
let ents = this.GetUseCurMtlEntitys();
let ents = this._GetUseCurMtlEntitys();
app.Editor.SetSelection(ents);
AppToaster.show({
message: `有${ents.length}个实体使用了该材质!`,
@ -201,9 +209,9 @@ export class Asset extends React.Component<{
};
//将使用当前材质的板引用板材信息
ApplyUseCurBrsGoodInfo = async () =>
_ApplyUseCurBrsGoodInfo = async () =>
{
let ents = this.GetUseCurMtlEntitys();
let ents = this._GetUseCurMtlEntitys();
let brs = ents.filter(e => e instanceof Board) as Board[];
if (brs.length === 0)
{
@ -235,7 +243,7 @@ export class Asset extends React.Component<{
};
//收藏
handleCollection = async () =>
_HandleCollection = async () =>
{
let material = this.props.material as PhysicalMaterialRecord;
@ -273,7 +281,7 @@ export class Asset extends React.Component<{
};
//设置为当前默认材质
SetCurDefMtl = (type: CurDefMtlType) =>
_SetCurDefMtl = (type: CurDefMtlType) =>
{
CommandWrap(() =>
{
@ -299,7 +307,7 @@ export class Asset extends React.Component<{
}, "设置默认材质");
};
handleDelete = async () =>
_HandleDelete = async () =>
{
let hasUsed = app.Database.ModelSpace.Entitys.some(e => (!e.IsErase && (e.Material?.Object ?? app.Database.DefaultMaterial) === this.props.material));
@ -311,7 +319,7 @@ export class Asset extends React.Component<{
CommandWrap(() =>
{
let brs = this.GetUseCurMtlEntitys();
let brs = this._GetUseCurMtlEntitys();
app.Database.MaterialTable.Remove(this.props.material as PhysicalMaterialRecord);
for (let br of brs)
br.Material = undefined;//回归默认
@ -321,7 +329,7 @@ export class Asset extends React.Component<{
/**
* 获得使用当前材质的实体列表 (板和五金)
*/
GetUseCurMtlEntitys()
_GetUseCurMtlEntitys()
{
let ents: Entity[] = [];
@ -340,10 +348,37 @@ export class Asset extends React.Component<{
return ents;
};
handleStart = (e: DragEvent) =>
_HandleStart = (e: DragEvent) =>
{
e.nativeEvent.dataTransfer.setData("mat", this.props.material.Name);
};
/**
*多个重叠时改变marginBottom
*/
_GetIconMarginBottom()
{
if (app.Database.MaterialTable.CurBoardMtl === app.Database.MaterialTable.CurWallMtl)
{
this._CurWallMtlIconMarginBottom = 21;
if (app.Database.MaterialTable.CurBoardMtl === app.Database.MaterialTable.CurFloorMtl)
this._CurFloorMtlIconMarginBottom = 40;
else
this._CurFloorMtlIconMarginBottom = 2;
}
else if (app.Database.MaterialTable.CurBoardMtl === app.Database.MaterialTable.CurFloorMtl
|| app.Database.MaterialTable.CurWallMtl === app.Database.MaterialTable.CurFloorMtl)
{
this._CurWallMtlIconMarginBottom = 2;
this._CurFloorMtlIconMarginBottom = 21;
}
else
{
this._CurWallMtlIconMarginBottom = 2;
this._CurFloorMtlIconMarginBottom = 2;
}
}
render()
{
//样式
@ -356,10 +391,12 @@ export class Asset extends React.Component<{
if (userConfig.isHighlightMaterial && this.props.hightLight)//亮显
style.backgroundColor = "rgba(60,174,245,0.3)";
this._GetIconMarginBottom();
return (
<div
style={style}
onDoubleClick={this.handleDoubleClick}
onDoubleClick={this._HandleDoubleClick}
onClick={() => this.props.handleClick(this.props.material)}
onContextMenu={(e) =>
{
@ -368,14 +405,14 @@ export class Asset extends React.Component<{
const menu = React.createElement(
Menu,
{}, // empty props
React.createElement(MenuItem, { onClick: this.handleApply, text: "应用到当前选择实体" }),
React.createElement(MenuItem, { onClick: this.highLightEntity, text: "显示应用当前材质的实体" }),
React.createElement(MenuItem, { onClick: this.ApplyUseCurBrsGoodInfo, text: "一键更新板件板材" }),
React.createElement(MenuItem, { onClick: () => this.SetCurDefMtl(CurDefMtlType.Draw), text: "设置为默认板块材质" }),
React.createElement(MenuItem, { onClick: () => this.SetCurDefMtl(CurDefMtlType.Wall), text: "设置为默认墙体材质" }),
React.createElement(MenuItem, { onClick: () => this.SetCurDefMtl(CurDefMtlType.Floor), text: "设置为默认地面材质" }),
React.createElement(MenuItem, { onClick: this.handleCollection, text: "收藏" }),
this.props.material === app.Database.DefaultMaterial ? "" : React.createElement(MenuItem, { onClick: this.handleDelete, text: "删除" }),
React.createElement(MenuItem, { onClick: this._HandleApply, text: "应用到当前选择实体" }),
React.createElement(MenuItem, { onClick: this._HighLightEntity, text: "显示应用当前材质的实体" }),
React.createElement(MenuItem, { onClick: this._ApplyUseCurBrsGoodInfo, text: "一键更新板件板材" }),
React.createElement(MenuItem, { onClick: () => this._SetCurDefMtl(CurDefMtlType.Draw), text: "设置为默认板块材质" }),
React.createElement(MenuItem, { onClick: () => this._SetCurDefMtl(CurDefMtlType.Wall), text: "设置为默认墙体材质" }),
React.createElement(MenuItem, { onClick: () => this._SetCurDefMtl(CurDefMtlType.Floor), text: "设置为默认地面材质" }),
React.createElement(MenuItem, { onClick: this._HandleCollection, text: "收藏" }),
this.props.material === app.Database.DefaultMaterial ? "" : React.createElement(MenuItem, { onClick: this._HandleDelete, text: "删除" }),
);
ContextMenu.show(menu, { left: e.clientX, top: e.clientY }, () =>
{
@ -384,16 +421,37 @@ export class Asset extends React.Component<{
>
<div
style={ImgStyle}
ref={this.divColorRef}
ref={this._DivColorRef}
>
<img
ref={this.image}
onDragStart={this.handleStart}
ref={this._Image}
onDragStart={this._HandleStart}
/>
{
this.props.material.objectId === app.Database.MaterialTable.CurBoardMtl && <img
src={`${ICON_CDN}/${IconEnum.CurBoardMtl}`}
className='currentMaterialIcon'
/>
}
{
this.props.material.objectId === app.Database.MaterialTable.CurWallMtl && <img
src={`${ICON_CDN}/${IconEnum.CurWallMtl}`}
className='currentMaterialIcon'
style={{ marginBottom: this._CurWallMtlIconMarginBottom }}
/>
}
{
this.props.material.objectId === app.Database.MaterialTable.CurFloorMtl && <img
src={`${ICON_CDN}/${IconEnum.CurFloorMtl}`}
className='currentMaterialIcon'
style={{ marginBottom: this._CurFloorMtlIconMarginBottom }}
/>
}
</div>
<div
style={TextStyle}
ref={el => this.nameEl = el}
ref={el => this._NameEl = el}
>
<span>{this.props.material.Name}</span>
</div>

10
src/UI/Components/MaterialExplorer.less
Unescape View File

@ -21,6 +21,16 @@
.setsplit();
.currentMaterialIcon{
width : 16px;
height : 16px;
margin : 0 -17px 2px;
bottom : 0;
position : absolute;
border-radius : 3px ;
background-color: white;
}
.my-material-param {
margin-top: 2px;
display: flex;

3
src/UI/IconEnum.ts
Unescape View File

@ -226,4 +226,7 @@ export enum IconEnum
VisibleInRender = "VisibleInRender.svg", //渲染器显示实体
UnVisibleInRender = "UnVisibleInRender.svg", //渲染器隐藏实体
TemplateCollection = "TemplateCollection.svg", //收藏
CurBoardMtl = "curBoardMtl.svg", //当前默认板材质图标
CurWallMtl = "curWallMtl.svg", //当前默认墙材质图标
CurFloorMtl = "curFloorMtl.svg",//当前默认
}

Write Preview
Loading…
Cancel
Save