|
|
|
|
@ -1,9 +1,10 @@
|
|
|
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit,Input } from '@angular/core'; |
|
|
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core'; |
|
|
|
|
import * as PIXI from 'pixi.js'; |
|
|
|
|
import { EventEmitter } from 'events'; |
|
|
|
|
import { EventManager } from '@angular/platform-browser'; |
|
|
|
|
import { OutlineFilter } from 'pixi-filters'; |
|
|
|
|
import { CanvasShareDataService, GameMode } from '../canvas-share-data.service'; |
|
|
|
|
import {CacheTokenService} from '../http-interceptors/cache-token.service' //引入自动登录 获取token服务
|
|
|
|
|
import * as ObjectID from 'bson-objectid'; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -15,15 +16,16 @@ import * as ObjectID from 'bson-objectid';
|
|
|
|
|
|
|
|
|
|
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit { |
|
|
|
|
|
|
|
|
|
constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { |
|
|
|
|
constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService, public token: CacheTokenService) { |
|
|
|
|
super(); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ViewChild('content') |
|
|
|
|
content: ElementRef; |
|
|
|
|
//父组件
|
|
|
|
|
@Input( ) init:any; |
|
|
|
|
//父组件
|
|
|
|
|
/** |
|
|
|
|
* 父组件 |
|
|
|
|
*/ |
|
|
|
|
@Input( ) init: any; |
|
|
|
|
/** |
|
|
|
|
* pixijs 程序 |
|
|
|
|
*/ |
|
|
|
|
@ -84,7 +86,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 拷贝素材数据 |
|
|
|
|
*/ |
|
|
|
|
public copyData: any[] = []; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 确认绘制按钮 |
|
|
|
|
*/ |
|
|
|
|
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg'); |
|
|
|
|
/** |
|
|
|
|
* 框选工具图形 |
|
|
|
|
@ -98,9 +102,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 最终鼠标位置 |
|
|
|
|
*/ |
|
|
|
|
private finalScreenMousePos: PIXI.Point = new PIXI.Point(); |
|
|
|
|
// 根据ID 找到图标
|
|
|
|
|
/** |
|
|
|
|
* 允许编辑 |
|
|
|
|
*/ |
|
|
|
|
public allowEdit = false; |
|
|
|
|
|
|
|
|
|
// 根据ID 找到数据
|
|
|
|
|
|
|
|
|
|
//是否登录
|
|
|
|
|
isLogin () { |
|
|
|
|
let token = sessionStorage.getItem('token') // 判断 是否登录状态
|
|
|
|
|
if (token) { |
|
|
|
|
this.init.getAllLibrary() |
|
|
|
|
this.init.getAllBuildings() |
|
|
|
|
this.init.getAllFirePlan() |
|
|
|
|
this.init.getSitePlan() //调用父组件 初始化方法
|
|
|
|
|
} else { |
|
|
|
|
this.token.login().then(res=>{ |
|
|
|
|
this.init.params.companyId = sessionStorage.getItem('companyId') |
|
|
|
|
this.init.getAllLibrary() |
|
|
|
|
this.init.getAllBuildings() |
|
|
|
|
this.init.getAllFirePlan() |
|
|
|
|
this.init.getSitePlan() //调用父组件 初始化方法
|
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
//是否登录
|
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { |
|
|
|
|
if (event.keyCode === 17) { |
|
|
|
|
@ -140,6 +168,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
}); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.createCanvas(); |
|
|
|
|
this.loadDemoScene(); |
|
|
|
|
}, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -199,7 +228,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
backgroundColor: 0xE9FAFF |
|
|
|
|
}); |
|
|
|
|
this.content.nativeElement.appendChild(this.app.view); |
|
|
|
|
this.init.getSitePlan() //调用父组件 初始化方法
|
|
|
|
|
this.isLogin() |
|
|
|
|
|
|
|
|
|
this.createBackgroundImage(); |
|
|
|
|
// this.createPreviewSinglePointIcon();
|
|
|
|
|
@ -346,6 +375,41 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 加载测试界面 |
|
|
|
|
*/ |
|
|
|
|
public loadDemoScene() { |
|
|
|
|
this.backgroundImage.texture = PIXI.Texture.from('./assets/images/demo.jpg'); |
|
|
|
|
setTimeout(() => { |
|
|
|
|
const assetData = { |
|
|
|
|
TemplateId: null, |
|
|
|
|
FloorId: null, |
|
|
|
|
Angle: 0, |
|
|
|
|
Color: 0, |
|
|
|
|
Enabled: true, |
|
|
|
|
FillMode: 0, |
|
|
|
|
FireElementId: 0, |
|
|
|
|
FixedSize: true, |
|
|
|
|
Height: 32, |
|
|
|
|
Width: 32, |
|
|
|
|
Id: ObjectID.default.generate(), |
|
|
|
|
ImageUrl: './assets/images/泡沫消防车.png', |
|
|
|
|
InteractiveMode: 0, |
|
|
|
|
MultiPoint: null, |
|
|
|
|
Point: new PIXI.Point(5295 - (this.backgroundImage.texture.width / 2), 4067 - (this.backgroundImage.texture.height / 2)), |
|
|
|
|
Name: '', |
|
|
|
|
PropertyInfos: null, |
|
|
|
|
Border: null, |
|
|
|
|
DrawMode: null, |
|
|
|
|
Thickness: 0, |
|
|
|
|
IsFromBuilding: false, |
|
|
|
|
GameMode: 0 |
|
|
|
|
}; |
|
|
|
|
const single = new SinglePointIcon(assetData, this); |
|
|
|
|
}, 100); |
|
|
|
|
|
|
|
|
|
// this.backgroundImage.anchor.set(0);
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param id 图标ID |
|
|
|
|
@ -905,7 +969,7 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
|
|
|
|
|
private text = new PIXI.Text(this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
+ 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(); |
|
|
|
|
@ -925,38 +989,36 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.interactive = true; |
|
|
|
|
this.image |
|
|
|
|
.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
console.log(this.assetData); |
|
|
|
|
event.currentTarget.parent.data = event.data; |
|
|
|
|
event.currentTarget.parent.alpha = 0.5; |
|
|
|
|
event.currentTarget.parent.dragging = true; |
|
|
|
|
|
|
|
|
|
this.workingArea.selection.selectOne(this); |
|
|
|
|
.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 => { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
if (event.currentTarget.parent.dragging) { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseupoutside', event => { |
|
|
|
|
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.text.x = newPosition.x;
|
|
|
|
|
// this.text.y = newPosition.y - 32;
|
|
|
|
|
|
|
|
|
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
|
|
|
this.workingArea.canvasData.isChange = true; |
|
|
|
|
// console.log(this.workingArea.canvasData.originaleveryStoreyData);
|
|
|
|
|
// console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
@ -993,7 +1055,7 @@ export class SinglePointIcon extends PIXI.Container {
|
|
|
|
|
this.image.angle = this.assetData.Angle; |
|
|
|
|
this.text.text = this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
} |
|
|
|
|
@ -1024,7 +1086,7 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
|
|
|
|
|
private text = new PIXI.Text(this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
/** |
|
|
|
|
* |
|
|
|
|
* @param texture 图片素材 |
|
|
|
|
@ -1079,19 +1141,25 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
item.interactive = true; |
|
|
|
|
item.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
if (this.workingArea.allowEdit) { |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseup', event => { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseupoutside', event => { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mousemove', event => { |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
@ -1169,25 +1237,30 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
item.interactive = true; |
|
|
|
|
item.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
event.currentTarget.parent.data = event.data; |
|
|
|
|
event.currentTarget.parent.alpha = 0.5; |
|
|
|
|
event.currentTarget.parent.dragging = true; |
|
|
|
|
|
|
|
|
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
|
|
|
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
|
|
|
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
|
|
|
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
|
|
|
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseup', event => { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
if (event.currentTarget.parent.dragging) { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseupoutside', event => { |
|
|
|
|
event.currentTarget.parent.alpha = 1; |
|
|
|
|
event.currentTarget.parent.dragging = false; |
|
|
|
|
event.currentTarget.parent.data = null; |
|
|
|
|
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) { |
|
|
|
|
@ -1197,11 +1270,10 @@ export class MultipointIcon extends PIXI.Container {
|
|
|
|
|
|
|
|
|
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
|
|
|
this.workingArea.canvasData.isChange = true; |
|
|
|
|
// console.log(this.workingArea.canvasData.originaleveryStoreyData.data[this.assetData.Id].Point);
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
// this.workingArea.selection.deselectAll();
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
@ -1304,22 +1376,25 @@ export class PolygonIcon extends PIXI.Container {
|
|
|
|
|
item.zIndex = 1; |
|
|
|
|
item.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
|
|
|
|
|
// console.log(item.zIndex);
|
|
|
|
|
// console.log(this.polygonLineGraphics.zIndex);
|
|
|
|
|
if (this.workingArea.allowEdit) { |
|
|
|
|
event.currentTarget.data = event.data; |
|
|
|
|
event.currentTarget.alpha = 0.5; |
|
|
|
|
event.currentTarget.dragging = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseup', event => { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseupoutside', event => { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
event.currentTarget.alpha = 1; |
|
|
|
|
event.currentTarget.dragging = false; |
|
|
|
|
event.currentTarget.data = null; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mousemove', event => { |
|
|
|
|
if (event.currentTarget.dragging) { |
|
|
|
|
@ -1349,41 +1424,47 @@ export class PolygonIcon extends PIXI.Container {
|
|
|
|
|
}); |
|
|
|
|
// 添加选中事件
|
|
|
|
|
this.polygonGraphics.interactive = true; |
|
|
|
|
this.polygonGraphics.on('mousedown', event => { |
|
|
|
|
this.polygonGraphics |
|
|
|
|
.on('mousedown', event => { |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
event.currentTarget.parent.data = event.data; |
|
|
|
|
event.currentTarget.parent.alpha = 0.5; |
|
|
|
|
event.currentTarget.parent.dragging = true; |
|
|
|
|
|
|
|
|
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
|
|
|
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
|
|
|
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
|
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
|
event.currentTarget.parent.dragPoint = event.data.getLocalPosition(event.currentTarget.parent.parent); |
|
|
|
|
event.currentTarget.parent.dragPoint.x -= event.currentTarget.parent.x; |
|
|
|
|
event.currentTarget.parent.dragPoint.y -= event.currentTarget.parent.y; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('mouseup', event => { |
|
|
|
|
.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 => { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.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.dragPoint.x; |
|
|
|
|
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.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.dragPoint.x; |
|
|
|
|
event.currentTarget.parent.y = newPosition.y - event.currentTarget.parent.dragPoint.y; |
|
|
|
|
|
|
|
|
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
|
|
|
this.workingArea.canvasData.isChange = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
// this.workingArea.selection.deselectAll();
|
|
|
|
|
}); |
|
|
|
|
this.assetData.Point = new PIXI.Point(this.x, this.y); |
|
|
|
|
this.workingArea.canvasData.isChange = true; |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
.on('rightclick', event => { |
|
|
|
|
// this.workingArea.selection.deselectAll();
|
|
|
|
|
}); |
|
|
|
|
// 缩放
|
|
|
|
|
this.workingArea.on('backgroundScale', data => { |
|
|
|
|
const scale = 1 / data; |
|
|
|
|
@ -1602,3 +1683,117 @@ 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; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
