shaojiahao
/
examSystem-Anxin
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

更新版本

master
徐振升 4 years ago
parent
831921552a
commit
2f8626c0dc
12 changed files with 943 additions and 818 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. 24
      src/app/canvas-share-data.service.ts
  2. 64
      src/app/working-area/model/axArrowConnector.ts
  3. 441
      src/app/working-area/model/axImageShape.ts
  4. 27
      src/app/working-area/model/axPreviewImageShape.ts
  5. 110
      src/app/working-area/model/axShape.ts
  6. 6
      src/app/working-area/model/multipointIcon.ts
  7. 8
      src/app/working-area/model/paintModel.ts
  8. 38
      src/app/working-area/model/pipeline.ts
  9. 39
      src/app/working-area/model/polygonIcon.ts
  10. 108
      src/app/working-area/model/putCarArea.ts
  11. 373
      src/app/working-area/model/singlePointIcon.ts
  12. 523
      src/app/working-area/working-area.component.ts

24
src/app/canvas-share-data.service.ts
Unescape View File

@ -8,10 +8,11 @@ import { GameMode } from './working-area/model/gameMode';
export class CanvasShareDataService { export class CanvasShareDataService {
constructor() { } constructor() { }
private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1); private _sendMessage: ReplaySubject<any> = new ReplaySubject<any>(1);
GameMode: any;
isChange = false; // 数据 是否改动 isChange = false; // 数据 是否改动
selectTemplateData: any; // 选择当前 素材库模板数据 selectTemplateData: any; // 选择当前 模板数据
// 总平面图/建筑 楼层 // 总平面图/建筑 楼层
selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据 selectStorey: any = {area: '', details: ''}; // 选择当前 楼层 数据
@ -28,7 +29,7 @@ export class CanvasShareDataService {
/** /**
* 游戏模式 * 游戏模式
*/ */
gameMode: GameMode = GameMode.Assignment; gameMode: GameMode = GameMode.BasicInformation;
facilityAssetsName = new Map<string, string>([ facilityAssetsName = new Map<string, string>([
[ '消防水池', '消防水池'], [ '消防水池', '消防水池'],
@ -81,6 +82,23 @@ export class CanvasShareDataService {
return returnData; return returnData;
} }
} }
/**
* 更新建筑数据
*/
public updateBuildingData() {
Object.keys(this.originaleveryStoreyData.data).forEach((key) => {
this.originalcompanyBuildingData.data[key] = this.originaleveryStoreyData.data[key];
});
}
/**
* 删除建筑数据中当前楼层的数据
*/
public deleteBuildingDataByCurrentFloorData():void {
Object.keys(this.originaleveryStoreyData.data).forEach((key) => {
// 删除建筑数据
delete this.originalcompanyBuildingData.data[key];
});
}
/** /**
* 获取单位毗邻信息 * 获取单位毗邻信息
*/ */
@ -665,7 +683,7 @@ export class AssetData {
/// <summary> /// <summary>
/// 是否来自建筑 /// 是否来自建筑
/// </summary> /// </summary>
public IsFromBuilding: boolean; public IsFromBuilding: boolean;
/// <summary> /// <summary>
/// 渲染方式。 /// 渲染方式。
/// </summary> /// </summary>

64
src/app/working-area/model/wallSpace.ts → src/app/working-area/model/axArrowConnector.ts
Unescape View File

@ -1,10 +1,11 @@
import { WorkingAreaComponent } from '../working-area.component'; import { WorkingAreaComponent } from '../working-area.component';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { AxShape } from './axShape';
/** /**
* 墙面 * 墙面
*/ */
export class WallSpace extends PIXI.Container { export class AxArrowConnector extends AxShape {
line: PIXI.Graphics; line: PIXI.Graphics;
text: PIXI.Text; text: PIXI.Text;
@ -26,8 +27,9 @@ export class WallSpace extends PIXI.Container {
}); });
pts: PIXI.Point[]; pts: PIXI.Point[];
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(); super(assetData, workingArea);
this.name = assetData.Id;
this.text = new PIXI.Text(this.assetData.Name this.text = new PIXI.Text(this.assetData.Name
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => + this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) =>
@ -44,22 +46,26 @@ export class WallSpace extends PIXI.Container {
* 刷新形状 * 刷新形状
*/ */
public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void { public refresh(c: PIXI.Graphics, pts: PIXI.Point[]): void {
if (pts.length < 2) {
return;
}
this.text.position = pts[0];
const strokeWidth = 1; const strokeWidth = 1;
const startWidth = 30 + strokeWidth; const startWidth = 30 + strokeWidth;
const endWidth = 30 + strokeWidth; const endWidth = 30 + strokeWidth;
const edgeWidth = 10; const edgeWidth = this.assetData.Thickness === 0?10:this.assetData.Thickness; // 宽度
const openEnded = false; const openEnded = false;
const markerStart = false; const markerStart = false;// 起始箭头
const markerEnd = true; const markerEnd = false;// 结束箭头
const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2;
const startSize = 30 + strokeWidth; const startSize = 30 + strokeWidth;
const endSize = 30 + strokeWidth; const endSize = 30 + strokeWidth;
const isRounded = true; const isRounded = true;
const lineColor = 0x000000;
const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');;
// Base vector (between first points)
const pe = pts[pts.length - 1]; const pe = pts[pts.length - 1];
// Finds first non-overlapping point
let i0 = 1; let i0 = 1;
while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) { while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) {
@ -73,8 +79,6 @@ export class WallSpace extends PIXI.Container {
if (dist === 0) { if (dist === 0) {
return; return;
} }
// Computes the norm and the inverse norm
let nx = dx / dist; let nx = dx / dist;
let nx1 = nx; let nx1 = nx;
let nx2 = nx; let nx2 = nx;
@ -84,7 +88,6 @@ export class WallSpace extends PIXI.Container {
let orthx = edgeWidth * ny; let orthx = edgeWidth * ny;
let orthy = -edgeWidth * nx; let orthy = -edgeWidth * nx;
// Stores the inbound function calls in reverse order in fns
const fns = []; const fns = [];
// if (isRounded) { // if (isRounded) {
@ -96,9 +99,9 @@ export class WallSpace extends PIXI.Container {
// c.lineTextureStyle({ miterLimit: 1.42 }); // c.lineTextureStyle({ miterLimit: 1.42 });
// } // }
// c.lineStyle(1, 0x000000, 1); // c.lineStyle(1, 0x000000, 1);
c.lineTextureStyle({ width: 1, color: 0x00000, join: PIXI.LINE_JOIN.ROUND }); c.clear();
// c.begin(); c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND });
c.beginFill(0xffffff); c.beginFill(fillColor);
const startNx = nx; const startNx = nx;
const startNy = ny; const startNy = ny;
@ -125,7 +128,6 @@ export class WallSpace extends PIXI.Container {
let dist1 = 0; let dist1 = 0;
for (let i = 0; i < pts.length - 2; i++) { for (let i = 0; i < pts.length - 2; i++) {
// Work out in which direction the line is bending
const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y); const pos = this.relativeCcw(pts[i].x, pts[i].y, pts[i + 1].x, pts[i + 1].y, pts[i + 2].x, pts[i + 2].y);
dx1 = pts[i + 2].x - pts[i + 1].x; dx1 = pts[i + 2].x - pts[i + 1].x;
@ -140,7 +142,6 @@ export class WallSpace extends PIXI.Container {
const tmp1 = nx * nx1 + ny * ny1; const tmp1 = nx * nx1 + ny * ny1;
const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04); const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04);
// Work out the normal orthogonal to the line through the control point and the edge sides intersection
nx2 = (nx + nx1); nx2 = (nx + nx1);
ny2 = (ny + ny1); ny2 = (ny + ny1);
@ -150,7 +151,6 @@ export class WallSpace extends PIXI.Container {
nx2 = nx2 / dist2; nx2 = nx2 / dist2;
ny2 = ny2 / dist2; ny2 = ny2 / dist2;
// Higher strokewidths require a larger minimum bend, 0.35 covers all but the most extreme cases
const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35)); const strokeWidthFactor = Math.max(tmp, Math.min(1 / 200 + 0.04, 0.35));
const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06); const angleFactor = (pos !== 0 && isRounded) ? Math.max(0.1, strokeWidthFactor) : Math.max(tmp, 0.06);
@ -160,8 +160,6 @@ export class WallSpace extends PIXI.Container {
const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor; const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor;
if (pos === 0 || !isRounded) { if (pos === 0 || !isRounded) {
// If the two segments are aligned, or if we're not drawing curved sections between segments
// just draw straight to the intersection point
c.lineTo(outX, outY); c.lineTo(outX, outY);
((x, y) => { ((x, y) => {
@ -250,10 +248,8 @@ export class WallSpace extends PIXI.Container {
// c.fillAndStroke(); // c.fillAndStroke();
// } // }
// Workaround for shadow on top of base arrow
// c.setShadow(false); // c.setShadow(false);
// Need to redraw the markers without the low miter limit
// c.setMiterLimit(4); // c.setMiterLimit(4);
// if (isRounded) // if (isRounded)
@ -263,8 +259,6 @@ export class WallSpace extends PIXI.Container {
// if (pts.length > 2) // if (pts.length > 2)
// { // {
// // Only to repaint markers if no waypoints
// // Need to redraw the markers without the low miter limit
// c.setMiterLimit(4); // c.setMiterLimit(4);
// if (markerStart && !openEnded) // if (markerStart && !openEnded)
// { // {
@ -283,11 +277,6 @@ export class WallSpace extends PIXI.Container {
// } // }
// } // }
} }
/**
* Function: paintMarker
*
* Paints the marker.
*/
paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
const widthArrowRatio = edgeWidth / arrowWidth; const widthArrowRatio = edgeWidth / arrowWidth;
@ -307,21 +296,6 @@ export class WallSpace extends PIXI.Container {
c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
} }
/**
* Function: relativeCcw
*
* Returns 1 if the given point on the right side of the segment, 0 if its
* on the segment, and -1 if the point is on the left side of the segment.
*
* Parameters:
*
* x1 - X-coordinate of the startpoint of the segment.
* y1 - Y-coordinate of the startpoint of the segment.
* x2 - X-coordinate of the endpoint of the segment.
* y2 - Y-coordinate of the endpoint of the segment.
* px - X-coordinate of the point.
* py - Y-coordinate of the point.
*/
relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
x2 -= x1; x2 -= x1;
y2 -= y1; y2 -= y1;
@ -344,4 +318,8 @@ export class WallSpace extends PIXI.Container {
} }
return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0);
} }
redraw(): void{
this.refresh(this.line, this.assetData.MultiPoint);
}
} }

441
src/app/working-area/model/axImageShape.ts
Unescape View File

@ -1,24 +1,443 @@
import { WorkingAreaComponent } from '../working-area.component';
import * as ObjectID from 'bson-objectid';
import { GameMode } from './gameMode';
import { Pipeline } from './pipeline';
import { PaintMode } from './paintModel';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape';
import { Sprite } from 'pixi.js';
/** /**
* 安信形状 * 安信图片形状
* AxImageShape
*/ */
export class AxImageShape extends PIXI.Container { export class AxImageShape extends AxShape {
style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
fill: ['#000000'],
stroke: '#ffffff',
strokeThickness: 3,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 3,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 1,
wordWrap: false,
wordWrapWidth: 100,
});
text = new PIXI.Text(this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
/**
* 选中圆点
*/
image: PIXI.Sprite; image: PIXI.Sprite;
selectionBox = new PIXI.Graphics();
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
connectPoint: Sprite;
// 可移动的
constructor() { // 可选中的
super();
} // up: PIXI.Sprite;
// down: PIXI.Sprite;
// left: PIXI.Sprite;
// right: PIXI.Sprite;
// upLeft: PIXI.Sprite;
// upRight: PIXI.Sprite;
// downLeft: PIXI.Sprite;
// downRight: PIXI.Sprite;
constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(assetData, workingArea);
this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y;
this.name = this.assetData.Id;
this.image = PIXI.Sprite.from(this.assetData.ImageUrl);
this.image.angle = this.assetData.Angle;
this.image.x = 0;
this.image.y = 0;
this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height;
this.image.alpha = 1;
this.image.anchor.set(0.5);
// this.image.interactive = true;
// this.image.buttonMode = true;
// this.image
// .on('mousedown', event => {
// event.stopPropagation();
// this.workingArea.selection.selectOne(this);
// // this.paintingPipeline(this.x, this.y);
// // 如果链接对象不为空,禁止移动
// if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
// event.currentTarget.parent.data = event.data;
// event.currentTarget.parent.alpha = 0.5;
// event.currentTarget.parent.dragging = true;
// }
// })
// .on('mouseup', event => {
// if (event.currentTarget.parent.dragging) {
// event.currentTarget.parent.alpha = 1;
// event.currentTarget.parent.dragging = false;
// event.currentTarget.parent.data = null;
// }
// })
// .on('mouseupoutside', event => {
// if (event.currentTarget.parent.dragging) {
// event.currentTarget.parent.alpha = 1;
// event.currentTarget.parent.dragging = false;
// event.currentTarget.parent.data = null;
// }
// })
// .on('mousemove', event => {
// if (event.currentTarget.parent.dragging) {
// // // 如果拖动过程中发现父对象不是背景图
// // if (this.parent !== this.workingArea.backgroundImage) {
// // this.setParent(this.workingArea.backgroundImage);
// // if (this.assetData.FixedSize) {
// // const scale = 1 / this.workingArea.backgroundImage.scale.x;
// // this.scale.set(scale);
// // }
// // }
// const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
// event.currentTarget.parent.x = newPosition.x;
// event.currentTarget.parent.y = newPosition.y;
// this.assetData.Point = new PIXI.Point(this.x, this.y);
// this.workingArea.canvasData.isChange = true;
// }
// })
// .on('rightclick', event => {
paintVertexShape(rect: PIXI.Rectangle) { // })
// .on('mouseover', event => {
// event.stopPropagation();
// if (this.workingArea.previewImage !== null
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
// this.workingArea.previewImage.visible = false;
// }
// // if (this.assetData.CanConnect) {
// // this.setSelectionBox(true, this.image);
// // }
// })
// .on('mouseout', event => {
// event.stopPropagation();
// if (this.workingArea.previewImage !== null
// && this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
// this.workingArea.previewImage.visible = true;
// }
// // if (this.assetData.CanConnect) {
// // this.setSelectionBox(false);
// // }
// });
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2;
this.text.anchor.set(0.5, 1);
} if (this.assetData.GameMode === 2) {
paintBackground(rect: PIXI.Rectangle) { } this.text.visible = false;
}
this.addChild(this.text);
this.addChild(this.image);
this.addChild(this.selectionBox);
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('mousedown', event => {
event.stopPropagation();
this.paintingPipeline(this.x, this.y);
})
.on('mouseover', event => {
this.setSelectionBox(true, this.connectPoint);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// // up
// this.up = new PIXI.Sprite(this.selectedPointTexture);
// this.up.anchor.set(0.5);
// this.up.x = this.image.x;
// this.up.y = this.image.y - (this.image.height / 2);
// this.addChild(this.up);
// this.up.interactive = true;
// this.up
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.up);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // down
// this.down = new PIXI.Sprite(this.selectedPointTexture);
// this.down.anchor.set(0.5);
// this.down.x = this.image.x;
// this.down.y = this.image.y + (this.image.height / 2);
// this.addChild(this.down);
// this.down.interactive = true;
// this.down
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.down.x, this.down.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.down);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // left
// this.left = new PIXI.Sprite(this.selectedPointTexture);
// this.left.anchor.set(0.5);
// this.left.x = this.image.x - (this.image.width / 2);
// this.left.y = this.image.y;
// this.addChild(this.left);
// this.left.interactive = true;
// this.left
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.left.x, this.left.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.left);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // right
// this.right = new PIXI.Sprite(this.selectedPointTexture);
// this.right.anchor.set(0.5);
// this.right.x = this.image.x + (this.image.width / 2);
// this.right.y = this.image.y;
// this.addChild(this.right);
// this.right.interactive = true;
// this.right
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.right.x, this.right.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.right);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // up-left
// this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
// this.upLeft.anchor.set(0.5);
// this.upLeft.x = this.image.x - (this.image.width / 2);
// this.upLeft.y = this.image.y - (this.image.height / 2);
// this.addChild(this.upLeft);
// this.upLeft.interactive = true;
// this.upLeft
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.upLeft.x, this.upLeft.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.upLeft);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // up-right
// this.upRight = new PIXI.Sprite(this.selectedPointTexture);
// this.upRight.anchor.set(0.5);
// this.upRight.x = this.image.x + (this.image.width / 2);
// this.upRight.y = this.image.y - (this.image.height / 2);
// this.addChild(this.upRight);
// this.upRight.interactive = true;
// this.upRight
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.upRight.x, this.upRight.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.upRight);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
paintForeground(rect: PIXI.Rectangle) { } // // down-left
// this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
// this.downLeft.anchor.set(0.5);
// this.downLeft.x = this.image.x - (this.image.width / 2);
// this.downLeft.y = this.image.y + (this.image.height / 2);
// this.addChild(this.downLeft);
// this.downLeft.interactive = true;
// this.downLeft
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.downLeft.x, this.downLeft.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.downLeft);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
// // down-right
// this.downRight = new PIXI.Sprite(this.selectedPointTexture);
// this.downRight.anchor.set(0.5);
// this.downRight.x = this.image.x + (this.image.width / 2);
// this.downRight.y = this.image.y + (this.image.height / 2);
// this.addChild(this.downRight);
// this.downRight.interactive = true;
// this.downRight
// .on('mousedown', event => {
// event.stopPropagation();
// const pt = this.toGlobal(new PIXI.Point(this.downRight.x, this.downRight.y));
// const pt2 = this.workingArea.backgroundImage.toLocal(pt);
// this.paintingPipeline(pt2.x, pt2.y);
// })
// .on('mouseover', event => {
// this.setSelectionBox(true, this.downRight);
// })
// .on('mouseout', event => {
// this.setSelectionBox(false);
// });
paintEdgeShape(pts: Array<PIXI.Point>) { } this.showConnectionPoint(false);
}
}
// 设置选择框
public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
if (b) {
this.selectionBox.lineStyle(2, 0x00EB00, 1);
this.selectionBox.position = sprite.position;
this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
// const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
// const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
// const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
// const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
// this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
// this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
// this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
// this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
} else {
this.selectionBox.clear();
}
}
// 设置名称
public setNameVisible(value: boolean, mode: GameMode) {
if (this.assetData.GameMode === mode) {
this.text.visible = value;
}
}
// 显示连接点
public showConnectionPoint(b: boolean) {
this.connectPoint.visible = b;
// this.up.visible = b;
// this.down.visible = b;
// this.left.visible = b;
// this.right.visible = b;
// this.upLeft.visible = b;
// this.downLeft.visible = b;
// this.upRight.visible = b;
// this.downRight.visible = b;
}
paintingPipeline(x: number, y: number) {
if (this.assetData.CanConnect) {
if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
if (this.workingArea.paintingPipeline === 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),
};
this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea);
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id);
this.workingArea.emit('createIcon', this.workingArea.paintingPipeline);
} 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.paintingPipeline.assetData.MultiPoint =
JSON.parse(JSON.stringify(this.workingArea.paintPoints));
this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this.assetData.Id);
this.assetData.Pipelines.push(this.workingArea.paintingPipeline.assetData.Id);
this.workingArea.paintingPipeline.refresh();
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;
}
} }

