You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1291 lines
45 KiB
1291 lines
45 KiB
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core'; |
|
import * as PIXI from 'pixi.js'; |
|
import { EventEmitter } from 'events'; |
|
import { EventManager } from '@angular/platform-browser'; |
|
import { OutlineFilter, OldFilmFilter } from 'pixi-filters'; |
|
import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service'; |
|
import * as ObjectID from 'bson-objectid'; |
|
import { Charm } from './charm'; |
|
import { SinglePointIcon } from './model/singlePointIcon'; |
|
import { GameMode } from './model/gameMode'; |
|
import { MultipointIcon } from './model/multipointIcon'; |
|
import { PolygonIcon } from './model/polygonIcon'; |
|
import { PutCarArea } from './model/putCarArea'; |
|
import { Arrows } from './model/arrows'; |
|
import { Pipeline } from './model/pipeline'; |
|
import { PaintMode } from './model/paintModel'; |
|
import { WallSpace } from './model/wallSpace'; |
|
import { AxShape } from './model/axShape'; |
|
import { PropertyInfo } from './model/PropertyInfo'; |
|
|
|
|
|
@Component({ |
|
selector: 'app-working-area', |
|
templateUrl: './working-area.component.html', |
|
styleUrls: ['./working-area.component.scss'] |
|
}) |
|
/** |
|
* 工作区 |
|
*/ |
|
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit { |
|
|
|
constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { |
|
super(); |
|
} |
|
|
|
@ViewChild('content') |
|
content: ElementRef; |
|
/** |
|
* 父组件 |
|
*/ |
|
@Input() init: any; |
|
/** |
|
* pixijs 程序 |
|
*/ |
|
public app: PIXI.Application; |
|
/** |
|
* 资源加载器 |
|
*/ |
|
public loader = PIXI.Loader.shared; |
|
/** |
|
* 背景图 |
|
*/ |
|
public backgroundImage: PIXI.Sprite; |
|
/** |
|
* 预览单点图标 |
|
*/ |
|
public previewSinglePointIcon = new PIXI.Sprite(); |
|
/** |
|
* 预览线段 |
|
*/ |
|
public previewLineSegment = new PIXI.Graphics(); |
|
/** |
|
* 预览原点 |
|
*/ |
|
public circleShadow = new PIXI.Graphics(); |
|
/** |
|
* 鼠标位置 |
|
*/ |
|
public mousePosition: PIXI.Point = new PIXI.Point(0, 0); |
|
/** |
|
* 绘画模式 |
|
*/ |
|
private paintMode: PaintMode; |
|
/** |
|
* 选择器 |
|
*/ |
|
public selection: Selection = new Selection(this); |
|
/** |
|
* 当前鼠标的点 |
|
*/ |
|
public currentClickPoint: PIXI.Graphics = new PIXI.Graphics(); |
|
/** |
|
* 绘制点集合 |
|
*/ |
|
public paintPoints: PIXI.Point[]; |
|
/** |
|
* 绘制中的管线 |
|
*/ |
|
public paintingPipeline: Pipeline; |
|
/** |
|
* 绘制中的箭头 |
|
*/ |
|
public paintingArrows: Arrows = null; |
|
/** |
|
* 绘制中的多点图标 |
|
*/ |
|
public paintingIcon: MultipointIcon; |
|
public paintingWall: AxShape; |
|
/** |
|
* 绘制中的连线 |
|
*/ |
|
public paintingLine: PIXI.Graphics = new PIXI.Graphics(); |
|
/** |
|
* 绿色描边 |
|
*/ |
|
public outlineFilterGreen = new OutlineFilter(2, 0x00ff00); |
|
/** |
|
* 拷贝素材数据 |
|
*/ |
|
public copyData: any[] = []; |
|
/** |
|
* 确认绘制按钮 |
|
*/ |
|
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.png'); |
|
/** |
|
* 框选工具图形 |
|
*/ |
|
private rectToolGraphics = new PIXI.Graphics(); |
|
/** |
|
* 初始鼠标位置 |
|
*/ |
|
private initialScreenMousePos: PIXI.Point = new PIXI.Point(); |
|
/** |
|
* 最终鼠标位置 |
|
*/ |
|
private finalScreenMousePos: PIXI.Point = new PIXI.Point(); |
|
/** |
|
* 允许编辑 |
|
*/ |
|
public allowEdit = true; |
|
/** |
|
* 动画控制器 |
|
*/ |
|
public animator; |
|
public animation; |
|
public animationIcon; |
|
public animationTime; |
|
// 车辆作业面 |
|
public carAreas: PolygonIcon[]; |
|
// 车辆数据 |
|
public carData: Map<string, any> = new Map<string, any>(); |
|
// 当前选择的车辆id |
|
public selectCar: any = null; |
|
/** |
|
* 数据初始化 |
|
*/ |
|
ngOnInit(): void { |
|
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { |
|
if (event.keyCode === 17) { |
|
this.selection.isMultiselection = true; |
|
} |
|
}); |
|
this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { |
|
if (event.keyCode === 17) { |
|
this.selection.isMultiselection = false; |
|
this.rectToolGraphics.visible = false; |
|
this.rectToolGraphics.clear(); |
|
} |
|
// 按Del键删除选中的图标 |
|
if (event.keyCode === 46) { |
|
this.selection.objects.forEach(item => { |
|
delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id]; |
|
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); |
|
this.canvasData.isChange = true; |
|
}); |
|
this.emit('deleteIcon'); |
|
} |
|
}); |
|
// 打印当前工作区信息 |
|
this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => { |
|
// console.log(event.keyCode); |
|
if (event.keyCode === 32) { |
|
switch (this.paintMode) { |
|
case 0: |
|
console.log(`当前的绘制模式是：单点图标`); |
|
break; |
|
case 1: |
|
console.log(`当前的绘制模式是：线段图标`); |
|
break; |
|
case 2: |
|
console.log(`当前的绘制模式是：自定义多边形`); |
|
break; |
|
case 3: |
|
console.log(`当前的绘制模式是：水带多边形`); |
|
break; |
|
case 4: |
|
console.log(`当前的绘制模式是：暂无`); |
|
break; |
|
case 5: |
|
console.log(`当前的绘制模式是：暂无`); |
|
break; |
|
case 6: |
|
console.log(`当前的绘制模式是：结束绘制`); |
|
break; |
|
default: |
|
break; |
|
} |
|
console.log('当前楼层的数据：'); |
|
console.log(this.canvasData.originaleveryStoreyData.data); |
|
|
|
console.log('绘制中的管线：'); |
|
console.log(this.paintingPipeline); |
|
|
|
console.log('处置预案数据：'); |
|
console.log(this.canvasData.selectPanelPoint.Data); |
|
} |
|
}); |
|
} |
|
/** |
|
* 页面初始化 |
|
*/ |
|
ngAfterViewInit(): void { |
|
this.createCanvas(); |
|
window.onresize = () => { |
|
this.resetCanvas(); |
|
}; |
|
} |
|
/** |
|
* |
|
* @param event 鼠标滑动事件 |
|
*/ |
|
public mouseWheelHandel(event) { |
|
const delX = this.mousePosition.x - this.backgroundImage.position.x; |
|
const delY = this.mousePosition.y - this.backgroundImage.position.y; |
|
const pivot = this.backgroundImage.toLocal(this.mousePosition); |
|
const delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail))); |
|
if (delta > 0) { |
|
if (this.backgroundImage.scale.x >= 32) { |
|
this.backgroundImage.scale.x = 32; |
|
this.backgroundImage.scale.y = 32; |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
return; |
|
} |
|
this.backgroundImage.pivot.set(pivot.x, pivot.y); |
|
|
|
this.backgroundImage.scale.x += this.backgroundImage.scale.x * 0.1; |
|
this.backgroundImage.scale.y += this.backgroundImage.scale.y * 0.1; |
|
|
|
this.backgroundImage.position.x += delX; |
|
this.backgroundImage.position.y += delY; |
|
} else if (delta < 0) { |
|
if (this.backgroundImage.scale.x <= 0.1) { |
|
this.backgroundImage.scale.x = 0.1; |
|
this.backgroundImage.scale.y = 0.1; |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
return; |
|
} |
|
this.backgroundImage.pivot.set(pivot.x, pivot.y); |
|
|
|
this.backgroundImage.scale.x -= this.backgroundImage.scale.x * 0.1; |
|
this.backgroundImage.scale.y -= this.backgroundImage.scale.y * 0.1; |
|
|
|
this.backgroundImage.position.x += delX; |
|
this.backgroundImage.position.y += delY; |
|
} |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
} |
|
/** |
|
* |
|
* @param icon 移动到选中车辆到屏幕中心点 |
|
*/ |
|
public moveIconToScreenCenter(icon) { |
|
if (icon.parent === this.backgroundImage && ( |
|
icon.assetData.Type === 1 || |
|
icon.assetData.Type === 2 || |
|
icon.assetData.Type === 3 || |
|
icon.assetData.Type === 4 |
|
)) { |
|
console.log(this.backgroundImage.position); |
|
this.backgroundImage.pivot.set(icon.x, icon.y); |
|
this.backgroundImage.position.set(771, 404); |
|
clearTimeout(this.animationTime); |
|
this.animation?.pause(); |
|
this.animationIcon?.scale.set(1); |
|
this.animation = this.animator.breathe(icon, 10, 10, 30, true, 0); |
|
this.animationIcon = icon; |
|
this.animationTime = setTimeout(() => { |
|
this.animation?.pause(); |
|
this.animationIcon?.scale.set(1); |
|
}, 5000); |
|
} |
|
} |
|
/** |
|
* 创建画布 |
|
*/ |
|
private createCanvas(): void { |
|
this.app = new PIXI.Application({ |
|
width: this.content.nativeElement.clientWidth, |
|
height: this.content.nativeElement.clientHeight, |
|
antialias: true, |
|
transparent: false, |
|
resolution: 1, |
|
backgroundColor: 0xE9FAFF |
|
}); |
|
this.content.nativeElement.appendChild(this.app.view); |
|
this.animator = new Charm(PIXI); |
|
|
|
this.app.ticker.add((delta) => { |
|
this.animator.update(); |
|
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; |
|
if (this.backgroundImage !== undefined) { |
|
this.previewSinglePointIcon.position = this.backgroundImage.toLocal(this.mousePosition); |
|
this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); |
|
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); |
|
} |
|
if (this.rectToolGraphics.visible === true) { |
|
|
|
const init = this.initialScreenMousePos; |
|
const final = this.finalScreenMousePos; |
|
|
|
this.rectToolGraphics.clear(); |
|
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); |
|
this.rectToolGraphics.beginFill(0xccccf2, 0.25); |
|
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); |
|
this.rectToolGraphics.endFill(); |
|
this.rectToolGraphics.closePath(); |
|
} |
|
if (this.paintingArrows !== null) { |
|
this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y); |
|
this.paintingArrows.refresh(); |
|
} |
|
}); |
|
/** |
|
* 选中事件 |
|
*/ |
|
this.on('select', obj => { |
|
// this.moveIconToScreenCenter(obj); |
|
if (this.allowEdit) { |
|
if (obj instanceof MultipointIcon) { |
|
if (obj.assetData.GameMode === this.canvasData.gameMode) { |
|
obj.setPointVisiable(true); |
|
} else { |
|
obj.filters = [this.outlineFilterGreen]; |
|
} |
|
} else if (obj instanceof PolygonIcon) { |
|
if (obj.assetData.GameMode === this.canvasData.gameMode) { |
|
obj.setPointVisiable(true); |
|
} else { |
|
obj.filters = [this.outlineFilterGreen]; |
|
} |
|
} else { |
|
obj.filters = [this.outlineFilterGreen]; |
|
} |
|
} else { |
|
obj.filters = [this.outlineFilterGreen]; |
|
} |
|
}); |
|
/** |
|
* 取消选中事件 |
|
*/ |
|
this.on('deselect', obj => { |
|
if (this.allowEdit) { |
|
if (obj instanceof MultipointIcon) { |
|
obj.setPointVisiable(false); |
|
} else if (obj instanceof PolygonIcon) { |
|
obj.setPointVisiable(false); |
|
} else { |
|
obj.filters = []; |
|
} |
|
} else { |
|
obj.filters = []; |
|
} |
|
}); |
|
this.on('backgroundScale', scale => { |
|
this.previewSinglePointIcon.scale.set((0.5 / scale)); |
|
this.backgroundImage.children.forEach(item => { |
|
if (item instanceof SinglePointIcon) { |
|
if (item.assetData.FixedSize) { |
|
const data = 1 / scale; |
|
item.scale.set(data); |
|
} else { |
|
const data = 1 / scale; |
|
item.text.scale.set(data); |
|
} |
|
} else if (item instanceof MultipointIcon) { |
|
const data = 1 / scale; |
|
item.text.scale.set(data); |
|
} else if (item instanceof PolygonIcon) { |
|
const data = 1 / scale; |
|
item.text.scale.set(data); |
|
} |
|
}); |
|
|
|
}); |
|
this.on('createIcon', obj => { |
|
if (obj.assetData.GameMode === GameMode.BasicInformation) { |
|
// if (obj.assetData.IsFromBuilding) { |
|
// this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; |
|
// } else { |
|
this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; |
|
// } |
|
} else { |
|
// console.log(); |
|
if (this.canvasData.selectPanelPoint.Data === undefined |
|
|| this.canvasData.selectPanelPoint.Data === null) { |
|
this.canvasData.selectPanelPoint.Data = new FloorNodeData(); |
|
} |
|
this.canvasData.selectPanelPoint.Data.Stock[obj.assetData.Id] = obj.assetData; |
|
} |
|
this.canvasData.isChange = true; |
|
}); |
|
} |
|
/** |
|
* 重置画布 |
|
*/ |
|
public resetCanvas() { |
|
this.app.renderer.resize(this.content.nativeElement.clientWidth, this.content.nativeElement.clientHeight); |
|
} |
|
/** |
|
* 设置名称显示 |
|
* @param value true 显示 false 隐藏 |
|
* @param mode BasicInformation = 0 基本信息 Assignment想定作业 = 1 想定作业 |
|
*/ |
|
public setNameVisible(value: boolean, mode: GameMode): void { |
|
this.backgroundImage?.children.forEach(item => { |
|
if (item instanceof SinglePointIcon) { |
|
item.setNameVisible(value, mode); |
|
} else if (item instanceof MultipointIcon) { |
|
item.setNameVisible(value, mode); |
|
} else if (item instanceof PolygonIcon) { |
|
item.setNameVisible(value, mode); |
|
} |
|
}); |
|
} |
|
/** |
|
* 根据id刷新图标 |
|
* @param id 图标数据id |
|
*/ |
|
public refreshIcon(id: string): void { |
|
const icon = this.backgroundImage.children.find(item => item.name === id); |
|
if (icon instanceof SinglePointIcon) { |
|
icon.refresh(); |
|
} else if (icon instanceof MultipointIcon) { |
|
icon.refresh(); |
|
} else if (icon instanceof PolygonIcon) { |
|
icon.refresh(); |
|
} |
|
} |
|
/** |
|
* |
|
* @param value 缩放倍数 |
|
*/ |
|
public setIconScale(value: number): void { |
|
this.backgroundImage.children.forEach(item => { |
|
if (item instanceof SinglePointIcon) { |
|
item.scale.set(value); |
|
} else if (item instanceof MultipointIcon) { |
|
|
|
} else if (item instanceof PolygonIcon) { |
|
|
|
} |
|
}); |
|
} |
|
/** |
|
* 设置高亮 |
|
*/ |
|
public setHighlight(ids: string[]): void { |
|
this.selection.deselectAll(); |
|
ids.forEach(item => { |
|
let obj = this.backgroundImage.getChildByName(item); |
|
if (obj === null) { |
|
obj = this.app.stage.getChildByName(item); |
|
} |
|
this.selection.select(obj); |
|
}); |
|
} |
|
/** |
|
* 刷新工作区 |
|
*/ |
|
public async refresh() { |
|
this.setPaintMode(PaintMode.endPaint); |
|
this.resetCanvas(); |
|
this.destroyBackgroundImage(); |
|
await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl); |
|
|
|
// this.refreshBackgroundImage(); |
|
// this.versionChecking(); |
|
|
|
|
|
const floorData = this.canvasData.originaleveryStoreyData.data; |
|
// const buildingData = this.canvasData.originalcompanyBuildingData.data; |
|
// const floor = this.canvasData.selectStorey; |
|
// // key=>属性名 data[key]=>属性值 |
|
Object.keys(floorData).forEach((key) => { |
|
// console.log(floorData[key]); |
|
switch (floorData[key].InteractiveMode) { |
|
case 0: |
|
const singleIcon = new SinglePointIcon(floorData[key], this); |
|
break; |
|
case 1: |
|
const icon = new MultipointIcon(floorData[key], this); |
|
break; |
|
case 2: |
|
const polygonIcon = new PolygonIcon(floorData[key], this); |
|
break; |
|
} |
|
}); |
|
// Object.keys(buildingData).forEach((key) => { |
|
// if (buildingData[key].FloorId === floor.id) { |
|
// switch (buildingData[key].InteractiveMode) { |
|
// case 0: |
|
// const singleIcon = new SinglePointIcon(buildingData[key], this); |
|
// break; |
|
// case 1: |
|
// const icon = new MultipointIcon(buildingData[key], this); |
|
// break; |
|
// case 2: |
|
// const polygonIcon = new PolygonIcon(buildingData[key], this); |
|
// break; |
|
// } |
|
// } |
|
// }); |
|
|
|
// 加载处置节点数据 |
|
const nodeData = this.canvasData.selectPanelPoint.Data; |
|
if (nodeData !== undefined && nodeData !== null) { |
|
Object.keys(nodeData).forEach((key) => { |
|
Object.keys(nodeData[key]).forEach((tempKey) => { |
|
switch (nodeData[key][tempKey].InteractiveMode) { |
|
case 0: |
|
const singleIcon = new SinglePointIcon(nodeData[key][tempKey], this); |
|
break; |
|
case 1: |
|
if (nodeData[key][tempKey].Name === '水带') { |
|
const pipeline = new Pipeline(nodeData[key][tempKey], this); |
|
} else { |
|
const icon = new MultipointIcon(nodeData[key][tempKey], this); |
|
} |
|
break; |
|
case 2: |
|
const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); |
|
break; |
|
} |
|
}); |
|
}); |
|
} |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
} |
|
/** |
|
* |
|
* @param id 图标ID |
|
* @param b 显示/隐藏 |
|
*/ |
|
public setIconVisible(ids: string[], b: boolean) { |
|
ids.forEach(item => { |
|
this.backgroundImage.getChildByName(item).visible = b; |
|
}); |
|
} |
|
// /** |
|
// * 版本检查 |
|
// */ |
|
// public versionChecking(): void { |
|
// const floorData = this.canvasData.originaleveryStoreyData; |
|
// const buildingData = this.canvasData.originalcompanyBuildingData; |
|
// const nodeData = this.canvasData.selectPanelPoint; |
|
// if (floorData.version && floorData.version === '1.0') { |
|
// floorData.version = '2.0'; |
|
// Object.keys(floorData.data).forEach(item => { |
|
// floorData.data[item].Point.y *= -1; |
|
// floorData.data[item].MultiPoint?.forEach(element => { |
|
// element.y *= -1; |
|
// }); |
|
// }); |
|
// } |
|
// if (buildingData.version && buildingData.version === '1.0') { |
|
// buildingData.version = '2.0'; |
|
// Object.keys(buildingData.data).forEach(item => { |
|
// buildingData.data[item].Point.y *= -1; |
|
// buildingData.data[item].MultiPoint?.forEach(element => { |
|
// element.y *= -1; |
|
// }); |
|
// }); |
|
// } |
|
// if (nodeData.Version && nodeData.Version === '1.0') { |
|
// nodeData.Version = '2.0'; |
|
// console.log(this.canvasData.selectPanelPoint.Version); |
|
// Object.keys(nodeData.Data).forEach((key) => { |
|
// Object.keys(nodeData.Data[key]).forEach((tempKey) => { |
|
// nodeData.Data[key][tempKey].Point.y *= -1; |
|
// nodeData.Data[key][tempKey].MultiPoint?.forEach(element => { |
|
// element.y *= -1; |
|
// }); |
|
// }); |
|
// }); |
|
// } |
|
// } |
|
/** |
|
* 创建确认绘制结束按钮 |
|
*/ |
|
private createEnterPaintEndButton() { |
|
this.enterPaintEndButton.width = 60; |
|
this.enterPaintEndButton.height = 60; |
|
this.enterPaintEndButton.anchor.set(0.5); |
|
this.enterPaintEndButton.position = new PIXI.Point(0, 0); |
|
this.enterPaintEndButton.interactive = true; |
|
this.enterPaintEndButton.buttonMode = true; |
|
this.enterPaintEndButton |
|
.on('mousedown', event => { |
|
event.stopPropagation(); |
|
this.enterPaint(); |
|
}); |
|
this.backgroundImage.addChild(this.enterPaintEndButton); |
|
this.enterPaintEndButton.zIndex = this.backgroundImage.children.length; |
|
this.enterPaintEndButton.visible = false; |
|
} |
|
/** |
|
* 创建背景图 |
|
*/ |
|
private async createBackgroundImage(imageUrl: string): Promise<void> { |
|
const image = await PIXI.Texture.fromURL(imageUrl); |
|
this.backgroundImage = new PIXI.Sprite(image); |
|
this.backgroundImage.anchor.set(0.5); |
|
this.backgroundImage.x = this.app.view.width / 2; |
|
this.backgroundImage.y = this.app.view.height / 2; |
|
this.backgroundImage.interactive = true; |
|
this.backgroundImage.name = 'background'; |
|
|
|
// const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth; |
|
// const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth; |
|
const imageWidth = this.backgroundImage.texture.width; |
|
const imageHeight = this.backgroundImage.texture.height; |
|
const appWidth = this.app.view.width - 470; |
|
const appHeight = this.app.view.height; |
|
|
|
const wScale = appWidth / imageWidth; |
|
const hScale = appHeight / imageHeight; |
|
|
|
const scale = wScale < hScale |
|
? wScale |
|
: hScale; |
|
this.backgroundImage.scale.set(scale); |
|
this.backgroundImage.sortableChildren = true; |
|
this.backgroundImage |
|
.on('mousedown', event => { |
|
if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { |
|
event.currentTarget.data = event.data; |
|
event.currentTarget.dragging = true; |
|
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); |
|
event.currentTarget.dragPoint.x -= event.currentTarget.x; |
|
event.currentTarget.dragPoint.y -= event.currentTarget.y; |
|
switch (this.paintMode) { |
|
case PaintMode.endPaint: |
|
console.log(this.backgroundImage.toLocal(this.mousePosition)); |
|
break; |
|
case PaintMode.singlePointIcon: |
|
const json = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); |
|
const list = []; |
|
json.forEach(element => { |
|
const property = new PropertyInfo(element); |
|
list.push(property); |
|
}); |
|
|
|
const assetData = { |
|
TemplateId: this.canvasData.selectTemplateData.id, |
|
CanConnect: this.canvasData.selectTemplateData.canConnect, |
|
Pipelines: new Array(), |
|
FloorId: this.canvasData.selectStorey.id, |
|
Angle: this.canvasData.selectTemplateData.angle, |
|
Color: this.canvasData.selectTemplateData.color, |
|
Enabled: this.canvasData.selectTemplateData.enabled, |
|
FillMode: this.canvasData.selectTemplateData.fillMode, |
|
FireElementId: this.canvasData.selectTemplateData.fireElementId, |
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
Height : 32, |
|
Width : 32, |
|
Id: ObjectID.default.generate(), |
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
MultiPoint : null, |
|
Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y), |
|
Name : this.canvasData.selectTemplateData.name, |
|
PropertyInfos: list, |
|
Border : this.canvasData.selectTemplateData.border, |
|
DrawMode : this.canvasData.selectTemplateData.drawMode, |
|
Thickness : this.canvasData.selectTemplateData.thickness, |
|
IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding, |
|
GameMode : this.canvasData.gameMode |
|
}; |
|
const singleIcon = new SinglePointIcon(assetData, this); |
|
this.emit('createIcon', singleIcon); |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
break; |
|
case PaintMode.lineIcon: |
|
this.previewLineSegment.visible = true; |
|
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); |
|
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); |
|
|
|
if (this.paintPoints.length >= 2) { |
|
this.enterPaintEndButton.position = this.circleShadow.position; |
|
this.enterPaintEndButton.visible = true; |
|
} |
|
|
|
if (this.paintingIcon !== null) { |
|
this.backgroundImage.removeChild(this.paintingIcon); |
|
} |
|
const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); |
|
const propertyList = []; |
|
jsonObject.forEach(element => { |
|
const property = new PropertyInfo(element); |
|
propertyList.push(property); |
|
}); |
|
const assetData1 = { |
|
TemplateId: this.canvasData.selectTemplateData.id, |
|
FloorId: this.canvasData.selectStorey.id, |
|
Angle: this.canvasData.selectTemplateData.angle, |
|
Color: this.canvasData.selectTemplateData.color, |
|
Enabled: this.canvasData.selectTemplateData.enabled, |
|
FillMode: this.canvasData.selectTemplateData.fillMode, |
|
FireElementId: this.canvasData.selectTemplateData.fireElementId, |
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
Height: 32, |
|
Width: 32, |
|
Id: ObjectID.default.generate(), |
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
Point: new PIXI.Point(0, 0), |
|
Name: this.canvasData.selectTemplateData.name, |
|
PropertyInfos: propertyList, |
|
Border: this.canvasData.selectTemplateData.border, |
|
DrawMode: this.canvasData.selectTemplateData.drawMode, |
|
Thickness: this.canvasData.selectTemplateData.thickness, |
|
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, |
|
GameMode: this.canvasData.gameMode |
|
}; |
|
// const assetData1 = { |
|
// ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
// Point: new PIXI.Point(0, 0), |
|
// Width: 32, |
|
// Height: 32, |
|
// MultiPoint: this.paintPoints, |
|
// Name: this.canvasData.selectTemplateData.name |
|
// }; |
|
this.paintingIcon = new MultipointIcon(assetData1, this); |
|
// this.paintingIcon = new MultipointIcon(this.previewSinglePointIcon.texture, new PIXI.Point(0, 0), this.paintPoints, this, |
|
// this.canvasData.selectTemplateData.name); |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
break; |
|
case PaintMode.polygonIcon: |
|
this.previewLineSegment.visible = true; |
|
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); |
|
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); |
|
if (this.paintPoints.length === 1) { |
|
this.enterPaintEndButton.position = this.circleShadow.position; |
|
} else if (this.paintPoints.length >= 3) { |
|
this.enterPaintEndButton.visible = true; |
|
} |
|
this.paintPoints.forEach((value, index, array) => { |
|
if (index === 0) { |
|
this.paintingLine.clear(); |
|
this.paintingLine.lineStyle(1, 0xffd900, 1); |
|
this.paintingLine.moveTo(value.x, value.y); |
|
} else { |
|
this.paintingLine.lineTo(value.x, value.y); |
|
} |
|
}); |
|
|
|
// if (this.paintingIcon !== null) { |
|
// this.backgroundImage.removeChild(this.paintingIcon); |
|
// } |
|
// this.paintingIcon = new PolygonIcon(this.paintPoints, this); |
|
break; |
|
case PaintMode.Pipeline: |
|
|
|
if (this.paintingPipeline !== null) { |
|
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); |
|
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); |
|
this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints)); |
|
this.paintingPipeline.refresh(); |
|
} |
|
// this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
break; |
|
case PaintMode.Arrows: |
|
if (this.paintingArrows === null) { |
|
const data = { |
|
Id: ObjectID.default.generate(), |
|
name: 'string', |
|
point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), |
|
pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), |
|
pointB: new PIXI.Point(this.circleShadow.x, this.circleShadow.y), |
|
source: 'assets/images/进攻方向.png', |
|
}; |
|
this.paintingArrows = new Arrows(data, this); |
|
} else { |
|
this.paintingArrows.ready = true; |
|
this.paintingArrows = null; |
|
this.paintMode = PaintMode.endPaint; |
|
} |
|
break; |
|
case PaintMode.Car: |
|
// this.previewLineSegment.visible = true; |
|
// this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); |
|
// this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); |
|
|
|
// if (this.paintPoints.length >= 2) { |
|
// this.enterPaintEndButton.position = this.circleShadow.position; |
|
// this.enterPaintEndButton.visible = true; |
|
// } |
|
|
|
// if (this.paintingWall !== null) { |
|
// this.backgroundImage.removeChild(this.paintingWall); |
|
// } |
|
// const jsonObject1 = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); |
|
// const propertyList1 = []; |
|
// jsonObject1.forEach(element => { |
|
// const property = new PropertyInfo(element); |
|
// propertyList1.push(property); |
|
// }); |
|
// const assetData11 = { |
|
// TemplateId: this.canvasData.selectTemplateData.id, |
|
// FloorId: this.canvasData.selectStorey.id, |
|
// Angle: this.canvasData.selectTemplateData.angle, |
|
// Color: this.canvasData.selectTemplateData.color, |
|
// Enabled: this.canvasData.selectTemplateData.enabled, |
|
// FillMode: this.canvasData.selectTemplateData.fillMode, |
|
// FireElementId: this.canvasData.selectTemplateData.fireElementId, |
|
// FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
// Height: 32, |
|
// Width: 32, |
|
// Id: ObjectID.default.generate(), |
|
// ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
// InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
// MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
// Point: new PIXI.Point(0, 0), |
|
// Name: this.canvasData.selectTemplateData.name, |
|
// PropertyInfos: propertyList1, |
|
// Border: this.canvasData.selectTemplateData.border, |
|
// DrawMode: this.canvasData.selectTemplateData.drawMode, |
|
// Thickness: this.canvasData.selectTemplateData.thickness, |
|
// IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, |
|
// GameMode: this.canvasData.gameMode |
|
// }; |
|
|
|
// this.paintingWall = new WallSpace(assetData11, this); |
|
// this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
break; |
|
} |
|
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { |
|
this.rectToolGraphics.visible = true; |
|
event.currentTarget.dragging = true; |
|
this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
} |
|
}) |
|
.on('mouseup', event => { |
|
if (event.currentTarget.dragging) { |
|
event.currentTarget.dragging = false; |
|
event.currentTarget.data = null; |
|
} |
|
if (this.rectToolGraphics.visible === true) { |
|
this.backgroundImage.children.forEach(item => { |
|
if (item instanceof SinglePointIcon |
|
|| item instanceof MultipointIcon |
|
|| item instanceof PolygonIcon) { |
|
if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) { |
|
this.selection.select(item); |
|
} |
|
} |
|
}); |
|
this.rectToolGraphics.clear(); |
|
this.rectToolGraphics.visible = false; |
|
} |
|
}) |
|
.on('mouseupoutside', event => { |
|
if (event.currentTarget.dragging) { |
|
event.currentTarget.dragging = false; |
|
event.currentTarget.data = null; |
|
} |
|
}) |
|
.on('mousemove', event => { |
|
if (event.currentTarget.dragging && this.selection.isMultiselection === false) { |
|
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
|
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; |
|
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; |
|
} else if (event.currentTarget.dragging && this.selection.isMultiselection === true) { |
|
if (this.rectToolGraphics.visible === true) { |
|
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); |
|
} |
|
} |
|
}) |
|
.on('rightclick', event => { |
|
event.stopPropagation(); |
|
this.selection.deselectAll(); |
|
this.setPaintMode(PaintMode.endPaint); |
|
}) |
|
.on('pointerover', (event) => { |
|
this.previewSinglePointIcon.filters = null; |
|
}) |
|
.on('pointerout', (event) => { |
|
this.previewSinglePointIcon.filters = null; |
|
}); |
|
this.app.stage.addChild(this.backgroundImage); |
|
this.createPreviewSinglePointIcon(); |
|
this.createPreviewLineSegment(); |
|
this.createCircleShadow(); |
|
this.createEnterPaintEndButton(); |
|
this.backgroundImage.addChild(this.paintingLine); |
|
|
|
} |
|
|
|
/** |
|
* 刷新背景图 |
|
*/ |
|
public refreshBackgroundImage(): void { |
|
if (!this.canvasData.selectStorey.imageUrl) { |
|
this.backgroundImage.visible = false; |
|
} else { |
|
this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl); |
|
this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; |
|
this.backgroundImage.visible = true; |
|
} |
|
} |
|
/** |
|
* 清空画布 |
|
*/ |
|
public destroyBackgroundImage(): void { |
|
this.app.stage.removeChild(this.backgroundImage); |
|
} |
|
/** |
|
* 设置背景图缩放 |
|
* @param scale 缩放系数 |
|
*/ |
|
public setBackgroundScale(scale: number): void { |
|
this.backgroundImage.scale.set(scale); |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
} |
|
/** |
|
* 设置背景图角度 |
|
* @param imageAngle 角度值 |
|
*/ |
|
public setBackgroundAngle(imageAngle: number) { |
|
this.backgroundImage.angle = imageAngle; |
|
} |
|
/** |
|
* 创建预览单点图标 |
|
*/ |
|
private createPreviewSinglePointIcon(): void { |
|
this.previewSinglePointIcon = PIXI.Sprite.from('assets/images/noImg.png'); |
|
this.previewSinglePointIcon.width = 32; |
|
this.previewSinglePointIcon.height = 32; |
|
this.previewSinglePointIcon.alpha = 1; |
|
this.previewSinglePointIcon.anchor.set(0.5); |
|
this.previewSinglePointIcon.visible = false; |
|
this.backgroundImage.addChild(this.previewSinglePointIcon); |
|
} |
|
/** |
|
* 改变预览单点图标 |
|
* @param uri 图片地址 |
|
*/ |
|
private changePreviewSinglePointIcon(uri: string): void { |
|
this.previewSinglePointIcon.texture = PIXI.Texture.from(uri); |
|
this.previewSinglePointIcon.visible = true; |
|
} |
|
/** |
|
* 创建预览线段 |
|
*/ |
|
private createPreviewLineSegment() { |
|
this.previewLineSegment.visible = false; |
|
this.backgroundImage.addChild(this.currentClickPoint); |
|
this.backgroundImage.addChild(this.previewLineSegment); |
|
|
|
this.backgroundImage.addChild(this.rectToolGraphics); |
|
this.rectToolGraphics.visible = false; |
|
} |
|
/** |
|
* 刷新预览线段 |
|
* @param pointA 点A |
|
* @param pointB 点B |
|
*/ |
|
private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { |
|
this.previewLineSegment.clear(); |
|
this.previewLineSegment.lineStyle(1, 0xffd900, 1); |
|
this.previewLineSegment.moveTo(pointA.x, pointA.y); |
|
this.previewLineSegment.lineTo(pointB.x, pointB.y ); |
|
} |
|
/** |
|
* 创建半径图标影子 |
|
* @param x 半径 |
|
*/ |
|
private createCircleShadow(): void { |
|
this.circleShadow.beginFill(0xFFCC5A); |
|
this.circleShadow.drawCircle(0, 0, 10); |
|
this.circleShadow.endFill(); |
|
this.circleShadow.visible = false; |
|
this.backgroundImage.addChild(this.circleShadow); |
|
} |
|
showConnectionPoint(b: boolean) { |
|
this.backgroundImage?.children.forEach(item => { |
|
if (item instanceof SinglePointIcon) { |
|
if (item.assetData.CanConnect) { |
|
item.showConnectionPoint(b); |
|
} |
|
} |
|
}); |
|
} |
|
/** |
|
* 开始绘制 |
|
*/ |
|
public beginPaint() { |
|
if (this.canvasData.selectTemplateData.name === '水带') { |
|
this.showConnectionPoint(true); |
|
this.setPaintMode(PaintMode.Pipeline); |
|
return; |
|
} |
|
switch (this.canvasData.selectTemplateData.interactiveMode) { |
|
case 0: |
|
this.setPaintMode(PaintMode.singlePointIcon); |
|
break; |
|
case 1: |
|
this.setPaintMode(PaintMode.lineIcon); |
|
break; |
|
case 2: |
|
this.setPaintMode(PaintMode.polygonIcon); |
|
break; |
|
case 3: |
|
if (this.canvasData.selectTemplateData.name) { |
|
this.setPaintMode(PaintMode.Pipeline); |
|
} |
|
break; |
|
} |
|
} |
|
/** |
|
* 初始化管线数据 |
|
*/ |
|
public initPipelineData(): void { |
|
this.paintPoints = []; |
|
this.paintingPipeline = null; |
|
} |
|
public beginPaintingArrows(): void { |
|
this.paintMode = PaintMode.Arrows; |
|
} |
|
/** |
|
* 设置绘制状态 |
|
* @param mode 状态 |
|
*/ |
|
public setPaintMode(mode: PaintMode) { |
|
if (this.paintMode === mode) { return; } |
|
this.paintMode = mode; |
|
if (this.paintMode !== PaintMode.Pipeline) { |
|
this.showConnectionPoint(false); |
|
} |
|
switch (this.paintMode) { |
|
case PaintMode.Pipeline: |
|
|
|
break; |
|
case PaintMode.singlePointIcon: |
|
this.previewSinglePointIcon.visible = false; |
|
this.changePreviewSinglePointIcon(this.canvasData.selectTemplateData.imageUrl); |
|
break; |
|
case PaintMode.lineIcon: |
|
this.circleShadow.visible = false; |
|
this.previewLineSegment.visible = false; |
|
this.paintPoints.splice(0, this.paintPoints.length); |
|
if (this.paintingIcon !== null) { |
|
this.backgroundImage.removeChild(this.paintingIcon); |
|
} |
|
this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl); |
|
this.circleShadow.visible = true; |
|
break; |
|
case PaintMode.polygonIcon: |
|
this.circleShadow.visible = false; |
|
this.previewLineSegment.visible = false; |
|
this.paintingIcon = null; |
|
this.paintPoints.splice(0, this.paintPoints.length); |
|
this.paintingLine.clear(); |
|
this.circleShadow.visible = true; |
|
break; |
|
case PaintMode.endPaint: |
|
// 重置组件状态 |
|
if ( this.paintingIcon !== undefined |
|
&& this.paintingIcon !== null) { |
|
this.backgroundImage.removeChild(this.paintingIcon); |
|
} |
|
|
|
if (this.paintingPipeline !== undefined |
|
&& this.paintingPipeline !== null) { |
|
this.backgroundImage.removeChild(this.paintingPipeline); |
|
} |
|
this.paintingLine.clear(); |
|
this.resetData(); |
|
break; |
|
default: |
|
break; |
|
} |
|
} |
|
/** |
|
* 获取绘制状态 |
|
*/ |
|
public getPaintMode(): PaintMode { |
|
return this.paintMode; |
|
} |
|
/** |
|
* 重置 |
|
*/ |
|
public resetData() { |
|
this.previewSinglePointIcon.filters = null; |
|
this.previewSinglePointIcon.visible = false; |
|
this.previewSinglePointIcon.angle = 0; |
|
|
|
this.initPipelineData(); |
|
// |
|
this.circleShadow.visible = false; |
|
this.previewLineSegment.visible = false; |
|
} |
|
/** |
|
* 确认绘制 |
|
*/ |
|
private enterPaint(): void { |
|
this.previewLineSegment.visible = false; |
|
this.enterPaintEndButton.visible = false; |
|
switch (this.paintMode) { |
|
case PaintMode.lineIcon: |
|
if (this.paintPoints.length >= 2) { |
|
this.emit('createIcon', this.paintingIcon); |
|
this.paintingIcon = null; |
|
} |
|
break; |
|
case PaintMode.polygonIcon: |
|
this.paintingLine.clear(); |
|
if (this.paintPoints.length >= 3) { |
|
const jsonList = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos)); |
|
const propertyList = []; |
|
jsonList.forEach(element => { |
|
const property = new PropertyInfo(element); |
|
propertyList.push(property); |
|
}); |
|
const assetData = { |
|
TemplateId: this.canvasData.selectTemplateData.id, |
|
FloorId: this.canvasData.selectStorey.id, |
|
Angle: this.canvasData.selectTemplateData.angle, |
|
Color: this.canvasData.selectTemplateData.color, |
|
Enabled: this.canvasData.selectTemplateData.enabled, |
|
FillMode: this.canvasData.selectTemplateData.fillMode, |
|
FireElementId: this.canvasData.selectTemplateData.fireElementId, |
|
FixedSize: this.canvasData.selectTemplateData.fixedSize, |
|
Height: 32, |
|
Width: 32, |
|
Id: ObjectID.default.generate(), |
|
ImageUrl: this.canvasData.selectTemplateData.imageUrl, |
|
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, |
|
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)), |
|
Point: new PIXI.Point(0, 0), |
|
Name: this.canvasData.selectTemplateData.name, |
|
PropertyInfos: propertyList, |
|
Border: this.canvasData.selectTemplateData.border, |
|
DrawMode: this.canvasData.selectTemplateData.drawMode, |
|
Thickness: this.canvasData.selectTemplateData.thickness, |
|
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding, |
|
GameMode: this.canvasData.gameMode |
|
}; |
|
const polygonIcon = new PolygonIcon(assetData, this); |
|
this.emit('createIcon', polygonIcon); |
|
} |
|
break; |
|
} |
|
this.paintPoints.splice(0, this.paintPoints.length); |
|
this.emit('backgroundScale', this.backgroundImage.scale.x); |
|
} |
|
/** |
|
* 复制 |
|
*/ |
|
public copy(): void { |
|
this.copyData = []; |
|
this.selection.objects.forEach(item => { |
|
const newData = JSON.parse(JSON.stringify(item.assetData)); |
|
this.copyData.push(newData); |
|
}); |
|
} |
|
/** |
|
* 粘贴 |
|
*/ |
|
public paste(companyId: string, buildingId: string, floorId: string): void { |
|
this.copyData.forEach(item => { |
|
item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); |
|
const newData = JSON.parse(JSON.stringify(item)); |
|
newData.Id = ObjectID.default.generate(), |
|
newData.CompanyId = companyId; |
|
newData.BuildingId = buildingId; |
|
newData.FloorId = floorId; |
|
newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); |
|
// if (newData.IsFromBuilding) { |
|
// this.canvasData.originalcompanyBuildingData.data[newData.Id] = newData; |
|
// } else { |
|
this.canvasData.originaleveryStoreyData.data[newData.Id] = newData; |
|
// } |
|
switch (item.InteractiveMode) { |
|
case PaintMode.singlePointIcon: |
|
const singleIcon = new SinglePointIcon(newData, this); |
|
break; |
|
case PaintMode.lineIcon: |
|
const lineIcon = new MultipointIcon(newData, this); |
|
break; |
|
case PaintMode.polygonIcon: |
|
const polygonIcon = new PolygonIcon(newData, this); |
|
break; |
|
} |
|
this.selection.select(this.backgroundImage.getChildByName(newData.Id)); |
|
}); |
|
} |
|
|
|
} |
|
|
|
/** |
|
* 选择器 |
|
*/ |
|
export class Selection { |
|
constructor(private workingArea: WorkingAreaComponent) {} |
|
public objects: any[] = []; |
|
public isMultiselection = false; |
|
/** |
|
* 返回选择器中是否包含对象 |
|
* @param obj 对象 |
|
*/ |
|
public contains(obj: any): boolean { |
|
return this.objects.includes(obj); |
|
} |
|
/** |
|
* 选定对象 |
|
* @param obj 对象 |
|
*/ |
|
public select(obj: any) { |
|
if (!this.contains(obj)) { |
|
this.workingArea.emit('select', obj); |
|
this.objects.push(obj); |
|
} |
|
} |
|
/** |
|
* 取消选定对象 |
|
* @param obj 对象 |
|
*/ |
|
public deselect(obj: any) { |
|
if (this.contains(obj)) { |
|
this.workingArea.emit('deselect', obj); |
|
const idx = this.objects.findIndex(x => x === obj); |
|
this.objects.splice(idx, 1); |
|
} |
|
} |
|
/** |
|
* 选定或取消选定对象 |
|
* @param obj 对象 |
|
*/ |
|
public selectOrDeselect(obj: any) { |
|
if (this.contains(obj)) { |
|
this.deselect(obj); |
|
} else { |
|
this.select(obj); |
|
} |
|
} |
|
/** |
|
* 取消选定所有已选定对象 |
|
*/ |
|
public deselectAll() { |
|
this.objects.forEach(item => { |
|
this.workingArea.emit('deselect', item); |
|
}); |
|
this.objects.splice(0, this.objects.length); |
|
} |
|
/** |
|
* 取消选定所有对象后选定一个对象 |
|
* @param obj 对象 |
|
*/ |
|
public selectOne(obj: any) { |
|
if (this.isMultiselection) { |
|
this.selectOrDeselect(obj); |
|
} else { |
|
this.deselectAll(); |
|
this.select(obj); |
|
} |
|
} |
|
/** |
|
* 选定对象集合中所有对象 |
|
* @param objects 对象集合 |
|
*/ |
|
public selectAll(objects: any[]) { |
|
this.objects.forEach(item => { |
|
this.select(item); |
|
}); |
|
} |
|
} |
|
|
|
|
|
/** |
|
* 车辆类型 |
|
*/ |
|
export enum Type { |
|
水源 = 0, |
|
举高喷射消防车 = 1, |
|
泡沫消防车 = 2, |
|
水罐消防车 = 3, |
|
压缩空气泡沫消防车 = 4 |
|
}
|
|
|