shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

完善三维选中与前端的交互

dev
刘向辉 3 years ago
parent
57ae37ba16
commit
6a1898d564
4 changed files with 169 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      src/app/babylon/controller/config-manager.ts
  2. 92
      src/app/babylon/view/facility-window/facility-window.ts
  3. 3
      src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item.ts
  4. 181
      src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts

5
src/app/babylon/controller/config-manager.ts
Unescape View File

@ -73,11 +73,14 @@ export class ConfigManager {
static getFacilityTypeName(type: FacilityType): string {
let result = "未知";
switch (type) {
//自定义放置
case FacilityType.PL: result = "毗邻"; break;
case FacilityType.QY: result = "区域"; break;
case FacilityType.TPBZ: result = "图片标注"; break;
case FacilityType.DWBZ: result = "点位标注"; break;
//内建
case FacilityType.XF_MHQ_PT_4: result = "4kg普通灭火器"; break;
}
return result;
}

92
src/app/babylon/view/facility-window/facility-window.ts
Unescape View File

@ -247,7 +247,6 @@ export class FacilityWindow extends UIBase {
if (eventData.pickInfo.hit && !SceneManager.s_isPointerDrag) {
instance.selectJYJFrom3D(eventData.pickInfo);
if (FacilityWindow.s_currentFacilityItem != null) {
instance.createNewFacilityByPos(eventData.pickInfo.pickedPoint);
@ -729,15 +728,8 @@ export class FacilityWindow extends UIBase {
//#region 加油机特殊表现
/**
* 选中加油机时，高亮颜色
*/
static readonly c_selectJYJColor = Color3.Green();
/**
* 当前选中的加油机
*/
currentSelectJYJInfo: ModelInfo_facility;
/**
* 根据mesh创建设备
@ -758,89 +750,7 @@ export class FacilityWindow extends UIBase {
}
/**
* 三维中通过点击模型获取加油机（或油罐）
* @param pickInfo null 表示取消选中
*/
selectJYJFrom3D(pickInfo: PickingInfo) {
if (this.currentSelectJYJInfo != null) {
this.playJYJSelectEffect(false, this.currentSelectJYJInfo);
this.currentSelectJYJInfo = null;
}
if (pickInfo == null) {
return;
}
let allJYJInfo: ModelInfo_facility[] = [];
try {
let facilityInfosByType = BuildingWindow.instance.currentBuidngItem.buildingInfo.ModelInfo.facilityInfos;
for (let i = 0; i < facilityInfosByType.length; i++) {
if (facilityInfosByType[i].type == FacilityType.JY_JYJ || facilityInfosByType[i].type == FacilityType.JY_YG) {
allJYJInfo = allJYJInfo.concat(facilityInfosByType[i].facilityInfo);
}
}
} catch (error) {
console.log("没找到加油机", error);
}
let result: ModelInfo_facility = null;
for (let i = 0; i < allJYJInfo.length; i++) {
let childMesh = allJYJInfo[i].models;
childMesh.push(allJYJInfo[i].modelBox);
for (let j = 0; j < childMesh.length; j++) {
if (pickInfo.pickedMesh == childMesh[j]) {
result = allJYJInfo[i];
console.log("通过点击，找到加油机了");
break;
}
}
}
if (result != null) {
this.currentSelectJYJInfo = result;
this.playJYJSelectEffect(true, this.currentSelectJYJInfo);
let facilityItem: FacilityInfoUIItem = FacilityInfoInSceneWindow.instance.getFacilityItem(result);
console.log("场景中选中设备", facilityItem); //通知前端
FacilityInfoInSceneWindow.instance.selectFacilityItemToThree([facilityItem], true);
}
}
/**
* 展示加油机（或油罐）选中的效果
* @param play false,表示还原
*/
playJYJSelectEffect(play: boolean, facilityInfo: ModelInfo_facility) {
if (play) {
//正在展示加油机或油罐
if (BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.JYJ
|| BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.YG) {
SceneManager.Instance.removeFromHighLight(facilityInfo.modelBox as Mesh);
}
SceneManager.Instance.addToHighLight(facilityInfo.modelBox as Mesh, FacilityWindow.c_selectJYJColor);
}
else {
SceneManager.Instance.removeFromHighLight(facilityInfo.modelBox as Mesh);
//正在展示加油机或油罐
if (BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.JYJ
|| BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.YG) {
SceneManager.Instance.addToHighLight(facilityInfo.modelBox as Mesh, ModelInfo_facility.c_hightLightColor);
}
}
}
//#endregion

3
src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item.ts
Unescape View File

@ -93,12 +93,15 @@ export class FacilityInfoUIItem {
GizmoTool.onPickMeshInfoObservable.notifyObservers(this.modelInfo);
this.facilityInfoInSceneWindow.selectFacilityItemToThree([this], true);
this.modelInfo.setIconEnable(select);
this.facilityInfoInSceneWindow.playJYJSelectEffect(select, this.modelInfo)
}
else {
this.facilityInfoInSceneWindow.selectFacilityItemToThree([this], false);
if (!this.facilityInfoInSceneWindow.getFacilityUIShowType(this.getType())) {
this.modelInfo.setIconEnable(select);
}
this.facilityInfoInSceneWindow.playJYJSelectEffect(select, this.modelInfo)
}
}

181
src/app/babylon/view/facilityinfoinscene-window/facilityinfoinscene-window.ts
Unescape View File

@ -1,15 +1,17 @@
import { EventManager } from "@angular/platform-browser";
import { AbstractMesh, Ray, RayHelper, Vector3 } from "@babylonjs/core";
import { AbstractMesh, Color3, EventState, Mesh, PickingInfo, PointerEventTypes, PointerInfo, Ray, RayHelper, Vector3 } from "@babylonjs/core";
import { classToClass } from "class-transformer";
import { PlanComponent } from "src/app/pages/plan/plan.component";
import { ModelChangeType } from "../../controller/data-manager";
import { Event_KeyboardInput } from "../../controller/event-manager/events/event-keyboard-input";
import { Event_ModelInfoChange } from "../../controller/event-manager/events/event-modelinfo-change";
import { ModeManager, ModeType } from "../../controller/mode-manager";
import { SceneManager } from "../../controller/scene-manager";
import { BuildingStatus } from "../../controller/status/building-status";
import { IndoorStatus } from "../../controller/status/indoor-status";
import { StatusManager } from "../../controller/status/status-manager";
import { Game } from "../../game";
import { JYZInfoMoudleType } from "../../model/data/institution/jyz-show-data";
import { ModelData_facility, FacilityType } from "../../model/data/model-data/model-data-facility";
import { BuildingInfo } from "../../model/info/building/building-info";
import { ModelInfo } from "../../model/info/model/model-info";
@ -18,6 +20,7 @@ import { GizmoTool } from "../../tool/gizmo-tool";
import { TsTool } from "../../tool/ts-tool";
import { BuildingWindow } from "../building-window/building-window";
import { FacilityWindow } from "../facility-window/facility-window";
import { UIBase } from "../window-base/ui-base";
import { FacilityInfoUIItem } from "./facilityinfo-ui-item";
@ -42,6 +45,7 @@ export class FacilityInfoInSceneWindow extends UIBase {
isMultiselect: boolean = false;//多选状态
//#region 前端对接
@ -175,21 +179,21 @@ export class FacilityInfoInSceneWindow extends UIBase {
showFacilityByType(facilityType: FacilityType, show: boolean) {
if (ModeManager.currentMode == ModeType.Look) {
// for (let i = 0; i < this.facilityInfoUIItemes.length; i++) {
// let l_facilityData = (this.facilityInfoUIItemes[i].modelInfo.modelData) as ModelData_facility;
// if (facilityType == null || facilityType == l_facilityData.facilityType) {
// this.facilityInfoUIItemes[i].modelInfo.setEnable(show);
// }
// else if (show) {
// this.facilityInfoUIItemes[i].modelInfo.setEnable(false);
// }
// }
for (let i = 0; i < this.facilityInfoUIItemes.length; i++) {
let l_facilityData = (this.facilityInfoUIItemes[i].modelInfo.modelData) as ModelData_facility;
if (facilityType == null || facilityType == l_facilityData.facilityType) {
this.facilityInfoUIItemes[i].modelInfo.setIconEnable(show);
this.facilityInfoUIItemes[i].modelInfo.setEnable(show);
}
else if (show) {
this.facilityInfoUIItemes[i].modelInfo.setEnable(false);
}
}
// for (let i = 0; i < this.facilityInfoUIItemes.length; i++) {
// let l_facilityData = (this.facilityInfoUIItemes[i].modelInfo.modelData) as ModelData_facility;
// if (facilityType == null || facilityType == l_facilityData.facilityType) {
// this.facilityInfoUIItemes[i].modelInfo.setIconEnable(show);
// }
// }
}
else {
for (let i = 0; i < this.facilityInfoUIItemes.length; i++) {
@ -249,7 +253,7 @@ export class FacilityInfoInSceneWindow extends UIBase {
this.currentFacility = [];
this.initKeyboardInput();
this.initDragInput();
this.initPickEvent();
}
@ -261,6 +265,7 @@ export class FacilityInfoInSceneWindow extends UIBase {
GizmoTool.onPickMeshInfoObservable.removeCallback(this.onClickModel);
}
//#endregion
//#region 键盘输入
/**
@ -280,14 +285,7 @@ export class FacilityInfoInSceneWindow extends UIBase {
onKeyboardInput(eventData: Event_KeyboardInput) {
if (eventData.data.key == "Delete") // 删除。 后期看是否加入 Backspace 退格
{
//改由前端完成快捷键删除
// if (this.currentFacility != null) {
// for (let i = 0; i < this.currentFacility.length; i++) {
// this.currentFacility[i].askDelete(false);
// }
// this.currentFacility = [];
// this.three.getAllCensusList(this.facilityInfoUIItemes || []);
// }
}
else if (eventData.data.key == "X") //室内消火栓吸附墙
{
@ -417,6 +415,149 @@ export class FacilityInfoInSceneWindow extends UIBase {
//#endregion
//#region 鼠标输入
//初始化pick事件
initPickEvent() {
SceneManager.Instance.scene.onPointerObservable.add(
this.onPointerObservable
);
}
//鼠标交互监听
onPointerObservable(eventData: PointerInfo, eventState: EventState) {
let instance = FacilityInfoInSceneWindow.instance;
switch (eventData.type) {
case PointerEventTypes.POINTERUP:
if (eventData.event.button == 0) { //左键正常
if (eventData.pickInfo.hit && !SceneManager.s_isPointerDrag) {
instance.selectJYJFrom3D(eventData.pickInfo);
}
}
else { //右键
}
break;
case PointerEventTypes.POINTERPICK:
// console.log(eventData.event);
break;
}
}
/**
* 选中加油机时，高亮颜色
*/
static readonly c_selectJYJColor = Color3.Green();
/**
* 当前选中的加油机
*/
currentSelectJYJInfo: ModelInfo_facility;
/**
* 三维中通过点击模型获取加油机（或油罐）
* @param pickInfo null 表示取消选中
*/
selectJYJFrom3D(pickInfo: PickingInfo) {
if (this.currentSelectJYJInfo != null) {
this.playJYJSelectEffect(false, this.currentSelectJYJInfo);
this.currentSelectJYJInfo = null;
}
if (pickInfo == null) {
return;
}
let allJYJInfo: ModelInfo_facility[] = [];
try {
let facilityInfosByType = BuildingWindow.instance.currentBuidngItem.buildingInfo.ModelInfo.facilityInfos;
let currentMoudle = BuildingWindow.instance.currentJYZInfoMoudleType;
for (let i = 0; i < facilityInfosByType.length; i++) {
if ((currentMoudle == null || currentMoudle == JYZInfoMoudleType.JYJ) && facilityInfosByType[i].type == FacilityType.JY_JYJ ||
(currentMoudle == null || currentMoudle == JYZInfoMoudleType.YG) && facilityInfosByType[i].type == FacilityType.JY_YG) {
allJYJInfo = allJYJInfo.concat(facilityInfosByType[i].facilityInfo);
}
}
} catch (error) {
console.log("点击没找到", error);
}
let result: ModelInfo_facility = null;
for (let i = 0; i < allJYJInfo.length; i++) {
let childMesh = allJYJInfo[i].models;
childMesh.push(allJYJInfo[i].modelBox);
for (let j = 0; j < childMesh.length; j++) {
if (pickInfo.pickedMesh == childMesh[j]) {
result = allJYJInfo[i];
console.log("通过点击，找到加油机了");
break;
}
}
}
if (result != null) {
this.playJYJSelectEffect(true, result);
let facilityItem: FacilityInfoUIItem = FacilityInfoInSceneWindow.instance.getFacilityItem(result);
console.log("场景中选中设备", facilityItem); //通知前端
FacilityInfoInSceneWindow.instance.selectFacilityItemToThree([facilityItem], true);
}
}
/**
* 展示加油机（或油罐）选中的效果
* @param play false,表示还原
*/
playJYJSelectEffect(play: boolean, facilityInfo: ModelInfo_facility) {
if (play) {
let facilityData = facilityInfo.modelData as ModelData_facility;
if (facilityData.facilityType != FacilityType.JY_JYJ &&
facilityData.facilityType != FacilityType.JY_YG) {
//只有加油机和油罐有高亮显示
return;
}
}
if (play) {
this.currentSelectJYJInfo = facilityInfo;
//正在展示加油机或油罐
if (BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.JYJ
|| BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.YG) {
SceneManager.Instance.removeFromHighLight(facilityInfo.modelBox as Mesh);
}
SceneManager.Instance.addToHighLight(facilityInfo.modelBox as Mesh, FacilityInfoInSceneWindow.c_selectJYJColor);
}
else {
SceneManager.Instance.removeFromHighLight(facilityInfo.modelBox as Mesh);
//正在展示加油机或油罐
if (BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.JYJ
|| BuildingWindow.instance.currentJYZInfoMoudleType == JYZInfoMoudleType.YG) {
SceneManager.Instance.addToHighLight(facilityInfo.modelBox as Mesh, ModelInfo_facility.c_hightLightColor);
}
}
}
//#endregion
//创建所有设备UI
createAllFacilities(facilityByType: FacilityInfoByType[]) {
this.clearFacilityInfoUIItemes();

Write Preview
Loading…
Cancel
Save