chenjingyu
4 years ago
34 changed files with 2539 additions and 1413 deletions
@ -1,6 +1,6 @@ |
|||||||
{ |
{ |
||||||
"/api": { |
"/api": { |
||||||
"target": "http://121.37.20.190:8000", |
"target": "http://39.106.78.171:8000", |
||||||
"secure": false, |
"secure": false, |
||||||
"changeOrigin": true |
"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> |
<button mat-raised-button color="primary" (click)='open()' class="left">创建单位</button> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div> |
<div > |
||||||
<table mat-table [dataSource]="dataSource"class="mat-elevation-z8"> |
<table mat-table [dataSource]="dataSource"class="mat-elevation-z8"> |
||||||
|
|
||||||
<ng-container matColumnDef="company"> |
<ng-container matColumnDef="company"> |
||||||
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
<th mat-header-cell *matHeaderCellDef>单位类型</th> |
||||||
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
<td mat-cell *matCellDef="let element">{{element.name}}</td> |
||||||
</ng-container> |
</ng-container> |
||||||
|
|
||||||
<ng-container matColumnDef="template"> |
<ng-container matColumnDef="template"> |
||||||
<th mat-header-cell *matHeaderCellDef>单位信息模板</th> |
<th mat-header-cell *matHeaderCellDef>单位信息模板</th> |
||||||
<td mat-cell *matCellDef="let element">{{element.basicCategoryName}}</td> |
<td mat-cell *matCellDef="let element">{{element.basicCategoryName}}</td> |
||||||
</ng-container> |
</ng-container> |
||||||
|
|
||||||
<ng-container matColumnDef="fireControl"> |
<ng-container matColumnDef="fireControl"> |
||||||
<th mat-header-cell *matHeaderCellDef>消防要素模板</th> |
<th mat-header-cell *matHeaderCellDef>消防要素模板</th> |
||||||
<td mat-cell *matCellDef="let element">{{element.fireCategoryName}}</td> |
<td mat-cell *matCellDef="let element">{{element.fireCategoryName}}</td> |
||||||
</ng-container> |
</ng-container> |
||||||
|
|
||||||
<ng-container matColumnDef="facilityCategory"> |
<ng-container matColumnDef="facilityCategory"> |
||||||
<th mat-header-cell *matHeaderCellDef>消防设施模板</th> |
<th mat-header-cell *matHeaderCellDef>消防设施模板</th> |
||||||
<td mat-cell *matCellDef="let element">{{element.facilityCategoryName}}</td> |
<td mat-cell *matCellDef="let element">{{element.facilityCategoryName}}</td> |
||||||
</ng-container> |
</ng-container> |
||||||
|
|
||||||
<ng-container matColumnDef="operation"> |
<ng-container matColumnDef="operation"> |
||||||
<th mat-header-cell *matHeaderCellDef>操作</th> |
<th mat-header-cell *matHeaderCellDef>操作</th> |
||||||
<td mat-cell *matCellDef="let element"> |
<td mat-cell *matCellDef="let element"> |
||||||
|
|
||||||
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
<button mat-raised-button color="primary" class="marginLeft" (click)='edit(element)'> |
||||||
编辑 |
编辑 |
||||||
</button> |
</button> |
||||||
|
|
||||||
<button mat-raised-button color="primary" *ngIf=!element.enabled |
<button mat-raised-button color="primary" *ngIf=!element.enabled |
||||||
(click)='enabled(element)' class="marginLeft"> |
(click)='enabled(element)' class="marginLeft"> |
||||||
启用 |
启用 |
||||||
</button> |
</button> |
||||||
<button mat-raised-button color="warn" *ngIf=element.enabled |
<button mat-raised-button color="warn" *ngIf=element.enabled |
||||||
(click)='prohibit(element)'class="marginLeft"> |
(click)='prohibit(element)'class="marginLeft"> |
||||||
禁用 |
禁用 |
||||||
</button> |
</button> |
||||||
<button mat-raised-button color="warn" (click)='delete(element.id)'class="marginLeft"> |
<button mat-raised-button color="warn" (click)='delete(element.id)'class="marginLeft"> |
||||||
删除 |
删除 |
||||||
</button> |
</button> |
||||||
|
|
||||||
</td> |
</td> |
||||||
</ng-container> |
</ng-container> |
||||||
|
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> |
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr> |
||||||
|
|
||||||
</table> |
</table> |
||||||
|
</div> |
||||||
</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 { 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()
|
||||||
]; |
// ];
|
||||||
}); |
// });
|
||||||
} |
// }
|
||||||
} |
// }
|
||||||
|
|||||||
@ -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