import { WorkingAreaComponent } from '../working-area.component'; import * as ObjectID from 'bson-objectid'; import { GameMode } from './gameMode'; import { Pipeline } from './pipeline'; import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; /** * 单点图标 */ export class SinglePointIcon extends AxShape { 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, }); text = new PIXI.Text(this.assetData.Name + '\r\n' + this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); /** * 选中圆点 */ selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); image = PIXI.Sprite.from(this.assetData.ImageUrl); selectionBox = new PIXI.Graphics(); up: PIXI.Sprite; down: PIXI.Sprite; left: PIXI.Sprite; right: PIXI.Sprite; upLeft: PIXI.Sprite; upRight: PIXI.Sprite; downLeft: PIXI.Sprite; downRight: PIXI.Sprite; 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; // console.log(this.getBounds()); 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); this.paintingPipeline(this.x, this.y); // 如果链接对象不为空,禁止移动 if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { 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) { // 如果拖动过程中发现父对象不是背景图 if (this.parent !== this.workingArea.backgroundImage) { this.setParent(this.workingArea.backgroundImage); if (this.assetData.FixedSize) { const scale = 1 / this.workingArea.backgroundImage.scale.x; this.scale.set(scale); } } 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 => { // if (this.assetData.CanConnect) { // this.setSelectionBox(true, this.image); // } }) .on('mouseout', event => { // if (this.assetData.CanConnect) { // this.setSelectionBox(false); // } }); this.text.x = this.image.x; this.text.y = this.image.y - this.image.height / 2; this.text.anchor.set(0.5, 1); if (this.assetData.GameMode === 2) { this.text.visible = false; } this.addChild(this.text); this.addChild(this.image); this.addChild(this.selectionBox); if (this.assetData.CanConnect) { // up this.up = new PIXI.Sprite(this.selectedPointTexture); this.up.anchor.set(0.5); this.up.x = this.image.x; this.up.y = this.image.y - (this.image.height / 2); this.addChild(this.up); this.up.interactive = true; this.up .on('mousedown', event => { event.stopPropagation(); const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y)); const pt2 = this.workingArea.backgroundImage.toLocal(pt); this.paintingPipeline(pt2.x, pt2.y); }) .on('mouseover', event => { this.setSelectionBox(true, this.up); }) .on('mouseout', event => { this.setSelectionBox(false); }); // down this.down = new PIXI.Sprite(this.selectedPointTexture); this.down.anchor.set(0.5); this.down.x = this.image.x; this.down.y = this.image.y + (this.image.height / 2); this.addChild(this.down); this.down.interactive = true; this.down .on('mouseover', event => { this.setSelectionBox(true, this.down); }) .on('mouseout', event => { this.setSelectionBox(false); }); // left this.left = new PIXI.Sprite(this.selectedPointTexture); this.left.anchor.set(0.5); this.left.x = this.image.x - (this.image.width / 2); this.left.y = this.image.y; this.addChild(this.left); this.left.interactive = true; this.left .on('mouseover', event => { this.setSelectionBox(true, this.left); }) .on('mouseout', event => { this.setSelectionBox(false); }); // right this.right = new PIXI.Sprite(this.selectedPointTexture); this.right.anchor.set(0.5); this.right.x = this.image.x + (this.image.width / 2); this.right.y = this.image.y; this.addChild(this.right); this.right.interactive = true; this.right .on('mouseover', event => { this.setSelectionBox(true, this.right); }) .on('mouseout', event => { this.setSelectionBox(false); }); // up-left this.upLeft = new PIXI.Sprite(this.selectedPointTexture); this.upLeft.anchor.set(0.5); this.upLeft.x = this.image.x - (this.image.width / 2); this.upLeft.y = this.image.y - (this.image.height / 2); this.addChild(this.upLeft); this.upLeft.interactive = true; this.upLeft .on('mouseover', event => { this.setSelectionBox(true, this.upLeft); }) .on('mouseout', event => { this.setSelectionBox(false); }); // up-right this.upRight = new PIXI.Sprite(this.selectedPointTexture); this.upRight.anchor.set(0.5); this.upRight.x = this.image.x + (this.image.width / 2); this.upRight.y = this.image.y - (this.image.height / 2); this.addChild(this.upRight); this.upRight.interactive = true; this.upRight .on('mouseover', event => { this.setSelectionBox(true, this.upRight); }) .on('mouseout', event => { this.setSelectionBox(false); }); // down-left this.downLeft = new PIXI.Sprite(this.selectedPointTexture); this.downLeft.anchor.set(0.5); this.downLeft.x = this.image.x - (this.image.width / 2); this.downLeft.y = this.image.y + (this.image.height / 2); this.addChild(this.downLeft); this.downLeft.interactive = true; this.downLeft .on('mouseover', event => { this.setSelectionBox(true, this.downLeft); }) .on('mouseout', event => { this.setSelectionBox(false); }); // down-right this.downRight = new PIXI.Sprite(this.selectedPointTexture); this.downRight.anchor.set(0.5); this.downRight.x = this.image.x + (this.image.width / 2); this.downRight.y = this.image.y + (this.image.height / 2); this.addChild(this.downRight); this.downRight.interactive = true; this.downRight .on('mouseover', event => { this.setSelectionBox(true, this.downRight); }) .on('mouseout', event => { this.setSelectionBox(false); }); this.showConnectionPoint(false); } } // 设置选择框 public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) { if (b) { this.selectionBox.lineStyle(2, 0x00EB00, 1); this.selectionBox.position = sprite.position; this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height); // const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2); // const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2); // const pw = new PIXI.Point(p0.x + sprite.width, p0.y); // const ph = new PIXI.Point(p0.x, p0.y + sprite.height); // this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff); // this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff); // this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff); // this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff); } else { this.selectionBox.clear(); } } // 设置名称 public setNameVisible(value: boolean, mode: GameMode) { if (this.assetData.GameMode === mode) { this.text.visible = value; } } // 显示连接点 public showConnectionPoint(b: boolean) { this.up.visible = b; this.down.visible = b; this.left.visible = b; this.right.visible = b; this.upLeft.visible = b; this.downLeft.visible = b; this.upRight.visible = b; this.downRight.visible = b; } paintingPipeline(x: number, y: number) { if (this.assetData.CanConnect) { if (this.workingArea.getPaintMode() === 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(x, y)); // const tempData = { // Id: ObjectID.default.generate(), // MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)), // Point: new PIXI.Point(0, 0), // Name: '管线', // LinkedObjects: new Array(), // }; const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos)); const list = []; json.forEach(element => { const property = new PropertyInfo(element); list.push(property); }); const tempData = { TemplateId: this.workingArea.canvasData.selectTemplateData.id, CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect, Pipelines: new Array(), FloorId: this.workingArea.canvasData.selectStorey.id, Angle: this.workingArea.canvasData.selectTemplateData.angle, Color: this.workingArea.canvasData.selectTemplateData.color, Enabled: this.workingArea.canvasData.selectTemplateData.enabled, FillMode: this.workingArea.canvasData.selectTemplateData.fillMode, FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId, FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize, Height : 32, Width : 32, Id: ObjectID.default.generate(), ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl, InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode, MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)), Point: new PIXI.Point(0, 0), Name : this.workingArea.canvasData.selectTemplateData.name, PropertyInfos: list, Border : this.workingArea.canvasData.selectTemplateData.border, DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode, Thickness : this.workingArea.canvasData.selectTemplateData.thickness, IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding, GameMode: this.workingArea.canvasData.gameMode, LinkedObjects: new Array(), }; this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this); // this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id); this.workingArea.emit('createIcon', this.workingArea.paintingPipeline); } 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(x, y)); this.workingArea.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.workingArea.paintPoints)); // this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this); // this.assetData.Pipelines.push(this.workingArea.paintingPipeline); this.workingArea.paintingPipeline.refresh(); this.workingArea.initPipelineData(); } } } } // 刷新 public refresh() { if (this.assetData.CanConnect) { } 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; } }