18 changed files with 1001 additions and 839 deletions
@ -0,0 +1,14 @@
|
||||
<div> |
||||
<div style="max-height: 500px;overflow-x: hidden;overflow-y: auto;margin-bottom: 25px;width: 330px;padding-right: 10px;"> |
||||
<nz-tree #nzTreeComponent [nzData]="treeData" nzCheckable nzMultiple [nzTreeTemplate]="nzTreeTemplate"></nz-tree> |
||||
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||
<div id="terrNodePublic"> |
||||
<label title="{{node.title}}" class="overflowText textNode">{{node.title}}</label> |
||||
</div> |
||||
</ng-template> |
||||
</div> |
||||
<div style="text-align: center;"> |
||||
<button mat-stroked-button style="margin-right: 15px;border: none;background: #07CDCF;color: #fff;" (click)='submit()'>确定</button> |
||||
<button mat-stroked-button style="margin-left: 15px;border: none;background: #dfe0e0;" mat-dialog-close>取消</button> |
||||
</div> |
||||
</div> |
||||
@ -1,24 +1,443 @@
|
||||
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'; |
||||
import { Sprite } from 'pixi.js'; |
||||
|
||||
/** |
||||
* 安信形状 |
||||
* 安信图片形状 |
||||
* AxImageShape |
||||
*/ |
||||
export class AxImageShape extends PIXI.Container { |
||||
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; |
||||
// 可移动的
|
||||
|
||||
constructor() { |
||||
super(); |
||||
// 可选中的
|
||||
|
||||
} |
||||
// 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 => {
|
||||
|
||||
paintVertexShape(rect: PIXI.Rectangle) { |
||||
// })
|
||||
// .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); |
||||
|
||||
} |
||||
paintBackground(rect: PIXI.Rectangle) { } |
||||
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);
|
||||
// });
|
||||
|
||||
paintForeground(rect: PIXI.Rectangle) { } |
||||
// // 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);
|
||||
// });
|
||||
|
||||
paintEdgeShape(pts: Array<PIXI.Point>) { } |
||||
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.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 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.paintingPipeline = new Pipeline(tempData, this.workingArea); |
||||
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.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.assetData.Id); |
||||
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id); |
||||
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; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,27 @@
|
||||
import { Sprite, Texture } from 'pixi.js'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import { AxShape } from './axShape'; |
||||
|
||||
export class AxPreviewImageShape extends AxShape { |
||||
image: Sprite = null; |
||||
/** |
||||
* |
||||
*/ |
||||
constructor(workingArea: WorkingAreaComponent) { |
||||
super(null, workingArea); |
||||
this.image = new Sprite(); |
||||
this.image.width = 32; |
||||
this.image.height = 32; |
||||
this.image.anchor.set(0.5); |
||||
this.interactive = false; |
||||
this.scale.set(1 / this.workingArea.backgroundImage.scale.x); |
||||
this.addChild(this.image); |
||||
} |
||||
/** |
||||
* 重新设置图片地址 |
||||
* @param url 图片路径 |
||||
*/ |
||||
setImageUrl(url: string) { |
||||
this.image.texture = Texture.from(url); |
||||
} |
||||
} |
||||
@ -1,56 +1,76 @@
|
||||
import { Constructor } from '@angular/material/core/common-behaviors/constructor'; |
||||
import * as PIXI from 'pixi.js'; |
||||
// import { Point, Rectangle, Graphics } from 'pixi.js';
|
||||
import { Point, Rectangle, Graphics, Container } from 'pixi.js'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
|
||||
/** |
||||
* 安信形状 |
||||
*/ |
||||
export class AxShape extends PIXI.Container { |
||||
export class AxShape extends Container { |
||||
assetData: any; |
||||
workingArea: WorkingAreaComponent; |
||||
// 可以被移动的
|
||||
moveable = true; |
||||
// 可以被选中的
|
||||
selectable = true; |
||||
|
||||
points: Array<PIXI.Point> = []; |
||||
title: string; |
||||
titleVisible: boolean; |
||||
g: PIXI.Graphics = new PIXI.Graphics(); |
||||
|
||||
constructor() { |
||||
constructor(assetData: any, workingArea: WorkingAreaComponent) { |
||||
super(); |
||||
this.addChild(this.g); |
||||
// this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000);
|
||||
} |
||||
// /**
|
||||
// * 绘制虚线
|
||||
// * @param g
|
||||
// * @param p0
|
||||
// * @param pe
|
||||
// * @param color
|
||||
// * @param width
|
||||
// * @param dashLen
|
||||
// */
|
||||
// drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) {
|
||||
// g.lineStyle(width, color);
|
||||
// const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2));
|
||||
// // tslint:disable-next-line: no-bitwise
|
||||
// const num = ~~(len / dashLen);
|
||||
// for (let i = 0; i < num; i++) {
|
||||
// const x = p0.x + (pe.x - p0.x) / num * i;
|
||||
// const y = p0.y + (pe.y - p0.y) / num * i;
|
||||
// // tslint:disable-next-line: no-bitwise
|
||||
// i & 1 ? g.lineTo(x, y) : g.moveTo(x, y);
|
||||
// }
|
||||
// }
|
||||
this.assetData = assetData; |
||||
this.workingArea = workingArea; |
||||
this.workingArea.backgroundImage.addChild(this); |
||||
this.interactive = true; |
||||
this.buttonMode = true; |
||||
this.on('mousedown', event => { |
||||
console.log(this.assetData); |
||||
event.stopPropagation(); |
||||
if (this.selectable) { |
||||
this.workingArea.selection.selectOne(this); |
||||
} |
||||
if (this.moveable) { |
||||
event.currentTarget.data = event.data; |
||||
event.currentTarget.alpha = 0.5; |
||||
event.currentTarget.dragging = true; |
||||
|
||||
paintVertexShape(rect: PIXI.Rectangle) { |
||||
// this.paintBackground(c, x, y, w, h);
|
||||
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); |
||||
event.currentTarget.dragPoint.x -= event.currentTarget.x; |
||||
event.currentTarget.dragPoint.y -= event.currentTarget.y; |
||||
} |
||||
}) |
||||
.on('mouseup', event => { |
||||
if (event.currentTarget.dragging) { |
||||
event.currentTarget.alpha = 1; |
||||
event.currentTarget.dragging = false; |
||||
event.currentTarget.data = null; |
||||
} |
||||
}) |
||||
.on('mouseupoutside', event => { |
||||
if (event.currentTarget.dragging) { |
||||
event.currentTarget.alpha = 1; |
||||
event.currentTarget.dragging = false; |
||||
event.currentTarget.data = null; |
||||
} |
||||
}) |
||||
.on('mousemove', event => { |
||||
if (event.currentTarget.dragging) { |
||||
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); |
||||
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; |
||||
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; |
||||
this.assetData.Point = new PIXI.Point(this.x, this.y); |
||||
this.workingArea.canvasData.isChange = true; |
||||
} |
||||
}) |
||||
.on('rightclick', event => { |
||||
|
||||
// if (!this.outline || this.style == null || mxUtils.getValue(
|
||||
// this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0)
|
||||
// {
|
||||
// c.setShadow(false);
|
||||
// this.paintForeground(c, x, y, w, h);
|
||||
// }
|
||||
}) |
||||
.on('mouseover', event => { |
||||
event.stopPropagation(); |
||||
}) |
||||
.on('mouseout', event => { |
||||
event.stopPropagation(); |
||||
}); |
||||
} |
||||
redraw(): void { |
||||
|
||||
} |
||||
paintBackground(rect: PIXI.Rectangle) { } |
||||
|
||||
paintForeground(rect: PIXI.Rectangle) { } |
||||
|
||||
paintEdgeShape(pts: Array<PIXI.Point>) { } |
||||
} |
||||
|
||||
@ -1,59 +1,59 @@
|
||||
import { OldFilmFilter } from 'pixi-filters'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import { PaintMode } from './paintModel'; |
||||
import { SinglePointIcon } from './singlePointIcon'; |
||||
import * as PIXI from 'pixi.js'; |
||||
// import { OldFilmFilter } from 'pixi-filters';
|
||||
// import { WorkingAreaComponent } from '../working-area.component';
|
||||
// import { PaintMode } from './paintModel';
|
||||
// import { SinglePointIcon } from './axImageShape';
|
||||
// import * as PIXI from 'pixi.js';
|
||||
|
||||
/** |
||||
* 汽车放置区域 |
||||
*/ |
||||
export class PutCarArea extends PIXI.Container { |
||||
public polygonGraphics: PIXI.Graphics = new 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.sortableChildren = true; |
||||
// /**
|
||||
// * 汽车放置区域
|
||||
// */
|
||||
// export class PutCarArea extends PIXI.Container {
|
||||
// public polygonGraphics: PIXI.Graphics = new 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.sortableChildren = true;
|
||||
|
||||
// 填充多边形
|
||||
// // 填充多边形
|
||||
|
||||
const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); |
||||
const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; |
||||
this.polygonGraphics.beginFill(color, angle); |
||||
this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); |
||||
this.polygonGraphics.endFill(); |
||||
this.addChild(this.polygonGraphics); |
||||
// 添加选中事件
|
||||
this.polygonGraphics.interactive = true; |
||||
this.polygonGraphics |
||||
.on('pointerdown', (event) => { |
||||
if (this.workingArea.getPaintMode() === PaintMode.Car) { |
||||
this.workingArea.selectCar.Point = |
||||
new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); |
||||
this.workingArea.selectCar.Angle = this.assetData.Direction; |
||||
const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); |
||||
this.workingArea.setPaintMode(PaintMode.endPaint); |
||||
} |
||||
}) |
||||
.on('pointerup', (event) => { |
||||
// const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
|
||||
// const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
|
||||
// this.polygonGraphics.beginFill(color, angle);
|
||||
// this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
|
||||
// this.polygonGraphics.endFill();
|
||||
// this.addChild(this.polygonGraphics);
|
||||
// // 添加选中事件
|
||||
// this.polygonGraphics.interactive = true;
|
||||
// this.polygonGraphics
|
||||
// .on('pointerdown', (event) => {
|
||||
// if (this.workingArea.getPaintMode() === PaintMode.Car) {
|
||||
// this.workingArea.selectCar.Point =
|
||||
// new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
|
||||
// this.workingArea.selectCar.Angle = this.assetData.Direction;
|
||||
// const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
|
||||
// this.workingArea.setPaintMode(PaintMode.endPaint);
|
||||
// }
|
||||
// })
|
||||
// .on('pointerup', (event) => {
|
||||
|
||||
}) |
||||
.on('pointerupoutside', (event) => { |
||||
// })
|
||||
// .on('pointerupoutside', (event) => {
|
||||
|
||||
}) |
||||
.on('pointerover', (event) => { |
||||
this.workingArea.previewSinglePointIcon.filters = null; |
||||
this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; |
||||
// 设置车辆方向
|
||||
this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; |
||||
console.log(this.assetData.Name); |
||||
}) |
||||
.on('pointerout', (event) => { |
||||
this.workingArea.previewSinglePointIcon.filters = [ |
||||
new OldFilmFilter() |
||||
]; |
||||
}); |
||||
} |
||||
} |
||||
// })
|
||||
// .on('pointerover', (event) => {
|
||||
// this.workingArea.previewSinglePointIcon.filters = null;
|
||||
// this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
|
||||
// // 设置车辆方向
|
||||
// this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
|
||||
// console.log(this.assetData.Name);
|
||||
// })
|
||||
// .on('pointerout', (event) => {
|
||||
// this.workingArea.previewSinglePointIcon.filters = [
|
||||
// new OldFilmFilter()
|
||||
// ];
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,373 +0,0 @@
|
||||
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; |
||||
} |
||||
} |
||||
Loading…
Reference in new issue