chenjingyu
4 years ago
34 changed files with 2539 additions and 1413 deletions
@ -1,6 +1,6 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://121.37.20.190:8000", |
||||
"target": "http://39.106.78.171:8000", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
} |
||||
|
||||
@ -1,55 +1,57 @@
|
||||
<div class="unittypeHeader"> |
||||
<div style="width: 100%;height: 100%;overflow-y: auto;"> |
||||
<div class="unittypeHeader"> |
||||
<button mat-raised-button color="primary" (click)='open()' class="left">创建单位</button> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<table mat-table [dataSource]="dataSource"class="mat-elevation-z8"> |
||||
|
||||
<ng-container matColumnDef="company"> |
||||
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="template"> |
||||
<th mat-header-cell *matHeaderCellDef>单位信息模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.basicCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="fireControl"> |
||||
<th mat-header-cell *matHeaderCellDef>消防要素模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.fireCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="facilityCategory"> |
||||
<th mat-header-cell *matHeaderCellDef>消防设施模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.facilityCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
<div > |
||||
<table mat-table [dataSource]="dataSource"class="mat-elevation-z8"> |
||||
|
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
||||
编辑 |
||||
</button> |
||||
|
||||
<button mat-raised-button color="primary" *ngIf=!element.enabled |
||||
(click)='enabled(element)' class="marginLeft"> |
||||
启用 |
||||
</button> |
||||
<button mat-raised-button color="warn" *ngIf=element.enabled |
||||
(click)='prohibit(element)'class="marginLeft"> |
||||
禁用 |
||||
</button> |
||||
<button mat-raised-button color="warn" (click)='delete(element.id)'class="marginLeft"> |
||||
删除 |
||||
</button> |
||||
|
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
|
||||
</table> |
||||
</div> |
||||
<ng-container matColumnDef="company"> |
||||
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="template"> |
||||
<th mat-header-cell *matHeaderCellDef>单位信息模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.basicCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="fireControl"> |
||||
<th mat-header-cell *matHeaderCellDef>消防要素模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.fireCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="facilityCategory"> |
||||
<th mat-header-cell *matHeaderCellDef>消防设施模板</th> |
||||
<td mat-cell *matCellDef="let element">{{element.facilityCategoryName}}</td> |
||||
</ng-container> |
||||
|
||||
<ng-container matColumnDef="operation"> |
||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||
<td mat-cell *matCellDef="let element"> |
||||
|
||||
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
||||
编辑 |
||||
</button> |
||||
|
||||
<button mat-raised-button color="primary" *ngIf=!element.enabled |
||||
(click)='enabled(element)' class="marginLeft"> |
||||
启用 |
||||
</button> |
||||
<button mat-raised-button color="warn" *ngIf=element.enabled |
||||
(click)='prohibit(element)'class="marginLeft"> |
||||
禁用 |
||||
</button> |
||||
<button mat-raised-button color="warn" (click)='delete(element.id)'class="marginLeft"> |
||||
删除 |
||||
</button> |
||||
|
||||
</td> |
||||
</ng-container> |
||||
|
||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||
|
||||
</table> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,62 @@
|
||||
/** |
||||
* 属性 |
||||
*/ |
||||
export class PropertyInfo { |
||||
constructor(instanceData: any) { |
||||
this.Tag = instanceData.tag; |
||||
this.Order = instanceData.order; |
||||
this.Enabled = instanceData.enabled; |
||||
this.Visible = instanceData.visible; |
||||
this.Required = instanceData.required; |
||||
this.RuleName = instanceData.ruleName; |
||||
this.RuleValue = instanceData.ruleValue; |
||||
this.PhysicalUnit = instanceData.physicalUnit; |
||||
this.PropertyName = instanceData.propertyName; |
||||
this.PropertyType = instanceData.propertyType; |
||||
this.PropertyValue = instanceData.propertyValue; |
||||
} |
||||
/** |
||||
* 标记位,用于扩展 |
||||
*/ |
||||
public Tag: string; |
||||
/** |
||||
* 属性排序 |
||||
*/ |
||||
public Order: number; |
||||
/** |
||||
* 是否启用 |
||||
*/ |
||||
public Enabled: boolean; |
||||
/** |
||||
* 是否可见 |
||||
*/ |
||||
public Visible: boolean; |
||||
/** |
||||
* 必填 |
||||
*/ |
||||
public Required: boolean; |
||||
/** |
||||
* 验证规则名称 |
||||
*/ |
||||
public RuleName: string; |
||||
/** |
||||
* 验证规则值 |
||||
*/ |
||||
public RuleValue: string; |
||||
/** |
||||
* 物理单位 |
||||
*/ |
||||
public PhysicalUnit: string; |
||||
/** |
||||
* 属性名称 |
||||
*/ |
||||
public PropertyName: string; |
||||
/** |
||||
* 属性类型 |
||||
*/ |
||||
public PropertyType: number; |
||||
/** |
||||
* 属性值 |
||||
*/ |
||||
public PropertyValue: string; |
||||
} |
||||
@ -0,0 +1,405 @@
|
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import * as PIXI from 'pixi.js'; |
||||
import { AxShape } from './axShape'; |
||||
import { Sprite } from 'pixi.js'; |
||||
|
||||
/** |
||||
* 连接箭头 |
||||
*/ |
||||
export class AxArrowConnector extends AxShape { |
||||
|
||||
pointTexture: PIXI.Texture = PIXI.Texture.from('assets/images/handle-main.png') |
||||
pointSprites: Array<Sprite> = new Array<Sprite>(); |
||||
line: PIXI.Graphics; |
||||
text: PIXI.Text; |
||||
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, |
||||
}); |
||||
pts: PIXI.Point[]; |
||||
|
||||
markerStart = true;// 是否绘制起始箭头
|
||||
markerEnd = true;// 是否绘制结束箭头
|
||||
constructor(assetData: any, workingArea: WorkingAreaComponent,markerStart: boolean,markerEnd:boolean) { |
||||
super(assetData, workingArea); |
||||
|
||||
this.markerStart = markerStart; |
||||
this.markerEnd = markerEnd; |
||||
|
||||
this.name = assetData.Id; |
||||
this.text = new PIXI.Text(this.assetData.Name |
||||
+ '\r\n' |
||||
+ this.assetData.PropertyInfos?.find((item: { PropertyName: string; }) => |
||||
item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||
this.line = new PIXI.Graphics(); |
||||
this.addChild(this.text); |
||||
this.addChild(this.line); |
||||
this.workingArea.backgroundImage.addChild(this); |
||||
this.refresh(); |
||||
this.drawPoints(); |
||||
this.sortableChildren = true; |
||||
this.text.zIndex = this.children.length; |
||||
} |
||||
|
||||
public drawPoints() { |
||||
this.assetData.MultiPoint.forEach(element => { |
||||
var point = new Sprite(this.pointTexture); |
||||
point.position = element; |
||||
point.anchor.set(0.5); |
||||
this.pointSprites.push(point); |
||||
this.addChild(point); |
||||
}); |
||||
this.pointSprites.forEach((value, index, array) => { |
||||
value.interactive = true; |
||||
value.on('mousedown', event => { |
||||
event.stopPropagation(); |
||||
if (this.workingArea.allowEdit && this.assetData.GameMode === this.workingArea.canvasData.gameMode) { |
||||
event.currentTarget.data = event.data; |
||||
event.currentTarget.alpha = 0.5; |
||||
event.currentTarget.dragging = true; |
||||
} |
||||
}) |
||||
.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.y = newPosition.y; |
||||
|
||||
this.assetData.MultiPoint[index].x = newPosition.x; |
||||
this.assetData.MultiPoint[index].y = newPosition.y; |
||||
this.workingArea.canvasData.isChange = true; |
||||
this.refresh(); |
||||
} |
||||
}) |
||||
.on('rightclick', event => { |
||||
}); |
||||
}) |
||||
this.setPointsVisible(false); |
||||
} |
||||
|
||||
/** |
||||
* 设置点显示状态 |
||||
* @param b true/false |
||||
*/ |
||||
public setPointsVisible(b:boolean) { |
||||
this.pointSprites.forEach(item => { |
||||
item.visible = b; |
||||
}) |
||||
} |
||||
/** |
||||
* 刷新形状 |
||||
*/ |
||||
public refresh(): void { |
||||
const c = this.line; |
||||
const pts = this.assetData.MultiPoint; |
||||
if (pts.length < 2) { |
||||
return; |
||||
} |
||||
this.text.position = pts[0]; |
||||
this.text.anchor.set(0.5, 1); |
||||
this.text.text = this.assetData.Name |
||||
+ '\r\n' |
||||
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue; |
||||
const strokeWidth = 1; |
||||
const startWidth = 30 + strokeWidth; |
||||
const endWidth = 30 + strokeWidth; |
||||
const edgeWidth = this.assetData.Thickness === 0 ? 10 : this.assetData.Thickness; // 宽度
|
||||
const openEnded = false; |
||||
|
||||
const spacing = (openEnded) ? 0 : 0 + strokeWidth / 2; |
||||
const startSize = 30 + strokeWidth; |
||||
const endSize = 30 + strokeWidth; |
||||
const isRounded = true; |
||||
const lineColor = 0x000000; |
||||
const fillColor: number = this.assetData.Color.substring(0, 7).replace('#', '0x');; |
||||
|
||||
const pe = pts[pts.length - 1]; |
||||
|
||||
let i0 = 1; |
||||
|
||||
while (i0 < pts.length - 1 && pts[i0].x === pts[0].x && pts[i0].y === pts[0].y) { |
||||
i0++; |
||||
} |
||||
|
||||
const dx = pts[i0].x - pts[0].x; |
||||
const dy = pts[i0].y - pts[0].y; |
||||
const dist = Math.sqrt(dx * dx + dy * dy); |
||||
|
||||
if (dist === 0) { |
||||
return; |
||||
} |
||||
let nx = dx / dist; |
||||
let nx1 = nx; |
||||
let nx2 = nx; |
||||
let ny = dy / dist; |
||||
let ny2 = ny; |
||||
let ny1 = ny; |
||||
let orthx = edgeWidth * ny; |
||||
let orthy = -edgeWidth * nx; |
||||
|
||||
const fns = []; |
||||
|
||||
// if (isRounded) {
|
||||
// // c.setLineJoin('round');
|
||||
// c.lineTextureStyle({ join: PIXI.LINE_JOIN.ROUND });
|
||||
// } else if (pts.length > 2) {
|
||||
// // Only mitre if there are waypoints
|
||||
// // c.setMiterLimit(1.42);
|
||||
// c.lineTextureStyle({ miterLimit: 1.42 });
|
||||
// }
|
||||
// c.lineStyle(1, 0x000000, 1);
|
||||
c.clear(); |
||||
c.lineTextureStyle({ width: 1, color: lineColor, join: PIXI.LINE_JOIN.ROUND }); |
||||
|
||||
const startNx = nx; |
||||
const startNy = ny; |
||||
if (!openEnded) { |
||||
c.beginFill(fillColor); |
||||
} |
||||
if (this.markerStart && !openEnded) { |
||||
this.paintMarker(c, pts[0].x, pts[0].y, nx, ny, startSize, startWidth, edgeWidth, spacing, true); |
||||
} else { |
||||
const outStartX = pts[0].x + orthx / 2 + spacing * nx; |
||||
const outStartY = pts[0].y + orthy / 2 + spacing * ny; |
||||
const inEndX = pts[0].x - orthx / 2 + spacing * nx; |
||||
const inEndY = pts[0].y - orthy / 2 + spacing * ny; |
||||
|
||||
if (openEnded) { |
||||
c.moveTo(outStartX, outStartY); |
||||
fns.push( () => { |
||||
c.lineTo(inEndX, inEndY); |
||||
}); |
||||
} else { |
||||
c.moveTo(inEndX, inEndY); |
||||
c.lineTo(outStartX, outStartY); |
||||
} |
||||
} |
||||
let dx1 = 0; |
||||
let dy1 = 0; |
||||
let dist1 = 0; |
||||
|
||||
for (let i = 0; i < pts.length - 2; i++) { |
||||
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; |
||||
dy1 = pts[i + 2].y - pts[i + 1].y; |
||||
|
||||
dist1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); |
||||
|
||||
if (dist1 !== 0) { |
||||
nx1 = dx1 / dist1; |
||||
ny1 = dy1 / dist1; |
||||
|
||||
const tmp1 = nx * nx1 + ny * ny1; |
||||
const tmp = Math.max(Math.sqrt((tmp1 + 1) / 2), 0.04); |
||||
|
||||
nx2 = (nx + nx1); |
||||
ny2 = (ny + ny1); |
||||
|
||||
const dist2 = Math.sqrt(nx2 * nx2 + ny2 * ny2); |
||||
|
||||
if (dist2 !== 0) { |
||||
nx2 = nx2 / dist2; |
||||
ny2 = ny2 / dist2; |
||||
|
||||
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 outX = pts[i + 1].x + ny2 * edgeWidth / 2 / angleFactor; |
||||
const outY = pts[i + 1].y - nx2 * edgeWidth / 2 / angleFactor; |
||||
const inX = pts[i + 1].x - ny2 * edgeWidth / 2 / angleFactor; |
||||
const inY = pts[i + 1].y + nx2 * edgeWidth / 2 / angleFactor; |
||||
|
||||
if (pos === 0 || !isRounded) { |
||||
c.lineTo(outX, outY); |
||||
|
||||
((x, y) => { |
||||
fns.push(() => { |
||||
c.lineTo(x, y); |
||||
}); |
||||
})(inX, inY); |
||||
} else if (pos === -1) { |
||||
const c1x = inX + ny * edgeWidth; |
||||
const c1y = inY - nx * edgeWidth; |
||||
const c2x = inX + ny1 * edgeWidth; |
||||
const c2y = inY - nx1 * edgeWidth; |
||||
c.lineTo(c1x, c1y); |
||||
if (isRounded) { |
||||
c.quadraticCurveTo(outX, outY, c2x, c2y); // 圆角
|
||||
} else { |
||||
c.lineTo(outX, outY); |
||||
} |
||||
((x, y) => { |
||||
fns.push(() => { |
||||
c.lineTo(x, y); |
||||
}); |
||||
})(inX, inY); |
||||
} else { |
||||
c.lineTo(outX, outY); |
||||
|
||||
((x, y) => { |
||||
const c1x = outX - ny * edgeWidth; |
||||
const c1y = outY + nx * edgeWidth; |
||||
const c2x = outX - ny1 * edgeWidth; |
||||
const c2y = outY + nx1 * edgeWidth; |
||||
|
||||
fns.push(() => { |
||||
if (isRounded) { |
||||
c.quadraticCurveTo(x, y, c1x, c1y); |
||||
} else { |
||||
c.lineTo(x, y); |
||||
} |
||||
}); |
||||
fns.push(() => { |
||||
c.lineTo(c2x, c2y); |
||||
}); |
||||
})(inX, inY); |
||||
} |
||||
|
||||
nx = nx1; |
||||
ny = ny1; |
||||
} |
||||
} |
||||
} |
||||
orthx = edgeWidth * ny1; |
||||
orthy = - edgeWidth * nx1; |
||||
|
||||
if (this.markerEnd && !openEnded) { |
||||
this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, false); |
||||
} else { |
||||
c.lineTo(pe.x - spacing * nx1 + orthx / 2, pe.y - spacing * ny1 + orthy / 2); |
||||
|
||||
const inStartX = pe.x - spacing * nx1 - orthx / 2; |
||||
const inStartY = pe.y - spacing * ny1 - orthy / 2; |
||||
|
||||
if (!openEnded) { |
||||
c.lineTo(inStartX, inStartY); |
||||
} else { |
||||
c.moveTo(inStartX, inStartY); |
||||
|
||||
fns.splice(0, 0, () => { |
||||
c.moveTo(inStartX, inStartY); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
for (let i = fns.length - 1; i >= 0; i--) { |
||||
fns[i](); |
||||
} |
||||
|
||||
if (openEnded) |
||||
{ |
||||
c.closePath(); |
||||
} |
||||
else |
||||
{ |
||||
c.closePath(); |
||||
c.endFill(); |
||||
} |
||||
|
||||
// c.setShadow(false);
|
||||
|
||||
// c.setMiterLimit(4);
|
||||
|
||||
// if (isRounded)
|
||||
// {
|
||||
// c.setLineJoin('flat');
|
||||
// }
|
||||
|
||||
// if (pts.length > 2)
|
||||
// {
|
||||
// c.setMiterLimit(4);
|
||||
// if (markerStart && !openEnded)
|
||||
// {
|
||||
// c.begin();
|
||||
// this.paintMarker(c, pts[0].x, pts[0].y, startNx, startNy, startSize, startWidth, edgeWidth, spacing, true);
|
||||
// c.stroke();
|
||||
// c.end();
|
||||
// }
|
||||
|
||||
// if (markerEnd && !openEnded)
|
||||
// {
|
||||
// c.begin();
|
||||
// this.paintMarker(c, pe.x, pe.y, -nx, -ny, endSize, endWidth, edgeWidth, spacing, true);
|
||||
// c.stroke();
|
||||
// c.end();
|
||||
// }
|
||||
// }
|
||||
} |
||||
paintMarker(c: PIXI.Graphics, ptX: number, ptY: number, nx: number, ny: number, |
||||
size: number, arrowWidth: number, edgeWidth: number, spacing: number, initialMove: boolean) { |
||||
const widthArrowRatio = edgeWidth / arrowWidth; |
||||
const orthx = edgeWidth * ny / 2; |
||||
const orthy = -edgeWidth * nx / 2; |
||||
|
||||
const spaceX = (spacing + size) * nx; |
||||
const spaceY = (spacing + size) * ny; |
||||
|
||||
if (initialMove) { |
||||
c.moveTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||
} else { |
||||
c.lineTo(ptX - orthx + spaceX, ptY - orthy + spaceY); |
||||
} |
||||
c.lineTo(ptX - orthx / widthArrowRatio + spaceX, ptY - orthy / widthArrowRatio + spaceY); |
||||
c.lineTo(ptX + spacing * nx, ptY + spacing * ny); |
||||
c.lineTo(ptX + orthx / widthArrowRatio + spaceX, ptY + orthy / widthArrowRatio + spaceY); |
||||
c.lineTo(ptX + orthx + spaceX, ptY + orthy + spaceY); |
||||
} |
||||
relativeCcw(x1: number, y1: number, x2: number, y2: number, px: number, py: number) { |
||||
x2 -= x1; |
||||
y2 -= y1; |
||||
px -= x1; |
||||
py -= y1; |
||||
let ccw = px * y2 - py * x2; |
||||
|
||||
if (ccw === 0.0) { |
||||
ccw = px * x2 + py * y2; |
||||
|
||||
if (ccw > 0.0) { |
||||
px -= x2; |
||||
py -= y2; |
||||
ccw = px * x2 + py * y2; |
||||
|
||||
if (ccw < 0.0) { |
||||
ccw = 0.0; |
||||
} |
||||
} |
||||
} |
||||
return (ccw < 0.0) ? -1 : ((ccw > 0.0) ? 1 : 0); |
||||
} |
||||
|
||||
redraw(): void{ |
||||
this.pointSprites.forEach(item => { |
||||
item.destroy(); |
||||
}) |
||||
this.pointSprites.splice(0, this.pointSprites.length); |
||||
this.refresh(); |
||||
this.drawPoints(); |
||||
} |
||||
} |
||||
@ -0,0 +1,443 @@
|
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import * as ObjectID from 'bson-objectid'; |
||||
import { GameMode } from './gameMode'; |
||||
import { PaintMode } from './paintModel'; |
||||
import * as PIXI from 'pixi.js'; |
||||
import { PropertyInfo } from './PropertyInfo'; |
||||
import { AxShape } from './axShape'; |
||||
import { Sprite } from 'pixi.js'; |
||||
import { AxArrowConnector } from './axArrowConnector'; |
||||
|
||||
/** |
||||
* 安信图片形状 |
||||
* AxImageShape |
||||
*/ |
||||
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; |
||||
selectionBox = new PIXI.Graphics(); |
||||
connectPointTexture = PIXI.Texture.from('assets/images/handle-secondary.png'); |
||||
connectPoint: Sprite; |
||||
// 可移动的
|
||||
|
||||
// 可选中的
|
||||
|
||||
// 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 => {
|
||||
|
||||
// })
|
||||
// .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) { |
||||
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);
|
||||
// });
|
||||
|
||||
// // 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);
|
||||
// });
|
||||
|
||||
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.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), |
||||
}; |
||||
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; |
||||
} |
||||
} |
||||
@ -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); |
||||
} |
||||
} |
||||
@ -0,0 +1,80 @@
|
||||
import { Constructor } from '@angular/material/core/common-behaviors/constructor'; |
||||
import * as PIXI from 'pixi.js'; |
||||
import { Point, Rectangle, Graphics, Container } from 'pixi.js'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
|
||||
/** |
||||
* 安信形状 |
||||
*/ |
||||
export class AxShape extends Container { |
||||
assetData: any; |
||||
workingArea: WorkingAreaComponent; |
||||
// 可以被移动的
|
||||
moveable = true; |
||||
// 可以被选中的
|
||||
selectable = true; |
||||
|
||||
constructor(assetData: any, workingArea: WorkingAreaComponent) { |
||||
super(); |
||||
this.assetData = assetData; |
||||
this.workingArea = workingArea; |
||||
this.workingArea.backgroundImage.addChild(this); |
||||
this.interactive = true; |
||||
this.buttonMode = true; |
||||
this.on('mousedown', event => { |
||||
console.log(this.assetData); |
||||
event.stopPropagation(); |
||||
if (this.selectable) { |
||||
this.workingArea.selection.selectOne(this); |
||||
} |
||||
if (this.moveable) { |
||||
event.currentTarget.data = event.data; |
||||
event.currentTarget.alpha = 0.5; |
||||
event.currentTarget.dragging = true; |
||||
|
||||
event.currentTarget.dragPoint = event.data.getLocalPosition(event.currentTarget.parent); |
||||
event.currentTarget.dragPoint.x -= event.currentTarget.x; |
||||
event.currentTarget.dragPoint.y -= event.currentTarget.y; |
||||
} |
||||
}) |
||||
.on('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 => { |
||||
|
||||
}) |
||||
.on('mouseover', event => { |
||||
event.stopPropagation(); |
||||
}) |
||||
.on('mouseout', event => { |
||||
event.stopPropagation(); |
||||
}); |
||||
} |
||||
redraw(): void { |
||||
|
||||
} |
||||
|
||||
refresh(): void{ |
||||
|
||||
} |
||||
} |
||||
@ -0,0 +1,68 @@
|
||||
import { Graphics, Sprite, Text } from "pixi.js"; |
||||
import { WorkingAreaComponent } from "../working-area.component"; |
||||
import { AxArrowConnector } from "./axArrowConnector"; |
||||
import { AxImageShape } from "./axImageShape"; |
||||
import { AxShape } from "./axShape"; |
||||
import { MultipointIcon } from "./multipointIcon"; |
||||
import { PolygonIcon } from "./polygonIcon"; |
||||
|
||||
|
||||
export class Legend extends AxShape{ |
||||
background: Graphics = null; |
||||
data:Map<string,string> = new Map<string,string>() |
||||
/** |
||||
* |
||||
*/ |
||||
constructor(workingArea: WorkingAreaComponent) { |
||||
super(null, workingArea); |
||||
this.draw(); |
||||
} |
||||
|
||||
getData() { |
||||
this.workingArea.backgroundImage.children.forEach(item => { |
||||
if (item instanceof AxImageShape|| item instanceof AxArrowConnector || item instanceof PolygonIcon || item instanceof MultipointIcon) { |
||||
if (!this.data.has(item.assetData.Name)) { |
||||
this.data[item.assetData.Name] = item.assetData.ImageUrl; |
||||
} |
||||
} |
||||
}) |
||||
} |
||||
|
||||
draw() { |
||||
this.getData(); |
||||
this.background = new Graphics(); |
||||
this.background.lineStyle(1, 0xff0000); |
||||
this.background.beginFill(0xffffff); |
||||
this.background.drawRect(0, 0, 200, 300); |
||||
this.background.endFill(); |
||||
this.background.x = -(this.parent.width/2/ this.parent.scale.x); |
||||
this.background.y = -(this.parent.height/2/ this.parent.scale.x); |
||||
this.addChild(this.background); |
||||
var showName: Text = new Text('图例'); |
||||
showName.x = 0; |
||||
showName.y = 0; |
||||
this.background.addChild(showName); |
||||
var showDescrption: Text = new Text('说明') |
||||
showDescrption.x = 100; |
||||
showDescrption.y = 0; |
||||
this.background.addChild(showDescrption); |
||||
let index = 1; |
||||
this.data.forEach((value, key) => { |
||||
var image: Sprite = Sprite.from(value); |
||||
image.width = 32; |
||||
image.height = 32; |
||||
image.x = 0; |
||||
image.y = index * 32; |
||||
this.background.addChild(image); |
||||
var description = new Text(key); |
||||
description.x = 100; |
||||
description.y = index * 32; |
||||
this.background.addChild(description); |
||||
index++; |
||||
}) |
||||
} |
||||
redraw() { |
||||
this.background.destroy(); |
||||
this.draw(); |
||||
} |
||||
} |
||||
@ -1,57 +0,0 @@
|
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import * as PIXI from 'pixi.js'; |
||||
|
||||
/** |
||||
* 管线 |
||||
*/ |
||||
export class Pipeline extends PIXI.Container { |
||||
public line: PIXI.Graphics = new PIXI.Graphics(); |
||||
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
||||
super(); |
||||
this.name = this.assetData.Id; |
||||
this.x = this.assetData.Point.x; |
||||
this.y = this.assetData.Point.y; |
||||
this.workingArea.backgroundImage.addChild(this); |
||||
this.addChild(this.line); |
||||
// 画线图标
|
||||
this.refresh(); |
||||
this.interactive = true; |
||||
this.on('mousedown', event => { |
||||
console.log(this.assetData); |
||||
event.stopPropagation(); |
||||
this.workingArea.selection.selectOne(this); |
||||
}); |
||||
} |
||||
/** |
||||
* 刷新 |
||||
*/ |
||||
public refresh() { |
||||
this.line.clear(); |
||||
this.line.lineStyle(5, 0x0000ff, 1); |
||||
for (let i = 0, count = this.assetData.MultiPoint.length; i < count; i++) { |
||||
const pointA = this.assetData.MultiPoint[i]; |
||||
if (i === 0) { |
||||
this.line.moveTo(pointA.x, pointA.y); |
||||
} else { |
||||
this.line.lineTo(pointA.x, pointA.y); |
||||
if (i === count - 1) { |
||||
const pointB = this.assetData.MultiPoint[i - 1]; |
||||
const angle = Math.atan2((pointA.y - pointB.y), (pointA.x - pointB.x)) * (180 / Math.PI) + 90; |
||||
this.line.beginFill(0x0000ff); |
||||
this.line.drawStar(pointA.x, pointA.y, 3, 5, 0, (Math.PI / 180 * angle)); |
||||
} else { |
||||
this.line.drawCircle(pointA.x, pointA.y, 5); |
||||
} |
||||
} |
||||
} |
||||
this.line.endFill(); |
||||
// if (this.assetData.MultiPoint.length >= 2) {
|
||||
// const pointA = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 2];
|
||||
// const pointB = this.assetData.MultiPoint[this.assetData.MultiPoint.length - 1];
|
||||
// const angle = Math.atan2((pointB.y - pointA.y), (pointB.x - pointA.x)) * (180 / Math.PI) + 90;
|
||||
// this.beginFill(0x0000ff);
|
||||
// this.drawStar(pointB.x, pointB.y, 3, 5, 0, (Math.PI / 180 * angle));
|
||||
// this.endFill();
|
||||
// }
|
||||
} |
||||
} |
||||
@ -1,59 +1,59 @@
|
||||
import { OldFilmFilter } from 'pixi-filters'; |
||||
import { WorkingAreaComponent } from '../working-area.component'; |
||||
import { PaintMode } from './paintModel'; |
||||
import { SinglePointIcon } from './singlePointIcon'; |
||||
import * as PIXI from 'pixi.js'; |
||||
// import { OldFilmFilter } from 'pixi-filters';
|
||||
// import { WorkingAreaComponent } from '../working-area.component';
|
||||
// import { PaintMode } from './paintModel';
|
||||
// import { SinglePointIcon } from './axImageShape';
|
||||
// import * as PIXI from 'pixi.js';
|
||||
|
||||
/** |
||||
* 汽车放置区域 |
||||
*/ |
||||
export class PutCarArea extends PIXI.Container { |
||||
public polygonGraphics: PIXI.Graphics = new PIXI.Graphics(); |
||||
constructor(public assetData: any, private workingArea: WorkingAreaComponent) { |
||||
super(); |
||||
this.name = this.assetData.Id; |
||||
this.x = this.assetData.Point.x; |
||||
this.y = this.assetData.Point.y; |
||||
this.workingArea.backgroundImage.addChild(this); |
||||
this.sortableChildren = true; |
||||
// /**
|
||||
// * 汽车放置区域
|
||||
// */
|
||||
// export class PutCarArea extends PIXI.Container {
|
||||
// public polygonGraphics: PIXI.Graphics = new PIXI.Graphics();
|
||||
// constructor(public assetData: any, private workingArea: WorkingAreaComponent) {
|
||||
// super();
|
||||
// this.name = this.assetData.Id;
|
||||
// this.x = this.assetData.Point.x;
|
||||
// this.y = this.assetData.Point.y;
|
||||
// this.workingArea.backgroundImage.addChild(this);
|
||||
// this.sortableChildren = true;
|
||||
|
||||
// 填充多边形
|
||||
// // 填充多边形
|
||||
|
||||
const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x'); |
||||
const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255; |
||||
this.polygonGraphics.beginFill(color, angle); |
||||
this.polygonGraphics.drawPolygon(this.assetData.MultiPoint); |
||||
this.polygonGraphics.endFill(); |
||||
this.addChild(this.polygonGraphics); |
||||
// 添加选中事件
|
||||
this.polygonGraphics.interactive = true; |
||||
this.polygonGraphics |
||||
.on('pointerdown', (event) => { |
||||
if (this.workingArea.getPaintMode() === PaintMode.Car) { |
||||
this.workingArea.selectCar.Point = |
||||
new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y); |
||||
this.workingArea.selectCar.Angle = this.assetData.Direction; |
||||
const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea); |
||||
this.workingArea.setPaintMode(PaintMode.endPaint); |
||||
} |
||||
}) |
||||
.on('pointerup', (event) => { |
||||
// const color: number = this.assetData.Color.substring(0, 7).replace('#', '0x');
|
||||
// const angle: number = parseInt(this.assetData.Color.substring(7), 16) / 255;
|
||||
// this.polygonGraphics.beginFill(color, angle);
|
||||
// this.polygonGraphics.drawPolygon(this.assetData.MultiPoint);
|
||||
// this.polygonGraphics.endFill();
|
||||
// this.addChild(this.polygonGraphics);
|
||||
// // 添加选中事件
|
||||
// this.polygonGraphics.interactive = true;
|
||||
// this.polygonGraphics
|
||||
// .on('pointerdown', (event) => {
|
||||
// if (this.workingArea.getPaintMode() === PaintMode.Car) {
|
||||
// this.workingArea.selectCar.Point =
|
||||
// new PIXI.Point(this.workingArea.previewSinglePointIcon.x, this.workingArea.previewSinglePointIcon.y);
|
||||
// this.workingArea.selectCar.Angle = this.assetData.Direction;
|
||||
// const car = new SinglePointIcon(this.workingArea.selectCar, this.workingArea);
|
||||
// this.workingArea.setPaintMode(PaintMode.endPaint);
|
||||
// }
|
||||
// })
|
||||
// .on('pointerup', (event) => {
|
||||
|
||||
}) |
||||
.on('pointerupoutside', (event) => { |
||||
// })
|
||||
// .on('pointerupoutside', (event) => {
|
||||
|
||||
}) |
||||
.on('pointerover', (event) => { |
||||
this.workingArea.previewSinglePointIcon.filters = null; |
||||
this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1; |
||||
// 设置车辆方向
|
||||
this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction; |
||||
console.log(this.assetData.Name); |
||||
}) |
||||
.on('pointerout', (event) => { |
||||
this.workingArea.previewSinglePointIcon.filters = [ |
||||
new OldFilmFilter() |
||||
]; |
||||
}); |
||||
} |
||||
} |
||||
// })
|
||||
// .on('pointerover', (event) => {
|
||||
// this.workingArea.previewSinglePointIcon.filters = null;
|
||||
// this.workingArea.previewSinglePointIcon.zIndex = this.zIndex + 1;
|
||||
// // 设置车辆方向
|
||||
// this.workingArea.previewSinglePointIcon.angle = this.assetData.Direction;
|
||||
// console.log(this.assetData.Name);
|
||||
// })
|
||||
// .on('pointerout', (event) => {
|
||||
// this.workingArea.previewSinglePointIcon.filters = [
|
||||
// new OldFilmFilter()
|
||||
// ];
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,249 +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 { throwMatDialogContentAlreadyAttachedError } from '@angular/material/dialog'; |
||||
|
||||
/** |
||||
* 单点图标 |
||||
*/ |
||||
export class SinglePointIcon extends PIXI.Container { |
||||
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, |
||||
}); |
||||
|
||||
public text = new PIXI.Text(this.assetData.Name |
||||
+ '\r\n' |
||||
+ this.assetData.PropertyInfos?.find(item => item.PropertyName === '名称/编号')?.PropertyValue, this.style); |
||||
|
||||
/** |
||||
* 选中圆点 |
||||
*/ |
||||
public selectedPointTexture = PIXI.Texture.from('assets/images/handle-main.png'); |
||||
private image = PIXI.Sprite.from(this.assetData.ImageUrl); |
||||
public graphics = new PIXI.Graphics(); |
||||
public connectionPoint = new PIXI.Graphics(); |
||||
|
||||
// 显示连接点
|
||||
public showConnectionPoint = false; |
||||
|
||||
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; |
||||
|
||||
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); |
||||
if (this.assetData.CanConnection && this.parent === this.workingArea.backgroundImage) { |
||||
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(this.position.x, this.position.y)); |
||||
const tempData = { |
||||
Id: ObjectID.default.generate(), |
||||
MultiPoint: JSON.parse(JSON.stringify(this.workingArea.paintPoints)), |
||||
Point: new PIXI.Point(0, 0), |
||||
Name: '管线', |
||||
LinkedObjects: [], |
||||
}; |
||||
this.workingArea.paintingPipeline = new Pipeline(tempData, this.workingArea); |
||||
this.workingArea.paintingPipeline.assetData.LinkedObjects.push(this); |
||||
this.assetData.Pipelines.push(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(this.position.x, this.position.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.paintingPipelineFinish(); |
||||
} |
||||
} |
||||
} |
||||
// 如果链接对象不为空,禁止移动
|
||||
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 => { |
||||
// this.connectionPoint.visible = true;
|
||||
this.setSelectionBox(true); |
||||
}) |
||||
.on('mouseout', event => { |
||||
// this.connectionPoint.visible = false;
|
||||
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.connectionPoint.beginFill(); |
||||
this.connectionPoint.drawCircle(0, 0, 5); |
||||
this.connectionPoint.endFill(); |
||||
this.connectionPoint.visible = true; |
||||
this.connectionPoint.interactive = true; |
||||
this.connectionPoint |
||||
.on('mouseover', event => { |
||||
console.log('b'); |
||||
this.graphics.lineStyle(2, 0x00EB00, 1); |
||||
this.graphics.drawRect(- this.connectionPoint.width / 2, - this.connectionPoint.width / 2, |
||||
this.connectionPoint.width, this.connectionPoint.width); |
||||
}) |
||||
.on('mouseout', event => { |
||||
this.graphics.clear(); |
||||
}); |
||||
this.addChild(this.text); |
||||
this.addChild(this.image); |
||||
this.addChild(this.graphics); |
||||
// this.addChild(this.connectionPoint);
|
||||
|
||||
// // up
|
||||
// const up = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// up.anchor.set(0.5);
|
||||
// up.x = this.image.x;
|
||||
// up.y = this.image.y - (this.image.height / 2);
|
||||
// this.addChild(up);
|
||||
// // up-left
|
||||
// const upLeft = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// upLeft.anchor.set(0.5);
|
||||
// upLeft.x = this.image.x - (this.image.width / 2);
|
||||
// upLeft.y = this.image.y - (this.image.height / 2);
|
||||
// this.addChild(upLeft);
|
||||
// // up-right
|
||||
// const upRight = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// upRight.anchor.set(0.5);
|
||||
// upRight.x = this.image.x + (this.image.width / 2);
|
||||
// upRight.y = this.image.y - (this.image.height / 2);
|
||||
// this.addChild(upRight);
|
||||
// // down
|
||||
// const down = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// down.anchor.set(0.5);
|
||||
// down.x = this.image.x;
|
||||
// down.y = this.image.y + (this.image.height / 2);
|
||||
// this.addChild(down);
|
||||
// // down-left
|
||||
// const downLeft = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// downLeft.anchor.set(0.5);
|
||||
// downLeft.x = this.image.x - (this.image.width / 2);
|
||||
// downLeft.y = this.image.y + (this.image.height / 2);
|
||||
// this.addChild(downLeft);
|
||||
// // down-right
|
||||
// const downRight = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// downRight.anchor.set(0.5);
|
||||
// downRight.x = this.image.x + (this.image.width / 2);
|
||||
// downRight.y = this.image.y + (this.image.height / 2);
|
||||
// this.addChild(downRight);
|
||||
// // left
|
||||
// const left = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// left.anchor.set(0.5);
|
||||
// left.x = this.image.x - (this.image.width / 2);
|
||||
// left.y = this.image.y;
|
||||
// this.addChild(left);
|
||||
// // right
|
||||
// const right = new PIXI.Sprite(this.selectedPointTexture);
|
||||
// right.anchor.set(0.5);
|
||||
// right.x = this.image.x + (this.image.width / 2);
|
||||
// right.y = this.image.y;
|
||||
// this.addChild(right);
|
||||
} |
||||
// 设置选择框
|
||||
public setSelectionBox(b: boolean) { |
||||
if (b) { |
||||
this.graphics.lineStyle(2, 0x00EB00, 1); |
||||
this.graphics.drawRect(- this.image.width / 2, - this.image.height / 2, this.image.width, this.image.height); |
||||
} else { |
||||
this.graphics.clear(); |
||||
} |
||||
} |
||||
// 设置名称
|
||||
public setNameVisible(value: boolean, mode: GameMode) { |
||||
if (this.assetData.GameMode === mode) { |
||||
this.text.visible = value; |
||||
} |
||||
} |
||||
// 刷新
|
||||
public refresh() { |
||||
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; |
||||
} |
||||
} |
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 33 KiB |
Loading…
Reference in new issue