27
src/app/working-area/model/axPreviewImageShape.ts
Unescape View File

@ -0,0 +1,27 @@
import { Sprite, Texture } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
import { AxShape } from './axShape';
export class AxPreviewImageShape extends AxShape {
image: Sprite = null;
/**
*
*/
constructor(workingArea: WorkingAreaComponent) {
super(null, workingArea);
this.image = new Sprite();
this.image.width = 32;
this.image.height = 32;
this.image.anchor.set(0.5);
this.interactive = false;
this.scale.set(1 / this.workingArea.backgroundImage.scale.x);
this.addChild(this.image);
}
/**
* 重新设置图片地址
* @param url 图片路径
*/
setImageUrl(url: string) {
this.image.texture = Texture.from(url);
}
}

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

@ -1,56 +1,76 @@
import { Constructor } from '@angular/material/core/common-behaviors/constructor';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
// import { Point, Rectangle, Graphics } from 'pixi.js'; import { Point, Rectangle, Graphics, Container } from 'pixi.js';
import { WorkingAreaComponent } from '../working-area.component';
/** /**
* 安信形状 * 安信形状
*/ */
export class AxShape extends PIXI.Container { export class AxShape extends Container {
assetData: any;
workingArea: WorkingAreaComponent;
// 可以被移动的
moveable = true;
// 可以被选中的
selectable = true;
points: Array<PIXI.Point> = []; constructor(assetData: any, workingArea: WorkingAreaComponent) {
title: string;
titleVisible: boolean;
g: PIXI.Graphics = new PIXI.Graphics();
constructor() {
super(); super();
this.addChild(this.g); this.assetData = assetData;
// this.drawDashedLine(this.g, new Point(0, 0), new Point(0, 200), 0xff0000); this.workingArea = workingArea;
} this.workingArea.backgroundImage.addChild(this);
// /** this.interactive = true;
// * 绘制虚线 this.buttonMode = true;
// * @param g this.on('mousedown', event => {
// * @param p0 console.log(this.assetData);
// * @param pe event.stopPropagation();
// * @param color if (this.selectable) {
// * @param width this.workingArea.selection.selectOne(this);
// * @param dashLen }
// */ if (this.moveable) {
// drawDashedLine(g: Graphics, p0: Point, pe: Point, color: number, width: number = 1, dashLen: number = 5) { event.currentTarget.data = event.data;
// g.lineStyle(width, color); event.currentTarget.alpha = 0.5;
// const len = Math.sqrt(Math.pow(pe.x - p0.x, 2) + Math.pow(pe.y - p0.y, 2)); event.currentTarget.dragging = true;
// // tslint:disable-next-line: no-bitwise
// const num = ~~(len / dashLen);
// for (let i = 0; i < num; i++) {
// const x = p0.x + (pe.x - p0.x) / num * i;
// const y = p0.y + (pe.y - p0.y) / num * i;
// // tslint:disable-next-line: no-bitwise
// i & 1 ? g.lineTo(x, y) : g.moveTo(x, y);
// }
// }
paintVertexShape(rect: PIXI.Rectangle) { event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent);
// this.paintBackground(c, x, y, w, h); event.currentTarget.dragPoint.x -= event.currentTarget.x;
event.currentTarget.dragPoint.y -= event.currentTarget.y;
}
})
.on('mouseup', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mouseupoutside', event => {
if (event.currentTarget.dragging) {
event.currentTarget.alpha = 1;
event.currentTarget.dragging = false;
event.currentTarget.data = null;
}
})
.on('mousemove', event => {
if (event.currentTarget.dragging) {
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;
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.workingArea.canvasData.isChange = true;
}
})
.on('rightclick', event => {
// if (!this.outline || this.style == null || mxUtils.getValue( })
// this.style, mxConstants.STYLE_BACKGROUND_OUTLINE, 0) == 0) .on('mouseover', event => {
// { event.stopPropagation();
// c.setShadow(false); })
// this.paintForeground(c, x, y, w, h); .on('mouseout', event => {
// } event.stopPropagation();
});
}
redraw(): void {
} }
paintBackground(rect: PIXI.Rectangle) { }
paintForeground(rect: PIXI.Rectangle) { }
paintEdgeShape(pts: Array<PIXI.Point>) { }
} }

