|
|
|
@ -1,4 +1,4 @@
|
|
|
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '@angular/core'; |
|
|
|
|
import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input, OnDestroy } from '@angular/core'; |
|
|
|
|
import * as PIXI from 'pixi.js'; |
|
|
|
|
import { EventEmitter } from 'events'; |
|
|
|
|
import { EventManager } from '@angular/platform-browser'; |
|
|
|
@ -32,10 +32,11 @@ import { EVENT_SELECTION_CHANGED } from './model/events';
|
|
|
|
|
/** |
|
|
|
|
* 工作区 |
|
|
|
|
*/ |
|
|
|
|
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit { |
|
|
|
|
export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterViewInit,OnDestroy { |
|
|
|
|
|
|
|
|
|
constructor(private eventManager: EventManager, public canvasData: CanvasShareDataService) { |
|
|
|
|
super(); |
|
|
|
|
console.log('组件构造函数'); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ViewChild('content') |
|
|
|
@ -87,7 +88,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
/** |
|
|
|
|
* 选择器 |
|
|
|
|
*/ |
|
|
|
|
public readonly selection: AxSelection = new AxSelection(); |
|
|
|
|
public selection: AxSelection = new AxSelection(); |
|
|
|
|
/** |
|
|
|
|
* 当前鼠标的点 |
|
|
|
|
*/ |
|
|
|
@ -157,26 +158,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* RC版: 该版本已经相当成熟了,基本上不存在导致错误的BUG,与即将发行的正式版相差无几。 |
|
|
|
|
* Release版: 该版本意味“最终版本”,在前面版本的一系列测试版之后,终归会有一个正式版本,是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下,Release不会以单词形式出现在软件封面上,取而代之的是符号®。 |
|
|
|
|
*/ |
|
|
|
|
public VERSION = '1.0.16.20210203_beta'; |
|
|
|
|
public VERSION = '1.0.17.20210204_beta'; |
|
|
|
|
/** |
|
|
|
|
* 数据初始化 |
|
|
|
|
*/ |
|
|
|
|
ngOnInit(): void { |
|
|
|
|
console.log('组件OnInit'); |
|
|
|
|
PIXI.utils.skipHello(); |
|
|
|
|
this.sayHello(); |
|
|
|
|
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { |
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// if (event.keyCode === 17) {
|
|
|
|
|
// this.isCtrlKeyClicked = true;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { |
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// if (event.keyCode === 17) {
|
|
|
|
|
// this.isCtrlKeyClicked = false;
|
|
|
|
|
// this.rectToolGraphics.visible = false;
|
|
|
|
|
// this.rectToolGraphics.clear();
|
|
|
|
|
// }
|
|
|
|
|
// 按Del键删除选中的图标
|
|
|
|
|
if (event.keyCode === 46) { |
|
|
|
|
this.deleteSelectedShape(); |
|
|
|
@ -184,6 +177,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
ngOnDestroy(): void { |
|
|
|
|
console.log('组件OnDestroy'); |
|
|
|
|
this.selection.clear(); |
|
|
|
|
this.camera2D.destroy(); |
|
|
|
|
this.app.destroy(); |
|
|
|
|
} |
|
|
|
@ -352,7 +347,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
worldHeight: 20000, |
|
|
|
|
interaction: this.app.renderer.plugins.interaction, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.camera2D.pivot.set(0.5); |
|
|
|
|
this.camera2D.position = new PIXI.Point(0, 0); |
|
|
|
|
this.app.stage.addChild(this.camera2D); |
|
|
|
|
|
|
|
|
|
this.camera2D |
|
|
|
@ -459,7 +455,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.grid2D.updateGrid(); |
|
|
|
|
this.resizeItem(1 / this.camera2D.scale.x); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 重置相机 |
|
|
|
|
*/ |
|
|
|
|
private resetCamera2D() { |
|
|
|
|
this.camera2D.scale.set(1); |
|
|
|
|
this.camera2D.x = (this.app.view.width - this.backgroundImage.width) / 2; |
|
|
|
|
this.camera2D.y = (this.app.view.height - this.backgroundImage.height) / 2; |
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 缩放适应 |
|
|
|
|
*/ |
|
|
|
|
public zoomFit() { |
|
|
|
|
const imageWidth = this.backgroundImage.texture.width; |
|
|
|
|
const imageHeight = this.backgroundImage.texture.height; |
|
|
|
|
const appWidth = this.app.view.width - 470; |
|
|
|
|
const appHeight = this.app.view.height; |
|
|
|
|
const wScale = appWidth / imageWidth; |
|
|
|
|
const hScale = appHeight / imageHeight; |
|
|
|
|
let scale = wScale < hScale ? wScale : hScale; |
|
|
|
|
|
|
|
|
|
if (scale < 0.12) { |
|
|
|
|
scale = 0.12; |
|
|
|
|
} |
|
|
|
|
if (scale > 16) { |
|
|
|
|
scale = 16; |
|
|
|
|
} |
|
|
|
|
this.camera2D.scale.set(scale); |
|
|
|
|
if (wScale < hScale) { |
|
|
|
|
this.camera2D.x = 470 / 2; |
|
|
|
|
this.camera2D.y = (appHeight - (imageHeight * this.camera2D.scale.y)) / 2; |
|
|
|
|
} else { |
|
|
|
|
this.camera2D.x = 470 / 2 + (appWidth - (imageWidth * this.camera2D.scale.x)) / 2; |
|
|
|
|
this.camera2D.y = 0; |
|
|
|
|
} |
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 创建2D网格 |
|
|
|
|
*/ |
|
|
|
@ -506,11 +538,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 创建图标事件(数据处理) |
|
|
|
|
*/ |
|
|
|
|
this.on('createIcon', (axShape: AxShape) => { |
|
|
|
|
console.log('新增图标:' + axShape.assetData.Name); |
|
|
|
|
if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
|
|
|
|
|
// 添加楼层数据
|
|
|
|
|
this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id] = axShape.assetData; |
|
|
|
|
console.log(this.canvasData.originaleveryStoreyData); |
|
|
|
|
// 添加建筑数据
|
|
|
|
|
this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id] = axShape.assetData; |
|
|
|
|
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
|
|
|
|
@ -541,27 +571,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.canvasData.isChange = true; |
|
|
|
|
this.updateCamera2D(); |
|
|
|
|
}); |
|
|
|
|
// ///
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointerdown', (event) => {
|
|
|
|
|
// if (event.data.button !== 2) { return };
|
|
|
|
|
// this.dragFlag = true;
|
|
|
|
|
// this.startPoint = { x: event.data.global.x, y: event.data.global.y };
|
|
|
|
|
// });
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointermove', (event) => {
|
|
|
|
|
// if (this.dragFlag) {
|
|
|
|
|
// const dx = event.data.global.x - this.startPoint.x;
|
|
|
|
|
// const dy = event.data.global.y - this.startPoint.y;
|
|
|
|
|
// this.app.stage.position.x += dx;
|
|
|
|
|
// this.app.stage.position.y += dy;
|
|
|
|
|
// this.startPoint = { x: event.data.global.x, y: event.data.global.y };
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.app.renderer.plugins.interaction.on('pointerup', (event) => {
|
|
|
|
|
// this.dragFlag = false;
|
|
|
|
|
// });
|
|
|
|
|
} |
|
|
|
|
// dragFlag;
|
|
|
|
|
// startPoint;
|
|
|
|
|
/** |
|
|
|
|
* 重置画布 |
|
|
|
|
*/ |
|
|
|
@ -592,7 +602,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
*/ |
|
|
|
|
public refreshIcon(id: string): void { |
|
|
|
|
const icon = this.backgroundImage.children.find(item => item.name === id); |
|
|
|
|
// console.log(icon);
|
|
|
|
|
if (icon instanceof AxImageShape) { |
|
|
|
|
icon.refresh(); |
|
|
|
|
} else if (icon instanceof MultipointIcon) { |
|
|
|
@ -710,28 +719,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
public createBackgroundImage() { |
|
|
|
|
this.backgroundImage = PIXI.Sprite.from('assets/images/noImg.png'); |
|
|
|
|
this.backgroundImage.anchor.set(0.5); |
|
|
|
|
// this.backgroundImage.x = this.app.view.width / 2;
|
|
|
|
|
// this.backgroundImage.y = this.app.view.height / 2;
|
|
|
|
|
this.backgroundImage.interactive = true; |
|
|
|
|
this.backgroundImage.name = 'background'; |
|
|
|
|
// this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
|
|
|
|
|
// const imageWidth = 665;
|
|
|
|
|
// const imageHeight = 530;
|
|
|
|
|
// const appWidth = this.app.view.width - 470;
|
|
|
|
|
// const appHeight = this.app.view.height;
|
|
|
|
|
|
|
|
|
|
// const wScale = appWidth / imageWidth;
|
|
|
|
|
// const hScale = appHeight / imageHeight;
|
|
|
|
|
|
|
|
|
|
// const scale = wScale < hScale
|
|
|
|
|
// ? wScale
|
|
|
|
|
// : hScale;
|
|
|
|
|
// this.backgroundImage.scale.set(scale);
|
|
|
|
|
this.backgroundImage.sortableChildren = true; |
|
|
|
|
this.backgroundImage |
|
|
|
|
.on('pointerdown', event => { |
|
|
|
|
if (event.data.button !== 0) { return; } |
|
|
|
|
// console.log(this.backgroundImage.toLocal(this.mousePosition));
|
|
|
|
|
if (this.isCtrlKeyClicked === false) { |
|
|
|
|
switch (this.paintMode) { |
|
|
|
|
case PaintMode.endPaint: |
|
|
|
@ -931,47 +924,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('pointerup', event => { |
|
|
|
|
// event.currentTarget.data = null;
|
|
|
|
|
|
|
|
|
|
// if (this.rectToolGraphics.visible === true) {
|
|
|
|
|
// const shapes: AxShape[] = [];
|
|
|
|
|
// this.backgroundImage.children.forEach(item => {
|
|
|
|
|
// if ( item instanceof AxShape
|
|
|
|
|
// && item instanceof AxPreviewImageShape === false) {
|
|
|
|
|
// // 判断2个矩形是否相交
|
|
|
|
|
// const rect1 = this.rectToolGraphics.getBounds();
|
|
|
|
|
// const rect2 = item.getBounds();
|
|
|
|
|
// if (this.isOverlap(rect1, rect2)) {
|
|
|
|
|
// shapes.push(item);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// this.rectToolGraphics.clear();
|
|
|
|
|
// this.rectToolGraphics.visible = false;
|
|
|
|
|
// this.selectAll(shapes);
|
|
|
|
|
// }
|
|
|
|
|
}) |
|
|
|
|
.on('pointerupoutside', event => { |
|
|
|
|
// if (this.isMove) {
|
|
|
|
|
// event.currentTarget.data = null;
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
.on('pointermove', event => { |
|
|
|
|
// if (this.isCtrlKeyClicked === false) {
|
|
|
|
|
// // 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;
|
|
|
|
|
// } else if (this.isCtrlKeyClicked === true) {
|
|
|
|
|
// if (this.rectToolGraphics.visible === true) {
|
|
|
|
|
// this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
// .on('rightclick', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// this.deselectAll();
|
|
|
|
|
// this.setPaintMode(PaintMode.endPaint);
|
|
|
|
|
// })
|
|
|
|
|
.on('pointerover', (event) => { |
|
|
|
|
if (this.previewImage !== null |
|
|
|
|
&& this.paintMode === PaintMode.singlePointIcon) { |
|
|
|
@ -992,6 +952,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
this.backgroundImage.addChild(this.paintingLine); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 判断矩形一是否包含矩形二 |
|
|
|
|
* @param rect1 矩形一 |
|
|
|
|
* @param rect2 矩形二 |
|
|
|
|
*/ |
|
|
|
|
public isOverlap(rect1, rect2): boolean { |
|
|
|
|
const l1 = { x: rect1.x, y: rect1.y }; |
|
|
|
|
const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }; |
|
|
|
@ -1014,43 +979,21 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
imageAngle = 0; |
|
|
|
|
} |
|
|
|
|
this.backgroundImage.scale.set(1); |
|
|
|
|
this.backgroundImage.pivot.set(0); |
|
|
|
|
// this.backgroundImage.x = this.app.view.width / 2;
|
|
|
|
|
// this.backgroundImage.y = this.app.view.height / 2;
|
|
|
|
|
if (imageUrl === undefined || imageUrl === null || imageUrl === '') { |
|
|
|
|
this.backgroundImage.texture = this.backgroundTexture; |
|
|
|
|
} else { |
|
|
|
|
this.backgroundImage.texture = await PIXI.Texture.fromURL(imageUrl); |
|
|
|
|
} |
|
|
|
|
this.backgroundImage.x = this.backgroundImage.width/2; |
|
|
|
|
this.backgroundImage.y = this.backgroundImage.height/2; |
|
|
|
|
this.backgroundImage.x = this.backgroundImage.width / 2; |
|
|
|
|
this.backgroundImage.y = this.backgroundImage.height / 2; |
|
|
|
|
this.backgroundImage.angle = imageAngle; |
|
|
|
|
// 等待图片加载完成
|
|
|
|
|
const imageWidth = this.backgroundImage.texture.width; |
|
|
|
|
const imageHeight = this.backgroundImage.texture.height; |
|
|
|
|
const appWidth = this.app.view.width - 470; |
|
|
|
|
const appHeight = this.app.view.height; |
|
|
|
|
const wScale = appWidth / imageWidth; |
|
|
|
|
const hScale = appHeight / imageHeight; |
|
|
|
|
let scale = wScale < hScale ? wScale : hScale; |
|
|
|
|
|
|
|
|
|
if (scale < 0.12) { |
|
|
|
|
scale = 0.12; |
|
|
|
|
} |
|
|
|
|
if (scale > 16) { |
|
|
|
|
scale = 16; |
|
|
|
|
} |
|
|
|
|
this.camera2D.scale.set(scale); |
|
|
|
|
this.camera2D.x = 235; |
|
|
|
|
this.camera2D.y = 0; |
|
|
|
|
// 设置图片缩放
|
|
|
|
|
// this.backgroundImage.scale.set(scale);
|
|
|
|
|
// this.backgroundImage.visible = true;
|
|
|
|
|
this.backgroundImage.children.forEach((item) => { |
|
|
|
|
if (item instanceof AxShape) { |
|
|
|
|
item.refresh(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.resetCamera2D(); |
|
|
|
|
// this.backgroundImage.children.forEach((item) => {
|
|
|
|
|
// if (item instanceof AxShape) {
|
|
|
|
|
// item.refresh();
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
} |
|
|
|
|
/** |
|
|
|
|
* 刷新 |
|
|
|
@ -1250,7 +1193,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
* 开始绘制 |
|
|
|
|
*/ |
|
|
|
|
public beginPaint() { |
|
|
|
|
console.log(this.canvasData.selectTemplateData); |
|
|
|
|
this.deselectAll(); |
|
|
|
|
this.setPaintMode(PaintMode.endPaint); |
|
|
|
|
this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); |
|
|
|
@ -1342,7 +1284,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
|
|
|
|
|
private enterPaint(): void { |
|
|
|
|
this.previewLineSegment.visible = false; |
|
|
|
|
this.enterPaintEndButton.visible = false; |
|
|
|
|
console.log(this.paintMode); |
|
|
|
|
switch (this.paintMode) { |
|
|
|
|
case PaintMode.singlePointIcon: |
|
|
|
|
break; |
|
|
|
|