shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[完善] Ctrl键框选效果

develop
徐振升 4 years ago
parent
1eb80784fe
commit
89d37105a3
1 changed files with 65 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      src/app/working-area/working-area.component.ts

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

@ -83,6 +83,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
public copyData: any[] = [];
private enterPaintEndButton = PIXI.Sprite.from('assets/images/enterPaintButton.jpg');
/**
* 框选工具图形
*/
private rectToolGraphics = new PIXI.Graphics();
/**
* 初始鼠标位置
*/
private initialScreenMousePos: PIXI.Point = new PIXI.Point();
/**
* 最终鼠标位置
*/
private finalScreenMousePos: PIXI.Point = new PIXI.Point();
// 根据ID 找到图标
// 根据ID 找到数据
@ -95,6 +107,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.eventManager.addGlobalEventListener('window', 'keyup', (event: any) => {
if (event.keyCode === 17) {
this.selection.isMultiselection = false;
this.rectToolGraphics.visible = false;
this.rectToolGraphics.clear();
}
if (event.keyCode === 46) {
this.selection.objects.forEach(item => {
@ -119,9 +133,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
});
// 测试代码
this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => {
if (event.keyCode === 97) {
console.log(ObjectID.default.generate());
}
});
}
@ -191,10 +203,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.createEnterPaintEndButton();
// this.backgroundImage.addChild(this.paintingLine);
this.on('select', obj => {
// console.log(obj.assetData);
// obj.assetData.Name = '这是我修改了的名字';
// console.log(this.canvasData.originaleveryStoreyData.data[obj.assetData.Id]);
// console.log(this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id]);
if (obj instanceof MultipointIcon) {
obj.setPointVisiable(true);
} else if (obj instanceof PolygonIcon) {
@ -221,7 +229,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
// console.log(this.currentClickPoint.position);
if (this.rectToolGraphics.visible === true) {
const init = this.initialScreenMousePos;
const final = this.finalScreenMousePos;
this.rectToolGraphics.clear();
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
this.rectToolGraphics.beginFill(0xccccf2, 0.25);
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
this.rectToolGraphics.endFill();
this.rectToolGraphics.closePath();
}
});
}
/**
@ -398,19 +417,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage.sortableChildren = true;
this.backgroundImage
.on('mousedown', event => {
if (!event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
if (!event.currentTarget.dragging && this.selection.isMultiselection === false) {
event.currentTarget.data = event.data;
// this.oldGroup = this.parentGroup;
// this.parentGroup = dragGroup;
event.currentTarget.dragging = true;
// event.currentTarget.scale.x *= 1.1;
// event.currentTarget.scale.y *= 1.1;
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y;
// tslint:disable-next-line: max-line-length
// 点击背景创建图标
// const pos = this.backgroundImage.toLocal(this.mousePosition);
switch (this.paintMode) {
case PaintMode.endPaint:
console.log(this.backgroundImage.toLocal(this.mousePosition));
@ -535,31 +547,47 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.paintingIcon = new PolygonIcon(this.paintPoints, this);
break;
}
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
this.rectToolGraphics.visible = true;
event.currentTarget.dragging = true;
this.initialScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
}
})
.on('mouseup', event => {
if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
// event.currentTarget.scale.y /= 1.1;
event.currentTarget.data = null;
}
if (this.rectToolGraphics.visible === true) {
this.backgroundImage.children.forEach(item => {
if (item instanceof SinglePointIcon
|| item instanceof MultipointIcon
|| item instanceof PolygonIcon) {
if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) {
this.selection.select(item);
}
}
});
this.rectToolGraphics.clear();
this.rectToolGraphics.visible = false;
}
})
.on('mouseupoutside', event => {
if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
if (event.currentTarget.dragging) {
event.currentTarget.dragging = false;
// this.parentGroup = this.oldGroup;
// event.currentTarget.scale.x /= 1.1;
// event.currentTarget.scale.y /= 1.1;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
if (event.currentTarget.dragging && event.currentTarget.name === this.backgroundImage.name) {
if (event.currentTarget.dragging && this.selection.isMultiselection === 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 (event.currentTarget.dragging && this.selection.isMultiselection === true) {
if (this.rectToolGraphics.visible === true) {
this.finalScreenMousePos = this.backgroundImage.toLocal(this.mousePosition);
}
}
}).on('rightclick', event => {
event.stopPropagation();
@ -574,6 +602,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.createEnterPaintEndButton();
this.backgroundImage.addChild(this.paintingLine);
}
/**
* 刷新背景图
*/
@ -635,6 +664,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.previewLineSegment.visible = false;
this.backgroundImage.addChild(this.currentClickPoint);
this.backgroundImage.addChild(this.previewLineSegment);
this.backgroundImage.addChild(this.rectToolGraphics);
}
/**
* 刷新预览线段
@ -1432,17 +1463,21 @@ export class Selection {
* @param obj 对象
*/
public select(obj: any) {
this.workingArea.emit('select', obj);
this.objects.push(obj);
if (!this.contains(obj)) {
this.workingArea.emit('select', obj);
this.objects.push(obj);
}
}
/**
* 取消选定对象
* @param obj 对象
*/
public deselect(obj: any) {
this.workingArea.emit('deselect', obj);
const idx = this.objects.findIndex(x => x === obj);
this.objects.splice(idx, 1);
if (this.contains(obj)) {
this.workingArea.emit('deselect', obj);
const idx = this.objects.findIndex(x => x === obj);
this.objects.splice(idx, 1);
}
}
/**
* 选定或取消选定对象

Write Preview
Loading…
Cancel
Save