|
|
|
|
@ -4,6 +4,7 @@ import { GameMode } from './gameMode';
|
|
|
|
|
import { Pipeline } from './pipeline'; |
|
|
|
|
import { PaintMode } from './paintModel'; |
|
|
|
|
import * as PIXI from 'pixi.js'; |
|
|
|
|
import { throwMatDialogContentAlreadyAttachedError } from '@angular/material/dialog'; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 单点图标 |
|
|
|
|
@ -29,7 +30,17 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
public text = new PIXI.Text(this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 选中圆点 |
|
|
|
|
*/ |
|
|
|
|
public selectedPointTexture = PIXI.Texture.from('assets/images/handle-main.png'); |
|
|
|
|
private image = PIXI.Sprite.from(this.assetData.ImageUrl); |
|
|
|
|
public graphics = new PIXI.Graphics(); |
|
|
|
|
public connectionPoint = new PIXI.Graphics(); |
|
|
|
|
|
|
|
|
|
// 显示连接点
|
|
|
|
|
public showConnectionPoint = false; |
|
|
|
|
|
|
|
|
|
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
|
|
|
|
super(); |
|
|
|
|
@ -50,7 +61,7 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
this.image.interactive = true; |
|
|
|
|
this.image |
|
|
|
|
.on('mousedown', event => { |
|
|
|
|
console.log(this.workingArea.canvasData.selectPanelPoint.Data); |
|
|
|
|
console.log(this.workingArea.canvasData.selectPanelPoint); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
if (this.assetData.CanConnection && this.parent === this.workingArea.backgroundImage) { |
|
|
|
|
@ -126,16 +137,13 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
.on('mouseover', event => { |
|
|
|
|
|
|
|
|
|
// this.connectionPoint.visible = true;
|
|
|
|
|
this.setSelectionBox(true); |
|
|
|
|
}) |
|
|
|
|
.on('mouseout', event => { |
|
|
|
|
// this.connectionPoint.visible = false;
|
|
|
|
|
this.setSelectionBox(false); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 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); |
|
|
|
|
@ -144,8 +152,83 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
this.text.visible = false; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
this.connectionPoint.beginFill(); |
|
|
|
|
this.connectionPoint.drawCircle(0, 0, 5); |
|
|
|
|
this.connectionPoint.endFill(); |
|
|
|
|
this.connectionPoint.visible = true; |
|
|
|
|
this.connectionPoint.interactive = true; |
|
|
|
|
this.connectionPoint |
|
|
|
|
.on('mouseover', event => { |
|
|
|
|
console.log('b'); |
|
|
|
|
this.graphics.lineStyle(2, 0x00EB00, 1); |
|
|
|
|
this.graphics.drawRect(- this.connectionPoint.width / 2, - this.connectionPoint.width / 2, |
|
|
|
|
this.connectionPoint.width, this.connectionPoint.width); |
|
|
|
|
}) |
|
|
|
|
.on('mouseout', event => { |
|
|
|
|
this.graphics.clear(); |
|
|
|
|
}); |
|
|
|
|
this.addChild(this.text); |
|
|
|
|
this.addChild(this.image); |
|
|
|
|
this.addChild(this.graphics); |
|
|
|
|
// this.addChild(this.connectionPoint);
|
|
|
|
|
|
|
|
|
|
// // up
|
|
|
|
|
// const up = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// up.anchor.set(0.5);
|
|
|
|
|
// up.x = this.image.x;
|
|
|
|
|
// up.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(up);
|
|
|
|
|
// // up-left
|
|
|
|
|
// const upLeft = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// upLeft.anchor.set(0.5);
|
|
|
|
|
// upLeft.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// upLeft.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(upLeft);
|
|
|
|
|
// // up-right
|
|
|
|
|
// const upRight = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// upRight.anchor.set(0.5);
|
|
|
|
|
// upRight.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// upRight.y = this.image.y - (this.image.height / 2);
|
|
|
|
|
// this.addChild(upRight);
|
|
|
|
|
// // down
|
|
|
|
|
// const down = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// down.anchor.set(0.5);
|
|
|
|
|
// down.x = this.image.x;
|
|
|
|
|
// down.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(down);
|
|
|
|
|
// // down-left
|
|
|
|
|
// const downLeft = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// downLeft.anchor.set(0.5);
|
|
|
|
|
// downLeft.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// downLeft.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(downLeft);
|
|
|
|
|
// // down-right
|
|
|
|
|
// const downRight = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// downRight.anchor.set(0.5);
|
|
|
|
|
// downRight.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// downRight.y = this.image.y + (this.image.height / 2);
|
|
|
|
|
// this.addChild(downRight);
|
|
|
|
|
// // left
|
|
|
|
|
// const left = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// left.anchor.set(0.5);
|
|
|
|
|
// left.x = this.image.x - (this.image.width / 2);
|
|
|
|
|
// left.y = this.image.y;
|
|
|
|
|
// this.addChild(left);
|
|
|
|
|
// // right
|
|
|
|
|
// const right = new PIXI.Sprite(this.selectedPointTexture);
|
|
|
|
|
// right.anchor.set(0.5);
|
|
|
|
|
// right.x = this.image.x + (this.image.width / 2);
|
|
|
|
|
// right.y = this.image.y;
|
|
|
|
|
// this.addChild(right);
|
|
|
|
|
} |
|
|
|
|
// 设置选择框
|
|
|
|
|
public setSelectionBox(b: boolean) { |
|
|
|
|
if (b) { |
|
|
|
|
this.graphics.lineStyle(2, 0x00EB00, 1); |
|
|
|
|
this.graphics.drawRect(- this.image.width / 2, - this.image.height / 2, this.image.width, this.image.height); |
|
|
|
|
} else { |
|
|
|
|
this.graphics.clear(); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 设置名称
|
|
|
|
|
public setNameVisible(value: boolean, mode: GameMode) { |
|
|
|
|
|
