shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'dev' 

# Conflicts:
#	src/app/working-area/working-area.component.ts
zhuzhou
徐振升 4 years ago
parent
30655ddfda 45ffea9758
commit
1e6c995175
10 changed files with 401 additions and 350 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 3
      debug.log
  3. 11
      src/app/working-area/model/axImageShapeTest.ts
  4. 1
      src/app/working-area/model/axLegend.ts
  5. 90
      src/app/working-area/model/axMessageSystem.ts
  6. 24
      src/app/working-area/model/axRectangleShape.ts
  7. 52
      src/app/working-area/model/axSelection.ts
  8. 110
      src/app/working-area/model/axShape.ts
  9. 37
      src/app/working-area/model/messageSystem.ts
  10. 422
      src/app/working-area/working-area.component.ts

1
.gitignore vendored
Unescape View File

@ -44,3 +44,4 @@ testem.log
# System Files # System Files
.DS_Store .DS_Store
Thumbs.db Thumbs.db
debug.log

3
debug.log
Unescape View File

@ -1,3 +0,0 @@
[1229/141605.754:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0104/100053.968:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)
[0122/085819.900:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

11
src/app/working-area/model/axImageShapeTest.ts
Unescape View File

@ -1,11 +0,0 @@
import { AxRectangleShape } from "./axRectangleShape";
export class AxImageShapeTest extends AxRectangleShape{
/**
*
*/
constructor(x:number,y:number,width:number,height:number) {
super(x,y,width,height);
}
}

1
src/app/working-area/model/axLegend.ts
Unescape View File

@ -429,7 +429,6 @@ export class AxLegend extends AxShape {
*/ */
public drawBorder(scale: number) { public drawBorder(scale: number) {
const visible = this.upLeft.visible; const visible = this.upLeft.visible;
console.log(visible);
this.setPointVisiable(false); this.setPointVisiable(false);
super.drawBorder(scale); super.drawBorder(scale);

90
src/app/working-area/model/axMessageSystem.ts
Unescape View File

@ -0,0 +1,90 @@
/**
* 事件系统
*/
export class AxMessageSystem {
/** 监听数组 */
private static listeners = {};
/**
* 注册事件
* @param name 事件名称
* @param callback 回调函数
* @param context 上下文
*/
public static addListener(name: string, callback: () => void, context: any) {
const observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) {
AxMessageSystem.listeners[name] = [];
}
AxMessageSystem.listeners[name].push(new Observer(callback, context));
}
/**
* 移除事件
* @param name 事件名称
* @param callback 回调函数
* @param context 上下文
*/
public static removeListener(name: string, callback: () => void, context: any) {
const observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) { return; }
const length = observers.length;
for (let i = 0; i < length; i++) {
const observer = observers[i];
if (observer.compar(context)) {
observers.splice(i, 1);
break;
}
}
if (observers.length === 0) {
delete AxMessageSystem.listeners[name];
}
}
/**
* 发送事件
* @param name 事件名称
*/
public static send(name: string, ...args: any[]) {
const observers: Observer[] = AxMessageSystem.listeners[name];
if (!observers) { return; }
const length = observers.length;
for (let i = 0; i < length; i++) {
const observer = observers[i];
observer.notify(name, ...args);
}
}
}
/**
* 观察者
*/
class Observer {
/** 回调函数 */
private callback: () => void;
/** 上下文 */
private context: any = null;
constructor(callback: () => void, context: any) {
const self = this;
self.callback = callback;
self.context = context;
}
/**
* 发送通知
* @param args 不定参数
*/
notify(...args: any[]): void {
const self = this;
self.callback.call(self.context, ...args);
}
/**
* 上下文比较
* @param context 上下文
*/
compar(context: any): boolean {
return context === this.context;
}
}

24
src/app/working-area/model/axRectangleShape.ts
Unescape View File

@ -1,21 +1,21 @@
import { Sprite } from "pixi.js"; import { Sprite } from 'pixi.js';
import { Graphics } from "pixi.js"; import { Graphics } from 'pixi.js';
import { WorkingAreaComponent } from "../working-area.component"; import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from "./axShape"; import { AxShape } from './axShape';
export class AxRectangleShape extends AxShape{ export class AxRectangleShape extends AxShape {
/** /**
* *
*/ */
constructor(x:number,y:number,width:number,height:number,assetData: any, workingArea: WorkingAreaComponent) { constructor(x: number, y: number, width: number, height: number, assetData: any, workingArea: WorkingAreaComponent) {
super(assetData,workingArea); super(assetData, workingArea);
this.beginFill(0x0000ff,1); this.beginFill(0x0000ff, 1);
this.lineStyle(1, 0xff0000,1); this.lineStyle(1, 0xff0000, 1);
this.drawRect(x, y, width, height); this.drawRect(x, y, width, height);
this.endFill(); this.endFill();
} }
} }

52
src/app/working-area/model/axSelection.ts
Unescape View File

@ -0,0 +1,52 @@
/**
* 选择器
*/
export class AxSelection {
constructor() {
}
private objects: Set<any> = new Set<any>();
// 获得第一个对象
public first(): any {
if (this.objects.size > 0) {
return this.objects[0];
} else {
return null;
}
}
// 是否已经选择了对象
public has(obj: any): boolean {
return this.objects.has(obj);
}
// 获得所有对象
public all() {
return this.objects;
}
// 获取集合长度
public size(): number {
return this.objects.size;
}
// 添加对象
public add(obj: any) {
this.objects.add(obj);
}
// 添加集合
public addArray(array: any[]) {
array.forEach(item => {
this.objects.add(item);
});
}
// 移除对象
public delete(obj: any) {
this.objects.delete(obj);
}
// 移除集合
public deleteArray(array: any[]) {
array.forEach(item => {
this.objects.delete(item);
});
}
// 清空所有对象
public clear() {
this.objects.clear();
}
}

110
src/app/working-area/model/axShape.ts
Unescape View File

@ -8,7 +8,7 @@ import { WorkingAreaComponent } from '../working-area.component';
*/ */
export class AxShape extends Graphics { export class AxShape extends Graphics {
assetData: any; assetData: any;
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png');
workingArea: WorkingAreaComponent; workingArea: WorkingAreaComponent;
// 可以被移动的 // 可以被移动的
moveable = true; moveable = true;
@ -20,7 +20,11 @@ export class AxShape extends Graphics {
showName = true; showName = true;
// 边框 // 边框
border: PIXI.Graphics = new PIXI.Graphics(); border: PIXI.Graphics = new PIXI.Graphics();
// 鼠标位置
mousePosition: PIXI.Point;
// 鼠标拖动
mouseDragging: boolean;
constructor(assetData: any, workingArea: WorkingAreaComponent) { constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(); super();
this.border.visible = false; this.border.visible = false;
@ -35,50 +39,30 @@ export class AxShape extends Graphics {
.on('pointerdown', event => { .on('pointerdown', event => {
event.stopPropagation(); event.stopPropagation();
if (this.selectable) { if (this.selectable) {
this.workingArea.selection.selectOne(this); this.workingArea.select(this);
} }
if (this.moveable) { if (this.moveable) {
event.currentTarget.data = event.data; this.mouseDragging = true;
event.currentTarget.alpha = 0.5; this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
event.currentTarget.dragging = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y;
} }
}) })
.on('pointerup', event => { .on('pointerup', event => {
if (event.currentTarget.dragging) { this.mouseDragging = false;
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
}) })
.on('pointerupoutside', event => { .on('pointerupoutside', event => {
if (event.currentTarget.dragging) { this.mouseDragging = false;
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
}) })
.on('pointermove', event => { .on('pointermove', event => {
if (event.currentTarget.dragging) { if (this.mouseDragging) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); this.workingArea.selection.all().forEach(item => {
const x = event.data.global.x - this.mousePosition.x;
// const offsetX = newPosition.x - event.currentTarget.dragPoint.x; const y = event.data.global.y - this.mousePosition.y;
// const offsetY = newPosition.y - event.currentTarget.dragPoint.y; item.x += x * (1 / this.workingArea.backgroundImage.scale.x);
// const offset = this.workingArea.backgroundImage.toLocal(new Point(offsetX, offsetY)); item.y += y * (1 / this.workingArea.backgroundImage.scale.y);
// event.currentTarget.position += offset; item.assetData.Point = new PIXI.Point(item.x, item.y);
// // this.workingArea.selection.objects.forEach(shpae => { this.workingArea.canvasData.isChange = true;
// // shpae.x = newPosition.x - event.currentTarget.dragPoint.x; });
// // shpae.y = newPosition.y - event.currentTarget.dragPoint.y; this.mousePosition = new PIXI.Point(event.data.global.x, event.data.global.y);
// // shpae.assetData.Point = new PIXI.Point(this.x, this.y);
// // this.workingArea.canvasData.isChange = true;
// // })
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 => { .on('rightclick', event => {
@ -86,14 +70,14 @@ export class AxShape extends Graphics {
}); });
} }
redraw(): void { redraw(): void {
} }
refresh(): void{ refresh(): void {
} }
public setItemScale(scale: number) { public setItemScale(scale: number) {
} }
public showBorder() { public showBorder() {
@ -110,10 +94,10 @@ export class AxShape extends Graphics {
* @param value 显示状态 * @param value 显示状态
*/ */
public setPointVisiable(value: boolean) { public setPointVisiable(value: boolean) {
} }
/** /**
* *
* @param rect 画边框 * @param rect 画边框
*/ */
public drawBorder(scale: number) { public drawBorder(scale: number) {
@ -127,14 +111,14 @@ export class AxShape extends Graphics {
this.border.lineStyle(scale * 1, 0x00a8ff); this.border.lineStyle(scale * 1, 0x00a8ff);
var spaceLength = scale * 1; const spaceLength = scale * 1;
var lineLenght = rect.width + 0.5 + 0.5; const lineLenght = rect.width + 0.5 + 0.5;
var dashLength = scale*( lineLenght +spaceLength - Math.floor((rect.width + rect.height)/2 / 4.1))/Math.floor((rect.width + rect.height)/2 / 4.1); const dashLength = scale * ( lineLenght + spaceLength - Math.floor((rect.width + rect.height) / 2 / 4.1)) / Math.floor((rect.width + rect.height) / 2 / 4.1);
this.drawDash(this.border, p1.x -0.5*scale, p1.y, p2.x + 0.5*scale, p2.y,dashLength,spaceLength); this.drawDash(this.border, p1.x - 0.5 * scale, p1.y, p2.x + 0.5 * scale, p2.y, dashLength, spaceLength);
this.drawDash(this.border, p2.x, p2.y -0.5*scale, p3.x, p3.y + 0.5*scale, dashLength, spaceLength); this.drawDash(this.border, p2.x, p2.y - 0.5 * scale, p3.x, p3.y + 0.5 * scale, dashLength, spaceLength);
this.drawDash(this.border, p3.x+0.5*scale, p3.y, p4.x - 0.5*scale, p4.y, dashLength, spaceLength); this.drawDash(this.border, p3.x + 0.5 * scale, p3.y, p4.x - 0.5 * scale, p4.y, dashLength, spaceLength);
this.drawDash(this.border, p4.x, p4.y + 0.5*scale, p1.x, p1.y - 0.5*scale, dashLength, spaceLength); this.drawDash(this.border, p4.x, p4.y + 0.5 * scale, p1.x, p1.y - 0.5 * scale, dashLength, spaceLength);
this.border.lineStyle(0, 0x0000ff); this.border.lineStyle(0, 0x0000ff);
// this.border.beginFill(0x00ff00,0.1); // this.border.beginFill(0x00ff00,0.1);
this.border.moveTo(p1.x, p1.y); this.border.moveTo(p1.x, p1.y);
@ -145,19 +129,19 @@ export class AxShape extends Graphics {
// this.border.endFill(); // this.border.endFill();
} }
// 画虚线 // 画虚线
drawDash(target, x1, y1, x2, y2,dashLength = 5, spaceLength = 1) { drawDash(target, x1, y1, x2, y2, dashLength = 5, spaceLength = 1) {
let x = x2 - x1; const x = x2 - x1;
let y = y2 - y1; const y = y2 - y1;
let hyp = Math.sqrt((x) * (x) + (y) * (y)); let hyp = Math.sqrt((x) * (x) + (y) * (y));
let units = hyp / (dashLength + spaceLength); const units = hyp / (dashLength + spaceLength);
let dashSpaceRatio = dashLength / (dashLength + spaceLength); const dashSpaceRatio = dashLength / (dashLength + spaceLength);
let dashX = (x / units) * dashSpaceRatio; const dashX = (x / units) * dashSpaceRatio;
let spaceX = (x / units) - dashX; const spaceX = (x / units) - dashX;
let dashY = (y / units) * dashSpaceRatio; const dashY = (y / units) * dashSpaceRatio;
let spaceY = (y / units) - dashY; const spaceY = (y / units) - dashY;
target.moveTo(x1, y1); target.moveTo(x1, y1);
while (hyp > 0) { while (hyp > 0) {
x1 += dashX; x1 += dashX;
y1 += dashY; y1 += dashY;
@ -200,7 +184,7 @@ export class AxShape extends Graphics {
return new PIXI.Point(gravityLat, gravityLng); return new PIXI.Point(gravityLat, gravityLng);
} }
// 计算线段中点坐标 // 计算线段中点坐标
public getLineCenter(point1:PIXI.Point,point2:PIXI.Point) { public getLineCenter(point1: PIXI.Point, point2: PIXI.Point) {
return new PIXI.Point((point1.x+point2.x)/2,(point1.y+point2.y)/2) return new PIXI.Point((point1.x + point2.x) / 2, (point1.y + point2.y) / 2);
} }
} }

37
src/app/working-area/model/messageSystem.ts
Unescape View File

@ -1,37 +0,0 @@
class MyEvent<T> extends CustomEvent<T> {
public static readonly CMD: string = "EVENT_NAME";
public constructor($type: string , $data: T ) {
super( $type , { detail: $data, bubbles: true, cancelable: true, composed: true });
}
}
class MyDispatch extends EventTarget {
private static _instance: MyDispatch;
public static get Instance(): MyDispatch {
if (!MyDispatch._instance) MyDispatch._instance = new MyDispatch();
return MyDispatch._instance;
}
public send<T>($data: T, $type: string = MyEvent.CMD): void {
const $event: CustomEvent = new MyEvent<T>($type, $data);
this.dispatchEvent($event);
}
}
class Test {
public constructor() {
MyDispatch.Instance.addEventListener(MyEvent.CMD, this.onEvent as EventListener);
}
private onEvent($e: MyEvent<ITest>): void {
console.log(`target ${$e.target}`);
console.log(`name: ${$e.detail._name} , occupation: ${$e.detail._occupation}`);
}
}
interface ITest {
_name: string;
_occupation: string;
}
let $test: Test = new Test();
MyDispatch.Instance.send<ITest>({ _name: `Aonaufly`, _occupation: `it` });

422
src/app/working-area/working-area.component.ts
Unescape View File

@ -16,9 +16,9 @@ import { PropertyInfo } from './model/PropertyInfo';
import { AxPreviewImageShape } from './model/axPreviewImageShape'; import { AxPreviewImageShape } from './model/axPreviewImageShape';
import { AxArrowConnector } from './model/axArrowConnector'; import { AxArrowConnector } from './model/axArrowConnector';
import { AxLegend, Legend } from './model/axLegend'; import { AxLegend, Legend } from './model/axLegend';
import { NullTemplateVisitor } from '@angular/compiler';
import { AxRectangleShape } from './model/axRectangleShape';
import { AxGrid } from './model/axGrid'; import { AxGrid } from './model/axGrid';
import { AxSelection } from './model/axSelection';
import { AxMessageSystem } from './model/axMessageSystem';
@Component({ @Component({
@ -76,7 +76,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/** /**
* 选择器 * 选择器
*/ */
public selection: Selection = new Selection(this); public readonly selection: AxSelection = new AxSelection();
/** /**
* 当前鼠标的点 * 当前鼠标的点
*/ */
@ -141,6 +141,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 网格 * 网格
*/ */
public grid: AxGrid = null; public grid: AxGrid = null;
// 是否按下Ctrl键
isCtrlKeyClicked = false;
isMove = false;
/** /**
* 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta * 本软件版本号由四部分组成：<主版本号><次版本号><修订版本号><日期加希腊字母版本号> 例如：1.0.0.20210105_beta
* Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。 * Alpha版: 此版本表示该软件在此阶段主要是以实现软件功能为主，通常只在软件开发者内部交流，一般而言，该版本软件的Bug较多，需要继续修改。
@ -148,7 +151,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。 * RC版: 该版本已经相当成熟了，基本上不存在导致错误的BUG，与即将发行的正式版相差无几。
* Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。 * Release版: 该版本意味“最终版本”，在前面版本的一系列测试版之后，终归会有一个正式版本，是最终交付用户使用的一个版本。该版本有时也称为标准版。一般情况下，Release不会以单词形式出现在软件封面上，取而代之的是符号®。
*/ */
public VERSION = '1.0.11.20210122_beta'; public VERSION = '1.0.12.20210125_beta';
/** /**
* 数据初始化 * 数据初始化
*/ */
@ -157,12 +160,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.sayHello(); this.sayHello();
this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => { this.eventManager.addGlobalEventListener('window', 'keydown', (event: any) => {
if (event.keyCode === 17) { if (event.keyCode === 17) {
this.selection.isMultiselection = true; this.isCtrlKeyClicked = true;
} }
}); });
this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => { this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
if (event.keyCode === 17) { if (event.keyCode === 17) {
this.selection.isMultiselection = false; this.isCtrlKeyClicked = false;
this.rectToolGraphics.visible = false; this.rectToolGraphics.visible = false;
this.rectToolGraphics.clear(); this.rectToolGraphics.clear();
} }
@ -176,18 +179,43 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 删除选中的图标 * 删除选中的图标
*/ */
public deleteSelectedShape() { public deleteSelectedShape() {
this.selection.objects.forEach(item => { if (this.selection.all().size > 0) {
this.deleteShape(item); this.selection.all().forEach(axShape => {
}); if (this.allowEdit && this.canvasData.gameMode === axShape.assetData.GameMode) {
this.selection.deselectAll(); // 删除图例对象
} const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
/** if ( temp !== undefined
* && temp !== null
* @param obj 删除一个形状 && axShape.assetData.Name !== '图例') {
*/ const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
public deleteShape(shape) { temp.deleteItem(itemLegend);
if (this.allowEdit && this.canvasData.gameMode === shape.assetData.GameMode) { }
this.emit('deleteIcon', shape); if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
// 删除楼层数据
delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
// 删除建筑数据
delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
} else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
if (axShape.assetData.Tag === 1) {
// 删除楼层数据
delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id];
} else {
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
}
}
this.backgroundImage.removeChild(axShape);
}
});
this.selection.clear();
this.emit('canvasDataChanged');
this.canvasData.isChange = true;
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
} }
/** /**
@ -315,7 +343,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.app.stage.addChild(this.grid); this.app.stage.addChild(this.grid);
this.grid.drawGrid(); this.grid.drawGrid();
this.grid.onMousemove = (evt, gridCoord) => { this.grid.onMousemove = (evt, gridCoord) => {
// console.log(gridCoord);
}; };
this.createBackgroundImage(); this.createBackgroundImage();
@ -355,28 +383,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.rectToolGraphics.endFill(); this.rectToolGraphics.endFill();
} }
}); });
/**
* 选中事件
*/
this.on('select', (axShape: AxShape) => {
// if (axShape instanceof AxRectangleShape) {
// let upLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let upRight: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let downLeft: PIXI.Sprite= new PIXI.Sprite(this.editorPointTexture);
// let downRight: PIXI.Sprite = new PIXI.Sprite(this.editorPointTexture);
// } else {
axShape.showBorder();
axShape.drawBorder(1 / this.backgroundImage.scale.x);
axShape.setPointVisiable(this.allowEdit);
// }
});
/**
* 取消选中事件
*/
this.on('deselect', (axShape: AxShape) => {
axShape.hideBorder();
axShape.setPointVisiable(false);
});
/** /**
* 创建图标事件（数据处理） * 创建图标事件（数据处理）
*/ */
@ -415,44 +421,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.emit('canvasDataChanged'); this.emit('canvasDataChanged');
this.canvasData.isChange = true; this.canvasData.isChange = true;
}); });
/**
* 删除图标事件(数据处理)
*/
this.on('deleteIcon', (axShape: AxShape) => {
// 删除图例对象
const temp = this.backgroundImage.getChildByName('图例') as AxLegend;
if ( temp !== undefined
&& temp !== null
&& axShape.assetData.Name !== '图例') {
const itemLegend = new Legend(axShape.assetData.Name, axShape.assetData.ImageUrl, 1);
temp.deleteItem(itemLegend);
}
if (axShape.assetData.GameMode === GameMode.BasicInformation) { // 基本信息
// 删除楼层数据
delete this.canvasData.originaleveryStoreyData.data[axShape.assetData.Id];
// 删除建筑数据
delete this.canvasData.originalcompanyBuildingData.data[axShape.assetData.Id];
} else if (axShape.assetData.GameMode === GameMode.Assignment) { // 处置预案
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
} else if (axShape.assetData.GameMode === GameMode.Examinee) { // 考生考试
if (axShape.assetData.Tag === 1) {
// 删除楼层数据
delete this.canvasData.examOriginaleveryStoreyData.data[axShape.assetData.Id];
} else {
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[axShape.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[axShape.assetData.Id];
}
}
this.backgroundImage.removeChild(axShape);
this.emit('canvasDataChanged');
this.canvasData.isChange = true;
});
} }
/** /**
* 重置画布 * 重置画布
@ -513,19 +481,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
} }
}); });
} }
/**
* 设置高亮
*/
public setHighlight(ids: string[]): void {
this.selection.deselectAll();
ids.forEach(item => {
let obj = this.backgroundImage.getChildByName(item);
if (obj === null) {
obj = this.app.stage.getChildByName(item);
}
this.selection.select(obj);
});
}
/** /**
* 创建楼层图形 * 创建楼层图形
*/ */
@ -631,10 +586,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
.on('pointerdown', event => { .on('pointerdown', event => {
if (event.data.button !== 0) { return; } if (event.data.button !== 0) { return; }
console.log(this.backgroundImage.toLocal(this.mousePosition)); console.log(this.backgroundImage.toLocal(this.mousePosition));
if (!event.currentTarget.dragging && this.selection.isMultiselection === false) { if (!this.isMove && this.isCtrlKeyClicked === false) {
this.selection.deselectAll();
event.currentTarget.data = event.data; event.currentTarget.data = event.data;
event.currentTarget.dragging = true; this.isMove = true;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.dragPoint.x -= event.currentTarget.x; event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y; event.currentTarget.dragPoint.y -= event.currentTarget.y;
@ -828,48 +782,47 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.emit('backgroundScale', this.backgroundImage.scale.x); // this.emit('backgroundScale', this.backgroundImage.scale.x);
break; break;
} }
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { } else if (!this.isMove && this.isCtrlKeyClicked === true) {
this.rectToolGraphics.visible = true; this.rectToolGraphics.visible = true;
event.currentTarget.dragging = true; this.isMove = true;
this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
} }
}) })
.on('pointerup', event => { .on('pointerup', event => {
if (event.currentTarget.dragging) { this.isMove = false;
event.currentTarget.dragging = false; event.currentTarget.data = null;
event.currentTarget.data = null;
}
if (this.rectToolGraphics.visible === true) { if (this.rectToolGraphics.visible === true) {
const shapes: AxShape[] = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if ( item instanceof AxImageShape if ( item instanceof AxShape
|| item instanceof MultipointIcon && item instanceof AxPreviewImageShape === false) {
|| item instanceof PolygonIcon
|| item instanceof AxArrowConnector) {
// 判断2个矩形是否相交 // 判断2个矩形是否相交
const rect1 = this.rectToolGraphics.getBounds(); const rect1 = this.rectToolGraphics.getBounds();
const rect2 = item.getBounds(); const rect2 = item.getBounds();
if (this.isOverlap(rect1, rect2)) { if (this.isOverlap(rect1, rect2)) {
this.selection.select(item); shapes.push(item);
} }
} }
}); });
this.rectToolGraphics.clear(); this.rectToolGraphics.clear();
this.rectToolGraphics.visible = false; this.rectToolGraphics.visible = false;
this.selectAll(shapes);
} }
}) })
.on('pointerupoutside', event => { .on('pointerupoutside', event => {
if (event.currentTarget.dragging) { if (this.isMove) {
event.currentTarget.dragging = false; this.isMove = false;
event.currentTarget.data = null; event.currentTarget.data = null;
} }
}) })
.on('pointermove', event => { .on('pointermove', event => {
if (event.currentTarget.dragging && this.selection.isMultiselection === false) { if (this.isMove && this.isCtrlKeyClicked === false) {
const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent); const newPosition = event.currentTarget.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x; event.currentTarget.x = newPosition.x - event.currentTarget.dragPoint.x;
event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y; event.currentTarget.y = newPosition.y - event.currentTarget.dragPoint.y;
} else if (event.currentTarget.dragging && this.selection.isMultiselection === true) { } else if (this.isMove && this.isCtrlKeyClicked === true) {
if (this.rectToolGraphics.visible === true) { if (this.rectToolGraphics.visible === true) {
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition); this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
} }
@ -877,7 +830,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}) })
.on('rightclick', event => { .on('rightclick', event => {
event.stopPropagation(); event.stopPropagation();
this.selection.deselectAll(); this.deselectAll();
this.setPaintMode(PaintMode.endPaint); this.setPaintMode(PaintMode.endPaint);
}) })
.on('pointerover', (event) => { .on('pointerover', (event) => {
@ -951,11 +904,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* @param imageUrl * @param imageUrl
* @param imageAngle * @param imageAngle
*/ */
public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl, imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> { public async refresh(imageUrl: string = this.canvasData.selectStorey.imageUrl,
imageAngle: number = this.canvasData.selectStorey.imageAngle): Promise<void> {
await this.refreshBackgroundImage(); await this.refreshBackgroundImage();
// 清空所有图形 // 清空所有图形
this.selection.deselectAll(); this.deselectAll();
const itemList = []; const itemList = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@ -978,10 +931,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 加载无关联信息处置预案 * 加载无关联信息处置预案
* @data 处置预案数据 * @data 处置预案数据
*/ */
public async loadNoRelevantInformationDisposalPlan(data:DisposalNodeData): Promise<void> { public async loadNoRelevantInformationDisposalPlan(data: DisposalNodeData): Promise<void> {
await this.refreshBackgroundImage(data.BackgroundImageUrl,data.BackgroundImageAngle); await this.refreshBackgroundImage(data.BackgroundImageUrl, data.BackgroundImageAngle);
// 清空所有图形 // 清空所有图形
this.selection.deselectAll(); this.deselectAll();
const itemList = []; const itemList = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@ -1142,7 +1095,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
public beginPaint() { public beginPaint() {
console.log(this.canvasData.selectTemplateData); console.log(this.canvasData.selectTemplateData);
this.selection.deselectAll(); this.deselectAll();
this.setPaintMode(PaintMode.endPaint); this.setPaintMode(PaintMode.endPaint);
this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
} }
@ -1291,49 +1244,53 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 复制 * 复制
*/ */
public copy(): void { public copy(): void {
this.copyData = []; this.copyData = [];
this.selection.objects.forEach(item => { this.selection.all().forEach(item => {
const newData = JSON.parse(JSON.stringify(item.assetData)); const newData = JSON.parse(JSON.stringify(item.assetData));
this.copyData.push(newData); this.copyData.push(newData);
}); });
} }
/** /**
* 粘贴 * 粘贴
*/ */
public paste(companyId: string, buildingId: string, floorId: string): void { public paste(companyId: string, buildingId: string, floorId: string): void {
this.copyData.forEach(item => { const ids: string[] = [];
item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); if (this.copyData.length > 0) {
const newData = JSON.parse(JSON.stringify(item)); this.copyData.forEach(item => {
newData.Id = ObjectID.default.generate(), item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
newData.CompanyId = companyId; const newData = JSON.parse(JSON.stringify(item));
newData.BuildingId = buildingId; newData.Id = ObjectID.default.generate(),
newData.FloorId = floorId; newData.CompanyId = companyId;
newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); newData.BuildingId = buildingId;
switch (item.InteractiveMode) { newData.FloorId = floorId;
case PaintMode.singlePointIcon: newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
const singleIcon = new AxImageShape(newData, this); switch (item.InteractiveMode) {
this.emit('createIcon', singleIcon); case PaintMode.singlePointIcon:
break; const singleIcon = new AxImageShape(newData, this);
case PaintMode.lineIcon: this.emit('createIcon', singleIcon);
const lineIcon = new MultipointIcon(newData, this); break;
this.emit('createIcon', lineIcon); case PaintMode.lineIcon:
break; const lineIcon = new MultipointIcon(newData, this);
case PaintMode.polygonIcon: this.emit('createIcon', lineIcon);
const polygonIcon = new PolygonIcon(newData, this); break;
this.emit('createIcon', polygonIcon); case PaintMode.polygonIcon:
break; const polygonIcon = new PolygonIcon(newData, this);
case PaintMode.Pipeline: this.emit('createIcon', polygonIcon);
if (item.Name === '距离') { break;
const wall = new AxArrowConnector(newData, this, true, true); case PaintMode.Pipeline:
this.emit('createIcon', wall); if (item.Name === '距离') {
} else if (item.Name === '普通墙' || item.Name === '承重墙') { const wall = new AxArrowConnector(newData, this, true, true);
const wall = new AxArrowConnector(newData, this, false, false); this.emit('createIcon', wall);
this.emit('createIcon', wall); } else if (item.Name === '普通墙' || item.Name === '承重墙') {
} const wall = new AxArrowConnector(newData, this, false, false);
break; this.emit('createIcon', wall);
} }
this.selection.select(this.backgroundImage.getChildByName(newData.Id)); break;
}); }
ids.push(newData.Id);
});
this.setHighlight(ids);
}
} }
//////////////////////////////////////////////////////////////////////// 通用///////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// 通用/////////////////////////////////////////////////////////////////////////////
/** /**
@ -1357,7 +1314,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public async onExamineeClickFloor() { public async onExamineeClickFloor() {
await this.refreshBackgroundImage(); await this.refreshBackgroundImage();
// 清空所有图形 // 清空所有图形
this.selection.deselectAll(); this.deselectAll();
const itemList = []; const itemList = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@ -1384,7 +1341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public async onExaminerClickFloor() { public async onExaminerClickFloor() {
await this.refreshBackgroundImage(); await this.refreshBackgroundImage();
// 清空所有图形 // 清空所有图形
this.selection.deselectAll(); this.deselectAll();
const itemList = []; const itemList = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@ -1410,7 +1367,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public async onExaminerClickFloor_CreateTestpaper() { public async onExaminerClickFloor_CreateTestpaper() {
await this.refreshBackgroundImage(); await this.refreshBackgroundImage();
// 清空所有图形 // 清空所有图形
this.selection.deselectAll(); this.deselectAll();
const itemList = []; const itemList = [];
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) { if (item instanceof AxShape && item instanceof AxPreviewImageShape === false) {
@ -1428,94 +1385,113 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// 隐藏图标 // 隐藏图标
this.setNameVisible(false, 0); this.setNameVisible(false, 0);
} }
} //////////////////////////////////////////////////////////////////// 选择逻辑
/**
* 选择器
*/
export class Selection {
constructor(private workingArea: WorkingAreaComponent) {}
public objects: any[] = [];
public isMultiselection = false;
/** /**
* 返回选择器中是否包含对象 * 清空选择，选择单个形状
* @param obj 对象 * @param shape 形状
*/ */
public contains(obj: any): boolean { public selectSingle(shape: AxShape) {
return this.objects.includes(obj); if (this.selection.first() !== null) {
this.selection.all().forEach(item => {
this.clearSelectEffect(item);
});
this.selection.clear();
}
this.selection.add(shape);
this.setSelectEffect(shape);
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
/** /**
* 选定对象 * 选择
* @param obj 对象 * @param shape 形状
*/ */
public select(obj: any) { public select(shape: AxShape) {
if (!this.contains(obj)) { if (this.selection.first() !== null
this.workingArea.emit('select', obj); && !this.isCtrlKeyClicked
this.objects.push(obj); && !this.selection.has(shape)) {
this.selection.all().forEach(item => {
this.clearSelectEffect(item);
});
this.selection.clear();
} }
this.selection.add(shape);
this.setSelectEffect(shape);
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
/** /**
* 取消选定对象 * 选择集合中的形状
* @param obj 对象 * @param shape 形状集合
*/ */
public deselect(obj: any) { public selectAll(shape: AxShape[]) {
if (this.contains(obj)) { this.selection.addArray(shape);
this.workingArea.emit('deselect', obj); this.selection.all().forEach(item => {
const idx = this.objects.findIndex(x => x === obj); this.setSelectEffect(item);
this.objects.splice(idx, 1); });
} AxMessageSystem.send(CanvasAction.selectionChanged);
} }
/** /**
* 选定或取消选定对象 * 先清空再选择全部
* @param obj 对象 * @param shape 形状集合
*/ */
public selectOrDeselect(obj: any) { public selectAllWithClear(shape: AxShape[]) {
if (this.contains(obj)) { if (this.selection.first() !== null) {
this.deselect(obj); this.selection.all().forEach(item => {
} else { this.clearSelectEffect(item);
this.select(obj); });
this.selection.clear();
} }
this.selection.addArray(shape);
this.selection.all().forEach(item => {
this.setSelectEffect(item);
});
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
/** /**
* 取消选定所有已选定对象 * 选择集合中所有id的形状
* @param ids 形状id集合
*/ */
public deselectAll() { public setHighlight(ids: string[]): void {
this.objects.forEach(item => { const shapes: AxShape[] = [];
this.workingArea.emit('deselect', item); // 重新选择
ids.forEach(item => {
const obj = this.backgroundImage.getChildByName(item);
shapes.push(obj as AxShape);
}); });
this.objects.splice(0, this.objects.length); this.selectAllWithClear(shapes);
} }
/** /**
* 取消选定所有对象后选定一个对象 * 取消所有选择
* @param obj 对象
*/ */
public selectOne(obj: any) { public deselectAll() {
if (this.isMultiselection) { if (this.selection.first() !== null) {
this.selectOrDeselect(obj); this.selection.all().forEach(item => {
} else { this.clearSelectEffect(item);
this.deselectAll(); });
this.select(obj); this.selection.clear();
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
} }
/** /**
* 选定对象集合中所有对象 * 设置选中效果
* @param objects 对象集合 * @param shape 形状
*/ */
public selectAll(objects: any[]) { public setSelectEffect(shape: AxShape) {
this.objects.forEach(item => { shape.hideBorder();
this.select(item); shape.setPointVisiable(false);
}); shape.showBorder();
shape.drawBorder(1 / this.backgroundImage.scale.x);
shape.setPointVisiable(this.allowEdit);
}
/**
* 设置形状选中效果
* @param shape 形状
*/
public clearSelectEffect(shape: AxShape) {
shape.hideBorder();
shape.setPointVisiable(false);
} }
} }
enum CanvasAction {
selectionChanged = 'selectionChanged',
/** copyDataChanged = 'copyDataChanged'
* 车辆类型
*/
export enum Type {
水源 = 0,
举高喷射消防车 = 1,
泡沫消防车 = 2,
水罐消防车 = 3,
压缩空气泡沫消防车 = 4
} }

Write Preview
Loading…
Cancel
Save