6
src/app/working-area/model/multipointIcon.ts
Unescape View File

@ -165,9 +165,6 @@ export class MultipointIcon extends PIXI.Container {
} }
}) })
.on('rightclick', event => { .on('rightclick', event => {
})
.on('mouseover', event => {
}); });
}); });
// // 缩放 // // 缩放
@ -178,6 +175,7 @@ export class MultipointIcon extends PIXI.Container {
// 添加选中事件 // 添加选中事件
this.iconsTilingSprite.forEach((item, index, array) => { this.iconsTilingSprite.forEach((item, index, array) => {
item.interactive = true; item.interactive = true;
item.buttonMode = true;
item.on('mousedown', event => { item.on('mousedown', event => {
event.stopPropagation(); event.stopPropagation();
this.workingArea.selection.selectOne(this); this.workingArea.selection.selectOne(this);
@ -245,4 +243,4 @@ export class MultipointIcon extends PIXI.Container {
+ '\r\n' + '\r\n'
+ this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue; + this.assetData.PropertyInfos.find(item => item.PropertyName === '名称/编号')?.PropertyValue;
} }
} }

8
src/app/working-area/model/paintModel.ts
Unescape View File

@ -18,6 +18,10 @@ export enum PaintMode {
* 水带多边形 * 水带多边形
*/ */
Pipeline, Pipeline,
/**
* 结束绘制
*/
endPaint,
/** /**
* 暂无 * 暂无
*/ */
@ -26,8 +30,4 @@ export enum PaintMode {
* 暂无 * 暂无
*/ */
Car, Car,
/**
* 结束绘制
*/
endPaint,
} }

38
src/app/working-area/model/pipeline.ts
Unescape View File

@ -1,14 +1,16 @@
import { WorkingAreaComponent } from '../working-area.component'; import { WorkingAreaComponent } from '../working-area.component';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { AxShape } from './axShape';
/** /**
* 管线 * 管线
*/ */
export class Pipeline extends PIXI.Container { export class Pipeline extends AxShape {
public line: PIXI.Graphics = new PIXI.Graphics(); public line: PIXI.Graphics = new PIXI.Graphics();
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { constructor(assetData: any, workingArea: WorkingAreaComponent) {
super(); super(assetData, workingArea);
this.name = this.assetData.Id; this.name = this.assetData.Id;
this.moveable = false;
this.x = this.assetData.Point.x; this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y; this.y = this.assetData.Point.y;
this.workingArea.backgroundImage.addChild(this); this.workingArea.backgroundImage.addChild(this);
@ -269,9 +271,17 @@ export class Pipeline extends PIXI.Container {
// } // }
} }
/** /**
* Function: paintMarker * 画箭头
* * @param c
* Paints the marker. * @param ptX
* @param ptY
* @param nx
* @param ny
* @param size
* @param arrowWidth
* @param edgeWidth
* @param spacing
* @param initialMove
*/ */
paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number,
size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) {
@ -292,21 +302,7 @@ export class Pipeline extends PIXI.Container {
c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY);
c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY);
} }
/**
* Function: relativeCcw
*
* Returns 1 if the given point on the right side of the segment, 0 if its
* on the segment, and -1 if the point is on the left side of the segment.
*
* Parameters:
*
* x1 - X-coordinate of the startpoint of the segment.
* y1 - Y-coordinate of the startpoint of the segment.
* x2 - X-coordinate of the endpoint of the segment.
* y2 - Y-coordinate of the endpoint of the segment.
* px - X-coordinate of the point.
* py - Y-coordinate of the point.
*/
relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) {
x2 -= x1; x2 -= x1;
y2 -= y1; y2 -= y1;

39
src/app/working-area/model/polygonIcon.ts
Unescape View File

@ -1,6 +1,7 @@
import { WorkingAreaComponent } from '../working-area.component'; import { WorkingAreaComponent } from '../working-area.component';
import { GameMode } from './gameMode'; import { GameMode } from './gameMode';
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { PaintMode } from './paintModel';
/** /**
* 多边形 * 多边形
@ -76,6 +77,7 @@ export class PolygonIcon extends PIXI.Container {
// 添加圆点事件 // 添加圆点事件
this.pointsGraphics.forEach((item, index, array) => { this.pointsGraphics.forEach((item, index, array) => {
item.interactive = true; item.interactive = true;
item.buttonMode = true;
item.zIndex = 1; item.zIndex = 1;
item.on('mousedown', event => { item.on('mousedown', event => {
event.stopPropagation(); event.stopPropagation();
@ -123,10 +125,24 @@ export class PolygonIcon extends PIXI.Container {
} }
}) })
.on('rightclick', event => { .on('rightclick', event => {
}); }) .on('mouseover', event => {
event.stopPropagation();
if (this.workingArea.previewImage !== null
&& this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
this.workingArea.previewImage.visible = false;
}
})
.on('mouseout', event => {
event.stopPropagation();
if (this.workingArea.previewImage !== null
&& this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
this.workingArea.previewImage.visible = true;
}
});
}); });
// 添加选中事件 // 添加选中事件
this.polygonGraphics.interactive = true; this.polygonGraphics.interactive = true;
this.polygonGraphics.buttonMode = true;
this.polygonGraphics this.polygonGraphics
.on('mousedown', event => { .on('mousedown', event => {
event.stopPropagation(); event.stopPropagation();
@ -167,12 +183,21 @@ export class PolygonIcon extends PIXI.Container {
}) })
.on('rightclick', event => { .on('rightclick', event => {
// this.workingArea.selection.deselectAll(); // this.workingArea.selection.deselectAll();
})
.on('mouseover', event => {
event.stopPropagation();
if (this.workingArea.previewImage !== null
&& this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
this.workingArea.previewImage.visible = false;
}
})
.on('mouseout', event => {
event.stopPropagation();
if (this.workingArea.previewImage !== null
&& this.workingArea.getPaintMode() === PaintMode.singlePointIcon) {
this.workingArea.previewImage.visible = true;
}
}); });
// // 缩放
// this.workingArea.on('backgroundScale', data => {
// const scale = 1 / data;
// this.text.scale.set(scale);
// });
} }
/** /**
* 设置点显示状态 * 设置点显示状态
@ -241,4 +266,4 @@ export class PolygonIcon extends PIXI.Container {
this.polygonGraphics.drawPolygon(this.getPoints()); this.polygonGraphics.drawPolygon(this.getPoints());
this.polygonGraphics.endFill(); this.polygonGraphics.endFill();
} }
} }

108
src/app/working-area/model/putCarArea.ts
Unescape View File

@ -1,59 +1,59 @@
import { OldFilmFilter } from 'pixi-filters'; // import { OldFilmFilter } from 'pixi-filters';
import { WorkingAreaComponent } from '../working-area.component'; // import { WorkingAreaComponent } from '../working-area.component';
import { PaintMode } from './paintModel'; // import { PaintMode } from './paintModel';
import { SinglePointIcon } from './singlePointIcon'; // import { SinglePointIcon } from './axImageShape';
import * as PIXI from 'pixi.js'; // import * as PIXI from 'pixi.js';
/** // /**
* 汽车放置区域 // * 汽车放置区域
*/ // */
export class PutCarArea extends PIXI.Container { // export class PutCarArea extends PIXI.Container {
public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); // public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { // constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super(); // super();
this.name = this.assetData.Id; // this.name = this.assetData.Id;
this.x = this.assetData.Point.x; // this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y; // this.y = this.assetData.Point.y;
this.workingArea.backgroundImage.addChild(this); // this.workingArea.backgroundImage.addChild(this);
this.sortableChildren = true; // this.sortableChildren = true;
// 填充多边形 // // 填充多边形
const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); // const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; // const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
this.polygonGraphics.beginFill(color, angle); // this.polygonGraphics.beginFill(color, angle);
this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); // this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
this.polygonGraphics.endFill(); // this.polygonGraphics.endFill();
this.addChild(this.polygonGraphics); // this.addChild(this.polygonGraphics);
// 添加选中事件 // // 添加选中事件
this.polygonGraphics.interactive = true; // this.polygonGraphics.interactive = true;
this.polygonGraphics // this.polygonGraphics
.on('pointerdown', (event) => { // .on('pointerdown', (event) => {
if (this.workingArea.getPaintMode() === PaintMode.Car) { // if (this.workingArea.getPaintMode() === PaintMode.Car) {
this.workingArea.selectCar.Point = // this.workingArea.selectCar.Point =
new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); // new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
this.workingArea.selectCar.Angle = this.assetData.Direction; // this.workingArea.selectCar.Angle = this.assetData.Direction;
const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); // const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
this.workingArea.setPaintMode(PaintMode.endPaint); // this.workingArea.setPaintMode(PaintMode.endPaint);
} // }
}) // })
.on('pointerup', (event) => { // .on('pointerup', (event) => {
}) // })
.on('pointerupoutside', (event) => { // .on('pointerupoutside', (event) => {
}) // })
.on('pointerover', (event) => { // .on('pointerover', (event) => {
this.workingArea.previewSinglePointIcon.filters = null; // this.workingArea.previewSinglePointIcon.filters = null;
this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; // this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
// 设置车辆方向 // // 设置车辆方向
this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; // this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
console.log(this.assetData.Name); // console.log(this.assetData.Name);
}) // })
.on('pointerout', (event) => { // .on('pointerout', (event) => {
this.workingArea.previewSinglePointIcon.filters = [ // this.workingArea.previewSinglePointIcon.filters = [
new OldFilmFilter() // new OldFilmFilter()
]; // ];
}); // });
} // }
} // }

