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

axSelection,axMessageSystem

dev
徐振升 4 years ago
parent
9ec8ef05d4
commit
dd3dc17622
8 changed files with 321 additions and 295 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. 11
      src/app/working-area/model/axImageShapeTest.ts
  2. 1
      src/app/working-area/model/axLegend.ts
  3. 90
      src/app/working-area/model/axMessageSystem.ts
  4. 24
      src/app/working-area/model/axRectangleShape.ts
  5. 48
      src/app/working-area/model/axSelection.ts
  6. 58
      src/app/working-area/model/axShape.ts
  7. 37
      src/app/working-area/model/messageSystem.ts
  8. 347
      src/app/working-area/working-area.component.ts

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();
} }
} }

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

@ -0,0 +1,48 @@
/**
* 选择器
*/
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 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();
}
}

58
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,7 @@ export class AxShape extends Graphics {
showName = true; showName = true;
// 边框 // 边框
border: PIXI.Graphics = new PIXI.Graphics(); border: PIXI.Graphics = new PIXI.Graphics();
constructor(assetData: any, workingArea: WorkingAreaComponent) { constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(); super();
this.border.visible = false; this.border.visible = false;
@ -35,7 +35,7 @@ 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.selectSingle(this);
} }
if (this.moveable) { if (this.moveable) {
event.currentTarget.data = event.data; event.currentTarget.data = event.data;
@ -86,14 +86,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 +110,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 +127,14 @@ export class AxShape extends Graphics {
this.border.lineStyle(scale * 1, 0x00a8ff); this.border.lineStyle(scale * 1, 0x00a8ff);
var spaceLength = scale * 1; let spaceLength = scale * 1;
var lineLenght = rect.width + 0.5 + 0.5; let 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); let 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 +145,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 +200,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` });

347
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较多，需要继续修改。
@ -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();
} }
@ -171,23 +174,56 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.deleteSelectedShape(); this.deleteSelectedShape();
} }
}); });
// 消息系统事件监听
AxMessageSystem.addListener(CanvasAction.selectionChanged, () => {
this.selection.all().forEach(item => {
item.showBorder();
item.drawBorder(1 / this.backgroundImage.scale.x);
item.setPointVisiable(this.allowEdit);
});
}, this);
} }
/** /**
* 删除选中的图标 * 删除选中的图标
*/ */
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 +351,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();
@ -419,39 +455,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 删除图标事件(数据处理) * 删除图标事件(数据处理)
*/ */
this.on('deleteIcon', (axShape: AxShape) => { 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;
}); });
} }
/** /**
@ -514,17 +518,16 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
}); });
} }
/** /**
* 设置高亮 * 设置选中
* 清空所有选择对象,选择ids集合元素
*/ */
public setHighlight(ids: string[]): void { public setHighlight(ids: string[]): void {
this.selection.deselectAll(); this.selection.clear();
ids.forEach(item => { ids.forEach(item => {
let obj = this.backgroundImage.getChildByName(item); const obj = this.backgroundImage.getChildByName(item);
if (obj === null) { this.selection.add(obj);
obj = this.app.stage.getChildByName(item);
}
this.selection.select(obj);
}); });
AxMessageSystem.send('');
} }
/** /**
* 创建楼层图形 * 创建楼层图形
@ -631,10 +634,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,18 +830,17 @@ 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) {
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if ( item instanceof AxImageShape if ( item instanceof AxImageShape
@ -850,26 +851,27 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
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); this.selection.add(item);
} }
} }
}); });
this.rectToolGraphics.clear(); this.rectToolGraphics.clear();
this.rectToolGraphics.visible = false; this.rectToolGraphics.visible = false;
AxMessageSystem.send(CanvasAction.selectionChanged);
} }
}) })
.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 +879,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 +953,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 +980,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 +1144,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 +1293,52 @@ 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 => { if (this.copyData.length > 0) {
item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); this.copyData.forEach(item => {
const newData = JSON.parse(JSON.stringify(item)); item.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
newData.Id = ObjectID.default.generate(), const newData = JSON.parse(JSON.stringify(item));
newData.CompanyId = companyId; newData.Id = ObjectID.default.generate(),
newData.BuildingId = buildingId; newData.CompanyId = companyId;
newData.FloorId = floorId; newData.BuildingId = buildingId;
newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5); newData.FloorId = floorId;
switch (item.InteractiveMode) { newData.Point = new PIXI.Point(item.Point.x + 5, item.Point.y + 5);
case PaintMode.singlePointIcon: switch (item.InteractiveMode) {
const singleIcon = new AxImageShape(newData, this); case PaintMode.singlePointIcon:
this.emit('createIcon', singleIcon); const singleIcon = new AxImageShape(newData, this);
break; this.emit('createIcon', singleIcon);
case PaintMode.lineIcon: break;
const lineIcon = new MultipointIcon(newData, this); case PaintMode.lineIcon:
this.emit('createIcon', lineIcon); const lineIcon = new MultipointIcon(newData, this);
break; this.emit('createIcon', lineIcon);
case PaintMode.polygonIcon: break;
const polygonIcon = new PolygonIcon(newData, this); case PaintMode.polygonIcon:
this.emit('createIcon', polygonIcon); const polygonIcon = new PolygonIcon(newData, this);
break; this.emit('createIcon', polygonIcon);
case PaintMode.Pipeline: break;
if (item.Name === '距离') { case PaintMode.Pipeline:
const wall = new AxArrowConnector(newData, this, true, true); if (item.Name === '距离') {
this.emit('createIcon', wall); const wall = new AxArrowConnector(newData, this, true, true);
} else if (item.Name === '普通墙' || item.Name === '承重墙') { this.emit('createIcon', wall);
const wall = new AxArrowConnector(newData, this, false, false); } else if (item.Name === '普通墙' || item.Name === '承重墙') {
this.emit('createIcon', wall); const wall = new AxArrowConnector(newData, this, false, false);
} this.emit('createIcon', wall);
break; }
} break;
this.selection.select(this.backgroundImage.getChildByName(newData.Id)); }
}); this.selection.add(this.backgroundImage.getChildByName(newData.Id));
});
AxMessageSystem.send(CanvasAction.selectionChanged);
}
} }
//////////////////////////////////////////////////////////////////////// 通用///////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// 通用/////////////////////////////////////////////////////////////////////////////
/** /**
@ -1357,7 +1362,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 +1389,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 +1415,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 +1433,26 @@ 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 对象
*/
public contains(obj: any): boolean {
return this.objects.includes(obj);
}
/**
* 选定对象
* @param obj 对象
*/
public select(obj: any) {
if (!this.contains(obj)) {
this.workingArea.emit('select', obj);
this.objects.push(obj);
}
}
/**
* 取消选定对象
* @param obj 对象
*/
public deselect(obj: any) {
if (this.contains(obj)) {
this.workingArea.emit('deselect', obj);
const idx = this.objects.findIndex(x => x === obj);
this.objects.splice(idx, 1);
}
}
/**
* 选定或取消选定对象
* @param obj 对象
*/
public selectOrDeselect(obj: any) {
if (this.contains(obj)) {
this.deselect(obj);
} else {
this.select(obj);
}
}
/**
* 取消选定所有已选定对象
*/
public deselectAll() { public deselectAll() {
this.objects.forEach(item => { if (this.selection.first() !== null) {
this.workingArea.emit('deselect', item); this.selection.all().forEach(item => {
}); item.hideBorder();
this.objects.splice(0, this.objects.length); item.setPointVisiable(false);
} });
/** this.selection.clear();
* 取消选定所有对象后选定一个对象 AxMessageSystem.send(CanvasAction.selectionChanged);
* @param obj 对象
*/
public selectOne(obj: any) {
if (this.isMultiselection) {
this.selectOrDeselect(obj);
} else {
this.deselectAll();
this.select(obj);
} }
} }
/** // 选择单个
* 选定对象集合中所有对象 public selectSingle(obj: any) {
* @param objects 对象集合 this.deselectAll();
*/ this.selection.add(obj);
public selectAll(objects: any[]) { AxMessageSystem.send(CanvasAction.selectionChanged);
this.objects.forEach(item => {
this.select(item);
});
} }
} }
enum CanvasAction {
selectionChanged = 'selectionChanged',
/** copyDataChanged = 'copyDataChanged'
* 车辆类型
*/
export enum Type {
水源 = 0,
举高喷射消防车 = 1,
泡沫消防车 = 2,
水罐消防车 = 3,
压缩空气泡沫消防车 = 4
} }

Write Preview
Loading…
Cancel
Save