diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..a1481f9 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,15 @@ +{ + // 使用 IntelliSense 了解相关属性。 + // 悬停以查看现有属性的描述。 + // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "pwa-chrome", + "request": "launch", + "name": "Launch Chrome against localhost", + "url": "http://localhost:4200", + "webRoot": "${workspaceFolder}" + } + ] +} \ No newline at end of file diff --git a/src/app/ui/plan-assistance/plan-assistance.component.ts b/src/app/ui/plan-assistance/plan-assistance.component.ts index e8e6fe6..643c99c 100644 --- a/src/app/ui/plan-assistance/plan-assistance.component.ts +++ b/src/app/ui/plan-assistance/plan-assistance.component.ts @@ -23,6 +23,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048cae9d', @@ -50,6 +52,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048cae9e', @@ -77,6 +81,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048cae9f', @@ -104,6 +110,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea0', @@ -131,6 +139,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea1', @@ -158,6 +168,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea2', @@ -185,6 +197,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea3', @@ -212,6 +226,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea4', @@ -239,6 +255,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea5', @@ -266,6 +284,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea6', @@ -293,6 +313,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea7', @@ -320,6 +342,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea8', @@ -347,6 +371,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caea9', @@ -374,6 +400,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeaa', @@ -401,6 +429,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeab', @@ -428,6 +458,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeac', @@ -455,6 +487,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caead', @@ -482,6 +516,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeae', @@ -509,6 +545,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeaf', @@ -536,6 +574,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb0', @@ -563,6 +603,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb1', @@ -590,6 +632,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb2', @@ -617,6 +661,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb3', @@ -644,6 +690,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb4', @@ -671,6 +719,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb5', @@ -698,6 +748,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb6', @@ -725,6 +777,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb7', @@ -752,6 +806,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb8', @@ -779,6 +835,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeb9', @@ -806,6 +864,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeba', @@ -833,6 +893,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caebb', @@ -860,6 +922,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caebc', @@ -887,6 +951,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caebd', @@ -914,6 +980,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caebe', @@ -941,6 +1009,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caebf', @@ -968,6 +1038,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec0', @@ -995,6 +1067,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec1', @@ -1022,6 +1096,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec2', @@ -1049,6 +1125,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec3', @@ -1076,6 +1154,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec4', @@ -1103,6 +1183,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec5', @@ -1130,6 +1212,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec6', @@ -1157,6 +1241,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec7', @@ -1184,6 +1270,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec8', @@ -1211,6 +1299,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caec9', @@ -1238,6 +1328,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caeca', @@ -1265,6 +1357,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caecb', @@ -1292,6 +1386,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caecc', @@ -1319,6 +1415,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caecd', @@ -1346,6 +1444,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048caece', @@ -1375,6 +1475,8 @@ export class PlanAssistanceComponent implements OnInit, AfterViewInit { FillMode: 0, FireElementId: 0, FixedSize: false, + CanConnection: true, + ConnectionObjs: [], Height: 32, Width: 32, Id: '5f67f92238f13cd2048cae9d', diff --git a/src/app/working-area/working-area.component.ts b/src/app/working-area/working-area.component.ts index 79a0531..a09d3ec 100644 --- a/src/app/working-area/working-area.component.ts +++ b/src/app/working-area/working-area.component.ts @@ -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; - } -} diff --git a/src/assets/images/进攻方向.png b/src/assets/images/进攻方向.png new file mode 100644 index 0000000..914c848 Binary files /dev/null and b/src/assets/images/进攻方向.png differ