From 9e80388dba6cfe392fe74cac34785c06af6db8a8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E4=B8=89?= <940119273@qq.com> Date: Thu, 11 May 2023 02:54:29 +0000 Subject: [PATCH] =?UTF-8?q?!2199=20=E6=96=B0=E5=A2=9E:=E5=BD=93=E5=89=8D?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E9=BB=98=E8=AE=A4=E6=9D=90=E8=B4=A8?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B0=8F=E5=9B=BE=E6=A0=87=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/DatabaseServices/MaterialTable.ts | 7 +- src/UI/Components/Asset.tsx | 194 +++++++++++++++--------- src/UI/Components/MaterialExplorer.less | 10 ++ src/UI/IconEnum.ts | 3 + 4 files changed, 143 insertions(+), 71 deletions(-) diff --git a/src/DatabaseServices/MaterialTable.ts b/src/DatabaseServices/MaterialTable.ts index 9fa4cd36f..8d969b1f6 100644 --- a/src/DatabaseServices/MaterialTable.ts +++ b/src/DatabaseServices/MaterialTable.ts @@ -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; } diff --git a/src/UI/Components/Asset.tsx b/src/UI/Components/Asset.tsx index be16c9d19..2e8061825 100644 --- a/src/UI/Components/Asset.tsx +++ b/src/UI/Components/Asset.tsx @@ -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 +{ + _Image = React.createRef(); + _DivColorRef = React.createRef(); + _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(); - divColorRef = React.createRef(); - 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 (
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<{ >
+ { + this.props.material.objectId === app.Database.MaterialTable.CurBoardMtl && + } + { + this.props.material.objectId === app.Database.MaterialTable.CurWallMtl && + } + { + this.props.material.objectId === app.Database.MaterialTable.CurFloorMtl && + }
this.nameEl = el} + ref={el => this._NameEl = el} > {this.props.material.Name}
diff --git a/src/UI/Components/MaterialExplorer.less b/src/UI/Components/MaterialExplorer.less index 98927b2da..629adc3f8 100644 --- a/src/UI/Components/MaterialExplorer.less +++ b/src/UI/Components/MaterialExplorer.less @@ -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; diff --git a/src/UI/IconEnum.ts b/src/UI/IconEnum.ts index 2355dbd2c..ba9f7afc0 100644 --- a/src/UI/IconEnum.ts +++ b/src/UI/IconEnum.ts @@ -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",//当前默认 }