|
|
|
|
@ -5,8 +5,10 @@ import { PaintMode } from './paintModel';
|
|
|
|
|
import * as PIXI from 'pixi.js'; |
|
|
|
|
import { PropertyInfo } from './PropertyInfo'; |
|
|
|
|
import { AxShape } from './axShape'; |
|
|
|
|
import { Sprite } from 'pixi.js'; |
|
|
|
|
import { Sprite, Point, Rectangle } from 'pixi.js'; |
|
|
|
|
import { AxArrowConnector } from './axArrowConnector'; |
|
|
|
|
import { AxMessageSystem } from './axMessageSystem'; |
|
|
|
|
import { EVENT_IMAGE_RESIZE } from './events'; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* 安信图片形状 |
|
|
|
|
@ -31,6 +33,7 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
wordWrapWidth: 100, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
text = new PIXI.Text(this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
|
|
|
|
@ -71,56 +74,177 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
this.addChild(this.image); |
|
|
|
|
this.addChild(this.selectionBox); |
|
|
|
|
|
|
|
|
|
////
|
|
|
|
|
// 是否拖动
|
|
|
|
|
var pointerDrag = false; |
|
|
|
|
// up-left
|
|
|
|
|
this.upLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.upLeft.cursor = 'nwse-resize'; |
|
|
|
|
this.upLeft.anchor.set(0.5); |
|
|
|
|
this.addChild(this.upLeft); |
|
|
|
|
this.upLeft.interactive = true; |
|
|
|
|
this.upLeft.on('pointerdown', event => { |
|
|
|
|
pointerDrag = true; |
|
|
|
|
this.image.anchor.set(1); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
}); |
|
|
|
|
this.upLeft.on('pointermove', event => { |
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
var pos = this.toLocal(event.data.global); |
|
|
|
|
var dX = Math.abs(pos.x - this.image.x); |
|
|
|
|
var dY = Math.abs(pos.y - this.image.y); |
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
this.refresh(); |
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
this.upLeft.on('pointerup', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.upLeft.on('pointerupoutside', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.upLeft.visible = false; |
|
|
|
|
// up-right
|
|
|
|
|
this.upRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.upRight.cursor = 'nesw-resize'; |
|
|
|
|
this.upRight.anchor.set(0.5); |
|
|
|
|
this.addChild(this.upRight); |
|
|
|
|
this.upRight.interactive = true; |
|
|
|
|
this.upRight.on('pointerdown', event => { |
|
|
|
|
pointerDrag = true; |
|
|
|
|
this.image.anchor.set(0, 1); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
}); |
|
|
|
|
this.upRight.on('pointermove', event => { |
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
var pos = this.toLocal(event.data.global); |
|
|
|
|
var dX = Math.abs(pos.x - this.image.x); |
|
|
|
|
var dY = Math.abs(pos.y - this.image.y); |
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
this.refresh(); |
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
this.upRight.on('pointerup', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.upRight.on('pointerupoutside', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.upRight.visible = false; |
|
|
|
|
// down-left
|
|
|
|
|
this.downLeft = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.downLeft.cursor = 'nesw-resize'; |
|
|
|
|
this.downLeft.anchor.set(0.5); |
|
|
|
|
this.addChild(this.downLeft); |
|
|
|
|
this.downLeft.interactive = true; |
|
|
|
|
this.downLeft.on('pointerdown', event => { |
|
|
|
|
pointerDrag = true; |
|
|
|
|
this.image.anchor.set(1, 0); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
}); |
|
|
|
|
this.downLeft.on('pointermove', event => { |
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
var pos = this.toLocal(event.data.global); |
|
|
|
|
var dX = Math.abs(pos.x - this.image.x); |
|
|
|
|
var dY = Math.abs(pos.y - this.image.y); |
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
this.refresh(); |
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
this.downLeft.on('pointerup', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.downLeft.on('pointerupoutside', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.downLeft.visible = false; |
|
|
|
|
// down-right
|
|
|
|
|
this.downRight = new PIXI.Sprite(this.pointTexture); |
|
|
|
|
this.downRight.cursor = 'nwse-resize'; |
|
|
|
|
this.downRight.anchor.set(0.5); |
|
|
|
|
this.addChild(this.downRight); |
|
|
|
|
this.downRight.interactive = true; |
|
|
|
|
this.downRight.on('pointerdown', event => { |
|
|
|
|
pointerDrag = true; |
|
|
|
|
this.image.anchor.set(0, 0); |
|
|
|
|
this.image.position.set(this.image.position.x - (this.image.width / 2), this.image.position.y - (this.image.height / 2)); |
|
|
|
|
event.stopPropagation(); |
|
|
|
|
}); |
|
|
|
|
this.downRight.on('pointermove', event => { |
|
|
|
|
// 移动时调整形状大小，然后重绘边框
|
|
|
|
|
// 检查右下角距离鼠标的位置，
|
|
|
|
|
if (pointerDrag) { |
|
|
|
|
var pos = this.toLocal(event.data.global); |
|
|
|
|
var dX = Math.abs(pos.x - this.image.x); |
|
|
|
|
var dY = Math.abs(pos.y - this.image.y); |
|
|
|
|
var result = dX > dY ? dX : dY; |
|
|
|
|
this.assetData.Width = Math.abs(result); |
|
|
|
|
this.assetData.Height = Math.abs(result); |
|
|
|
|
this.refresh(); |
|
|
|
|
AxMessageSystem.send(EVENT_IMAGE_RESIZE, this.assetData); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
this.downRight.on('pointerup', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.downRight.on('pointerupoutside', event => { |
|
|
|
|
if (pointerDrag) { |
|
|
|
|
pointerDrag = false; |
|
|
|
|
this.image.anchor.set(0.5); |
|
|
|
|
this.image.position.set(this.image.position.x + (this.image.width / 2), this.image.position.y + (this.image.height / 2)); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.downRight.visible = false; |
|
|
|
|
////
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// if (this.assetData.CanConnect) {
|
|
|
|
|
// // connectPoint
|
|
|
|
|
// this.connectPoint = new PIXI.Sprite(this.connectPointTexture);
|
|
|
|
|
// this.connectPoint.anchor.set(0.5);
|
|
|
|
|
// this.connectPoint.x = this.image.x;
|
|
|
|
|
// this.connectPoint.y = this.image.y;
|
|
|
|
|
// this.addChild(this.connectPoint);
|
|
|
|
|
// this.connectPoint.interactive = true;
|
|
|
|
|
// this.connectPoint
|
|
|
|
|
// .on('pointerdown', event => {
|
|
|
|
|
// event.stopPropagation();
|
|
|
|
|
// // this.paintingPipeline(this.x, this.y);
|
|
|
|
|
// })
|
|
|
|
|
// .on('pointerover', event => {
|
|
|
|
|
// this.setSelectionBox(true, this.connectPoint);
|
|
|
|
|
// })
|
|
|
|
|
// .on('pointerout', event => {
|
|
|
|
|
// this.setSelectionBox(false);
|
|
|
|
|
// });
|
|
|
|
|
// // this.showConnectionPoint(false);
|
|
|
|
|
// }
|
|
|
|
|
this.setItemScale(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
|
} |
|
|
|
|
// // 设置选择框
|
|
|
|
|
@ -193,79 +317,41 @@ export class AxImageShape extends AxShape {
|
|
|
|
|
this.downRight.scale.set(scale); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// paintingPipeline(x: number, y: number) {
|
|
|
|
|
// if (this.assetData.CanConnect) {
|
|
|
|
|
// if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
|
|
|
|
|
// if (this.workingArea.paintingShape === null) {
|
|
|
|
|
// this.workingArea.previewLineSegment.visible = true;
|
|
|
|
|
// this.workingArea.currentClickPoint.position =
|
|
|
|
|
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
|
|
|
|
|
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
|
|
|
|
|
// const json = JSON.parse(JSON.stringify(this.workingArea.canvasData.selectTemplateData.propertyInfos));
|
|
|
|
|
// const list = [];
|
|
|
|
|
// json.forEach(element => {
|
|
|
|
|
// const property = new PropertyInfo(element);
|
|
|
|
|
// list.push(property);
|
|
|
|
|
// });
|
|
|
|
|
// const tempData = {
|
|
|
|
|
// TemplateId: this.workingArea.canvasData.selectTemplateData.id,
|
|
|
|
|
// CanConnect: this.workingArea.canvasData.selectTemplateData.canConnect,
|
|
|
|
|
// Pipelines: new Array(),
|
|
|
|
|
// FloorId: this.workingArea.canvasData.selectStorey.id,
|
|
|
|
|
// Angle: this.workingArea.canvasData.selectTemplateData.angle,
|
|
|
|
|
// Color: this.workingArea.canvasData.selectTemplateData.color,
|
|
|
|
|
// Enabled: this.workingArea.canvasData.selectTemplateData.enabled,
|
|
|
|
|
// FillMode: this.workingArea.canvasData.selectTemplateData.fillMode,
|
|
|
|
|
// FireElementId: this.workingArea.canvasData.selectTemplateData.fireElementId,
|
|
|
|
|
// FixedSize: this.workingArea.canvasData.selectTemplateData.fixedSize,
|
|
|
|
|
// Height : 32,
|
|
|
|
|
// Width : 32,
|
|
|
|
|
// Id: ObjectID.default.generate(),
|
|
|
|
|
// ImageUrl: this.workingArea.canvasData.selectTemplateData.imageUrl,
|
|
|
|
|
// InteractiveMode: this.workingArea.canvasData.selectTemplateData.interactiveMode,
|
|
|
|
|
// MultiPoint : JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
|
|
|
|
|
// Point: new PIXI.Point(0, 0),
|
|
|
|
|
// Name : this.workingArea.canvasData.selectTemplateData.name,
|
|
|
|
|
// PropertyInfos: list,
|
|
|
|
|
// Border : this.workingArea.canvasData.selectTemplateData.border,
|
|
|
|
|
// DrawMode : this.workingArea.canvasData.selectTemplateData.drawMode,
|
|
|
|
|
// Thickness : this.workingArea.canvasData.selectTemplateData.thickness,
|
|
|
|
|
// IsFromBuilding : this.workingArea.canvasData.selectTemplateData.isFromBuilding,
|
|
|
|
|
// GameMode: this.workingArea.canvasData.gameMode,
|
|
|
|
|
// LinkedObjects: new Array(this.assetData.Id),
|
|
|
|
|
// Tag: this.workingArea.canvasData.selectTemplateData.tag
|
|
|
|
|
// };
|
|
|
|
|
// this.workingArea.paintingShape = new AxArrowConnector(tempData, this.workingArea, false, true);
|
|
|
|
|
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
|
|
|
|
|
// this.workingArea.emit('createIcon', this.workingArea.paintingShape);
|
|
|
|
|
// } else {
|
|
|
|
|
// this.workingArea.previewLineSegment.visible = false;
|
|
|
|
|
// this.workingArea.currentClickPoint.position =
|
|
|
|
|
// new PIXI.Point(this.workingArea.circleShadow.x, this.workingArea.circleShadow.y);
|
|
|
|
|
// this.workingArea.paintPoints.push(new PIXI.Point(x, y));
|
|
|
|
|
// this.workingArea.paintingShape.assetData.MultiPoint =
|
|
|
|
|
// JSON.parse(JSON.stringify(this.workingArea.paintPoints));
|
|
|
|
|
// this.workingArea.paintingShape.assetData.LinkedObjects.push(this.assetData.Id);
|
|
|
|
|
// this.assetData.Pipelines.push(this.workingArea.paintingShape.assetData.Id);
|
|
|
|
|
// this.workingArea.paintingShape.redraw();
|
|
|
|
|
// this.workingArea.initPipelineData();
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// 刷新
|
|
|
|
|
public refresh() { |
|
|
|
|
if (this.assetData.CanConnect) { |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
this.image.width = this.assetData.Width; |
|
|
|
|
this.image.height = this.assetData.Height; |
|
|
|
|
this.image.angle = this.assetData.Angle; |
|
|
|
|
this.text.text = this.assetData.Name |
|
|
|
|
+ '\r\n' |
|
|
|
|
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
|
|
|
|
|
if (this.image.anchor.x == 0) { |
|
|
|
|
if (this.image.anchor.y == 0) { |
|
|
|
|
this.text.x = this.image.x + this.image.width / 2; |
|
|
|
|
this.text.y = this.image.y; |
|
|
|
|
} else if (this.image.anchor.y == 0.5) { |
|
|
|
|
|
|
|
|
|
} else if (this.image.anchor.y == 1) { |
|
|
|
|
this.text.x = this.image.x + this.image.width / 2; |
|
|
|
|
this.text.y = this.image.y - this.image.height; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} else if (this.image.anchor.x == 0.5) { |
|
|
|
|
this.text.x = this.image.x; |
|
|
|
|
this.text.y = this.image.y - this.image.height / 2; |
|
|
|
|
} else if (this.image.anchor.x == 1) { |
|
|
|
|
if (this.image.anchor.y == 0) { |
|
|
|
|
this.text.x = this.image.x - this.image.width / 2; |
|
|
|
|
this.text.y = this.image.y; |
|
|
|
|
} else if (this.image.anchor.y == 0.5) { |
|
|
|
|
|
|
|
|
|
} else if (this.image.anchor.y == 1) { |
|
|
|
|
this.text.x = this.image.x - this.image.width / 2; |
|
|
|
|
this.text.y = this.image.y - this.image.height; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.angle = -this.workingArea.backgroundImage.angle; |
|
|
|
|
this.drawBorder(1 / this.workingArea.backgroundImage.scale.x); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