373
src/app/working-area/model/singlePointIcon.ts
Unescape View File

@ -1,373 +0,0 @@
import { WorkingAreaComponent } from '../working-area.component';
import * as ObjectID from 'bson-objectid';
import { GameMode } from './gameMode';
import { Pipeline } from './pipeline';
import { PaintMode } from './paintModel';
import * as PIXI from 'pixi.js';
import { PropertyInfo } from './PropertyInfo';
import { AxShape } from './axShape';
/**
* 单点图标
*/
export class SinglePointIcon extends AxShape {
style = new PIXI.TextStyle({
fontFamily: 'Arial',
fontSize: 18,
fontStyle: 'normal',
fontWeight: 'bold',
fill: ['#000000'],
stroke: '#ffffff',
strokeThickness: 3,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 3,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 1,
wordWrap: false,
wordWrapWidth: 100,
});
text = new PIXI.Text(this.assetData.Name
+ '\r\n'
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style);
/**
* 选中圆点
*/
selectedPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png');
image = PIXI.Sprite.from(this.assetData.ImageUrl);
selectionBox = new PIXI.Graphics();
up: PIXI.Sprite;
down: PIXI.Sprite;
left: PIXI.Sprite;
right: PIXI.Sprite;
upLeft: PIXI.Sprite;
upRight: PIXI.Sprite;
downLeft: PIXI.Sprite;
downRight: PIXI.Sprite;
constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
super();
this.workingArea.backgroundImage.addChild(this);
this.x = this.assetData.Point.x;
this.y = this.assetData.Point.y;
this.name = this.assetData.Id;
this.image.angle = this.assetData.Angle;
this.image.x = 0;
this.image.y = 0;
this.image.width = this.assetData.Width;
this.image.height = this.assetData.Height;
// console.log(this.getBounds());
this.image.alpha = 1;
this.image.anchor.set(0.5);
this.image.interactive = true;
this.image
.on('mousedown', event => {
event.stopPropagation();
this.workingArea.selection.selectOne(this);
this.paintingPipeline(this.x, this.y);
// 如果链接对象不为空,禁止移动
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) {
event.currentTarget.parent.data = event.data;
event.currentTarget.parent.alpha = 0.5;
event.currentTarget.parent.dragging = true;
}
})
.on('mouseup', event => {
if (event.currentTarget.parent.dragging) {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
}
})
.on('mouseupoutside', event => {
if (event.currentTarget.parent.dragging) {
event.currentTarget.parent.alpha = 1;
event.currentTarget.parent.dragging = false;
event.currentTarget.parent.data = null;
}
})
.on('mousemove', event => {
if (event.currentTarget.parent.dragging) {
// 如果拖动过程中发现父对象不是背景图
if (this.parent !== this.workingArea.backgroundImage) {
this.setParent(this.workingArea.backgroundImage);
if (this.assetData.FixedSize) {
const scale = 1 / this.workingArea.backgroundImage.scale.x;
this.scale.set(scale);
}
}
const newPosition = event.currentTarget.parent.data.getLocalPosition(event.currentTarget.parent.parent);
event.currentTarget.parent.x = newPosition.x;
event.currentTarget.parent.y = newPosition.y;
this.assetData.Point = new PIXI.Point(this.x, this.y);
this.workingArea.canvasData.isChange = true;
}
})
.on('rightclick', event => {
})
.on('mouseover', event => {
// if (this.assetData.CanConnect) {
// this.setSelectionBox(true, this.image);
// }
})
.on('mouseout', event => {
// if (this.assetData.CanConnect) {
// this.setSelectionBox(false);
// }
});
this.text.x = this.image.x;
this.text.y = this.image.y - this.image.height / 2;
this.text.anchor.set(0.5, 1);
if (this.assetData.GameMode === 2) {
this.text.visible = false;
}
this.addChild(this.text);
this.addChild(this.image);
this.addChild(this.selectionBox);
if (this.assetData.CanConnect) {
// up
this.up = new PIXI.Sprite(this.selectedPointTexture);
this.up.anchor.set(0.5);
this.up.x = this.image.x;
this.up.y = this.image.y - (this.image.height / 2);
this.addChild(this.up);
this.up.interactive = true;
this.up
.on('mousedown', event => {
event.stopPropagation();
const pt = this.toGlobal(new PIXI.Point(this.up.x, this.up.y));
const pt2 = this.workingArea.backgroundImage.toLocal(pt);
this.paintingPipeline(pt2.x, pt2.y);
})
.on('mouseover', event => {
this.setSelectionBox(true, this.up);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// down
this.down = new PIXI.Sprite(this.selectedPointTexture);
this.down.anchor.set(0.5);
this.down.x = this.image.x;
this.down.y = this.image.y + (this.image.height / 2);
this.addChild(this.down);
this.down.interactive = true;
this.down
.on('mouseover', event => {
this.setSelectionBox(true, this.down);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// left
this.left = new PIXI.Sprite(this.selectedPointTexture);
this.left.anchor.set(0.5);
this.left.x = this.image.x - (this.image.width / 2);
this.left.y = this.image.y;
this.addChild(this.left);
this.left.interactive = true;
this.left
.on('mouseover', event => {
this.setSelectionBox(true, this.left);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// right
this.right = new PIXI.Sprite(this.selectedPointTexture);
this.right.anchor.set(0.5);
this.right.x = this.image.x + (this.image.width / 2);
this.right.y = this.image.y;
this.addChild(this.right);
this.right.interactive = true;
this.right
.on('mouseover', event => {
this.setSelectionBox(true, this.right);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// up-left
this.upLeft = new PIXI.Sprite(this.selectedPointTexture);
this.upLeft.anchor.set(0.5);
this.upLeft.x = this.image.x - (this.image.width / 2);
this.upLeft.y = this.image.y - (this.image.height / 2);
this.addChild(this.upLeft);
this.upLeft.interactive = true;
this.upLeft
.on('mouseover', event => {
this.setSelectionBox(true, this.upLeft);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// up-right
this.upRight = new PIXI.Sprite(this.selectedPointTexture);
this.upRight.anchor.set(0.5);
this.upRight.x = this.image.x + (this.image.width / 2);
this.upRight.y = this.image.y - (this.image.height / 2);
this.addChild(this.upRight);
this.upRight.interactive = true;
this.upRight
.on('mouseover', event => {
this.setSelectionBox(true, this.upRight);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// down-left
this.downLeft = new PIXI.Sprite(this.selectedPointTexture);
this.downLeft.anchor.set(0.5);
this.downLeft.x = this.image.x - (this.image.width / 2);
this.downLeft.y = this.image.y + (this.image.height / 2);
this.addChild(this.downLeft);
this.downLeft.interactive = true;
this.downLeft
.on('mouseover', event => {
this.setSelectionBox(true, this.downLeft);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
// down-right
this.downRight = new PIXI.Sprite(this.selectedPointTexture);
this.downRight.anchor.set(0.5);
this.downRight.x = this.image.x + (this.image.width / 2);
this.downRight.y = this.image.y + (this.image.height / 2);
this.addChild(this.downRight);
this.downRight.interactive = true;
this.downRight
.on('mouseover', event => {
this.setSelectionBox(true, this.downRight);
})
.on('mouseout', event => {
this.setSelectionBox(false);
});
this.showConnectionPoint(false);
}
}
// 设置选择框
public setSelectionBox(b: boolean, sprite?: PIXI.Sprite) {
if (b) {
this.selectionBox.lineStyle(2, 0x00EB00, 1);
this.selectionBox.position = sprite.position;
this.selectionBox.drawRect(- sprite.width / 2, - sprite.height / 2, sprite.width, sprite.height);
// const p0 = new PIXI.Point(- sprite.width / 2, - sprite.height / 2);
// const pe = new PIXI.Point(sprite.width / 2, sprite.height / 2);
// const pw = new PIXI.Point(p0.x + sprite.width, p0.y);
// const ph = new PIXI.Point(p0.x, p0.y + sprite.height);
// this.drawDashedLine(this.selectionBox, p0, pw, 0x1234ff);
// this.drawDashedLine(this.selectionBox, p0, ph, 0x1234ff);
// this.drawDashedLine(this.selectionBox, pe, pw, 0x1234ff);
// this.drawDashedLine(this.selectionBox, pe, ph, 0x1234ff);
} else {
this.selectionBox.clear();
}
}
// 设置名称
public setNameVisible(value: boolean, mode: GameMode) {
if (this.assetData.GameMode === mode) {
this.text.visible = value;
}
}
// 显示连接点
public showConnectionPoint(b: boolean) {
this.up.visible = b;
this.down.visible = b;
this.left.visible = b;
this.right.visible = b;
this.upLeft.visible = b;
this.downLeft.visible = b;
this.upRight.visible = b;
this.downRight.visible = b;
}
paintingPipeline(x: number, y: number) {
if (this.assetData.CanConnect) {
if (this.workingArea.getPaintMode() === PaintMode.Pipeline) {
if (this.workingArea.paintingPipeline === 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 tempData = {
// Id: ObjectID.default.generate(),
// MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)),
// Point: new PIXI.Point(0, 0),
// Name: '管线',
// LinkedObjects: new Array(),
// };
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.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea);
// this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
// this.assetData.Pipelines.push(this.workingArea.paintingPipeline.Id);
this.workingArea.emit('createIcon', this.workingArea.paintingPipeline);
} 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.paintingPipeline.assetData.MultiPoint =
JSON.parse(JSON.stringify(this.workingArea.paintPoints));
// this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this);
// this.assetData.Pipelines.push(this.workingArea.paintingPipeline);
this.workingArea.paintingPipeline.refresh();
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;
}
}

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

@ -2,21 +2,20 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, Input } from '
import * as PIXI from 'pixi.js'; import * as PIXI from 'pixi.js';
import { EventEmitter } from 'events'; import { EventEmitter } from 'events';
import { EventManager } from '@angular/platform-browser'; import { EventManager } from '@angular/platform-browser';
import { OutlineFilter, OldFilmFilter } from 'pixi-filters'; import { OutlineFilter } from 'pixi-filters';
import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service'; import { AssetData, CanvasShareDataService, DisposalNodeData, FloorNodeData } from '../canvas-share-data.service';
import * as ObjectID from 'bson-objectid'; import * as ObjectID from 'bson-objectid';
import { Charm } from './charm'; import { Charm } from './charm';
import { SinglePointIcon } from './model/singlePointIcon'; import { AxImageShape } from './model/axImageShape';
import { GameMode } from './model/gameMode'; import { GameMode } from './model/gameMode';
import { MultipointIcon } from './model/multipointIcon'; import { MultipointIcon } from './model/multipointIcon';
import { PolygonIcon } from './model/polygonIcon'; import { PolygonIcon } from './model/polygonIcon';
import { PutCarArea } from './model/putCarArea';
import { Arrows } from './model/arrows';
import { Pipeline } from './model/pipeline'; import { Pipeline } from './model/pipeline';
import { PaintMode } from './model/paintModel'; import { PaintMode } from './model/paintModel';
import { WallSpace } from './model/wallSpace';
import { AxShape } from './model/axShape'; import { AxShape } from './model/axShape';
import { PropertyInfo } from './model/PropertyInfo'; import { PropertyInfo } from './model/PropertyInfo';
import { AxPreviewImageShape } from './model/axPreviewImageShape';
import { AxArrowConnector } from './model/axArrowConnector';
@Component({ @Component({
@ -50,11 +49,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/** /**
* 背景图 * 背景图
*/ */
public backgroundImage: PIXI.Sprite; public backgroundImage: PIXI.Sprite = null;
/** /**
* 预览单点图标 * 绘制图片形状时预览状态的图片
*/ */
public previewSinglePointIcon = new PIXI.Sprite(); public previewImage: AxPreviewImageShape = null;
/** /**
* 预览线段 * 预览线段
*/ */
@ -70,7 +69,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/** /**
* 绘画模式 * 绘画模式
*/ */
private paintMode: PaintMode; private paintMode: PaintMode = PaintMode.endPaint;
/** /**
* 选择器 * 选择器
*/ */
@ -82,20 +81,19 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/** /**
* 绘制点集合 * 绘制点集合
*/ */
public paintPoints: PIXI.Point[]; public paintPoints: PIXI.Point[] = [];
/** /**
* 绘制中的管线 * 绘制中的管线
*/ */
public paintingPipeline: Pipeline; public paintingPipeline: Pipeline = null;
/**
* 绘制中的箭头
*/
public paintingArrows: Arrows = null;
/** /**
* 绘制中的多点图标 * 绘制中的多点图标
*/ */
public paintingIcon: MultipointIcon; public paintingIcon: MultipointIcon;
public paintingWall: AxShape; /**
* 绘制中的图形
*/
public paintingShape: AxShape = null;
/** /**
* 绘制中的连线 * 绘制中的连线
*/ */
@ -159,52 +157,33 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// 按Del键删除选中的图标 // 按Del键删除选中的图标
if (event.keyCode === 46) { if (event.keyCode === 46) {
this.selection.objects.forEach(item => { this.selection.objects.forEach(item => {
delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id]; if (this.allowEdit
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id)); && this.canvasData.gameMode === item.assetData.GameMode) {
this.canvasData.isChange = true; switch (this.canvasData.gameMode) {
case 0:
// 删除楼层数据
delete this.canvasData.originaleveryStoreyData.data[item.assetData.Id];
// 删除建筑数据
delete this.canvasData.originalcompanyBuildingData.data[item.assetData.Id];
// 取消渲染
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
// 数据更改
this.canvasData.isChange = true;
break;
case 1:
delete this.canvasData.selectPanelPoint.Data.DefinedIncrement[item.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Increment[item.assetData.Id];
delete this.canvasData.selectPanelPoint.Data.Stock[item.assetData.Id];
this.backgroundImage.removeChild(this.backgroundImage.getChildByName(item.assetData.Id));
this.canvasData.isChange = true;
break;
}
}
}); });
this.selection.deselectAll();
this.emit('deleteIcon'); this.emit('deleteIcon');
} }
}); });
// 打印当前工作区信息
this.eventManager.addGlobalEventListener('window', 'keypress', (event: any) => {
// console.log(event.keyCode);
if (event.keyCode === 32) {
switch (this.paintMode) {
case 0:
console.log(`当前的绘制模式是：单点图标`);
break;
case 1:
console.log(`当前的绘制模式是：线段图标`);
break;
case 2:
console.log(`当前的绘制模式是：自定义多边形`);
break;
case 3:
console.log(`当前的绘制模式是：水带多边形`);
break;
case 4:
console.log(`当前的绘制模式是：暂无`);
break;
case 5:
console.log(`当前的绘制模式是：暂无`);
break;
case 6:
console.log(`当前的绘制模式是：结束绘制`);
break;
default:
break;
}
console.log('当前楼层的数据：');
console.log(this.canvasData.originaleveryStoreyData.data);
console.log('绘制中的管线：');
console.log(this.paintingPipeline);
console.log('处置预案数据：');
console.log(this.canvasData.selectPanelPoint.Data);
}
});
} }
/** /**
* 页面初始化 * 页面初始化
@ -298,11 +277,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.app.ticker.add((delta) => { this.app.ticker.add((delta) => {
this.animator.update(); this.animator.update();
this.mousePosition = this.app.renderer.plugins.interaction.mouse.global; this.mousePosition = this.app.renderer.plugins.interaction.mouse.global;
if (this.backgroundImage !== undefined) { // 预览图片
this.previewSinglePointIcon.position = this.backgroundImage.toLocal(this.mousePosition); if (this.previewImage !== null) {
this.previewImage.position = this.backgroundImage.toLocal(this.mousePosition);
}
if (this.backgroundImage !== null) {
this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition); this.circleShadow.position = this.backgroundImage.toLocal(this.mousePosition);
this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position); this.refreshPreviewLineSegment(this.currentClickPoint.position, this.circleShadow.position);
} }
/**
* 显示框选
*/
if (this.rectToolGraphics.visible === true) { if (this.rectToolGraphics.visible === true) {
const init = this.initialScreenMousePos; const init = this.initialScreenMousePos;
@ -311,20 +297,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.rectToolGraphics.clear(); this.rectToolGraphics.clear();
this.rectToolGraphics.lineStyle(2, 0x00ff00, 1); this.rectToolGraphics.lineStyle(2, 0x00ff00, 1);
this.rectToolGraphics.beginFill(0xccccf2, 0.25); this.rectToolGraphics.beginFill(0xccccf2, 0.25);
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y); if (final.x > init.x && final.y > init.y) {
this.rectToolGraphics.drawRect(init.x, init.y, final.x - init.x, final.y - init.y);
} else if (final.x > init.x && final.y < init.y) {
this.rectToolGraphics.drawRect(init.x, final.y, final.x - init.x, init.y - final.y);
} else if (final.x < init.x && final.y > init.y) {
this.rectToolGraphics.drawRect(final.x, init.y, init.x - final.x, final.y - init.y);
} else if (final.x < init.x && final.y < init.y) {
this.rectToolGraphics.drawRect(final.x, final.y, init.x - final.x, init.y - final.y);
}
this.rectToolGraphics.endFill(); this.rectToolGraphics.endFill();
this.rectToolGraphics.closePath();
}
if (this.paintingArrows !== null) {
this.paintingArrows.assetData.pointB = new PIXI.Point(this.circleShadow.position.x, this.circleShadow.position.y);
this.paintingArrows.refresh();
} }
}); });
/** /**
* 选中事件 * 选中事件
*/ */
this.on('select', obj => { this.on('select', obj => {
// this.moveIconToScreenCenter(obj);
if (this.allowEdit) { if (this.allowEdit) {
if (obj instanceof MultipointIcon) { if (obj instanceof MultipointIcon) {
if (obj.assetData.GameMode === this.canvasData.gameMode) { if (obj.assetData.GameMode === this.canvasData.gameMode) {
@ -353,6 +341,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (obj instanceof MultipointIcon) { if (obj instanceof MultipointIcon) {
obj.setPointVisiable(false); obj.setPointVisiable(false);
} else if (obj instanceof PolygonIcon) { } else if (obj instanceof PolygonIcon) {
obj.filters = [];
obj.setPointVisiable(false); obj.setPointVisiable(false);
} else { } else {
obj.filters = []; obj.filters = [];
@ -361,10 +350,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
obj.filters = []; obj.filters = [];
} }
}); });
/**
* 根据背景缩放事件
*/
this.on('backgroundScale', scale => { this.on('backgroundScale', scale => {
this.previewSinglePointIcon.scale.set((0.5 / scale)); this.backgroundImage?.children.forEach(item => {
this.backgroundImage.children.forEach(item => { if (item instanceof AxImageShape) {
if (item instanceof SinglePointIcon) {
if (item.assetData.FixedSize) { if (item.assetData.FixedSize) {
const data = 1 / scale; const data = 1 / scale;
item.scale.set(data); item.scale.set(data);
@ -378,19 +369,26 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
} else if (item instanceof PolygonIcon) { } else if (item instanceof PolygonIcon) {
const data = 1 / scale; const data = 1 / scale;
item.text.scale.set(data); item.text.scale.set(data);
item.pointsGraphics.forEach(point => {
point.scale.set(data);
});
} else if (item instanceof AxPreviewImageShape) {
const data = 1 / scale;
item.scale.set(data);
} }
}); });
}); });
/**
* 创建图标事件
*/
this.on('createIcon', obj => { this.on('createIcon', obj => {
if (obj.assetData.GameMode === GameMode.BasicInformation) { if (obj.assetData.GameMode === GameMode.BasicInformation) {
// if (obj.assetData.IsFromBuilding) { // 添加楼层数据
// this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData; this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData;
// } else { // 添加建筑数据
this.canvasData.originaleveryStoreyData.data[obj.assetData.Id] = obj.assetData; this.canvasData.originalcompanyBuildingData.data[obj.assetData.Id] = obj.assetData;
// }
} else { } else {
// console.log();
if (this.canvasData.selectPanelPoint.Data === undefined if (this.canvasData.selectPanelPoint.Data === undefined
|| this.canvasData.selectPanelPoint.Data === null) { || this.canvasData.selectPanelPoint.Data === null) {
this.canvasData.selectPanelPoint.Data = new FloorNodeData(); this.canvasData.selectPanelPoint.Data = new FloorNodeData();
@ -399,6 +397,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
} }
this.canvasData.isChange = true; this.canvasData.isChange = true;
}); });
// todo 创建一个无限大的grid
const cell = new PIXI.Graphics();
cell.lineStyle(1, 0xff0000);
cell.beginFill(0x0000ff);
cell.drawRect(0, 0, 500, 500);
cell.endFill();
this.app.stage.addChild(cell);
} }
/** /**
* 重置画布 * 重置画布
@ -413,7 +420,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
public setNameVisible(value: boolean, mode: GameMode): void { public setNameVisible(value: boolean, mode: GameMode): void {
this.backgroundImage?.children.forEach(item => { this.backgroundImage?.children.forEach(item => {
if (item instanceof SinglePointIcon) { if (item instanceof AxImageShape) {
item.setNameVisible(value, mode); item.setNameVisible(value, mode);
} else if (item instanceof MultipointIcon) { } else if (item instanceof MultipointIcon) {
item.setNameVisible(value, mode); item.setNameVisible(value, mode);
@ -428,12 +435,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
public refreshIcon(id: string): void { public refreshIcon(id: string): void {
const icon = this.backgroundImage.children.find(item => item.name === id); const icon = this.backgroundImage.children.find(item => item.name === id);
if (icon instanceof SinglePointIcon) { console.log(icon);
if (icon instanceof AxImageShape) {
icon.refresh(); icon.refresh();
} else if (icon instanceof MultipointIcon) { } else if (icon instanceof MultipointIcon) {
icon.refresh(); icon.refresh();
} else if (icon instanceof PolygonIcon) { } else if (icon instanceof PolygonIcon) {
icon.refresh(); icon.refresh();
} else if (icon instanceof AxArrowConnector) {
icon.redraw();
} }
} }
/** /**
@ -442,8 +452,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
public setIconScale(value: number): void { public setIconScale(value: number): void {
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof SinglePointIcon) { if (item instanceof AxImageShape) {
item.scale.set(value); console.log(item.image.scale);
item.image.scale.set(value);
} else if (item instanceof MultipointIcon) { } else if (item instanceof MultipointIcon) {
} else if (item instanceof PolygonIcon) { } else if (item instanceof PolygonIcon) {
@ -471,46 +482,46 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.setPaintMode(PaintMode.endPaint); this.setPaintMode(PaintMode.endPaint);
this.resetCanvas(); this.resetCanvas();
this.destroyBackgroundImage(); this.destroyBackgroundImage();
await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl); if (!this.canvasData.selectStorey.imageUrl) {
return;
// this.refreshBackgroundImage(); }
// this.versionChecking();
await this.createBackgroundImage(this.canvasData.selectStorey.imageUrl);
this.createFloorShape();
if (this.canvasData.gameMode === GameMode.Assignment) {
this.createWorkNode();
}
this.emit('backgroundScale', this.backgroundImage.scale.x);
}
/**
* 创建楼层图形
*/
private createFloorShape() {
const floorData = this.canvasData.originaleveryStoreyData.data; const floorData = this.canvasData.originaleveryStoreyData.data;
// const buildingData = this.canvasData.originalcompanyBuildingData.data;
// const floor = this.canvasData.selectStorey;
// // key=>属性名 data[key]=>属性值
Object.keys(floorData).forEach((key) => { Object.keys(floorData).forEach((key) => {
// console.log(floorData[key]);
switch (floorData[key].InteractiveMode) { switch (floorData[key].InteractiveMode) {
case 0: case 0:
const singleIcon = new SinglePointIcon(floorData[key], this); const singleIcon = new AxImageShape(floorData[key], this);
singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
break; break;
case 1: case 1:
const icon = new MultipointIcon(floorData[key], this); const icon = new MultipointIcon(floorData[key], this);
break; break;
case 2: case 2:
const polygonIcon = new PolygonIcon(floorData[key], this); const polygonIcon = new PolygonIcon(floorData[key], this);
break; break;
case 3:
if (floorData[key].Name === '水带') {
const pipeline = new Pipeline(floorData[key], this);
} else {
const wall = new AxArrowConnector(floorData[key], this);
}
break;
} }
}); });
// Object.keys(buildingData).forEach((key) => { }
// if (buildingData[key].FloorId === floor.id) {
// switch (buildingData[key].InteractiveMode) {
// case 0:
// const singleIcon = new SinglePointIcon(buildingData[key], this);
// break;
// case 1:
// const icon = new MultipointIcon(buildingData[key], this);
// break;
// case 2:
// const polygonIcon = new PolygonIcon(buildingData[key], this);
// break;
// }
// }
// });
private createWorkNode() {
// 加载处置节点数据 // 加载处置节点数据
const nodeData = this.canvasData.selectPanelPoint.Data; const nodeData = this.canvasData.selectPanelPoint.Data;
if (nodeData !== undefined && nodeData !== null) { if (nodeData !== undefined && nodeData !== null) {
@ -518,23 +529,22 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
Object.keys(nodeData[key]).forEach((tempKey) => { Object.keys(nodeData[key]).forEach((tempKey) => {
switch (nodeData[key][tempKey].InteractiveMode) { switch (nodeData[key][tempKey].InteractiveMode) {
case 0: case 0:
const singleIcon = new SinglePointIcon(nodeData[key][tempKey], this); const singleIcon = new AxImageShape(nodeData[key][tempKey], this);
singleIcon.moveable = this.allowEdit && this.canvasData.gameMode === singleIcon.assetData.GameMode;
break; break;
case 1: case 1:
if (nodeData[key][tempKey].Name === '水带') {
const pipeline = new Pipeline(nodeData[key][tempKey], this);
} else {
const icon = new MultipointIcon(nodeData[key][tempKey], this); const icon = new MultipointIcon(nodeData[key][tempKey], this);
} break;
break; case 2:
case 2:
const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this); const polygonIcon = new PolygonIcon(nodeData[key][tempKey], this);
break; break;
case 3:
const pipeline = new Pipeline(nodeData[key][tempKey], this);
break;
} }
}); });
}); });
} }
this.emit('backgroundScale', this.backgroundImage.scale.x);
} }
/** /**
* *
@ -614,7 +624,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.backgroundImage.y = this.app.view.height / 2; this.backgroundImage.y = this.app.view.height / 2;
this.backgroundImage.interactive = true; this.backgroundImage.interactive = true;
this.backgroundImage.name = 'background'; this.backgroundImage.name = 'background';
this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
// const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth; // const left = this.init.element.nativeElement.querySelector('.functionalDomainLeft').clientWidth;
// const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth; // const right = this.init.element.nativeElement.querySelector('.functionalDomainRight').clientWidth;
const imageWidth = this.backgroundImage.texture.width; const imageWidth = this.backgroundImage.texture.width;
@ -667,7 +677,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
ImageUrl: this.canvasData.selectTemplateData.imageUrl, ImageUrl: this.canvasData.selectTemplateData.imageUrl,
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode, InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
MultiPoint : null, MultiPoint : null,
Point: new PIXI.Point(this.previewSinglePointIcon.x, this.previewSinglePointIcon.y), Point: new PIXI.Point(this.previewImage.x, this.previewImage.y),
Name : this.canvasData.selectTemplateData.name, Name : this.canvasData.selectTemplateData.name,
PropertyInfos: list, PropertyInfos: list,
Border : this.canvasData.selectTemplateData.border, Border : this.canvasData.selectTemplateData.border,
@ -676,7 +686,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding, IsFromBuilding : this.canvasData.selectTemplateData.isFromBuilding,
GameMode : this.canvasData.gameMode GameMode : this.canvasData.gameMode
}; };
const singleIcon = new SinglePointIcon(assetData, this); const singleIcon = new AxImageShape(assetData, this);
this.emit('createIcon', singleIcon); this.emit('createIcon', singleIcon);
this.emit('backgroundScale', this.backgroundImage.scale.x); this.emit('backgroundScale', this.backgroundImage.scale.x);
break; break;
@ -761,78 +771,60 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// this.paintingIcon = new PolygonIcon(this.paintPoints, this); // this.paintingIcon = new PolygonIcon(this.paintPoints, this);
break; break;
case PaintMode.Pipeline: case PaintMode.Pipeline:
if (this.canvasData.selectTemplateData.name === '水带') {
if (this.paintingPipeline !== null) { if (this.paintingPipeline !== null) {
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
this.paintingPipeline.refresh();
}
} else {
this.previewLineSegment.visible = true;
this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y); this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y)); this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
this.paintingPipeline.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
this.paintingPipeline.refresh();
}
// this.emit('backgroundScale', this.backgroundImage.scale.x);
break;
case PaintMode.Arrows:
if (this.paintingArrows === null) {
const data = {
Id: ObjectID.default.generate(),
name: 'string',
point: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
pointA: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
pointB: new PIXI.Point(this.circleShadow.x, this.circleShadow.y),
source: 'assets/images/进攻方向.png',
};
this.paintingArrows = new Arrows(data, this);
} else {
this.paintingArrows.ready = true;
this.paintingArrows = null;
this.paintMode = PaintMode.endPaint;
}
break;
case PaintMode.Car:
// this.previewLineSegment.visible = true;
// this.currentClickPoint.position = new PIXI.Point(this.circleShadow.x, this.circleShadow.y);
// this.paintPoints.push(new PIXI.Point(this.circleShadow.x, this.circleShadow.y));
// if (this.paintPoints.length >= 2) {
// this.enterPaintEndButton.position = this.circleShadow.position;
// this.enterPaintEndButton.visible = true;
// }
// if (this.paintingWall !== null) {
// this.backgroundImage.removeChild(this.paintingWall);
// }
// const jsonObject1 = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
// const propertyList1 = [];
// jsonObject1.forEach(element => {
// const property = new PropertyInfo(element);
// propertyList1.push(property);
// });
// const assetData11 = {
// TemplateId: this.canvasData.selectTemplateData.id,
// FloorId: this.canvasData.selectStorey.id,
// Angle: this.canvasData.selectTemplateData.angle,
// Color: this.canvasData.selectTemplateData.color,
// Enabled: this.canvasData.selectTemplateData.enabled,
// FillMode: this.canvasData.selectTemplateData.fillMode,
// FireElementId: this.canvasData.selectTemplateData.fireElementId,
// FixedSize: this.canvasData.selectTemplateData.fixedSize,
// Height: 32,
// Width: 32,
// Id: ObjectID.default.generate(),
// ImageUrl: this.canvasData.selectTemplateData.imageUrl,
// InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
// MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
// Point: new PIXI.Point(0, 0),
// Name: this.canvasData.selectTemplateData.name,
// PropertyInfos: propertyList1,
// Border: this.canvasData.selectTemplateData.border,
// DrawMode: this.canvasData.selectTemplateData.drawMode,
// Thickness: this.canvasData.selectTemplateData.thickness,
// IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
// GameMode: this.canvasData.gameMode
// };
// this.paintingWall = new WallSpace(assetData11, this); if (this.paintPoints.length >= 2) {
// this.emit('backgroundScale', this.backgroundImage.scale.x); this.enterPaintEndButton.position = this.circleShadow.position;
this.enterPaintEndButton.visible = true;
}
if (this.paintingShape === null) {
const jsonObject = JSON.parse(JSON.stringify(this.canvasData.selectTemplateData.propertyInfos));
const propertyList = [];
jsonObject.forEach(element => {
const property = new PropertyInfo(element);
propertyList.push(property);
});
const assetData2 = {
TemplateId: this.canvasData.selectTemplateData.id,
FloorId: this.canvasData.selectStorey.id,
Angle: this.canvasData.selectTemplateData.angle,
Color: this.canvasData.selectTemplateData.color,
Enabled: this.canvasData.selectTemplateData.enabled,
FillMode: this.canvasData.selectTemplateData.fillMode,
FireElementId: this.canvasData.selectTemplateData.fireElementId,
FixedSize: this.canvasData.selectTemplateData.fixedSize,
Height: 32,
Width: 32,
Id: ObjectID.default.generate(),
ImageUrl: this.canvasData.selectTemplateData.imageUrl,
InteractiveMode: this.canvasData.selectTemplateData.interactiveMode,
MultiPoint: JSON.parse(JSON.stringify(this.paintPoints)),
Point: new PIXI.Point(0, 0),
Name: this.canvasData.selectTemplateData.name,
PropertyInfos: propertyList,
Border: this.canvasData.selectTemplateData.border,
DrawMode: this.canvasData.selectTemplateData.drawMode,
Thickness: this.canvasData.selectTemplateData.thickness,
IsFromBuilding: this.canvasData.selectTemplateData.isFromBuilding,
GameMode: this.canvasData.gameMode
};
this.paintingShape = new AxArrowConnector(assetData2, this);
} else {
this.paintingShape.assetData.MultiPoint = JSON.parse(JSON.stringify(this.paintPoints));
this.paintingShape.redraw();
}
}
this.emit('backgroundScale', this.backgroundImage.scale.x);
break; break;
} }
} else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) { } else if (!event.currentTarget.dragging && this.selection.isMultiselection === true) {
@ -849,11 +841,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
} }
if (this.rectToolGraphics.visible === true) { if (this.rectToolGraphics.visible === true) {
this.backgroundImage.children.forEach(item => { this.backgroundImage.children.forEach(item => {
if (item instanceof SinglePointIcon if ( item instanceof AxImageShape
|| item instanceof MultipointIcon || item instanceof MultipointIcon
|| item instanceof PolygonIcon) { || item instanceof PolygonIcon
if (this.rectToolGraphics.getLocalBounds().contains(item.x, item.y)) { || item instanceof AxArrowConnector) {
this.selection.select(item); // 判断2个矩形是否相交
const rect1 = this.rectToolGraphics.getBounds();
const rect2 = item.getBounds();
if (this.isOverlap(rect1, rect2)) {
this.selection.select(item);
} }
} }
}); });
@ -884,19 +880,38 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.setPaintMode(PaintMode.endPaint); this.setPaintMode(PaintMode.endPaint);
}) })
.on('pointerover', (event) => { .on('pointerover', (event) => {
this.previewSinglePointIcon.filters = null; if (this.previewImage !== null
&& this.paintMode === PaintMode.singlePointIcon) {
this.previewImage.visible = true;
}
}) })
.on('pointerout', (event) => { .on('pointerout', (event) => {
this.previewSinglePointIcon.filters = null; if (this.previewImage !== null
&& this.paintMode === PaintMode.singlePointIcon) {
this.previewImage.visible = false;
}
}); });
this.app.stage.addChild(this.backgroundImage); this.app.stage.addChild(this.backgroundImage);
this.createPreviewSinglePointIcon(); this.createPreviewImage();
this.createPreviewLineSegment(); this.createPreviewLineSegment();
this.createCircleShadow(); this.createCircleShadow();
this.createEnterPaintEndButton(); this.createEnterPaintEndButton();
this.backgroundImage.addChild(this.paintingLine); this.backgroundImage.addChild(this.paintingLine);
} }
public isOverlap(rect1, rect2):boolean {
const l1 = { x: rect1.x, y: rect1.y }
const r1 = { x: rect1.x + rect1.width, y: rect1.y + rect1.height }
const l2 = { x: rect2.x, y: rect2.y }
const r2 = { x: rect2.x + rect2.width, y: rect2.y + rect2.height }
if (
l1.x > r2.x ||
l2.x > r1.x ||
l1.y > r2.y ||
l2.y > r1.y
) return false
return true
}
/** /**
* 刷新背景图 * 刷新背景图
@ -905,9 +920,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (!this.canvasData.selectStorey.imageUrl) { if (!this.canvasData.selectStorey.imageUrl) {
this.backgroundImage.visible = false; this.backgroundImage.visible = false;
} else { } else {
this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl); // this.backgroundImage.texture = PIXI.Texture.from(this.canvasData.selectStorey.imageUrl);
this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle; // this.backgroundImage.angle = this.canvasData.selectStorey.imageAngle;
this.backgroundImage.visible = true; // this.backgroundImage.visible = true;
this.refresh();
} }
} }
/** /**
@ -921,8 +937,8 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* @param scale 缩放系数 * @param scale 缩放系数
*/ */
public setBackgroundScale(scale: number): void { public setBackgroundScale(scale: number): void {
this.backgroundImage.scale.set(scale); this.backgroundImage?.scale.set(scale);
this.emit('backgroundScale', this.backgroundImage.scale.x); this.emit('backgroundScale', this.backgroundImage?.scale.x);
} }
/** /**
* 设置背景图角度 * 设置背景图角度
@ -934,22 +950,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
/** /**
* 创建预览单点图标 * 创建预览单点图标
*/ */
private createPreviewSinglePointIcon(): void { private createPreviewImage(): void {
this.previewSinglePointIcon = PIXI.Sprite.from('assets/images/noImg.png'); // if (this.previewSinglePointIcon === null) {
this.previewSinglePointIcon.width = 32; // this.previewSinglePointIcon = PIXI.Sprite.from(this.canvasData.selectTemplateData.imageUrl);
this.previewSinglePointIcon.height = 32; // this.previewSinglePointIcon.width = this.canvasData.selectTemplateData.width;
this.previewSinglePointIcon.alpha = 1; // this.previewSinglePointIcon.height = this.canvasData.selectTemplateData.height;
this.previewSinglePointIcon.anchor.set(0.5); // this.previewSinglePointIcon.anchor.set(0.5);
this.previewSinglePointIcon.visible = false; // this.previewSinglePointIcon.interactive = false;
this.backgroundImage.addChild(this.previewSinglePointIcon); // this.backgroundImage.addChild(this.previewSinglePointIcon);
} // this.previewSinglePointIcon.scale.set(1 / this.backgroundImage.scale.x);
/** // }
* 改变预览单点图标 this.previewImage = new AxPreviewImageShape(this);
* @param uri 图片地址 this.previewImage.visible = false;
*/
private changePreviewSinglePointIcon(uri: string): void {
this.previewSinglePointIcon.texture = PIXI.Texture.from(uri);
this.previewSinglePointIcon.visible = true;
} }
/** /**
* 创建预览线段 * 创建预览线段
@ -969,7 +981,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
*/ */
private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) { private refreshPreviewLineSegment(pointA: PIXI.Point, pointB: PIXI.Point) {
this.previewLineSegment.clear(); this.previewLineSegment.clear();
this.previewLineSegment.lineStyle(1, 0xffd900, 1); this.previewLineSegment.lineStyle(5, 0x00ff00, 1);
this.previewLineSegment.moveTo(pointA.x, pointA.y); this.previewLineSegment.moveTo(pointA.x, pointA.y);
this.previewLineSegment.lineTo(pointB.x, pointB.y ); this.previewLineSegment.lineTo(pointB.x, pointB.y );
} }
@ -986,7 +998,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
} }
showConnectionPoint(b: boolean) { showConnectionPoint(b: boolean) {
this.backgroundImage?.children.forEach(item => { this.backgroundImage?.children.forEach(item => {
if (item instanceof SinglePointIcon) { if (item instanceof AxImageShape) {
if (item.assetData.CanConnect) { if (item.assetData.CanConnect) {
item.showConnectionPoint(b); item.showConnectionPoint(b);
} }
@ -997,27 +1009,9 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 开始绘制 * 开始绘制
*/ */
public beginPaint() { public beginPaint() {
if (this.canvasData.selectTemplateData.name === '水带') { this.selection.deselectAll();
this.showConnectionPoint(true); this.setPaintMode(PaintMode.endPaint);
this.setPaintMode(PaintMode.Pipeline); this.setPaintMode(this.canvasData.selectTemplateData.interactiveMode);
return;
}
switch (this.canvasData.selectTemplateData.interactiveMode) {
case 0:
this.setPaintMode(PaintMode.singlePointIcon);
break;
case 1:
this.setPaintMode(PaintMode.lineIcon);
break;
case 2:
this.setPaintMode(PaintMode.polygonIcon);
break;
case 3:
if (this.canvasData.selectTemplateData.name) {
this.setPaintMode(PaintMode.Pipeline);
}
break;
}
} }
/** /**
* 初始化管线数据 * 初始化管线数据
@ -1034,18 +1028,14 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* @param mode 状态 * @param mode 状态
*/ */
public setPaintMode(mode: PaintMode) { public setPaintMode(mode: PaintMode) {
if (this.paintMode === mode) { return; } if (this.paintMode === mode) {
this.paintMode = mode; return;
if (this.paintMode !== PaintMode.Pipeline) {
this.showConnectionPoint(false);
} }
this.paintMode = mode;
switch (this.paintMode) { switch (this.paintMode) {
case PaintMode.Pipeline:
break;
case PaintMode.singlePointIcon: case PaintMode.singlePointIcon:
this.previewSinglePointIcon.visible = false; this.previewImage.visible = true;
this.changePreviewSinglePointIcon(this.canvasData.selectTemplateData.imageUrl); this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
break; break;
case PaintMode.lineIcon: case PaintMode.lineIcon:
this.circleShadow.visible = false; this.circleShadow.visible = false;
@ -1054,7 +1044,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
if (this.paintingIcon !== null) { if (this.paintingIcon !== null) {
this.backgroundImage.removeChild(this.paintingIcon); this.backgroundImage.removeChild(this.paintingIcon);
} }
this.previewSinglePointIcon.texture = PIXI.Texture.from(this.canvasData.selectTemplateData.imageUrl); this.previewImage.setImageUrl(this.canvasData.selectTemplateData.imageUrl);
this.circleShadow.visible = true; this.circleShadow.visible = true;
break; break;
case PaintMode.polygonIcon: case PaintMode.polygonIcon:
@ -1065,7 +1055,18 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.paintingLine.clear(); this.paintingLine.clear();
this.circleShadow.visible = true; this.circleShadow.visible = true;
break; break;
case PaintMode.Pipeline:
if (this.canvasData.selectTemplateData.name==='水带') {
this.showConnectionPoint(true);
} else {
}
break;
case PaintMode.endPaint: case PaintMode.endPaint:
this.showConnectionPoint(false);
if (this.previewImage !== null) {
this.previewImage.visible = false;
}
// 重置组件状态 // 重置组件状态
if ( this.paintingIcon !== undefined if ( this.paintingIcon !== undefined
&& this.paintingIcon !== null) { && this.paintingIcon !== null) {
@ -1076,6 +1077,11 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
&& this.paintingPipeline !== null) { && this.paintingPipeline !== null) {
this.backgroundImage.removeChild(this.paintingPipeline); this.backgroundImage.removeChild(this.paintingPipeline);
} }
if (this.paintingShape !== null) {
this.backgroundImage.removeChild(this.paintingShape);
this.paintingShape = null;
}
this.enterPaintEndButton.visible = false;
this.paintingLine.clear(); this.paintingLine.clear();
this.resetData(); this.resetData();
break; break;
@ -1093,10 +1099,6 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
* 重置 * 重置
*/ */
public resetData() { public resetData() {
this.previewSinglePointIcon.filters = null;
this.previewSinglePointIcon.visible = false;
this.previewSinglePointIcon.angle = 0;
this.initPipelineData(); this.initPipelineData();
// //
this.circleShadow.visible = false; this.circleShadow.visible = false;
@ -1108,7 +1110,10 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
private enterPaint(): void { private enterPaint(): void {
this.previewLineSegment.visible = false; this.previewLineSegment.visible = false;
this.enterPaintEndButton.visible = false; this.enterPaintEndButton.visible = false;
console.log(this.paintMode);
switch (this.paintMode) { switch (this.paintMode) {
case PaintMode.singlePointIcon:
break;
case PaintMode.lineIcon: case PaintMode.lineIcon:
if (this.paintPoints.length >= 2) { if (this.paintPoints.length >= 2) {
this.emit('createIcon', this.paintingIcon); this.emit('createIcon', this.paintingIcon);
@ -1152,6 +1157,12 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
this.emit('createIcon', polygonIcon); this.emit('createIcon', polygonIcon);
} }
break; break;
case PaintMode.Pipeline:
if (this.canvasData.selectTemplateData.name !== '水带') {
this.emit('createIcon', this.paintingShape);
this.paintingShape = null;
}
break;
} }
this.paintPoints.splice(0, this.paintPoints.length); this.paintPoints.splice(0, this.paintPoints.length);
this.emit('backgroundScale', this.backgroundImage.scale.x); this.emit('backgroundScale', this.backgroundImage.scale.x);
@ -1185,7 +1196,7 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
// } // }
switch (item.InteractiveMode) { switch (item.InteractiveMode) {
case PaintMode.singlePointIcon: case PaintMode.singlePointIcon:
const singleIcon = new SinglePointIcon(newData, this); const singleIcon = new AxImageShape(newData, this);
break; break;
case PaintMode.lineIcon: case PaintMode.lineIcon:
const lineIcon = new MultipointIcon(newData, this); const lineIcon = new MultipointIcon(newData, this);
@ -1193,9 +1204,15 @@ export class WorkingAreaComponent extends EventEmitter implements OnInit, AfterV
case PaintMode.polygonIcon: case PaintMode.polygonIcon:
const polygonIcon = new PolygonIcon(newData, this); const polygonIcon = new PolygonIcon(newData, this);
break; break;
case PaintMode.Pipeline:
if (item.Name !== '水带') {
const wall = new AxArrowConnector(newData, this);
}
break;
} }
this.selection.select(this.backgroundImage.getChildByName(newData.Id)); this.selection.select(this.backgroundImage.getChildByName(newData.Id));
}); });
this.emit('backgroundScale', this.backgroundImage.scale.x);
} }
} }

Write Preview
Loading…
Cancel
Save