功能栏完善

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
 

src/app/pages/plan/plan.component.html

@@ -12,8 +12,9 @@
     <div class="leftCenter">
       <div class="everyBuilding" *ngFor="let item of buildingUIItems" (click)='selectLeftBuilding(item)' [ngClass]="{'selectLeftBuilding': beforeOneBuildingID == item.getBuildingID()}">
         <label style="flex: 1;" class="overflowText modelTitle">{{item.getBuildingName()}}</label>
-        <label style="width: 50px; overflow: hidden;">
-          <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)"></i>
+        <label style="width: 65px; overflow: hidden;">
+          <i nz-icon nzType="plus-circle" nzTheme="outline" title="聚焦" (click)="positionModelBuilding($event,item)"></i>
+          <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)" style="margin: 0 5px;"></i>
           <i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
         </label>
       </div>
@@ -36,6 +37,13 @@
 
   <!-- 右上角快捷栏 -->
   <div class="rightTopFast">
+    <div class="publicFast leftFast">
+      <button title="平移" (click)="translation()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 0}"></button>
+      <button title="旋转" (click)="revolve()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 1}"></button>
+      <button title="缩放" (click)="scale()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 2}"></button>
+      <button title="吸附" (click)="adsorb()" [ngClass]="{'leftFastIsTure': selectAdsorb }"></button>
+      <button title="切换至顶视图" (click)="toggleTopLevelView()" [ngClass]="{'leftFastIsTure': topLevelView }"></button>
+    </div>
     <div style="margin: 0 10px; background-color: #0080FF;" title="保存"><button (click)="preserve()"><i nz-icon nzType="save" nzTheme="outline" style="font-size: 20px;"></i></button></div>
   </div>
   <!-- 右上角快捷栏 -->

src/app/pages/plan/plan.component.scss

@@ -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; } //选中样式
   }
@@ -103,7 +102,7 @@
       display: inline-block;
       overflow: hidden;
       img { width: 40px; height: 40px; margin-top: 3px; cursor: pointer; }
-      p { height: 18px; line-height: 18px; margin-top: -5px; font-size: 12px; }
+      p { height: 18px; line-height: 18px; margin-top: -3px; font-size: 12px; }
     }
   }
   .selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式
@@ -111,7 +110,7 @@
 
 //右上角快捷栏
 .rightTopFast{
-  width: 60px;
+  width: 250px;
   height: 38px;
   position: absolute;
   right: 1px;
@@ -129,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; } //选种样式
 }

src/app/pages/plan/plan.component.ts

@@ -126,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()
@@ -173,6 +179,44 @@ export class PlanComponent implements OnInit {
     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();