|
|
|
|
@ -71,6 +71,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 绘制点集合 |
|
|
|
|
*/ |
|
|
|
|
public paintPoints: PIXI.Point[] = []; |
|
|
|
|
/** |
|
|
|
|
* 绘制中的管线 |
|
|
|
|
*/ |
|
|
|
|
public paintingPipeline: Pipeline = null; |
|
|
|
|
/** |
|
|
|
|
* 绘制中的箭头 |
|
|
|
|
*/ |
|
|
|
|
public paintingArrows: Arrows = null; |
|
|
|
|
/** |
|
|
|
|
* 绘制中的多点图标 |
|
|
|
|
*/ |
|
|
|
|
@ -148,11 +156,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
// 删除 选中的数据
|
|
|
|
|
if (item.assetData.IsFromBuilding) { |
|
|
|
|
// console.log(this.canvasData.originaleveryStoreyData.data[item.assetData.Id]);
|
|
|
|
|
delete this.canvasData.originalcompanyBuildingData.data[item.assetData.Id]; |
|
|
|
|
delete this.canvasData.originalcompanyBuildingData?.data[item.assetData.Id]; |
|
|
|
|
// console.log(this.canvasData.originalcompanyBuildingData.data[item.assetData.Id]);
|
|
|
|
|
} else { |
|
|
|
|
// console.log(this.canvasData.originaleveryStoreyData.data[item.assetData.Id]);
|
|
|
|
|
delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id]; |
|
|
|
|
delete this.canvasData.originaleveryStoreyData?.data[item.assetData.Id]; |
|
|
|
|
// console.log(this.canvasData.originaleveryStoreyData.data[item.assetData.Id]);
|
|
|
|
|
} |
|
|
|
|
// console.log(this.backgroundImage.getChildByName(item.assetData.Id));
|
|
|
|
|
@ -297,6 +305,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.rectToolGraphics.endFill(); |
|
|
|
|
this.rectToolGraphics.closePath(); |
|
|
|
|
} |
|
|
|
|
if (this.paintingArrows !== null) { |
|
|
|
|
this.paintingArrows.data.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y); |
|
|
|
|
this.paintingArrows.refresh(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
@ -407,7 +419,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
const single = new SinglePointIcon(element, this); |
|
|
|
|
}); |
|
|
|
|
this.setNameVisible(false, GameMode.BasicInformation); |
|
|
|
|
this.allowEdit = true; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const tempData = { |
|
|
|
|
@ -419,6 +430,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
FillMode: 0, |
|
|
|
|
FireElementId: 0, |
|
|
|
|
FixedSize: false, |
|
|
|
|
CanConnection: true, |
|
|
|
|
ConnectionObjs: [], |
|
|
|
|
Height: 45, |
|
|
|
|
Width: 45, |
|
|
|
|
Id: '5f67f92238f13cd2048cae9d', |
|
|
|
|
@ -463,6 +476,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
Enabled: true, |
|
|
|
|
FillMode: 0, |
|
|
|
|
FireElementId: 0, |
|
|
|
|
CanConnection: true, |
|
|
|
|
ConnectionObjs: [], |
|
|
|
|
FixedSize: false, |
|
|
|
|
Height: 45, |
|
|
|
|
Width: 45, |
|
|
|
|
@ -500,9 +515,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
tempCar2.setParent(this.app.stage); |
|
|
|
|
tempCar2.position.set(25, 50); |
|
|
|
|
|
|
|
|
|
this.cancelPaint(); |
|
|
|
|
this.paintMode = PaintMode.connection; |
|
|
|
|
this.previewSinglePointIcon.texture = PIXI.Texture.from('./assets/images/水罐消防车.png'); |
|
|
|
|
// 开始绘制管线
|
|
|
|
|
// this.beginPaintPipeline();
|
|
|
|
|
this.beginPaintingArrows(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
@ -712,8 +727,29 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
// }
|
|
|
|
|
// this.paintingIcon = new PolygonIcon(this.paintPoints, this);
|
|
|
|
|
break; |
|
|
|
|
case PaintMode.connection: |
|
|
|
|
|
|
|
|
|
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 = { |
|
|
|
|
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; |
|
|
|
|
} |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { |
|
|
|
|
@ -899,6 +935,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl); |
|
|
|
|
this.circleShadow.visible = true; |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 开始绘制管线 |
|
|
|
|
*/ |
|
|
|
|
private beginPaintPipeline(): void { |
|
|
|
|
this.paintMode = PaintMode.Pipeline; |
|
|
|
|
} |
|
|
|
|
public paintingPipelineFinish(): void { |
|
|
|
|
if (this.paintMode === PaintMode.Pipeline) { |
|
|
|
|
this.paintMode = PaintMode.endPaint; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
public beginPaintingArrows(): void { |
|
|
|
|
this.paintMode = PaintMode.Arrows; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 取消绘画 |
|
|
|
|
*/ |
|
|
|
|
@ -1041,9 +1093,9 @@ enum PaintMode {
|
|
|
|
|
singlePointIcon, |
|
|
|
|
lineIcon, |
|
|
|
|
polygonIcon, |
|
|
|
|
beginPainting, |
|
|
|
|
endPaint, |
|
|
|
|
connection |
|
|
|
|
Pipeline, |
|
|
|
|
Arrows |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 单点图标 |
|
|
|
|
@ -1071,7 +1123,11 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
private image = PIXI.Sprite.from(this.assetData.ImageUrl); |
|
|
|
|
// 是否可以被链接
|
|
|
|
|
canConnection: boolean; |
|
|
|
|
canConnection = false; |
|
|
|
|
// 链接对象
|
|
|
|
|
connectionObjs: any[] = []; |
|
|
|
|
// 链接的管线
|
|
|
|
|
pipelines: any[] = []; |
|
|
|
|
|
|
|
|
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
|
|
|
|
super(); |
|
|
|
|
@ -1080,6 +1136,8 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
this.y = this.assetData.Point.y; |
|
|
|
|
this.name = this.assetData.Id; |
|
|
|
|
|
|
|
|
|
this.canConnection = this.assetData.CanConnection === undefined ? false : this.assetData.CanConnection; |
|
|
|
|
|
|
|
|
|
this.image.angle = this.assetData.Angle; |
|
|
|
|
|
|
|
|
|
this.image.x = 0; |
|
|
|
|
@ -1095,7 +1153,33 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
console.log(this.assetData); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
if (this.workingArea.allowEdit || this.assetData.GameMode === 2) { |
|
|
|
|
if (this.canConnection && this.parent === this.workingArea.backgroundImage) { |
|
|
|
|
if (this.workingArea.paintMode === PaintMode.Pipeline) { |
|
|
|
|
if (this.workingArea.paintingPipeline === null) { |
|
|
|
|
this.workingArea.previewLineSegment.visible = true; |
|
|
|
|
this.workingArea.currentClickPoint.position = |
|
|
|
|
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
|
|
|
|
this.workingArea.paintPoints.push(new PIXI.Point(this.position.x, this.position.y)); |
|
|
|
|
const tempData = { |
|
|
|
|
Id: ObjectID.default.generate(), |
|
|
|
|
MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)), |
|
|
|
|
Point: new PIXI.Point(0, 0), |
|
|
|
|
Name: '管线', |
|
|
|
|
}; |
|
|
|
|
this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); |
|
|
|
|
} else { |
|
|
|
|
this.workingArea.previewLineSegment.visible = false; |
|
|
|
|
this.workingArea.currentClickPoint.position = |
|
|
|
|
new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y); |
|
|
|
|
this.workingArea.paintPoints.push(new PIXI.Point(this.position.x, this.position.y)); |
|
|
|
|
this.workingArea.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.workingArea.paintPoints)); |
|
|
|
|
this.workingArea.paintingPipeline.refresh(); |
|
|
|
|
this.workingArea.paintingPipelineFinish(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 如果链接对象不为空,禁止移动
|
|
|
|
|
if ((this.workingArea.allowEdit || this.assetData.GameMode === 2) && this.connectionObjs.length === 0) { |
|
|
|
|
event.currentTarget.parent.data = event.data; |
|
|
|
|
event.currentTarget.parent.alpha = 0.5; |
|
|
|
|
event.currentTarget.parent.dragging = true; |
|
|
|
|
@ -1653,11 +1737,91 @@ export class PolygonIcon extends PIXI.Container {
|
|
|
|
|
export class Car extends SinglePointIcon { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
export class Conection extends PIXI.Container { |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 管线 |
|
|
|
|
*/ |
|
|
|
|
export class Pipeline extends PIXI.Graphics { |
|
|
|
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
|
|
|
|
super(); |
|
|
|
|
this.name = this.assetData.Id; |
|
|
|
|
this.x = this.assetData.Point.x; |
|
|
|
|
this.y = this.assetData.Point.y; |
|
|
|
|
this.workingArea.backgroundImage.addChild(this); |
|
|
|
|
// 画线图标
|
|
|
|
|
this.refresh(); |
|
|
|
|
this.interactive = true; |
|
|
|
|
this.on('mousedown', event => { |
|
|
|
|
console.log(this.assetData); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 刷新 |
|
|
|
|
*/ |
|
|
|
|
public refresh() { |
|
|
|
|
this.clear(); |
|
|
|
|
this.lineStyle(5, 0x0000ff, 1); |
|
|
|
|
for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) { |
|
|
|
|
const pointA = this.assetData.MultiPoint[i]; |
|
|
|
|
if (i === 0) { |
|
|
|
|
this.moveTo(pointA.x, pointA.y); |
|
|
|
|
} else { |
|
|
|
|
this.lineTo(pointA.x, pointA.y); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
if (this.assetData.MultiPoint.length >= 2) { |
|
|
|
|
const pointA = this.assetData.MultiPoint[0]; |
|
|
|
|
const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1]; |
|
|
|
|
// const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (5 / Math.PI);
|
|
|
|
|
this.beginFill(0x0000ff); |
|
|
|
|
// this.drawStar(pointB.x, pointB.y, 3, 5, 0, angle);
|
|
|
|
|
this.drawCircle(pointA.x, pointA.y, 5); |
|
|
|
|
this.drawCircle(pointB.x, pointB.y, 5); |
|
|
|
|
this.endFill(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 箭头 |
|
|
|
|
* 创建一个只有2个点组成的箭头 |
|
|
|
|
*/ |
|
|
|
|
export class Arrows extends PIXI.Container { |
|
|
|
|
public data: any; |
|
|
|
|
public icon: PIXI.TilingSprite; |
|
|
|
|
public ready = false; |
|
|
|
|
constructor(assetData: any, private workingArea: WorkingAreaComponent) { |
|
|
|
|
super(); |
|
|
|
|
this.workingArea.backgroundImage.addChild(this); |
|
|
|
|
this.data = assetData; |
|
|
|
|
// 画线图标
|
|
|
|
|
this.icon = new PIXI.TilingSprite(PIXI.Texture.from(this.data.source), 0, 68); |
|
|
|
|
this.addChild(this.icon); |
|
|
|
|
this.refresh(); |
|
|
|
|
this.interactive = true; |
|
|
|
|
this.on('mousedown', event => { |
|
|
|
|
if (!this.ready) { return; } |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 刷新 |
|
|
|
|
*/ |
|
|
|
|
public refresh() { |
|
|
|
|
const angle = Math.atan2((this.data.pointB.y - this.data.pointA.y), (this.data.pointB.x - this.data.pointA.x)) * (180 / Math.PI); |
|
|
|
|
const a = this.data.pointB.x - this.data.pointA.x; |
|
|
|
|
const b = this.data.pointB.y - this.data.pointA.y; |
|
|
|
|
const distance = Math.sqrt(a * a + b * b); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.icon.width = distance; |
|
|
|
|
this.icon.height = 68; |
|
|
|
|
this.icon.anchor.set(0, 0.5); |
|
|
|
|
this.icon.x = this.data.pointA.x; |
|
|
|
|
this.icon.y = this.data.pointA.y; |
|
|
|
|
this.icon.angle = angle; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 选择器 |
|
|
|
|
*/ |
|
|
|
|
@ -1798,117 +1962,3 @@ export class PropertyInfo {
|
|
|
|
|
*/ |
|
|
|
|
public PropertyValue: string; |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* demo图标 |
|
|
|
|
*/ |
|
|
|
|
export class DemoIcon extends PIXI.Container { |
|
|
|
|
style = new PIXI.TextStyle({ |
|
|
|
|
fontFamily: 'Arial', |
|
|
|
|
fontSize: 18, |
|
|
|
|
fontStyle: 'normal', |
|
|
|
|
fontWeight: 'bold', |
|
|
|
|
fill: ['#000000'], |
|
|
|
|
stroke: '#ffffff', |
|
|
|
|
strokeThickness: 3, |
|
|
|
|
dropShadow: true, |
|
|
|
|
dropShadowColor: '#000000', |
|
|
|
|
dropShadowBlur: 3, |
|
|
|
|
dropShadowAngle: Math.PI / 6, |
|
|
|
|
dropShadowDistance: 1, |
|
|
|
|
wordWrap: false, |
|
|
|
|
wordWrapWidth: 100, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
private text = new PIXI.Text(this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
private image = PIXI.Sprite.from(this.assetData.ImageUrl); |
|
|
|
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
|
|
|
|
super(); |
|
|
|
|
this.workingArea.backgroundImage.addChild(this); |
|
|
|
|
this.x = this.assetData.Point.x; |
|
|
|
|
this.y = this.assetData.Point.y; |
|
|
|
|
this.name = this.assetData.Id; |
|
|
|
|
|
|
|
|
|
this.image.angle = this.assetData.Angle; |
|
|
|
|
|
|
|
|
|
this.image.x = 0; |
|
|
|
|
this.image.y = 0; |
|
|
|
|
this.image.width = this.assetData.Width; |
|
|
|
|
this.image.height = this.assetData.Height; |
|
|
|
|
|
|
|
|
|
this.image.alpha = 1; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.interactive = true; |
|
|
|
|
this.image |
|
|
|
|
.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
if (this.workingArea.allowEdit) { |
|
|
|
|
event.currentTarget.parent.data = event.data; |
|
|
|
|
event.currentTarget.parent.alpha = 0.5; |
|
|
|
|
event.currentTarget.parent.dragging = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseup', event => { |
|
|
|
|
if (event.currentTarget.parent.dragging) { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseupoutside', event => { |
|
|
|
|
if (event.currentTarget.parent.dragging) { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mousemove', event => { |
|
|
|
|
if (event.currentTarget.parent.dragging) { |
|
|
|
|
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent); |
|
|
|
|
event.currentTarget.parent.x = newPosition.x; |
|
|
|
|
event.currentTarget.parent.y = newPosition.y; |
|
|
|
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
|
|
|
this.workingArea.canvasData.isChange = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
.on('mouseover', event => { |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.workingArea.on('backgroundScale', data => { |
|
|
|
|
if (this.assetData.FixedSize) { |
|
|
|
|
const scale = 1 / data; |
|
|
|
|
this.scale.set(scale); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
this.text.anchor.set(0.5, 1); |
|
|
|
|
|
|
|
|
|
this.addChild(this.text); |
|
|
|
|
this.addChild(this.image); |
|
|
|
|
} |
|
|
|
|
// 设置名称
|
|
|
|
|
public setNameVisible(value: boolean, mode: GameMode) { |
|
|
|
|
if (this.assetData.GameMode === mode) { |
|
|
|
|
this.text.visible = value; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 刷新
|
|
|
|
|
public refresh() { |
|
|
|
|
this.image.width = this.assetData.Width; |
|
|
|
|
this.image.height = this.assetData.Height; |
|
|
|
|
this.image.angle = this.assetData.Angle; |
|
|
|
|
this.text.text = this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
