diff --git a/src/app/babylon/view/facility-window/facility-window.ts b/src/app/babylon/view/facility-window/facility-window.ts index 8392d80..c286c68 100644 --- a/src/app/babylon/view/facility-window/facility-window.ts +++ b/src/app/babylon/view/facility-window/facility-window.ts @@ -12,6 +12,7 @@ import { Image, Rectangle, } from '@babylonjs/gui'; +import { PlanComponent } from 'src/app/pages/plan/plan.component'; import { ConfigManager } from '../../controller/config-manager'; import { DataManager, ModelChangeType } from '../../controller/data-manager'; import { Event_ChangeFacility } from '../../controller/event-manager/events/event-change-facility'; @@ -31,7 +32,6 @@ import { BabylonTool } from '../../tool/babylon-tool'; import { BabylonUIStyleTool } from '../../tool/babylon-ui-style-tool'; import { GizmoTool } from '../../tool/gizmo-tool'; import { TsTool } from '../../tool/ts-tool'; - import { CopyFacilityInfo, FacilityInfoInSceneWindow } from '../facilityinfoinscene-window/facilityinfoinscene-window'; import { ToolbarWindow } from '../toolbar-window/toobar-window'; import { UIBase } from '../window-base/ui-base'; @@ -41,7 +41,7 @@ import { FacilityUIItem } from './facility-ui-item'; export class FacilityWindow extends UIBase { - // three: ThreeDimensionalHomeComponent;//前端组件 + three: PlanComponent;//前端组件 allFacilityUIItemes: FacilityUIItem[] = []; @@ -174,10 +174,10 @@ export class FacilityWindow extends UIBase { console.log("所有可用的设备", instance.allFacilityUIItemes); - // ThreeDimensionalHomeComponent.instance.getAllIcons(instance) + PlanComponent.instance.getAllIcons(instance) }) - // instance.three = ThreeDimensionalHomeComponent.instance + instance.three = PlanComponent.instance } @@ -247,7 +247,7 @@ export class FacilityWindow extends UIBase { } } else { //右键取消 - // instance.three.unSelectBottomIcon(); + instance.three.unSelectBottomIcon(); } break; diff --git a/src/app/babylon/view/toolbar-window/toobar-window.ts b/src/app/babylon/view/toolbar-window/toobar-window.ts index c65df62..cfbe8f9 100644 --- a/src/app/babylon/view/toolbar-window/toobar-window.ts +++ b/src/app/babylon/view/toolbar-window/toobar-window.ts @@ -3,6 +3,7 @@ import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents"; import { PointerInfo } from "@babylonjs/core/Events/pointerEvents"; import { EventState } from "@babylonjs/core/Misc/observable"; import { Button, Control, Rectangle } from "@babylonjs/gui"; +import { PlanComponent } from "src/app/pages/plan/plan.component"; import { DataManager } from "../../controller/data-manager"; import { ModeManager } from "../../controller/mode-manager"; import { SceneManager } from "../../controller/scene-manager"; @@ -12,10 +13,8 @@ import { BabylonUIStyleTool } from "../../tool/babylon-ui-style-tool"; import { GizmoTool, TransformUIType } from "../../tool/gizmo-tool"; import { MeasureTool, MeasureType } from "../../tool/measure-tool"; import { BuildingWindow } from "../building-window/building-window"; - import { FacilityWindow } from "../facility-window/facility-window"; import { CopyFacilityInfo, FacilityInfoInSceneWindow } from "../facilityinfoinscene-window/facilityinfoinscene-window"; - import { UIBase } from "../window-base/ui-base"; /** @@ -33,7 +32,7 @@ export class ToolbarWindow extends UIBase { //#region 前端对接 - // three: ThreeDimensionalHomeComponent;//前端组件 + three: PlanComponent;//前端组件 compassAlpha: number;//指南针旋转 0-2π /** @@ -220,7 +219,7 @@ export class ToolbarWindow extends UIBase { //改变拾取状态 changeMeshAdsorbY() { this.isMeshAdsorb = !this.isMeshAdsorb; - // this.three.updateSelectAdsorb(); + PlanComponent.instance.updateSelectAdsorb(); } //#endregion diff --git a/src/app/pages/plan/plan.component.html b/src/app/pages/plan/plan.component.html index 39368d4..f33d257 100644 --- a/src/app/pages/plan/plan.component.html +++ b/src/app/pages/plan/plan.component.html @@ -1,7 +1,7 @@
- +
@@ -12,17 +12,38 @@
-
- + + + +
+
+
+
+ +

{{item.getIconName()}}

+
+
+
+
+
+
+ + + + + +
diff --git a/src/app/pages/plan/plan.component.scss b/src/app/pages/plan/plan.component.scss index 10b263a..7d9a655 100644 --- a/src/app/pages/plan/plan.component.scss +++ b/src/app/pages/plan/plan.component.scss @@ -5,7 +5,7 @@ position: relative; canvas{ width: 100%; height: 100%; border: none; outline: none; } } -.anticon { font-size: 16px; cursor: pointer; } //字体图标 +.anticon{ font-size: 16px; cursor: pointer; } //字体图标 //文本溢出 .overflowText{ overflow: hidden; @@ -65,7 +65,6 @@ border-bottom: 1px solid rgba(255, 255, 255, 0.1); .modelTitle { font-size: 14px; } label { display: block; } - .anticon { margin: 0 3px; } //字体图标 } .selectLeftBuilding { background-color: #2196f3; } //选中样式 } @@ -75,9 +74,43 @@ transition: margin-left 0.5s; } +//底部图标栏 +.bottomIcons{ + width: 80%; + height: 60px; + line-height: 60px; + position: absolute; + left: 0; + right: 0; + bottom: 1px; + margin: auto;/*这行代码是关键*/ + color: #fff; + background: rgba(0,17,33,0.7); + border-radius: 10px 10px 0px 0px; + display: flex; + box-sizing: border-box; + padding: 1px; + .autoScroll{ width: 30px; text-align: center; } + .bottomCenter{ + flex: 1; + overflow: hidden; + .everyIcon { + width: 100px; + height: 58px; + line-height: normal; + text-align: center; + display: inline-block; + overflow: hidden; + img { width: 40px; height: 40px; margin-top: 3px; cursor: pointer; } + p { height: 18px; line-height: 18px; margin-top: -3px; font-size: 12px; } + } + } + .selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式 +} + //右上角快捷栏 .rightTopFast{ - width: 60px; + width: 250px; height: 38px; position: absolute; right: 1px; @@ -95,4 +128,18 @@ color: #fff; cursor: pointer; } + .publicFast { + box-sizing: border-box; + padding: 1px 5px; + background-color: rgba(0,0,0,0.5); + } + .leftFast { + :first-child{ background: url(../../../assets/images/translationThree.png) no-repeat center; } + :nth-child(2){ background: url(../../../assets/images/revolveThree.png) no-repeat center; } + :nth-child(3){ background: url(../../../assets/images/scaleThree.png) no-repeat center; } + :nth-child(4){ background: url(../../../assets/images/adsorb.png) no-repeat center; } + :nth-child(5){ background: url(../../../assets/images/verticalView.png) no-repeat center; } + .leftFastIsTure { border: 1px solid #fff; } //吸附样式 + } + .selectRightTopFast { border: 1px solid #fff; } //选种样式 } \ No newline at end of file diff --git a/src/app/pages/plan/plan.component.ts b/src/app/pages/plan/plan.component.ts index 5fabf25..a6cd080 100644 --- a/src/app/pages/plan/plan.component.ts +++ b/src/app/pages/plan/plan.component.ts @@ -12,6 +12,8 @@ import { BuildingStatus } from 'src/app/babylon/controller/status/building-statu import { BuildingUIItem } from 'src/app/babylon/view/building-window/building-ui-item'; import { BuildingType } from 'src/app/babylon/model/data/institution/building/building-data'; import { BuildingWindow } from 'src/app/babylon/view/building-window/building-window'; +import { FacilityUIItem } from 'src/app/babylon/view/facility-window/facility-ui-item'; +import { FacilityWindow } from 'src/app/babylon/view/facility-window/facility-window'; @@ -124,6 +126,12 @@ export class PlanComponent implements OnInit { this.editBuildingPop = e; //打开弹窗 } + //聚焦 建筑 + positionModelBuilding(event, e: BuildingUIItem) { + event.stopPropagation() + e.lookAt() + } + //删除建筑 deleteModelBuilding(event, e: BuildingUIItem) { event.stopPropagation() @@ -136,6 +144,79 @@ export class PlanComponent implements OnInit { } } + allFacilityUIItemes: FacilityUIItem[] = []; //底部所有 图标 + beforeOneIcon: string = null; //当前选择 图标 + + // 获取 底部图标栏list + getAllIcons(e: FacilityWindow) { + this.allFacilityUIItemes = e.allFacilityUIItemes + this.beforeOneIcon = null + } + + //选择底部图标 + selectBottomIcon(e: FacilityUIItem) { + if (this.beforeOneIcon != e.getIconID()) { + this.beforeOneIcon = e.getIconID() + e.select() + } else { + this.beforeOneIcon = null + e.unSelect() + } + } + + //取消选择 底部图标 + unSelectBottomIcon() { + if (this.beforeOneIcon) { + let e: FacilityUIItem = this.allFacilityUIItemes.find(item => { return item.getIconID() === this.beforeOneIcon }) + e ? e.unSelect() : null + this.beforeOneIcon = null + } + } + + //底部图标栏 滚动条 + bottomScroll(e) { + let bootomDiv = this.element.nativeElement.querySelector('#bottomCenter') + e == 0 ? bootomDiv.scrollLeft = bootomDiv.scrollLeft + 50 : bootomDiv.scrollLeft = bootomDiv.scrollLeft - 50 + } + + selectRightTopFast: number = 0; //当前选择功能 快捷栏 + selectAdsorb: boolean = false; //吸附状态 + topLevelView: boolean = false; //顶视图状态 + + //平移 + translation() { + this.selectRightTopFast = 0 + ToolbarWindow.instance.changeGizmoType_position(); + } + + //旋转 + revolve() { + this.selectRightTopFast = 1 + ToolbarWindow.instance.changeGizmoType_Rotation(); + } + + //缩放 + scale() { + this.selectRightTopFast = 2 + ToolbarWindow.instance.changeGizmoType_Scale(); + } + + //吸附 + adsorb() { + ToolbarWindow.instance.changeMeshAdsorbY(); + } + + //获取吸附的状态 + updateSelectAdsorb() { + this.selectAdsorb = ToolbarWindow.instance.isMeshAdsorb; + } + + //切换至顶视图 + toggleTopLevelView() { + this.topLevelView = !this.topLevelView + ToolbarWindow.instance.changeTopView(this.topLevelView) + } + //保存 preserve() { ToolbarWindow.instance.onBtnSave(); diff --git a/src/assets/images/adsorb.png b/src/assets/images/adsorb.png new file mode 100644 index 0000000..9756570 Binary files /dev/null and b/src/assets/images/adsorb.png differ diff --git a/src/assets/images/revolveThree.png b/src/assets/images/revolveThree.png new file mode 100644 index 0000000..53c5ace Binary files /dev/null and b/src/assets/images/revolveThree.png differ diff --git a/src/assets/images/scaleThree.png b/src/assets/images/scaleThree.png new file mode 100644 index 0000000..cca8a3e Binary files /dev/null and b/src/assets/images/scaleThree.png differ diff --git a/src/assets/images/translationThree.png b/src/assets/images/translationThree.png new file mode 100644 index 0000000..eb3e279 Binary files /dev/null and b/src/assets/images/translationThree.png differ diff --git a/src/assets/images/verticalView.png b/src/assets/images/verticalView.png new file mode 100644 index 0000000..9efe806 Binary files /dev/null and b/src/assets/images/verticalView.png differ