import { WorkingAreaComponent } from '../working-area.component'; import * as ObjectID from 'bson-objectid'; import { GameMode } from './gameMode'; import { PaintMode } from './paintModel'; import * as PIXI from 'pixi.js'; import { PropertyInfo } from './PropertyInfo'; import { AxShape } from './axShape'; import { Sprite } from 'pixi.js'; import { AxArrowConnector } from './axArrowConnector'; /** * 安信图片形状 * AxImageShape */ export class AxImageShape 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); /** * 选中圆点 */ image: PIXI.Sprite; selectionBox = new PIXI.Graphics(); connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); connectPoint: Sprite; // 可移动的 // 可选中的 // 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(assetData: any, workingArea: WorkingAreaComponent) { super(assetData, workingArea); this.x = this.assetData.Point.x; this.y = this.assetData.Point.y; this.name = this.assetData.Id; this.image = PIXI.Sprite.from(this.assetData.ImageUrl); 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.buttonMode = 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 => { // event.stopPropagation(); // if (this.workingArea.previewImage !== null // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { // this.workingArea.previewImage.visible = false; // } // // if (this.assetData.CanConnect) { // // this.setSelectionBox(true, this.image); // // } // }) // .on('mouseout', event => { // event.stopPropagation(); // if (this.workingArea.previewImage !== null // && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) { // this.workingArea.previewImage.visible = true; // } // // 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) { // connectPoint this.connectPoint = new PIXI.Sprite(this.connectPointTexture); this.connectPoint.anchor.set(0.5); this.connectPoint.x = this.image.x; this.connectPoint.y = this.image.y; this.addChild(this.connectPoint); this.connectPoint.interactive = true; this.connectPoint .on('mousedown', event => { event.stopPropagation(); this.paintingPipeline(this.x, this.y); }) .on('mouseover', event => { this.setSelectionBox(true, this.connectPoint); }) .on('mouseout', event => { this.setSelectionBox(false); }); // // 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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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('mousedown', event => { // event.stopPropagation(); // const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y)); // const pt2 = this.workingArea.backgroundImage.toLocal(pt); // this.paintingPipeline(pt2.x, pt2.y); // }) // .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.connectPoint.visible = b; // 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.paintingShape === 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 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.assetData.Id), }; this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea,false,true); this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); this.workingArea.emit('createIcon', this.workingArea.paintingShape); } 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.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.workingArea.paintPoints)); this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id); this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id); this.workingArea.paintingShape.redraw(); 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; } }